/* ============================================
   Hermanos — Premium License Store
   Modern, clean design inspired by Lovable AI
   ============================================ */

/* === Reset & Base === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* === Self-hosted fonts (GDPR-safe; replaces Google Fonts CDN) — Inter body + Space Grotesk display === */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/assets/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2');
}

:root {
    /* === Premium Dark Mode (default) — cool near-black elevation ramp === */
    --bg-primary: #0B0C0E;       /* app base */
    --bg-tertiary: #0E0F12;      /* recessed wells */
    --bg-secondary: #131519;     /* nav / sidebar / section surface */
    --bg-input: #15171C;         /* inset inputs */
    --bg-card: #181B21;          /* raised card */
    --bg-hover: #1E222A;         /* row hover */
    --bg-card-hover: #232831;    /* card hover — clearly lifts */
    --border: #2A2E37;           /* cool hairline (solid: reads on dark surfaces AND on white chips) */
    --border-hover: #3A4150;
    --text-primary: #F4F5F7;
    --text-secondary: #ADB2BD;   /* lifted to clear WCAG AA on the new surfaces */
    --text-muted: #868D99;       /* lifted (was #666 — failed contrast) */
    --accent: #FAFBFC;           /* refined off-white */
    --accent-hover: #E6E8EC;
    --accent-contrast: #0B0C0E;  /* text / icon on an --accent fill */
    --accent-glow: rgba(255, 255, 255, 0.06);
    --accent-blue: #CCCCCC;
    --primary: #FFFFFF;
    --focus-ring: rgba(120, 170, 255, 0.55);
    --sale: #F0A23B;             /* the ONE sanctioned warm color (discount / flash / urgency) */
    --sale-strong: #E8881F;
    --on-sale: #1A1206;
    --success: #4ade80;
    --success-bg: rgba(34, 197, 94, 0.1);
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.1);
    --danger: #f87171;
    --danger-bg: rgba(239, 68, 68, 0.1);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius: 8px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
    --shadow-glow: none;
    --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);  /* raised-surface top sheen */
    /* Spacing scale (4 / 8px rhythm) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    /* Control heights (single source of truth) */
    --control-h: 44px;
    --control-h-sm: 36px;
    --control-h-lg: 52px;
    --control-pad-x: 16px;
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    /* Type scale */
    --fs-2xs: 0.6875rem;
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;
    --fs-4xl: 3rem;
    --fs-5xl: 3.75rem;
    --lh-tight: 1.12;
    --lh-snug: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;
    --ls-tight: -0.02em;
    --ls-tighter: -0.03em;
    --ls-wide: 0.04em;
    --ls-caps: 0.08em;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-display: 600;
}

/* === Light Theme === */
:root[data-theme="light"] {
    /* Monochrome — Premium Light Mode */
    --bg-primary: #FAFBFC;
    --bg-secondary: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F2F4F7;
    --bg-input: #FFFFFF;
    --bg-tertiary: #F4F6F8;
    --bg-hover: #EEF1F4;
    --border: #E3E7EC;
    --border-hover: #CED4DC;
    --text-primary: #0F1115;
    --text-secondary: #475063;   /* ~7:1 on white */
    --text-muted: #5B6473;       /* ~5.3:1 on white (was #777) */
    --accent: #111111;
    --accent-hover: #000000;
    --accent-contrast: #FFFFFF;
    --accent-glow: rgba(0, 0, 0, 0.06);
    --accent-blue: #333333;
    --primary: #111111;
    --focus-ring: rgba(37, 99, 235, 0.45);
    --sale: #C2670C;             /* deeper amber for contrast on light surfaces */
    --sale-strong: #9A4F08;
    --on-sale: #FFFFFF;
    --success: #16a34a;
    --success-bg: rgba(22, 163, 74, 0.08);
    --warning: #d97706;
    --warning-bg: rgba(217, 119, 6, 0.08);
    --danger: #dc2626;
    --danger-bg: rgba(220, 38, 38, 0.06);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
    --shadow-glow: none;
    --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

[data-theme="light"] body::before {
    background: radial-gradient(ellipse at 50% -20%, rgba(0,0,0,0.03) 0%, transparent 70%);
}

[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .nav-toggle span {
    background: var(--text-secondary);
}

[data-theme="light"] .mobile-menu {
    background: var(--bg-secondary);
}

[data-theme="light"] .brand-text {
    background: linear-gradient(135deg, #111111, #333333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Logo theme switching */
.brand-logo { display: none; height: 35px; width: auto; }
.brand-logo-dark { display: block; }
[data-theme="light"] .brand-logo-dark { display: none; }
[data-theme="light"] .brand-logo-light { display: block; }
.footer-brand .brand-logo { height: 62px; }

[data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

/* overflow-x: clip (NOT hidden) — prevents horizontal bleed WITHOUT coercing
   overflow-y to auto, so the viewport stays the scroll container and
   position: sticky (e.g. the store category sidebar) works. */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
    font-family: var(--font);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip; /* clip (not hidden) — keep viewport as scroll container so sticky works */
}

/* === Typography system — display face on prominent headings + designed price === */
h1, h2,
.pp-title, .section-title, .hero h1, .hero h2 {
    font-family: var(--font-display);
    letter-spacing: var(--ls-tight);
    text-wrap: balance;
}
.card-price, .pp-buy-price, .pp-price, .pp-buy-price-original {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    letter-spacing: var(--ls-tighter);
}

/* Subtle background gradient */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 600px;
    background: radial-gradient(ellipse at 50% -20%, rgba(255,255,255,0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

/* === Navigation === */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(10, 10, 10, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    height: 64px;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 18px;
}

.brand-icon { display: flex; }

.brand-text {
    background: var(--accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
}

.nav-link:hover, .nav-link.active {
    color: var(--text-primary);
    background: var(--bg-card-hover);
}

.nav-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
}

.nav-link:hover .nav-icon, .nav-link.active .nav-icon {
    opacity: 1;
}

.nav-cart {
    position: relative;
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: var(--transition);
}
.nav-cart:hover { background: var(--bg-tertiary); border-color: var(--accent); }

.nav-cart .nav-icon {
    width: 18px;
    height: 18px;
}

.nav-user {
    position: relative;
    margin-left: 8px;
}

.nav-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 5px;
    min-height: 36px;
    box-sizing: border-box;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13.5px;
    font-family: var(--font);
    transition: all 0.2s ease;
}

.nav-user-btn:hover { border-color: var(--accent); color: var(--text-primary); }

.nav-user-name { font-weight: 500; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-balance { color: var(--success); font-weight: 700; font-size: 15px; text-align: center; padding: 8px 12px; }

.avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--bg-primary);
    overflow: hidden;
    flex-shrink: 0;
}
.avatar-svg { background: none; padding: 0; }
.avatar-svg svg { border-radius: 50%; }
.avatar-img { object-fit: cover; }
/* Avatar size variants (data-size) — replaces inline width/height/font-size */
.avatar[data-size="24"] { width: 24px; height: 24px; font-size: 10px; }
.avatar[data-size="28"] { width: 28px; height: 28px; font-size: 12px; }
.avatar[data-size="36"] { width: 36px; height: 36px; font-size: 15px; }
.avatar[data-size="80"] { width: 80px; height: 80px; font-size: 34px; }

/* Avatar Picker */
.avatar-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 0;
}
.avatar-option { cursor: pointer; }
.avatar-option input[type="radio"] { display: none; }
.avatar-option .avatar-preview {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    padding: 2px;
}
.avatar-option .avatar-preview svg { border-radius: 50%; }
.avatar-option input[type="radio"]:checked + .avatar-preview {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 255, 255,0.25);
}
.avatar-option:hover .avatar-preview {
    border-color: var(--accent);
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: var(--transition);
    box-shadow: var(--shadow-lg);
}

.nav-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13.5px;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.dropdown-item:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.dropdown-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.6;
}

.dropdown-item:hover .dropdown-icon { opacity: 1; }

.dropdown-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 6px 0;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav-toggle span {
    width: 20px; height: 2px;
    background: var(--text-secondary);
    border-radius: 2px;
    transition: var(--transition);
}

/* Mobile actions: cart + theme + hamburger — hidden on desktop */
.nav-actions {
    display: none;
    align-items: center;
    gap: 8px;
}

.nav-action-cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: var(--transition);
}

.nav-action-cart:hover, .nav-action-cart.active {
    color: var(--text-primary);
    background: var(--bg-card-hover);
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    padding: 16px 24px;
    z-index: 999;
    flex-direction: column;
    gap: 4px;
    /* Tall menus (logged-in + language grid) must scroll, not overflow off-screen */
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* drawer scroll doesn't chain to the page behind */
}

.mobile-menu.show { display: flex; }
html.menu-open, body.menu-open, html.notif-open, body.notif-open { overflow: hidden; }   /* lock the viewport scroll while the drawer / notification panel is open */

/* Drawer items must keep their natural height and let the menu scroll (overflow-y:auto
   above). Without this, a logged-in menu overflows max-height and flex shrinks its
   children; items with overflow:hidden (the lang/currency <details>) have their flex
   min-height:auto resolve to 0 and collapse to a 2px border — making Language/Currency
   invisible for logged-in users while guests (short menu, no overflow) saw them fine. */
.mobile-menu > * { flex-shrink: 0; }

/* Backdrop overlay — blocks taps on content while menu is open */
.mobile-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 998;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu-backdrop.show { display: block; }

.mobile-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    font-size: 15px;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.mobile-link:hover, .mobile-link.active {
    background: var(--bg-card);
    color: var(--text-primary);
}

.mobile-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.6;
}

.mobile-link:hover .mobile-icon, .mobile-link.active .mobile-icon { opacity: 1; }

.cart-badge-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--accent);
    color: var(--bg-primary);
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
    margin-left: 4px;
}

/* === Main Content === */
.main-content {
    padding-top: 64px;
    padding-bottom: 72px;   /* clear separation from the footer on every page */
    min-height: calc(100vh - 64px);
    position: relative;
    z-index: 1;
}

/* === Hero Section === */
.hero {
    text-align: center;
    padding: 60px 24px 28px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: var(--accent-glow);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
    margin-bottom: 24px;
}

.hero h1 {
    font-size: clamp(28px, 4.4vw, 46px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.hero h1 .gradient {
    background: linear-gradient(135deg, var(--accent), var(--accent-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero p {
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.7;
}

/* === Category icon (monochrome via mask; inherits currentColor for state changes) === */
.cat-ico {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--cat-ico) center / contain no-repeat;
    mask: var(--cat-ico) center / contain no-repeat;
}

/* === Quick category shortcuts (homepage, between hero and store) === */
.quick-cats {
    margin: 4px 0 28px;
}
.quick-cats-inner {
    position: relative;
}
.quick-cats-track {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.quick-cats-track::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.quick-cat {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 10px 6px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: transparent;
    text-decoration: none;
    transition: var(--transition);
}
.quick-cat:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}
.quick-cat.active {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    font-weight: 600;
}
.quick-cat .cat-ico {
    width: 24px;
    height: 24px;
}
.quick-cat-label {
    max-width: 100%;
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Bare scroll-affordance chevrons (no bg/border/circle) — shown by JS only when the strip overflows */
.quick-cats-chevron {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    -webkit-tap-highlight-color: transparent;
}
.quick-cats-chevron:hover {
    color: var(--text-primary);
}
.quick-cats-chevron.prev {
    left: -4px;
}
.quick-cats-chevron.next {
    right: -4px;
}

/* === Product Grid === */
.products-section {
    padding: 0 0 80px;
}

/* === Store Layout (Sidebar + Grid) === */
.store-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: start;
}

/* --- Sidebar --- */
/* Desktop sticky: stick the grid ITEM (it sits in a tall grid row, so it has room
   to travel). Sticking the inner .sidebar-sticky failed because its parent was only
   as tall as its own content (align-items:start), leaving nowhere to stick. */
.store-sidebar {
    position: sticky;
    top: 80px;
    align-self: start;
}
.sidebar-sticky {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Hide the scrollbar on this (and only this) sidebar scroll container: it scrolls
       internally inside the mobile filter drawer and the visible bar breaks the design.
       Stays fully scrollable via wheel / touch / keyboard — only the bar is hidden. */
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* old Edge / IE */
}
.sidebar-sticky::-webkit-scrollbar { display: none; }   /* WebKit: Chrome / Safari / new Edge */
/* Mobile filter-drawer entrance: the sheet slides in from the left and the backdrop fades.
   Declared globally (is-open / .filter-backdrop only ever exist on mobile). Honors
   prefers-reduced-motion (!important wins over the animation set in the 768px block). */
@keyframes hlDrawerSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes hlBackdropFade  { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .store-sidebar.is-open, .filter-backdrop { animation: none !important; }
}
.sidebar-search {
    position: relative;
}
.sidebar-search .search-form {
    max-width: 100%;
}
.sidebar-search .search-input {
    padding: 10px 14px 10px 38px;
    font-size: 13px;
    border-radius: var(--radius-md);
}
.sidebar-search .search-icon {
    left: 12px;
}
.sidebar-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 0 12px;
    margin-bottom: 8px;
}
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 500;
    transition: all 0.15s ease;
    position: relative;
}
.sidebar-nav-item:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}
.sidebar-nav-item.active {
    background: rgba(255, 255, 255,0.1);
    color: var(--accent);
    font-weight: 600;
}
.sidebar-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 2px;
    background: var(--accent);
}
.sidebar-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--bg-card);
    color: var(--text-muted);
    transition: all 0.15s ease;
}
.sidebar-nav-item:hover .sidebar-nav-icon,
.sidebar-nav-item.active .sidebar-nav-icon {
    background: rgba(255, 255, 255,0.12);
    color: var(--accent);
}
.sidebar-nav-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-nav-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-card);
    padding: 2px 7px;
    border-radius: 10px;
    flex-shrink: 0;
}
.sidebar-nav-item.active .sidebar-nav-count {
    background: rgba(255, 255, 255,0.15);
    color: var(--accent);
}

/* Subcategory navigation */
.sidebar-nav-item.has-subs {
    flex-wrap: wrap;
}
.sidebar-nav-arrow {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    margin-left: -4px;
}
.sidebar-nav-item.active .sidebar-nav-arrow {
    color: var(--accent);
}
.sidebar-sub-nav {
    display: none;
    flex-direction: column;
    gap: 1px;
    padding-left: 22px;
    margin-bottom: 2px;
    overflow: hidden;
}
.sidebar-sub-nav.open {
    display: flex;
}
.sidebar-sub-item {
    font-size: 12.5px;
    padding: 6px 12px;
    gap: 8px;
}
.sidebar-sub-item .sidebar-nav-label {
    font-size: 12.5px;
}
.sidebar-sub-item::before {
    display: none;
}
.sidebar-sub-item.active::before {
    display: block;
    left: -10px;
}
.sidebar-sub-sub-nav {
    padding-left: 16px;
}
.sidebar-sub-sub-item {
    font-size: 11.5px;
    padding: 5px 10px;
}
.sidebar-sub-sub-item .sidebar-nav-label {
    font-size: 11.5px;
}
.sidebar-sub-item.has-subs .sidebar-nav-arrow {
    margin-left: auto;
    transition: transform 0.2s;
}
.sidebar-sub-item.has-subs.active .sidebar-nav-arrow {
    transform: rotate(180deg);
}

/* Mobile filter toggle */
/* (Removed: .mobile-filter-toggle / .sidebar-close-* / .filter-active-dot —
   the old mobile category dropdown was deleted; the quick-cats row replaces it.) */

/* --- Store Toolbar --- */
.store-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.store-toolbar-left {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.store-toolbar-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}
.store-toolbar-count {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ============================================================ */
/* Storefront faceted filters (sidebar facets + sort + chips)   */
/* Persistent sidebar on desktop; off-canvas drawer on mobile.  */
/* Theme-token only → light + dark correct.                     */
/* ============================================================ */
.store-toolbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.store-sort { display: inline-flex; align-items: center; gap: 7px; }
.store-sort-label { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.store-sort-select { height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--text-primary); font-size: 13px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
.store-sort-select:focus { outline: none; border-color: var(--accent); }

/* Filters button (mobile only) */
.filter-mobile-btn { display: none; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--text-primary); font-size: 13px; font-weight: 600; cursor: pointer; }
.filter-mobile-btn:hover { border-color: var(--accent); }
.filter-mobile-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-contrast); font-size: 11px; font-weight: 700; }

/* Facet panel */
.filter-panel { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.filter-group { border-top: 1px solid var(--border); padding: 6px 0; }
.filter-group:first-child { border-top: none; }
.filter-group-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 2px; background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.filter-group-chevron { transition: transform .2s ease; flex-shrink: 0; opacity: .7; }
.filter-group-head[aria-expanded="false"] .filter-group-chevron { transform: rotate(-90deg); }
.filter-group-body { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.filter-group-head[aria-expanded="false"] + .filter-group-body { display: none; }
.filter-group--toggle { padding-top: 10px; }

.filter-option { display: flex; align-items: center; gap: 9px; padding: 6px 4px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; color: var(--text-primary); }
.filter-option:hover { background: var(--bg-card-hover); }
.filter-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.filter-option-box { flex-shrink: 0; width: 17px; height: 17px; border: 1.5px solid var(--border); border-radius: 5px; background: var(--bg-secondary); position: relative; transition: var(--transition); }
.filter-option input:checked + .filter-option-box { background: var(--accent); border-color: var(--accent); }
.filter-option input:checked + .filter-option-box::after { content: ''; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 9px; border: solid var(--accent-contrast); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.filter-option input:focus-visible + .filter-option-box { outline: 2px solid var(--accent); outline-offset: 2px; }
.filter-option-label { flex: 1; min-width: 0; line-height: 1.3; }
.filter-option-count { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* In-stock toggle switch */
.filter-option--toggle { gap: 10px; }
.filter-toggle-track { flex-shrink: 0; width: 36px; height: 20px; border-radius: 10px; background: var(--bg-tertiary); border: 1px solid var(--border); position: relative; transition: var(--transition); }
.filter-toggle-knob { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); transition: var(--transition); }
.filter-option--toggle input:checked + .filter-toggle-track { background: var(--accent); border-color: var(--accent); }
.filter-option--toggle input:checked + .filter-toggle-track .filter-toggle-knob { left: 17px; background: var(--accent-contrast); }

/* Price dual-range slider */
.filter-price { padding: 4px 2px 2px; }
.filter-price-labels { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
.filter-price-slider { position: relative; height: 22px; }
.filter-price-rail { position: absolute; top: 9px; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--bg-tertiary); }
.filter-price-fill { position: absolute; top: 0; height: 100%; border-radius: 2px; background: var(--accent); }
.filter-price-range { position: absolute; top: 0; left: 0; width: 100%; height: 22px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.filter-price-range::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-card); box-shadow: 0 0 0 1px var(--border); cursor: pointer; }
.filter-price-range::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-card); cursor: pointer; }
.filter-price-range::-webkit-slider-runnable-track { background: none; }

.filter-clear-link { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--accent); text-decoration: underline; cursor: pointer; }
.filter-clear-link:hover { text-decoration: none; }

/* Active filter chips */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 18px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-secondary); color: var(--text-primary); font-size: 12.5px; text-decoration: none; transition: var(--transition); }
.filter-chip:hover { border-color: var(--accent); }
.filter-chip svg { opacity: .6; }
.filter-chip:hover svg { opacity: 1; }
.filter-chip--clear { background: none; border-style: dashed; color: var(--text-secondary); }

/* Mobile drawer chrome — hidden on desktop */
.filter-drawer-head, .filter-drawer-foot { display: none; }

.store-clear-filters {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
}
.store-clear-filters:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

/* --- Improved Card Info --- */
.card-info-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.card-category {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
    opacity: 0.8;
}
.card-price-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.card-stock { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.card-stock-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.card-stock.in { color: var(--success); }
.card-stock.in .card-stock-dot { background: var(--success); }
.card-stock.out .card-stock-dot { background: var(--danger); }
.card-stock-dot.in { background: var(--success); }
.card-stock-dot.out { background: var(--danger); }
.wishlist-grid .card-stock-label { display: none; }
.product-card.out-of-stock .card-visual { opacity: 0.6; }
.card-badge.card-badge-oos {
    background: rgba(239, 68, 68, 0.7);
    position: absolute;
    top: 12px;
    left: 12px;
}

/* Responsive product/content card grids — TUNE the min card width in ONE place here.
   auto-fill (not auto-fit) keeps a partial last row left-aligned and never stretches a
   lone card to full width. Phones drop to exactly 2 columns (see responsive zone). */
:root { --grid-card-min: 240px; }
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-card-min), 1fr));
    gap: 16px;
}
.wishlist-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 220px));
    gap: 14px;
    max-width: 940px;
}

/* --- Compact density for wishlist cards --- */
.wishlist-grid .product-card {
    border-radius: var(--radius-md);
}
.wishlist-grid .product-card:hover {
    transform: translateY(-4px) scale(1.015);
}
.wishlist-grid .card-visual {
    aspect-ratio: 5 / 3;
}
.wishlist-grid .card-icon-wrap svg {
    width: 40px;
    height: 40px;
}
.wishlist-grid .card-badge {
    top: 8px;
    left: 8px;
    padding: 3px 7px;
    font-size: 9px;
}
.wishlist-grid .card-info {
    padding: 10px 12px;
    gap: 5px;
}
.wishlist-grid .card-category {
    font-size: 10px;
}
.wishlist-grid .card-title {
    font-size: 12.5px;
    line-height: 1.3;
}
.wishlist-grid .card-rating svg {
    width: 10px;
    height: 10px;
}
.wishlist-grid .card-rating-text {
    font-size: 10px;
}
.wishlist-grid .card-price {
    font-size: 15px;
}
.wishlist-grid .card-price .currency {
    font-size: 10px;
}
.wishlist-grid .card-stock-dot {
    width: 6px;
    height: 6px;
}
.wishlist-grid .card-actions {
    gap: 5px;
    padding-top: 7px;
}
.wishlist-grid .card-btn {
    padding: 5px 7px;
    font-size: 11px;
    border-radius: 6px;
}
.wishlist-grid .card-btn svg {
    width: 12px;
    height: 12px;
}
.wishlist-grid .card-wishlist-float {
    width: 30px;
    height: 30px;
    top: 8px;
    right: 8px;
    border-radius: 50%;
}
.wishlist-grid .card-wishlist-float svg {
    width: 12px;
    height: 12px;
}

/* === Product Card === */
.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: var(--accent);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* --- Card Visual (image / icon area) --- */
.card-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-secondary);
}

.card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease;
}

.product-card:hover .card-visual img {
    transform: scale(1.05);
}

/* Icon fallback when no image */
.card-icon-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--bg-secondary), var(--bg-card));
    transition: background 0.4s ease;
}

.card-icon-wrap svg {
    width: 56px;
    height: 56px;
    color: var(--accent);
    opacity: 0.5;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.product-card:hover .card-icon-wrap svg {
    opacity: 0.6;
    transform: scale(1.05);
}

/* Badge — restrained semantic system (neutral / new / sale). PHP still emits the
   same class names; we only re-color them so the rainbow collapses to 3 meanings.
   Chips sit over product imagery, so they stay near-opaque with white text. */
.card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 3;
}
/* Neutral / informational — the default bucket (inherits the dark glass chip) */
.card-badge.enterprise,
.card-badge.creative,
.card-badge.instant-delivery,
.card-badge.lifetime-license,
.card-badge.secure-license,
.card-badge.top-rated { background: rgba(0, 0, 0, 0.55); color: #fff; }
/* "New" — quiet positive */
.card-badge.new-arrival,
.card-badge.recommended { background: rgba(21, 128, 61, 0.92); color: #fff; border-color: rgba(255, 255, 255, 0.16); }
/* Urgency / sale — the single sanctioned warm accent */
.card-badge.best-deal,
.card-badge.best-value,
.card-badge.popular,
.card-badge.limited-offer { background: rgba(217, 119, 6, 0.95); color: #fff; border-color: rgba(255, 255, 255, 0.16); }

/* --- Floating Wishlist Heart (top-right of card-visual) --- */
.card-wishlist-float {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
/* Invisible hit-area expander → ≥44px touch target without enlarging the visible disc */
.card-wishlist-float::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.card-wishlist-float:hover {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    transform: scale(1.08);
}
.card-wishlist-float.active {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.4);
    color: #000;
}
.card-wishlist-float.active:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.08);
    color: #000;
}
.card-wishlist-float svg {
    width: 15px;
    height: 15px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* --- Card Action Buttons --- */
.card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    width: 100%;
}
.card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    border-radius: 8px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}
.card-btn-cart {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
    flex: 1;
}
.card-btn-cart:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--bg-primary);
    box-shadow: var(--shadow-md);
}
.card-btn-cart:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.card-btn-oos {
    background: var(--bg-secondary);
    color: var(--text-muted);
    border-color: var(--border);
    cursor: default;
    flex: 1;
}
.pp-wishlist-float {
    width: 38px;
    height: 38px;
    top: 14px;
    right: 14px;
    border-radius: 10px;
}
.pp-wishlist-float svg {
    width: 17px;
    height: 17px;
}

/* --- Cart Toast Notification --- */
.cart-toast {
    position: fixed;
    top: 80px;                /* top-right (reliable on iOS Safari; standard toast spot) */
    right: 16px;
    bottom: auto;
    left: auto;
    max-width: min(360px, calc(100vw - 32px));
    padding: 13px 18px;
    background: var(--bg-card);          /* monochrome, matches the site (no all-green box) */
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--success);   /* subtle success accent = the only color */
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.cart-toast.show {
    opacity: 1;
    transform: translateY(0);
}
.cart-toast-error { border-left-color: var(--danger); }
.cart-toast-warning { border-left-color: #f59e0b; }

/* --- Buy-box buttons: Add to Cart = primary (.pp-buy-btn base, solid accent),
       Buy Now = tonal secondary below it. No orange gradient (template tell). --- */
.pp-buy-btn:not(.pp-buy-btn-secondary):hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-contrast);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.pp-buy-btn:not(.pp-buy-btn-secondary):active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.pp-buy-btn.pp-buy-btn-secondary {
    margin-top: 10px;
    padding: 13px;
    font-size: 14.5px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border: 1px solid var(--border-hover);
    box-shadow: none;
}
[data-theme="light"] .pp-buy-btn.pp-buy-btn-secondary {
    background: rgba(17, 24, 39, 0.05);
}
.pp-buy-btn.pp-buy-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    border-color: var(--text-secondary);
    box-shadow: none;
    transform: translateY(-1px);
}
[data-theme="light"] .pp-buy-btn.pp-buy-btn-secondary:hover {
    background: rgba(17, 24, 39, 0.09);
}

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; }

/* --- Card Info (title + price) --- */
.card-info {
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--border);
    flex: 1;
}

.card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Hard 2-line cap as a fallback for browsers where -webkit-line-clamp
       fails to apply, so a long name can never exceed 2 lines. */
    max-height: 2.7em;
    overflow-wrap: anywhere;
}

.card-price {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--accent);
    flex-shrink: 0;
}

.card-price .currency {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.7;
    margin-right: 1px;
}

/* === Deal Pricing — Product Card === */
.card-deal-price-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.card-deal-badge {
    display: inline-flex;
    align-items: center;
    background: var(--danger);
    color: #fff;
    border-radius: 100px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 9px;
    text-transform: uppercase;
    white-space: nowrap;
    width: fit-content;
}
.card-price-deal-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.card-deal-was {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.card-price-original {
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(239, 68, 68, 0.55);
    font-weight: 400;
    white-space: nowrap;
}
.card-discount-pct {
    display: inline-flex;
    align-items: center;
    background: var(--danger);
    color: #fff;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--accent);
}

.btn-primary {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}

.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--bg-primary);
}

.btn-secondary {
    background: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text-secondary);
}

.btn-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent);
    color: var(--text-primary);
}

.btn-danger {
    background: var(--bg-secondary);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--danger);
}

.btn-danger:hover {
    background: var(--danger-bg);
    border-color: var(--danger);
}

.btn-success {
    background: var(--bg-secondary);
    border-color: rgba(34, 197, 94, 0.3);
    color: var(--success);
}

.btn-success:hover {
    background: var(--success-bg);
    border-color: var(--success);
}

.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font);
    line-height: 1;
}
.btn-icon:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--accent);
}
.btn-icon svg { flex-shrink: 0; }
.btn-icon-primary { border-color: var(--border); background: var(--bg-secondary); color: var(--text-secondary); }
.btn-icon-primary:hover { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--accent); }
.btn-icon-danger { border-color: rgba(239,68,68,0.3); color: var(--danger); background: var(--bg-secondary); }
.btn-icon-danger:hover { background: var(--danger-bg); border-color: var(--danger); }
.btn-icon-success { border-color: rgba(34,197,94,0.3); color: var(--success); background: var(--bg-secondary); }
.btn-icon-success:hover { background: var(--success-bg); border-color: var(--success); }
.btn-icon-secondary { border-color: var(--border); color: var(--text-secondary); background: var(--bg-secondary); }
.btn-icon-secondary:hover { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--accent); }
.btn-icon-warning { border-color: rgba(234,179,8,0.3); color: #eab308; background: var(--bg-secondary); }
.btn-icon-warning:hover { background: rgba(234,179,8,0.08); border-color: #eab308; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
/* Top-Up preset amount — visible selected state (B10) */
.preset-amount.selected { border-color: var(--accent); background: var(--accent-glow); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--accent); }

/* Inline-styled buttons — unify via CSS class */
.btn-cart-quick {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    background: var(--accent);
    color: var(--bg-primary);
    border: 1px solid var(--accent);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-cart-quick:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--bg-primary);
    box-shadow: var(--shadow-md);
}

.crypto-coin-btn {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    color: var(--text-secondary);
}
.crypto-coin-btn:hover {
    border-color: var(--accent);
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.crypto-coin-btn.selected {
    border-color: var(--accent);
    background: var(--bg-tertiary);
}

/* === Forms === */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-input,
.form-select,
.form-textarea,
.form-control {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.form-input::placeholder,
.form-control::placeholder { color: var(--text-muted); }

textarea.form-control,
textarea.form-input { resize: vertical; min-height: 100px; font-family: var(--font); }
textarea.form-input--sm, textarea.form-control--sm { min-height: 80px; }
textarea.form-input--lg, textarea.form-control--lg { min-height: 120px; }

/* OTP / 2FA code inputs */
.input-otp { text-align: center; letter-spacing: 4px; font-size: 1.2rem; }
.input-otp-lg { font-size: 1.4rem; letter-spacing: 6px; }
.input-otp-sm { width: 120px; letter-spacing: 2px; }

/* Coupon input row (checkout.php) */
.coupon-input { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font-size: 13px; font-family: var(--font); }
.coupon-input:focus { border-color: var(--accent); outline: none; }

.form-textarea { resize: vertical; min-height: 100px; }

.form-select,
select.form-input,
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* Dropdown <option> dark-mode fix (prevents white native popup on macOS/Windows) */
select.form-input option,
select.form-select option,
select.form-control option,
.form-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.form-error { font-size: 12px; color: var(--danger); margin-top: 4px; }

/* === Auth Pages === */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 64px);
    padding: 40px 24px;
}

/* C1: shared card surface (bg + border) — variants below override radius/padding only */
.auth-card,
.stat-card,
.rv-preview-card,
.rv-review-card,
.od-card,
.settings-card,
.tfa-method-card,
.um-bal-card,
.qa-question-card { background: var(--bg-card); border: 1px solid var(--border); }

.auth-card {
    width: 100%;
    max-width: 420px;
    border-radius: var(--radius-xl);
    padding: 40px;
}

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-header h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.auth-header p {
    font-size: 14px;
    color: var(--text-secondary);
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    color: var(--text-muted);
}

.auth-footer a {
    color: var(--accent);
    font-weight: 500;
}

.auth-footer a:hover { text-decoration: underline; }

/* === Alert Messages === */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success { background: var(--success-bg); border: 1px solid rgba(34, 197, 94, 0.2); color: var(--success); }
.alert-error { background: var(--danger-bg); border: 1px solid rgba(239, 68, 68, 0.2); color: var(--danger); }
.alert-warning { background: var(--warning-bg); border: 1px solid rgba(251, 191, 36, 0.2); color: var(--warning); }
.alert-info { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); color: #60a5fa; }

/* Block variant — for multi-line alerts that contain <br>, <strong>, lists, code blocks (e.g. provider setup instructions). The default flex layout treats each text run as a flex item, breaking multi-line content. */
.alert--block { display: block; line-height: 1.6; }
.alert--block code { background: rgba(0, 0, 0, 0.25); padding: 2px 6px; border-radius: 4px; font-size: 12px; word-break: break-all; }
.alert--block strong { font-weight: 700; }
.alert--block br + br { display: none; }

/* === Dashboard === */
.dashboard-page {
    padding: 40px 0 80px;
}

.page-header {
    margin-bottom: 32px;
}

.page-header h1 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 8px;
}

.page-header p {
    color: var(--text-secondary);
    font-size: 15px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card {
    border-radius: var(--radius-md);
    padding: 20px;
}

.stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.stat-value.accent { color: var(--accent); }
.stat-value.success { color: var(--success); }
.stat-value.warning { color: var(--warning); }
/* Dashboard balance tile — promote Top Up / Withdraw from text links to real buttons (B1) */
.dash-balance-actions { display: flex; gap: 8px; margin-top: 12px; }
.dash-balance-actions .btn { flex: 1; min-width: 0; padding-left: 6px; padding-right: 6px; }

/* === Product Search Bar === */
.search-bar {
    margin-bottom: 16px;
}

.search-form {
    position: relative;
    max-width: 420px;
}

.search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 12px 40px 12px 42px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: var(--transition);
    outline: none;
}

.search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

.search-input::placeholder {
    color: var(--text-muted);
}

.search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--text-muted);
    text-decoration: none;
    line-height: 1;
    padding: 4px;
}

.search-clear:hover {
    color: var(--text-primary);
}

/* === Live Search Dropdown === */
.search-form {
    position: relative;
}

.search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    z-index: 100;
    max-height: 360px;
    overflow-y: auto;
}

:root[data-theme="light"] .search-dropdown {
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.search-dropdown.open {
    display: block;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.15s;
    border-bottom: 1px solid var(--border);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover,
.search-result-item.active {
    background: var(--bg-hover, rgba(255, 255, 255,0.08));
}

.search-result-img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.search-result-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: var(--bg-tertiary, rgba(255,255,255,0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
}

.search-result-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.search-result-name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.search-no-results {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* === Category Tabs === */
.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.category-tab {
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
}

.category-tab:hover {
    color: var(--text-primary);
    border-color: var(--accent);
    background: var(--bg-tertiary);
}

.category-tab.active {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
}

/* === Tables === */
.table-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}

.table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.table-title {
    font-size: 16px;
    font-weight: 700;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    white-space: nowrap;
}

td {
    padding: 12px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg-card); }

/* === Status Badges === */
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-in_progress { background: rgba(217, 119, 6, 0.12); color: #d97706; }
.status-delivered, .status-active { background: rgba(22, 163, 74, 0.12); color: #16a34a; }
.status-cancelled, .status-revoked, .status-expired, .status-failed { background: var(--danger-bg); color: var(--danger); }
.status-partial { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.status-completed { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.status-paid { background: rgba(22, 163, 74, 0.12); color: #16a34a; }
.status-awaiting { background: rgba(217, 119, 6, 0.12); color: #d97706; }
.status-refunded { background: rgba(99, 102, 241, 0.14); color: #6366f1; }

/* Status change dropdown */
.status-select { padding: 4px 8px; font-size: 12px; font-weight: 600; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; appearance: auto; background: var(--bg-secondary); color: var(--text-primary); transition: all 0.2s ease; }
.status-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 255, 255,0.08); }
.status-select-in_progress { border-color: #d97706; color: #d97706; }
.status-select-delivered { border-color: #16a34a; color: #16a34a; }
.status-select-cancelled { border-color: var(--danger); color: var(--danger); }
.status-change-form { display: inline; }

.status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* === License Key Display === */
.license-key {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 8px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent);
}

.copy-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.copy-btn:hover { color: var(--text-primary); }

/* === Checkout Page === */
.checkout-page {
    padding: 40px 0 80px;
}

.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

.checkout-product {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    min-width: 0;
}

.checkout-summary {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    position: sticky;
    top: 88px;
    min-width: 0;
}

/* ── Payment methods — 2-up grid of compact tiles (2 columns on desktop AND mobile).
   Shared by checkout + topup via hl_payment_option(); selected state is CSS-only.
   Rows size to their content (no forced equal height) so there is no dead vertical space;
   within a row the two tiles stay even via align-items: stretch (default). ── */
.payment-methods,
.payment-methods--rich {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 16px 0;
}

.payment-option {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 12px;
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    min-width: 0;
}
.payment-option:hover { border-color: var(--border-hover); }
.payment-option input[type="radio"] { display: none; }
.payment-option:has(input:checked),
.payment-option.selected { border-color: var(--accent); background: var(--accent-glow); }

/* top row of the tile: icon tile (left) + radio (right) */
.po-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.radio-custom {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-hover);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}
.payment-option:has(input:checked) .radio-custom,
.payment-option.selected .radio-custom { border-color: var(--accent); background: var(--accent); }
.payment-option:has(input:checked) .radio-custom::after,
.payment-option.selected .radio-custom::after {
    content: '';
    width: 5px; height: 9px; margin-top: -2px;
    border: solid var(--accent-contrast);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.po-ic {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: var(--transition);
}
.po-ic svg { width: 20px; height: 20px; display: block; }
.po-ic img { width: 22px; height: 22px; display: block; object-fit: contain; }
.payment-option:has(input:checked) .po-ic { background: var(--accent-glow); color: var(--accent); }

.po-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; margin-top: 1px; }
.payment-label { font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.payment-desc {
    font-size: 12px; color: var(--text-muted); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.po-badge {
    font-size: 10.5px; font-weight: 700; line-height: 1;
    color: var(--success); background: rgba(34, 197, 94, 0.12);
    padding: 3px 7px; border-radius: 10px; white-space: nowrap;
}
.po-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 0; padding-top: 3px; }
.po-chips .pay-brand { height: auto; background: #fff; padding: 3px 6px; border-radius: 5px; box-shadow: 0 0 0 1px var(--border); }
.po-chips .pay-brand img { height: 14px; width: auto; }
.po-chips .pay-coin svg { width: 21px; height: 21px; }
.po-chips .pay-coin-fallback { width: 21px; height: 21px; font-size: 11px; }
.pay-coin-more { font-size: 11px; font-weight: 600; color: var(--text-muted); align-self: center; white-space: nowrap; }
.pay-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10);
}
.pay-brand img { height: 28px; width: auto; display: block; }
.pay-coin { display: inline-flex; align-items: center; justify-content: center; }
.pay-coin svg { width: 27px; height: 27px; display: block; }
.pay-coin-fallback {
    width: 27px; height: 27px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 12px;
    font-weight: 700;
}
.pay-wallet-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 6px;
    background: var(--accent-glow);
    color: var(--accent);
}
.pay-amt { font-size: 13px; font-weight: 700; color: var(--text-primary); align-self: center; }
.po-brand-ico { width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; display: block; }

/* Express checkout (Apple/Google Pay/Link/Amazon Pay) wallet buttons */
#express-checkout-element { min-height: 0; }
.express-divider {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 4px 0 14px;
}
.express-divider::before, .express-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.express-consent-note { font-size: 11px; color: var(--text-muted); line-height: 1.5; text-align: center; margin: 12px 2px 0; }

/* Footer — "we accept" payment strip (reuses .pay-brand / .pay-coin chips) */
.footer-payments {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 14px;
    padding: 20px 0 4px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}
.footer-payments-label {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.footer-payments-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
/* Endless "we accept" marquee — the track holds TWO identical sets and scrolls
   exactly -50%, so the second set lands where the first began → seamless loop. */
.footer-payments-marquee {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.footer-payments-track {
    display: flex;
    width: max-content;
    animation: hl-pay-marquee 55s linear infinite;
    will-change: transform;
}
.footer-payments-marquee:hover .footer-payments-track { animation-play-state: paused; }
.footer-payments-set {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 6px; /* equals the inter-chip gap so the two sets butt seamlessly */
    flex: 0 0 auto;
}
/* Real brand logos (datatrans/payment-logos, CC BY-SA 4.0) + the fallback wordmarks are all
   transparent SVGs, so each footer chip is a uniform WHITE card — the standard "we accept"
   look, and the only way transparent/dark logos stay visible on the dark footer. The frame
   uses var(--border) so the cards read on both dark and light themes. */
.footer-payments .pay-brand {
    height: auto;
    background: #fff;
    padding: 3px 7px;
    box-shadow: 0 0 0 1px var(--border);
}
.footer-payments .pay-brand img { height: 22px; width: auto; min-width: 22px; }
@keyframes hl-pay-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .footer-payments-track { animation: none; }
    .footer-payments-marquee { overflow-x: auto; }
}

.wallet-info {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.wallet-address {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    word-break: break-all;
    color: var(--accent);
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: var(--radius-sm);
    margin-top: 8px;
}

.order-summary-item {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    font-size: 14px;
}
/* Keep the label/name and value from colliding when either is long
   (cart order summary: long product name + price; order-confirmation:
   short label + long value). */
.order-summary-item > span:first-child { min-width: 0; }
.order-summary-item > span:last-child { min-width: 0; text-align: right; }

.order-total {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 18px;
    font-weight: 700;
}

/* === Footer === */
.footer {
    border-top: 1px solid var(--border);
    padding: 40px 0;
    position: relative;
    z-index: 1;
}

.footer-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}

.footer-tagline {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 8px;
}

.footer-company-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 14px;
    max-width: 300px;
}
.fci-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.4;
}
.fci-row {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
    text-decoration: none;
    display: block;
}
a.fci-row:hover { color: var(--text-primary); }
.fci-label {
    font-weight: 600;
    color: var(--text-secondary);
}
.fci-details-link {
    display: inline-block;
    font-size: 11px;
    color: var(--accent);
    margin-top: 5px;
    text-decoration: none;
}
.fci-details-link:hover { text-decoration: underline; }

.footer-links {
    display: flex;
    gap: 24px;
}

.footer-links a {
    font-size: 14px;
    color: var(--text-secondary);
    transition: var(--transition);
}

.footer-links a:hover { color: var(--text-primary); }

.footer-columns {
    display: flex;
    gap: 48px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-col-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.footer-col a {
    font-size: 13px;
    color: var(--text-secondary);
    transition: var(--transition);
}

.footer-col a:hover {
    color: var(--text-primary);
}

.footer-bottom {
    padding-top: 24px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
}

/* === Admin Panel === */
.admin-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: calc(100vh - 64px);
    transition: grid-template-columns 0.25s ease;
}

.admin-sidebar {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    padding: 16px;
    margin-top: -64px;
    padding-top: 80px;
    overflow: hidden;
    transition: padding 0.2s ease;
}

.admin-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}

.admin-nav-item:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}

.admin-nav-item.active {
    background: var(--accent-glow);
    color: var(--accent);
}

/* Admin Sidebar Groups (Accordion) */
.admin-nav-group {
    margin-top: 4px;
}
.admin-nav-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.admin-nav-group-header:hover {
    color: var(--text-secondary);
    background: var(--bg-card);
}
.admin-nav-chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
    opacity: 0.5;
}
.admin-nav-group.open .admin-nav-chevron {
    transform: rotate(180deg);
}
.admin-nav-group-items {
    list-style: none;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
}
.admin-nav-group.open .admin-nav-group-items {
    max-height: 500px;
}

/* ═══ Admin Sidebar — Collapsible Rail ═══ */

/* Collapsed layout */
.admin-layout.sidebar-collapsed {
    grid-template-columns: 72px 1fr;
}

/* Dashboard row: toggle button lives beside the Dashboard nav link */
.admin-nav-header-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}
.admin-nav-header-row > .admin-nav-item {
    flex: 1;
    min-width: 0;
}

/* Toggle button */
.admin-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    transition: var(--transition);
}
.admin-sidebar-toggle:hover {
    color: var(--text-primary);
    background: var(--bg-card);
    border-color: var(--text-muted);
}
.admin-sidebar-toggle .icon-expand { display: none; }
.admin-sidebar-toggle .icon-collapse { display: block; }
.admin-layout.sidebar-collapsed .admin-sidebar-toggle .icon-expand { display: block; }
.admin-layout.sidebar-collapsed .admin-sidebar-toggle .icon-collapse { display: none; }

/* Hide toggle button entirely when collapsed — rail click handles reopening */
.admin-layout.sidebar-collapsed .admin-sidebar-toggle {
    display: none;
}

/* Collapsed sidebar rail */
.admin-layout.sidebar-collapsed .admin-sidebar {
    padding-left: 8px;
    padding-right: 8px;
    cursor: pointer;
}

/* Hide text labels in nav items (font-size 0 hides text nodes; SVGs keep explicit width/height) */
.admin-layout.sidebar-collapsed .admin-nav-item {
    justify-content: center;
    padding: 10px;
    gap: 0;
    font-size: 0;
}

/* Dashboard header row: center the icon when button is gone */
.admin-layout.sidebar-collapsed .admin-nav-header-row {
    justify-content: center;
}

/* Hide any inline badge spans inside nav items */
.admin-layout.sidebar-collapsed .admin-nav-item > span {
    display: none;
}

/* Hide group headers in collapsed rail */
.admin-layout.sidebar-collapsed .admin-nav-group-header {
    display: none;
}

/* Only show items from open accordion groups in the collapsed rail */
.admin-layout.sidebar-collapsed .admin-nav-group.open .admin-nav-group-items {
    max-height: 1000px;
}

/* ─── Admin Sidebar Live Badges (Phase 3) ───────────────────────────────── */

/* Needed so the dot badge can anchor absolutely over the icon in collapsed mode */
.admin-nav-item { position: relative; }

/* Inline pill — visible in expanded sidebar */
.admin-sidebar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 6px;
    min-width: 20px;
    flex-shrink: 0;
}
/* Hide when count is zero — data-count="0" is set by PHP (SSR) and JS (polling) */
.admin-sidebar-badge[data-count="0"] { display: none !important; }

/* Collapsed rail: override the generic "hide direct-child spans" rule and render as a small dot */
.admin-layout.sidebar-collapsed .admin-nav-item > .admin-sidebar-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    min-width: 0;
    padding: 0;
    margin: 0;
    font-size: 0;
    border-radius: 50%;
    display: flex; /* overrides the generic span { display:none } */
}
/* But still hide the dot when count is zero (must beat the display:flex above) */
.admin-layout.sidebar-collapsed .admin-nav-item > .admin-sidebar-badge[data-count="0"] {
    display: none !important;
}

/* Group header dot — shown when any item inside that group has a count > 0 */
.admin-sidebar-group-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger);
    margin-left: 5px;
    vertical-align: middle;
    flex-shrink: 0;
}
.admin-sidebar-group-dot[data-count="0"] { display: none !important; }

/* ─── Vendor app-shell — reuses .admin-layout/.admin-sidebar; only the vendor-only
   chrome (top store bar + mobile drawer trigger) is new. Scoped to .vendor-shell so
   the admin shell is untouched. Desktop defaults below; mobile drawer in the
   responsive zone. ──────────────────────────────────────────────────────────────── */
.vendor-shell-topbar { display: none; align-items: center; gap: 12px; margin-bottom: 16px; }  /* desktop: hidden (the sidebar already shows store context); shown on mobile next to the hamburger */
.vendor-shell-topbar .vendor-portal-store-name { font-weight: 600; font-size: 18px; color: var(--text-primary); }
/* Per-page store-name "eyebrow" above each heading is redundant (the sidebar + mobile topbar
   already show the store) — hide it everywhere. (.vprod-eyebrow is kept: on the inventory page
   it shows the PRODUCT name, which is useful context, not the store name.) */
.vana-eyebrow, .vbulk-eyebrow, .vcon-eyebrow, .vearn-eyebrow, .vdisp-eyebrow, .vord-eyebrow,
.vmsg-eyebrow, .vrev-eyebrow, .vstand-eyebrow, .vset-eyebrow, .vstaff-eyebrow { display: none; }
.vendor-shell-content { min-width: 0; }
.vendor-drawer-toggle {                 /* desktop: hidden (sidebar always visible) */
    display: none; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--bg-secondary); color: var(--text-primary); cursor: pointer;
}
.vendor-drawer-toggle:hover { border-color: var(--primary); }
.admin-sidebar-backdrop { display: none; }
.vendor-drawer-close {      /* desktop: hidden (drawer-only close control) */
    display: none; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0;
    border: none; background: transparent; color: var(--text-muted); cursor: pointer;
}
.vendor-drawer-close:hover { color: var(--text-primary); }

/* ═══ Dashboard: Collapsible Card Rows ═══ */
.dash-row {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    overflow: hidden;
}
.dash-row-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
    gap: 10px;
    transition: background 0.15s;
}
.dash-row-header:hover { background: var(--bg-hover); }
.dash-row-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    margin-left: 4px;
}
.dash-row-chevron {
    margin-left: auto;
    transition: transform 0.2s;
    color: var(--text-muted);
}
.dash-row.open .dash-row-chevron { transform: rotate(180deg); }
.dash-row-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.dash-row.open .dash-row-body {
    max-height: 800px;
}

/* Card grid — always 3 columns */
.dash-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 0 20px 18px;
}

/* Individual card */
.dash-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 120px;
}
.dash-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
.dash-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dash-card-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.dash-card-count {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
.dash-card-count.success { color: var(--success); }
.dash-card-count.warning { color: var(--warning); }
.dash-card-count.danger  { color: var(--danger); }
.dash-card-count.accent  { color: var(--accent); }

/* List items inside cards */
.dash-card-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.dash-list-item {
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}
.dash-list-item:last-child { border-bottom: none; }
.dash-list-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-list-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.dash-list-empty {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    padding: 8px 0;
}

/* Status dots */
.dash-status { font-size: 11px; font-weight: 600; }
.dash-status.success { color: var(--success); }
.dash-status.warning { color: var(--warning); }
.dash-status.danger  { color: var(--danger); }
.dash-status.accent  { color: var(--accent); }

/* Stars */
.dash-stars { color: var(--warning); letter-spacing: 1px; }

/* Stat rows (label + value pairs) */
.dash-card-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.dash-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
.dash-stat-row span { color: var(--text-muted); }
.dash-stat-row strong { color: var(--text-primary); font-weight: 700; }
.dash-stat-row strong.success { color: var(--success); }
.dash-stat-row strong.warning { color: var(--warning); }
.dash-stat-row strong.danger  { color: var(--danger); }
.dash-stat-row strong.accent  { color: var(--accent); }

/* Card footer link */
.dash-card-foot {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    margin-top: auto;
    text-align: right;
}

/* Big center number */
.dash-card-center-value {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.dash-big-number {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
.dash-big-number.danger { color: var(--danger); }

/* Action card (+ Add New) */
.dash-card-action {
    border-style: dashed;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-card-action-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}
.dash-card-action:hover .dash-card-action-inner { color: var(--accent); }
.dash-card-action:hover svg { stroke: var(--accent); }

/* ================================================================ */
/* LAYOUT PRIMITIVE CLASSES (Phase 1 — Inline Style Extraction)     */
/* ================================================================ */

/* Two-column form grid — contact.php, withdraw.php */
.form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Crypto coin selector grid — checkout.php, topup.php */
.crypto-coin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

/* QR + wallet details row — checkout.php, topup.php */
.wallet-qr-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.wallet-qr-img {
    flex-shrink: 0;
    background: #fff;
    padding: 8px;
    border-radius: 8px;
}
.wallet-qr-img img { display: block; }
.wallet-qr-info {
    flex: 1;
    min-width: 0;
}
.wallet-addr-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Info card inner — checkout.php, topup.php, withdraw.php */
.info-card-inner {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-secondary);
}

/* Flex button row — order-confirmation.php, withdraw.php */
.action-btn-group {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}
.action-btn-group > * {
    flex: 1;
}

/* Legal page wrapper — about, terms, privacy, refund, faq */
.legal-content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}
.legal-content-wrapper .checkout-product {
    padding: 40px;
}
.legal-content-wrapper h1 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 8px;
}
.legal-content-wrapper h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 28px 0 12px;
}

/* FAQ accordion — faq.php */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-item.open .faq-answer { max-height: 2000px; }

/* Message thread container — order-detail.php */
.msg-thread-container {
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
}

/* Message wrappers and bubbles — order-detail.php */
.msg-wrapper {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
}
.msg-wrapper[data-sender="user"] { align-items: flex-end; }
.msg-wrapper[data-sender="admin"] { align-items: flex-start; }
.msg-wrapper[data-sender="system"] { align-items: center; }

.msg-bubble-system {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    background: var(--bg-secondary);
    padding: 6px 12px;
    border-radius: 8px;
    max-width: 85%;
}
.msg-bubble-user {
    background: var(--accent);
    color: var(--bg-primary);
    padding: 8px 14px;
    border-radius: 12px 12px 2px 12px;
    max-width: 85%;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}
.msg-bubble-admin {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 8px 14px;
    border-radius: 12px 12px 12px 2px;
    max-width: 85%;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}

/* Message compose form row — order-detail.php */
.msg-compose-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

/* ── Phase 6: Messaging UI — extracted inline styles ────────── */
/* Messaging page container */
.msg-page-container { max-width: 900px; }
.msg-alert { margin-bottom: 20px; }

/* Thread: proof image attachment */
.msg-proof-img-wrap { margin-top: 4px; }
.msg-proof-img { max-width: 300px; max-height: 200px; border-radius: 8px; border: 1px solid var(--border); display: block; cursor: zoom-in; transition: filter .15s ease; }
.msg-proof-img:hover { filter: brightness(1.06); }
.msg-proof-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
/* Chat-style file chip (non-image attachment) */
.msg-attach-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text-primary); font-size: 13px; text-decoration: none; max-width: 280px; }
.msg-attach-chip:hover { border-color: var(--accent); }
.msg-attach-chip .ic { display: inline-flex; flex-shrink: 0; color: var(--text-secondary); }
.msg-attach-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-attach-chip .sz { color: var(--text-muted); font-size: 11.5px; flex-shrink: 0; white-space: nowrap; }
/* Fullscreen image lightbox (chat) */
.msg-lightbox { position: fixed; inset: 0; z-index: 10001; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.92); padding: 24px; cursor: zoom-out; }
.msg-lightbox.open { display: flex; }
.msg-lightbox-img { max-width: 96vw; max-height: 90vh; border-radius: 10px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); cursor: default; }
.msg-lightbox-close { position: absolute; top: 16px; right: 20px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.msg-lightbox-close:hover { background: rgba(255,255,255,0.24); }
html.msg-lightbox-lock { overflow: hidden; }

/* Order detail: message timestamps, empty state, compose area */
.od-msg-timestamp { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.od-msg-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 24px 0; }
.od-msg-compose-wrap { border-top: 1px solid var(--border); padding: 12px 16px; }
.od-msg-textarea { flex: 1; resize: vertical; min-height: 40px; max-height: 120px; font-size: 13px; }
.od-msg-send-btn { padding: 8px 16px; flex-shrink: 0; }

/* Compose form: dropdowns */
.compose-dropdown-wrap { position: relative; }
.compose-select-btn { width: 100%; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.compose-select-label { flex: 1; color: var(--text-muted); }
.compose-select-caret { flex-shrink: 0; }
.compose-subject-opt { padding: 11px 16px; font-size: 14px; color: var(--text-primary); }
.compose-order-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.compose-order-none { padding: 10px 14px; color: var(--text-muted); font-size: 13px; }
.compose-order-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--bg-secondary); }
.compose-order-thumb-ph { width: 48px; height: 48px; border-radius: 6px; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-muted); }
.compose-order-info { flex: 1; min-width: 0; }
.compose-order-num { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-bottom: 1px; }
.compose-order-name { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compose-order-meta { font-size: 11px; color: var(--text-muted); display: flex; gap: 8px; align-items: center; margin-top: 3px; flex-wrap: wrap; }
.compose-order-meta .status { font-size: 10px; padding: 1px 6px; }
.compose-order-price { font-weight: 600; color: var(--text-primary); }
.compose-order-date { color: var(--text-muted); }
.compose-order-disabled { color: var(--text-muted); }

/* Compose form: labels, proof section */
.compose-label-opt { color: var(--text-muted); font-weight: 400; }
.compose-label-req { color: var(--danger); }
.compose-proof-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; line-height: 1.5; }
.compose-proof-hint-text { font-size: 13px; color: var(--text-muted); margin-top: 8px; }
.compose-proof-types-text { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.compose-proof-preview { display: none; }
.compose-proof-preview-img { max-width: 100%; max-height: 200px; border-radius: 8px; }
.compose-proof-remove { margin-top: 8px; font-size: 12px; color: var(--danger); background: none; border: none; cursor: pointer; text-decoration: underline; min-height: 44px; }
.compose-send-btn { width: 100%; }

/* Reply form */
.reply-submit-btn { margin-top: 10px; }

/* Admin messages: thread header */
.adm-msg-back { margin-bottom: 16px; }
.adm-conv-card { margin-bottom: 20px; }
.adm-conv-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.adm-conv-subject { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.adm-conv-meta { color: var(--text-muted); font-size: 13px; }
.adm-conv-meta strong { color: var(--text-primary); }
.adm-conv-link { color: var(--accent); }
.adm-conv-meta2 { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
.adm-conv-type-badge { background: var(--bg-secondary); padding: 2px 8px; border-radius: 4px; font-size: 11px; text-transform: uppercase; font-weight: 600; }
.adm-conv-actions { display: flex; gap: 8px; align-items: center; }
.adm-form-inline { display: inline; }

/* Admin messages: cancel warning + order context */
.adm-cancel-warning { background: var(--danger-bg); border: 1px solid rgba(239,68,68,0.3); border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; display: flex; align-items: flex-start; gap: 12px; }
.adm-cancel-warn-icon { flex-shrink: 0; margin-top: 1px; }
.adm-cancel-warn-text { font-size: 14px; color: var(--danger); line-height: 1.5; font-weight: 500; }
.adm-order-ctx { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 20px; }
.adm-order-ctx-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 10px; }
.adm-order-ctx-item { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.adm-order-ctx-img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.adm-order-ctx-info { flex: 1; min-width: 0; }
.adm-order-ctx-name { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.adm-order-ctx-meta { font-size: 12px; color: var(--text-muted); }
.adm-order-ctx-cancelled { color: var(--danger); font-weight: 700; }
.adm-order-ctx-completed { color: var(--success); font-weight: 600; }
.adm-order-ctx-total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; font-weight: 600; font-size: 13px; text-align: right; }
.adm-thread-msgs { margin-bottom: 20px; }
/* Admin Messaging — Customer-grouped inbox */
.adm-customer-list { max-height: 520px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.adm-customer-list::-webkit-scrollbar { width: 5px; }
.adm-customer-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.adm-customer-list::-webkit-scrollbar-track { background: transparent; }
.adm-customer-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; text-decoration: none; color: inherit; transition: border-color 0.15s; }
.adm-customer-row:hover { border-color: var(--accent); }
.adm-customer-row.has-unread { border-left: 3px solid var(--accent); }
.adm-customer-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-secondary); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--accent); flex-shrink: 0; text-transform: uppercase; overflow: hidden; }
.adm-customer-avatar .avatar, .adm-customer-avatar .avatar-img, .adm-customer-avatar .avatar-svg { width: 40px; height: 40px; border-radius: 50%; }
.adm-customer-avatar .avatar-img { object-fit: cover; }
.adm-customer-info { flex: 1; min-width: 0; }
.adm-customer-name { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.adm-customer-email { font-size: 12px; color: var(--text-muted); }
.adm-customer-preview { font-size: 12px; color: var(--text-muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-customer-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.adm-customer-unread-badge { background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; min-width: 22px; text-align: center; }
.adm-customer-time { font-size: 11px; color: var(--text-muted); }
.adm-customer-meta { font-size: 11px; color: var(--text-muted); display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.adm-customer-detail-header { display: flex; align-items: center; gap: 10px; }
/* Deleted user label */
.adm-deleted-user-label { color: var(--text-muted); font-style: italic; font-weight: 500; font-size: 13px; }
/* Archived conversation badge + notice */
.adm-archived-badge { background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-muted); font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.adm-archived-notice { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; color: var(--text-muted); font-size: 13px; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
/* Admin proof image thumbnail */
.adm-proof-img { max-width: 250px; max-height: 180px; cursor: zoom-in; }

/* ── Async reply status message ──────────────────────────────── */
.reply-status-msg { font-size: 13px; padding: 6px 0 2px; display: none; }
.reply-status-error { color: var(--danger); display: block; }
.reply-status-ok { color: var(--success); display: block; }

/* ── Product thumbnail in inbox conversation list ─────────────── */
.inbox-item-product-img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); filter: grayscale(1); opacity: 0.9; }  /* A11: neutral list icons, no rainbow column */

/* Task content column — tasks.php */
/* Tasks card — tasks.php */
.tasks-card {
    padding: 20px;
}

.task-content-col {
    flex: 1;
    min-width: 0;
}

/* Task card row — tasks.php */
.task-card-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

/* Withdraw amount input styling */
.withdraw-amount-input {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

/* Withdraw percent button row */
.withdraw-pct-group {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    margin-bottom: 20px;
}
.withdraw-pct-group > * {
    flex: 1;
}

/* Top-up preset amount grid — topup.php */
.topup-preset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

/* Top-up wallet activity (money history) — ~5 rows visible, the rest scroll. */
.wact-card { margin-top: 20px; }
.wact-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.wact-head h3 { font-size: 16px; font-weight: 700; margin: 0; }
.wact-bal-now { font-size: var(--fs-sm); font-weight: 700; color: var(--success); font-variant-numeric: tabular-nums; }
.wact-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding-right: 2px; }
.wact-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--border); }
.wact-row:last-child { border-bottom: none; }
.wact-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--bg-tertiary); }
.wact-ic.credit { color: var(--success); }
.wact-ic.debit { color: var(--text-secondary); }
.wact-main { flex: 1; min-width: 0; }
.wact-t { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wact-d { display: block; font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.wact-r { text-align: right; flex-shrink: 0; }
.wact-amt { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.wact-amt.credit { color: var(--success); }
.wact-amt.debit { color: var(--danger); }
.wact-bal { display: block; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; margin-top: 1px; }
.wact-empty { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }

/* Top-up page — compact density (scoped to .topup-page so checkout.php is unaffected). */
.topup-page .page-header { margin-bottom: 16px; }
/* Select Amount + Select Payment sit SIDE BY SIDE inside the left column; wallet activity below. */
.topup-page .topup-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
/* Both top cards are flex columns so the shorter one (Select Amount) can fill its equalised height. */
.topup-page .topup-2col > .checkout-product { display: flex; flex-direction: column; }
/* Select Amount content (presets + custom amount) fills the card height — vertically centred so the
   equal-height card never shows a dead void at the bottom. */
.topup-page .topup-amount-body { display: flex; flex-direction: column; justify-content: center; gap: 16px; flex: 1 1 auto; }
.topup-page .page-header h1 { font-size: 22px; margin-bottom: 4px; }
.topup-page .page-header p { font-size: 13px; }
.topup-page .checkout-grid { grid-template-columns: 1fr 340px; gap: 18px; }
.topup-page .checkout-product { padding: 18px; }
.topup-page .checkout-summary { padding: 18px; top: 76px; }
/* Topup grid layout (desktop): left column = the two cards (row 1) then Wallet activity
   (row 2); the summary occupies the right column, spanning both rows at its natural height.
   On mobile it linearises to cards → summary → Wallet activity (see the order rules below). */
.topup-page .topup-grid > .topup-2col      { grid-column: 1; grid-row: 1; }
.topup-page .topup-grid > .wact-card       { grid-column: 1; grid-row: 2; }
.topup-page .topup-grid > .checkout-summary { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.topup-page .payment-methods { gap: 10px; margin: 13px 0; }
/* Payment rows use the same unified metrics as checkout (see .payment-option) so the
   two pages match exactly — no topup-specific padding/size override here. */
.topup-page .topup-preset-grid { gap: 8px; margin-bottom: 0; }
.topup-page .form-group { margin-bottom: 0; }
/* Wallet activity spacing comes from the grid gap (row gap on desktop, stack gap on mobile). */
.topup-page .wact-card { margin-top: 0; }
.topup-page .wact-row { padding: 9px 4px; gap: 11px; }
.topup-page .wact-ic { width: 30px; height: 30px; border-radius: 8px; }
.topup-page .wact-list { max-height: 280px; }
@media (max-width: 768px) {
  /* The scoped 2-col rule above out-specifies the global mobile 1-col, so re-assert it here. */
  .topup-page .checkout-grid { grid-template-columns: 1fr; gap: 14px; }
  .topup-page .topup-2col { grid-template-columns: 1fr; gap: 14px; }
  /* Linearise the topup grid: reset the desktop row/column placement and order the stack
     as cards → Top-Up Summary → Wallet activity (wallet activity sits BELOW the summary). */
  .topup-page .topup-grid > .topup-2col,
  .topup-page .topup-grid > .wact-card,
  .topup-page .topup-grid > .checkout-summary { grid-column: auto; grid-row: auto; }
  .topup-page .topup-grid > .topup-2col      { order: 1; }
  .topup-page .topup-grid > .checkout-summary { order: 2; }
  .topup-page .topup-grid > .wact-card       { order: 3; }
  .topup-page .checkout-product, .topup-page .checkout-summary { padding: 14px; }
  .topup-page .page-header { margin-bottom: 12px; }
  .topup-page .page-header h1 { font-size: 20px; }
  .topup-page .wact-list { max-height: 240px; }
}

/* Dedicated crypto payment page (/crypto-payment.php). */
.cpay-page .container { max-width: 860px; }
.cpay-grid { display: grid; grid-template-columns: 1fr 300px; gap: 18px; align-items: start; }
.cpay-card { background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 18px; }
.cpay-amount-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cpay-amount-k { color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.cpay-amount-v { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; }
.cpay-timer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 16px; padding: 8px 12px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-md); }
.cpay-timer-k { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cpay-timer-v { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.cpay-timer--out .cpay-timer-v { color: var(--danger); }
.cpay-coins-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: 8px; }
.cpay-coins { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.cpay-coin { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; background: var(--bg-input); border: 1.5px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--transition), background var(--transition); }
.cpay-coin:hover { border-color: var(--border-hover); }
.cpay-coin.on { border-color: var(--accent); background: var(--accent-glow); }
.cpay-coin-ic { display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.cpay-coin-ic svg { width: 30px; height: 30px; display: block; border-radius: 50%; }
.cpay-coin-sym { font-weight: 700; font-size: var(--fs-sm); }
.cpay-coin-name { font-size: var(--fs-xs); color: var(--text-secondary); }
.cpay-coin-net { font-size: var(--fs-2xs); color: var(--text-muted); }
.cpay-detail { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.cpay-detail-grid { display: flex; gap: 16px; align-items: flex-start; }
.cpay-qr img { border-radius: 8px; background: #fff; padding: 6px; display: block; }
.cpay-detail-info { flex: 1; min-width: 0; }
.cpay-field { margin-bottom: 10px; }
.cpay-field-k { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 2px; }
.cpay-field-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.cpay-addr-row { display: flex; gap: 8px; align-items: center; }
.cpay-addr { flex: 1; min-width: 0; font-family: monospace; font-size: var(--fs-xs); word-break: break-all; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; }
.cpay-warn { margin-top: 12px; font-size: var(--fs-xs); color: var(--text-secondary); background: var(--warning-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px 11px; }
.cpay-actions { position: sticky; top: 76px; }
.cpay-actions form { margin: 0; }
.cpay-actions form + form { margin-top: 10px; }
.cpay-actions-note { font-size: var(--fs-xs); color: var(--text-muted); text-align: center; margin: 8px 0 0; }
.cpay-expired { text-align: center; }
.cpay-expired h2 { font-size: var(--fs-lg); margin: 0 0 6px; }
@media (max-width: 768px) {
  .cpay-grid { grid-template-columns: 1fr; }
  .cpay-actions { position: static; }
  .cpay-detail-grid { flex-direction: column; align-items: center; text-align: center; }
  .cpay-addr-row { width: 100%; }
}

.admin-main {
    padding: 32px;
    min-width: 0;
    overflow-x: auto;
}

/* === Admin breadcrumb ("you are here" — injected by sidebar.php) === */
.admin-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 16px;
}
.admin-breadcrumb .crumb-sep { opacity: 0.5; }
.admin-breadcrumb .crumb-current { color: var(--text-secondary); font-weight: 500; }

/* === Admin page switcher (segmented toggle, e.g. My products / Vendor products) === */
.admin-page-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

/* === Admin mobile drawer controls (hidden on desktop; shown ≤768px) === */
.admin-drawer-toggle {
    display: none;
    position: fixed;
    top: 72px;
    left: 12px;
    z-index: 1200;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.admin-drawer-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
}
.admin-sidebar-backdrop { display: none; }

/* === Vendor application review (admin/vendors.php?id=) — 2 equal, compact cards + KYC previews === */
.vr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.vr-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex-shrink: 0; }
.vr-review-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; margin-bottom: 14px; }
.vr-review-cols .table-wrapper { margin: 0; }
.vr-review-cols table th, .vr-review-cols table td { padding: 6px 12px; font-size: 12.5px; }
.vr-kyc-list { display: flex; flex-direction: column; gap: 7px; padding: 10px; }
.vr-kyc-item { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.vr-kyc-thumb { flex: none; width: 42px; height: 42px; border-radius: var(--radius-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); font-size: 10px; font-weight: 600; text-decoration: none; }
.vr-kyc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vr-kyc-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vr-kyc-type { font-weight: 600; font-size: 12.5px; text-transform: capitalize; }
.vr-kyc-sub { font-size: 11px; color: var(--text-muted); word-break: break-word; }
.vr-kyc-open { font-size: 11px; }
.vr-kyc-acts { display: flex; gap: 14px; margin-top: 3px; }
.vr-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px; }

/* === Info box (explanatory; text always fully visible) === */
.info-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.info-box > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--text-muted); }
.info-box strong { color: var(--text-primary); font-weight: 600; }
.info-box code { background: var(--bg-secondary); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* === Marketplace finance + disputes === */
.mf-gate { display: flex; gap: 12px 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 16px; }
.mf-gate-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.mf-gate-state { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.mf-gate-state.on { color: var(--success); background: rgba(34, 197, 94, 0.12); }
.mf-gate-state.off { color: var(--text-muted); background: var(--bg-secondary); }
.mf-tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.mf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; margin-bottom: 14px; }
.mf-preview-scroll { overflow-x: auto; }
.mf-payouts-scroll { max-height: 360px; overflow: auto; }
.mf-disputes-scroll { max-height: 560px; overflow: auto; }
.mf-payouts-scroll thead th, .mf-disputes-scroll thead th { position: sticky; top: 0; background: var(--bg-secondary); z-index: 2; }
.mf-payouts-scroll td, .mf-disputes-scroll td { vertical-align: middle; }

/* === Toggle switch (button-form; reusable) === */
.hl-switch { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; padding: 0; cursor: pointer; }
.hl-switch-track { position: relative; flex: none; width: 44px; height: 24px; border-radius: 999px; background: var(--border); transition: background 0.2s ease; }
.hl-switch.is-on .hl-switch-track { background: var(--success); }
.hl-switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left 0.2s ease; }
.hl-switch.is-on .hl-switch-thumb { left: 23px; }
.hl-switch-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }

/* === Empty States === */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.empty-state h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.empty-state p {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 20px;
}

/* === Utilities === */
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-accent { color: var(--accent); }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }

/* === Theme Toggle === */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 4px;
    flex-shrink: 0;
}

.theme-toggle:hover {
    border-color: var(--accent);
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }

[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* === Loading Spinner === */
.spinner {
    width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* === Scrollbar === */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* === Toast Notifications === */
.toast-container {
    position: fixed;
    top: 80px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    animation: slideIn 0.3s ease;
    max-width: 360px;
}

.toast-success { background: var(--success-bg); border: 1px solid rgba(34, 197, 94, 0.3); color: var(--success); }
.toast-error { background: var(--danger-bg); border: 1px solid rgba(239, 68, 68, 0.3); color: var(--danger); }
.toast-info { background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-primary); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
.toast-warning { background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.3); color: #f59e0b; }

@keyframes slideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* === Product Page — Premium Redesign === */
.pp-breadcrumb { border-bottom: 1px solid var(--border); background: var(--bg-secondary); }
.pp-breadcrumb-inner { display: flex; align-items: center; gap: 8px; padding: 14px 0; font-size: 13px; color: var(--text-secondary); }
.pp-breadcrumb-inner a { color: var(--text-secondary); text-decoration: none; transition: color var(--transition); }
.pp-breadcrumb-inner a:hover { color: var(--text-primary); }
.pp-breadcrumb-inner svg { flex-shrink: 0; opacity: 0.45; }
.pp-breadcrumb-inner span { color: var(--text-secondary); font-weight: 500; }

.pp-main { padding: 44px 0 0; }   /* bottom gap now handled by .main-content padding-bottom (avoids double) */
.pp-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: 56px; align-items: start; }

/* Image Column — premium framed gallery, sticky on desktop */
.pp-image-col { position: sticky; top: 88px; }
.pp-image-wrap {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    background:
        radial-gradient(130% 100% at 50% -10%, rgba(127,127,127,0.10) 0%, transparent 58%),
        var(--bg-secondary);
    isolation: isolate;
}
.pp-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 0 0 1px rgba(255,255,255,0.02);
    pointer-events: none;
    z-index: 2;
}
.pp-image-wrap img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.pp-image-placeholder { width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
.pp-image-placeholder svg { width: 64px; height: 64px; color: var(--text-muted); opacity: 0.3; }

/* Image gallery — zoomable main + thumbnail rail */
.pp-gallery-zoom { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; position: relative; }
.pp-gallery-zoom img { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.pp-gallery-zoom::before {
    content: "";
    position: absolute;
    right: 14px; bottom: 14px;
    width: 38px; height: 38px;
    z-index: 3;
    border-radius: 50%;
    background: rgba(10,10,10,0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") center/18px no-repeat;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.15);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.pp-gallery-zoom:hover::before { opacity: 1; transform: translateY(0); }
.pp-gallery-zoom:hover img { transform: scale(1.05); }
.pp-gallery-thumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 4px; scroll-snap-type: x proximity; flex-wrap: nowrap; }
.pp-gallery-thumb { flex: 0 0 auto; width: 76px; height: 76px; padding: 0; border: 1.5px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-secondary); cursor: pointer; transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; scroll-snap-align: start; position: relative; }
.pp-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.pp-gallery-thumb:hover { transform: translateY(-2px); border-color: var(--border-hover); }
.pp-gallery-thumb:hover img { transform: scale(1.08); }
.pp-gallery-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.pp-gallery-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pp-trust-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.pp-trust-badge { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 8px; text-align: center; font-size: 11px; font-weight: 600; color: var(--text-secondary); backdrop-filter: blur(12px); }
.pp-trust-icon { display: block; font-size: 18px; margin-bottom: 4px; }

/* Trust Strip (full-width horizontal bar below grid) */
.pp-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 40px;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}
.pp-trust-strip-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    transition: background 0.18s ease;
}
.pp-trust-strip-item:hover { background: var(--bg-card-hover); }
.pp-trust-strip-item:not(:last-child) {
    border-right: 1px solid var(--border);
}
.pp-trust-strip-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
}
/* Skeleton badge row + notify-form input row (product.php) */
.pp-skel-row { display: flex; gap: 8px; margin-bottom: 16px; }
.pp-notify-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: stretch; }
.pp-trust-strip-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.pp-trust-strip-text strong { font-size: 13px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }
.pp-trust-strip-text span { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

/* Product page feature list — icon + text under gallery (desktop) / under buy card (mobile) */
.pp-features-list { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; gap: 11px 24px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.pp-feature-item { display: flex; align-items: center; gap: 9px; }
.pp-feature-item svg { flex-shrink: 0; color: var(--text-secondary); }
.pp-feature-item span { font-size: 13px; font-weight: 500; color: var(--text-secondary); line-height: 1.3; }
.pp-features-mobile { display: none; }

/* Features Full-Width Section */
/* Info Column */
.pp-info-col { display: flex; flex-direction: column; }
.pp-badges { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; align-items: center; }
/* C2: shared badge typography */
.pp-badge, .tfa-badge, .content-type-badge { text-transform: uppercase; }

.pp-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; border-radius: 7px; line-height: 1; }
.pp-badge-category { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); }
.pp-badge-stock { background: var(--success-bg); color: var(--success); border: 1px solid rgba(34,197,94,0.25); }
.pp-badge-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px rgba(34,197,94,0.18); }
.pp-badge-out { background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(239,68,68,0.2); }

.pp-title { font-size: 34px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: var(--text-primary); margin-bottom: 10px; }
.pp-seller { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; }
.pp-seller strong { color: var(--text-secondary); font-weight: 600; }

/* Rating summary — premium inline pill */
.pp-rating-summary { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 0; background: none; border: 0; cursor: pointer; align-self: flex-start; }
.pp-rating-summary .pp-stars-display { gap: 1px; }
.pp-rating-text { font-size: 13px; font-weight: 600; color: var(--text-secondary); padding-left: 2px; border-bottom: 1px dashed transparent; transition: border-color 0.18s ease, color 0.18s ease; }
.pp-rating-summary:hover .pp-rating-text { color: var(--text-primary); border-bottom-color: var(--border-hover); }
.pp-star { color: var(--text-muted); }
.pp-star.filled { color: #f5a623; }

.pp-price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.pp-price { font-size: 36px; font-weight: 900; color: var(--accent); }

.pp-description { color: var(--text-secondary); line-height: 1.7; margin-bottom: 26px; font-size: 15px; word-wrap: break-word; }
.pp-description h1, .pp-description h2, .pp-description h3, .pp-description h4, .pp-description h5, .pp-description h6 { color: var(--text-primary); margin: 16px 0 8px; }
.pp-description ul, .pp-description ol { margin: 8px 0; padding-left: 24px; }
.pp-description li { margin: 4px 0; }
.pp-description a { color: var(--accent); text-decoration: underline; }
.pp-description blockquote { border-left: 3px solid var(--accent); padding-left: 12px; margin: 12px 0; opacity: 0.85; }
.pp-description table { border-collapse: collapse; margin: 12px 0; width: 100%; }
.pp-description th, .pp-description td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.pp-description th { background: var(--bg-card); font-weight: 600; }
.pp-description pre, .pp-description code { font-family: monospace; background: var(--bg-card); border-radius: 4px; padding: 2px 6px; font-size: 13px; }
.pp-description pre { padding: 12px; overflow-x: auto; white-space: pre-wrap; }
.pp-description p { margin: 0 0 8px; }
.pp-description img { max-width: 100%; height: auto; border-radius: 8px; }
.pp-readmore { color: var(--accent); font-weight: 500; text-decoration: none; white-space: nowrap; }
.pp-readmore:hover { text-decoration: underline; }

.pp-keywords-bar {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.pp-keyword-tag {
    display: inline-block; padding: 2px 10px; font-size: 11px; font-weight: 500;
    color: var(--text-muted); background: var(--bg-tertiary); border: 1px solid var(--border);
    border-radius: 10px; text-decoration: none; transition: all 0.15s; line-height: 1.6;
}
.pp-keyword-tag:hover {
    color: var(--bg-primary); background: var(--primary); border-color: var(--primary);
}

/* Features card classes removed */

/* Buy Card — premium purchase panel */
.pp-buy-card { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 22px 22px 20px; box-shadow: var(--shadow-md); overflow: hidden; }
.pp-buy-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--border-hover), transparent); opacity: 0.7; }
.pp-buy-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.pp-buy-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.pp-buy-price { font-size: 38px; font-weight: 900; letter-spacing: -0.03em; color: var(--text-primary); line-height: 1; }
.pp-stock-indicator { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 20px; }
.pp-stock-indicator.in { color: var(--success); background: var(--success-bg); }
.pp-stock-indicator.out { color: var(--danger); background: var(--danger-bg); }
.pp-stock-dot { width: 7px; height: 7px; border-radius: 50%; }
.pp-stock-indicator.in .pp-stock-dot { background: var(--success); box-shadow: 0 0 0 3px rgba(34,197,94,0.18); animation: pulse 2s infinite; }
.pp-stock-indicator.out .pp-stock-dot { background: var(--danger); }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Premium guarantee strip inside buy card */
.pp-buy-guarantees { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.pp-buy-guarantee { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-secondary); }
.pp-buy-guarantee svg { flex-shrink: 0; color: var(--success); }
.pp-buy-guarantee strong { color: var(--text-primary); font-weight: 600; }
/* Sticky Add-to-Cart bar — compact floating card (desktop), full-width bar (mobile, 640 block).
   Opaque + elevated so it never blends with content/footer. Hidden until JS adds .is-visible. */
.pp-sticky-buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    position: fixed;
    z-index: 900;
    right: 24px;
    bottom: 24px;
    width: min(360px, calc(100vw - 48px));
    padding: 10px 10px 10px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
    transform: translateY(170%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
    pointer-events: none;
}
.pp-sticky-buy.is-visible { transform: translateY(0); visibility: visible; pointer-events: auto; }
.pp-sticky-info { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
.pp-sticky-now { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.pp-sticky-was { font-size: 12px; color: var(--text-muted); text-decoration: line-through; }
.pp-buy-btn.pp-sticky-cta { width: auto; flex: 0 0 auto; min-height: 44px; padding: 0 18px; }

.pp-buy-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px; border-radius: var(--radius-md); background: var(--accent); color: var(--bg-primary); font-weight: 700; font-size: 15px; text-align: center; text-decoration: none; border: 1px solid var(--accent); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.pp-buy-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--bg-primary); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,0.24); }
.pp-buy-btn:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(0,0,0,0.2); }
.pp-buy-btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.pp-buy-btn.disabled:hover { background: var(--accent); }
/* (Buy Now styling consolidated into .pp-buy-btn.pp-buy-now-btn above — orange primary hero.) */
.pp-notify-btn { background: var(--bg-secondary); color: var(--warning); border-color: rgba(245,158,11,0.3); box-shadow: none; }
.pp-notify-btn:hover { background: rgba(245,158,11,0.08); border-color: var(--warning); color: var(--warning); box-shadow: none; }
.pp-notify-email {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    font-size: 14px;
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--bg-input, var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.pp-notify-email:focus { border-color: var(--accent); }
.pp-notify-submit {
    white-space: nowrap;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--bg-primary);
    font-weight: 700;
    font-size: 14px;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.pp-notify-submit:hover { background: var(--accent-hover, var(--accent)); }
.pp-notify-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 4px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1.5;
}
.pp-notify-consent input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }
.pp-notify-msg { font-size: 13px; margin: 6px 0 0; }
.pp-notify-msg--success { color: var(--success); }
.pp-notify-msg--error { color: var(--danger); }
.pp-notify-done {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    background: var(--success-bg, rgba(34,197,94,0.08));
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: var(--radius-sm);
    color: var(--success);
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    box-sizing: border-box;
}
.pp-buy-note { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: 12.5px; color: var(--text-muted); margin-top: 14px; line-height: 1.5; }
/* Payment trust strip on the buy card — reassurance + accepted methods (white chips reuse .pay-brand) */
.pp-trust-pay { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.pp-trust-pay-label { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 10px; }
.pp-trust-pay-label svg { color: var(--success); flex: 0 0 auto; }
.pp-pay-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.pp-pay-logos .pay-brand { height: auto; background: #fff; padding: 3px 6px; border-radius: 5px; box-shadow: 0 0 0 1px var(--border); display: inline-flex; align-items: center; }
.pp-pay-logos .pay-brand img { height: 18px; width: auto; display: block; }
.pp-pay-logos .pay-coin { display: inline-flex; align-items: center; }
.pp-pay-logos .pay-coin svg { width: 22px; height: 22px; display: block; }

/* === Deal Pricing — Product Detail Page === */
/* FLASH SALE — neon glowing text, no box (eye-catching "deal" feel) */
.pp-deal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 14px;
}
.pp-deal-header::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ff3b5c;
    box-shadow: 0 0 6px #ff3b5c, 0 0 12px rgba(255, 59, 92, 0.7);
    animation: deal-neon-dot 1.4s ease-in-out infinite;
}
.pp-deal-badge {
    font-size: 13px;
    font-weight: 800;
    color: #ff5c78;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    text-shadow: 0 0 4px rgba(255, 59, 92, 0.85), 0 0 12px rgba(255, 59, 92, 0.55), 0 0 26px rgba(255, 59, 92, 0.35);
    animation: deal-neon-text 2.4s ease-in-out infinite;
}
@keyframes deal-neon-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes deal-neon-text {
    0%, 100% { text-shadow: 0 0 4px rgba(255, 59, 92, 0.85), 0 0 12px rgba(255, 59, 92, 0.55), 0 0 26px rgba(255, 59, 92, 0.35); }
    50%      { text-shadow: 0 0 3px rgba(255, 59, 92, 0.6), 0 0 8px rgba(255, 59, 92, 0.4); }
}
@media (prefers-reduced-motion: reduce) {
    .pp-deal-header::before, .pp-deal-badge { animation: none; }
}
.pp-buy-price-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pp-buy-was-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Original (struck) price — more legible (was --text-muted / weight 400: too faded) */
.pp-buy-price-original {
    font-size: 16px;
    color: var(--text-secondary);
    text-decoration: line-through;
    text-decoration-color: var(--danger);
    font-weight: 600;
}
.pp-discount-pct {
    display: inline-flex;
    align-items: center;
    background: var(--danger);
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    padding: 2px 9px;
    white-space: nowrap;
}
@keyframes deal-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50%       { box-shadow: 0 0 10px 3px rgba(239, 68, 68, 0.2); }
}

/* Delivery Info */
/* Delivery info merged into trust strip */

/* Tabs */
.pp-tabs-section { margin-top: 72px; border-top: 1px solid var(--border); padding-top: 8px; }
.pp-tab-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 28px; padding: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.pp-tab { display: inline-flex; flex: 1 1 auto; justify-content: center; align-items: center; padding: 10px 12px; font-size: 13.5px; font-weight: 600; border: none; border-radius: var(--radius-md); background: none; color: var(--text-muted); cursor: pointer; transition: background 0.18s ease, color 0.18s ease; white-space: nowrap; }
.pp-tab.active { color: var(--text-primary); background: var(--bg-card-hover); box-shadow: var(--shadow-sm); }
.pp-tab:hover:not(.active) { color: var(--text-secondary); background: var(--bg-tertiary); }
.pp-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 7px; padding: 0 5px; font-size: 10.5px; font-weight: 700; line-height: 1; border-radius: 9px; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); }
.pp-tab.active .pp-tab-badge { background: var(--accent); color: var(--bg-primary); border-color: var(--accent); }
.pp-tab-panel { max-width: 760px; }
#pp-panel-reviews { max-width: none; }
.pp-tab-panel.hidden { display: none; }
.pp-prose { color: var(--text-secondary); line-height: 1.8; font-size: 15px; max-width: 68ch; text-wrap: pretty; word-wrap: break-word; overflow-wrap: anywhere; }
.pp-prose h1, .pp-prose h2, .pp-prose h3, .pp-prose h4, .pp-prose h5, .pp-prose h6 { color: var(--text-primary); margin: 16px 0 8px; }
.pp-prose ul, .pp-prose ol { margin: 8px 0; padding-left: 24px; }
.pp-prose li { margin: 4px 0; }
.pp-prose a { color: var(--accent); text-decoration: underline; }
.pp-prose blockquote { border-left: 3px solid var(--accent); padding-left: 12px; margin: 12px 0; opacity: 0.85; }
.pp-prose table { border-collapse: collapse; margin: 12px 0; width: 100%; }
.pp-prose th, .pp-prose td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.pp-prose th { background: var(--bg-card); font-weight: 600; }
.pp-prose pre, .pp-prose code { font-family: monospace; background: var(--bg-card); border-radius: 4px; padding: 2px 6px; font-size: 13px; }
.pp-prose pre { padding: 12px; overflow-x: auto; white-space: pre-wrap; }
.pp-prose p { margin: 0 0 8px; }
.pp-prose img { max-width: 100%; height: auto; border-radius: 8px; }
.pp-prose [style] { max-width: 100%; }
.pp-instructions-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; color: var(--text-secondary); line-height: 1.8; font-size: 14px; word-wrap: break-word; }
.pp-instructions-box h1, .pp-instructions-box h2, .pp-instructions-box h3, .pp-instructions-box h4, .pp-instructions-box h5, .pp-instructions-box h6 { color: var(--text-primary); margin: 16px 0 8px; }
.pp-instructions-box ul, .pp-instructions-box ol { margin: 8px 0; padding-left: 24px; }
.pp-instructions-box li { margin: 4px 0; }
.pp-instructions-box a { color: var(--accent); text-decoration: underline; }
.pp-instructions-box blockquote { border-left: 3px solid var(--accent); padding-left: 12px; margin: 12px 0; opacity: 0.85; }
.pp-instructions-box table { border-collapse: collapse; margin: 12px 0; width: 100%; }
.pp-instructions-box th, .pp-instructions-box td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.pp-instructions-box th { background: var(--bg-secondary); font-weight: 600; }
.pp-instructions-box pre, .pp-instructions-box code { font-family: monospace; background: var(--bg-secondary); border-radius: 4px; padding: 2px 6px; font-size: 13px; }
.pp-instructions-box pre { padding: 12px; overflow-x: auto; white-space: pre-wrap; }
.pp-instructions-box p { margin: 0 0 8px; }
.pp-instructions-box img { max-width: 100%; height: auto; border-radius: 8px; }

/* === Reviews Section === */
.pp-reviews-section { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--border); }
.pp-reviews-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 16px; }
.pp-reviews-header-left { display: flex; flex-direction: column; gap: 8px; }
.pp-reviews-title { font-size: 20px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 10px; }
.pp-reviews-title svg { color: var(--accent); }
.pp-reviews-summary { display: flex; align-items: center; gap: 10px; }
.pp-reviews-avg { font-size: 28px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; }
.pp-reviews-count { font-size: 14px; color: var(--text-muted); }

/* Tab badge for review count */
.pp-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background: rgba(255, 255, 255, 0.15); color: var(--accent); font-size: 11px; font-weight: 700; border-radius: 10px; margin-left: 6px; }

/* Rating summary link on product title */
.pp-rating-summary { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; text-decoration: none; cursor: pointer; background: none; border: none; padding: 0; font: inherit; }
.pp-rating-text { font-size: 14px; color: var(--text-muted); transition: color var(--transition); }
.pp-rating-summary:hover .pp-rating-text { color: var(--accent); }

/* Stars */
.pp-stars-display { display: flex; align-items: center; gap: 2px; }
.pp-star { color: var(--text-muted); opacity: 0.3; transition: var(--transition); }
.pp-star.filled { color: #fbbf24; opacity: 1; }
.pp-stars-small { gap: 1px; }

/* Reviews tab compact summary */
.rv-summary-row { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.rv-summary-score { display: flex; align-items: center; gap: 12px; }
.rv-big-num { font-size: 32px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1; }
.rv-count-text { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* Tab panel: two-column layout (sidebar + preview) */
.rv-tab-columns { display: flex; gap: 20px; align-items: flex-start; }
.rv-tab-sidebar { width: 260px; flex-shrink: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.rv-tab-sidebar .rv-sidebar-score { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.rv-tab-sidebar .rv-big-num { font-size: 36px; }
.rv-tab-sidebar .rv-view-all-btn { margin-top: 4px; }
.rv-tab-sidebar .rv-write-btn { margin-top: 0; width: 100%; justify-content: center; }
.rv-tab-main { flex: 1; min-width: 0; }

.rv-snapshot-bars { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rv-bar-row { display: flex; align-items: center; gap: 8px; }
.rv-bar-label { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; color: var(--text-secondary); min-width: 28px; flex-shrink: 0; }
.rv-bar-track { flex: 1; height: 8px; background: var(--bg-secondary); border-radius: 4px; overflow: hidden; min-width: 0; }
.rv-bar-fill { height: 100%; background: linear-gradient(90deg, #fbbf24, #f59e0b); border-radius: 4px; transition: width 0.4s ease; min-width: 0; }
.rv-bar-count { font-size: 11px; color: var(--text-muted); min-width: 20px; text-align: right; flex-shrink: 0; }

/* Clickable bars in modal */
.rv-bar-row--clickable { cursor: pointer; padding: 3px 6px; border-radius: 6px; margin: -3px -6px; transition: background var(--transition); }
.rv-bar-row--clickable:hover { background: rgba(255, 255, 255, 0.06); }
.rv-bar-row--clickable.rv-bar-active { background: rgba(255, 255, 255, 0.1); }
.rv-bar-row--clickable.rv-bar-active .rv-bar-label { color: var(--accent); }

/* Sidebar bar sizing */
.rv-snapshot-bars--modal .rv-bar-track { height: 10px; }

/* Preview cards (3 five-star) */
.rv-preview-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; max-height: 330px; overflow-y: auto; padding-right: 8px; }
.rv-preview-list::-webkit-scrollbar { width: 6px; }
.rv-preview-list::-webkit-scrollbar-track { background: transparent; }
.rv-preview-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.rv-preview-list::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.rv-preview-card { border-radius: var(--radius-md); padding: 16px 20px; transition: var(--transition); }
.rv-preview-card:hover { border-color: var(--border-hover); }
.rv-preview-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rv-preview-avatar, .rv-preview-avatar .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--bg-primary); flex-shrink: 0; overflow: hidden; }
.rv-preview-meta { display: flex; flex-direction: column; }
.rv-preview-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.rv-preview-date { font-size: 11px; color: var(--text-muted); }
.rv-preview-comment { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 0; }

/* View All / Write Review buttons */
.rv-view-all-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 20px; font-size: 14px; font-weight: 600; font-family: var(--font); color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: all 0.2s ease; margin-top: 8px; }
.rv-view-all-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--accent); }
.rv-write-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; font-size: 13px; font-weight: 600; font-family: var(--font); color: var(--bg-primary); background: var(--accent); border: 1px solid var(--accent); border-radius: 8px; cursor: pointer; transition: all 0.2s ease; margin-top: 16px; }
.rv-write-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--bg-primary); }

/* Review image thumbnails */
.rv-review-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.rv-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 1px solid var(--border); transition: var(--transition); }
.rv-thumb:hover { border-color: var(--accent); transform: scale(1.05); }

/* Image upload UI */
.rv-img-upload { margin-top: 8px; }
.rv-img-upload-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; font-weight: 600; font-family: var(--font); color: var(--text-secondary); background: var(--bg-secondary); border: 1px dashed var(--border); border-radius: 8px; cursor: pointer; transition: all 0.2s ease; }
.rv-img-upload-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.rv-img-hint { font-size: 11px; color: var(--text-muted); }
.rv-img-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.rv-img-preview-item { position: relative; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.rv-img-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.rv-img-preview-item button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; border: none; font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* Lightbox */
.rv-lightbox { display: none; position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; }
.rv-lightbox-close { position: absolute; top: 16px; right: 16px; z-index: 2; color: #fff; }
.rv-lightbox.open { display: flex; }
.rv-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(6px); }
.rv-lightbox-img { position: relative; z-index: 1; max-width: 90vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 12px 60px rgba(0,0,0,0.5); cursor: pointer; animation: rvSlideUp 0.2s ease-out; }

/* === Reviews Modal === */
.rv-modal-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 24px; }
.rv-modal-overlay.open { display: flex; }
.rv-modal { width: 100%; max-width: 900px; max-height: 85vh; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius-xl); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.3); animation: rvSlideUp 0.25s ease-out; }
@keyframes rvSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.rv-modal-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.rv-modal-title { font-size: 18px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 10px; margin: 0; }
.rv-modal-title svg { color: var(--accent); }
.rv-modal-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; font-size: 20px; color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; line-height: 1; }
.rv-modal-close:hover { color: var(--text-primary); border-color: var(--accent); background: var(--bg-tertiary); }

/* Two-column layout: sidebar + reviews */
.rv-modal-columns { display: flex; flex: 1; overflow: hidden; min-height: 0; }

/* Sidebar: sticky rating summary */
.rv-modal-sidebar { width: 220px; flex-shrink: 0; padding: 20px; border-right: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.rv-sidebar-score { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.rv-sidebar-score .rv-big-num { font-size: 40px; }
.rv-sidebar-filters { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }

/* Main review area (scrollable) */
.rv-modal-main { flex: 1; overflow-y: auto; padding: 20px 24px; min-width: 0; }

/* Star filter buttons (inside sidebar on desktop, horizontal on mobile) */
.rv-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.rv-filter-btn { display: inline-flex; align-items: center; gap: 2px; padding: 6px 12px; font-size: 12px; font-weight: 600; font-family: var(--font); color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 20px; cursor: pointer; transition: all 0.2s ease; }
.rv-filter-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.rv-filter-btn.active { color: var(--text-primary); border-color: var(--accent); background: var(--bg-tertiary); }
.rv-filter-count { font-size: 11px; color: var(--text-muted); margin-left: 2px; }

/* Modal form and list */
.rv-modal-form { margin-bottom: 20px; }
.rv-modal-list { display: flex; flex-direction: column; gap: 12px; }
.rv-review-card { border-radius: var(--radius-lg); padding: 16px 20px; transition: var(--transition); }
.rv-review-card:hover { border-color: var(--border-hover); }

/* Review form */
.pp-review-form-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px 28px; margin-bottom: 24px; }
.pp-review-form-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; }
.pp-star-rating { margin-bottom: 16px; }
.pp-star-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); display: block; margin-bottom: 8px; }
.pp-star-inputs { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.pp-star-inputs input { display: none; }
.pp-star-inputs label { cursor: pointer; color: var(--text-muted); opacity: 0.3; transition: var(--transition); }
.pp-star-inputs label svg { display: block; fill: none; }
.pp-star-inputs label:hover,
.pp-star-inputs label:hover ~ label,
.pp-star-inputs input:checked ~ label { color: #fbbf24; opacity: 1; }
.pp-star-inputs input:checked ~ label svg,
.pp-star-inputs label:hover svg,
.pp-star-inputs label:hover ~ label svg { fill: currentColor; }
.pp-review-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.pp-review-submit { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; font-size: 14px; font-weight: 600; font-family: var(--font); color: var(--bg-primary); background: var(--accent); border: 1px solid var(--accent); border-radius: 8px; cursor: pointer; transition: all 0.2s ease; }
.pp-review-submit:hover { opacity: 0.9; transform: translateY(-1px); }
.pp-review-delete { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; font-size: 13px; font-weight: 500; font-family: var(--font); color: var(--danger); background: var(--danger-bg); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); }
.pp-review-delete:hover { border-color: var(--danger); }

/* Login prompt */
.pp-review-login-prompt { display: flex; align-items: center; gap: 10px; padding: 16px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; }
.pp-review-login-prompt svg { color: var(--text-muted); flex-shrink: 0; }
.pp-review-login-prompt a { color: var(--accent); font-weight: 600; text-decoration: none; }
.pp-review-login-prompt a:hover { text-decoration: underline; }

/* Reviews list */
.pp-reviews-list { display: flex; flex-direction: column; gap: 16px; }
.pp-review-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 24px; transition: var(--transition); }
.pp-review-item:hover { border-color: var(--border-hover); }
.pp-review-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pp-review-author { display: flex; align-items: center; gap: 12px; }
.pp-review-avatar, .pp-review-avatar .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--bg-primary); flex-shrink: 0; overflow: hidden; }
.pp-review-meta { display: flex; flex-direction: column; gap: 2px; }
.pp-review-username { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.pp-review-date { font-size: 12px; color: var(--text-muted); }
.pp-review-comment { font-size: 14px; line-height: 1.7; color: var(--text-secondary); }

/* Product card rating on index */
.card-rating { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.card-rating .pp-star { width: 12px; height: 12px; }
.card-rating-text { font-size: 11px; color: var(--text-muted); margin-left: 2px; }

/* Related Products */
.pp-related-section { margin-top: 72px; border-top: 1px solid var(--border); padding-top: 44px; }
.pp-related-title { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 24px; }
.pp-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pp-related-card { border-radius: var(--radius-md); border: 1px solid var(--border); overflow: hidden; background: var(--bg-card); text-decoration: none; color: inherit; transition: all 0.3s; display: flex; flex-direction: column; position: relative; }
.pp-related-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15); }
.pp-related-img { aspect-ratio: 4/3; overflow: hidden; background: var(--bg-secondary); }
.pp-related-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.pp-related-card:hover .pp-related-img img { transform: scale(1.05); }
.pp-related-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pp-related-placeholder svg { width: 32px; height: 32px; color: var(--text-muted); opacity: 0.3; }
.pp-related-info { padding: 14px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.pp-related-name { font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.pp-related-price { font-size: 14px; font-weight: 700; color: var(--accent); }
.pp-related-actions { padding: 0 14px 14px; margin-top: auto; }
.pp-related-cart-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: auto; padding: 8px 12px; font-size: 12px; font-weight: 600; font-family: var(--font); background: var(--accent); color: var(--accent-contrast); border: 1px solid var(--accent); border-radius: 8px; cursor: pointer; transition: all 0.2s ease; }
.pp-related-cart-btn:disabled { opacity: 0.6; cursor: default; }
.pp-related-cart-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: var(--shadow-md); }
.pp-related-card.pp-related-hidden, .product-card.pp-related-hidden { display: none; }
.pp-related-load-wrap { text-align: center; margin-top: 28px; }
.pp-related-more { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 36px; font-size: 14px; font-weight: 600; font-family: var(--font); background: transparent; color: var(--text-secondary); border: 1.5px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.pp-related-more:hover { border-color: var(--accent); color: var(--accent); }

/* Quantity Controls */
.pp-qty-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pp-qty-label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.pp-qty-controls { display: flex; align-items: center; gap: 0; height: 36px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-input); }
.pp-qty-btn { width: 34px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--text-secondary); border: none; cursor: pointer; font-size: 16px; font-weight: 600; transition: background var(--transition), color var(--transition); }
.pp-qty-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.pp-qty-input { width: 40px; height: 36px; text-align: center; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: transparent; color: var(--text-primary); font-size: 14px; font-weight: 700; font-family: var(--font); -moz-appearance: textfield; }
.pp-qty-input::-webkit-inner-spin-button, .pp-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.pp-qty-max { font-size: 11.5px; color: var(--text-muted); margin-left: auto; }

/* Cart Badge */
.cart-link { position: relative; display: flex; align-items: center; }
.cart-badge { position: absolute; top: -2px; right: -6px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 4px; background: var(--accent); color: var(--bg-primary); font-size: 10px; font-weight: 700; border-radius: 8px; line-height: 1; pointer-events: none; }

/* === Cart Page === */
.cart-page { padding: 40px 0 80px; min-height: 60vh; }
.cart-page .page-header { margin-bottom: 32px; }
.cart-page .page-header h1 { font-size: 28px; font-weight: 800; color: var(--text-primary); }
.cart-page .page-header p { color: var(--text-secondary); margin-top: 4px; font-size: 14px; }

.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; min-width: 0; }

.cart-item { display: grid; grid-template-columns: 56px 1fr auto auto auto; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); transition: background var(--transition); }
.cart-item:last-of-type { border-bottom: none; }
.cart-item:hover { background: var(--bg-card-hover); }

.cart-item-img { width: 56px; height: 56px; flex-shrink: 0; border-radius: 8px; overflow: hidden; background: var(--bg-secondary); display: block; }
.cart-item-img img { display: block; width: 56px; height: 56px; object-fit: cover; }
.cart-item-placeholder { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.cart-item-placeholder svg { width: 24px; height: 24px; color: var(--text-muted); opacity: 0.3; }

.cart-item-info { min-width: 0; overflow: hidden; }
.cart-item-name { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-item-name:hover { color: var(--accent); }
.cart-item-cat { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.cart-item-price { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

.cart-item-qty { flex-shrink: 0; }
.cart-qty-form { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cart-qty-form .pp-qty-btn { width: 28px; height: 28px; font-size: 14px; display: flex; align-items: center; justify-content: center; background: var(--bg-card); color: var(--text-primary); border: none; cursor: pointer; }
.cart-qty-form .pp-qty-btn:hover { background: var(--bg-card-hover); }
.cart-qty-form .pp-qty-input { width: 32px; height: 28px; font-size: 12px; text-align: center; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary); font-family: var(--font); font-weight: 600; -moz-appearance: textfield; }
.cart-qty-form .pp-qty-input::-webkit-inner-spin-button, .cart-qty-form .pp-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.cart-qty-fixed { font-size: 12px; color: var(--text-muted); white-space: nowrap; padding: 4px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); }

.cart-item-subtotal { font-size: 14px; font-weight: 700; color: var(--accent); white-space: nowrap; text-align: right; min-width: 70px; }

.cart-item-remove { flex-shrink: 0; }
.btn-remove { background: var(--bg-secondary); border: 1px solid var(--border); cursor: pointer; color: var(--text-secondary); padding: 6px; border-radius: 8px; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.btn-remove:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }

.cart-actions { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--bg-card); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

.cart-summary { position: sticky; top: 100px; min-width: 0; }

/* Empty state */
.empty-state { text-align: center; padding: 80px 20px; }
.empty-state-icon { margin-bottom: 16px; color: var(--text-muted); opacity: 0.4; }
.empty-state-icon svg { width: 48px; height: 48px; }
.empty-state h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); }
.empty-state p { color: var(--text-secondary); font-size: 14px; }

/* ── Order Detail Page ── */
.od-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
.od-header-left { display: flex; flex-direction: column; gap: 6px; }
.od-title { font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 0; }
.od-date { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.od-header-right { display: flex; align-items: center; }

.od-grid { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }
.od-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.od-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; min-width: 0; }

.od-card { border-radius: var(--radius-md); overflow: hidden; }
.od-card-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 700; color: var(--text-primary); }
.od-card-header h2 { font-size: 15px; font-weight: 700; margin: 0; }
.od-card-header svg { flex-shrink: 0; color: var(--accent); }

/* Per-item thread links — shown in order-detail.php messages card for multi-item orders */
.od-thread-others { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 20px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }
.od-thread-other-link { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); text-decoration: none; font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); transition: all 0.15s ease; }
.od-thread-other-link:hover { background: var(--bg-secondary); border-color: var(--accent); }

/* Order Items */
.od-items { display: flex; flex-direction: column; }
.od-item { display: flex; align-items: center; gap: 14px; padding: 14px 20px; }
.od-item:last-child { border-bottom: none; }
.od-item-img { width: 48px; height: 48px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.od-item-img img { width: 100%; height: 100%; object-fit: cover; }
.od-item-img--placeholder { display: flex; align-items: center; justify-content: center; background: var(--bg-input); color: var(--text-muted); }
.od-item-info { flex: 1; min-width: 0; }
.od-item-name { font-weight: 600; font-size: 14px; color: var(--text-primary); margin-bottom: 4px; }
.od-item-name a { color: var(--accent); text-decoration: none; }
.od-item-name a:hover { text-decoration: underline; }
.od-item-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.od-item-meta .status { font-size: 11px; padding: 2px 8px; }
.od-item-price { font-weight: 700; font-size: 14px; color: var(--text-primary); white-space: nowrap; }

/* Collapsible order items */
.od-item-wrap { border-bottom: 1px solid var(--border); }
.od-item-wrap:last-child { border-bottom: none; }
.od-item--expandable { cursor: pointer; transition: background 0.15s; }
.od-item--expandable:hover { background: rgba(255, 255, 255,0.04); }
.od-item-chevron { color: var(--text-muted); transition: transform 0.2s; flex-shrink: 0; }
.od-item-wrap.open .od-item-chevron { transform: rotate(180deg); }
.od-item-expand { display: none; padding: 0 20px 16px 82px; }
.od-item-wrap.open .od-item-expand { display: block; }
.od-license-inline { padding: 12px 16px; background: var(--bg-secondary); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.od-license-inline + .od-license-inline { margin-top: 8px; }

/* License Keys */
.od-licenses { display: flex; flex-direction: column; }
.od-license { padding: 10px 16px; border-bottom: 1px solid var(--border); }
.od-license:last-child { border-bottom: none; }
.od-license-product { font-weight: 600; font-size: 13px; color: var(--accent); margin-bottom: 10px; }
.od-license-details { display: flex; flex-direction: column; gap: 8px; }
.od-license-row { display: flex; align-items: center; gap: 10px; }
.od-license-label { font-size: 12px; font-weight: 600; color: var(--text-muted); min-width: 64px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.05em; }
.od-license-row .license-key { font-size: 13px; }
.od-instr-toggle { display: flex; align-items: center; gap: 6px; margin-top: 10px; background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; font-family: var(--font); }
.od-instr-toggle:hover { opacity: 0.8; }
.od-instr-chevron { transition: transform 0.2s; }
.od-instr-toggle.open .od-instr-chevron { transform: rotate(180deg); }
.od-instr-body { display: none; margin-top: 10px; padding: 12px 14px; background: var(--bg-secondary); border-radius: var(--radius-sm); font-size: 13px; line-height: 1.6; color: var(--text-secondary); overflow-wrap: anywhere; }
.od-instr-body.open { display: block; }
/* Structure the rich-HTML instructions so headings/lists stay inside the card */
.od-instr-body > :first-child { margin-top: 0; }
.od-instr-body h1, .od-instr-body h2, .od-instr-body h3, .od-instr-body h4 { color: var(--text-primary); font-size: 14.5px; font-weight: 700; margin: 12px 0 6px; line-height: 1.3; }
.od-instr-body p { margin: 0 0 8px; }
.od-instr-body ol, .od-instr-body ul { margin: 0 0 8px; padding-left: 20px; }
.od-instr-body li { margin-bottom: 4px; }
.od-instr-body a { color: var(--accent); word-break: break-word; }
.od-instr-body img { max-width: 100%; height: auto; }
.od-instr-body pre, .od-instr-body code { white-space: pre-wrap; word-break: break-word; }

/* Payment Summary */
.od-summary { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.od-summary-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); min-width: 0; }
.od-summary-total { padding-top: 10px; border-top: 1px solid var(--border); font-weight: 700; font-size: 15px; color: var(--text-primary); }

/* Payment Details */
.od-details { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.od-detail-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; min-width: 0; }
.od-detail-label { font-size: 12px; color: var(--text-muted); flex-shrink: 0; max-width: 44%; }
.od-detail-value { font-size: 12px; color: var(--text-primary); font-weight: 500; text-align: right; min-width: 0; max-width: 56%; word-break: break-word; overflow-wrap: break-word; }

/* Quick Actions */
.od-actions { display: flex; flex-direction: column; gap: 8px; }
.od-actions .btn { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; padding: 10px 16px; border-radius: 8px; }

/* Breadcrumb row with back-button */
.od-breadcrumb-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* Header right area: status + action button */
.od-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* Item Selector — compact horizontal scrollable chips */
.od-selector { overflow-x: auto; -webkit-overflow-scrolling: touch; display: flex; gap: 8px; padding: 12px 16px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.od-selector::-webkit-scrollbar { display: block; height: 3px; }
.od-selector::-webkit-scrollbar-track { background: transparent; }
.od-selector::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.od-selector-chip { flex-shrink: 0; display: flex; align-items: center; gap: 8px; width: 150px; padding: 8px 10px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--bg-card); cursor: pointer; transition: border-color 0.15s, background 0.15s; text-align: left; font-family: var(--font); }
.od-selector-chip:hover { border-color: var(--border-hover); background: var(--bg-card-hover); }
.od-selector-chip.active { border-color: var(--accent); background: var(--bg-hover); }
.od-selector-chip-img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex-shrink: 0; display: block; }
.od-selector-chip-img--placeholder { width: 32px; height: 32px; border-radius: 6px; background: var(--bg-input); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; }
.od-selector-chip-body { flex: 1; min-width: 0; }
.od-selector-chip-title { font-size: 11px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; margin-bottom: 3px; }
.od-selector-chip .status { font-size: 10px; padding: 1px 5px; }

/* Per-item content panels (show/hide by JS) */
.od-item-panel { display: none; }
.od-item-panel.active { display: block; }

/* Cancelled banner inside item panel */
.od-cancelled-banner { background: var(--danger-bg); border: 1px solid rgba(239,68,68,0.3); border-radius: 8px; margin: 12px 16px 0; padding: 10px 14px; display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--danger); line-height: 1.5; }
.od-cancelled-banner svg { flex-shrink: 0; margin-top: 1px; }

/* Item panel inner content (price row, cancel reason) */
.od-panel-meta { display: flex; align-items: center; gap: 10px; padding: 12px 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.od-panel-meta:last-child { border-bottom: none; }
.od-panel-price { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-left: auto; white-space: nowrap; }
/* compact order-detail item panel head (name + qty + status + price on one line) */
.od-ih { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); min-width: 0; }
.od-ih-img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.od-ih-img--ph { display: inline-grid; place-items: center; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-muted); }
.od-ih-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-ih-name a { color: inherit; text-decoration: none; }
.od-ih-name a:hover { color: var(--accent); }
.od-ih-q { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.od-ih .status { flex-shrink: 0; }
.od-ih-price { font-size: 14px; font-weight: 700; color: var(--text-primary); white-space: nowrap; flex-shrink: 0; }
.od-ih-sub { display: flex; align-items: center; gap: 5px; padding: 8px 16px 0; font-size: 12px; color: var(--text-muted); }
.od-ih-sub svg { flex-shrink: 0; }
.od-ih-review { padding: 10px 16px 0; }
.od-cancel-reason { padding: 10px 16px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; border-bottom: 1px solid var(--border); }
.od-cancel-reason strong { color: var(--danger); }

/* View button in orders table */
.btn.od-view-btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; padding: 5px 12px; border-radius: 8px; }

/* === Skeleton Loading === */
@keyframes skeleton-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.skeleton {
    background: var(--bg-tertiary);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--border) 50%, transparent 100%);
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    will-change: transform;
}

.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text-sm { height: 11px; margin-bottom: 6px; }
.skeleton-text-lg { height: 20px; margin-bottom: 10px; }
.skeleton-w-30 { width: 30%; margin: 0; }
.skeleton-w-40 { width: 40%; }
.skeleton-w-55 { width: 55%; }
.skeleton-w-80 { width: 80%; }
.skeleton-badge { width: 80px; height: 30px; border-radius: 8px; }
.skeleton-card-row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.skeleton-circle { border-radius: 50%; }
.skeleton-rounded { border-radius: 12px; }

/* Skeleton product card */
.skeleton-card {
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    overflow: hidden;
}

.skeleton-card-visual {
    aspect-ratio: 4 / 3;
    background: var(--bg-tertiary);
    overflow: hidden;
    position: relative;
}
.skeleton-card-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--border) 50%, transparent 100%);
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    will-change: transform;
}

.skeleton-card-info {
    padding: 16px;
}

/* Skeleton stat card */
.skeleton-stat .stat-label,
.skeleton-stat .stat-value {
    background: var(--bg-tertiary);
    color: transparent;
    border-radius: 6px;
    user-select: none;
    overflow: hidden;
    position: relative;
}
.skeleton-stat .stat-label::after,
.skeleton-stat .stat-value::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--border) 50%, transparent 100%);
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    will-change: transform;
}

/* Skeleton product detail */
.skeleton-pp-image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 16px;
}

.skeleton-pp-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Hide skeleton containers when loaded */
.skeleton-wrap.loaded { display: none; }
.content-wrap { display: none; }
.content-wrap.loaded { display: block; }
.stats-grid.content-wrap.loaded { display: grid; }
.product-grid.content-wrap.loaded { display: grid; }
.pp-grid.content-wrap.loaded { display: grid; }

/* === Manual License Modal === */
.manual-license-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 24px; }
.manual-license-overlay.open { display: flex; }
.manual-license-modal { width: 100%; max-width: 520px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: 0 24px 80px rgba(0,0,0,0.3); animation: rvSlideUp 0.25s ease-out; }
.manual-license-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.manual-license-header h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.manual-license-body { padding: 16px 20px 20px; }
.ml-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ml-field { display: flex; flex-direction: column; gap: 4px; }
.ml-field--full { grid-column: 1 / -1; }
.ml-field label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.ml-field input { padding: 8px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); color: var(--text-primary); transition: var(--transition); }
.ml-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 255, 255,0.15); }
/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 32px 0 8px; flex-wrap: wrap; }
.pagination-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; transition: all 0.2s ease; cursor: pointer; }
.pagination-btn:hover { color: var(--text-primary); border-color: var(--accent); background: var(--bg-tertiary); }
.pagination-btn.active { color: var(--bg-primary); background: var(--accent); border-color: var(--accent); pointer-events: none; }
.pagination-dots { color: var(--text-muted); font-size: 14px; padding: 0 4px; }

/* ============================================
   Messages / Inbox System
   ============================================ */

/* Inbox Tabs */
.inbox-tabs { display: flex; gap: 4px; margin-bottom: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px; overflow-x: auto; }
.inbox-tab { display: flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-sm); transition: var(--transition); white-space: nowrap; }
.inbox-tab:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.inbox-tab.active { color: var(--text-primary); background: var(--bg-secondary); box-shadow: var(--shadow-sm); }
.inbox-tab-count { font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--bg-input); padding: 1px 6px; border-radius: 10px; }
.inbox-tab.active .inbox-tab-count { color: var(--accent); background: var(--accent-glow); }

/* Inbox List */
.inbox-list { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.inbox-search { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-muted); }
.inbox-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 14px; font-family: var(--font); }
.inbox-date-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 16px 4px 8px; }
.inbox-list > .inbox-date-group:first-child { padding-top: 2px; }
.inbox-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; text-decoration: none; background: var(--bg-card); transition: var(--transition); cursor: pointer; border-bottom: 1px solid var(--border); }
.inbox-item:last-child { border-bottom: none; }
.inbox-item:hover { background: var(--bg-card-hover); }
.inbox-item-unread { background: var(--accent-glow); }
.inbox-item-unread .inbox-item-subject { color: var(--text-primary); font-weight: 700; }
.inbox-item-icon { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-input); color: var(--text-muted); }
.inbox-item-unread .inbox-item-icon { background: var(--accent-glow); color: var(--accent); }
.inbox-item-content { flex: 1; min-width: 0; }
.inbox-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.inbox-item-sender { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: none; letter-spacing: 0.2px; }  /* B4: de-emphasize repetitive "System" tag */
.inbox-item-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.inbox-item-subject { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* B4: subject leads */
.inbox-item-preview { font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-unread-badge { flex-shrink: 0; min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; padding: 0 6px; background: var(--accent); color: var(--bg-primary); font-size: 11px; font-weight: 700; border-radius: 10px; }

/* Thread View */
.thread-top-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.thread-back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); text-decoration: none; transition: var(--transition); }
.thread-back-btn:hover { color: var(--accent); }
.thread-meta { display: flex; gap: 6px; }
.thread-header { margin-bottom: 20px; }
.thread-header h1 { font-size: 22px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; }
.thread-date { font-size: 13px; color: var(--text-muted); }

/* Type & Status Badges */
.inbox-type-badge { display: inline-flex; padding: 3px 10px; font-size: 11px; font-weight: 700; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.3px; }
.inbox-type-support { background: var(--accent-glow); color: var(--accent); }
.inbox-type-order { background: rgba(59, 130, 246, 0.1); color: #60a5fa; }
.inbox-type-system { background: var(--warning-bg); color: var(--warning); }
.inbox-status-badge { display: inline-flex; padding: 3px 10px; font-size: 11px; font-weight: 700; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.3px; }
.inbox-status-open { background: var(--success-bg); color: var(--success); }
.inbox-status-closed { background: var(--danger-bg); color: var(--danger); }

/* Order Context Card */
.thread-order-context { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 24px; }
.order-context-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.order-context-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.order-context-item:first-of-type { border-top: none; }
.order-context-img { width: 48px; height: 36px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.order-context-img-placeholder { width: 48px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--bg-input); border-radius: 6px; flex-shrink: 0; color: var(--text-muted); }
.order-context-details { flex: 1; min-width: 0; }
.order-context-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.order-context-info { font-size: 12px; color: var(--text-muted); margin-top: 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.order-context-info .status { font-size: 10px; padding: 1px 6px; }
.order-context-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-secondary); }
.order-context-link { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; }
.order-context-link:hover { text-decoration: underline; }

/* Message Bubbles */
.thread-messages { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.message-bubble { max-width: 85%; padding: 12px 16px; border-radius: var(--radius-md); position: relative; }
.message-bubble-user { align-self: flex-end; background: var(--accent-glow); border: 1px solid rgba(255, 255, 255, 0.2); }
.message-bubble-admin { align-self: flex-start; background: var(--bg-card); border: 1px solid var(--border); }
.message-bubble-system { align-self: center; background: var(--bg-input); border: 1px solid var(--border); text-align: center; max-width: 90%; font-size: 13px; color: var(--text-muted); }
.message-sender { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.message-bubble-user .message-sender { justify-content: flex-end; }
.message-time { font-size: 10px; font-weight: 500; color: var(--text-muted); opacity: 0.7; text-transform: none; letter-spacing: 0; }
.message-body { font-size: 14px; line-height: 1.6; color: var(--text-primary); word-break: break-word; }
.message-bubble-system .message-sender { justify-content: center; }
.message-body a { color: var(--accent); text-decoration: underline; font-weight: 500; }
.message-body a:hover { opacity: 0.8; text-decoration: none; }

/* Reply Form */
.thread-reply-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; }
.thread-closed-notice { text-align: center; padding: 16px; font-size: 13px; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; gap: 8px; }

/* Nav Messages Badge */
.nav-messages-badge { position: absolute; top: -2px; right: -6px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 4px; background: var(--accent); color: var(--bg-primary); font-size: 10px; font-weight: 700; border-radius: 8px; line-height: 1; pointer-events: none; }

/* Messages — Custom Select Dropdowns + Proof Upload */
.subject-select-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 101;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.subject-select-list.open { display: block; }
.subject-select-option,
.order-select-option {
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--border);
}
.subject-select-option:last-child,
.order-select-option:last-child { border-bottom: none; }
.subject-select-option:hover,
.order-select-option:hover { background: var(--bg-secondary); }
.subject-select-option.selected,
.order-select-option.selected { background: rgba(var(--accent-rgb, 139,92,246), 0.1); }

.order-select-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.order-select-list.open { display: block; }

.proof-drop-zone {
    border: 2px dashed var(--border);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.proof-drop-zone:hover,
.proof-drop-zone.dragover {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb, 139,92,246), 0.05);
}
.reply-proof-attach { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px dashed var(--border); border-radius: 8px; cursor: pointer; font-size: 12px; color: var(--text-muted); margin-top: 8px; transition: border-color 0.2s, background 0.2s; }
.reply-proof-attach:hover { border-color: var(--accent); background: rgba(var(--accent-rgb, 139,92,246), 0.04); }
.reply-proof-placeholder { display: flex; align-items: center; gap: 6px; }
.reply-proof-hint { opacity: 0.7; }
.reply-proof-preview { display: none; align-items: center; gap: 8px; width: 100%; }
.reply-proof-preview img { max-height: 48px; max-width: 80px; border-radius: 6px; border: 1px solid var(--border); object-fit: cover; }
.reply-proof-preview button { font-size: 11px; color: var(--danger); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0; min-height: 44px; }

/* ── Notification Center ────────────────────────────────── */
.notif-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.notif-bell {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notif-bell:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-color: var(--accent);
}
.notif-badge, .notif-badge-mobile {
    position: absolute;
    top: 2px;
    right: 0;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    pointer-events: none;
}
.notif-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 380px;
    max-height: 480px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    z-index: 1000;
    flex-direction: column;
    overflow: hidden;
}
.notif-dropdown.show {
    display: flex;
}
.notif-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.notif-dropdown-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.notif-mark-all {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}
.notif-mark-all:hover {
    background: var(--bg-secondary);
}
.notif-header-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}
.notif-delete-all {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}
.notif-delete-all:hover {
    background: var(--danger-bg);
}
.notif-list {
    overflow-y: auto;
    flex: 1;
    overscroll-behavior: contain;
}
.notif-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.notif-item:hover {
    background: var(--bg-secondary);
}
.notif-item.unread {
    background: rgba(255, 255, 255, 0.06);
}
.notif-item.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
}
.notif-item-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    color: var(--text-muted);
}
.notif-item-icon.type-order_status { color: #60a5fa; background: rgba(96,165,250,0.1); }
.notif-item-icon.type-message { color: #FFFFFF; background: rgba(255, 255, 255,0.1); }
.notif-item-icon.type-balance { color: #34d399; background: rgba(52,211,153,0.1); }
.notif-item-icon.type-withdrawal { color: #fbbf24; background: var(--warning-bg); }
.notif-item-icon.type-license { color: #60a5fa; background: rgba(96,165,250,0.1); }
.notif-item-icon.type-password { color: #f87171; background: rgba(248,113,113,0.1); }
.notif-item-icon.type-system { color: var(--text-muted); background: var(--bg-secondary); }
.notif-item-icon.type-sale { color: #f59e0b; background: rgba(245,158,11,0.1); }
.notif-item-content {
    flex: 1;
    min-width: 0;
}
.notif-item-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-item-body {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notif-item-time {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    white-space: nowrap;
    margin-top: 2px;
}
.notif-empty {
    padding: 40px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.notif-item-delete {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 70px;
    background: #ef4444;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    transform: translateX(100%);
    transition: transform 0.2s ease;
}
.notif-item.swiped .notif-item-delete {
    transform: translateX(0);
}
.notif-context-menu {
    position: fixed;
    z-index: 2000;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    padding: 4px 0;
    min-width: 140px;
    display: none;
}
.notif-context-menu.show { display: block; }
.notif-context-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}
.notif-context-menu button:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.notif-context-menu .ctx-delete { color: #ef4444; }

/* Admin Notification Inbox (Phase 4) */
.notif-inbox-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.notif-inbox-link {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
    white-space: nowrap;
    text-decoration: none;
    padding: 2px 4px;
}
.notif-inbox-link:hover { text-decoration: underline; }

/* Mobile notification dropdown — full-width overlay */
/* ============================================
   Settings — SaaS-Style Account Settings
   ============================================ */

/* Settings Shell */
.settings-shell {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 24px 48px;
    overflow: hidden;
}
.settings-header {
    margin-bottom: 28px;
}
.settings-header-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.settings-header-desc {
    font-size: .875rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Settings Layout: compact sidebar + content */
.settings-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Settings Nav (compact sidebar) */
.settings-nav {
    width: 200px;
    flex-shrink: 0;
    position: sticky;
    top: 96px;
}
.settings-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: .855rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.settings-nav-item:hover {
    color: var(--text-primary);
    background: var(--bg-card-hover);
}
.settings-nav-item.active {
    color: var(--accent);
    background: var(--accent-glow);
    font-weight: 600;
}
.settings-nav-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    flex-shrink: 0;
    opacity: .8;
}
.settings-nav-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.settings-nav-item.active .settings-nav-icon { opacity: 1; }
.settings-nav-item--danger { color: var(--danger); }
.settings-nav-item--danger:hover { color: var(--danger); background: var(--danger-bg); }
.settings-nav-item--danger.active { color: var(--danger); background: var(--danger-bg); }

/* Settings Content Column */
.settings-content {
    flex: 1;
    min-width: 0;
    max-width: 680px;
}

/* Section header within content */
.settings-section-header {
    margin-bottom: 20px;
}
.settings-section-title {
    font-size: 1.15rem;
    font-weight: 650;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.settings-section-desc {
    font-size: .825rem;
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.5;
}

/* Settings Card */
.settings-card {
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 16px;
}
.settings-card-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.settings-card-desc {
    font-size: .8rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.5;
}
.settings-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--border);
}
.settings-card + .settings-card { margin-top: 0; }

/* Reset form-group margin inside cards (grid gap handles spacing) */
.settings-card .form-group { margin-bottom: 16px; }
.settings-card .form-group:last-child { margin-bottom: 0; }

/* Constrain all SVGs inside settings to prevent blowout */
.settings-shell svg { max-width: 100%; }

/* Danger-variant card */
.settings-card--danger {
    border-color: rgba(239,68,68,.25);
    background: rgba(239,68,68,.03);
}
.settings-card--danger .settings-card-title { color: var(--danger); }

/* Settings Form Grid */
.settings-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.settings-form-grid .form-group { margin-bottom: 0; }
.settings-form-grid .form-group-full { grid-column: 1 / -1; }

/* Settings Avatar Section */
.settings-avatar-row {
    display: flex;
    align-items: center;
    gap: 20px;
}
.settings-avatar-preview {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid var(--border);
}
.settings-avatar-preview .avatar,
.settings-avatar-preview .profile-avatar-img,
.settings-avatar-preview img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.settings-avatar-preview .avatar {
    border: none;
}
.settings-avatar-preview .avatar svg,
.settings-avatar-preview svg {
    width: 100%;
    height: 100%;
    display: block;
}
.settings-avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.settings-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

/* Avatar Picker */
.settings-avatar-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.settings-avatar-option {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color .15s, transform .15s;
    padding: 3px;
    flex-shrink: 0;
}
.settings-avatar-option:hover { border-color: var(--accent); transform: scale(1.08); }
.settings-avatar-option.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 255, 255,.15); }
.settings-avatar-option input[type="radio"] { display: none; }
.settings-avatar-option .avatar { width: 38px; height: 38px; }
.settings-avatar-option svg {
    width: 38px;
    height: 38px;
    max-width: 38px;
    max-height: 38px;
    display: block;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Email verification inline */
.settings-email-row { display: flex; flex-direction: column; gap: 4px; }
.settings-email-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    font-weight: 600;
    margin-top: 3px;
}
.settings-email-badge--verified { color: #16a34a; }
.settings-email-badge--unverified { color: #d97706; }
.settings-resend-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
    text-decoration: underline;
}
.settings-resend-btn:hover { opacity: .8; }

/* Settings Table (Login History / Billing) */
.settings-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -24px;
    padding: 0 24px;
}
/* Scrollable table variant (Transaction History) */
.settings-table-scroll {
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.settings-table-scroll::-webkit-scrollbar { width: 5px; }
.settings-table-scroll::-webkit-scrollbar-track { background: transparent; }
.settings-table-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.settings-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.settings-table-scroll thead { position: sticky; top: 0; z-index: 1; }
.settings-table-scroll thead th { background: var(--bg-card); }
.settings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
}
.settings-table th {
    text-align: left;
    padding: 8px 12px;
    font-weight: 600;
    color: var(--text-muted);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.settings-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}
.settings-table tr:last-child td { border-bottom: none; }
.settings-table tr.current-session td {
    background: var(--accent-glow);
}
.settings-badge-current {
    display: inline-block;
    background: var(--accent);
    color: var(--bg-primary);
    font-size: .68rem;
    padding: 1px 8px;
    border-radius: 10px;
    margin-left: 6px;
    font-weight: 600;
    vertical-align: middle;
}
.settings-table code {
    font-size: .8rem;
    background: var(--bg-card-hover);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Billing summary cards */
.settings-billing-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.settings-billing-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
    text-align: center;
}
.settings-billing-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}
.settings-billing-stat-label {
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 500;
}

/* Transaction type badges */
.settings-tx-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 600;
}
.tx-topup { background: rgba(16,185,129,.12); color: #059669; }
.tx-purchase { background: rgba(255, 255, 255,.12); color: var(--accent); }
.tx-refund { background: rgba(245,158,11,.12); color: #d97706; }
.tx-withdrawal { background: rgba(239,68,68,.12); color: #dc2626; }
.tx-cashback { background: rgba(255, 255, 255,.12); color: #999999; }
.tx-admin { background: rgba(100,116,139,.1); color: var(--text-muted); }

/* 2FA Method Cards */
.tfa-method-card {
    border-radius: var(--radius-md);
    padding: 20px;
    transition: border-color .2s;
}
.tfa-method-card.tfa-method-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(255, 255, 255,.1);
}
.tfa-method-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.tfa-method-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tfa-method-info { flex: 1; min-width: 0; }
.tfa-method-info h3 {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
}
.tfa-method-info p {
    font-size: .82rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}
.tfa-badge {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .3px;
}
.tfa-badge-active { background: rgba(16,185,129,.12); color: #059669; }
.tfa-badge-standby { background: rgba(59,130,246,.1); color: #3b82f6; }
.tfa-badge-off { background: rgba(100,116,139,.1); color: var(--text-muted); }
.tfa-method-note {
    font-size: .8rem;
    color: var(--text-muted);
    margin: 10px 0 0;
    padding-left: 56px;
}
.tfa-method-body {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.tfa-recovery-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(245,158,11,.08);
    color: #d97706;
    font-size: .82rem;
    font-weight: 500;
}
.tfa-setup-steps {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.tfa-setup-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.tfa-step-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    margin-top: 2px;
}
.tfa-setup-step h4 {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
}
.tfa-setup-step p { margin: 0; }
.tfa-key-copy-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.tfa-key-code {
    user-select: all;
    word-break: break-all;
    font-size: .88rem;
    color: var(--accent);
    font-family: monospace;
    letter-spacing: .5px;
}
.tfa-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: .75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.tfa-copy-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.tfa-manage-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.tfa-manage-item h4 {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
}
.profile-2fa-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: .88rem;
}
.profile-2fa-enabled { background: rgba(16,185,129,.1); color: #059669; }
.profile-2fa-disabled { background: rgba(239,68,68,.08); color: #dc2626; }
.profile-2fa-codes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-width: 420px;
}
.profile-2fa-code {
    display: block;
    padding: 7px 10px;
    text-align: center;
    border-radius: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    font-family: monospace;
    font-size: .9rem;
    letter-spacing: 1px;
    user-select: all;
    color: var(--text-primary);
}

/* Notification Preferences */
.settings-notif-group {
    margin-bottom: 20px;
}
.settings-notif-group-title {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.settings-notif-list { display: flex; flex-direction: column; }
.settings-notif-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.settings-notif-item:last-child { border-bottom: none; }
.settings-notif-info { flex: 1; }
.settings-notif-label { font-weight: 500; color: var(--text-primary); font-size: .875rem; }
.settings-notif-desc { color: var(--text-secondary); font-size: .78rem; margin-top: 2px; }

/* Toggle Switch */
.settings-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 24px;
    /* OFF = clearly visible neutral track. Was var(--border) which is near-black
       in dark theme → toggle state was unreadable. */
    background: rgba(128, 128, 128, 0.45);
    border: 1px solid var(--border);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background .2s, border-color .2s;
    flex-shrink: 0;
    outline: none;
}
.settings-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
/* ON = green — unambiguous in BOTH themes (accent was near-white in dark,
   making the white knob disappear into the track). */
.settings-toggle:checked { background: var(--success); border-color: var(--success); }
.settings-toggle:checked::after { transform: translateX(20px); }
.settings-toggle:disabled { opacity: .5; cursor: not-allowed; }

/* Danger Zone */
.settings-danger-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    border: 1px solid rgba(239,68,68,.15);
    font-size: .82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 16px;
}
.settings-danger-warning svg { flex-shrink: 0; color: var(--danger); margin-top: 1px; }

/* btn-outline-danger */
.btn-outline-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--danger);
    background: var(--bg-secondary);
    border: 1px solid rgba(239,68,68,.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font);
}
.btn-outline-danger:hover {
    background: var(--danger-bg);
    border-color: var(--danger);
}

/* text helpers — defined in Utilities section above */

/* Mobile: Settings Navigation */
.settings-mobile-nav {
    display: none;
}
.settings-mobile-nav-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ========================================
   PROFESSIONAL TABLE & ORDER LIST SYSTEM
   ======================================== */

/* --- Filter Tab Bar --- */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.filter-bar::-webkit-scrollbar { height: 0; }
/* A7: fade the right edge to signal more tabs — only on tab-only bars (never fades a search input) */
.filter-bar:not(:has(.filter-bar-search)) {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent 100%);
}
.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border: 1px solid transparent;
    border-radius: 100px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    font-family: var(--font);
}
.filter-tab:hover {
    color: var(--text-primary);
    border-color: var(--border);
    background: var(--bg-tertiary);
}
.filter-tab.active {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-color: var(--accent);
}
.filter-tab-count {
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background: var(--bg-input);
    color: var(--text-muted);
    padding: 0 5px;
}
.filter-tab--warning { color: var(--warning); }
.filter-tab.active .filter-tab-count {
    background: rgba(255, 255, 255,0.2);
    color: var(--accent);
}
.filter-bar-search {
    margin-left: auto;
    position: relative;
    flex-shrink: 0;
}
.filter-bar-search svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-muted);
}
.filter-bar-search input {
    padding: 6px 12px 6px 32px;
    font-size: 13px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--text-primary);
    width: 180px;
    transition: var(--transition);
    font-family: var(--font);
    height: 34px;
}
.filter-bar-search input:focus {
    outline: none;
    border-color: var(--accent);
    width: 220px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255,0.1);
}
.filter-bar-search input::placeholder { color: var(--text-muted); }

/* --- Enhanced Table --- */
.tbl-clean th {
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: transparent;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.tbl-clean td {
    padding: 14px 16px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    vertical-align: middle;
}
.tbl-clean tr:last-child td { border-bottom: none; }
.tbl-clean tr:hover td { background: var(--bg-card-hover); }
.tbl-clean .td-primary {
    color: var(--text-primary);
    font-weight: 600;
}
.tbl-clean .td-mono {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    color: var(--text-muted);
}
.tbl-clean .td-truncate {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Compact density modifier (replaces legacy .um-mini-table) */
.tbl-clean--sm th { padding: 6px 8px; font-size: 11px; font-weight: 600; letter-spacing: normal; }
.tbl-clean--sm td { padding: 6px 8px; font-size: 12px; }
.tbl-cell-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tbl-cell-main {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.tbl-cell-sub {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}
.tbl-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* --- User Order List (card-based) --- */
.order-list-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.order-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}
.order-list-header h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}
.order-list {
    display: flex;
    flex-direction: column;
}
/* compact 2-line order card (My Orders) */
.order-card { display: flex; flex-direction: column; gap: 5px; padding: 11px 16px; border-bottom: 1px solid var(--border); transition: background 0.15s; }
.order-card:last-child { border-bottom: none; }
.order-card:hover { background: var(--bg-card-hover); }
.order-card-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.order-num { font-size: 14px; font-weight: 700; color: var(--text-primary); flex-shrink: 0; }
.order-card-top .status { flex-shrink: 0; }
.order-card-amount { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 6px; }
.order-cashback-inline { font-size: 11px; color: var(--success); font-weight: 600; }
.order-card-bot { display: flex; align-items: center; gap: 10px; min-width: 0; }
.order-card-summary { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-card-q { color: var(--text-muted); }
.order-card-meta { color: var(--text-muted); font-size: 12px; }
.order-card-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.order-act-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; text-decoration: none; flex-shrink: 0; }
.order-act-ic svg { width: 16px; height: 16px; }
.order-act-ic:hover { background: var(--bg-tertiary); border-color: var(--accent); color: var(--text-primary); }
/* D8: shared base for .order-view-btn + .order-msg-btn */
.order-view-btn,
.order-msg-btn {
    display: inline-flex;
    align-items: center;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.2s ease;
    text-decoration: none;
}
.order-view-btn:hover,
.order-msg-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent);
    color: var(--text-primary);
}
.order-view-btn {
    gap: 6px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.order-view-btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-primary);
}
.order-view-btn.primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--bg-primary);
}
.order-msg-btn {
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* Cancel reason badge */
.order-cancel-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Empty state for no results — inline list filter result (orders + licenses) */
.order-list-empty,
.license-list-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* --- Admin Order Table Improvements --- */
.admin-order-user {
    display: flex;
    align-items: center;
    gap: 8px;
}
.admin-order-user-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.admin-order-username {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.admin-order-email {
    font-size: 11px;
    color: var(--text-muted);
}

/* ========================================
   LICENSE LIST SYSTEM (User Dashboard)
   ======================================== */

.license-list-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.license-list {
    display: flex;
    flex-direction: column;
}
.license-item {
    border-bottom: 1px solid var(--border);
}
.license-item:last-child { border-bottom: none; }
/* compact license card (My Licenses): head row (type icon + name + date) + inline credential row */
.license-item:hover { background: var(--bg-card-hover); }
.license-head { display: flex; align-items: center; gap: 9px; padding: 11px 16px 0; min-width: 0; }
.license-type-ic { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; background: var(--bg-tertiary); color: var(--text-muted); }
.license-type-ic svg { width: 15px; height: 15px; }
.license-type-ic--account { color: var(--success); }
.license-type-ic--key { color: var(--accent); }
.license-product-name { font-size: 14px; font-weight: 600; color: var(--text-primary); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.license-date { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.license-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.gr-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 12px; font-weight: 500; color: var(--text-secondary); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; font-family: var(--font); transition: var(--transition); flex-shrink: 0; }
.gr-pill svg { width: 13px; height: 13px; flex-shrink: 0; }
.gr-pill:hover { color: var(--accent); border-color: rgba(255,255,255,0.3); background: var(--accent-glow); }
/* license filter bar: let it wrap so "Reveal all" stays visible on mobile (was clipped by overflow-x scroll) */
.license-list-wrap .filter-bar { flex-wrap: wrap; overflow-x: visible; }
.license-list-wrap .filter-bar-search { flex: 1 1 140px; min-width: 0; }
.license-list-wrap .hl-credlist-revealall { margin-left: auto; flex-shrink: 0; }
.license-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    font-family: var(--font);
}
.license-toggle-btn:hover {
    background: var(--accent-glow);
    border-color: rgba(255, 255, 255,0.3);
    color: var(--accent);
}
.license-toggle-btn.active {
    background: var(--accent-glow);
    border-color: rgba(255, 255, 255,0.3);
    color: var(--accent);
}
.license-guide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
    font-family: var(--font);
}
.license-guide-btn:hover {
    color: var(--accent);
    border-color: rgba(255, 255, 255,0.3);
    background: var(--accent-glow);
}

/* Key-type inline display */
.license-key-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    color: var(--text-primary);
    max-width: 100%;
    overflow: hidden;
}
.license-key-inline code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.license-key-inline .copy-btn,
.cred-value .copy-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    display: inline-flex;
    transition: color 0.15s;
}
.license-key-inline .copy-btn:hover,
.cred-value .copy-btn:hover { color: var(--accent); }

/* Expandable credential panel */
.license-expand {
    display: none;
    background: var(--bg-secondary);
}
.license-expand.open { display: block; }
.license-expand-inner {
    padding: 16px 24px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

/* Credential field: label above, value box below */
.cred-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cred-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cred-value {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Fira Code', monospace;
    min-height: 38px;
}
.cred-value span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Instructions panel */
.license-instructions {
    display: none;
    background: var(--bg-secondary);
}
.license-instructions.open { display: block; }
.license-instructions-inner {
    padding: 16px 24px 20px;
}
.license-instructions-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.license-instructions-body {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* Empty filter result — shared with .order-list-empty above */

/* ========================================
   ADMIN LICENSE TABLE ENHANCEMENTS
   ======================================== */
.admin-license-cred {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 280px;
}
.admin-license-cred-line {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.admin-license-cred-label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}
.admin-license-cred-val {
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.status-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
}
.status-dot::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot.dot-active::before { background: var(--success); }
.status-dot.dot-active { color: var(--success); }
.status-dot.dot-revoked::before { background: var(--danger); }
.status-dot.dot-revoked { color: var(--danger); }
.status-dot.dot-in_progress::before { background: #d97706; }
.status-dot.dot-in_progress { color: #d97706; }

/* === Product Modal === */
.pm-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 24px; }
.pm-overlay.open { display: flex; }
.pm-dialog { width: 100%; max-width: 820px; max-height: 90vh; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-xl); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.3); animation: pmSlideUp 0.2s ease-out; }
@keyframes pmSlideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.pm-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.pm-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.pm-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); flex-shrink: 0; padding: 0 24px; overflow-x: auto; }
.pm-tab { padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color 0.15s, border-color 0.15s; font-family: var(--font); }
.pm-tab:hover { color: var(--text-primary); }
.pm-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.pm-body { flex: 1; overflow-y: auto; padding: 20px 24px; min-height: 0; }
.pm-pane { display: none; }
.pm-pane.active { display: block; }
.pm-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border); flex-shrink: 0; }
.pm-tab-badge { display: inline-block; background: var(--accent); color: var(--accent-contrast); font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 10px; margin-left: 5px; vertical-align: middle; }
@keyframes pm-spin { to { transform: rotate(360deg); } }
.pm-notify-spinner { animation: pm-spin 0.9s linear infinite; display: inline-block; }

/* ─── Product gallery manager (admin/products.php edit modal) ────────────── */
.pm-gallery-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pm-gallery-hint { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; max-width: 46ch; }
.pm-gallery-lang { width: auto; min-width: 72px; padding: 6px 10px; flex-shrink: 0; }
.pm-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.pm-gallery-empty { font-size: 13px; color: var(--text-muted); padding: 28px; text-align: center; border: 2px dashed var(--border); border-radius: 10px; }
.pm-gimg { position: relative; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-secondary); display: flex; flex-direction: column; }
.pm-gimg.is-main { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pm-gimg-thumb { aspect-ratio: 1 / 1; background: var(--bg-tertiary, var(--bg-secondary)); }
.pm-gimg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-gimg-badge { position: absolute; top: 6px; left: 6px; background: var(--accent); color: var(--accent-contrast); font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 6px; letter-spacing: .02em; }
.pm-gimg-actions { display: flex; gap: 6px; padding: 8px; flex-wrap: wrap; }
.pm-gimg-actions .btn { flex: 1; min-width: 0; justify-content: center; padding: 6px 8px; font-size: 11px; }
.pm-gallery-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pm-gallery-add { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pm-gallery-status { font-size: 12px; color: var(--text-muted); }
.pm-gallery-status.is-error { color: var(--danger, #dc2626); }
@media (max-width: 480px) {
    .pm-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
}

/* ─── BIMI Email Brand Identity panel (admin/branding.php) ───────────────── */
.bimi-checks-grid { display: flex; flex-direction: column; gap: 8px; }
.bimi-check-row {
    display: grid;
    grid-template-columns: 18px 180px 1fr;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
}
.bimi-check-ok   { border-color: rgba(74, 222, 128, 0.25); background: rgba(74, 222, 128, 0.05); }
.bimi-check-fail { border-color: rgba(248, 113, 113, 0.25); background: rgba(248, 113, 113, 0.05); }
.bimi-check-na   { opacity: 0.6; }
.bimi-check-dot  { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; margin-top: 2px; }
.bimi-dot-ok     { background: var(--success); }
.bimi-dot-fail   { background: var(--danger); }
.bimi-dot-muted  { background: var(--text-muted); }
.bimi-check-label { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.bimi-check-note  { color: var(--text-secondary); font-size: 12px; word-break: break-all; }
.bimi-dns-record  {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.bimi-dns-row {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.bimi-dns-row:last-child { border-bottom: none; }
.bimi-dns-label  { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: .06em; white-space: nowrap; }
.bimi-dns-val    { font-family: monospace; font-size: 12px; color: var(--text-primary); word-break: break-all; background: transparent; }
.bimi-copy-btn   { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 6px; padding: 3px 7px; font-size: 12px; cursor: pointer; flex-shrink: 0; transition: color .15s, border-color .15s; }
.bimi-copy-btn:hover { color: var(--text-primary); border-color: var(--accent); }
.bimi-file-preview { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) {
    .bimi-check-row { grid-template-columns: 18px 1fr; }
    .bimi-check-label { grid-column: 2; }
    .bimi-check-note  { grid-column: 1 / -1; padding-left: 26px; }
    .bimi-dns-row { grid-template-columns: 56px 1fr; }
    .bimi-copy-btn { grid-column: 1 / -1; justify-self: start; margin-left: 68px; }
}

/* === Admin User Management Modal (.um-*) — moved from admin/users.php embedded <style> on 2026-04-26 (Phase 4.1).
 * Modal-shell rules (.um-overlay, .um-modal, .um-header, .um-tabs, .um-tab, .um-body, .um-close, .um-loading)
 * are kept as legacy backup alongside the new .hl-modal-* classes (dual-class). They will be deleted in Phase 5
 * after the migrated modal is verified on production. */
.um-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9999; align-items: center; justify-content: center; backdrop-filter: blur(4px); padding: 20px; }
.um-modal { background: var(--card-bg, #1a1a2e); border: 1px solid var(--border, #2d2d3d); border-radius: 16px; width: 100%; max-width: 720px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 24px 48px rgba(0,0,0,.4); }
.um-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border, #2d2d3d); flex-shrink: 0; }
.um-header-info { display: flex; align-items: center; gap: 14px; }
.um-header-info img, .um-header-info svg { width: 44px; height: 44px; border-radius: 50%; }
.um-close { background: none; border: none; color: var(--text-muted); font-size: 24px; cursor: pointer; padding: 4px 8px; border-radius: 6px; line-height: 1; }
.um-close:hover { background: var(--border, #2d2d3d); color: var(--text-primary); }
.um-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border, #2d2d3d); padding: 0 24px; overflow-x: auto; flex-shrink: 0; }
.um-tab { background: none; border: none; color: var(--text-secondary); font-size: 13px; font-weight: 600; padding: 12px 16px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.um-tab:hover { color: var(--text-primary); }
.um-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.um-body { padding: 24px; overflow-y: auto; flex: 1; min-height: 0; }
.um-loading { text-align: center; color: var(--text-muted); padding: 40px 0; }
.um-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.um-stat { background: var(--bg-secondary, #12121e); border: 1px solid var(--border, #2d2d3d); border-radius: 10px; padding: 14px; text-align: center; }
.um-stat-val { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.um-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.um-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.um-info-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border, #2d2d3d); font-size: 13px; }
.um-info-label { color: var(--text-muted); }
.um-info-val { color: var(--text-primary); font-weight: 500; text-align: right; }
.um-section { margin-bottom: 24px; }
.um-section-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); }
.um-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.um-form-grid .form-group { margin-bottom: 0; }
.um-form-full { grid-column: 1 / -1; }
.um-bal-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.um-bal-card { border-radius: 10px; padding: 16px; }
.um-bal-card h4 { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.um-danger-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--border, #2d2d3d); border-radius: 10px; margin-bottom: 10px; }
.um-danger-item.warn { border-color: #f59e0b33; }
.um-danger-item.crit { border-color: #ef444433; }
.um-danger-lbl { font-size: 13px; }
.um-danger-lbl strong { display: block; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.um-danger-lbl span { color: var(--text-muted); font-size: 12px; }
.um-2fa-on { color: #10b981; font-weight: 600; }
.um-2fa-off { color: var(--text-muted); }

/* Product Table — Fixed rows & truncated names */
.tbl-products tbody tr { height: 56px; }
.pm-name-cell { display: block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); font-weight: 600; font-size: 13px; }
.pm-delivery-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: 20px; white-space: nowrap; line-height: 1.4; }
.pm-dt-key { background: var(--success-bg); color: var(--success); }
.pm-dt-account { background: rgba(59,130,246,0.1); color: #3b82f6; }
.pm-dt-invitation { background: rgba(255, 255, 255,0.1); color: var(--accent); }

/* ── Email Templates Admin ── */
.et-var-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.et-var-chip:hover {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.08);
}
.et-var-required {
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--accent);
}
.et-var-optional {
    border-color: rgba(217, 119, 6, 0.3);
    color: #d97706;
}
.et-var-global {
    border-color: rgba(75, 85, 99, 0.4);
    color: var(--text-secondary);
    font-size: 11px;
}
.et-status-badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
}
.et-status-badge:hover { opacity: 0.8; }
.et-active {
    background: rgba(22, 163, 74, 0.15);
    color: #16a34a;
}
.et-inactive {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

/* ── Email Verification Banner ───────────────────────────────────────────── */
.verify-banner {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.06));
    border-bottom: 1px solid rgba(251, 191, 36, 0.25);
    position: sticky;
    top: 64px;
    z-index: 999;
}
.verify-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}
.verify-banner-inner svg { color: #fbbf24; flex-shrink: 0; }
.verify-banner-link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    margin-left: auto;
}
.verify-banner-link:hover { text-decoration: underline; }
.verify-banner-dismiss {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}
.verify-banner-dismiss:hover { color: var(--text-primary); }

/* ================================================================ */
/* Multilingual Phase 1 — Language Switcher + Geo/Lang Suggest Banner */
/* Mobile-first. Uses existing .nav-dropdown for popup behaviour.     */
/* ================================================================ */

/* Shared flag emoji */
.lang-flag {
    font-size: 16px;
    line-height: 1;
    display: inline-block;
    flex-shrink: 0;
}

/* Desktop nav switcher button */
.lang-switcher { position: relative; }
.lang-switcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    min-height: 36px;
    box-sizing: border-box;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.lang-switcher-btn:hover { background: var(--bg-tertiary); border-color: var(--accent); }
.lang-switcher-btn .lang-code { letter-spacing: 0.03em; }

/* Dropdown list — re-uses .nav-dropdown for visibility toggle */
.lang-dropdown { min-width: 210px; }
.lang-dropdown .lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-primary);
    font-size: 13px;
    transition: var(--transition);
}
.lang-dropdown .lang-option:hover { background: var(--bg-tertiary); }
.lang-dropdown .lang-option.is-active {
    background: var(--bg-tertiary);
    color: var(--accent);
    font-weight: 600;
}
.lang-dropdown .lang-option .lang-native { flex: 1; }
.lang-dropdown .lang-option .lang-name {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Currency switcher — reuses .lang-switcher / .nav-dropdown popup mechanics */
.currency-dropdown { min-width: 244px; max-height: 340px; overflow-y: auto; }
.currency-option,
.mobile-currency-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
}
.currency-option:hover,
.mobile-currency-option:hover { background: var(--bg-tertiary); }
.currency-option.is-active,
.mobile-currency-option.is-active { background: var(--bg-tertiary); color: var(--accent); font-weight: 600; }
.currency-option .currency-opt-sym,
.mobile-currency-option .currency-opt-sym { min-width: 34px; font-weight: 700; color: var(--text-secondary); }
.currency-option.is-active .currency-opt-sym,
.mobile-currency-option.is-active .currency-opt-sym { color: var(--accent); }
.currency-option .currency-opt-name { flex: 1; }
.mobile-currency-option { padding: 10px 12px; min-height: 44px; }

/* ════ Header redesign — zones · clusters · balance · grouped account · region popover · mobile groups ════ */
.nav-primary { display: flex; align-items: center; gap: 4px; margin-left: 32px; margin-right: auto; }
.nav-right { display: flex; align-items: center; gap: 6px; }
.nav-cluster { display: flex; align-items: center; gap: 4px; }
.nav-cluster-muted { gap: 2px; }
.nav-divider { width: 1px; height: 26px; background: var(--border); margin: 0 6px; flex-shrink: 0; }
.nav-cluster-muted .region-btn,
.nav-cluster-muted .theme-toggle { color: var(--text-muted); }
.nav-cluster-muted .region-btn:hover,
.nav-cluster-muted .theme-toggle:hover { color: var(--text-secondary); }
/* Balance pill (primary cluster) */
.nav-balance { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-sm); color: var(--success); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; transition: var(--transition); }
.nav-balance:hover { background: var(--bg-card-hover); }
.nav-balance svg { opacity: 0.7; }
.region-btn .region-btn-label { font-weight: 600; font-size: 13px; }
/* Account dropdown — grouped */
.dropdown-account-head { display: flex; align-items: center; gap: 12px; padding: 12px; }
.dropdown-account-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dropdown-account-name { font-weight: 700; font-size: 14px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-account-head .dropdown-balance { padding: 0; text-align: left; font-size: 14px; }
.dropdown-group-label { padding: 8px 14px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.dropdown-item-wallet { color: var(--accent); font-weight: 600; }
.dropdown-item-badge { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--accent); color: var(--accent-contrast); border-radius: 9px; font-size: 11px; font-weight: 700; }
/* Region popover — language + currency in one */
.nav-dropdown.region-dropdown { min-width: 264px; max-width: 300px; padding: 6px; }
.region-section { padding: 2px 0; }
.region-section-label { padding: 6px 10px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.region-dropdown .region-row { position: relative; }
.region-dropdown .region-row .region-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.region-dropdown .region-row .region-check { opacity: 0; flex-shrink: 0; width: 16px; height: 16px; color: var(--accent); }
.region-dropdown .region-row.is-active .region-check { opacity: 1; }
.region-cur-search { width: 100%; margin: 4px 0 6px; padding: 8px 10px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 13px; }
.region-cur-search:focus { outline: none; border-color: var(--accent); }
.region-cur-list { max-height: 232px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.region-cur-list .region-row.is-hidden { display: none; }
.region-cur-empty { padding: 12px 10px; font-size: 12px; color: var(--text-muted); text-align: center; }
/* Mobile drawer — grouped */
.mobile-group-label { padding: 14px 16px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.mobile-identity { display: flex; align-items: center; gap: 12px; padding: 6px 8px 12px; }
.mobile-identity-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mobile-identity-name { font-weight: 700; font-size: 15px; color: var(--text-primary); }
.mobile-identity-balance { font-weight: 700; font-size: 14px; color: var(--success); font-variant-numeric: tabular-nums; }
.mobile-link-wallet { color: var(--accent); font-weight: 600; }
.mobile-link.mobile-theme-row { width: 100%; height: auto; justify-content: flex-start; border: none; background: none; margin: 0; cursor: pointer; font-size: 15px; }
.mobile-theme-row .mobile-theme-label { flex: 1; text-align: left; }
.mobile-cta-group { display: flex; flex-direction: column; gap: 8px; padding: 10px 4px 4px; }
.mobile-cta-group .btn { width: 100%; justify-content: center; }
.cart-tax-note { margin-top: 8px; font-size: 12px; color: var(--text-secondary); text-align: right; }
.pp-tax-note { margin-top: 6px; font-size: 12px; color: var(--text-secondary); }
.checkout-charge-note { margin-top: 4px; font-size: 12px; color: var(--text-secondary); text-align: right; }
.pap-cur-preview { display: flex; flex-wrap: wrap; gap: 6px; }
.pap-cur-chip { font-size: 12px; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); }
.pap-cur-chip b { color: var(--text-secondary); font-weight: 600; margin-right: 4px; }
.pap-cur-hint { font-size: 12px; color: var(--text-secondary); }

/* Mobile menu language grid */
.mobile-lang-heading {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    padding: 12px 16px 6px;
    font-weight: 600;
}
.mobile-lang-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 0 12px 16px;
}
.mobile-lang-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    min-height: 44px; /* touch target */
    transition: var(--transition);
}
.mobile-lang-option:hover,
.mobile-lang-option:focus-visible {
    border-color: var(--accent);
    background: var(--bg-tertiary);
}
.mobile-lang-option.is-active {
    border-color: var(--accent);
    background: var(--bg-tertiary);
    color: var(--accent);
    font-weight: 600;
}

/* Compact language DROPDOWN for the mobile menu (replaces the flag grid that
   took a lot of vertical space). Collapsed = one row; tap to expand the list. */
.mobile-lang-dd {
    margin: 4px 12px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    overflow: hidden;
}
.mobile-lang-dd-summary {
    display: block; /* iOS Safari paints no children when <summary> is display:flex — keep it block, flex the inner row */
    cursor: pointer;
    list-style: none;
}
.mobile-lang-dd-summary::-webkit-details-marker { display: none; }
.mobile-lang-dd-summary::marker { content: ""; }
.mobile-lang-dd-summary-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    min-height: 44px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    box-sizing: border-box;
}
.mobile-lang-dd-current { flex: 1; min-width: 0; }
.mobile-lang-dd-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform 0.2s ease; }
.mobile-lang-dd[open] .mobile-lang-dd-chevron { transform: rotate(180deg); }
.mobile-lang-dd-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.mobile-lang-dd .mobile-lang-option {
    border: 0;
    border-radius: 0;
    background: none;
    border-bottom: 1px solid var(--border);
}
.mobile-lang-dd .mobile-lang-option:last-child { border-bottom: 0; }
.mobile-lang-dd .mobile-lang-option.is-active { background: var(--bg-tertiary); }
.mobile-lang-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Footer language bar */
.footer-lang-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 16px 0 8px;
    border-top: 1px solid var(--border);
    margin-top: 16px;
}
.footer-lang-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}
.footer-lang-option:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}
.footer-lang-option.is-active {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

/* Geo/browser language suggestion banner — mirrors .verify-banner pattern */
.lang-suggest-banner {
    position: sticky;
    /* Sit BELOW the fixed 64px navbar (mirrors .verify-banner). Was top:0/z-index:99
       which rendered the banner hidden underneath the navbar (z-index:1000). */
    top: 64px;
    z-index: 999;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(14, 165, 233, 0.14));
    border-bottom: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--text-primary);
    font-size: 13px;
}
.lang-suggest-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    flex-wrap: wrap;
}
.lang-suggest-text { flex: 1; min-width: 0; }
.lang-suggest-link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    padding: 4px 12px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.lang-suggest-link:hover,
.lang-suggest-link:focus-visible { background: var(--accent); color: var(--accent-contrast); }
.lang-suggest-dismiss {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}
.lang-suggest-dismiss:hover,
.lang-suggest-dismiss:focus-visible { color: var(--text-primary); }

/* Profile email verification status (legacy compat) */
.profile-email-verified { display: inline-flex; align-items: center; gap: 4px; color: #16a34a; font-size: 12px; font-weight: 600; margin-top: 4px; }
.profile-email-unverified { display: inline-flex; align-items: center; gap: 4px; color: #d97706; font-size: 12px; font-weight: 500; margin-top: 4px; }

/* ================================================================ */
/* CONTENT SYSTEM — Admin Overview & Settings                       */
/* ================================================================ */

.content-header-actions { display: flex; gap: 8px; align-items: center; }

/* Status Cards */
.content-status-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.content-stat-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; text-align: center; text-decoration: none; transition: border-color 0.2s; }
.content-stat-card:hover { border-color: var(--accent); }
.content-stat-count { font-size: 32px; font-weight: 800; color: var(--text-primary); line-height: 1; margin-bottom: 4px; }
.content-stat-label { font-size: 13px; color: var(--text-secondary); font-weight: 500; }

/* Quick Stats */
.content-quick-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.content-quick-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; display: flex; align-items: center; gap: 8px; }
.content-quick-stat-value { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.content-quick-stat-label { font-size: 12px; color: var(--text-secondary); }

/* Sections */
.content-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.content-section-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0 0 12px 0; }

/* Health Warnings */
.content-health-list { display: flex; flex-direction: column; gap: 6px; }
.content-health-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--text-primary); transition: background-color 0.15s; }
.content-health-item:hover { background: var(--bg-secondary, rgba(0,0,0,0.03)); }
.content-health-text { flex: 1; font-size: 14px; }
.content-health-count { font-size: 13px; font-weight: 700; color: var(--warning); background: rgba(255,165,0,0.1); padding: 2px 10px; border-radius: 10px; }

/* Content Panels */
.content-panels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }

/* Content Lists */
.content-list { display: flex; flex-direction: column; gap: 2px; }
.content-list-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; text-decoration: none; color: var(--text-primary); border-bottom: 1px solid var(--border); font-size: 14px; }
.content-list-item:last-child { border-bottom: none; }
.content-list-item:hover .content-list-title { color: var(--accent); }
.content-list-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; }
.content-list-meta { font-size: 12px; color: var(--text-secondary); white-space: nowrap; margin-left: 12px; }

/* Type Badges */
.content-type-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; padding: 1px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }
.content-type-article { background: rgba(59,130,246,0.12); color: var(--accent); }
.content-type-guide { background: rgba(16,185,129,0.12); color: var(--success); }

/* Footer Stats */
.content-footer-stats { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 24px; }
.content-footer-stat a { font-size: 13px; color: var(--text-secondary); text-decoration: none; }
.content-footer-stat a:hover { color: var(--accent); }

/* Author Cards (Settings) */
.content-author-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 8px; }
.content-author-current { border-color: var(--accent); }
.content-author-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.content-author-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.content-author-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.content-author-avatar-placeholder { width: 100%; height: 100%; background: var(--accent); color: var(--accent-contrast); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }

/* Content Admin — Phase 1C: CRUD Pages */
/* Filter Bar */
.content-filter-bar { margin-bottom: 16px; }
.content-filters-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.content-filter-select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--text-primary); font-size: 13px; min-width: 120px; }
.content-filter-search { flex: 1; min-width: 180px; }
.content-filter-search input { width: 100%; }

/* Bulk Actions Bar */
.content-bulk-bar { background: var(--accent); color: var(--accent-contrast); padding: 10px 16px; border-radius: 8px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; }
.content-bulk-bar .btn { color: #fff; border-color: rgba(255,255,255,0.3); }
.content-bulk-bar .btn:hover { background: rgba(255,255,255,0.15); }

/* Editor Layout (content-posts create/edit) */
.content-editor-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.content-editor-main { display: flex; flex-direction: column; gap: 16px; }
.content-editor-sidebar { display: flex; flex-direction: column; gap: 16px; }

/* Sidebar Boxes */
.content-sidebar-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.content-sidebar-box h3 { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0 0 12px 0; }

/* Title Input */
.content-title-input { width: 100%; font-size: 20px; font-weight: 700; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); }
.content-title-input:focus { border-color: var(--accent); outline: none; }

/* Body Textarea */
.content-body-textarea { width: 100%; min-height: 400px; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 14px; line-height: 1.6; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); resize: vertical; tab-size: 4; }
.content-body-textarea:focus { border-color: var(--accent); outline: none; }

/* SEO Panel */
.content-seo-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.content-seo-toggle { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--text-primary); cursor: pointer; border: none; background: none; width: 100%; text-align: left; }
.content-seo-toggle:hover { background: var(--bg-secondary); }
.content-seo-toggle svg { transition: transform 0.2s; }
.content-seo-body { padding: 0 16px 16px; }

/* Detailed SEO panel — content-posts editor */
.seo-help-text { font-size: 12px; color: var(--text-muted); margin: 0 0 12px; line-height: 1.5; }
.seo-label-hint { color: var(--text-muted); font-weight: 400; font-size: 12px; }
.seo-meter { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 11px; color: var(--text-muted); }
.seo-meter-bar { flex: 1; height: 4px; background: var(--bg-secondary); border-radius: 2px; overflow: hidden; }
.seo-meter-fill { display: block; height: 100%; width: 0%; background: var(--text-muted); transition: width 0.2s, background 0.2s; }
.seo-preview-card { margin: 16px 0; padding: 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; }
.seo-preview-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 10px; }
.seo-preview-google { font-family: arial, sans-serif; }
.seo-google-site { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.seo-google-title { font-size: 18px; line-height: 1.3; color: #1a0dab; word-break: break-word; }
[data-theme="dark"] .seo-google-title { color: #8ab4f8; }
.seo-google-desc { font-size: 13px; line-height: 1.5; color: #4d5156; margin-top: 4px; word-break: break-word; }
[data-theme="dark"] .seo-google-desc { color: #bdc1c6; }
.seo-og-preview { margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; max-width: 320px; background: var(--bg-secondary); }
.seo-og-preview img { display: block; width: 100%; height: auto; max-height: 200px; object-fit: cover; }
.seo-checkbox-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: 10px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; }
.seo-checkbox-label input { margin-top: 2px; }
.seo-checkbox-help { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); font-weight: 400; line-height: 1.4; }

/* Audit Log */
.content-audit-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.content-audit-entry { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.content-audit-entry:last-child { border-bottom: none; }
.content-audit-time { color: var(--text-muted); white-space: nowrap; min-width: 110px; }
.content-audit-text { color: var(--text-secondary); }

/* Publish Actions */
.content-publish-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Tag Input / Chips */
.content-tag-input-wrap { position: relative; }
.content-tag-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 50; max-height: 200px; overflow-y: auto; display: none; }
.content-chip-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.content-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-tertiary, rgba(0,0,0,0.05)); border: 1px solid var(--border); border-radius: 16px; padding: 3px 10px; font-size: 13px; color: var(--text-primary); }
.content-chip button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.content-chip button:hover { color: var(--danger); }

/* Search Dropdown (products/related) */
.content-search-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 50; max-height: 200px; overflow-y: auto; display: none; }
.content-dd-item { padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--text-primary); border-bottom: 1px solid var(--border); }
.content-dd-item:last-child { border-bottom: none; }
.content-dd-item:hover { background: var(--bg-secondary); }
.content-dd-create { padding: 8px 12px; cursor: pointer; font-size: 13px; color: var(--accent); font-weight: 600; }
.content-dd-create:hover { background: var(--bg-secondary); }

/* Pagination */
.content-pagination { display: flex; gap: 4px; align-items: center; justify-content: center; margin-top: 20px; }
.content-pagination a, .content-pagination span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--text-secondary); border: 1px solid var(--border); }
.content-pagination a:hover { background: var(--bg-secondary); }
.content-pagination .active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

/* Inline Form (tags/categories add form) */
.content-inline-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 16px; }

/* Status Badges */
.content-status-badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 2px 8px; border-radius: 4px; }
.status-draft { background: rgba(148,163,184,0.15); color: var(--text-secondary); }
.status-published { background: rgba(16,185,129,0.12); color: var(--success); }
.status-scheduled { background: rgba(59,130,246,0.12); color: var(--accent); }
.status-archived { background: rgba(255,165,0,0.12); color: var(--warning); }

/* Media Library */
.content-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.content-media-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; position: relative; transition: border-color 0.15s; }
.content-media-card:hover { border-color: var(--accent); }
.content-media-card-check { position: absolute; top: 8px; left: 8px; z-index: 2; }
.content-media-card-img { aspect-ratio: 1; overflow: hidden; cursor: pointer; background: var(--bg-tertiary); }
.content-media-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.content-media-card:hover .content-media-card-img img { transform: scale(1.04); }
.content-media-card-info { padding: 10px 12px; }
.content-media-card-name { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-media-card-meta { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Upload Zone */
.content-media-upload-zone { margin-bottom: 16px; }
.content-drop-zone { border: 2px dashed var(--border); border-radius: 12px; padding: 40px 20px; text-align: center; color: var(--text-secondary); transition: border-color 0.2s, background 0.2s; cursor: pointer; }
.content-drop-zone:hover { border-color: var(--accent); }

/* Content Admin — Phase 1D: Redirect Form */
.content-redirect-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Content Public — Phase 1D: Archive, Single Post, Guide, Author */
/* Archive Card Grid */
.content-archive { max-width: 1100px; margin: 0 auto; padding: 40px 20px; }
.content-archive-header { margin-bottom: 32px; }
.content-archive-header h1 { font-size: 28px; font-weight: 800; color: var(--text-primary); margin: 0 0 6px 0; }
.content-archive-header p { font-size: 15px; color: var(--text-secondary); margin: 0; }
.content-archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--grid-card-min), 1fr)); gap: 20px; }

/* Featured/Pinned Post */
.content-featured-card { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; text-decoration: none; transition: border-color 0.2s; }
.content-featured-card:hover { border-color: var(--accent); }
.content-featured-card-img { aspect-ratio: 16/9; overflow: hidden; }
.content-featured-card-img img { width: 100%; height: 100%; object-fit: cover; }
.content-featured-card-body { display: flex; flex-direction: column; justify-content: center; padding: 24px 24px 24px 0; }
.content-featured-card-body h2 { font-size: 22px; font-weight: 800; color: var(--text-primary); margin: 0 0 10px 0; line-height: 1.3; }

/* Archive Post Card */
.content-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s; }
.content-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.content-card-img { aspect-ratio: 16/10; overflow: hidden; background: var(--bg-tertiary); }
.content-card-img img { width: 100%; height: 100%; object-fit: cover; }
/* neutral fallback when a post has no real cover image (fills + centers, never a placeholder image) */
.content-card-img__fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; color: var(--text-muted); line-height: 1; }
.content-card-body { padding: 13px 14px; flex: 1; display: flex; flex-direction: column; }
.content-card-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.content-card-meta span { white-space: nowrap; }
.content-card-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0 0 8px 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.content-card-excerpt { font-size: 14px; color: var(--text-secondary); line-height: 1.5; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.content-card-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 0; margin-top: auto; border-top: 1px solid var(--border); margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
.content-card-author { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.content-card-author img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.content-card-readtime { font-size: 12px; color: var(--text-muted); }

/* Category Filter Bar (public archive) */
.content-cat-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.content-cat-pill { display: inline-block; padding: 5px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--text-secondary); background: var(--bg-tertiary, rgba(0,0,0,0.04)); border: 1px solid transparent; transition: all 0.15s; }
.content-cat-pill:hover { color: var(--accent); border-color: var(--accent); }
.content-cat-pill.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

/* Tag Cloud (public archive sidebar) */
.content-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.content-tag-pill { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; text-decoration: none; color: var(--text-secondary); background: var(--bg-tertiary, rgba(0,0,0,0.04)); border: 1px solid var(--border); transition: all 0.15s; }
.content-tag-pill:hover { color: var(--accent); border-color: var(--accent); }

/* Single Post / Guide */
.content-single { max-width: 780px; margin: 0 auto; padding: 40px 20px 60px; }
.content-single-header { margin-bottom: 32px; }
.content-single-breadcrumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.content-single-breadcrumbs a { color: var(--text-secondary); text-decoration: none; }
.content-single-breadcrumbs a:hover { color: var(--accent); }
.content-single-breadcrumbs span { margin: 0 6px; }
.content-single-title { font-size: 32px; font-weight: 800; color: var(--text-primary); line-height: 1.2; margin: 0 0 16px 0; }
.content-single-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 14px; color: var(--text-secondary); }
.content-single-meta-item { display: flex; align-items: center; gap: 6px; }
.content-single-meta img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

/* Single Post Featured Image */
.content-single-featured { margin-bottom: 32px; border-radius: 12px; overflow: hidden; }
.content-single-featured img { width: 100%; height: auto; display: block; }

/* Single Post Body (rendered Markdown) */
.content-single-body { font-size: 16px; line-height: 1.75; color: var(--text-primary); }
.content-single-body h2 { font-size: 24px; font-weight: 700; margin: 40px 0 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.content-single-body h3 { font-size: 20px; font-weight: 700; margin: 32px 0 12px; }
.content-single-body h4 { font-size: 17px; font-weight: 600; margin: 24px 0 10px; }
.content-single-body p { margin: 0 0 16px; }
.content-single-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 16px 0; }
.content-single-body blockquote { margin: 20px 0; padding: 16px 20px; border-left: 4px solid var(--accent); background: var(--bg-secondary); border-radius: 0 8px 8px 0; font-style: italic; color: var(--text-secondary); }
.content-single-body blockquote p:last-child { margin-bottom: 0; }
.content-single-body code { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.9em; background: var(--bg-tertiary, rgba(0,0,0,0.05)); padding: 2px 6px; border-radius: 4px; }
.content-single-body pre { margin: 20px 0; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 16px; overflow-x: auto; }
.content-single-body pre code { background: none; padding: 0; font-size: 14px; line-height: 1.6; }
.content-single-body ul, .content-single-body ol { margin: 0 0 16px; padding-left: 24px; }
.content-single-body li { margin-bottom: 6px; }
.content-single-body a { color: var(--accent); text-decoration: underline; }
.content-single-body a:hover { text-decoration: none; }
.content-single-body table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.content-single-body th, .content-single-body td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; font-size: 14px; }
.content-single-body th { background: var(--bg-secondary); font-weight: 700; }
.content-single-body hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }

/* Guide Table of Contents */
.content-toc { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; margin-bottom: 32px; }
.content-toc-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0 0 12px 0; }
.content-toc ol { margin: 0; padding-left: 20px; }
.content-toc li { margin-bottom: 6px; font-size: 14px; }
.content-toc a { color: var(--text-secondary); text-decoration: none; }
.content-toc a:hover { color: var(--accent); }

/* Author Box */
.content-author-box { display: flex; gap: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-top: 40px; }
.content-author-box-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.content-author-box-avatar img { width: 100%; height: 100%; object-fit: cover; }
.content-author-box-name { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px 0; }
.content-author-box-bio { font-size: 14px; color: var(--text-secondary); line-height: 1.5; margin: 0; }

/* Post Tags (below single post) */
.content-single-tags { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Related Content Section */
.content-related-section { margin-top: 48px; }
.content-related-title { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0 0 20px 0; }
.content-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ============================================================ */
/* Content-page enhancement system (single blog + guide pages)  */
/* TOC rail + reading progress + related-products rail + inline  */
/* featured product + related-content. Theme-token only.         */
/* ============================================================ */
:root { --article-sticky-top: 88px; } /* fixed navbar (64px) + breathing room */

/* Reading progress bar (subtle, theme-matching) */
.article-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 1100; pointer-events: none; }
.article-progress__bar { display: block; height: 100%; width: 0; background: var(--accent); will-change: width; transition: width .08s linear; }

/* 3-column grid inside .container — fills the previously-empty side margins */
.article-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.article-grid--no-toc  { grid-template-columns: minmax(0, 760px) 280px; justify-content: center; }
.article-grid--no-rail { grid-template-columns: 200px minmax(0, 760px); justify-content: center; }
.article-grid--no-toc.article-grid--no-rail { grid-template-columns: minmax(0, 780px); justify-content: center; }
.article-grid__main { min-width: 0; } /* prevents long words / <pre> from blowing out the column */

/* Article fills its column (override the standalone centered width) */
.article-grid .content-single { max-width: none; margin: 0; padding: 0; }

/* Sticky rails — each sticks inside its OWN grid column; the grid is their boundary */
.article-rail { position: sticky; top: var(--article-sticky-top); align-self: start; max-height: calc(100vh - var(--article-sticky-top) - 16px); overflow: auto; scrollbar-width: thin; }
.article-rail::-webkit-scrollbar { width: 6px; }
.article-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Jumped-to headings land below the fixed header (not under it) */
.content-single-body h2, .content-single-body h3, .content-single-body h4 { scroll-margin-top: var(--article-sticky-top); }

/* Table of Contents */
.article-toc { font-size: 13.5px; }
.article-toc__title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0 0 12px; }
.article-toc__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.article-toc__item { margin: 0; }
.article-toc__item--h3 { padding-left: 14px; }
.article-toc__link { display: block; padding: 6px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--text-secondary); text-decoration: none; line-height: 1.4; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; transition: var(--transition); }
.article-toc__link:hover { color: var(--text-primary); background: var(--bg-card-hover); }
/* Active item reuses the active top-nav treatment (neutral, light + dark) */
.article-toc__link.is-active { color: var(--text-primary); background: var(--bg-card-hover); border-left-color: var(--accent); font-weight: 600; }

/* Related-products rail */
.article-rail__title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0 0 14px; }
/* Desktop right rail = quiet COMPACT cards; the full-card strip is mobile-only (toggled at ≤1024). */
.article-rail__products { display: none; }
.article-rail__compact { display: flex; flex-direction: column; gap: 8px; }
.rail-compact-card { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); transition: border-color .2s, background .2s; }
.rail-compact-card:hover { border-color: var(--accent); background: var(--bg-card-hover); }
.rail-compact-card__link { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; }
.rail-compact-card__thumb { flex: 0 0 46px; width: 46px; height: 46px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; }
.rail-compact-card__thumb img, .rail-compact-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rail-compact-card__initial { font-size: 17px; font-weight: 700; color: var(--text-muted); line-height: 1; }
.rail-compact-card__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rail-compact-card__cat { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-compact-card__title { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-compact-card__price { font-size: 12.5px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.rail-compact-card__add { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); cursor: pointer; transition: var(--transition); }
.rail-compact-card__add:hover { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.rail-compact-card__add--oos { opacity: .4; cursor: not-allowed; }
.rail-compact-card__add--oos:hover { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); }
/* Compact rail card — a small reusable extension of .product-card (MOBILE strip only) */
.product-card--rail .card-visual { aspect-ratio: 16 / 10; }
.product-card--rail .card-info { padding: 12px; gap: 8px; }
.product-card--rail .card-title { font-size: 14px; }
.product-card--rail .card-actions .card-btn { font-size: 12.5px; padding: 8px 10px; min-height: 38px; }

/* Inline featured product — distinct mid-article CTA with accent bar */
.article-inline-product { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 30px 0; padding: 16px 18px; background: var(--bg-secondary); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-md); }
.article-inline-product__tag { flex: 0 0 100%; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.article-inline-product__main { display: flex; align-items: center; gap: 14px; flex: 1 1 240px; min-width: 0; text-decoration: none; color: inherit; }
.article-inline-product__img { flex: 0 0 auto; }
.article-inline-product__img img { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; background: var(--bg-tertiary); }
.article-inline-product__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.article-inline-product__cat { font-size: 12px; color: var(--text-muted); }
.article-inline-product__name { font-size: 15.5px; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.article-inline-product__price { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-top: 2px; }
.article-inline-product__cta { flex: 0 0 auto; }

/* Mobile collapsible TOC — hidden on desktop */
.article-toc-mobile { display: none; }
.article-toc-mobile__toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 14px; font-weight: 600; cursor: pointer; }
.article-toc-mobile__label { display: inline-flex; align-items: center; gap: 8px; }
.article-toc-mobile__chevron { transition: transform .25s ease; flex: 0 0 auto; }
.article-toc-mobile__toggle[aria-expanded="true"] .article-toc-mobile__chevron { transform: rotate(180deg); }
.article-toc-mobile__panel { overflow: hidden; padding: 8px 8px 4px; border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md); }
.article-toc-mobile__panel[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .article-progress__bar { transition: none; }
    .article-toc-mobile__chevron { transition: none; }
    html { scroll-behavior: auto !important; }
}

/* Related Guides on Product Page */
.content-product-guides { margin-top: 32px; }
.content-product-guides-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0 0 16px 0; }
.content-product-guide-item { display: flex; gap: 14px; padding: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; text-decoration: none; transition: border-color 0.15s; }
.content-product-guide-item:hover { border-color: var(--accent); }
.content-product-guide-thumb { width: 80px; height: 60px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: var(--bg-tertiary); }
.content-product-guide-thumb img { width: 100%; height: 100%; object-fit: cover; }
.content-product-guide-info { flex: 1; }
.content-product-guide-info h4 { font-size: 14px; font-weight: 700; color: var(--text-primary); margin: 0 0 4px 0; }
.content-product-guide-info p { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Preview Banner (admin preview of draft) */
.content-preview-banner { background: var(--warning); color: #000; padding: 10px 20px; text-align: center; font-size: 14px; font-weight: 700; }

/* Archive Pagination */
.content-archive-pagination { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 40px; }
.content-archive-pagination a, .content-archive-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--text-secondary); border: 1px solid var(--border); transition: all 0.15s; }
.content-archive-pagination a:hover { background: var(--bg-secondary); color: var(--text-primary); }
.content-archive-pagination .active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

/* ── Admin Comments Moderation (Phase 2) ── */
.content-comments-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content-comments-tab { padding: 10px 16px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; color: var(--text-secondary); margin-bottom: -1px; }
.content-comments-tab.active { border-bottom-color: var(--accent); color: var(--accent); }
.content-comments-tab:hover { color: var(--text-primary); }
.content-comments-tab-count { font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 10px; background: var(--bg-secondary); margin-left: 4px; }
.content-comments-tab-count-warn { background: var(--warning); color: #000; }
.content-comments-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.content-comments-search-form { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 200px; }
.content-comments-search-form .form-control { max-width: 300px; }
.content-comments-bulk-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; padding: 10px 16px; background: var(--bg-secondary); border-radius: 8px; }
.content-comments-select-all-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.content-comments-bulk-select { max-width: 180px; font-size: 13px; }
.content-comments-list { display: flex; flex-direction: column; gap: 2px; }
.content-comment-item { display: flex; gap: 12px; padding: 16px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; transition: border-color 0.15s; }
.content-comment-item:hover { border-color: var(--accent); }
.content-comment-status-spam { opacity: 0.6; }
.content-comment-status-trash { opacity: 0.5; }
.content-comment-check { padding-top: 2px; flex-shrink: 0; }
.content-comment-main { flex: 1; min-width: 0; }
.content-comment-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.content-comment-author { display: flex; align-items: center; gap: 8px; }
.content-comment-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.content-comment-avatar-placeholder { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.content-comment-meta { display: flex; align-items: center; gap: 8px; }
.content-comment-badge-staff { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--accent); color: var(--accent-contrast); }
.content-comment-badge-guest { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--bg-secondary); color: var(--text-secondary); }
.content-comment-status-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.content-comment-badge-pending { background: #fff3cd; color: #856404; }
.content-comment-badge-approved { background: #d4edda; color: #155724; }
.content-comment-badge-spam { background: #f8d7da; color: #721c24; }
.content-comment-badge-trash { background: var(--bg-secondary); color: var(--text-secondary); }
.content-comment-body { font-size: 14px; line-height: 1.6; color: var(--text-primary); margin-bottom: 8px; word-break: break-word; }
.content-comment-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.content-comment-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.content-comment-action-btn { background: none; border: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; padding: 3px 10px; border-radius: 4px; cursor: pointer; transition: all 0.15s; }
.content-comment-action-btn:hover { border-color: var(--text-primary); color: var(--text-primary); }
.content-comment-action-approve:hover { border-color: var(--success); color: var(--success); }
.content-comment-action-spam:hover { border-color: var(--warning); color: var(--warning); }
.content-comment-action-trash:hover { border-color: var(--danger); color: var(--danger); }
.content-comment-action-delete { color: var(--danger); border-color: var(--danger); }
.content-comment-action-delete:hover { background: var(--danger); color: #fff; }
.content-comment-reply-form { margin-top: 12px; padding: 12px; background: var(--bg-secondary); border-radius: 8px; }

/* ── Public Comments (Phase 2) ── */
.content-comments-section { max-width: 780px; margin: 40px auto 0; padding-top: 32px; border-top: 1px solid var(--border); }
.content-comments-heading { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 24px; color: var(--text-primary); }
.content-comments-count { font-weight: 400; color: var(--text-secondary); font-size: 16px; }
.content-comments-thread { display: flex; flex-direction: column; gap: 0; }
.content-comment-thread-item { padding: 16px 0; border-bottom: 1px solid var(--border); }
.content-comment-thread-item:last-child { border-bottom: none; }
.content-comment-public { display: flex; gap: 12px; }
.content-comment-pub-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.content-comment-pub-avatar-placeholder { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.content-comment-pub-body { flex: 1; min-width: 0; }
.content-comment-pub-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; font-size: 14px; }
.content-comment-pub-header strong { color: var(--text-primary); }
.content-comment-pub-header time { color: var(--text-secondary); font-size: 12px; }
.content-comment-pub-text { font-size: 14px; line-height: 1.7; color: var(--text-primary); word-break: break-word; }
.content-comment-reply-btn { background: none; border: none; color: var(--accent); font-size: 12px; cursor: pointer; padding: 4px 0; margin-top: 4px; }
.content-comment-reply-btn:hover { text-decoration: underline; }
.content-comment-replies { margin-left: 48px; padding-left: 16px; border-left: 2px solid var(--border); }
.content-comment-is-reply { padding: 12px 0; }
.content-comment-form-wrap { margin-top: 32px; padding: 24px; background: var(--bg-secondary); border-radius: 12px; }
.content-comment-form-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; color: var(--text-primary); }
.content-comment-form-guest-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.content-comment-form-actions { display: flex; align-items: center; gap: 12px; }
.content-comment-login-prompt { margin-top: 24px; text-align: center; font-size: 14px; color: var(--text-secondary); padding: 20px; background: var(--bg-secondary); border-radius: 10px; }
.content-comment-login-prompt a { color: var(--accent); text-decoration: none; font-weight: 600; }
.content-comment-login-prompt a:hover { text-decoration: underline; }

/* ================================================================ */
/* Product Q&A — Admin Styles                                       */
/* ================================================================ */
.qa-pending-badge { background: var(--warning); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 10px; margin-left: 8px; vertical-align: middle; }
.qa-settings-form { max-width: 640px; }
.qa-settings-grid { display: grid; gap: 16px; }
.qa-settings-grid .form-text { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.qa-settings-grid .form-check-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 500; }
.qa-settings-grid .form-check-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.qa-filter-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qa-filter-select { max-width: 200px; }
.qa-filter-check { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.qa-filter-check input { accent-color: var(--accent); }
.qa-question-list { display: flex; flex-direction: column; gap: 0; }
.qa-question-card { border-bottom: none; padding: 0; }
.qa-question-card:first-child { border-radius: 8px 8px 0 0; }
.qa-question-card:last-child { border-bottom: 1px solid var(--border); border-radius: 0 0 8px 8px; }
.qa-question-card:only-child { border-radius: 8px; border-bottom: 1px solid var(--border); }
.qa-question-top { display: flex; align-items: flex-start; gap: 12px; padding: 16px; }
.qa-question-check { padding-top: 2px; }
.qa-vote-badge { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 6px; background: var(--bg-secondary); font-size: 13px; font-weight: 600; color: var(--text-secondary); min-width: 40px; }
.qa-question-main { flex: 1; min-width: 0; }
.qa-question-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.qa-question-author { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.qa-question-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qa-question-body { font-size: 14px; line-height: 1.5; color: var(--text-primary); margin-bottom: 8px; word-break: break-word; }
.qa-question-footer { display: flex; align-items: center; gap: 16px; font-size: 12px; margin-bottom: 8px; }
.qa-product-link { color: var(--accent); text-decoration: none; font-weight: 500; }
.qa-product-link:hover { text-decoration: underline; }
.qa-answer-count { color: var(--text-secondary); }
.qa-badge { font-size: 11px; padding: 1px 6px; border-radius: 4px; font-weight: 600; white-space: nowrap; }
.qa-badge-verified { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.qa-badge-staff { background: rgba(99, 102, 241, 0.15); color: var(--accent); }
.qa-badge-featured { color: #f59e0b; font-size: 14px; }
.qa-badge-accepted { background: rgba(16, 185, 129, 0.15); color: var(--success); }
.qa-answers-expanded { border-top: 1px solid var(--border); background: var(--bg-secondary); padding: 0; }
.qa-answers-header { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--border); }
.qa-answer-item { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.qa-answer-item:last-of-type { border-bottom: none; }
.qa-answer-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; flex-wrap: wrap; }
.qa-answer-body { font-size: 13px; line-height: 1.5; color: var(--text-primary); margin-bottom: 8px; word-break: break-word; }
.qa-vote-badge-inline { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.qa-staff-reply { padding: 12px 16px; border-top: 1px solid var(--border); }
.qa-staff-reply textarea { font-size: 13px; }
.qa-status-spam { opacity: 0.6; }
.qa-status-hidden { opacity: 0.7; }

/* === Public Q&A (product page) — card-based readable Q/A layout ===
   Scoped to #pp-panel-qa so the admin Q&A moderator (admin/product-qa.php),
   which reuses some .qa-* class names, keeps its own dedicated styles above. */

/* Summary bar: question count + Ask button */
#pp-panel-qa .qa-summary-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
#pp-panel-qa .qa-summary-count { font-size: 16px; font-weight: 700; color: var(--text-primary); }

/* Ask-a-question form */
#pp-panel-qa .qa-ask-form-wrap { margin-bottom: 20px; padding: 18px; background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-lg); }
#pp-panel-qa .qa-form { display: flex; flex-direction: column; gap: 12px; }
#pp-panel-qa .qa-form textarea { resize: vertical; }
#pp-panel-qa .qa-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#pp-panel-qa .qa-form-hint { font-size: 12px; color: var(--text-muted); }
#pp-panel-qa .qa-login-prompt { display: flex; align-items: center; gap: 8px; padding: 14px 16px; font-size: 13px; color: var(--text-secondary); background: var(--bg-secondary); border: 1.5px solid var(--border); border-radius: var(--radius-md); }
#pp-panel-qa .qa-login-prompt a { color: var(--accent); font-weight: 600; }
#pp-panel-qa .qa-login-prompt svg { flex-shrink: 0; color: var(--text-muted); }

/* Question stacks: each question is its own outlined, rounded card */
#pp-panel-qa .qa-featured-section { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
#pp-panel-qa .qa-question-list { display: flex; flex-direction: column; gap: 12px; }
#pp-panel-qa .qa-question-item { display: flex; gap: 14px; padding: 16px 18px; background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-lg); transition: border-color .15s, box-shadow .15s; }
#pp-panel-qa .qa-question-item:hover { border-color: var(--border-hover); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
#pp-panel-qa .qa-featured { border-color: color-mix(in srgb, #f59e0b 45%, var(--border)); background: color-mix(in srgb, #f59e0b 6%, var(--bg-card)); }

/* Vote control: rounded pill, arrow over count */
#pp-panel-qa .qa-question-vote { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
#pp-panel-qa .qa-vote-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 34px; border-radius: var(--radius-md); border: 1.5px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; transition: all .15s; }
#pp-panel-qa .qa-vote-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
#pp-panel-qa .qa-vote-btn.voted { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); color: var(--accent); }
#pp-panel-qa .qa-vote-btn:disabled { cursor: default; opacity: .45; }
#pp-panel-qa .qa-vote-btn-sm { width: 30px; height: 28px; }
#pp-panel-qa .qa-vote-count { font-size: 14px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1; }

/* Question content + "Q" marker */
#pp-panel-qa .qa-question-content { flex: 1; min-width: 0; }
#pp-panel-qa .qa-question-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
#pp-panel-qa .qa-star-icon { color: #f59e0b; flex-shrink: 0; }
#pp-panel-qa .qa-question-body { font-size: 15px; line-height: 1.6; color: var(--text-primary); font-weight: 500; margin: 0 0 10px; word-break: break-word; }
#pp-panel-qa .qa-question-body::before { content: "Q"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-contrast); font-size: 12px; font-weight: 800; vertical-align: -4px; }

/* Author meta row */
#pp-panel-qa .qa-question-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
#pp-panel-qa .qa-meta-name { font-weight: 600; color: var(--text-primary); }
#pp-panel-qa .qa-meta-time { color: var(--text-muted); font-size: 12px; }

/* Badges (verified buyer / staff / featured / accepted) */
#pp-panel-qa .qa-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.5; }
#pp-panel-qa .qa-badge-verified { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
#pp-panel-qa .qa-badge-staff { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
#pp-panel-qa .qa-badge-featured { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b8860b; }
#pp-panel-qa .qa-badge-accepted { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }

/* Show/hide answers toggle: clear pill affordance with chevron */
#pp-panel-qa .qa-toggle-answers { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-secondary); border: 1.5px solid var(--border); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 12px; border-radius: var(--radius-md); transition: all .15s; }
#pp-panel-qa .qa-toggle-answers:hover { border-color: var(--accent); color: var(--accent); }
#pp-panel-qa .qa-toggle-answers::after { content: "\25BE"; font-size: 10px; line-height: 1; }

/* Answers area: threaded under the question with an accent rail */
#pp-panel-qa .qa-answers-wrap { margin-top: 14px; padding: 2px 0 0 14px; border-left: 2px solid color-mix(in srgb, var(--accent) 30%, var(--border)); display: flex; flex-direction: column; gap: 10px; }
#pp-panel-qa .qa-answer-item { padding: 12px 14px; background: var(--bg-secondary); border: 1.5px solid var(--border); border-radius: var(--radius-md); }
#pp-panel-qa .qa-answer-item.qa-accepted { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); background: color-mix(in srgb, var(--success) 6%, var(--bg-secondary)); }
#pp-panel-qa .qa-answer-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-bottom: 8px; }
#pp-panel-qa .qa-answer-body { font-size: 14px; line-height: 1.6; color: var(--text-primary); margin: 0 0 8px; word-break: break-word; }
#pp-panel-qa .qa-answer-body::before { content: "A"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 8px; border-radius: var(--radius-sm); background: var(--success); color: #fff; font-size: 11px; font-weight: 800; vertical-align: -3px; }
#pp-panel-qa .qa-answer-vote { display: flex; align-items: center; gap: 6px; }
#pp-panel-qa .qa-no-answers { font-size: 13px; color: var(--text-muted); padding: 6px 0; }
#pp-panel-qa .qa-loading { font-size: 13px; color: var(--text-muted); padding: 6px 0; }

/* Staff inline delete */
#pp-panel-qa .qa-staff-delete-form { display: inline; margin: 0 0 0 8px; padding: 0; }
#pp-panel-qa .qa-staff-delete-btn { background: none; border: none; color: var(--danger, #ef4444); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm); opacity: .7; transition: opacity .15s; }
#pp-panel-qa .qa-staff-delete-btn:hover { opacity: 1; text-decoration: underline; }

/* Inline "add an answer" form (injected after answers) */
#pp-panel-qa .qa-inline-answer-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
#pp-panel-qa .qa-inline-answer-form form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
#pp-panel-qa .qa-inline-answer-form textarea { width: 100%; resize: vertical; }

/* Pagination */
#pp-panel-qa .qa-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
#pp-panel-qa .qa-page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; color: var(--text-secondary); background: var(--bg-card); border: 1.5px solid var(--border); text-decoration: none; transition: all .15s; }
#pp-panel-qa .qa-page-link:hover { border-color: var(--accent); color: var(--accent); }
#pp-panel-qa .qa-page-active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }

/* ─── Admin multilingual (Phase 2) — translation panel + flag strip ─── */
.i18n-panel { border: 1px solid var(--border); border-radius: 12px; margin-top: 24px; background: var(--bg-card); overflow: hidden; }
.i18n-panel-header { padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); }
.i18n-panel-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.i18n-panel-sub { margin-top: 4px; font-size: 12px; color: var(--text-secondary); }
.i18n-tabs { display: flex; gap: 4px; padding: 8px 8px 0; border-bottom: 1px solid var(--border); background: var(--bg-secondary); flex-wrap: wrap; }
.i18n-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 1px solid transparent; border-bottom: none; background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 8px 8px 0 0; transition: background .15s, color .15s; position: relative; }
.i18n-tab:hover { color: var(--text-primary); background: var(--bg-card); }
.i18n-tab.is-active { background: var(--bg-card); color: var(--text-primary); border-color: var(--border); margin-bottom: -1px; }
.i18n-tab.is-dirty::after { content: ''; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--warning, #f59e0b); }
.i18n-tab-flag { font-size: 15px; line-height: 1; }
.i18n-tab-label { white-space: nowrap; }
.i18n-tab-pct { font-size: 11px; padding: 2px 6px; border-radius: 10px; background: var(--border); color: var(--text-muted); font-weight: 600; }
.i18n-tab-pct.is-full { background: var(--success, #10b981); color: #fff; }
.i18n-tab-pct.is-partial { background: var(--warning, #f59e0b); color: #fff; }
.i18n-tab-pct.is-empty { background: var(--border); color: var(--text-muted); }
.i18n-pane { padding: 20px; display: none; }
.i18n-pane.is-active { display: block; }
.i18n-pane-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.i18n-en-notice { padding: 12px 14px; background: var(--bg-secondary); border-radius: 8px; color: var(--text-secondary); font-size: 13px; margin-bottom: 16px; }
.i18n-en-preview { margin: 0; display: grid; grid-template-columns: 160px 1fr; gap: 10px 16px; font-size: 13px; }
.i18n-en-preview dt { font-weight: 600; color: var(--text-secondary); }
.i18n-en-preview dd { margin: 0; color: var(--text-primary); word-break: break-word; }
.i18n-empty { color: var(--text-muted); font-style: italic; }
.i18n-clear-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.i18n-field { margin-bottom: 14px; }

.i18n-flag-strip { display: inline-flex; gap: 2px; align-items: center; font-size: 14px; line-height: 1; }
.i18n-flag { display: inline-block; transition: opacity .15s; }
.i18n-flag.is-missing { opacity: 0.25; filter: grayscale(1); }
.i18n-flag.is-present { opacity: 1; }

/* ================================================================ */
/* Admin Translations Page (Phase 11 redesign)                      */
/* ================================================================ */
.trans-toolbar { padding: 16px; margin-bottom: 16px; }
.trans-toolbar__form { display: grid; grid-template-columns: 260px 1fr 240px auto; gap: 12px; align-items: end; }
.trans-toolbar__form .form-group { margin: 0; }
.trans-toolbar__actions { display: flex; gap: 8px; }
.trans-progress { margin-top: 14px; height: 28px; position: relative; background: var(--bg-secondary); border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.trans-progress__bar { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--accent), var(--accent-hover, var(--accent))); opacity: .85; transition: width .3s ease; }
.trans-progress__label { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; font-size: 13px; color: var(--bg-primary); font-weight: 600; }

.trans-addkey { margin-bottom: 16px; padding: 12px 16px; }
.trans-addkey > summary { cursor: pointer; font-weight: 600; color: var(--text-primary); list-style: none; }
.trans-addkey > summary::-webkit-details-marker { display: none; }
.trans-addkey > summary::before { content: "▶"; display: inline-block; margin-right: 8px; transition: transform .15s; font-size: 10px; color: var(--text-secondary); }
.trans-addkey[open] > summary::before { transform: rotate(90deg); }
.trans-addkey__form { margin-top: 12px; display: grid; grid-template-columns: 1fr 2fr auto; gap: 12px; align-items: end; }
.trans-addkey__form .form-group { margin: 0; }

.trans-group { margin-bottom: 12px; padding: 0; overflow: hidden; }
.trans-group > summary { cursor: pointer; padding: 14px 18px; list-style: none; background: var(--bg-secondary); display: flex; align-items: center; gap: 16px; border-bottom: 1px solid transparent; transition: background .15s, border-color .15s; }
.trans-group[open] > summary { border-bottom-color: var(--border); }
.trans-group > summary::-webkit-details-marker { display: none; }
.trans-group > summary::before { content: "▶"; display: inline-block; font-size: 10px; color: var(--text-secondary); transition: transform .15s; flex-shrink: 0; }
.trans-group[open] > summary::before { transform: rotate(90deg); }
.trans-group__title { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; }
.trans-group__name { font-weight: 600; font-size: 15px; color: var(--text-primary); }
.trans-group__slug { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--text-muted); background: var(--bg); padding: 2px 6px; border-radius: 4px; }
.trans-group__meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.trans-group__pct { font-weight: 600; font-size: 13px; padding: 3px 10px; border-radius: 12px; min-width: 50px; text-align: center; }
.trans-group__pct--full { background: color-mix(in srgb, var(--success, #16a34a) 15%, transparent); color: var(--success, #16a34a); }
.trans-group__pct--mid  { background: color-mix(in srgb, var(--warning, #f59e0b) 15%, transparent); color: var(--warning, #f59e0b); }
.trans-group__pct--low  { background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent); color: var(--danger, #dc2626); }
.trans-group__count { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.trans-group__desc { padding: 12px 18px 0; margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }

.trans-table-wrap { padding: 8px 18px 18px; overflow-x: auto; }
.trans-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.trans-table th { text-align: left; padding: 10px 12px; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.trans-table td { padding: 10px 12px; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.trans-table__key { width: 240px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; color: var(--text-secondary); word-break: break-all; }
.trans-table__en  { width: 35%; color: var(--text-primary); line-height: 1.5; }
.trans-table__en .trans-en-text { display: block; padding: 6px 0; }
.trans-table__tgt { width: 40%; }
.trans-tgt-input { width: 100%; min-height: 40px; resize: vertical; font-size: 13px; line-height: 1.5; background: var(--bg); }
.trans-row--empty .trans-table__tgt .trans-tgt-input { background: color-mix(in srgb, var(--warning, #f59e0b) 5%, var(--bg)); border-color: color-mix(in srgb, var(--warning, #f59e0b) 35%, var(--border)); }
.trans-table__act { width: 40px; text-align: center; }
.btn-icon { background: none; border: 1px solid var(--border); color: var(--text-muted); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 12px; line-height: 1; transition: all .15s; }
.btn-icon:hover { color: var(--danger, #dc2626); border-color: var(--danger, #dc2626); }

.trans-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 14px; align-items: center; padding: 14px 18px; margin-top: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 -4px 12px rgba(0,0,0,.05); }
.trans-savebar__help { color: var(--text-muted); font-size: 12px; }
.trans-savebar__dirty { color: var(--warning, #f59e0b); font-size: 13px; font-weight: 600; display: none; }
.trans-savebar.is-dirty .trans-savebar__dirty { display: inline; }
.trans-savebar.is-dirty .trans-savebar__help { display: none; }
.trans-empty { padding: 32px; text-align: center; color: var(--text-muted); }

/* Horizontal tab strip (mirrors admin/settings.php tabs pattern) */
.trans-tabs { display: flex; flex-wrap: nowrap; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 0 1px; background: var(--bg); border-radius: 8px 8px 0 0; }
.trans-tabs a.trans-tab { padding: 10px 16px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; border: 1px solid transparent; border-bottom: 2px solid transparent; color: var(--text-secondary); margin-bottom: -1px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; background: transparent; border-radius: 6px 6px 0 0; transition: color .15s, border-color .15s, background .15s; }
.trans-tabs a.trans-tab:hover { color: var(--text-primary); background: var(--bg-secondary); }
.trans-tabs a.trans-tab--active { color: var(--accent); border-bottom-color: var(--accent); background: var(--bg-secondary); }
.trans-tabs a.trans-tab--done { color: var(--text-muted); }
.trans-tabs a.trans-tab--done.trans-tab--active { color: var(--accent); }
.trans-tab__badge { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: var(--bg-secondary); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.trans-tab--active .trans-tab__badge { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.trans-tab--done .trans-tab__badge { background: color-mix(in srgb, var(--success, #16a34a) 15%, transparent); color: var(--success, #16a34a); }
.trans-tab--incomplete::before { content: "•"; color: var(--warning, #f59e0b); font-size: 18px; line-height: 0; margin-right: -2px; }

/* In-section control bar: search + filter chips */
.trans-section-head { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-bottom: 12px; padding: 12px 16px; background: var(--bg-secondary); border-radius: 8px; border: 1px solid var(--border); }
.trans-section-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0; flex: 1; min-width: 0; }
.trans-section-desc { font-size: 12px; color: var(--text-secondary); margin: 0 0 0 0; width: 100%; line-height: 1.5; }
.trans-search-inline { display: flex; align-items: center; gap: 6px; }
.trans-search-inline input { width: 220px; max-width: 100%; padding: 6px 10px; font-size: 13px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); }
.trans-filter-chips { display: inline-flex; gap: 4px; background: var(--bg); padding: 3px; border-radius: 8px; border: 1px solid var(--border); }
.trans-chip { background: transparent; border: none; padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: background .15s, color .15s; font-variant-numeric: tabular-nums; }
.trans-chip:hover { color: var(--text-primary); }
.trans-chip--active { background: var(--accent); color: var(--bg-primary); }
.trans-chip--active:hover { color: var(--bg-primary); }

/* Row hidden by client-side filter */
.trans-row.is-hidden { display: none; }
/* Row with unsaved edit */
.trans-row.is-dirty .trans-tgt-input { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* === Rich Article Content (TinyMCE output) ============================
   Applies to .content-single-body (blog/guide), .article-content (alias),
   and product detail descriptions. Ensures images, tables, code blocks,
   and figures are responsive and don't break mobile layouts. */
.article-content,
.content-single-body,
.product-description-rich,
.legal-content {
    font-size: 16px; line-height: 1.7; color: var(--text-primary);
    word-wrap: break-word; overflow-wrap: break-word; margin-top: 24px;
}
.article-content img,
.content-single-body img,
.product-description-rich img,
.legal-content img {
    max-width: 100%; height: auto; border-radius: 8px; margin: 16px 0; display: block;
}
.article-content figure,
.content-single-body figure,
.product-description-rich figure,
.legal-content figure {
    margin: 20px 0; text-align: center;
}
.article-content figcaption,
.content-single-body figcaption,
.product-description-rich figcaption,
.legal-content figcaption {
    font-size: 13px; color: var(--text-secondary); margin-top: 8px;
    text-align: center; font-style: italic;
}
/* Table responsive — horizontal scroll on overflow without breaking layout */
.article-content table,
.content-single-body table,
.product-description-rich table,
.legal-content table {
    display: block; max-width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch; border-collapse: collapse;
}
/* Code blocks — always scroll, never overflow */
.article-content pre,
.content-single-body pre,
.product-description-rich pre,
.legal-content pre {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    max-width: 100%; word-wrap: normal;
}
.article-content pre code,
.content-single-body pre code,
.product-description-rich pre code,
.legal-content pre code {
    white-space: pre; word-break: normal;
}
.article-content iframe,
.content-single-body iframe,
.product-description-rich iframe,
.legal-content iframe {
    max-width: 100%;
}

/* --- Theme-safe rich-content text/link/code/quote styling --------------
   Defense-in-depth alongside server sanitizeHtml() + TinyMCE paste-clean.
   Even if a stray inline color survives, these rules keep links visible
   and headings/blockquotes/code blocks readable in BOTH dark and light. */
.article-content,
.content-single-body,
.product-description-rich,
.legal-content {
    color: var(--text-primary);
}
.article-content h1, .article-content h2, .article-content h3,
.article-content h4, .article-content h5, .article-content h6,
.content-single-body h1, .content-single-body h2, .content-single-body h3,
.content-single-body h4, .content-single-body h5, .content-single-body h6,
.product-description-rich h1, .product-description-rich h2, .product-description-rich h3,
.product-description-rich h4, .product-description-rich h5, .product-description-rich h6,
.legal-content h1, .legal-content h2, .legal-content h3,
.legal-content h4, .legal-content h5, .legal-content h6 {
    color: var(--text-primary);
}
/* Links — visible in both themes; preserves underline + accent + focus ring */
.article-content a,
.content-single-body a,
.product-description-rich a,
.legal-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color .15s ease, background-color .15s ease;
    border-radius: 2px;
}
.article-content a:hover,
.content-single-body a:hover,
.product-description-rich a:hover,
.legal-content a:hover {
    background-color: color-mix(in srgb, var(--accent) 15%, transparent);
    text-decoration-thickness: 2px;
}
.article-content a:focus-visible,
.content-single-body a:focus-visible,
.product-description-rich a:focus-visible,
.legal-content a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Blockquotes — accent border, theme-safe text, no hardcoded gray */
.article-content blockquote,
.content-single-body blockquote,
.product-description-rich blockquote,
.legal-content blockquote {
    border-left: 3px solid var(--accent);
    margin: 16px 0;
    padding: 8px 16px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
    border-radius: 0 6px 6px 0;
}
/* Code/pre — theme variables, never hardcoded white-on-black */
.article-content code,
.content-single-body code,
.product-description-rich code,
.legal-content code {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .92em;
    border: 1px solid var(--border);
}
.article-content pre,
.content-single-body pre,
.product-description-rich pre,
.legal-content pre {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    margin: 16px 0;
}
.article-content pre code,
.content-single-body pre code,
.product-description-rich pre code,
.legal-content pre code {
    background: transparent;
    border: 0;
    padding: 0;
}
/* Tables — theme borders */
.article-content table,
.content-single-body table,
.product-description-rich table,
.legal-content table {
    border: 1px solid var(--border);
}
.article-content th, .article-content td,
.content-single-body th, .content-single-body td,
.product-description-rich th, .product-description-rich td,
.legal-content th, .legal-content td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    color: var(--text-primary);
}
.article-content th,
.content-single-body th,
.product-description-rich th,
.legal-content th {
    background: var(--bg-secondary);
    font-weight: 600;
}

/* ================================================================ */
/* CONTACT INFO BLOCK                                                */
/* Used on contact.php to display WhatsApp, email, hours.           */
/* ================================================================ */
.contact-info-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
}
.contact-info-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 16px;
}
.contact-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.contact-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.contact-info-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}
.contact-info-item a {
    font-size: 14px;
    color: var(--accent);
    text-decoration: underline;
}
.contact-info-item span {
    font-size: 14px;
    color: var(--text-primary);
}

/* ================================================================ */
/* CHECKOUT CONSENT BLOCK                                            */
/* GDPR + EU withdrawal waiver checkboxes above submit button.      */
/* ================================================================ */
.checkout-consent-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.checkout-consent-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    cursor: pointer;
}
.checkout-consent-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    accent-color: var(--accent);
    margin-top: 2px;
    cursor: pointer;
}
.checkout-consent-row a {
    color: var(--accent);
    text-decoration: underline;
}

/* ================================================================ */
/* COOKIE CONSENT BANNER                                             */
/* Fixed bottom bar, managed by assets/js/cookie-consent.js v1.0.  */
/* ================================================================ */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 16px 24px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}
.cookie-banner-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.cookie-banner-text {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}
.cookie-banner-link {
    color: var(--accent);
    text-decoration: underline;
}
.cookie-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ================================================================ */
/* GLOBAL MODAL SYSTEM (.hl-modal-*) — Phase 2 (2026-04-26)         */
/* Reusable across admin + frontend. JS API: window.HLModal         */
/* (assets/js/modal.js). Variants: --sm, --md, --lg, --xl, lightbox.*/
/* Responsive rules live in the Responsive Zone below.              */
/* ================================================================ */
.hl-modal-overlay {
    position: fixed;
    inset: 0;
    /* Near-opaque scrim so the page chrome (navbar, footer, sidebar) cannot
     * bleed through behind the dialog. Earlier 0.78 + blur(6px) was not
     * enough on short pages where the page footer sits inside the viewport
     * and visually clashed with the modal's sticky Save/Cancel footer. */
    background: rgba(0, 0, 0, 0.92);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    backdrop-filter: blur(10px) saturate(1.1);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    /* Push content below the fixed navbar (64px) + 12px gap */
    padding: 76px 24px 24px;
    overscroll-behavior: contain;
    /* Allow overlay itself to scroll if dialog ever exceeds viewport */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.hl-modal-overlay.is-open {
    display: flex;
    animation: hlModalFade 0.15s ease-out;
}
.hl-modal-overlay--lightbox {
    background: rgba(0, 0, 0, 0.92);
    z-index: 10001;
    padding: 0;
}
.hl-modal-dialog {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    width: min(640px, 94vw);
    /* Use dvh to respect mobile address-bar; fall back to vh */
    max-height: min(90vh, 900px);
    max-height: min(90dvh, 900px);
    overflow: hidden;
    animation: hlModalSlideUp 0.18s ease-out;
    margin: auto;
}
.hl-modal-dialog--sm { width: min(420px, 92vw); }
.hl-modal-dialog--md { width: min(640px, 94vw); }
.hl-modal-dialog--lg { width: min(960px, 96vw); }
.hl-modal-dialog--xl {
    width: min(1200px, 98vw);
    /* XL modals use tabs; lock height so switching tabs doesn't make the
     * dialog jump / re-center. The body scrolls internally. */
    height: min(900px, 95vh);
    height: min(900px, 95dvh);
    max-height: 95vh;
    max-height: 95dvh;
}
.hl-modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    /* Header always visible even when body scrolls */
    position: sticky;
    top: 0;
    z-index: 2;
}
.hl-modal-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.hl-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    color: var(--text-primary);
}
.hl-modal-footer {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    /* Footer always visible above scrolling body */
    position: sticky;
    bottom: 0;
    z-index: 2;
}
/* Helper for when a <form> wraps body + footer and must itself be the
 * flex column so .hl-modal-body can scroll. Add alongside .hl-modal-form
 * when the form is the direct flex child of .hl-modal-dialog. */
.hl-modal-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    margin: 0;
}
.hl-modal-close {
    appearance: none;
    /* Visible, easy-to-hit close: bordered surface + high-contrast glyph.
       Was a transparent 36px target with a low-contrast (text-secondary) icon
       — hard to see and to tap. */
    background: rgba(128, 128, 128, 0.16);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 1.5rem;
    line-height: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.hl-modal-close:hover,
.hl-modal-close:focus-visible {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
    outline: none;
}
.hl-modal-overlay--lightbox .hl-modal-dialog {
    background: transparent;
    border: 0;
    box-shadow: none;
    width: auto;
    max-width: 92vw;
    max-height: 92vh;
}
/* Bulletproof scroll lock: position:fixed body for ALL browsers.
 * The previous overflow:hidden-only approach failed when the document
 * scroll context was on <html> rather than <body>. */
html.hl-modal-open,
body.hl-modal-open {
    overflow: hidden;
}
body.hl-modal-open {
    position: fixed;
    inset-inline: 0;
    width: 100%;
}
/* Hide the page footer entirely while a modal is open so its column
 * headings (Quick Links / Account / Support / Legal) cannot bleed
 * through behind the modal's sticky Save/Cancel footer. The fixed
 * navbar is intentionally left visible above the overlay's top
 * padding so the user keeps page context. */
body.hl-modal-open .footer {
    visibility: hidden;
}
@keyframes hlModalFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes hlModalSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === Phase B Refactor (2026-04-26) — extracted inline styles === */

/* Wallet Row — settings.php / admin/settings.php (topup + withdraw) */
.wallet-row {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
    position: relative;
}
.wallet-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.wallet-row__label {
    font-weight: 700;
    font-size: 14px;
}
.wallet-row__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wallet-row__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
}
.wallet-row__grid-2 {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.wallet-row__grid-3 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
}
.pg-section-divider {
    border-top: 1px solid var(--border);
    margin-top: 24px;
    padding-top: 20px;
}

/* Tag Pill — admin/products.php SEO + keyword suggestion chips */
.tag-pill {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all .15s;
}
.tag-pill:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.tag-pill--ellipsis {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Profile Toggle — settings.php feature switches */
.profile-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 24px;
    background: var(--border);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background .2s;
    flex-shrink: 0;
}
.profile-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.profile-toggle:checked { background: var(--accent); }
.profile-toggle:checked::after { transform: translateX(20px); }

/* Searchable Select — admin/pool.php product picker */
.searchable-select { position: relative; z-index: 50; }
.searchable-select .ss-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
}
.searchable-select .ss-display:hover { border-color: var(--accent); }
.searchable-select .ss-display .ss-placeholder { color: var(--text-muted); }
.searchable-select .ss-display .ss-arrow { font-size: 10px; opacity: .5; }
.searchable-select .ss-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.searchable-select .ss-dropdown.open { display: block; }
.searchable-select .ss-search {
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}
.searchable-select .ss-item {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    background: var(--bg-secondary);
}
.searchable-select .ss-item:hover { background: var(--accent); color: var(--accent-contrast); }
.searchable-select .ss-item.hidden { display: none; }
.searchable-select .pf-item { background: var(--bg-secondary); }
.searchable-select .pf-item:hover { background: var(--accent); color: var(--accent-contrast); }

/* === Footer Composer (admin/footer-layout.php) ==================== */
.footer-composer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: start;
}
.footer-composer-col {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.footer-composer-col-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.footer-composer-col-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    word-break: break-word;
}
.footer-composer-col-actions { display: flex; gap: 4px; }
.footer-composer-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 24px;
}
.footer-composer-link {
    display: flex;
    align-items: stretch;
    gap: 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    cursor: grab;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.footer-composer-link:hover { border-color: var(--accent); }
.footer-composer-link.dragging { opacity: 0.4; cursor: grabbing; }
.footer-composer-drag {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    flex: 0 0 auto;
}
.footer-composer-link-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    color: var(--text-primary);
    min-width: 0;
}
.footer-composer-link-label {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.footer-composer-link-meta {
    font-size: 11px;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.footer-composer-link-meta code {
    font-size: 11px;
    background: transparent;
    padding: 0;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}
.footer-composer-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 6px;
}
.footer-composer-add-link {
    text-align: center;
    padding: 8px;
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    transition: border-color 0.15s, color 0.15s;
}
.footer-composer-add-link:hover { border-color: var(--accent); color: var(--accent); }

/* ================================================================ */
/* SHARED ADMIN UI PRIMITIVES — Post-Remediation Phase A.2/A.3      */
/* Reusable: badges, form-row/actions/help, payment-provider card   */
/* ================================================================ */

/* Layout utility: centered horizontal button group with 12px gap.  */
/* Replaces inline <div style="display:flex;gap:12px;justify-content:center"> */
.btn-row-center {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Generic small status pill — used by Payment Providers & Events.  */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border-radius: 6px;
    line-height: 1.6;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.badge-success { background: var(--success-bg); color: var(--success); border-color: rgba(34,197,94,0.25); }
.badge-error   { background: var(--danger-bg);  color: var(--danger);  border-color: rgba(239,68,68,0.25); }
.badge-info    { background: rgba(59,130,246,0.10); color: #60a5fa; border-color: rgba(59,130,246,0.25); }
.badge-muted   { background: var(--bg-tertiary); color: var(--text-muted); border-color: var(--border); }

/* Form helpers (reusable across admin forms). */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.form-help {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
}
.form-required {
    color: var(--danger);
    margin-left: 2px;
}
.form-toggle-label,
.form-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

/* Payment-provider card — admin Payment Providers page. */
.payment-provider-card {
    margin-bottom: 16px;
}
.payment-provider-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.payment-provider-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--text-primary);
}
.payment-provider-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    color: var(--text-muted);
}
.payment-provider-section {
    margin: 12px 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.payment-provider-caps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 6px 0 0 0;
    margin: 0;
}
.payment-provider-caps li {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.payment-provider-caps li.cap-on {
    color: var(--success);
    background: var(--success-bg);
    border-color: rgba(34,197,94,0.25);
}
.payment-provider-form,
.payment-provider-form-test {
    margin-top: 12px;
}
.payment-provider-form-test { margin-top: 8px; }

/* Empty row inside .tbl-clean for filtered-zero results. */
.tbl-clean td.empty {
    text-align: center;
    color: var(--text-muted);
    padding: 24px 8px;
    font-style: italic;
}

/* ================================================================ */
/* PG-TABS — reusable horizontal sub-nav for tabbed admin pages.    */
/* Used by /admin/payment-gateway/*.php (Phase 3) and any future    */
/* multi-section admin page that wants the same look. Replaces the */
/* inline-style tab strip pattern in admin/settings.php.            */
/* ================================================================ */
.pg-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.pg-tabs__link {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    flex-shrink: 0;
    transition: color 120ms ease, border-color 120ms ease;
}
.pg-tabs__link:hover { color: var(--text-primary); }
.pg-tabs__link.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.pg-stack { display: flex; flex-direction: column; gap: 16px; }
.pg-stack > * { margin: 0; }
.pg-meta {
    color: var(--text-muted);
    font-size: 12px;
}
.pg-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.pg-pill.is-on  { background: var(--success-bg); color: #16a34a; border-color: rgba(34,197,94,0.25); }
.pg-pill.is-off { background: var(--bg-card); color: var(--text-muted); }

/* Reusable layout utilities for payment-gateway pages (no inline flex/grid in PHP). */
.pg-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pg-row--between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pg-row--end { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.pg-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pg-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pg-checkbox-row { display: flex; align-items: center; gap: 8px; padding-top: 28px; font-weight: 500; }
.pg-card-title { margin: 0; font-size: 15px; font-weight: 700; }
.pg-actions { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pg-actions form { display: inline; margin: 0; }
.text-right { text-align: right; }

/* ─── Marketplace Phase 4 — vendor messaging + disputes ─────────── */
/* Vendor's bubble: left-aligned like admin, with an accent edge to distinguish. */
.message-bubble-vendor { align-self: flex-start; background: var(--bg-card); border: 1px solid var(--accent); }
.message-bubble-vendor .message-sender { justify-content: flex-start; }
.message-flagged-note { font-size: 11px; color: var(--warning, #b45309); margin-top: 6px; }
.msg-report-form { display: inline; margin: 4px 0 0; }
.btn-link-sm { background: none; border: none; padding: 0; color: var(--text-muted); font-size: 11px; text-decoration: underline; cursor: pointer; }
.btn-link-sm:hover { color: var(--accent); }
.vendor-msg-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.dispute-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dispute-timeline li { padding: 8px 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.dispute-timeline li:last-child { border-bottom: none; }
.dispute-timeline li .badge { align-self: flex-start; }
.dispute-evidence-grid { display: flex; flex-wrap: wrap; gap: 8px; }

/* ─── Marketplace Phase 5 — vendor storefront + seller card + vendor list ─── */
/* Public storefront header */
.store-header { padding: 0; overflow: hidden; margin-bottom: 20px; }
.store-banner { width: 100%; max-height: 220px; overflow: hidden; }
.store-banner img { width: 100%; height: auto; display: block; object-fit: cover; }
.store-header-main { display: flex; gap: 16px; align-items: flex-start; padding: 18px; }
.store-logo img, .store-logo-fallback { width: 80px; height: 80px; border-radius: var(--radius-md); object-fit: cover; }
.store-logo-fallback { display: flex; align-items: center; justify-content: center; background: var(--accent-glow); color: var(--accent); font-size: 32px; font-weight: 800; }
.store-header-info { flex: 1; min-width: 0; }
.store-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 6px; font-size: 24px; }
.store-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--text-muted); font-size: 13px; margin-bottom: 8px; }
.store-tagline { color: var(--text-secondary, var(--text-muted)); margin: 6px 0 12px; }
.store-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.store-social { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.store-social-link { font-size: 13px; color: var(--accent); text-decoration: none; }
.store-social-link:hover { text-decoration: underline; }
.store-mor-note { margin: 0 18px 18px; }
/* Tabs */
.store-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.store-tab { padding: 10px 16px; text-decoration: none; color: var(--text-muted); border-bottom: 2px solid transparent; font-weight: 600; font-size: 14px; }
.store-tab:hover { color: var(--text-primary); }
.store-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.store-pane[hidden] { display: none; }
.store-sort-row { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.store-prose { white-space: normal; line-height: 1.7; color: var(--text-primary); }
.store-faq-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.store-faq-item:last-child { border-bottom: none; }
.store-faq-q { margin: 0 0 6px; font-size: 15px; }
.store-faq-a { color: var(--text-muted); }
.store-contact { margin-top: 20px; }
.store-mor-fineprint { margin-top: 14px; font-style: italic; }
.store-lang-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.store-lang-tabs a { text-decoration: none; }
.store-faq-edit-row { gap: 10px; margin-bottom: 8px; }
/* Vendor list + cards (also used on homepage) */
.vendors-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.vendors-toolbar .form-input { flex: 1; min-width: 160px; }
.vendors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.vendor-card { display: flex; gap: 12px; align-items: center; padding: 14px; text-decoration: none; transition: var(--transition); }
.vendor-card:hover { background: var(--bg-card-hover); }
.vendor-card-logo img, .vendor-card-logo .store-logo-fallback { width: 56px; height: 56px; border-radius: var(--radius-sm); font-size: 22px; }
.vendor-card-info { min-width: 0; }
.vendor-card-name { font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 6px; }
.vendor-card-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* Homepage featured-sellers section */
.home-vendors { padding: 8px 0 32px; }
.home-vendors-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.home-vendors-all { color: var(--accent); text-decoration: none; font-weight: 600; font-size: 14px; }
/* Product-detail seller card (§9.1) */
.pp-seller-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; margin: 10px 0 16px; background: var(--bg-card); }
.pp-seller-card-head { display: flex; gap: 12px; align-items: center; }
.pp-seller-logo { border-radius: var(--radius-sm); object-fit: cover; }
.pp-seller-soldby { font-size: 14px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-seller-name { font-weight: 700; color: var(--text-primary); text-decoration: none; }
.pp-seller-name:hover { color: var(--accent); }
.pp-seller-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pp-seller-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pp-seller-policies { margin-top: 10px; font-size: 13px; }
.pp-seller-policies summary { cursor: pointer; color: var(--accent); }
.pp-seller-mor { margin-top: 10px; font-size: 12px; color: var(--text-muted); font-style: italic; }
/* Product card seller line (§9.2) */
.card-seller { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ─── Marketplace Phase 6 — reviews (product + vendor), replies, reporting ─── */
.rv-star { color: var(--border); font-size: 15px; line-height: 1; }
.rv-star.filled { color: #f5a623; }
.rv-stars, .rv-stars-lg { display: inline-flex; gap: 1px; }
.rv-stars-lg .rv-star { font-size: 20px; }
.rv-aggregate { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; padding: 18px; }
.rv-agg-score { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 90px; }
.rv-agg-num { font-size: 38px; font-weight: 800; line-height: 1; color: var(--text-primary); }
.rv-agg-dist { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.rv-dist-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); }
.rv-dist-label { width: 26px; }
.rv-dist-bar { flex: 1; height: 8px; background: var(--bg-input); border-radius: 4px; overflow: hidden; }
.rv-dist-fill { display: block; height: 100%; background: #f5a623; }
.rv-dist-c { width: 28px; text-align: right; }
.rv-sort-row { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.rv-list { display: flex; flex-direction: column; gap: 12px; }
.rv-card { padding: 14px; }
.rv-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-author { color: var(--text-primary); }
.rv-date { margin-left: auto; }
.rv-title { font-weight: 700; margin: 6px 0 2px; }
.rv-body { color: var(--text-secondary, var(--text-muted)); line-height: 1.6; }
.rv-reply { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--bg-input); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.rv-reply-head { font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.rv-reply-body { font-size: 13px; color: var(--text-primary); }
.rv-reply-form, .rv-report-form { margin-top: 10px; }
.rv-reply-edit { margin-top: 8px; }
.rv-reply-edit summary { cursor: pointer; color: var(--accent); font-size: 12px; }
/* Clickable star rating input */
.rv-star-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; margin-bottom: 8px; }
.rv-star-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.rv-star-pick span { font-size: 26px; color: var(--border); cursor: pointer; }
.rv-star-pick input:checked ~ span, .rv-star-pick:hover span, .rv-star-input:hover .rv-star-pick:hover span { color: #f5a623; }
.rv-star-input .rv-star-pick:hover span, .rv-star-input .rv-star-pick:hover ~ .rv-star-pick span { color: #f5a623; }
.pp-seller-rating, .store-rating-link { color: #f5a623; text-decoration: none; font-weight: 600; }
.pp-seller-rating:hover, .store-rating-link:hover { text-decoration: underline; }
.vrev-section { margin: 22px 0 10px; }
.vrev-breakdown { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vrev-breakdown li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }

/* ================================================================ */
/* RESPONSIVE ZONE — ALL MEDIA QUERIES BELOW THIS LINE              */
/*                                                                  */
/* Architecture: Desktop-first (max-width queries only)            */
/* Permitted breakpoints — NO others without updating contract:    */
/*   1024px — Tablet landscape: sidebar collapse, 3→2 grids        */
/*    768px — Tablet portrait / primary mobile: header stacks      */
/*    640px — Large phone: 2→1 column collapse, wallet QR stack    */
/*    480px — Standard phone: typography scale, compact padding    */
/*    420px — Small phone: extreme density, minimum font floor     */
/*   min-width:769px — Desktop-only rules (e.g. notif widget)     */
/*   hover:none — Touch device tap target / hover removal          */
/*                                                                  */
/* RULES (see mobile-architecture-contract.md for full spec):      */
/*   1. NEVER place @media queries above this zone                 */
/*   2. NEVER add a breakpoint value not listed above              */
/*   3. NO !important (sole exception: iOS font-size zoom in 480) */
/*   4. NO [style*="..."] attribute selectors — fix the PHP       */
/*   5. NO inline layout styles in PHP — always use CSS classes   */
/* ================================================================ */

/* --- 1024px: Tablet landscape ------------------------------------ */
@media (max-width: 1024px) {
    .dash-cards { grid-template-columns: repeat(2, 1fr); }

    .store-layout { grid-template-columns: 220px 1fr; gap: 24px; }

    .pp-grid { grid-template-columns: 1fr; gap: 32px; }
    .pp-image-col { position: static; top: auto; }
    .pp-image-col .pp-features-list { display: none; }
    .pp-features-mobile { display: grid; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
    .pp-gallery-thumbs { gap: 8px; }
    .pp-gallery-thumb { width: 64px; height: 64px; }
    .pp-related-grid { grid-template-columns: repeat(2, 1fr); }
    .cart-layout { grid-template-columns: 1fr; }
    .cart-layout > * { min-width: 0; }
    .cart-summary { position: static; }
    .pp-trust-strip { grid-template-columns: repeat(2, 1fr); }
    .pp-trust-strip-item:nth-child(2) { border-right: none; }

    .pm-name-cell { max-width: 260px; }

    .content-status-cards { grid-template-columns: repeat(2, 1fr); }
    .content-panels { grid-template-columns: repeat(2, 1fr); }
    .content-editor-layout { grid-template-columns: 1fr 280px; }
    .content-media-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    /* .content-archive-grid stays on the base auto-fill grid here (3–4 cols on tablet landscape);
       it drops to exactly 2 columns only at the ≤768 phone breakpoint below. */
    .content-featured-card { grid-template-columns: 1fr 1fr; }
    .content-related-grid { grid-template-columns: repeat(2, 1fr); }
    .content-redirect-form-grid { grid-template-columns: 1fr 1fr; }
    .footer-composer-grid { grid-template-columns: repeat(2, 1fr); }

    /* Content-page enhancement: collapse the 3-col article grid → single column.
       Order becomes: collapsible TOC, article body, swipeable products strip. */
    .article-grid,
    .article-grid--no-toc,
    .article-grid--no-rail,
    .article-grid--no-toc.article-grid--no-rail { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .article-rail { position: static; top: auto; max-height: none; overflow: visible; }
    .article-rail--toc { display: none; }            /* desktop TOC hidden; mobile collapsible used instead */
    .article-toc-mobile { display: block; margin-bottom: 22px; }
    .article-rail--products { margin-top: 30px; }
    .article-rail__compact { display: none; }                /* compact list is desktop-only */
    .article-rail__products { display: flex; flex-direction: row; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; }
    .article-rail__products::-webkit-scrollbar { display: none; }
    .article-rail__products > .product-card { flex: 0 0 42%; scroll-snap-align: start; } /* ~2.4 cards visible → obviously swipeable */
}

/* --- 768px: Tablet portrait / primary mobile --------------------- */
@media (max-width: 768px) {
    /* Quick category shortcuts → horizontally scrollable strip (fixed-width items
       overflow → scroll). JS shows the bare prev/next chevrons per scroll position. */
    .quick-cat { flex: 0 0 auto; min-width: 62px; padding: 8px 6px; }
    .quick-cat .cat-ico { width: 22px; height: 22px; }
    .quick-cats-track { gap: 2px; scroll-padding: 0 24px; }
    .footer-composer-grid { grid-template-columns: 1fr; }
    /* Global modal: full-screen on tablet/mobile for md/lg/xl */
    /* Anchor modals just below the navbar with a 12px gap + top alignment so the
       header/close (×) is always reachable (was 64px + center → iOS 100vh quirk
       pushed the × up under the navbar, making it un-tappable). */
    .hl-modal-overlay { padding: 76px 0 0; align-items: flex-start; overflow: hidden; }
    .hl-modal-dialog--md,
    .hl-modal-dialog--lg,
    .hl-modal-dialog--xl {
        width: 100vw;
        max-width: 100vw;
        max-height: calc(100vh - 76px);
        max-height: calc(100dvh - 76px); /* dvh = visible viewport (excludes mobile URL bar) */
        height: calc(100vh - 76px);
        height: calc(100dvh - 76px);
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }
    .hl-modal-header { padding: 14px 16px; }
    .hl-modal-body { padding: 16px; }
    .hl-modal-footer { padding: 12px 16px; }

    .nav-primary, .nav-right { display: none; }
    .nav-actions { display: flex; }
    .nav-toggle { display: flex; }

    .trans-toolbar__form { grid-template-columns: 1fr 1fr; }
    .trans-toolbar__actions { grid-column: 1 / -1; }
    .trans-addkey__form { grid-template-columns: 1fr; }
    .trans-group > summary { flex-wrap: wrap; }
    .trans-table__key { width: 160px; }
    .trans-table__en, .trans-table__tgt { width: auto; }
    .trans-section-head { flex-direction: column; align-items: stretch; }
    .trans-search-inline input { width: 100%; }
    .trans-filter-chips { justify-content: center; }
    .trans-table thead { display: none; }
    .trans-table, .trans-table tbody, .trans-table tr, .trans-table td { display: block; width: 100%; box-sizing: border-box; }
    .trans-table tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
    .trans-table td { border-bottom: none; padding: 4px 12px; }
    .trans-table__key { width: auto; padding-top: 8px; }
    .trans-table__en::before { content: "EN: "; font-weight: 600; color: var(--text-muted); font-size: 11px; }
    .trans-table__act { width: auto; text-align: right; padding-bottom: 8px; }

    .hero { padding: 60px 16px 30px; }
    .hero p { font-size: 16px; }

    .store-layout { grid-template-columns: 1fr; }
    /* Old mobile category dropdown removed — the quick-cats row now covers
       categories on mobile. Keep the product search visible (it lived inside the
       sidebar); hide the redundant category list. Sidebar is NOT sticky on mobile. */
    .store-sidebar {
        position: static;
        margin-bottom: 4px;
    }
    .store-sidebar .sidebar-section { display: none; }
    .sidebar-sticky { gap: 0; }

    /* Storefront filters on mobile: facets live in an off-canvas drawer; the inline
       search stays visible when the drawer is closed (unchanged behavior). */
    .filter-mobile-btn { display: inline-flex; }
    .store-toolbar { flex-wrap: wrap; gap: 10px; }
    .store-sort-label { display: none; }
    .filter-panel { display: none; }
    .store-sidebar.is-open {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 1300;
        height: 100vh; height: 100dvh; /* Safari does NOT resolve top+bottom into a height here, so the sheet collapsed to content height (~162px) and crushed the scroll body. Set it explicitly; dvh excludes the mobile URL bar so the footer stays reachable. */
        width: 88%; max-width: 360px; margin: 0;
        background: var(--bg-primary); box-shadow: var(--shadow-lg);
        display: flex; flex-direction: column; overflow: hidden;
        animation: hlDrawerSlideIn .26s cubic-bezier(.22,.61,.36,1);
    }
    .store-sidebar.is-open .filter-drawer-head { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: 14px 16px; border-bottom: 1px solid var(--border); }
    .store-sidebar.is-open .filter-drawer-foot { display: block; flex-shrink: 0; padding: 14px 16px; border-top: 1px solid var(--border); background: var(--bg-primary); }
    .store-sidebar.is-open .sidebar-sticky { flex: 1; overflow-y: auto; padding: 16px; gap: 20px; }
    .store-sidebar.is-open .sidebar-section { display: block; }
    .store-sidebar.is-open .filter-panel { display: flex; }
    .filter-drawer-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
    .filter-drawer-close { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; line-height: 0; }
    body.filter-drawer-open { overflow: hidden; }
    /* The drawer lives inside main.main-content, which is its own stacking context
       (position:relative; z-index:1), so the drawer's z-index:1300 was trapped BELOW the
       body-level backdrop (z-1290) and the navbar — the whole sheet rendered UNDER the dim
       layer (dark facets vanished; only the bright button showed → "dim but empty"). While
       the drawer is open, drop that context so the drawer's z-1300 joins the root stacking
       order and sits above the backdrop + navbar (page content stays dimmed by the backdrop). */
    body.filter-drawer-open .main-content { z-index: auto; }
    .filter-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1290; animation: hlBackdropFade .22s ease; }

    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .wishlist-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 200px)); gap: 12px; }
    .checkout-grid { grid-template-columns: 1fr; }
    .checkout-grid > div { min-width: 0; }

    /* Order summary — ensure name/price don't overflow */
    .order-summary-item { gap: 10px; }
    .order-summary-item > span:first-child {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .order-summary-item > span:last-child {
        flex-shrink: 0;
        text-align: right;
    }
    .admin-layout { grid-template-columns: 1fr; }
    /* Admin sidebar → off-canvas drawer on mobile (mirrors the vendor drawer) */
    .admin-sidebar {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 264px;
        max-width: 82vw;
        margin: 0;
        padding-top: 16px;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1300;
        overflow-y: auto;
    }
    .admin-layout.drawer-open .admin-sidebar {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    }
    .admin-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1290;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    .admin-layout.drawer-open .admin-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
    .admin-drawer-toggle { display: inline-flex; }
    .admin-drawer-close { display: inline-flex; }
    .admin-sidebar-toggle { display: none; }
    .admin-layout .admin-main { padding-top: 64px; }
    /* Force full labels in the drawer even if the desktop rail was collapsed */
    .admin-layout.sidebar-collapsed .admin-sidebar { padding-left: 12px; padding-right: 12px; cursor: auto; }
    .admin-layout.sidebar-collapsed .admin-nav-item { justify-content: flex-start; gap: 12px; font-size: 14px; padding: 10px 12px; }
    .admin-layout.sidebar-collapsed .admin-nav-item > span { display: inline-flex; }
    .admin-layout.sidebar-collapsed .admin-nav-group-header { display: flex; }
    .vr-review-cols { grid-template-columns: 1fr; }
    .mf-cols { grid-template-columns: 1fr; }
    .mf-gate-side { align-items: flex-start; }

    .stats-grid { grid-template-columns: 1fr 1fr; }

    .auth-card { padding: 28px; }

    table { font-size: 12px; }
    th, td { padding: 8px 10px; }

    .footer-content { flex-direction: column; gap: 20px; }
    .footer-columns { flex-wrap: wrap; gap: 32px; }

    /* Contact form 2-col grids — stack on tablet/mobile */
    .contact-form-row { grid-template-columns: 1fr; }

    /* Legal pages — reduce padding on smaller screens */
    .legal-page { padding: 24px 16px; }
    .legal-page h1 { font-size: 22px; }

    .pp-review-form-wrap { padding: 20px; }
    .pp-review-item { padding: 16px; }
    .pp-review-top { flex-direction: column; align-items: flex-start; gap: 8px; }
    .pp-reviews-avg { font-size: 22px; }
    .pp-star-inputs label svg { width: 28px; height: 28px; }
    .rv-modal { max-width: 100%; max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); border-radius: 0; }
    .rv-modal-header { padding: 16px; }
    /* Scroll the reviews INSIDE the modal (header stays pinned) instead of letting
       the overlay scroll the header up under the navbar. */
    .rv-modal-columns { flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .rv-modal-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); padding: 16px; flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
    .rv-sidebar-score { flex-direction: row; gap: 10px; padding-bottom: 0; border-bottom: none; }
    .rv-sidebar-score .rv-big-num { font-size: 28px; }
    .rv-snapshot-bars { width: 100%; }
    .rv-sidebar-filters { width: 100%; }
    .rv-modal-main { padding: 12px 16px 20px; }
    .rv-big-num { font-size: 26px; }
    .rv-filters { gap: 4px; }
    .rv-filter-btn { padding: 5px 10px; font-size: 11px; }
    .rv-preview-card { padding: 12px; }
    .rv-tab-columns { flex-direction: column; gap: 16px; }
    .rv-tab-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px; }
    .rv-tab-sidebar .rv-sidebar-score { flex-direction: row; gap: 10px; padding-bottom: 0; border-bottom: none; }
    .rv-tab-sidebar .rv-sidebar-score .rv-big-num { font-size: 28px; }
    .rv-tab-sidebar .rv-snapshot-bars { width: 100%; }
    .rv-tab-sidebar .rv-view-all-btn { flex: 1; }
    .rv-tab-sidebar .rv-write-btn { flex: 1; }

    .od-grid { grid-template-columns: 1fr; }
    .od-sidebar { position: static; }
    .od-breadcrumb-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .od-header-actions { width: 100%; justify-content: flex-start; }
    .od-selector-chip { width: 140px; }

    .inbox-item { padding: 12px 14px; gap: 10px; }
    .inbox-item-icon { width: 32px; height: 32px; }
    .message-bubble { max-width: 92%; }
    .thread-header h1 { font-size: 18px; }
    .order-context-item { gap: 8px; }

    .notif-wrap:not(.notif-wrap-mobile) { display: none; }
    .notif-wrap-mobile .notif-dropdown {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - 64px);
        border-radius: 0 0 12px 12px;
    }
    /* When dropdown is portaled to body on mobile */
    body > .notif-dropdown.show {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - 64px);
        border-radius: 0 0 12px 12px;
        z-index: 1001;
        display: flex;            /* keep the column layout so .notif-list (flex:1) can scroll */
        flex-direction: column;
    }

    .settings-layout { gap: 24px; }
    .settings-nav { width: 180px; }
    .settings-content { max-width: 100%; }

    .order-list { gap: 10px; }

    .filter-bar {
        padding: 12px 16px;
        gap: 6px;
    }
    .filter-bar-search input { width: 140px; }
    .filter-bar-search input:focus { width: 160px; }
    .order-list-header { padding: 16px; }

    .license-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px 16px;
    }
    .license-col-meta { justify-content: flex-start; }
    .license-col-actions { justify-content: flex-start; }
    .license-expand-inner {
        grid-template-columns: 1fr;
        padding: 14px 16px 18px;
    }
    .license-instructions-inner {
        padding: 14px 16px 18px;
    }

    .pm-overlay { padding: 8px; }
    .pm-dialog { max-height: 95vh; }
    .pm-header { padding: 14px 16px; }
    .pm-tabs { padding: 0 16px; }
    .pm-tab { padding: 8px 12px; font-size: 12px; }
    .pm-body { padding: 16px; }
    .pm-footer { padding: 12px 16px; }
    .pm-name-cell { max-width: 160px; }

    .verify-banner-inner {
        padding: 8px 16px;
        font-size: 12px;
        flex-wrap: wrap;
    }
    .verify-banner-link { margin-left: 0; }

    .content-status-cards { grid-template-columns: repeat(2, 1fr); }
    .content-panels { grid-template-columns: 1fr; }
    .content-header-actions { flex-direction: column; align-items: stretch; }
    .content-editor-layout { grid-template-columns: 1fr; }
    .content-editor-sidebar { order: -1; }
    .content-filters-form { flex-direction: column; }
    .content-filter-search { min-width: 100%; }
    .content-media-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .content-archive-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .content-featured-card { grid-template-columns: 1fr; }
    .content-featured-card-body { padding: 20px; }
    .content-single-title { font-size: 26px; }
    .content-single { padding: 30px 16px 48px; }
    .content-related-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .content-redirect-form-grid { grid-template-columns: 1fr; }
    .content-author-box { flex-direction: column; text-align: center; align-items: center; }

    /* Content-page enhancement: bottom related-content → single-column horizontal cards
       (image left, title/meta right) per §8.6. Scoped so the archive listing is untouched. */
    .article-related .content-related-grid { grid-template-columns: 1fr; gap: 12px; }
    .article-related .content-card { flex-direction: row; align-items: stretch; }
    .article-related .content-card .content-card-img { width: 116px; flex: 0 0 116px; aspect-ratio: 1 / 1; }
    .article-related .content-card .content-card-body { padding: 12px; }
    .article-inline-product { margin: 24px 0; padding: 14px 16px; }

    /* Phase 2: Comments */
    .content-comment-replies { margin-left: 24px; padding-left: 12px; }
    .content-comment-form-guest-fields { grid-template-columns: 1fr; }
    .content-comments-toolbar { flex-direction: column; }
    .content-comments-search-form { width: 100%; }
    .content-comments-search-form .form-control { max-width: 100%; }
    .content-comment-header { flex-direction: column; gap: 4px; }

    /* Multilingual — hide desktop switcher on mobile, use mobile-menu grid instead */
    .lang-switcher { display: none; }
    .lang-suggest-inner { font-size: 12px; padding: 8px 12px; }
    .lang-suggest-text { flex-basis: 100%; }
    .footer-lang-bar { gap: 6px; padding: 12px 0 6px; }
    .footer-lang-option { padding: 5px 10px; font-size: 11px; }
}

/* --- 640px: Large phone ------------------------------------------ */
@media (max-width: 640px) {
    /* A1: settings tables (login activity, transactions) reflow to stacked cards on mobile */
    .settings-table-wrap { overflow-x: visible; margin: 0; padding: 0; }
    .settings-table-scroll { max-height: none; overflow: visible; }
    .settings-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .settings-table, .settings-table tbody, .settings-table tr, .settings-table td { display: block; width: 100%; }
    .settings-table tr { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 10px; padding: 4px 14px; }
    .settings-table td { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; border: none; text-align: right; }
    .settings-table td::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.04em; text-align: left; flex-shrink: 0; }
    /* Footer "we accept" marquee: stack the label above the scrolling logos */
    .footer-payments { flex-direction: column; align-items: stretch; gap: 10px; }
    .footer-payments-label { text-align: center; }

    /* Payment-gateway admin pages: collapse multi-column form rows */
    .pg-grid-2,
    .pg-grid-3 { grid-template-columns: 1fr; }

    /* Admin user modal compaction (was embedded in admin/users.php) */
    .um-modal { max-height: 95vh; border-radius: 12px; }
    .um-stats { grid-template-columns: repeat(2, 1fr); }
    .um-form-grid,
    .um-bal-cards,
    .um-info-grid { grid-template-columns: 1fr; }
    .um-tabs { padding: 0 12px; }
    .um-body { padding: 16px; }

    /* Contact info block: 2-col → 1-col on small phones */
    .contact-info-grid { grid-template-columns: 1fr; }

    /* Cookie banner: stack text + buttons vertically */
    .cookie-banner-inner { flex-direction: column; align-items: flex-start; }
    .cookie-banner-actions { width: 100%; justify-content: flex-end; }

    .dash-cards { grid-template-columns: 1fr; }
    .dash-row-header { padding: 12px 14px; font-size: 14px; }
    .dash-cards { padding: 0 14px 14px; gap: 10px; }

    /* Crypto wallet section — stack vertically */
    .wallet-section .wallet-qr-row {
        flex-direction: column;
        align-items: center;
    }
    .wallet-section .wallet-qr-img {
        margin-bottom: 4px;
    }
    .wallet-section .wallet-qr-info {
        width: 100%;
        text-align: center;
    }
    .wallet-section .wallet-addr-row {
        justify-content: center;
    }

    /* 2FA code input */
    .input-otp { letter-spacing: 3px; font-size: 1.2rem; }

    /* Balance / topup grid */
    .balance-grid { grid-template-columns: 1fr; }

    .pp-title { font-size: 26px; }
    .pp-buy-price { font-size: 32px; }
    .pp-tab-nav { gap: 4px; padding: 5px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .pp-tab-nav::-webkit-scrollbar { display: none; }
    .pp-tab { padding: 9px 13px; font-size: 13px; flex: 0 0 auto; }
    /* Mobile sticky Add-to-Cart bar (F1) — respects iOS safe-area; sits below the cookie banner (z 9999) */
    /* Mobile: full-width edge-to-edge bar (overrides the desktop floating card) */
    .pp-sticky-buy { right: 0; left: 0; bottom: 0; width: auto; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border: none; border-top: 1px solid var(--border-hover); border-radius: 0; box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.45); transform: translateY(115%); }
    .pp-sticky-info { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.05; flex-shrink: 0; }
    .pp-buy-btn.pp-sticky-cta { flex: 1 1 auto; width: auto; min-height: 48px; padding: 0 16px; }
    .pp-trust-badges { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .pp-trust-badge { padding: 10px 4px; font-size: 10px; }
    .pp-trust-strip { grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px; }
    .pp-trust-strip-item { border-right: none; padding: 12px 12px; }
    .pp-trust-strip-icon { width: 36px; height: 36px; }
    .pp-trust-strip-icon svg { width: 18px; height: 18px; }
    .pp-trust-strip-text strong { font-size: 12.5px; }
    .pp-trust-strip-text span { font-size: 11px; }
    .pp-related-grid { grid-template-columns: repeat(2, 1fr); }
    .cart-item { grid-template-columns: 48px 1fr auto; gap: 10px; padding: 12px; }
    .cart-item-img, .cart-item-img img, .cart-item-placeholder { width: 48px; height: 48px; }
    .cart-item-subtotal { grid-column: 3; }
    .cart-item-qty { grid-column: 2; grid-row: 2; }
    .cart-item-remove { grid-column: 3; grid-row: 2; justify-self: end; }

    .od-title { font-size: 20px; }
    .od-item { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
    .od-item-price { width: 100%; text-align: right; }
    .od-item-expand { padding: 0 14px 12px 14px; }
    .od-card-header { padding: 12px 14px; }
    .od-summary, .od-details { padding: 12px 14px; }
    .od-license { padding: 12px 14px; }
    .od-license-row { flex-wrap: wrap; }

    .settings-shell { padding: 16px 16px 40px; }
    .settings-header { margin-bottom: 16px; }
    .settings-header-title { font-size: 1.25rem; }
    .settings-layout {
        flex-direction: column;
        gap: 0;
    }

    /* Hide sidebar on mobile, show mobile nav */
    .settings-nav { display: none; }
    .settings-mobile-nav {
        display: flex;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px;
        margin-bottom: 16px;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent 100%);
                mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent 100%);
    }
    .settings-mobile-nav::-webkit-scrollbar { display: none; }
    .settings-mobile-nav-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        font-size: .8rem;
        font-weight: 500;
        color: var(--text-secondary);
        text-decoration: none;
        border-radius: 100px;
        white-space: nowrap;
        border: 1px solid var(--border);
        background: transparent;
        transition: all .15s;
        flex-shrink: 0;
    }
    .settings-mobile-nav-item.active {
        color: var(--accent);
        background: var(--accent-glow);
        border-color: rgba(255, 255, 255,.2);
    }
    .settings-mobile-nav-item--danger { color: var(--danger); }
    .settings-mobile-nav-item--danger.active {
        color: var(--danger);
        background: var(--danger-bg);
        border-color: rgba(239,68,68,.2);
    }
    .settings-mobile-nav-item svg { width: 14px; height: 14px; }

    .settings-content { max-width: 100%; }
    .settings-card { padding: 18px 14px; }
    .settings-form-grid { grid-template-columns: 1fr; }
    .settings-avatar-row { flex-direction: column; text-align: center; }
    .settings-avatar-actions { align-items: center; }

    /* Admin multilingual (Phase 2) — stack EN preview on narrow screens */
    .i18n-en-preview { grid-template-columns: 1fr; gap: 6px 0; }
    .i18n-en-preview dt { margin-top: 6px; }
    .i18n-tab { padding: 8px 10px; font-size: 12px; }
    .i18n-tab-label { display: none; }
    .i18n-pane { padding: 14px; }
    /* Billing summary — turn OFF grid on phones; stack as plain blocks.
       Root cause of the overflow: a grid `1fr` track resolves to
       minmax(auto, 1fr); its `auto` minimum grew to the long total's width and
       forced the card wider than the screen (item min-width:0 didn't reliably
       cap the track). Block boxes always shrink to their container, so the
       values wrap and stay fully on-screen. */
    .settings-billing-summary { display: block; }
    .settings-billing-stat { padding: 14px 16px; min-width: 0; overflow: hidden; margin-bottom: 10px; }
    .settings-billing-stat:last-child { margin-bottom: 0; }
    .settings-billing-stat-value { font-size: 1.05rem; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
    .settings-table-wrap { margin: 0 -14px; padding: 0 14px; }
    .tfa-method-header { flex-wrap: wrap; }
    .tfa-method-note { padding-left: 0; }
    .tfa-setup-step { flex-direction: column; gap: 6px; }
    .profile-2fa-codes { grid-template-columns: repeat(2, 1fr); }
    .settings-card-footer { justify-content: stretch; }
    .settings-card-footer .btn { flex: 1; justify-content: center; }

    /* Q&A Admin responsive 768 */
    .qa-filter-form { flex-direction: column; }
    .qa-filter-select { max-width: 100%; }
    .qa-question-header { flex-direction: column; gap: 4px; }
    .qa-answer-header { flex-direction: column; gap: 4px; }

    /* Q&A Public responsive 768 */
    #pp-panel-qa .qa-summary-bar { flex-direction: column; gap: 10px; align-items: flex-start; }
    #pp-panel-qa .qa-question-meta { font-size: 12px; }
}

/* --- 480px: Standard phone --------------------------------------- */
@media (max-width: 480px) {
    /* Global modal: stack footer buttons full-width */
    .hl-modal-footer { flex-direction: column-reverse; align-items: stretch; }
    .hl-modal-footer > button,
    .hl-modal-footer > .btn,
    .hl-modal-footer > a { width: 100%; }
    .hl-modal-title { font-size: 1rem; }
    /* Close button must meet the 44px tap-target minimum (shared by every modal) */
    .hl-modal-close { width: 44px; height: 44px; }

    /* Pg-tabs: reduce padding on mobile so all 6 tabs fit one swipe */
    .pg-tabs__link { padding: 8px 12px; font-size: 12px; }

    /* Dashboard stat cards — 2×2 square-ish grid on mobile (was 1-per-row, too tall) */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-card { padding: 16px 12px; min-height: 92px; display: flex; flex-direction: column; justify-content: center; }
    .stat-value { font-size: 21px; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .wishlist-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .store-toolbar-title { font-size: 16px; }
    .card-wishlist-float { width: 34px; height: 34px; border-radius: 50%; }
    .card-wishlist-float svg { width: 13px; height: 13px; }
    .card-btn { padding: 8px 8px; font-size: 11px; }

    /* === Phase 1: Homepage + Shared === */
    .container { padding: 0 16px; }

    /* iOS zoom prevention — inputs below 16px trigger auto-zoom */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="tel"], input[type="url"],
    input[type="search"], textarea, select {
        font-size: 16px !important;
    }
    .hero { padding: 48px 12px 24px; }
    .hero h1 { font-size: clamp(26px, 7vw, 36px); }
    .hero p { font-size: 15px; }
    .hero-badge { font-size: 12px; padding: 5px 12px; margin-bottom: 16px; }

    /* Navbar — bigger tap targets on small screens */
    .nav-toggle { padding: 8px; }
    .nav-toggle span { width: 22px; }
    .nav-action-cart { width: 40px; height: 40px; }

    /* Footer — tighter gaps */
    .footer-columns { gap: 24px 32px; }
    .footer { padding: 28px 0; }
    .footer-content { gap: 16px; }

    /* Toast — full-width on small screens */
    .toast-container { right: 12px; left: 12px; top: 72px; }
    .toast { max-width: 100%; }

    /* Auth card — fit within 320px */
    .auth-card { max-width: 100%; padding: 24px 20px; }
    .auth-header h1 { font-size: 20px; }
    .auth-header p { font-size: 13px; }

    /* Category tabs — smaller on mobile */
    .category-tabs { gap: 6px; }
    .category-tab { font-size: 12px; padding: 7px 12px; }

    /* Search dropdown — shorter on small screens */
    .search-dropdown { max-height: 240px; }

    /* Mobile menu — tighter padding */
    .mobile-menu { padding: 12px 16px; }
    .mobile-link { padding: 10px 12px; font-size: 14px; }

    /* Notification dropdown — stay within viewport */
    .notif-dropdown { right: -8px; left: auto; min-width: 280px; max-width: calc(100vw - 24px); }

    /* Dashboard page padding */
    .dashboard-page { padding: 24px 0 60px; }

    /* Checkout grid fix */
    .checkout-summary { width: 100%; }

    /* === Phase 2: Product Detail Page === */
    /* Breadcrumb — compact on mobile */
    .pp-breadcrumb-inner { padding: 10px 0; font-size: 12px; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
    .pp-breadcrumb-inner svg { width: 10px; height: 10px; }
    .pp-breadcrumb-inner a { white-space: nowrap; }
    .pp-breadcrumb-inner span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
    .pp-trust-strip { grid-template-columns: 1fr; gap: 2px; padding: 6px; }
    .pp-trust-strip-item { border-right: none; padding: 13px 12px; }
    .pp-related-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .pp-related-info { padding: 10px; }
    .pp-related-name { font-size: 12px; }
    .pp-related-actions { padding: 0 10px 10px; }
    .pp-related-cart-btn { padding: 7px 10px; font-size: 11px; }
    .pp-related-section { margin-top: 44px; padding-top: 28px; }
    .pp-related-title { font-size: 19px; margin-bottom: 16px; }
    .pp-main { padding: 24px 0 56px; }
    .pp-title { font-size: 23px; }
    .pp-buy-card { padding: 16px; }
    .pp-buy-price { font-size: 30px; }
    .pp-buy-btn { padding: 14px; font-size: 15px; }
    .pp-buy-btn.pp-buy-btn-secondary { padding: 13px; }
    .pp-buy-btn.pp-buy-now-btn { padding: 16px; font-size: 16px; }
    .pp-qty-row { gap: 10px; margin-bottom: 14px; }
    .pp-qty-controls { height: 44px; }
    .pp-qty-btn { width: 44px; height: 44px; }
    .pp-qty-input { width: 46px; height: 44px; }
    .pp-image-wrap img { aspect-ratio: 16/10; }
    .pp-gallery-thumb { width: 56px; height: 56px; }
    .pp-tab-nav { gap: 4px; padding: 5px; }
    .pp-tab { padding: 9px 12px; font-size: 12.5px; }
    /* .pp-keywords-bar and .pp-keyword-tag are visually hidden globally — no overrides needed */

    /* Review modal on small screens — keep the 76px navbar gap. Was padding:8px,
       which (being later than the @768 rule) put the modal header UNDER the
       fixed navbar on phones. */
    .rv-modal-overlay { padding: 76px 0 0; align-items: flex-start; }
    .rv-modal { border-radius: 0; }
    .rv-modal-sidebar { padding: 12px; gap: 8px; }
    .rv-modal-main { padding: 12px; }
    .rv-review-card { padding: 12px; }
    .rv-preview-card { padding: 10px; }
    .rv-tab-sidebar { padding: 12px; gap: 8px; }

    /* === Phase 3: Cart Page === */
    .cart-page { padding: 24px 0 40px; }
    .cart-page .page-header h1 { font-size: 22px; }
    .cart-item {
        grid-template-columns: 48px 1fr auto;
        grid-template-rows: auto auto;
        gap: 6px 8px;
        padding: 10px 12px;
    }
    .cart-item-img { width: 48px; height: 48px; grid-row: 1 / 3; }
    .cart-item-img img { width: 48px; height: 48px; }
    .cart-item-info { grid-column: 2; grid-row: 1; min-width: 0; }
    .cart-item-subtotal { grid-column: 3; grid-row: 1; font-size: 13px; min-width: auto; }
    .cart-item-qty { grid-column: 2; grid-row: 2; }
    .cart-item-remove { grid-column: 3; grid-row: 2; justify-self: end; }
    .cart-item-name { font-size: 13px; }
    .cart-actions { padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
    /* Cart controls — meet tap-target minimum (base qty/remove were ~28px) */
    .cart-qty-form .pp-qty-btn { width: 40px; height: 40px; }
    .cart-qty-form .pp-qty-input { height: 40px; }
    .btn-remove { width: 44px; height: 44px; }

    /* === Phase 3: Checkout Page === */
    .checkout-page { padding: 24px 0 40px; }
    .checkout-grid > div { min-width: 0; }
    .checkout-product { padding: 20px 16px; overflow: hidden; word-break: break-word; }
    .checkout-summary { padding: 20px 16px; overflow: hidden; }
    /* Stay 2-up on mobile, just tighter — never one full-width card. */
    .payment-methods, .payment-methods--rich { gap: 7px; }
    .payment-option { padding: 10px; gap: 3px; }
    .po-ic { width: 34px; height: 34px; border-radius: 8px; }
    .po-ic svg { width: 18px; height: 18px; }
    .po-ic img { width: 20px; height: 20px; }
    .radio-custom { width: 18px; height: 18px; }
    .payment-label { font-size: 13.5px; }
    .payment-desc { font-size: 11.5px; }
    .po-chips { padding-top: 2px; }
    .po-chips .pay-brand img { height: 12px; }
    .po-chips .pay-coin svg, .po-chips .pay-coin-fallback { width: 19px; height: 19px; }

    /* Checkout: order summary — separate product name from price */
    .order-summary-item { gap: 12px; font-size: 13px; }
    .order-summary-item > span:first-child {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .order-summary-item > span:last-child {
        flex-shrink: 0;
        text-align: right;
    }

    /* Checkout: coupon input row */
    #applyCouponBtn {
        min-width: 60px;
        font-size: 13px;
        padding: 8px 12px;
    }
    .coupon-input {
        min-width: 0;
        font-size: 14px;
    }

    /* === Phase 5: Orders Page === */
    .order-row { gap: 6px; padding: 10px 12px; }
    .order-num { font-size: 13px; }
    .order-product-name { font-size: 12px; }
    .order-amount { font-size: 13px; }
    .order-date { font-size: 10px; }
    .filter-bar { padding: 10px 12px; gap: 4px; }
    .filter-bar-search input { width: 120px; font-size: 12px; }
    .filter-bar-search input:focus { width: 140px; }

    /* === Phase 5: Order Detail Page === */
    .od-title { font-size: 18px; }
    .od-card-header { padding: 10px 12px; font-size: 13px; }
    .od-item { padding: 10px 12px; gap: 10px; }
    .od-item-expand { padding: 0 12px 10px 12px; }
    .od-summary, .od-details { padding: 10px 12px; }
    .od-license { padding: 10px 12px; }
    .od-license-label { min-width: 56px; font-size: 11px; }
    .od-license-row .license-key { font-size: 12px; }
    .od-actions .btn { font-size: 12px; padding: 8px 12px; }
    .od-selector { padding: 8px 10px; gap: 6px; }
    .od-selector-chip { width: 130px; padding: 7px 8px; gap: 6px; }
    .od-selector-chip-img, .od-selector-chip-img--placeholder { width: 28px; height: 28px; }
    .od-panel-meta { padding: 10px 12px; }
    .od-cancel-reason { padding: 8px 12px; }
    .od-cancelled-banner { margin: 8px 12px 0; }

    /* === Phase 5: Dashboard / License List === */
    .license-head { padding: 10px 14px 0; }
    .license-cred-line { padding: 6px 14px 12px; }
    .license-product-name { font-size: 13px; }
    .license-toggle-btn { padding: 10px 12px; font-size: 11px; min-height: 44px; }
    /* Credential copy button was an icon-only ~14px tap target */
    .cred-value .copy-btn { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; margin: -4px -4px -4px 0; }
    .hl-cred-btn { width: 40px; height: 40px; }
    .license-expand-inner { padding: 12px 14px 16px; }
    .cred-value { font-size: 12px; padding: 6px 10px; }
    .license-key-inline { font-size: 11px; padding: 4px 8px; }

    /* === Phase 6: Profile Page === */
    .checkout-product h2 { font-size: 18px; }

    /* === Phase 6: Messages / Inbox === */
    .inbox-tabs { gap: 2px; padding: 3px; }
    .inbox-tab { padding: 6px 10px; font-size: 12px; }
    .inbox-item { padding: 10px 12px; gap: 10px; }
    .inbox-item-icon { width: 32px; height: 32px; }
    .inbox-item-subject { font-size: 13px; }
    .inbox-item-preview { font-size: 12px; }
    .thread-order-context { padding: 12px; }
    .message-bubble { padding: 10px 12px; font-size: 13px; }

    /* === Phase 7: Topup + Withdraw === */
    .topup-preset-grid { grid-template-columns: repeat(3, 1fr); }

    /* === Phase 8: Static / Legal Pages === */
    .faq-item { padding: 16px; }

    /* === Phase 9: Wishlist + Tasks === */
    .tasks-card { padding: 16px; }

    /* === Global: word-break for long content === */
    /* Let long keys/passwords wrap instead of clipping (base sets nowrap+ellipsis) */
    .cred-value span,
    .od-license-row .license-key,
    .license-key-inline code { word-break: break-all; white-space: normal; }
    .cred-value { align-items: flex-start; }

 .ml-fields { grid-template-columns: 1fr; } .manual-license-modal { max-width: 100%; } 

    .inbox-tabs { gap: 2px; padding: 3px; }
    .inbox-tab { padding: 6px 10px; font-size: 12px; }
    .inbox-item { padding: 10px 12px; }
    .message-bubble { max-width: 95%; padding: 10px 12px; }

    .order-row { padding: 12px 14px; }
    .order-view-btn span { display: none; }
    .order-date { min-width: auto; }

    .content-status-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .content-stat-count { font-size: 24px; }
    .content-quick-stats { gap: 8px; }
    .content-quick-stat { padding: 8px 12px; }
    .content-title-input { font-size: 17px; padding: 10px 12px; }
    .content-body-textarea { min-height: 280px; font-size: 13px; }
    .content-media-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .content-drop-zone { padding: 24px 16px; }
    .content-pagination a, .content-pagination span { width: 28px; height: 28px; font-size: 12px; }
    /* Blog/Guides cards — 2 per row on mobile (like product cards), not 1 huge card */
    .content-archive-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .content-card-body { padding: 12px; }
    .content-card-title { font-size: 14px; }
    .content-card-excerpt { font-size: 12.5px; -webkit-line-clamp: 2; line-clamp: 2; }
    .content-card-meta { font-size: 11px; gap: 6px; flex-wrap: wrap; }
    .content-archive { padding: 24px 14px; }
    .content-archive-header h1 { font-size: 22px; }
    .content-single-title { font-size: 22px; }
    .content-single-body { font-size: 15px; }
    .content-single-body h2 { font-size: 20px; }
    .content-single-body h3 { font-size: 17px; }
    .content-single-meta { gap: 10px; font-size: 13px; }
    .content-related-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }  /* gallery view like the main listing (was 1 big full-width card) */
    .content-product-guide-thumb { width: 64px; height: 48px; }
    .content-archive-pagination a, .content-archive-pagination span { min-width: 32px; height: 32px; font-size: 13px; }
    .content-cat-bar { gap: 6px; }
    .content-cat-pill { padding: 4px 10px; font-size: 12px; }

    /* Phase 2: Comments */
    .content-comment-replies { margin-left: 12px; padding-left: 8px; }
    .content-comment-pub-avatar, .content-comment-pub-avatar-placeholder { width: 28px; height: 28px; font-size: 12px; }
    .content-comment-form-wrap { padding: 16px; }
    .content-comments-section { padding-top: 24px; margin-top: 24px; }
    .content-comments-bulk-bar { flex-wrap: wrap; }

    /* Q&A Admin responsive 480 */
    .qa-question-top { flex-wrap: wrap; gap: 8px; padding: 12px; }
    .qa-vote-badge { flex-direction: row; min-width: auto; padding: 4px 8px; }
    .qa-question-footer { flex-direction: column; gap: 4px; align-items: flex-start; }

    /* Q&A Public responsive 480 */
    #pp-panel-qa .qa-question-item { gap: 10px; padding: 14px; }
    #pp-panel-qa .qa-vote-btn { width: 34px; height: 30px; }
    #pp-panel-qa .qa-vote-count { font-size: 13px; }
    #pp-panel-qa .qa-question-body { font-size: 14px; }
    #pp-panel-qa .qa-ask-form-wrap { padding: 14px; }
    #pp-panel-qa .qa-answers-wrap { padding-left: 10px; }
}

/* ================================================================ */
/* Product Add Page — pap-* (Phase 3)                             */
/* ================================================================ */

/* Utility grid helpers used only on this page */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.form-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; }
.form-card { border: 1px solid var(--border); border-radius: 10px; padding: 16px; background: var(--bg-secondary); }
.pap-checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; }

/* Page shell — pap-page IS the scroll container.
   body { overflow-x:hidden } coerces body to overflow-y:auto, making body
   an intermediate scroll container that swallows sticky — so we can't rely
   on the viewport. Instead we give pap-page a fixed height + overflow-y:auto
   so it becomes the definitive scroll container. All sticky top offsets
   inside this page are now relative to pap-page's scroll port.
   overflow-x:clip prevents H bleed without coercing overflow-y. */
.pap-page {
    padding: 0 !important;
    height: calc(100vh - 64px);  /* fill viewport below fixed 64px navbar */
    min-height: 0;               /* grid item: own the scroll instead of growing to content */
    overflow: auto;              /* both axes auto — sticky-safe. Do NOT set overflow-x: clip/hidden here: WebKit/Safari then breaks position:sticky for ALL descendants (status bar, section nav, preview, lang tabs), so they scroll away instead of pinning. */
}

/* Editor pages (product-add, content-add): keep the WHOLE layout inside the
   viewport so the sidebar and the editor pane each scroll on their own — never
   the window. A tall (expanded) admin sidebar, the .main-content bottom padding,
   or the footer used to grow the page past the viewport; that scrolled the
   window and dragged the sticky frame (status bar / nav / preview / lang tabs)
   out of view. Scoped via :has() so every other admin page is untouched, and it
   degrades to the prior behaviour where :has() is unsupported. */
.main-content:has(.pap-page) { padding-bottom: 0; min-height: 0; }
.main-content:has(.pap-page) + .footer { display: none; }
.admin-layout:has(.pap-page) { height: calc(100vh - 64px); min-height: 0; overflow: hidden; }
.admin-layout:has(.pap-page) .admin-sidebar { margin-top: 0; padding-top: 16px; overflow-y: auto; }

/* Status bar — top:0 because scroll container is pap-page (not window) */
.pap-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;  /* top of pap-page scroll port */
    z-index: 50;
    flex-wrap: wrap;
    min-height: 56px;
}
.pap-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-secondary);
}
.pap-breadcrumb a { color: var(--accent); text-decoration: none; }
.pap-breadcrumb a:hover { text-decoration: underline; }
.pap-breadcrumb-sep { color: var(--text-muted); }
.pap-status-right { display: flex; align-items: center; gap: 12px; }
.pap-autosave-status {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 90px;
    transition: color 0.2s;
}
.pap-autosave-status.is-saving  { color: var(--accent); }
.pap-autosave-status.is-saved   { color: var(--success); }
.pap-autosave-status.is-error   { color: var(--danger); }
.pap-autosave-status.is-conflict { color: var(--warning); }

/* 3-col layout */
.pap-layout {
    display: grid;
    grid-template-columns: 200px 1fr 300px;
    min-height: calc(100vh - 120px); /* 64px navbar + 56px status bar */
}

/* Left nav — plain grid column, no overflow, no sticky.
   overflow must be absent so the inner .pap-nav-sticky can be sticky. */
.pap-nav {
    border-right: 1px solid var(--border);
}
/* Inner sticky wrapper — top:56px = below 56px status bar (relative to pap-page scroll port) */
.pap-nav-sticky {
    position: sticky;
    top: 56px;
    max-height: calc(100vh - 64px - 56px); /* pap-page height minus status bar */
    overflow-y: auto;
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pap-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    min-height: 44px;
}
.pap-nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.pap-nav-item.is-active { background: var(--bg-hover); color: var(--accent); font-weight: 600; }
.pap-nav-icon { font-size: 13px; width: 18px; flex-shrink: 0; text-align: center; }
.pap-nav-item.is-complete .pap-nav-icon { color: var(--success); }
.pap-nav-item.is-missing  .pap-nav-icon { color: var(--danger); }

/* Center form */
.pap-form {
    padding: 24px;
    border-right: 1px solid var(--border);
}
.pap-section { margin-bottom: 36px; scroll-margin-top: 110px; } /* 56px status-bar + 46px lang-tabs + 8px gap */
.pap-section-header {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

/* Slug conflict warning */
.pap-slug-conflict {
    font-size: 12px;
    color: var(--danger);
    background: var(--danger-bg);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 16px;
    display: none;
}
.pap-slug-conflict.visible { display: block; }

/* Image section */
.pap-img-preview-wrap { min-height: 80px; }
.pap-img-placeholder {
    padding: 24px;
    text-align: center;
    border: 2px dashed var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-muted);
}
.pap-img-status {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    margin-top: 8px;
}
.pap-img-status.has-image { background: var(--success-bg); color: var(--success); }
.pap-img-status.no-image  { background: var(--bg-secondary); color: var(--text-muted); }

/* Right preview panel — plain grid column, no overflow, no sticky */
.pap-preview {
    /* plain grid column — inner wrapper handles sticky */
}
/* Inner sticky wrapper — top:56px relative to pap-page scroll port */
.pap-preview-sticky {
    position: sticky;
    top: 56px;
    max-height: calc(100vh - 64px - 56px); /* pap-page height minus status bar */
    overflow-y: auto;
    padding: 16px;
}
.pap-preview-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.pap-card-preview {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-primary);
    margin-bottom: 16px;
}
.pap-card-img {
    width: 100%;
    height: 140px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
    overflow: hidden;
}
.pap-card-img img { width: 100%; height: 100%; object-fit: cover; }
.pap-card-body { padding: 12px; }
.pap-card-name  { font-size: 14px; font-weight: 700; margin-bottom: 4px; color: var(--text-primary); }
.pap-card-desc  { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pap-card-price { font-size: 17px; font-weight: 800; color: var(--accent); }
.pap-seo-preview {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--bg-primary);
}

/* Publish modal lists */
.pap-modal-err-list,
.pap-modal-warn-list { list-style: none; padding: 0; margin: 10px 0 0; }
.pap-modal-err-list li  { padding: 5px 0 5px 22px; font-size: 13px; color: var(--danger); position: relative; }
.pap-modal-err-list li::before  { content: '✖'; position: absolute; left: 0; }
.pap-modal-warn-list li { padding: 5px 0 5px 22px; font-size: 13px; color: var(--text-secondary); position: relative; }
.pap-modal-warn-list li::before { content: '⚠'; position: absolute; left: 0; color: var(--warning); }

/* Language tabs (top of pap-form) — top:56px relative to pap-page scroll port */
.pap-lang-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin: -24px -24px 20px;
    background: var(--bg-primary);
    position: sticky;
    top: 56px; /* below 56px status bar (margin:-24px pulls it flush) */
    z-index: 10;
}
.pap-lang-tab {
    padding: 12px 18px;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    min-height: 44px;
    white-space: nowrap;
    border-radius: 0;
}
.pap-lang-tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.pap-lang-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* Shared-field display (read-only in non-EN panes) */
.pap-shared-notice {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
}
.pap-shared-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    border: 1px solid var(--border);
    margin-left: 8px;
    vertical-align: middle;
}
.pap-shared-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--bg-secondary);
    margin-bottom: 6px;
    font-size: 13px;
}
.pap-shared-row-label { color: var(--text-muted); min-width: 130px; flex-shrink: 0; font-size: 12px; }
.pap-shared-row-value { color: var(--text-primary); font-weight: 500; }

/* Draft cards (products list page) */
.pap-drafts-section { margin-bottom: 24px; }
.pap-drafts-heading {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.pap-drafts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

/* Card: fixed flex-column layout — all zones are stable regardless of content */
.pap-draft-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Zone 1: badge row */
.pap-draft-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.pap-draft-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--warning-bg, rgba(234,179,8,0.12));
    color: var(--warning, #ca8a04);
    border: 1px solid var(--warning, #ca8a04);
    flex-shrink: 0;
}
.pap-draft-edit-hint {
    font-size: 11px;
    color: var(--text-muted);
}

/* Zone 2: fixed-height visual area — image fills it, placeholder reserves the same space */
.pap-draft-visual {
    width: 100%;
    height: 88px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.pap-draft-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: none;
}
.pap-draft-visual-placeholder {
    width: 100%;
    height: 100%;
    background: var(--bg-tertiary, rgba(255,255,255,0.04));
    border: 1px dashed var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 0.5;
}

/* Zone 3: text details — always the same height reserved via min-height */
.pap-draft-details {
    flex: 1;
    min-width: 0;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 3px;
    margin-bottom: 12px;
}
.pap-draft-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pap-draft-price { font-size: 13px; font-weight: 600; color: var(--accent); }
.pap-draft-time { font-size: 11px; color: var(--text-muted); }

/* Zone 4: action row — always at bottom, consistent across all cards */
.pap-draft-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}
.pap-draft-continue-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}
.pap-draft-delete-btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

/* Language pane containers (hidden panes have display:none set by PHP/JS) */
.pap-lang-pane { display: block; }
/* The vendor editor toggles panes via the [hidden] attribute; without this the
   base display:block above overrides the UA hidden style and stacks all five
   languages. (Admin uses inline style="display:none" + JS, so it is unaffected.) */
.pap-lang-pane[hidden] { display: none; }

/* Completion bar + language pills (below status bar) */
.pap-completion-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
}
.pap-completion-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: var(--bg-secondary);
}
.pap-completion-pill.is-full    { border-color: var(--success); color: var(--success); background: var(--success-bg); }
.pap-completion-pill.is-partial { border-color: var(--warning); color: var(--warning); background: var(--warning-bg, rgba(234,179,8,0.1)); }

/* Deal pricing form helpers */
.pap-deal-toggle-label { font-weight: 600; font-size: 14px; }
.pap-deal-hint { font-size: 11px; color: var(--text-muted); display: block; margin-top: 4px; }
.pap-deal-fields { margin-top: 12px; }
.pap-deal-preview {
    margin-top: 8px;
    padding: 10px 14px;
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-secondary);
}
.pap-deal-preview strong { color: var(--danger); }

/* SEO suggestions chips + actions row */
.seo-suggestions,
.keywords-suggestions { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.pap-seo-actions { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.pap-seo-actions .btn { font-size: 11px; }

/* Vendor product editor — collapsed "Advanced — auto-filled" group + publish modal.
   Small reusable extension of the pap editor system (vendor-product-editor.php). */
.pap-advanced > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.pap-advanced > summary::-webkit-details-marker { display: none; }
.pap-advanced > summary::before { content: '▸'; color: var(--text-muted); transition: transform 0.15s ease; }
.pap-advanced[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .pap-advanced > summary::before { transition: none; } }
.vendor-modal-md { max-width: 480px; }

/* Google-style SEO preview elements (used in preview panel + edit modal) */
.seo-preview-title {
    font-size: 18px;
    color: #1a0dab;
    font-weight: 400;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.seo-preview-url  { font-size: 13px; color: #006621; margin: 2px 0; word-break: break-all; }
.seo-preview-desc { font-size: 13px; color: #545454; line-height: 1.4; }

/* Publish gate modal paragraph */
.pap-modal-desc { color: var(--text-secondary); font-size: 14px; margin-bottom: 8px; }

/* Back-to-products link at bottom of preview panel */
.pap-back-link {
    margin-top: 16px;
    display: block;
    width: 100%;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

/* Responsive — hide preview panel on medium screens */
@media (max-width: 1100px) {
    .pap-layout { grid-template-columns: 200px 1fr; }
    .pap-preview { display: none; }
}

/* Responsive — collapse nav to horizontal chips on mobile */
@media (max-width: 768px) {
    .pap-layout { grid-template-columns: 1fr; }
    .pap-nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 8px;
        gap: 4px;
        max-height: none;
        overflow-y: visible;
    }
    .pap-nav-item { padding: 8px 12px; font-size: 12px; border-radius: 20px; border: 1px solid var(--border); min-height: 36px; }
    .pap-nav-item.is-active { border-color: var(--accent); }
    .pap-form { padding: 16px; border-right: none; }
    .pap-status-bar { padding: 10px 14px; }
    .form-grid-2,
    .form-grid-3,
    .form-grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .pap-nav-icon { display: none; }
    .pap-nav-item { font-size: 11px; padding: 7px 10px; }
    .pap-breadcrumb { font-size: 12px; }
}

/* --- 420px: Small phone ------------------------------------------ */
@media (max-width: 420px) {
    .settings-billing-summary { display: block; }
    .settings-card { padding: 14px 12px; }
}

/* --- Desktop-only (min-width: 769px) ----------------------------- */
@media (min-width: 769px) {
    .notif-wrap-mobile { display: none; }
}

/* --- Touch devices (hover: none) --------------------------------- */
@media (hover: none) {
    .card-wishlist-float { opacity: 1; }
    .product-card:hover { transform: none; box-shadow: none; }
    .product-card:active { transform: scale(0.98); }
}

/* --- Phase 6: Messaging UI responsive ---------------------------- */
@media (max-width: 480px) {
    .adm-cancel-warning { flex-direction: column; gap: 8px; }
    .compose-order-row { flex-wrap: wrap; }
    .msg-proof-img { max-width: 100%; }
}


/* ============================================================
   Vendor onboarding / marketplace (Phase 1) — reusable, token-based.
   Dark/light adapt automatically via the design tokens.
   ============================================================ */
.vendor-onboard{max-width:820px;margin:0 auto;}
.vendor-subhead{margin-top:var(--space-5);}
.hp-field{position:absolute;left:-9999px;}
.vendor-stack{display:flex;flex-direction:column;gap:var(--space-5);margin-bottom:var(--space-5);}
.vendor-type-option{display:block;padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:border-color .15s ease;}
.vendor-type-option:hover{border-color:var(--border-hover);}
.vendor-type-option input{margin-right:var(--space-2);}
.vendor-type-option strong{display:block;margin-bottom:2px;}
.vendor-kyc-doc{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:var(--space-2);flex-wrap:wrap;}
.vendor-kyc-doc__name{font-weight:600;}
.vendor-kyc-doc input[type=file]{max-width:280px;}
.vendor-steps{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-5);}
.vendor-step{padding:6px 14px;border-radius:999px;background:var(--bg-secondary);color:var(--text-secondary);font-size:13px;border:1px solid var(--border);}
.vendor-step.done{background:var(--success-bg);color:var(--success);border-color:transparent;}
.vendor-step.current{background:var(--accent);color:var(--accent-contrast);border-color:transparent;}
.vendor-agreement-doc{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-3);}
/* Expanded agreement text: a contained, fixed-height scrollable box (never a full dump).
   Responsive height via min() so it shrinks on short/mobile screens without a media query. */
.vendor-agreement-body{margin-top:var(--space-3);max-height:min(340px,46vh);overflow-y:auto;padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-secondary);font-size:14px;line-height:1.6;white-space:pre-line;}
/* Download-as-PDF action under each document. */
.vendor-agreement-pdf{display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-3);}
.vendor-agree-check{display:flex;gap:var(--space-2);align-items:flex-start;margin:var(--space-4) 0;}
.vendor-status-card{text-align:center;padding:var(--space-8) var(--space-6);}
.badge-warning{background:var(--warning-bg);color:var(--warning);border-color:rgba(251,191,36,0.25);}

/* ============================================================
   Become-a-vendor registration (vendor-register.php) — compact,
   scannable 2-column card layout. Scoped to .vreg, tokens only.
   No media query: auto-fit grids stack to 1 col on tablet/phone.
   Frontend only — no behavior/markup-logic change.
   ============================================================ */
.vreg{max-width:920px;}
/* Outer grid: two EQUAL cards on top (Account type | Store info);
   full-width cards (company legal, address) span both columns.
   minmax(400px) → exactly 2 cols on desktop, 1 col below ~816px. */
.vreg .vendor-stack{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
  gap:var(--space-4);
  margin-bottom:var(--space-4);
  align-items:stretch;
}
.vreg .vendor-company-only,
.vreg .card.vreg-full{grid-column:1 / -1;}
/* Card chrome — matches the Account-standing page (.vstand-cell): transparent
   "lines" fill + 1.5px rounded outline + a header band separated by a hairline.
   NOT a filled card. Rounded corners via --radius-md, never sharp. */
.vreg .card{
  background:transparent;
  border:1.5px solid var(--border);
  border-radius:var(--radius-md);
  padding:var(--space-4);
  margin:0;
  overflow:hidden;
}
/* First h3 = card header band: negative margins pull it to the card edges so the
   separator hairline spans the full width (like .vstand-sect-h). */
.vreg .card > h3:first-child{
  margin:calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4);
  padding:13px 16px;
  border-bottom:1px solid var(--border);
  font-family:var(--font-display);
  font-size:14px;font-weight:600;color:var(--text-primary);
}
.vreg .card > h3:first-child .form-hint{font-weight:400;}
/* Sub-section heading inside a card (e.g. "Representative") stays a quiet label. */
.vreg .vendor-subhead{
  margin:var(--space-4) 0 var(--space-3);
  font-size:13px;font-weight:600;color:var(--text-secondary);
}
/* Tighter field rhythm + slightly smaller inputs (not oversized). */
.vreg .form-group{margin-bottom:var(--space-3);}
.vreg .form-group:last-child{margin-bottom:0;}
.vreg .form-input,
.vreg .form-select{padding:9px 12px;font-size:14px;}
.vreg .form-hint{margin-top:3px;}
/* Inner field grids (country+phone, city/postal/website): side by side,
   auto-collapsing to 1 col when the card is narrow. */
.vreg .form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--space-3);
}
.vreg .form-grid .form-group{margin-bottom:0;}
/* Account type: two equal option rows, always stacked. */
.vreg .vreg-type-grid{display:flex;flex-direction:column;gap:var(--space-3);}
.vreg .vendor-type-option{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:11px;row-gap:2px;
  align-items:center;
  padding:12px 14px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-md);
  margin:0;
}
.vreg .vendor-type-option:has(input:checked){border-color:var(--accent);}
.vreg .vendor-type-option input{
  grid-column:1;grid-row:1 / span 2;
  align-self:center;margin:0;
  width:16px;height:16px;
  accent-color:var(--accent);
}
.vreg .vendor-type-option strong{grid-column:2;grid-row:1;align-self:end;line-height:1.2;}
.vreg .vendor-type-option .form-hint{grid-column:2;grid-row:2;align-self:start;margin:0;}
/* Submit row: normal CTA, not a giant full-width block. */
.vreg .alert-info{margin:0 0 var(--space-4);}
/* Real-time application progress (fills as required fields complete). */
.vreg-progress{margin:0 0 var(--space-5);}
.vreg-progress-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;}
.vreg-progress-step{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;}
.vreg-progress-pct{font-size:13px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;}
.vreg-progress-bar{height:7px;border-radius:999px;background:var(--bg-tertiary);overflow:hidden;}
.vreg-progress-fill{display:block;height:100%;width:0;border-radius:999px;background:var(--accent);transition:width .45s cubic-bezier(.4,0,.2,1);}
.vreg-progress.is-done .vreg-progress-fill{background:var(--success);}
.vreg-progress-label{margin:7px 0 0;font-size:12.5px;color:var(--text-muted);transition:color .2s ease;}
.vreg-progress.is-done .vreg-progress-label{color:var(--success);font-weight:600;}

/* ============================================================
   KYC document uploader (.vkyc) — onboarding verification step.
   Compact outlined "lines" cards (matches .vstand/.vreg), a per-card
   "Add file" → shared drag/drop modal, AJAX upload w/ progress + green
   tick, multi-file, delete-with-confirm. Tokens only; no media query
   (auto-fit grid stacks to 1 col). Markup: includes/partials/kyc-uploader.php
   ============================================================ */
.vkyc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:var(--space-3);align-items:start;}
.vkyc-card{
  display:flex;flex-direction:column;
  background:transparent;
  border:1.5px solid var(--border);
  border-radius:var(--radius-md);
  overflow:visible; /* must stay visible so the header info ⓘ popover is not clipped */
}
.vkyc-card-h{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--border);}
.vkyc-card-t{flex:1 1 auto;min-width:0;font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vkyc-req{color:var(--danger);font-weight:700;}
.vkyc-card-tick{display:none;color:var(--success);flex-shrink:0;}
.vkyc-card.is-done .vkyc-card-tick{display:inline-flex;}
.vkyc-card-h .vui-hint{flex-shrink:0;}
.vkyc-card-b{padding:12px 14px;display:flex;flex-direction:column;gap:10px;}
.vkyc-files{display:flex;flex-direction:column;gap:7px;}
.vkyc-files:empty{display:none;}
.vkyc-reject{display:flex;align-items:flex-start;gap:7px;padding:8px 10px;border:1px solid var(--danger);border-radius:var(--radius-sm);background:var(--danger-bg);color:var(--danger);font-size:12.5px;line-height:1.45;}
.vkyc-reject svg{flex-shrink:0;margin-top:1px;}
.vkyc-reject strong{color:var(--danger);}
.vkyc-file{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-secondary);font-size:13px;}
.vkyc-file-ic{color:var(--text-secondary);display:inline-flex;flex-shrink:0;}
.vkyc-file-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary);}
.vkyc-file-size{color:var(--text-muted);font-size:11.5px;flex-shrink:0;white-space:nowrap;}
.vkyc-file-ok{color:var(--success);display:inline-flex;flex-shrink:0;}
.vkyc-file-del{flex-shrink:0;border:0;background:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:6px;display:inline-flex;min-width:28px;min-height:28px;align-items:center;justify-content:center;}
.vkyc-file-del:hover,.vkyc-file-del:focus-visible{color:var(--danger);background:var(--danger-bg);}
.vkyc-add{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border:1.5px dashed var(--border);border-radius:var(--radius-md);background:transparent;color:var(--text-secondary);cursor:pointer;font-size:13px;font-weight:600;font-family:var(--font);min-height:38px;transition:border-color .15s ease,color .15s ease;}
.vkyc-add:hover,.vkyc-add:focus-visible{border-color:var(--accent);color:var(--text-primary);}
.vkyc-legend{margin:var(--space-4) 0 0;font-size:12px;color:var(--text-muted);}
.vkyc-legend .vkyc-req{margin-right:3px;}
/* Upload modal drop zone */
.vkyc-drop{border:2px dashed var(--border);border-radius:var(--radius-md);padding:30px 20px;text-align:center;cursor:pointer;transition:border-color .15s ease,background .15s ease;}
.vkyc-drop:hover,.vkyc-drop.is-drag,.vkyc-drop:focus-visible{border-color:var(--accent);background:var(--bg-secondary);outline:none;}
.vkyc-drop-ic{display:inline-flex;width:48px;height:48px;border-radius:var(--radius-md);background:var(--bg-tertiary);color:var(--text-secondary);align-items:center;justify-content:center;margin-bottom:12px;}
.vkyc-drop-main{margin:0 0 4px;color:var(--text-primary);font-size:14px;}
.vkyc-drop-link{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.vkyc-drop-hint{margin:0;color:var(--text-muted);font-size:12px;}
/* Upload progress queue */
.vkyc-queue{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.vkyc-queue:empty{display:none;}
.vkyc-q{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;}
.vkyc-q-ic{color:var(--text-secondary);display:inline-flex;flex-shrink:0;}
.vkyc-q-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vkyc-q-prog{flex:0 0 84px;height:6px;border-radius:999px;background:var(--bg-tertiary);overflow:hidden;}
.vkyc-q-fill{display:block;height:100%;width:0;background:var(--accent);transition:width .12s linear;}
.vkyc-q-pct{flex-shrink:0;font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--text-muted);min-width:34px;text-align:right;}
.vkyc-q-ok,.vkyc-q-erric,.vkyc-q-msg{display:none;}
.vkyc-q-ok{color:var(--success);}
.vkyc-q-erric{color:var(--danger);}
.vkyc-q.is-ok .vkyc-q-prog,.vkyc-q.is-ok .vkyc-q-pct,.vkyc-q.is-err .vkyc-q-prog,.vkyc-q.is-err .vkyc-q-pct{display:none;}
.vkyc-q.is-ok .vkyc-q-ok{display:inline-flex;}
.vkyc-q.is-err{border-color:var(--danger);}
.vkyc-q.is-err .vkyc-q-erric{display:inline-flex;}
.vkyc-q.is-err .vkyc-q-msg{display:inline;color:var(--danger);font-size:12px;}
.vkyc-q.is-ok .vkyc-q-msg{display:inline;color:var(--success);font-size:12px;}
/* Section heading + submit row */
.vkyc-section{margin-bottom:var(--space-5);}
.vkyc-heading{margin:0 0 4px;font-size:var(--fs-lg);font-weight:700;}
.vkyc-intro{margin:0 0 var(--space-4);}
.vkyc-submit{margin-top:var(--space-4);}
.vkyc-submit .form-hint{margin-bottom:var(--space-3);}

/* ============================================================
   Onboarding progress timeline + step navigation (.vonb-*).
   Animated dots + connectors; completed/current steps are clickable
   (revisit), upcoming are locked. Tokens only. Used by vendor-onboarding.php
   and the read-only "completed step" view. (vendor-register.php reuses .vonb-prog.)
   ============================================================ */
.vonb-prog{display:flex;align-items:flex-start;gap:0;margin:0 0 var(--space-6);animation:vonbFade .4s ease-out;}
.vonb-step{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:0 6px;text-decoration:none;color:var(--text-secondary);}
a.vonb-step{cursor:pointer;}
a.vonb-step:hover .vonb-dot{border-color:var(--accent);}
a.vonb-step:hover .vonb-t{color:var(--text-primary);}
.vonb-dot{position:relative;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--border);background:var(--bg-card);color:var(--text-muted);font-size:12.5px;font-weight:700;transition:border-color .2s ease,background .2s ease,color .2s ease;}
.vonb-dot i{font-style:normal;}
.vonb-step.done .vonb-dot{background:var(--success);border-color:var(--success);color:#fff;}
.vonb-step.current .vonb-dot{border-color:var(--accent);color:var(--accent);}
.vonb-step.current .vonb-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--accent);opacity:.5;animation:vonbPulse 1.8s ease-out infinite;}
.vonb-step.upcoming .vonb-dot{opacity:.65;}
.vonb-info{display:flex;flex-direction:column;gap:1px;}
.vonb-t{font-size:13px;font-weight:600;color:var(--text-primary);line-height:1.2;}
.vonb-step.upcoming .vonb-t{color:var(--text-muted);font-weight:500;}
.vonb-s{font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;}
.vonb-step.done .vonb-s{color:var(--success);}
.vonb-step.viewing .vonb-t{text-decoration:underline;text-underline-offset:3px;}
.vonb-line{flex:1 1 auto;min-width:18px;height:2px;background:var(--border);margin-top:14px;border-radius:2px;transition:background .3s ease;}
.vonb-line.fill{background:var(--success);}
/* Prev / Next nav */
.vonb-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-top:var(--space-5);}
.vonb-nav .btn{display:inline-flex;align-items:center;gap:6px;}
/* Read-only "completed step" view */
.vonb-doneview-h{display:flex;align-items:center;gap:9px;margin-bottom:var(--space-2);}
.vonb-doneview-h svg{color:var(--success);flex-shrink:0;}
.vonb-doneview-h h3{margin:0;}
@keyframes vonbPulse{0%{transform:scale(1);opacity:.5;}70%{transform:scale(1.55);opacity:0;}100%{opacity:0;}}
@keyframes vonbFade{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){.vonb-prog{animation:none;}.vonb-step.current .vonb-dot::after{animation:none;}}

/* ============================================================
   Onboarding Review — "what you submitted" summary (.osum-*).
   Compact outlined cards matching the .vstand/.vreg chrome (transparent fill,
   1.5px rounded outline, header band + hairline) with per-section Edit/View
   links that jump to the relevant step. Auto-fit grid → stacks on mobile.
   Used by vendor-onboarding.php (Review step). Tokens only.
   ============================================================ */
.osum-status{margin-bottom:var(--space-4);}
.osum{display:flex;flex-direction:column;gap:var(--space-4);}
.osum-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-4);align-items:start;}
.osum-card{background:transparent;border:1.5px solid var(--border);border-radius:var(--radius-md);overflow:hidden;}
.osum-h{display:flex;align-items:center;gap:9px;padding:11px 16px;border-bottom:1px solid var(--border);}
.osum-ic{display:inline-flex;flex-shrink:0;color:var(--text-secondary);}
.osum-h h4{flex:1 1 auto;min-width:0;margin:0;font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text-primary);}
.osum-edit{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border:1px solid var(--border);border-radius:var(--radius-md);background:transparent;color:var(--text-secondary);text-decoration:none;font-size:12.5px;font-weight:600;min-height:36px;transition:border-color .15s ease,color .15s ease,background .15s ease;}
.osum-edit:hover,.osum-edit:focus-visible{border-color:var(--accent);color:var(--text-primary);background:var(--bg-secondary);}
.osum-edit svg{flex-shrink:0;}
.osum-list{margin:0;padding:6px 16px 10px;}
.osum-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.osum-row:last-child{border-bottom:0;}
.osum-row dt{flex:0 0 auto;font-size:12.5px;color:var(--text-muted);}
.osum-row dd{flex:1 1 auto;margin:0;text-align:right;font-size:13.5px;color:var(--text-primary);font-weight:500;word-break:break-word;}
.osum-docs{list-style:none;margin:0;padding:11px 16px;display:flex;flex-direction:column;gap:9px;}
.osum-docs:empty{display:none;}
.osum-docs li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-primary);}
.osum-dic{display:inline-flex;flex-shrink:0;}
.osum-docs li.ok .osum-dic{color:var(--success);}
.osum-docs li.miss .osum-dic{color:var(--danger);}
.osum-docs li.miss .osum-dl{color:var(--text-secondary);}
.osum-dl{flex:1 1 auto;min-width:0;}
.osum-opt{color:var(--text-muted);font-size:12px;font-weight:400;}
.osum-dn{flex-shrink:0;font-size:11.5px;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.osum-note{margin:0;padding:10px 16px;border-top:1px solid var(--border);font-size:12.5px;display:flex;align-items:center;gap:6px;}
.osum-h + .osum-note{border-top:0;}
.osum-note svg{flex-shrink:0;}
.osum-note.ok{color:var(--success);}
.osum-note.warn{color:var(--warning);}
.osum-aglist{border-top:1px solid var(--border);padding-top:11px;}
/* "Send to review" submit gate (shown only while pending_submission) */
.osum-submit{margin-top:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start;}
.osum-submit-hint{margin:0;display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-muted);}
.osum-submit-hint svg{flex-shrink:0;}
.osum-submit .btn{display:inline-flex;align-items:center;gap:7px;}

/* Review → Edit application details (reuses .vreg field chrome) */
.vonb-edit-head{margin-bottom:var(--space-4);}
.vonb-edit-head h3{margin:0 0 4px;font-size:var(--fs-lg);font-weight:700;}
.vonb-edit-head .form-hint{margin:0;}
.vonb-edit-actions{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-4);flex-wrap:wrap;}
.vonb-edit-actions .btn{display:inline-flex;align-items:center;gap:6px;}
/* KYC re-upload note shown when editing already-submitted docs during review */
.vkyc-editnote{display:flex;align-items:flex-start;gap:8px;margin-top:var(--space-4);}
.vkyc-editnote svg{flex-shrink:0;margin-top:1px;}
.vonb-backbtn{display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-3);}
@media (max-width:600px){
  .osum-edit{min-height:44px;}
  .osum-row dd{text-align:left;}
  .vonb-edit-actions{flex-direction:column-reverse;}
  .vonb-edit-actions .btn{width:100%;justify-content:center;}
  .osum-submit{align-items:stretch;}
  .osum-submit .btn{width:100%;justify-content:center;}
}

/* ============================================================
   Vendor Portal (marketplace Phase 2) — reusable, token-based.
   ============================================================ */
.vendor-portal-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-3);}
.vendor-portal-store-name{font-weight:700;font-size:1.05rem;}
.vendor-portal-nav{display:flex;gap:var(--space-1);flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:var(--space-5);}
.vendor-portal-tab{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;color:var(--text-secondary);border-bottom:2px solid transparent;text-decoration:none;font-size:14px;}
.vendor-portal-tab:hover{color:var(--text-primary);}
.vendor-portal-tab.active{color:var(--text-primary);border-bottom-color:var(--accent);}
.vendor-dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin:var(--space-5) 0;}
.vendor-lowstock{list-style:none;padding:0;margin:0;}
.vendor-lowstock li{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);}
.vendor-soon,.vendor-mt{margin-top:var(--space-4);}
.vendor-mb{margin-bottom:var(--space-4);}
.vendor-ph-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;}
.vendor-filter-row{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-4);}
.vendor-filter-row .form-input,.vendor-filter-row .form-select{max-width:280px;}
.vendor-row-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.vendor-row-actions--end{justify-content:flex-end;}
.vendor-inline-form{display:inline-block;}
.vendor-empty{padding:var(--space-8) var(--space-6);text-align:center;}
.vendor-checks{display:flex;flex-wrap:wrap;gap:var(--space-3);}
.vendor-check{display:inline-flex;align-items:center;gap:6px;}
.vendor-reason{max-width:160px;display:inline-block;}
.vendor-links{display:flex;gap:var(--space-2);flex-wrap:wrap;}
@media (max-width:768px){ .vendor-dash-cols{grid-template-columns:1fr;} }

/* ─── Marketplace Phase 8 — risk/tier standing + AML badges (token-based, theme-aware) ─── */
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.ms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.ms-tier-card { display: flex; flex-direction: column; gap: 8px; }
.ms-tier-badge { display: inline-block; align-self: flex-start; padding: 6px 14px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 15px; }
.ms-perks { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; color: var(--text-muted); font-size: 14px; }
.ms-perks li::before { content: "• "; color: var(--accent); }
.ms-standing { margin: 6px 0; }
.ms-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; padding: 16px; }
.ms-metric { display: flex; flex-direction: column; gap: 2px; }
.ms-metric-v { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.ms-prog-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ms-prog-label { color: var(--text-primary); font-size: 14px; }
.ms-prog-val { font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; }
.ms-ok { color: var(--success); }
.ms-gap { color: var(--text-muted); }

/* ─── Marketplace Phase 9 — API keys / webhooks / bulk (token-based, theme-aware) ─── */
.vapi-secret { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; word-break: break-all; padding: 8px 10px; background: var(--surface, var(--bg-card)); border: 1px solid var(--border); border-radius: 6px; margin-top: 6px; }
.vapi-scope { display: inline-flex; align-items: center; gap: 5px; margin: 3px 12px 3px 0; font-size: 13px; }
.vbulk-bar { width: 100%; height: 14px; background: var(--surface, var(--bg-card)); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.vbulk-fill { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s ease; }
.vbulk-errors { margin: 12px 0 0; padding-left: 18px; color: var(--danger); font-size: 13px; max-height: 220px; overflow-y: auto; }
.vbulk-errors li { margin: 2px 0; }

/* ─── Marketplace Phase 10 — analytics CSS bars (token-based, no JS lib) ─── */
.ana-bars { display: flex; flex-direction: column; gap: 6px; }
.ana-row { display: grid; grid-template-columns: minmax(80px, 160px) 1fr minmax(90px, auto); gap: 10px; align-items: center; font-size: 13px; }
.ana-label { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ana-track { background: var(--surface, var(--bg-card)); border: 1px solid var(--border); border-radius: 999px; height: 12px; overflow: hidden; }
.ana-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; min-width: 2px; }
.ana-val { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════════
   Vendor / marketplace UX remediation (2026-06-09) — overrides + additions.
   Kept in one block (later-rule wins) so the change set is reviewable and
   touches no shared admin/storefront base classes destructively.
   ═══════════════════════════════════════════════════════════════════════ */
/* #10 Portal sub-nav → horizontal scroll strip (no 2-row wrap on desktop, no cramped multi-row wrap on mobile). */
.vendor-portal-nav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; }
.vendor-portal-nav::-webkit-scrollbar { height: 0; display: none; }
.vendor-portal-tab { flex: 0 0 auto; white-space: nowrap; min-height: 44px; scroll-snap-align: start; }
/* #6 Vendor list → unmistakable cards (visible chrome even where .card paint blends into the dark page). */
.vendor-card { align-items: center; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); min-height: 44px; }
.vendor-card:hover { background: var(--bg-card-hover); border-color: var(--border-hover); transform: translateY(-1px); }
.vendor-card-name { font-size: 15px; }
.vendor-card-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
/* #8 KPI value/label separation; tier stays a pill; rating-distribution breathing room. */
.ms-metric { gap: 6px; }
.ms-metric .form-hint { font-size: 12px; line-height: 1.2; }
.ms-tier-badge { width: fit-content; max-width: 100%; }
.rv-dist-row { gap: 10px; }
.rv-dist-label, .rv-dist-c { font-variant-numeric: tabular-nums; }
/* #4 Seller card: long/unbroken text must never overflow horizontally; below-buy-box detail block. */
.pp-seller-policies .store-prose, .pp-seller-soldby, .pp-seller-sub, .pp-seller-mor { overflow-wrap: anywhere; word-break: break-word; }
.pp-seller-policies { margin-top: 12px; }
.pp-seller-policies > summary { padding: 6px 0; min-height: 32px; }
.pp-seller-detail { margin-top: 18px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; background: var(--bg-card); }
.pp-seller-detail .pp-seller-mor { margin-top: 0; }
/* #5 Uploaded images never dictate layout — fixed responsive containers + object-fit. */
.store-banner { aspect-ratio: 4 / 1; max-height: 220px; }
.store-banner img { height: 100%; }
.vendor-img-preview { display: block; border-radius: var(--radius-sm); object-fit: cover; background: var(--bg-secondary); border: 1px solid var(--border); }
.vendor-img-preview--logo { width: 72px; height: 72px; }
.vendor-img-preview--banner { width: 100%; max-width: 320px; aspect-ratio: 4 / 1; height: auto; }
/* #10 Mobile polish for vendor pages. */
@media (max-width: 768px) {
  .vendor-portal-nav { margin-bottom: var(--space-4); }
  .vendor-filter-row .form-input, .vendor-filter-row .form-select { max-width: none; width: 100%; }
  .ms-metrics { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
}
@media (max-width: 480px) {
  .ms-metrics { grid-template-columns: 1fr 1fr; }
  .pp-seller-card-head { gap: 10px; }
}
/* #2 (option B) rich vendor form — reuse the admin pap-* components, but adapt the
   sticky/grid to the normal portal page flow (vendor pages have header + footer, not
   the admin full-height shell). */
.vendor-pap .pap-layout { min-height: 0; }
/* Vendor editors (product + blog/guide) replicate ADMIN's internal-scroll editor shell so they
   feel identical: the shell locks to the viewport, the left portal sidebar stays FIXED, and only
   the editor pane scrolls — so the top action bar, step-nav and live/google preview all PIN
   exactly like admin (instead of the window scrolling the whole sidebar away). This mirrors
   .admin-layout:has(.pap-page) — the vendor shell IS an .admin-layout, so the base .pap-status-bar
   (top:0) and .pap-nav-sticky/.pap-preview-sticky (top:56px) already resolve against .admin-main.
   Triggered purely by the editor's .pap-layout — no PHP/shell change; where :has() is unsupported
   it degrades to plain window scroll. */
.vendor-shell:has(.pap-layout) { height: calc(100vh - 64px); min-height: 0; overflow: hidden; }
.vendor-shell:has(.pap-layout) .admin-sidebar { margin-top: 0; padding-top: 16px; overflow-y: auto; }
.vendor-shell:has(.pap-layout) .admin-main { height: calc(100vh - 64px); min-height: 0; overflow: auto; padding: 0; }
.vendor-shell:has(.pap-layout) .vendor-shell-content { padding: 0; min-height: 0; }
/* Make the document exactly viewport-tall so the WINDOW never scrolls — all scroll goes into
   .admin-main (keeping the sidebar/top-bar/preview pinned). Without this the storefront footer +
   .main-content's 72px bottom gap make <body> taller than the viewport, so the window scrolls and
   drags the whole shell up. Mirrors the admin .main-content:has(.pap-page) rules, keyed on the
   editor's .pap-layout (the vendor editor has no .pap-page). */
.main-content:has(.pap-layout) { padding-bottom: 0; min-height: 0; }
.main-content:has(.pap-layout) + .footer { display: none; }
@media (max-width: 1024px) {
  .vendor-pap .pap-layout { grid-template-columns: 1fr 300px; }
  .vendor-pap .pap-nav { display: none; }
}
@media (max-width: 768px) {
  .vendor-pap .pap-layout { grid-template-columns: 1fr; }
  .vendor-pap .pap-preview { display: none; }
  .vendor-pap .pap-form { padding: 0; border-right: none; }
}
/* #10 vendor tables → stacked cards on mobile (no horizontal scroll). Cells use data-label. */
@media (max-width: 768px) {
  .vendor-portal .table-wrapper { overflow-x: visible; }
  .vendor-portal table, .vendor-portal tbody, .vendor-portal tr, .vendor-portal td { display: block; width: 100%; }
  .vendor-portal thead { position: absolute; left: -9999px; }
  .vendor-portal tbody tr { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 12px; padding: 6px 12px; background: var(--bg-card); }
  .vendor-portal td { display: flex; justify-content: space-between; gap: 12px; align-items: center; border: none; padding: 8px 0; text-align: right; }
  .vendor-portal td[data-label]::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); text-align: left; }
  .vendor-portal td.vendor-row-actions { justify-content: flex-end; flex-wrap: wrap; }
  /* Rule 9 — ≥44px tap targets for the icon row-actions on touch layouts. */
  .vendor-portal .btn-icon { width: 44px; height: 44px; }
  .vendor-portal .tbl-cell-stack { align-items: flex-end; }
}

/* ─── Vendor app-shell — mobile off-canvas drawer (admin hides its sidebar at this
   breakpoint; the vendor shell turns it into an accessible drawer instead). Scoped to
   .vendor-shell so the admin shell is unaffected. Lives in the responsive zone. ───── */
@media (max-width: 768px) {
    .vendor-shell.admin-layout { grid-template-columns: 1fr; }
    .vendor-shell .admin-sidebar {
        display: block;
        position: fixed; top: 0; bottom: 0; left: 0;
        width: 264px; max-width: 82vw;
        margin: 0; border-radius: 0;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 1300; overflow-y: auto;
    }
    .vendor-shell.drawer-open .admin-sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,.5); }
    .vendor-shell .admin-sidebar-backdrop {
        display: block; position: fixed; inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 1290; opacity: 0; pointer-events: none;
        transition: opacity .25s ease;
    }
    .vendor-shell.drawer-open .admin-sidebar-backdrop { opacity: 1; pointer-events: auto; }
    .vendor-drawer-toggle { display: inline-flex; }
    .vendor-shell-topbar { display: flex; }
    /* In the drawer, the collapse toggle makes no sense — swap it for a close (X). */
    .vendor-shell .admin-sidebar-toggle { display: none; }
    .vendor-shell .vendor-drawer-close { display: inline-flex; }
    /* In drawer mode the rail is full-width with labels even if collapsed on desktop. */
    .vendor-shell.sidebar-collapsed .admin-sidebar { width: 264px; padding-left: 12px; padding-right: 12px; }
    .vendor-shell.sidebar-collapsed .admin-nav-item { font-size: 14px; justify-content: flex-start; gap: 12px; padding: 10px 12px; }
    .vendor-shell.sidebar-collapsed .admin-nav-item > span { display: inline-flex; }
    .vendor-shell.sidebar-collapsed .admin-nav-group-header { display: flex; }
    .vendor-shell.sidebar-collapsed .admin-sidebar-toggle { display: none; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .vendor-shell .admin-sidebar, .vendor-shell .admin-sidebar-backdrop { transition: none; }
}

/* ===========================================================================
   Rich text editor (TinyMCE 6) — site-themed, compact chrome
   ---------------------------------------------------------------------------
   Single config source: admin/assets/js/rich-editor.js. The editor chrome
   lives in the MAIN document, so it inherits the site CSS variables and flips
   live with the theme toggle. These overrides recolour TinyMCE's `oxide` skin
   to the site tokens (no hardcoded colours). The iframe interior is themed
   separately in rich-editor.js (CSS vars don't cross the iframe boundary).

   The leading `html ` raises specificity by one element so these beat TinyMCE's
   skin CSS, which it injects into <head> AFTER this stylesheet at init time.
   Targets: the editor frame `.tox.tox-tinymce`, the toolbar, edit area,
   statusbar, the floating `.tox-pop` (the "…" overflow drawer AND the quickbars
   selection bubble — both live in the shared `.tox-tinymce-aux` container),
   menus and dialogs.
   ========================================================================= */

/* NOTE: colour/surface/border/box-shadow/fill declarations carry !important.
   TinyMCE's skin uses `:not()`-qualified selectors (e.g. .tox:not(.tox-tinymce-inline)
   .tox-editor-header) whose specificity (0,3,0) beats a plain `html .tox …` (0,2,1),
   so the toolbar surface would otherwise stay white in dark mode. The skin never
   uses !important, so !important is the reliable, specificity-proof override.
   Pure-layout props (width/height/radius/margin/padding) are left as-is — they
   already win and shouldn't fight TinyMCE's dynamic sizing. */

/* Editor frame — 1px border + card radius; the slate-blue is gone */
html .tox.tox-tinymce {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm) !important;
}
html .tox.tox-tinymce--toolbar-bottom .tox-editor-header,
html .tox .tox-editor-header {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
}

/* Toolbar surface + functional-group dividers */
html .tox .tox-toolbar,
html .tox .tox-toolbar__primary,
html .tox .tox-toolbar-overlord {
    background: var(--bg-secondary) !important;
    background-image: none !important;
}
html .tox .tox-toolbar__group { padding: 0 5px; border: 0 !important; }
html .tox .tox-toolbar__group:not(:last-of-type) { border-right: 1px solid var(--border) !important; }

/* Buttons — 30x30 box, 16px icon (compact but readable), subtle hover, accent-tinted active */
html .tox .tox-tbtn {
    width: 30px; height: 30px; min-width: 30px;
    margin: 2px 1px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary) !important;
}
/* TinyMCE icons have NO viewBox (intrinsic 24x24, paths in 24-unit space), so
   CSS width/height CROPS them instead of scaling (with the button's overflow:hidden).
   Render at natural 24px and shrink VISUALLY with transform:scale → fully visible,
   ~18px, never clipped. Fill kept bright enough to read on the dark surfaces. */
html .tox .tox-tbtn svg {
    width: 24px !important; height: 24px !important;
    transform: scale(0.75) !important;
    fill: var(--text-secondary) !important;
}
html .tox .tox-tbtn:hover { background: var(--bg-hover) !important; }
html .tox .tox-tbtn:hover svg { fill: var(--text-primary) !important; }
html .tox .tox-tbtn:focus-visible { box-shadow: 0 0 0 2px var(--focus-ring) !important; }
html .tox .tox-tbtn--enabled,
html .tox .tox-tbtn--enabled:hover,
html .tox .tox-tbtn[aria-pressed="true"] { background: var(--accent-glow) !important; }
html .tox .tox-tbtn--enabled svg,
html .tox .tox-tbtn[aria-pressed="true"] svg { fill: var(--accent) !important; }
html .tox .tox-tbtn--disabled svg,
html .tox .tox-tbtn--disabled:hover svg,
html .tox .tox-tbtn:disabled svg { fill: var(--text-muted) !important; opacity: .5; }

/* "blocks" select button (Paragraph / Heading) — auto width, themed label */
html .tox .tox-tbtn--select { width: auto; min-width: 0; padding: 0 6px; }
html .tox .tox-tbtn__select-label { color: var(--text-secondary) !important; font-weight: 500; }
html .tox .tox-split-button:hover { box-shadow: none !important; }
html .tox .tox-tbtn--bespoke { background: transparent !important; }

/* Edit area + iframe (avoids the white flash behind the themed interior) */
html .tox .tox-edit-area { border: 0 !important; }
html .tox .tox-edit-area__iframe { background-color: var(--bg-input) !important; }
html .tox .tox-sidebar-wrap { background: var(--bg-input) !important; }

/* Statusbar (wordcount / element path / resize handle) */
html .tox .tox-statusbar {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
}
html .tox .tox-statusbar a,
html .tox .tox-statusbar__path-item,
html .tox .tox-statusbar__wordcount { color: var(--text-muted) !important; }
html .tox .tox-statusbar__resize-handle svg { fill: var(--text-muted) !important; }

/* Floating popups: the "…" overflow drawer AND the quickbars selection bubble.
   Both render as a .tox-pop inside the shared .tox-tinymce-aux (class `tox`),
   so they share this theming and the compact 32/18 buttons above. */
html .tox .tox-pop__dialog {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg) !important;
}
html .tox .tox-pop__dialog .tox-toolbar,
html .tox .tox-pop__dialog .tox-toolbar__group { background: transparent !important; }

/* The "…" overflow drawer. addGroupToolbarButton requires floating toolbar
   mode, so its panel renders as .tox-toolbar__overflow (NOT .tox-pop) — the
   skin gives THAT a #fff background + a faint repeating-gradient. This is the
   panel that stayed white in dark mode; theme it to match the menus/pops.
   (No `.tox` ancestor requirement — it's a unique class, keep the match robust.) */
html .tox-toolbar__overflow,
html .tox .tox-toolbar__overflow {
    background-color: var(--bg-card) !important;
    background-image: none !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
}
html .tox-toolbar__overflow .tox-toolbar__group { background: transparent !important; }
/* caret — colour only the side that faces the content, per direction modifier */
html .tox .tox-pop.tox-pop--bottom::before { border-bottom-color: var(--border) !important; }
html .tox .tox-pop.tox-pop--bottom::after  { border-bottom-color: var(--bg-card) !important; }
html .tox .tox-pop.tox-pop--top::before    { border-top-color: var(--border) !important; }
html .tox .tox-pop.tox-pop--top::after     { border-top-color: var(--bg-card) !important; }
html .tox .tox-pop.tox-pop--left::before   { border-left-color: var(--border) !important; }
html .tox .tox-pop.tox-pop--left::after    { border-left-color: var(--bg-card) !important; }
html .tox .tox-pop.tox-pop--right::before  { border-right-color: var(--border) !important; }
html .tox .tox-pop.tox-pop--right::after   { border-right-color: var(--bg-card) !important; }

/* Menus (block-format dropdown, context menus) */
html .tox .tox-menu {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg) !important;
}
html .tox .tox-collection__item { color: var(--text-secondary) !important; border-radius: var(--radius-sm); }
html .tox .tox-collection__item--active,
html .tox .tox-collection__item--enabled,
html .tox .tox-collection__item:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; }
html .tox .tox-collection__item-accessory { color: var(--text-muted) !important; }
html .tox .tox-collection__group { border-color: var(--border) !important; }

/* Dialogs (image / link / table / code / preview) */
html .tox .tox-dialog-wrap__backdrop { background: rgba(0, 0, 0, .55) !important; }
html .tox .tox-dialog {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg) !important;
}
html .tox .tox-dialog__header,
html .tox .tox-dialog__footer {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
html .tox .tox-dialog__title { color: var(--text-primary) !important; }
html .tox .tox-dialog__body,
html .tox .tox-dialog__body-nav-item,
html .tox .tox-dialog__body-content,
html .tox .tox-label { color: var(--text-secondary) !important; }
html .tox .tox-textfield,
html .tox .tox-textarea,
html .tox .tox-selectfield select,
html .tox .tox-toolbar-textfield {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm);
}
html .tox .tox-textfield:focus,
html .tox .tox-textarea:focus,
html .tox .tox-selectfield select:focus {
    border-color: var(--border-hover) !important;
    box-shadow: 0 0 0 2px var(--focus-ring) !important;
}
html .tox .tox-button {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--accent-contrast) !important;
    border-radius: var(--radius-sm);
}
html .tox .tox-button:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
html .tox .tox-button--secondary { background: var(--bg-hover) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
html .tox .tox-button--secondary:hover { background: var(--bg-card-hover) !important; }

/* =====================================================================
   VENDOR DASHBOARD REDESIGN (2026-06-13) — premium overview, monochrome
   theme via existing tokens. Scoped to .vdash so no other page is touched.
   Mobile bottom tab bar (.vendor-bottomnav) is shell-wide (all vendor pages).
   ===================================================================== */
.vdash { display: flex; flex-direction: column; gap: var(--space-3); }
.vdash *,
.vendor-bottomnav * { box-sizing: border-box; }
.vdash svg { display: block; }
/* Shared vendor icon — always size-constrained (no ballooning inline SVG). */
.vui-ic { display: block; flex: 0 0 auto; }

/* ---- page head ---- */
.vdash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.vdash-title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 0; }
.vdash-sub { color: var(--text-secondary); font-size: var(--fs-sm); margin: 3px 0 0; }
.vdash-head-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.vdash-search { display: flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 11px; height: var(--control-h-sm); min-width: 200px; color: var(--text-muted); }
.vdash-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.vdash-search input { background: none; border: none; outline: none; color: var(--text-primary); font: inherit; font-size: var(--fs-sm); width: 100%; }
.vdash-search input::placeholder { color: var(--text-muted); }
.vdash-range { display: inline-flex; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; }
.vdash-range button { padding: 6px 12px; border-radius: 6px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); background: none; border: none; cursor: pointer; transition: color var(--transition), background var(--transition); }
.vdash-range button:hover:not(.on) { color: var(--text-primary); }
.vdash-range button.on { background: var(--bg-card-hover); color: var(--text-primary); }

/* ---- needs attention ---- */
.vdash-attention { display: flex; align-items: stretch; flex-wrap: wrap; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.vdash-att-lead { display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-right: 1px solid var(--border); min-width: 200px; }
.vdash-att-lead-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--warning-bg); color: var(--warning); display: grid; place-items: center; flex-shrink: 0; }
.vdash-att-lead-ic svg { width: 17px; height: 17px; }
.vdash-att-lead-t { font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.vdash-att-lead-d { color: var(--text-muted); font-size: var(--fs-xs); margin-top: 1px; }
.vdash-att-items { display: flex; flex: 1; flex-wrap: wrap; }
.vdash-att { display: flex; align-items: center; gap: 11px; padding: 11px 16px; flex: 1; min-width: 190px; border-right: 1px solid var(--border); text-decoration: none; color: inherit; transition: background var(--transition); }
.vdash-att:last-child { border-right: none; }
.vdash-att:hover { background: var(--bg-hover); }
.vdash-att-num { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; line-height: 1; min-width: 20px; }
.vdash-att.amber .vdash-att-num { color: var(--warning); }
.vdash-att.red .vdash-att-num { color: var(--danger); }
.vdash-att.blue .vdash-att-num { color: var(--accent); }
.vdash-att.is-zero .vdash-att-num { color: var(--text-muted); }
.vdash-att-meta { flex: 1; }
.vdash-att-meta .k { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.vdash-att-go { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--bg-tertiary); color: var(--text-muted); flex-shrink: 0; }
.vdash-att-go svg { width: 14px; height: 14px; }
.vdash-att:hover .vdash-att-go { color: var(--text-primary); }

/* ---- KPI cards ---- */
.vdash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.vdash-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 13px 14px; box-shadow: var(--highlight-top); transition: border-color var(--transition), transform var(--transition); }
.vdash-kpi:hover { border-color: var(--border-hover); transform: translateY(-2px); }
/* Clickable KPI cards (disputes + analytics deep-link to their related view) reuse this card. */
a.vdash-kpi { text-decoration: none; color: inherit; cursor: pointer; }
.vdash-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.vdash-kpi-lbl { font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-semibold); }
.vdash-kpi-ico { width: 26px; height: 26px; border-radius: 8px; background: var(--bg-tertiary); display: grid; place-items: center; color: var(--text-secondary); }
.vdash-kpi-ico svg { width: 15px; height: 15px; }
.vdash-kpi-val { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; letter-spacing: var(--ls-tight); line-height: 1; font-variant-numeric: tabular-nums; }
.vdash-kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 8px; }
.vdash-trend { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.vdash-trend svg { width: 13px; height: 13px; }
.vdash-trend.up { color: var(--success); }
.vdash-trend.down { color: var(--danger); }
.vdash-trend--flat { color: var(--text-muted); }
.vdash-since { color: var(--text-muted); font-weight: var(--fw-regular); margin-left: 4px; }
.vdash-spark { width: 70px; height: 26px; flex-shrink: 0; }

/* ---- mid: chart + payout ---- */
.vdash-mid { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--space-3); }
.vdash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.vdash-card-h { display: flex; align-items: center; gap: 10px; }
.vdash-card-t { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.vdash-card-link { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: var(--fw-semibold); display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.vdash-card-link svg { width: 13px; height: 13px; }
.vdash-card-link:hover { color: var(--text-primary); }
.vdash-card-tag { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-semibold); }
.vdash-chart-card { position: relative; }
.vdash-chart-wrap { padding: 12px 14px 4px; }
.vdash-chart-figures { display: flex; align-items: baseline; gap: 10px; padding: 0 4px 8px; flex-wrap: wrap; }
.vdash-chart-big { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; }
.vdash-chart-cap { color: var(--text-muted); font-size: var(--fs-xs); margin-left: auto; }
.vdash-chart-svg { width: 100%; height: 132px; overflow: visible; }
.vdash-chart-svg rect.bar { transition: opacity var(--transition); }
.vdash-chart-x { display: flex; justify-content: space-between; padding: 6px 6px 0; color: var(--text-muted); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; }
.vdash-ctip { position: absolute; pointer-events: none; background: var(--bg-card-hover); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: var(--fs-xs); transform: translate(-50%, -118%); white-space: nowrap; z-index: 5; box-shadow: var(--shadow-md); }
.vdash-ctip b { font-variant-numeric: tabular-nums; }
.vdash-ctip .d { display: block; color: var(--text-muted); font-size: var(--fs-2xs); margin-top: 1px; }

/* payout */
.vdash-payout-body { padding: 14px 16px 16px; }
.vdash-payout-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.vdash-payout-v { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; }
.vdash-payout-sub { color: var(--text-muted); font-size: var(--fs-xs); margin: 3px 0 12px; }
.vdash-pbar { height: 7px; border-radius: 5px; background: var(--bg-tertiary); overflow: hidden; display: flex; margin-bottom: 12px; }
.vdash-pbar i { display: block; height: 100%; }
.vdash-pbar .avail { background: var(--accent); }
.vdash-pbar .pend { background: var(--text-muted); opacity: 0.6; }
.vdash-pleg { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.vdash-pleg .li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.vdash-pleg .sw { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.vdash-pleg .sw.avail { background: var(--accent); }
.vdash-pleg .sw.pend { background: var(--text-muted); opacity: 0.6; }
.vdash-pleg .k { color: var(--text-secondary); }
.vdash-pleg .amt { margin-left: auto; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.vdash-payout-note { display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-secondary); margin-bottom: 12px; color: var(--text-secondary); font-size: var(--fs-xs); line-height: 1.45; }
.vdash-payout-note svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted); margin-top: 1px; }
.vdash-payout-btn { width: 100%; }
.vdash-payout-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---- lower: orders + rail ---- */
.vdash-lower { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-3); align-items: start; }
.vdash-otable { width: 100%; border-collapse: collapse; }
.vdash-otable th { text-align: left; font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-semibold); padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); }
.vdash-otable td { padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); vertical-align: middle; }
.vdash-otable tbody tr:last-child td { border-bottom: none; }
.vdash-otable tbody tr { transition: background var(--transition); }
.vdash-otable tbody tr:hover { background: var(--bg-hover); }
.vdash-oid { font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: var(--fw-medium); }
.vdash-oprod { display: flex; align-items: center; gap: 10px; }
.vdash-opic { width: 30px; height: 30px; border-radius: 8px; background: var(--bg-tertiary); display: grid; place-items: center; flex-shrink: 0; color: var(--text-secondary); }
.vdash-opic svg { width: 16px; height: 16px; }
.vdash-opn { font-weight: var(--fw-medium); display: block; }
.vdash-obuyer { display: flex; align-items: center; gap: 9px; }
.vdash-obi { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-2xs); font-weight: var(--fw-bold); background: var(--bg-tertiary); color: var(--text-secondary); flex-shrink: 0; text-transform: uppercase; }
.vdash-obn { font-size: var(--fs-sm); display: block; }
.vdash-obd { font-size: var(--fs-xs); color: var(--text-muted); }
.vdash-oamt { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.vdash-od-act { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.vdash-fulfill { display: inline; margin: 0; }
.vdash-act-btn { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 7px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; text-decoration: none; transition: all var(--transition); }
.vdash-act-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.vdash-act-btn.go { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.vdash-act-btn.go:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-contrast); }

/* rail */
.vdash-rail { display: flex; flex-direction: column; gap: var(--space-3); }
.vdash-mini { padding: 4px 16px 10px; }
.vdash-mini-row { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.vdash-mini-row:last-child { border-bottom: none; }
.vdash-mini-pic { width: 30px; height: 30px; border-radius: 8px; background: var(--bg-tertiary); display: grid; place-items: center; flex-shrink: 0; color: var(--text-secondary); }
.vdash-mini-pic svg { width: 16px; height: 16px; }
.vdash-mini-info { flex: 1; min-width: 0; }
.vdash-mini-info .n { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdash-mini-info .s { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }
a.vdash-mini-row:hover .n { color: var(--accent); }
.vdash-stock { font-variant-numeric: tabular-nums; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--warning); background: var(--warning-bg); border: 1px solid rgba(251,191,36,0.25); border-radius: 7px; padding: 3px 9px; flex-shrink: 0; }
.vdash-stock.out { color: var(--danger); background: var(--danger-bg); border-color: rgba(239,68,68,0.25); }
.vdash-rank { width: 22px; height: 22px; border-radius: 7px; background: var(--bg-tertiary); display: grid; place-items: center; font-variant-numeric: tabular-nums; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-secondary); flex-shrink: 0; }
.vdash-rev { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); font-weight: var(--fw-semibold); flex-shrink: 0; }
.vdash-rating-body { padding: 14px 16px 16px; }
.vdash-rating-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.vdash-rating-num { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; line-height: 1; }
.vdash-stars { display: flex; gap: 2px; }
.vdash-stars svg { width: 14px; height: 14px; fill: var(--warning); stroke: none; }
.vdash-stars svg.off { fill: var(--bg-tertiary); }
.vdash-rating-cnt { color: var(--text-muted); font-size: var(--fs-xs); margin-top: 3px; }
.vdash-rev-quote { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.5; border-left: 2px solid var(--border); padding-left: 11px; }
.vdash-rev-quote .who { display: block; color: var(--text-muted); font-size: var(--fs-xs); margin-top: 6px; }
.vdash-empty { padding: var(--space-4); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }

/* focus-visible (keyboard) */
.vdash-att:focus-visible,
.vdash-range button:focus-visible,
.vdash-act-btn:focus-visible,
.vdash-mini-row:focus-visible,
.vdash-card-link:focus-visible,
.vendor-bnav:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }

/* ---- mobile bottom tab bar (shell-wide; same real routes as the sidebar) ---- */
.vendor-bottomnav { display: none; }
.vendor-bnav { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0; color: var(--text-muted); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-decoration: none; background: none; border: none; cursor: pointer; font-family: inherit; }
.vendor-bnav svg { width: 21px; height: 21px; }
.vendor-bnav.on { color: var(--accent); }
.vendor-bnav-badge { position: absolute; top: 2px; left: 50%; margin-left: 4px; min-width: 15px; height: 15px; padding: 0 4px; background: var(--danger); color: #fff; border-radius: 8px; font-size: 9px; font-weight: var(--fw-bold); display: grid; place-items: center; }

@media (prefers-reduced-motion: reduce) {
  .vdash * { animation: none !important; transition: none !important; }
}

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .vdash-mid { grid-template-columns: 1fr; }
  .vdash-lower { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .vdash-title { font-size: var(--fs-xl); }
  .vdash-head-actions { width: 100%; }
  .vdash-search { order: 3; flex: 1 1 100%; min-width: 0; }
  .vdash-range { flex: 1; }
  .vdash-range button { flex: 1; }
  .vdash-kpis { grid-template-columns: 1fr 1fr; }
  .vdash-spark { display: none; }
  .vdash-attention { flex-direction: column; }
  .vdash-att-lead { border-right: none; border-bottom: 1px solid var(--border); }
  .vdash-att-items { flex-direction: column; }
  .vdash-att { border-right: none; border-bottom: 1px solid var(--border); }
  .vdash-att:last-child { border-bottom: none; }
  /* orders table → stacked cards */
  .vdash-otable thead { display: none; }
  .vdash-otable, .vdash-otable tbody, .vdash-otable tr, .vdash-otable td { display: block; }
  .vdash-otable tr { padding: 14px 16px; border-bottom: 1px solid var(--border); position: relative; }
  .vdash-otable td { padding: 4px 0; border: none; }
  .vdash-otable .vdash-oid { position: absolute; top: 14px; right: 16px; }
  .vdash-od-act { justify-content: flex-start; margin-top: 8px; }
  /* mobile bottom nav visible only inside the vendor shell on small screens */
  .vendor-shell .vendor-bottomnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .vendor-shell .vendor-shell-content { padding-bottom: 84px; }
  /* Editor shell scrolls inside .admin-main (padding:0 on .vendor-shell-content), so the
     bottom-nav clearance lives on the scroll container instead — keeps the last form section
     reachable above the fixed bottom-nav. */
  .vendor-shell:has(.pap-layout) .admin-main { padding-bottom: 84px; }
}
@media (max-width: 420px) {
  .vdash-kpis { grid-template-columns: 1fr 1fr; }
  .vdash-c-buyer { display: none; }
}

/* =====================================================================
   VENDOR DASHBOARD — INFORMATION HUB (2026-06-16). Collapsible section
   cards (3 scrollable sub-cards each) + money strip + quick-links.
   Reuses tokens + the .vrev-pplist scroll + .admin-nav-group collapse
   patterns. Scoped to .vhub-* / .vdash-hub so nothing else is touched.
   ===================================================================== */
.vdash-hub { display: flex; flex-direction: column; gap: var(--space-3); }

/* Money strip */
.vhub-money { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.vhub-money-tile { display: flex; flex-direction: column; gap: 4px; background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; text-decoration: none; color: inherit; transition: border-color var(--transition), transform var(--transition); }
.vhub-money-tile:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.vhub-money-k { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; }
.vhub-money-v { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; line-height: 1.1; }
.vhub-money-v.avail { color: var(--success); }
.vhub-money-v.pend { color: var(--warning); }

/* Hub stack + card */
.vhub-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.vhub-card { background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.vhub-head { display: flex; align-items: center; gap: 11px; width: 100%; padding: 13px 16px; background: none; border: none; cursor: pointer; color: inherit; text-align: left; font: inherit; }
.vhub-head:hover { background: var(--bg-hover); }
.vhub-head-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--bg-tertiary); color: var(--text-secondary); display: grid; place-items: center; flex-shrink: 0; }
.vhub-head-ic svg { width: 17px; height: 17px; }
.vhub-head-t { flex: 1; min-width: 0; font-weight: var(--fw-bold); font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vhub-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--danger); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold); display: inline-grid; place-items: center; flex-shrink: 0; }
.vhub-count[data-count="0"] { display: none; }
.vhub-head-sub { font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-semibold); flex-shrink: 0; }
.vhub-chevron { width: 16px; height: 16px; opacity: 0.55; flex-shrink: 0; transition: transform 0.2s ease; }
.vhub-card.open .vhub-chevron { transform: rotate(180deg); }
.vhub-body { overflow: hidden; max-height: 0; transition: max-height 0.28s ease; }
.vhub-card.open .vhub-body { max-height: 1400px; }

/* 3 equal sub-cards */
.vhub-subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); padding: 0 16px 16px; }
.vhub-sub { display: flex; flex-direction: column; min-height: 0; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.vhub-sub-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--border); transition: background var(--transition); }
.vhub-sub-head:hover { background: var(--bg-hover); }
.vhub-sub-title { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vhub-sub-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bg-card-hover); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: var(--fw-bold); display: inline-grid; place-items: center; flex-shrink: 0; }
.vhub-sub-go { color: var(--text-muted); display: grid; place-items: center; flex-shrink: 0; }
.vhub-sub-go svg { width: 13px; height: 13px; }

/* Scrollable list (clones .vrev-pplist behaviour) */
.vhub-sublist { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: 240px; }
.vhub-row { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; transition: background var(--transition); }
.vhub-row:last-child { border-bottom: none; }
a.vhub-row:hover { background: var(--bg-hover); }
.vhub-row-lead { flex-shrink: 0; min-width: 34px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-muted); }
.vhub-row-main { flex: 1; min-width: 0; }
.vhub-row-title { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vhub-row-meta { display: block; font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.vhub-row-right { flex-shrink: 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); white-space: nowrap; }
.vhub-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
.vhub-dot--in_progress, .vhub-dot--open, .vhub-dot--unread, .vhub-dot--pending_review, .vhub-dot--draft, .vhub-dot--low { background: var(--warning); }
.vhub-dot--delivered, .vhub-dot--resolved, .vhub-dot--published, .vhub-dot--approved, .vhub-dot--sale, .vhub-dot--paid { background: var(--success); }
.vhub-dot--cancelled, .vhub-dot--rejected, .vhub-dot--refund, .vhub-dot--failed { background: var(--danger); }
.vhub-empty { padding: 16px 12px; text-align: center; color: var(--text-muted); font-size: var(--fs-xs); }

/* Quick links */
.vhub-quicklinks { margin-top: 2px; }
.vhub-ql-h { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: var(--fw-bold); margin: 0 0 8px; }
.vhub-ql-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.vhub-ql { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 14px; background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius-md); text-decoration: none; color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-semibold); transition: border-color var(--transition), color var(--transition); }
.vhub-ql:hover { border-color: var(--border-hover); color: var(--text-primary); }
.vhub-ql svg { width: 17px; height: 17px; flex-shrink: 0; }

@media (max-width: 720px) {
  .vhub-money { grid-template-columns: 1fr 1fr; }
  .vhub-subs { grid-template-columns: 1fr; }
  .vhub-card.open .vhub-body { max-height: 2600px; }
}

/* =====================================================================
   VENDOR ORDERS REDESIGN (2026-06-13) — list + order-detail + modals in
   the dashboard's premium language. Scoped to .vord (the shared admin
   tbl-clean / status-* / od-* styles used elsewhere stay untouched).
   ===================================================================== */
.vord { display: flex; flex-direction: column; gap: var(--space-4); }
.vord *, .vord *::before, .vord *::after { box-sizing: border-box; }
.vord svg { display: block; }
.vord-notice { margin-bottom: 0; }

/* page head (list) */
.vord-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.vord-eyebrow { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: 4px; }
.vord-title { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 0; }
.vord-sub { color: var(--text-secondary); font-size: var(--fs-base); margin: 7px 0 0; max-width: 560px; }
.vord-head-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.vord-head-actions .btn svg { width: 16px; height: 16px; }
/* ── master-detail: list (left) + selected-order detail (right) ── */
.vord-md-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr); gap: var(--space-4); align-items: start; }
.vord-md-list { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.vord-md-list .vord-bar { margin: 0; }
.vord-md-list .vord-list-card { max-height: 68vh; overflow-y: auto; }
.vord-md-panel { min-width: 0; position: sticky; top: 16px; }
.vord-md-empty { border: 1.5px dashed var(--border); border-radius: var(--radius-lg); padding: 52px 24px; text-align: center; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.vord-md-empty svg { width: 30px; height: 30px; stroke: var(--text-muted); fill: none; }
.vord-md-empty p { margin: 0; font-size: var(--fs-sm); max-width: 240px; line-height: 1.5; }
#vordPanelBody[aria-busy="true"] { opacity: .45; pointer-events: none; transition: opacity .12s; }
.vord-orow { cursor: pointer; }
.vord-orow.selected { background: var(--accent-glow); }
.vord-orow.selected td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
/* page-size 10/20/50 selector (in the filter bar) */
.vord-pagesize { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; padding: 3px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); }
/* master-detail list bar: tabs + per-page on row 1, search full-width on row 2; compact tabs */
.vord-md .vord-tabs { flex: 1 1 100%; align-items: center; gap: 6px; }
.vord-md .vord-barsearch { flex: 1 1 100%; margin-top: var(--space-2); }
.vord-md .vord-tab { padding: 6px 11px; font-size: 12.5px; }
.vord-md .vord-tab .c { font-size: 11px; }
/* tighter, still-distinct columns; status as a colored dot only (full text is in the detail) */
.vord-md .vord-otable th, .vord-md .vord-otable td { padding-left: 13px; padding-right: 13px; }
.vord-md .vord-otable th:first-child, .vord-md .vord-otable td:first-child { padding-left: 16px; }
.vord-c-amt { white-space: nowrap; }
.vord-c-stat { width: 46px; }
.vord-statdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); vertical-align: middle; }
.vord-statdot.ok { background: var(--success); }
.vord-statdot.pend { background: var(--warning); }
.vord-statdot.off { background: var(--text-muted); }
.vord-statpartial { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warning); margin-left: 3px; vertical-align: middle; }
.vord-pslbl { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); font-weight: var(--fw-semibold); margin-right: 2px; }
.vord-psbtn { min-width: 26px; height: 24px; padding: 0 7px; display: inline-grid; place-items: center; border: none; border-radius: 6px; background: none; color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; text-decoration: none; transition: color .14s, background .14s; }
.vord-psbtn:hover { color: var(--text-primary); background: var(--bg-hover); }
.vord-psbtn.on { background: var(--accent-glow); color: var(--accent); }
/* invitation deliver: copyable delivery email + confirm */
.vord-invite { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; flex-wrap: wrap; }
.vord-invite-k { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); font-weight: var(--fw-semibold); }
.vord-invite-box { flex: 1; min-width: 180px; }
.vord-md-back { display: none; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 13px; font-weight: 500; margin-bottom: 14px; }
.vord-md-back svg { width: 16px; height: 16px; }
/* low-priority columns hidden in the narrow list pane (still in the detail panel) */
.vord-md .vord-otable .vord-c-date { display: none; }
@media (max-width: 1200px) { .vord-md .vord-otable .vord-c-buyer { display: none; } }
@media (max-width: 900px) {
  .vord-md-grid { grid-template-columns: 1fr; }
  .vord-md-panel { position: static; }
  .vord-md.has-detail .vord-md-list { display: none; }
  .vord-md.has-detail .vord-md-back { display: inline-flex; }
}

/* filter bar */
.vord-bar { padding: 6px; }
.vord-tabs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.vord-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: none; transition: background var(--transition), color var(--transition); }
.vord-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.vord-tab.on { background: var(--bg-card-hover); color: var(--text-primary); }
.vord-tab .c { font-variant-numeric: tabular-nums; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--text-muted); background: var(--bg-tertiary); border-radius: 6px; padding: 1px 6px; min-width: 18px; text-align: center; }
.vord-tab.on .c { color: var(--text-primary); }
.vord-tab.warn .led { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 3px var(--warning-bg); }
.vord-barsearch { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 12px; height: var(--control-h-sm); min-width: 210px; color: var(--text-muted); }
.vord-barsearch svg { width: 15px; height: 15px; flex-shrink: 0; }
.vord-barsearch input { background: none; border: none; outline: none; color: var(--text-primary); font: inherit; font-size: var(--fs-sm); width: 100%; }
.vord-barsearch input::placeholder { color: var(--text-muted); }

/* list table */
.vord-list-card { overflow: hidden; }
.vord-otable { width: 100%; border-collapse: collapse; }
.vord-otable th { text-align: left; font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-semibold); padding: 11px 20px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); }
.vord-otable td { padding: 13px 20px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); vertical-align: middle; }
.vord-otable tbody tr:last-child td { border-bottom: none; }
.vord-otable tbody tr { transition: background var(--transition); }
.vord-otable tbody tr:hover { background: var(--bg-hover); }
.vord-otable .text-right { text-align: right; }
.vord-oidcell { display: flex; flex-direction: column; gap: 2px; }
.vord-oid { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--text-primary); }
.vord-opay { font-size: var(--fs-2xs); letter-spacing: .04em; color: var(--text-muted); font-weight: var(--fw-semibold); }
.vord-oprod { min-width: 0; }
.vord-opn { font-weight: var(--fw-medium); }
.td-truncate { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vord-opk { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }
.vord-obuyer { display: flex; flex-direction: column; gap: 1px; }
.vord-obn { font-size: var(--fs-sm); }
.vord-obe { font-size: var(--fs-xs); color: var(--text-muted); }
.vord-oamt { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); white-space: nowrap; }
.vord-oamt .cur { color: var(--text-muted); font-weight: var(--fw-regular); font-size: var(--fs-xs); margin-left: 3px; }
.vord-odate { color: var(--text-muted); font-size: var(--fs-xs); }
.vord-rowact { display: inline-flex; gap: 6px; justify-content: flex-end; align-items: center; }
.vord-rowact .vendor-quick-deliver { display: inline; margin: 0; }
.vord-act-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; text-decoration: none; transition: all var(--transition); }
.vord-act-btn svg { width: 15px; height: 15px; }
.vord-act-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.vord-act-btn.go { background: var(--success-bg); border-color: rgba(34,197,94,0.3); color: var(--success); }
.vord-act-btn.go:hover { background: var(--success); border-color: var(--success); color: #06231a; }
.vord-pagination { margin-top: var(--space-2); }

/* status pills (real enum from orderPaymentBadgeHtml) — scoped restyle */
.vord .status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .02em; text-transform: none; border: 1px solid transparent; white-space: nowrap; line-height: 1.5; }
.vord .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.vord .status-delivered { background: var(--success-bg); color: var(--success); }
.vord .status-paid { background: var(--warning-bg); color: var(--warning); }
.vord .status-awaiting { background: var(--bg-tertiary); color: var(--text-muted); }
.vord .status-cancelled { background: var(--danger-bg); color: var(--danger); }
.vord .status-refunded { background: var(--danger-bg); color: var(--danger); border-color: rgba(239,68,68,0.32); }

/* detail header */
.vord-back { display: inline-flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; }
.vord-back svg { width: 16px; height: 16px; }
.vord-back:hover { color: var(--text-primary); }
/* detail header + meta strip + single-column flow (replaces the old 2-col grid + summary sidebar) */
.vord-detail-flow { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.vord-dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.vord-dhead-main { min-width: 0; }
.vord-dtitle-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vord-detail-h { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: var(--ls-tight); margin: 0; }
.vord-onum { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-weight: var(--fw-semibold); }
.vord-status-wrap { flex-shrink: 0; }
.vord-dsub { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.vord-dsub a { color: var(--text-secondary); }
.vord-dsub a:hover { color: var(--accent); }
.vord-msgbtn { flex-shrink: 0; }
.vord-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-muted); margin: -2px 0 2px; }
.vord-meta-i { display: inline-flex; align-items: center; gap: 4px; }
.vord-meta-i svg { width: 14px; height: 14px; opacity: .85; }
.vord-meta-i.mono { font-variant-numeric: tabular-nums; }
.vord-meta-sep { color: var(--border-hover); }

/* detail section cards */
.vord-section { overflow: hidden; }
.vord-sec-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.vord-sec-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--bg-tertiary); display: grid; place-items: center; color: var(--text-secondary); flex-shrink: 0; }
.vord-sec-ic svg { width: 16px; height: 16px; }
.vord-sec-t { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-lg); }
.vord-sec-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }

/* banners */
.vord-banner { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: var(--fs-sm); line-height: 1.45; }
.vord-banner svg { width: 18px; height: 18px; flex-shrink: 0; }
.vord-banner .grow { flex: 1; min-width: 0; }
.vord-banner.amber { background: var(--warning-bg); border-color: rgba(251,191,36,0.25); color: var(--warning); }
.vord-banner.danger { background: var(--danger-bg); border-color: rgba(239,68,68,0.25); color: var(--danger); }
.vord-banner.info { background: rgba(96,165,250,0.10); border-color: rgba(96,165,250,0.25); color: #60a5fa; }
.vord-banner .btn { flex-shrink: 0; }
.vord-helper { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }


/* ── Global credential component (.hl-cred / .hl-credlist) — buyer My Licenses, buyer order
      detail, vendor order detail. Mask-first reveal + copy + account accordion + block list.
      Driven by the delegated binder in app.js + the shared .copy-btn handler. ── */
.hl-cred { display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%; }
.hl-cred-val { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: var(--fs-sm); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.hl-cred-btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; border: none; background: none; color: var(--text-muted); cursor: pointer; flex-shrink: 0; transition: color var(--transition), background var(--transition); }
.hl-cred-btn svg { width: 16px; height: 16px; }
.hl-cred-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.hl-cred-reveal.on { color: var(--accent); }
.hl-cred-btn.copy-btn.ok { color: var(--success); }

.hl-cred-acc { display: flex; flex-direction: column; min-width: 0; width: 100%; }
.hl-cred-acc-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hl-cred-acc-head .hl-cred { flex: 1 1 auto; }
.hl-cred-acc-toggle svg { transition: transform var(--transition); }
.hl-cred-acc-toggle.on { color: var(--accent); }
.hl-cred-acc-toggle.on svg { transform: rotate(90deg); }
.hl-cred-acc-fields { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 8px 10px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.hl-cred-field { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hl-cred-field-k { font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-semibold); min-width: 64px; flex-shrink: 0; }
.hl-cred-field .hl-cred { flex: 1 1 auto; }
.hl-cred-field .hl-cred-val { font-size: var(--fs-xs); }

.hl-credlist { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-secondary); overflow: hidden; }
.hl-credlist-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; min-width: 0; }
.hl-credlist.is-collapsible .hl-credlist-head { cursor: pointer; }
.hl-credlist-toggle { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 0; margin: 0; border: none; background: none; color: var(--text-primary); font: inherit; cursor: default; text-align: left; }
.hl-credlist.is-collapsible .hl-credlist-toggle { cursor: pointer; }
.hl-credlist-chev { display: none; place-items: center; color: var(--text-muted); flex-shrink: 0; }
.hl-credlist-chev svg { width: 16px; height: 16px; transition: transform var(--transition); }
.hl-credlist.is-collapsible .hl-credlist-chev { display: grid; }
.hl-credlist.is-collapsible:not(.collapsed) .hl-credlist-chev svg { transform: rotate(90deg); }
.hl-credlist-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-credlist-count { color: var(--text-muted); font-weight: var(--fw-medium); }
.hl-credlist-tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.hl-credlist-revealall, .hl-credlist-tool { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--text-muted); background: none; border: none; padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; transition: color var(--transition), background var(--transition); }
.hl-credlist-revealall svg, .hl-credlist-tool svg { width: 14px; height: 14px; }
.hl-credlist-revealall:hover, .hl-credlist-tool:hover { color: var(--text-primary); background: var(--bg-hover); }
.hl-credlist-body { border-top: 1px solid var(--border); background: var(--bg-card); }
.hl-credlist.collapsed .hl-credlist-body { display: none; }
.hl-credlist-unit { display: flex; align-items: flex-start; gap: 10px; padding: 7px 12px; min-width: 0; }
.hl-credlist-unit + .hl-credlist-unit { border-top: 1px solid var(--border); }
.hl-credlist-extra { display: none; }
.hl-credlist-n { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: var(--fs-2xs); color: var(--text-muted); min-width: 22px; flex-shrink: 0; padding-top: 7px; }
.hl-credlist-unit-cred { flex: 1 1 auto; min-width: 0; }
.hl-credlist-showall { width: 100%; text-align: center; font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--accent); background: none; border: none; border-top: 1px solid var(--border); padding: 8px; cursor: pointer; transition: background var(--transition); }
.hl-credlist-showall:hover { background: var(--bg-hover); }
/* buyer dashboard My Licenses — inline credential + compact actions row under the head */
.license-cred-line { display: flex; align-items: center; gap: 8px; padding: 6px 16px 12px; min-width: 0; }
.license-cred-line > .hl-cred, .license-cred-line > .hl-cred-acc { flex: 1 1 auto; min-width: 0; }

/* action rows */
.vord-btn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vord-btn-row form { margin: 0; }
.vord-btn-row .btn svg { width: 16px; height: 16px; }
.vord-cancel { display: flex; flex-direction: column; gap: 10px; }
.vord-cancel .btn svg { width: 16px; height: 16px; }
.vord-cancelbox { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px; }
.vord-cancelbox-sum { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: var(--fs-sm); color: var(--text-secondary); list-style: none; }
.vord-cancelbox-sum::-webkit-details-marker { display: none; }
.vord-cancelbox-sum svg { width: 14px; height: 14px; color: var(--danger); flex-shrink: 0; }
.vord-cancelbox-chev { margin-left: auto; display: inline-grid; place-items: center; }
.vord-cancelbox-chev svg { color: var(--text-muted); transition: transform var(--transition); }
.vord-cancelbox[open] .vord-cancelbox-chev svg { transform: rotate(90deg); }
.vord-cancelbox[open] .vord-cancelbox-sum { margin-bottom: 10px; }

/* refund — compact segmented control (Full | Partial) + one-line summary */
.vord-refund-card .vord-sec-body { gap: 11px; }
.vord-refund-form { display: flex; flex-direction: column; gap: 11px; }
.vord-refund-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vord-rseg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.vord-rseg-opt { display: inline-flex; align-items: center; cursor: pointer; }
.vord-rseg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.vord-rseg-opt span { display: inline-block; padding: 5px 16px; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-secondary); transition: background var(--transition), color var(--transition); }
.vord-rseg-opt + .vord-rseg-opt span { border-left: 1px solid var(--border); }
.vord-rseg-opt:has(input:checked) span { background: var(--accent-glow); color: var(--accent); }
.vord-rseg-opt:focus-within span { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.vord-refund-sum { font-size: var(--fs-xs); color: var(--text-muted); }
.vord-refund-sum b { color: var(--text-secondary); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.vord-refund-inputs { display: flex; gap: 10px; flex-wrap: wrap; }
.vord-refund-inputs .form-input { flex: 1; min-width: 140px; }
.vord-refund-form:has(input[name="refund_mode"][value="full"]:checked) #vendorRefundAmount { display: none; }

/* activity — horizontal stepper (left → right) */
.vord-tlh { display: flex; align-items: flex-start; }
.vord-tlh-step { flex: 1 1 0; min-width: 0; }
.vord-tlh-step.last { flex: 0 0 auto; }
.vord-tlh-track { display: flex; align-items: center; }
.vord-tlh-node { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
.vord-tlh-line { flex: 1; height: 2px; background: var(--border); margin-left: 2px; }
.vord-tlh-step.done .vord-tlh-node { background: var(--success); }
.vord-tlh-step.done .vord-tlh-line { background: var(--success); opacity: .4; }
.vord-tlh-step.danger .vord-tlh-node { background: var(--danger); }
.vord-tlh-step.pending .vord-tlh-node { background: var(--bg-tertiary); border: 2px solid var(--border); }
.vord-tlh-t { font-size: var(--fs-xs); font-weight: var(--fw-medium); margin-top: 8px; padding-right: 10px; }
.vord-tlh-step.pending .vord-tlh-t { color: var(--text-muted); }
.vord-tlh-d { font-size: var(--fs-2xs); color: var(--text-muted); font-variant-numeric: tabular-nums; padding-right: 10px; margin-top: 1px; }

/* manual-delivery modal (reuses .hl-modal-*) */
.vord-modal .ml-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vord-modal .ml-field { display: flex; flex-direction: column; gap: 5px; }
.vord-modal .ml-field--full { grid-column: 1 / -1; }
.vord-modal .ml-field label { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-medium); }
.vord-unit-h { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); margin: 6px 0 0; }
.vord-mb { margin-bottom: 4px; }

/* focus-visible */
.vord-tab:focus-visible,
.vord-act-btn:focus-visible,
.vord-back:focus-visible,
.hl-cred-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .vord *, .vord-modal * { animation: none !important; transition: none !important; } }

/* responsive */
@media (max-width: 720px) {
  .vord-title { font-size: var(--fs-2xl); }
  .vord-head-actions { width: 100%; }
  .vord-barsearch { margin-left: 0; flex: 1 1 100%; min-width: 0; }
  .vord-modal .ml-fields { grid-template-columns: 1fr; }
  /* list → stacked cards */
  .vord-otable thead { display: none; }
  .vord-otable, .vord-otable tbody, .vord-otable tr, .vord-otable td { display: block; }
  .vord-otable tr { padding: 14px 16px; border-bottom: 1px solid var(--border); position: relative; }
  .vord-otable td { padding: 3px 0; border: none; }
  .vord-otable td[data-label]::before { content: attr(data-label) ": "; color: var(--text-muted); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); font-weight: var(--fw-semibold); margin-right: 6px; }
  .vord-otable td.vord-c-act::before { display: none; }
  .vord-otable td.vord-c-act { position: absolute; top: 12px; right: 12px; padding: 0; }
  .vord-otable .vord-oidcell { flex-direction: row; align-items: center; gap: 8px; }
  .vord-otable .td-truncate { max-width: 70vw; }
}

/* =====================================================================
   VENDOR PRODUCTS REDESIGN (2026-06-13) — list + Add/Edit + Inventory in
   the dashboard/orders premium language.
   - List/Inventory scoped to .vprod (new classes).
   - Editor polish scoped to .vendor-pap (the .pap-* layout is SHARED with
     admin/product-add — admin/content editors stay untouched).
   ===================================================================== */
.vprod { display: flex; flex-direction: column; gap: var(--space-4); }
.vprod *, .vprod *::before, .vprod *::after { box-sizing: border-box; }
.vprod svg { display: block; }
.vprod-notice { margin-bottom: 0; }

/* page head */
.vprod-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.vprod-eyebrow { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: 4px; }
.vprod-title { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 0; }
.vprod-sub { color: var(--text-secondary); font-size: var(--fs-base); margin: 7px 0 0; max-width: 560px; }
.vprod-head .btn svg, .vprod-detail-top .btn svg { width: 16px; height: 16px; }
.vprod-back { display: inline-flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; }
.vprod-back svg { width: 16px; height: 16px; }
.vprod-back:hover { color: var(--text-primary); }
.vprod-detail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.vprod-detail-h { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: var(--ls-tight); margin: 0; }

/* section label */
.vprod-sectlabel { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: 2px 0 0; }
.vprod-sectlabel svg { width: 17px; height: 17px; color: var(--text-secondary); }
.vprod-sectlabel .c { font-variant-numeric: tabular-nums; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-muted); background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 7px; padding: 1px 8px; }

/* Drafts now reuse the shared admin .pap-draft-* card system (single source) — see vendor-products.php. */

/* list bar (search + status) */
.vprod-listbar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; flex-wrap: wrap; }
.vprod-barsearch { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 9px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 13px; height: var(--control-h-sm); color: var(--text-muted); }
.vprod-barsearch svg { width: 15px; height: 15px; flex-shrink: 0; }
.vprod-barsearch input { background: none; border: none; outline: none; color: var(--text-primary); font: inherit; font-size: var(--fs-sm); width: 100%; }
.vprod-barsearch input::placeholder { color: var(--text-muted); }
.vprod-selectbox select { appearance: none; -webkit-appearance: none; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); height: var(--control-h-sm); padding: 0 34px 0 13px; cursor: pointer; outline: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 17px) center, calc(100% - 12px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.vprod-selectbox select:focus { border-color: var(--border-hover); }

/* published table */
.vprod-list-card { overflow: hidden; }
.vprod-ptable { width: 100%; border-collapse: collapse; }
.vprod-ptable th { text-align: left; font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-semibold); padding: 11px 20px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); }
.vprod-ptable td { padding: 13px 20px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); vertical-align: middle; }
.vprod-ptable tbody tr:last-child td { border-bottom: none; }
.vprod-ptable tbody tr { transition: background var(--transition); }
.vprod-ptable tbody tr:hover { background: var(--bg-hover); }
.vprod-ptable .text-right { text-align: right; }
.vprod-pname { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vprod-pic { width: 38px; height: 38px; border-radius: 9px; background: var(--bg-tertiary); display: grid; place-items: center; flex-shrink: 0; color: var(--text-muted); overflow: hidden; }
.vprod-pic img { width: 100%; height: 100%; object-fit: cover; }
.vprod-pic svg { width: 18px; height: 18px; }
.vprod-pnametext { min-width: 0; }
.vprod-pnametext .pn { font-weight: var(--fw-medium); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.vprod-pnametext .pt { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }
.vprod-pprice { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.vprod-pstock { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.vprod-pstock .ico { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.vprod-pstock.zero { color: var(--warning); }
.vprod-pstock.zero .ico { background: var(--warning); }
.vprod-note { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; max-width: 280px; }
.vprod-prowact { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.vprod-prowact .vendor-inline-form { display: inline; }
/* compact search (blog-bar size) + list⇄gallery view */
.vprod-listbar .vprod-barsearch { flex: 0 1 280px; }
.vprod-viewwrap[data-view="list"] .vprod-gallery { display: none; }
.vprod-viewwrap[data-view="gallery"] .vprod-list-card { display: none; }
.vprod-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: var(--space-4); }
.vprod-gcard { display: flex; flex-direction: column; gap: 9px; padding: 15px 16px; background: transparent; border: 1.5px solid var(--border); border-radius: var(--radius-lg); transition: border-color var(--transition), transform var(--transition); }
.vprod-gcard:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.vprod-gtop { display: flex; align-items: center; }
.vprod-gcard .pap-draft-visual { margin-bottom: 0; }
.vprod-gname { font-weight: var(--fw-semibold); font-size: var(--fs-base); color: var(--text-primary); line-height: 1.34; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vprod-gsub { font-size: var(--fs-xs); color: var(--text-muted); }
.vprod-gmeta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 11px; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.vprod-gfoot { display: flex; gap: 7px; flex-wrap: wrap; }
.vprod-gfoot .btn { flex: 1 1 auto; justify-content: center; }
.vprod-gfoot .vendor-inline-form { flex: 1 1 auto; display: flex; }
.vprod-gfoot .vendor-inline-form .btn { width: 100%; }

/* status/badge pills (scoped) */
.vprod .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .03em; text-transform: none; line-height: 1.5; }

/* inventory stats + codes */
.vprod-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.vprod-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--highlight-top); }
.vprod-stat .k { font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-semibold); }
.vprod-stat .v { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
.vprod-stat .v.zero { color: var(--warning); }
.vprod-code { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: var(--fs-sm); }
.vprod-codedate { color: var(--text-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

.vprod-back:focus-visible,
.vprod-barsearch input:focus-visible, .vprod-selectbox select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ── EDITOR PREMIUM POLISH (scoped to .vendor-pap) ─────────────────── */
/* The top action bar uses the shared admin .pap-status-bar look (bg + bottom border + sticky)
   so the vendor editor reads identically to admin — no transparency/borderless override here. */
/* each form section → premium card */
.vendor-pap .pap-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 22px; margin-bottom: var(--space-3); box-shadow: var(--highlight-top); scroll-margin-top: 96px; }
.vendor-pap .pap-section-header { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0 0 16px; padding: 0; border: none; }
.vendor-pap .pap-form { padding: 0 var(--space-4); }
/* left section nav (scroll-spy) */
.vendor-pap .pap-nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; transition: background var(--transition), color var(--transition); }
.vendor-pap .pap-nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.vendor-pap .pap-nav-item.is-active,
.vendor-pap .pap-nav-item[aria-current="true"] { background: var(--accent-glow); color: var(--text-primary); }
.vendor-pap .pap-nav-icon { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); font-size: 0; color: transparent; flex-shrink: 0; transition: all var(--transition); }
.vendor-pap .pap-nav-item.is-complete .pap-nav-icon { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-size: 11px; }
.vendor-pap .pap-nav-item.is-missing .pap-nav-icon { border-color: var(--danger); }
/* language tabs */
.vendor-pap .pap-lang-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); overflow-x: auto; }
.vendor-pap .pap-lang-tab { padding: 11px 14px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; background: none; cursor: pointer; }
.vendor-pap .pap-lang-tab:hover { color: var(--text-secondary); }
.vendor-pap .pap-lang-tab.is-active { color: var(--text-primary); border-bottom-color: var(--accent); }
/* pricing breakdown — highlight the net row */
.vendor-pap #vpeBreakdown { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px 14px; }
.vendor-pap #vpeBreakdown .ms-prog-row:last-child { background: var(--accent-glow); margin: 0 -14px; padding: 10px 14px; border-bottom: none; border-radius: 0 0 var(--radius-md) var(--radius-md); }
.vendor-pap #vpeBreakdown .ms-prog-val { font-variant-numeric: tabular-nums; }
.vendor-pap .pap-cur-preview { display: flex; flex-wrap: wrap; gap: 7px; }
/* platform checkboxes → chips */
.vendor-pap .vendor-checks { display: flex; flex-wrap: wrap; gap: 9px; }
.vendor-pap .vendor-check { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-secondary); cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); transition: all var(--transition); user-select: none; }
.vendor-pap .vendor-check:hover { color: var(--text-primary); }
.vendor-pap .vendor-check:has(input:checked) { color: var(--text-primary); border-color: var(--accent); background: var(--accent-glow); }
/* image preview */
.vendor-pap .pap-img-preview-wrap { border: 1.5px dashed var(--border); border-radius: var(--radius-md); min-height: 140px; display: grid; place-items: center; background: var(--bg-secondary); overflow: hidden; }
.vendor-pap .pap-img-placeholder { color: var(--text-muted); font-size: var(--fs-sm); padding: 20px; }
/* right rail: actions + previews */
.vendor-pap .pap-preview-sticky { display: flex; flex-direction: column; gap: 14px; }
.pap-actions { display: flex; flex-direction: column; gap: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; box-shadow: var(--highlight-top); }
.pap-actions .pap-autosave-status { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); display: inline-flex; align-items: center; gap: 7px; }
.pap-actions-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pap-actions-btns .btn { flex: 1; justify-content: center; min-width: 0; }
.pap-actions-btns .btn-primary { flex-basis: 100%; }
.vendor-pap .pap-preview-title { font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-semibold); }
.vendor-pap .pap-card-preview { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-secondary); }
.vendor-pap .pap-card-img { height: 140px; background: var(--bg-tertiary); display: grid; place-items: center; border-bottom: 1px solid var(--border); }
.vendor-pap .pap-card-body { padding: 12px 14px 14px; }
.vendor-pap .pap-card-price { font-variant-numeric: tabular-nums; color: var(--accent); }
.vendor-pap .pap-seo-preview { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; background: var(--bg-secondary); }

@media (prefers-reduced-motion: reduce) { .vprod *, .vendor-pap * { animation: none !important; transition: none !important; } }

/* ── responsive ── */
@media (max-width: 768px) {
  .vprod-title { font-size: var(--fs-2xl); }
  .vprod-head .btn { width: 100%; justify-content: center; }
  /* published table → cards */
  .vprod-ptable thead { display: none; }
  .vprod-ptable, .vprod-ptable tbody, .vprod-ptable tr, .vprod-ptable td { display: block; }
  .vprod-ptable tr { padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .vprod-ptable td { padding: 4px 0; border: none; }
  .vprod-ptable td[data-label]::before { content: attr(data-label) ": "; color: var(--text-muted); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); font-weight: var(--fw-semibold); margin-right: 6px; }
  .vprod-ptable .vprod-pname { margin: 2px 0 6px; }
  .vprod-prowact { justify-content: flex-start; margin-top: 8px; }
  .vprod-prowact .btn, .vprod-prowact .vendor-inline-form { flex: 1; }
  .vprod-prowact .vendor-inline-form .btn { width: 100%; }
}

/* editor: left nav → horizontal sticky scroll-spy strip (instead of hiding it) */
@media (max-width: 1024px) {
  .vendor-pap .pap-layout { grid-template-columns: 1fr 300px; }
  .vendor-pap .pap-nav { display: block; }
  .vendor-pap .pap-nav-sticky { position: sticky; top: 60px; z-index: 25; display: flex; flex-direction: row; gap: 6px; overflow-x: auto; padding: 8px 0; background: var(--bg-primary); -webkit-overflow-scrolling: touch; max-height: none; }
  .vendor-pap .pap-nav-item { flex-shrink: 0; border: 1px solid var(--border); border-radius: 999px; padding: 8px 13px; background: var(--bg-secondary); }
  .vendor-pap .pap-nav-icon { display: none; }
}
/* editor: previews hide on small screens, actions become the sticky bottom publish bar */
@media (max-width: 768px) {
  .vendor-pap .pap-layout { grid-template-columns: 1fr; }
  .vendor-pap .pap-nav { display: none; }
  .vendor-pap .pap-preview { display: block; position: static; }
  .vendor-pap .pap-preview-sticky { position: static; max-height: none; gap: 0; }
  .vendor-pap .pap-preview-sticky > .pap-preview-title,
  .vendor-pap .pap-preview-sticky > .pap-card-preview,
  .vendor-pap .pap-preview-sticky > .pap-seo-preview,
  .vendor-pap .pap-preview-sticky > .pap-back-link { display: none; }
  .vendor-pap .pap-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; flex-direction: row; align-items: center; border-radius: 0; border-left: none; border-right: none; border-bottom: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--bg-secondary); }
  .vendor-pap .pap-actions .pap-autosave-status { flex: 1; min-width: 0; }
  .vendor-pap .pap-actions-btns { flex: 0 0 auto; }
  .vendor-pap .pap-actions-btns .btn { flex: 0 0 auto; }
  .vendor-pap .pap-actions-btns .btn-primary { flex-basis: auto; }
  .vendor-pap .pap-form { padding: 0 0 76px; }
}

/* =====================================================================
   VENDOR BULK OPERATIONS REDESIGN (2026-06-13) — 3 clear tasks
   (Add stock · Update products · Import & export) in the premium vendor
   language. Scoped to .vbulk. Reuses .vord-sec-head / .vord-banner / .badge.
   ===================================================================== */
.vbulk { display: flex; flex-direction: column; gap: var(--space-4); }
.vbulk *, .vbulk *::before, .vbulk *::after { box-sizing: border-box; }
.vbulk svg { display: block; }
.vbulk-eyebrow { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: 4px; }
.vbulk-title { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 0; }
.vbulk-sub { color: var(--text-secondary); font-size: var(--fs-base); margin: 7px 0 0; max-width: 620px; }
.vbulk-info { margin: 0; }

/* task tabs */
.vbulk-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.vbulk-tab { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--radius-md); text-align: left; cursor: pointer; transition: border-color var(--transition), background var(--transition); flex: 1; min-width: 220px; font: inherit; color: inherit; }
.vbulk-tab:hover { border-color: var(--border-hover); }
.vbulk-tab .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--bg-tertiary); display: grid; place-items: center; color: var(--text-secondary); flex-shrink: 0; transition: all var(--transition); }
.vbulk-tab .ic svg { width: 18px; height: 18px; }
.vbulk-tab .tx { min-width: 0; }
.vbulk-tab .t { font-weight: var(--fw-semibold); font-size: var(--fs-base); display: block; }
.vbulk-tab .d { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; display: block; }
.vbulk-tab.on { border-color: var(--accent); background: var(--accent-glow); }
.vbulk-tab.on .ic { background: var(--accent); color: var(--accent-contrast); }
.vbulk-tab.on .t { color: var(--text-primary); }

.vbulk-panel { display: none; }
.vbulk-panel.show { display: block; }
.vbulk-pcard { overflow: hidden; }
.vbulk-pbody { padding: 20px 22px 22px; }
.vbulk-intro { color: var(--text-secondary); font-size: var(--fs-sm); margin: 0 0 18px; max-width: 660px; line-height: 1.55; }
.vbulk-flabel { font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-semibold); display: block; margin-bottom: 7px; }
.vbulk-codes { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: var(--fs-sm); line-height: 1.7; min-height: 150px; resize: vertical; }

/* T1 add stock */
.vbulk-stock-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.vbulk-fmt { display: flex; gap: 13px; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-secondary); margin: 14px 0; }
.vbulk-fmt .fic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--bg-tertiary); color: var(--text-muted); }
.vbulk-fmt .fic svg { width: 18px; height: 18px; }
.vbulk-fmt .ft { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.vbulk-fmt .fd { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 3px; line-height: 1.5; }
.vbulk-fmt .fex { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 6px; }
.vbulk-fmt.ok { border-color: var(--accent); background: var(--accent-glow); }
.vbulk-fmt.ok .fic { background: var(--accent); color: var(--accent-contrast); }
.vbulk-fmt.warn { border-color: rgba(251,191,36,.3); background: var(--warning-bg); }
.vbulk-fmt.warn .fic { background: var(--warning-bg); color: var(--warning); }
.vbulk-codes-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.vbulk-count { font-size: var(--fs-xs); color: var(--text-muted); }
.vbulk-count b { color: var(--accent); font-variant-numeric: tabular-nums; }
.vbulk-orsplit { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--text-muted); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.vbulk-orsplit::before, .vbulk-orsplit::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.vbulk-drop { display: flex; align-items: center; gap: 13px; padding: 16px; border: 1.5px dashed var(--border); border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; transition: border-color var(--transition), color var(--transition); }
.vbulk-drop:hover { border-color: var(--accent); color: var(--text-primary); }
.vbulk-drop svg { width: 22px; height: 22px; color: var(--text-muted); flex-shrink: 0; }
.vbulk-drop .dt { font-size: var(--fs-sm); font-weight: var(--fw-medium); display: block; }
.vbulk-drop .dd { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; display: block; }
.vbulk-drop input { display: none; }
.vbulk-pool { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-secondary); }
.vbulk-pool .ptop { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.vbulk-pool .pname { font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.vbulk-pool .pname.ph { color: var(--text-muted); font-weight: var(--fw-medium); }
.vbulk-deliv { display: inline-flex; align-items: center; margin-top: 8px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; }
.vbulk-deliv.key { background: rgba(96,165,250,.12); color: #60a5fa; }
.vbulk-deliv.account { background: var(--accent-glow); color: var(--text-primary); }
.vbulk-deliv.invitation { background: var(--warning-bg); color: var(--warning); }
.vbulk-deliv.none { background: var(--bg-tertiary); color: var(--text-muted); }
.vbulk-pool .prow { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); }
.vbulk-pool .prow .k { color: var(--text-muted); }
.vbulk-pool .prow .v { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.vbulk-pool .prow.new { background: var(--accent-glow); }
.vbulk-pool .prow.new .k { color: var(--text-primary); font-weight: var(--fw-semibold); }
.vbulk-pool .prow.new .v { color: var(--accent); font-size: var(--fs-md); }
.vbulk-pool .pact { padding: 14px 16px; }
.vbulk-pool .pact .btn { width: 100%; justify-content: center; }
.vbulk-pool .pact .btn svg { width: 16px; height: 16px; }

/* T2 update */
.vbulk-opbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.vbulk-field { display: flex; flex-direction: column; min-width: 180px; }
.vbulk-field.grow { flex: 1; }
.vbulk-runbtn { height: var(--control-h); }
.vbulk-runbtn svg { width: 16px; height: 16px; }
.vbulk-valnote { font-size: var(--fs-xs); color: var(--text-muted); padding: 4px 0 0; }
.vbulk-selcount { font-size: var(--fs-sm); color: var(--text-secondary); margin: 14px 0 10px; }
.vbulk-selcount b { color: var(--accent); font-variant-numeric: tabular-nums; }
.vbulk-list-card { overflow: hidden; }
.vbulk-ptable { width: 100%; border-collapse: collapse; }
.vbulk-ptable th { text-align: left; font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-semibold); padding: 11px 16px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); }
.vbulk-ptable td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); vertical-align: middle; }
.vbulk-ptable tbody tr:last-child td { border-bottom: none; }
.vbulk-ptable tbody tr { transition: background var(--transition); cursor: default; }
.vbulk-ptable tbody tr:hover { background: var(--bg-hover); }
.vbulk-ptable tbody tr.sel { background: var(--accent-glow); }
.vbulk-cb-col { width: 46px; }
.vbulk-cb { width: 19px; height: 19px; border-radius: 6px; border: 2px solid var(--border-hover); display: grid; place-items: center; cursor: pointer; transition: all var(--transition); }
.vbulk-cb svg { width: 12px; height: 12px; color: var(--accent-contrast); opacity: 0; }
.vbulk-cb.on { background: var(--accent); border-color: var(--accent); }
.vbulk-cb.on svg { opacity: 1; }
.vbulk-pname { display: flex; align-items: center; gap: 11px; min-width: 0; }
.vbulk-pic { width: 34px; height: 34px; border-radius: 9px; background: var(--bg-tertiary); display: grid; place-items: center; flex-shrink: 0; color: var(--text-muted); }
.vbulk-pic svg { width: 16px; height: 16px; }
.vbulk-pnametext { min-width: 0; }
.vbulk-pnametext .pn { font-weight: var(--fw-medium); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.vbulk-pnametext .pt { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }
.vbulk-pprice { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.vbulk-pstock { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.vbulk-pstock.zero { color: var(--warning); }

/* T3 import/export */
.vbulk-colspec { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 18px; }
.vbulk-col { display: grid; grid-template-columns: 170px 1fr; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.vbulk-col:last-child { border-bottom: none; }
.vbulk-col .name { font-family: ui-monospace, "JetBrains Mono", monospace; color: var(--accent); font-weight: var(--fw-semibold); }
.vbulk-col .name .req { color: var(--text-muted); font-family: var(--font); font-size: var(--fs-2xs); margin-left: 6px; }
.vbulk-col .desc { color: var(--text-secondary); }
.vbulk-impgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.vbulk-ie-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.vbulk-ie-actions .btn svg { width: 16px; height: 16px; }

/* progress */
.vbulk-progress { overflow: hidden; }
.vbulk-bar { height: 8px; border-radius: 5px; background: var(--bg-tertiary); overflow: hidden; }
.vbulk-fill { display: block; height: 100%; background: var(--accent); transition: width var(--transition); }
.vbulk-stat { font-size: var(--fs-sm); color: var(--text-secondary); margin: 10px 0 0; font-variant-numeric: tabular-nums; }
.vbulk-errors { margin: 10px 0 0; padding-left: 18px; color: var(--danger); font-size: var(--fs-xs); display: flex; flex-direction: column; gap: 3px; }

/* toast */
.vbulk-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); z-index: 90; background: var(--bg-card-hover); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 13px 17px; font-size: var(--fs-sm); font-weight: var(--fw-medium); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity var(--transition), transform var(--transition); max-width: min(440px, 90vw); }
.vbulk-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.vbulk-tab:focus-visible, .vbulk-cb:focus-visible, .vbulk-drop:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .vbulk *, .vbulk-toast { animation: none !important; transition: none !important; } }

/* responsive */
@media (max-width: 980px) {
  .vbulk-tabs { flex-direction: column; }
  .vbulk-stock-grid { grid-template-columns: 1fr; }
  .vbulk-impgrid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .vbulk-title { font-size: var(--fs-2xl); }
  .vbulk-col { grid-template-columns: 1fr; gap: 3px; }
  .vbulk-field { width: 100%; min-width: 0; }
  .vbulk-runbtn { width: 100%; justify-content: center; }
  .vbulk-c-stock { display: none; }
  .vbulk-pnametext .pn { max-width: 60vw; }
}

/* =====================================================================
   VENDOR BLOG & GUIDES REDESIGN (2026-06-13) — KPI strip + draft cards +
   scannable content list, premium vendor language. Scoped to .vcon.
   Reuses .vord-banner / .vdash-empty / .badge(+badge-*).
   ===================================================================== */
.vcon { display: flex; flex-direction: column; gap: var(--space-4); }
.vcon *, .vcon *::before, .vcon *::after { box-sizing: border-box; }
.vcon svg { display: block; }
.vcon-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.vcon-eyebrow { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: 4px; }
.vcon-title { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 0; }
.vcon-sub { color: var(--text-secondary); font-size: var(--fs-base); margin: 7px 0 0; max-width: 600px; }
.vcon-head-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.vcon-head-actions .btn svg { width: 16px; height: 16px; }
.vcon-info { margin: 0; }

/* KPI strip */
.vcon-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.vcon-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; display: flex; align-items: center; gap: 14px; box-shadow: var(--highlight-top); }
.vcon-kpi .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; background: var(--bg-tertiary); color: var(--text-secondary); }
.vcon-kpi .ic svg { width: 19px; height: 19px; }
.vcon-kpi .ic.pub { background: var(--success-bg); color: var(--success); }
.vcon-kpi .ic.dft { background: var(--warning-bg); color: var(--warning); }
.vcon-kpi .ic.arc { background: var(--bg-tertiary); color: var(--text-muted); }
.vcon-kpi .ic.vw  { background: rgba(96,165,250,.12); color: #60a5fa; }
.vcon-kpi .v { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.vcon-kpi .l { font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-semibold); margin-top: 5px; }

/* section label */
.vcon-sectlabel { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: 2px 0 0; }
.vcon-sectlabel svg { width: 17px; height: 17px; color: var(--text-secondary); }
.vcon-sectlabel .c { font-variant-numeric: tabular-nums; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-muted); background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 7px; padding: 1px 8px; }

/* draft cards — equal size, fixed button positions */
.vcon-drafts { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: var(--space-3); }
.vcon-draft { display: flex; flex-direction: column; border: 1px solid var(--border); background: var(--bg-card); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition), transform var(--transition); }
.vcon-draft:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.vcon-draft-thumb { position: relative; height: 118px; background: var(--bg-tertiary); display: grid; place-items: center; border-bottom: 1px solid var(--border); overflow: hidden; }
.vcon-draft-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vcon-draft-ph svg { width: 28px; height: 28px; color: var(--text-muted); }
.vcon-draft-badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.vcon-bdg { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; border-radius: 7px; padding: 3px 8px; backdrop-filter: blur(4px); }
.vcon-bdg.draft { color: var(--warning); background: rgba(11,12,14,.65); border: 1px solid rgba(251,191,36,.45); }
.vcon-bdg.type { color: var(--text-secondary); background: rgba(11,12,14,.6); border: 1px solid var(--border); }
.vcon-draft-body { padding: 12px 14px 0; flex: 1; min-width: 0; }
.vcon-draft-name { font-weight: var(--fw-semibold); font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcon-draft-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }
.vcon-draft-foot { display: flex; gap: 8px; padding: 14px; }
.vcon-draft-foot .btn { flex: 1; justify-content: center; }
.vcon-draft-foot .vendor-inline-form { flex: 0 0 auto; display: inline; }
.vcon-trash { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-muted); display: grid; place-items: center; cursor: pointer; transition: all var(--transition); }
.vcon-trash svg { width: 16px; height: 16px; }
.vcon-trash:hover { color: var(--danger); border-color: rgba(239,68,68,.4); }

/* content toolbar */
.vcon-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; flex-wrap: wrap; }
.vcon-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.vcon-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; transition: all var(--transition); }
.vcon-tab:hover { color: var(--text-primary); }
.vcon-tab.on { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.vcon-tab .c { font-variant-numeric: tabular-nums; font-size: var(--fs-2xs); font-weight: var(--fw-bold); background: var(--bg-tertiary); color: var(--text-muted); border-radius: 6px; padding: 1px 7px; }
.vcon-tab.on .c { background: rgba(0,0,0,.16); color: var(--accent-contrast); }
.vcon-barsearch { margin-left: auto; display: flex; align-items: center; gap: 9px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 13px; height: var(--control-h-sm); min-width: 210px; color: var(--text-muted); }
.vcon-barsearch svg { width: 15px; height: 15px; flex-shrink: 0; }
.vcon-barsearch input { background: none; border: none; outline: none; color: var(--text-primary); font: inherit; font-size: var(--fs-sm); width: 100%; }
.vcon-barsearch input::placeholder { color: var(--text-muted); }
.vcon-selectbox select { appearance: none; -webkit-appearance: none; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); height: var(--control-h-sm); padding: 0 34px 0 13px; cursor: pointer; outline: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 17px) center, calc(100% - 12px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

/* content table */
.vcon-list-card { overflow: hidden; }
.vcon-ctable { width: 100%; border-collapse: collapse; }
.vcon-ctable th { text-align: left; font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-semibold); padding: 11px 20px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); }
.vcon-ctable td { padding: 13px 20px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); vertical-align: middle; }
.vcon-ctable tbody tr:last-child td { border-bottom: none; }
.vcon-ctable tbody tr { transition: background var(--transition); }
.vcon-ctable tbody tr:hover { background: var(--bg-hover); }
.vcon-ctable .text-right { text-align: right; }
.vcon-titlecell { display: flex; align-items: center; gap: 13px; min-width: 0; }
.vcon-tico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.vcon-tico svg { width: 18px; height: 18px; }
.vcon-tico.article { background: rgba(96,165,250,.12); color: #60a5fa; }
.vcon-tico.guide { background: var(--accent-glow); color: var(--accent); }
.vcon-titletext { min-width: 0; }
.vcon-titletext .tt { font-weight: var(--fw-medium); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.vcon-titletext .ts { font-family: ui-monospace, "JetBrains Mono", monospace; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; display: block; }
.vcon-typetag { color: var(--text-secondary); font-size: var(--fs-sm); }
.vcon .badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; text-transform: none; letter-spacing: .02em; }
.vcon-note { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; max-width: 320px; }
.vcon-views { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.vcon-updated { color: var(--text-muted); font-size: var(--fs-xs); }
.vcon-rowact { display: inline-flex; gap: 7px; justify-content: flex-end; align-items: center; }
.vcon-actbtn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; text-decoration: none; transition: all var(--transition); }
.vcon-actbtn svg { width: 16px; height: 16px; }
.vcon-actbtn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.vcon-actbtn.disabled { opacity: .4; pointer-events: none; }

/* shared "more" menu */
.vcon-rowmenu { position: fixed; z-index: 80; min-width: 178px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px; box-shadow: var(--shadow-lg); }
.vcon-rowmenu[hidden] { display: none; }
.vcon-rowmenu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-primary); text-align: left; background: none; border: none; cursor: pointer; }
.vcon-rowmenu button[hidden] { display: none; }
.vcon-rowmenu button svg { width: 15px; height: 15px; }
.vcon-rowmenu button:hover { background: var(--bg-hover); }
.vcon-rowmenu button.del { color: var(--danger); }
.vcon-rowmenu button.del:hover { background: var(--danger-bg); }
.vcon-rowmenu .sep { height: 1px; background: var(--border); margin: 5px 4px; }

/* ── view toggle (list ⇄ gallery), segmented, sits next to the search box ── */
.vcon-barsearch { margin-left: 0; }
.vcon-viewtoggle { margin-left: auto; display: inline-flex; gap: 3px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; }
.vcon-vbtn { width: 34px; height: calc(var(--control-h-sm) - 8px); border: none; background: none; border-radius: 7px; display: grid; place-items: center; color: var(--text-muted); cursor: pointer; transition: background var(--transition), color var(--transition); }
.vcon-vbtn svg { width: 16px; height: 16px; }
.vcon-vbtn.on { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--highlight-top); }
.vcon-vbtn:hover:not(.on) { color: var(--text-primary); }

/* ── gallery view: cards (outlined 1.5px, rounded), action slots fixed ── */
.vcon-viewwrap[data-view="list"] .vcon-gallery { display: none; }
.vcon-viewwrap[data-view="gallery"] .vcon-list-card { display: none; }
.vcon-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: var(--space-4); }
.vcon-gcard { display: flex; flex-direction: column; gap: 9px; padding: 15px 16px; background: transparent; border: 1.5px solid var(--border); border-radius: var(--radius-lg); transition: border-color var(--transition), transform var(--transition); }
.vcon-gcard[hidden] { display: none; }
.vcon-gcard:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.vcon-gcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vcon-gstatus { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-secondary); min-width: 0; }
.vcon-gstatus i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex-shrink: 0; }
.vcon-gstatus.success { color: var(--success); } .vcon-gstatus.success i { background: var(--success); }
.vcon-gstatus.warning { color: var(--warning); } .vcon-gstatus.warning i { background: var(--warning); }
.vcon-gstatus.error   { color: var(--danger); }  .vcon-gstatus.error i   { background: var(--danger); }
.vcon-gstatus.muted   { color: var(--text-muted); } .vcon-gstatus.muted i { background: var(--text-muted); }
.vcon-gcard .vcon-kebab { flex-shrink: 0; }
.vcon-gtype { font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-semibold); }
.vcon-gtitle { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.34; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vcon-gslug { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcon-gnote { font-size: var(--fs-xs); color: var(--danger); line-height: 1.45; }
.vcon-gmeta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 11px; border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-muted); }
.vcon-gviews { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.vcon-gviews svg { width: 14px; height: 14px; }
.vcon-gupd { text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcon-gfoot { display: flex; gap: 8px; }
.vcon-gfoot .btn { flex: 1; justify-content: center; }
.vcon-gfoot .vcon-gdis { opacity: .45; pointer-events: none; cursor: default; }
.vcon-gallery .vdash-empty { grid-column: 1 / -1; }
/* gallery card reuses the product-draft fixed 88px visual; the card already uses gap, so drop its margin */
.vcon-gcard .pap-draft-visual { margin-bottom: 0; }

/* focus-visible */
.vcon-tab:focus-visible, .vcon-actbtn:focus-visible, .vcon-trash:focus-visible,
.vcon-rowmenu button:focus-visible, .vcon-barsearch input:focus-visible, .vcon-selectbox select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .vcon * { animation: none !important; transition: none !important; } }

/* responsive */
@media (max-width: 980px) { .vcon-kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
  .vcon-title { font-size: var(--fs-2xl); }
  .vcon-head-actions { width: 100%; }
  .vcon-head-actions .btn { flex: 1; justify-content: center; }
  .vcon-drafts { grid-template-columns: 1fr 1fr; gap: 11px; }
  .vcon-toolbar { align-items: stretch; }
  .vcon-barsearch { margin-left: 0; }
  .vcon-tabs { overflow-x: auto; }
  /* content table → cards */
  .vcon-ctable thead { display: none; }
  .vcon-ctable, .vcon-ctable tbody, .vcon-ctable tr, .vcon-ctable td { display: block; }
  .vcon-ctable tr { padding: 14px 16px; border-bottom: 1px solid var(--border); position: relative; }
  .vcon-ctable td { padding: 3px 0; border: none; }
  .vcon-ctable .vcon-c-type { display: none; }
  .vcon-ctable .vcon-c-title { margin-bottom: 8px; padding-right: 44px; }
  .vcon-ctable td[data-label]:not(.vcon-c-title):not(.vcon-c-act)::before { content: attr(data-label) ": "; color: var(--text-muted); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); font-weight: var(--fw-semibold); margin-right: 6px; }
  .vcon-ctable .vcon-c-act { position: absolute; top: 12px; right: 12px; padding: 0; }
  .vcon-titletext .tt { max-width: 64vw; }
}
@media (max-width: 480px) { .vcon-kpis { grid-template-columns: 1fr 1fr; } .vcon-drafts { grid-template-columns: 1fr; } }

/* =====================================================================
   VENDOR MESSAGES REDESIGN (2026-06-13) — two-pane inbox, conventional
   bubble sides, pinned ORDER DETAILS + status safety banners. Scoped .vmsg.
   Reuses .vord-banner / .vdash-empty / .btn.
   ===================================================================== */
.vmsg { display: flex; flex-direction: column; gap: var(--space-3); }
.vmsg *, .vmsg *::before, .vmsg *::after { box-sizing: border-box; }
.vmsg svg { display: block; }
/* Filter/search hide: .vmsg-conv sets display:flex, which would override the bare [hidden]
   attribute — so the list never filtered. This (specificity 0,2,0) re-asserts the hide. */
.vmsg [hidden] { display: none; }
.vmsg-notice { margin: 0; }
.vmsg-head .vmsg-eyebrow { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: 4px; }
.vmsg-title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 0; }
.vmsg-mor { margin: 0; font-size: var(--fs-xs); }

.vmsg-inbox { display: grid; grid-template-columns: 360px 1fr; height: min(76vh, 860px); min-height: 520px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--highlight-top); }

/* LEFT list */
.vmsg-list { display: flex; flex-direction: column; border-right: 1px solid var(--border); min-width: 0; min-height: 0; }
.vmsg-list-head { padding: 14px 14px 11px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.vmsg-search { display: flex; align-items: center; gap: 9px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 12px; height: var(--control-h-sm); color: var(--text-muted); margin-bottom: 11px; }
.vmsg-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.vmsg-search input { background: none; border: none; outline: none; color: var(--text-primary); font: inherit; font-size: var(--fs-sm); width: 100%; }
.vmsg-search input::placeholder { color: var(--text-muted); }
.vmsg-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.vmsg-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: var(--fw-semibold); cursor: pointer; transition: all var(--transition); }
.vmsg-tab:hover { color: var(--text-primary); }
.vmsg-tab.on { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.vmsg-tab .c { font-variant-numeric: tabular-nums; font-size: var(--fs-2xs); font-weight: var(--fw-bold); background: var(--bg-tertiary); color: var(--text-muted); border-radius: 5px; padding: 0 5px; }
.vmsg-tab.on .c { background: rgba(0,0,0,.16); color: var(--accent-contrast); }
.vmsg-scroll { flex: 1; overflow-y: auto; min-height: 0; }

.vmsg-conv { display: flex; gap: 9px; padding: 7px 13px; border-bottom: 1px solid var(--border); cursor: pointer; position: relative; transition: background var(--transition); text-decoration: none; color: inherit; }
.vmsg-conv:hover { background: var(--bg-hover); }
.vmsg-conv.active { background: var(--bg-hover); }
.vmsg-conv.active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--accent); border-radius: 0 3px 3px 0; }
.vmsg-av { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--bg-tertiary); color: var(--text-secondary); font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; align-self: center; }
.vmsg-cbody { flex: 1; min-width: 0; display: block; }
.vmsg-cbody .crow1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vmsg-cbody .cname { font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); }
.vmsg-conv.unread .cname { color: var(--text-primary); }
.vmsg-cbody .ctime { font-size: var(--fs-2xs); color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
/* Compact 2-line card: row1 = name + time, row2 = order ref (truncates) + status chip. */
.vmsg-cbody .crow2 { display: flex; align-items: center; gap: 7px; margin-top: 2px; min-width: 0; }
.vmsg-cbody .cref { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.vmsg-undot { position: absolute; right: 14px; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

/* status chips + pills (shared keys) */
.vmsg-chip, .vmsg-statpill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-weight: var(--fw-bold); white-space: nowrap; }
.vmsg-chip { font-size: var(--fs-2xs); letter-spacing: .03em; padding: 2px 9px; text-transform: uppercase; }
.vmsg-statpill { font-size: var(--fs-xs); padding: 5px 11px; flex-shrink: 0; }
.vmsg-chip i, .vmsg-statpill i { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.vmsg-chip.delivered, .vmsg-statpill.delivered { background: var(--success-bg); color: var(--success); } .vmsg-chip.delivered i, .vmsg-statpill.delivered i { background: var(--success); }
.vmsg-chip.awaiting, .vmsg-statpill.awaiting { background: var(--warning-bg); color: var(--warning); } .vmsg-chip.awaiting i, .vmsg-statpill.awaiting i { background: var(--warning); }
.vmsg-chip.disputed, .vmsg-statpill.disputed { background: var(--warning-bg); color: var(--warning); } .vmsg-chip.disputed i, .vmsg-statpill.disputed i { background: var(--warning); }
.vmsg-chip.cancelled, .vmsg-statpill.cancelled, .vmsg-chip.refunded, .vmsg-statpill.refunded { background: var(--danger-bg); color: var(--danger); } .vmsg-chip.cancelled i, .vmsg-statpill.cancelled i, .vmsg-chip.refunded i, .vmsg-statpill.refunded i { background: var(--danger); }
.vmsg-chip.presale, .vmsg-statpill.presale, .vmsg-chip.open, .vmsg-statpill.open { background: rgba(96,165,250,.12); color: #60a5fa; } .vmsg-chip.presale i, .vmsg-statpill.presale i { background: #60a5fa; }
/* Conversation-list status DOT — replaces the verbose chip text in the left list (the label still
   shows in the open thread + on hover via title). Right-aligned so every row's dot lines up in one
   column; colour = the order's real status. */
.vmsg-cdot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
.vmsg-cdot.delivered { background: var(--success); }
.vmsg-cdot.awaiting, .vmsg-cdot.disputed { background: var(--warning); }
.vmsg-cdot.cancelled, .vmsg-cdot.refunded { background: var(--danger); }
.vmsg-cdot.presale, .vmsg-cdot.open { background: #60a5fa; }
/* Status-info popover trigger next to the thread header pill — the "i" takes the status colour and
   reuses the shared .vui-hint popover (toggle/outside-click/Escape handled by app.js). */
.vmsg-stinfo { flex-shrink: 0; }
.vmsg-stinfo .vui-hint-btn { color: var(--text-muted); }
.vmsg-stinfo.awaiting .vui-hint-btn, .vmsg-stinfo.awaiting.open .vui-hint-btn,
.vmsg-stinfo.disputed .vui-hint-btn, .vmsg-stinfo.disputed.open .vui-hint-btn { color: var(--warning); }
.vmsg-stinfo .vui-hint-pop b { color: var(--text-primary); }
.vmsg-stinfo-act { display: inline-block; margin-top: 9px; font-weight: var(--fw-semibold); color: var(--accent); text-decoration: none; }
.vmsg-stinfo-act:hover { text-decoration: underline; }

/* RIGHT thread */
.vmsg-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.vmsg-empty-pane { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-muted); padding: 30px; text-align: center; }
.vmsg-empty-pane svg { width: 40px; height: 40px; opacity: .5; }
.vmsg-empty-pane p { font-size: var(--fs-sm); }
.vmsg-th-head { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.vmsg-back { display: none; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); place-items: center; flex-shrink: 0; }
.vmsg-back svg { width: 16px; height: 16px; }
.vmsg-htitle { flex: 1; min-width: 0; }
.vmsg-htitle .ht { font-weight: var(--fw-semibold); font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vmsg-htitle .hf { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.vmsg-th-scroll { flex: 1; overflow-y: auto; padding: 18px; min-height: 0; }

.vmsg-odetails { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-secondary); overflow: hidden; margin-bottom: 14px; }
.vmsg-odetails .oth { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-semibold); }
.vmsg-odetails .oth svg { width: 14px; height: 14px; color: var(--text-secondary); }
.vmsg-odetails .obody { display: flex; align-items: center; gap: 13px; padding: 13px 14px; }
.vmsg-odetails .oico { width: 46px; height: 46px; border-radius: 10px; background: var(--bg-tertiary); display: grid; place-items: center; flex-shrink: 0; color: var(--text-secondary); overflow: hidden; }
.vmsg-odetails .oico img { width: 100%; height: 100%; object-fit: cover; }
.vmsg-odetails .oico svg { width: 22px; height: 22px; }
.vmsg-odetails .oinfo { flex: 1; min-width: 0; }
.vmsg-odetails .opn { font-weight: var(--fw-semibold); font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vmsg-odetails .ometa { font-variant-numeric: tabular-nums; font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vmsg-odetails .ometa .sep { color: var(--text-muted); }
.vmsg-oact { flex-shrink: 0; }

.vmsg-warn { display: flex; align-items: flex-start; gap: 11px; border-radius: var(--radius-md); padding: 12px 15px; font-size: var(--fs-sm); margin-bottom: 14px; line-height: 1.5; }
.vmsg-warn svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.vmsg-warn .grow { flex: 1; }
.vmsg-warn b { font-weight: var(--fw-bold); }
.vmsg-warn .btn { margin-top: 8px; }
.vmsg-warn.danger { background: var(--danger-bg); border: 1px solid rgba(239,68,68,.32); color: var(--danger); }
.vmsg-warn.danger b { color: var(--text-primary); }
.vmsg-warn.amber { background: var(--warning-bg); border: 1px solid rgba(251,191,36,.3); color: var(--warning); }
.vmsg-warn.amber b { color: var(--text-primary); }
/* Cancelled/refunded warning stays pinned at the top of the thread while the vendor scrolls — it
   must never scroll out of sight (anti-fraud). Layered bg = opaque (bg-card) under the danger tint
   so scrolling messages don't bleed through the pinned banner. */
.vmsg-warn.danger.vmsg-warn--persist { position: sticky; top: 0; z-index: 3; background: linear-gradient(var(--danger-bg), var(--danger-bg)), var(--bg-card); }
.vmsg-safety { display: flex; align-items: flex-start; gap: 9px; font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; padding: 0 2px; margin-bottom: 16px; }
.vmsg-safety svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }

/* messages — conventional sides */
.vmsg-sys { display: flex; justify-content: center; margin: 14px 0; }
.vmsg-sys .pill { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 14px; text-align: center; max-width: 82%; }
.vmsg-sys .pl { font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-bold); }
.vmsg-sys .pt { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 3px; }
.vmsg-sys .ptime { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.vmsg-row { display: flex; margin-bottom: 12px; gap: 9px; }
.vmsg-row.buyer { justify-content: flex-start; }
.vmsg-row.you { justify-content: flex-end; }
.vmsg-mav { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--bg-tertiary); color: var(--text-secondary); font-size: var(--fs-2xs); font-weight: var(--fw-bold); align-self: flex-end; text-transform: uppercase; }
.vmsg-bubble { max-width: 74%; padding: 10px 13px; border-radius: 14px; font-size: var(--fs-sm); line-height: 1.5; }
.vmsg-row.buyer .vmsg-bubble { background: var(--bg-secondary); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.vmsg-row.you .vmsg-bubble { background: var(--accent-glow); border: 1px solid var(--accent); border-bottom-right-radius: 5px; }
.vmsg-bubble .who { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--text-muted); margin-bottom: 3px; }
.vmsg-row.you .vmsg-bubble .who { color: var(--text-secondary); }
.vmsg-bubble .bt { word-break: break-word; }
.vmsg-bubble .bt-time { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 5px; font-variant-numeric: tabular-nums; }
.vmsg-flag { font-size: var(--fs-2xs); color: var(--warning); margin-top: 5px; }
.vmsg .msg-proof-img { max-width: 220px; border-radius: 8px; margin-top: 6px; }
.vmsg .msg-proof-label { margin-top: 6px; font-size: var(--fs-xs); }
.vmsg-report { margin-top: 5px; }
.vmsg-report-btn { background: none; border: none; color: var(--text-muted); font-size: var(--fs-2xs); cursor: pointer; padding: 0; text-decoration: underline; }
.vmsg-report-btn:hover { color: var(--danger); }

/* composer */
.vmsg-composer { border-top: 1px solid var(--border); padding: 14px 16px; flex-shrink: 0; background: var(--bg-card); }
.vmsg-composer-main { display: flex; flex-direction: column; gap: 10px; }
.vmsg-composer-main textarea { width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 13px; color: var(--text-primary); font: inherit; font-size: var(--fs-sm); outline: none; resize: none; min-height: 46px; max-height: 140px; }
.vmsg-composer-main textarea:focus { border-color: var(--border-hover); }
.vmsg-composer-main textarea::placeholder { color: var(--text-muted); }
.vmsg-composer-row { display: flex; align-items: center; gap: 9px; }
.vmsg-composer-row .spacer { flex: 1; }
.vmsg-composer-row .btn svg { width: 15px; height: 15px; }
.vmsg-attach { display: inline-flex; }
.vmsg-attach-trigger { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: var(--fw-semibold); cursor: pointer; }
.vmsg-attach-trigger:hover { color: var(--text-primary); }
.vmsg-attach-trigger svg { width: 15px; height: 15px; }
.vmsg-attach-form { display: none; }
.vmsg-closed { color: var(--text-muted); font-size: var(--fs-sm); text-align: center; padding: 6px; }

.vmsg-conv:focus-visible, .vmsg-tab:focus-visible, .vmsg-back:focus-visible,
.vmsg-search input:focus-visible, .vmsg-report-btn:focus-visible, .vmsg-attach-trigger:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .vmsg * { animation: none !important; transition: none !important; } }

/* responsive — collapse to one pane */
@media (max-width: 920px) {
  .vmsg-inbox { grid-template-columns: 1fr; height: calc(100vh - 210px); min-height: 480px; }
  .vmsg-thread { display: none; }
  .vmsg-inbox.has-thread .vmsg-list { display: none; }
  .vmsg-inbox.has-thread .vmsg-thread { display: flex; }
  .vmsg-back { display: grid; }
}
@media (max-width: 520px) {
  .vmsg-th-head .vmsg-vieworder span { display: none; }
  .vmsg-bubble { max-width: 84%; }
}

/* ============================================================================
   VENDOR REVIEWS & RATINGS (.vrev) — premium store-vs-product review manager.
   Tokens only (dark + light), responsive, focus-visible, reduced-motion.
   ============================================================================ */
.vrev .vrev-eyebrow { color: var(--text-secondary); font-size: 13px; margin-bottom: 4px; }
.vrev .vrev-sub { color: var(--text-secondary); font-size: 13.5px; line-height: 1.55; margin-top: 8px; max-width: 680px; }
.vrev .vrev-alert { margin-bottom: var(--space-4); }

.vrev .vrev-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.vrev .vrev-stars svg { width: 14px; height: 14px; fill: var(--warning); stroke: none; }
.vrev .vrev-stars svg.off { fill: var(--bg-tertiary); }
.vrev .vrev-stars-lg svg { width: 19px; height: 19px; }

.vrev .vrev-sum { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-4); align-items: stretch; }
/* Explicit, UNMISTAKABLE card chrome — base .card paint blends into the dark page (see the vendor-list
   note), which made these summaries read as plain text. Give every .vrev card a visible bg + border. */
.vrev .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.vrev .vrev-scard { padding: 15px 16px; overflow: visible; }   /* overflow:visible so the info "i" popover can escape the card */
.vrev .vrev-slbl { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 10px; }
.vrev .vrev-slbl .vrev-slbl-t { flex: 1 1 auto; min-width: 0; }   /* push the info hint to the row's end */
.vrev .vrev-slbl .vui-hint { flex-shrink: 0; text-transform: none; letter-spacing: normal; }
.vrev .vrev-madeof { font-size: 12px; color: var(--text-muted); margin: -2px 0 10px; font-variant-numeric: tabular-nums; }
.vrev .vrev-ic { width: 24px; height: 24px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--bg-tertiary); border: 1px solid var(--border); }
.vrev .vrev-ic svg { width: 14px; height: 14px; fill: none; stroke: var(--text-secondary); stroke-width: 1.8; }
.vrev .vrev-bigrow { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.vrev .vrev-big { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1; color: var(--text-primary); }
.vrev .vrev-stars-lg svg { width: 16px; height: 16px; }
.vrev .vrev-cnt { color: var(--text-muted); font-size: 12px; margin-bottom: 10px; }

.vrev .vrev-dist { display: flex; flex-direction: column; gap: 4px; }
.vrev .vrev-drow { display: flex; align-items: center; gap: 10px; font-size: 11.5px; }
.vrev .vrev-dlab { width: 28px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 3px; }
.vrev .vrev-dlab svg { width: 10px; height: 10px; fill: var(--warning); }
.vrev .vrev-dbar { flex: 1; height: 5px; background: var(--bg-tertiary); border-radius: 5px; overflow: hidden; }
.vrev .vrev-dbar i { display: block; height: 100%; background: var(--warning); border-radius: 5px; }
.vrev .vrev-dn { width: 18px; text-align: right; color: var(--text-muted); }

.vrev .vrev-ppb { margin-bottom: var(--space-4); overflow: hidden; padding: 0; }
.vrev .vrev-ppb-head { display: flex; align-items: baseline; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.vrev .vrev-ppb-t { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text-primary); }
.vrev .vrev-ppb-head small { color: var(--text-muted); font-size: 12px; }
.vrev .vrev-prow { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--border); }
.vrev .vrev-prow:last-child { border-bottom: none; }
.vrev .vrev-pic { width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--bg-tertiary); border: 1px solid var(--border); display: grid; place-items: center; flex-shrink: 0; }
.vrev .vrev-pic svg { width: 13px; height: 13px; stroke: var(--text-secondary); fill: none; stroke-width: 1.7; }
.vrev .vrev-pn { flex: 1; min-width: 0; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrev .vrev-pavg { font-family: var(--font-display); font-weight: 700; font-size: 15px; width: 34px; text-align: right; color: var(--text-primary); }
.vrev .vrev-pmini { width: 120px; height: 7px; background: var(--bg-tertiary); border-radius: 5px; overflow: hidden; flex-shrink: 0; }
.vrev .vrev-pmini i { display: block; height: 100%; background: var(--warning); border-radius: 5px; }
.vrev .vrev-prc { font-size: 12px; color: var(--text-muted); width: 72px; text-align: right; }

/* Per-product card (3rd summary card) — compact scrollable list of product averages */
.vrev .vrev-ppcard { display: flex; flex-direction: column; max-height: 320px; }
.vrev .vrev-pplist { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -4px; padding-right: 2px; }
.vrev .vrev-pprow { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.vrev .vrev-pprow:last-child { border-bottom: none; }
.vrev .vrev-ppname { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrev .vrev-pprow .vrev-stars { flex-shrink: 0; }
.vrev .vrev-pprow .vrev-stars svg { width: 11px; height: 11px; }
.vrev .vrev-ppavg { flex-shrink: 0; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.vrev .vrev-ppavg small { font-family: var(--font-sans); font-weight: 500; font-size: 11px; color: var(--text-muted); margin-left: 3px; }
.vrev .vrev-ppempty { color: var(--text-muted); font-size: 12.5px; padding: 8px 0; }

.vrev .vrev-needs { display: flex; align-items: center; gap: 12px; background: var(--warning-bg); border: 1px solid var(--warning); border-radius: var(--radius-md); padding: 12px 16px; font-size: 13px; color: var(--text-primary); margin-bottom: var(--space-4); }
.vrev .vrev-needs > svg { width: 18px; height: 18px; stroke: var(--warning); fill: none; stroke-width: 1.8; flex-shrink: 0; }
.vrev .vrev-needs-txt { flex: 1; line-height: 1.5; }
.vrev .vrev-needs .btn { flex-shrink: 0; }

.vrev .vrev-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: var(--space-4); flex-wrap: wrap; }
.vrev .vrev-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.vrev .vrev-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.vrev .vrev-tab:hover { color: var(--text-primary); }
.vrev .vrev-tab.on { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.vrev .vrev-c { font-size: 11px; font-weight: 700; background: var(--bg-tertiary); color: var(--text-secondary); border-radius: 6px; padding: 1px 7px; }
.vrev .vrev-tab.on .vrev-c { background: var(--accent-contrast); color: var(--accent); }
.vrev .vrev-filters { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vrev .vrev-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; min-height: var(--control-h-sm); transition: background .15s, color .15s, border-color .15s; }
.vrev .vrev-toggle.on { border-color: var(--warning); color: var(--warning); background: var(--warning-bg); }
.vrev .vrev-sw { width: 15px; height: 15px; border-radius: 4px; border: 2px solid var(--text-muted); display: grid; place-items: center; flex-shrink: 0; }
.vrev .vrev-toggle.on .vrev-sw { background: var(--warning); border-color: var(--warning); }
.vrev .vrev-sw svg { width: 9px; height: 9px; stroke: var(--accent-contrast); fill: none; stroke-width: 3; opacity: 0; }
.vrev .vrev-toggle.on .vrev-sw svg { opacity: 1; }
.vrev .vrev-selectbox { position: relative; display: inline-flex; }
.vrev .vrev-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vrev .vrev-selectbox select { appearance: none; -webkit-appearance: none; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 12.5px; font-weight: 500; padding: 9px 34px 9px 13px; cursor: pointer; outline: none; min-height: var(--control-h-sm); }
.vrev .vrev-selectbox::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: translateY(-65%) rotate(45deg); pointer-events: none; }

/* Scrollable container holding the review stream (~10 visible, scroll for up to 50) */
.vrev .vrev-liststack { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px; max-height: 620px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.vrev .vrev-list { display: flex; flex-direction: column; gap: 8px; }
.vrev .vrev-viewall { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: var(--space-3); }
.vrev .vrev-viewall svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Each review is a collapsible <details>: summary = compact header, body revealed by the chevron */
.vrev .vrev-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.vrev .vrev-summary { display: flex; align-items: flex-start; gap: 10px; padding: 10px 13px; cursor: pointer; list-style: none; user-select: none; transition: background .15s; }
.vrev .vrev-summary::-webkit-details-marker { display: none; }
.vrev .vrev-summary:hover { background: var(--bg-tertiary); }
.vrev .vrev-chev { flex-shrink: 0; align-self: center; width: 22px; height: 22px; display: grid; place-items: center; color: var(--text-muted); transition: transform .18s ease; }
.vrev .vrev-chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.vrev .vrev-card[open] > .vrev-summary { border-bottom: 1px solid var(--border); background: var(--bg-tertiary); }
.vrev .vrev-card[open] .vrev-chev { transform: rotate(180deg); }
.vrev .vrev-cardbody { padding: 12px 13px; }
.vrev .vrev-dot-unans { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); flex-shrink: 0; }
.vrev .vrev-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 7px; }
.vrev .vrev-ava { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.vrev .vrev-meta { flex: 1; min-width: 0; }
.vrev .vrev-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vrev .vrev-name { font-weight: 600; font-size: 13.5px; color: var(--text-primary); max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrev .vrev-tbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 6px; text-transform: uppercase; }
.vrev .vrev-tbadge svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.vrev .vrev-tbadge.store { background: var(--accent); color: var(--accent-contrast); }
.vrev .vrev-tbadge.product { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.vrev .vrev-verified { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--success); font-weight: 600; }
.vrev .vrev-verified svg { width: 12px; height: 12px; stroke: var(--success); fill: none; stroke-width: 2; }
.vrev .vrev-time { margin-left: auto; font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.vrev .vrev-prod { font-size: 12px; color: var(--text-secondary); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrev .vrev-prod b { color: var(--text-primary); font-weight: 600; }
.vrev .vrev-title { font-weight: 600; font-size: 14px; margin: 3px 0 4px; color: var(--text-primary); overflow-wrap: anywhere; }
.vrev .vrev-body { color: var(--text-secondary); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }

/* Footer: compact action row — collapsible Reply toggle + bottom-right flag (answered = reply block + flag) */
.vrev .vrev-foot { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; }
.vrev .vrev-foot .vrev-flagform { margin-top: 0; margin-left: auto; flex-shrink: 0; }
.vrev .vrev-replytog { flex: 1 1 auto; min-width: 0; }
.vrev .vrev-reply-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 600; color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 7px 14px; min-height: var(--control-h-sm); transition: background .15s, border-color .15s, color .15s; }
.vrev .vrev-reply-btn::-webkit-details-marker { display: none; }
.vrev .vrev-reply-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.vrev .vrev-reply-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.vrev .vrev-replytog[open] .vrev-reply-btn { background: var(--bg-tertiary); border-color: var(--border-hover); }
.vrev .vrev-replytog[open] .vrev-replyform { margin-top: 10px; }

.vrev .vrev-reply { border-left: 2px solid var(--accent); background: var(--bg-secondary); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 11px 13px; margin-top: 10px; }
.vrev .vrev-reply-lbl { font-weight: 700; font-size: 12px; margin-bottom: 5px; color: var(--text-primary); }
.vrev .vrev-reply-body { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.vrev .vrev-reply-edit { margin-top: 10px; }
.vrev .vrev-edit-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-primary); font-weight: 600; cursor: pointer; list-style: none; }
.vrev .vrev-edit-link::-webkit-details-marker { display: none; }
.vrev .vrev-edit-link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.vrev .vrev-note { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-muted); margin-top: 10px; }
.vrev .vrev-note svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.vrev .vrev-replyform { margin-top: 13px; }
.vrev .vrev-replyform-edit { margin-top: 10px; }
.vrev .vrev-replyform textarea { width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 14px; color: var(--text-primary); font-size: 13px; outline: none; resize: vertical; min-height: 64px; font-family: inherit; transition: border-color .15s, background .15s; }
.vrev .vrev-replyform textarea:focus { border-color: var(--border-hover); background: var(--bg-card); }
.vrev .vrev-replyform textarea::placeholder { color: var(--text-muted); }
.vrev .vrev-replyrow { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.vrev .vrev-hint { font-size: 11.5px; color: var(--text-muted); }

.vrev .vrev-flagform { margin-top: 12px; }
.vrev .vrev-flag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-muted); font-weight: 500; background: none; border: none; cursor: pointer; padding: 0; transition: color .15s; }
.vrev .vrev-flag svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.vrev .vrev-flag:hover { color: var(--danger); }

.vrev .vrev-empty { padding: 32px 20px; text-align: center; color: var(--text-muted); font-size: 13.5px; }

.vrev .vrev-tab:focus-visible,
.vrev .vrev-toggle:focus-visible,
.vrev .vrev-selectbox select:focus-visible,
.vrev .vrev-edit-link:focus-visible,
.vrev .vrev-flag:focus-visible,
.vrev .vrev-needs .btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

@media (max-width: 720px) {
  .vrev .vrev-sum { grid-template-columns: 1fr; }
  .vrev .vrev-bar { flex-direction: column; align-items: stretch; }
  .vrev .vrev-filters { margin-left: 0; }
  .vrev .vrev-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .vrev .vrev-pmini { display: none; }
  .vrev .vrev-prow .vrev-stars { display: none; }
  .vrev .vrev-time { margin-left: 0; width: 100%; order: 5; }
  .vrev .vrev-needs { flex-wrap: wrap; }
  .vrev .vrev-needs .btn { width: 100%; }
  .vrev .vrev-liststack { max-height: 70vh; }
  .vrev .vrev-ppcard { max-height: none; }
  .vrev .vrev-pplist { max-height: 240px; }
}
@media (max-width: 480px) {
  .vrev .vrev-summary { padding: 10px 11px; gap: 8px; }
  .vrev .vrev-cardbody { padding: 11px; }
  .vrev .vrev-name { max-width: 52vw; }
  /* footer stacks; Reply / Flag / Post become full-width ≥44px tap targets */
  .vrev .vrev-foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .vrev .vrev-foot .vrev-flagform { margin-left: 0; }
  .vrev .vrev-replytog { width: 100%; }
  .vrev .vrev-reply-btn { width: 100%; justify-content: center; min-height: 44px; }
  .vrev .vrev-flag { min-height: 44px; }
  .vrev .vrev-replyform textarea { min-height: 84px; }
  .vrev .vrev-replyrow { gap: 8px; }
  .vrev .vrev-replyrow .btn { width: 100%; min-height: 44px; }
  .vrev .vrev-scard { padding: 13px 14px; }
  .vrev .vrev-big { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) { .vrev * { animation: none !important; transition: none !important; } }

/* ============================================================================
   VENDOR DISPUTES (.vdisp) — premium dispute resolution center (list + detail).
   Money-at-risk; platform decides. Tokens only (dark+light), responsive, a11y.
   ============================================================================ */
.vdisp .vdisp-eyebrow { color: var(--text-secondary); font-size: 13px; margin-bottom: 4px; }
.vdisp .vdisp-ph h1 { margin: 0; }
.vdisp .vdisp-sub { color: var(--text-secondary); font-size: 13.5px; line-height: 1.55; margin-top: 8px; max-width: 720px; }
.vdisp .vdisp-sub b { color: var(--text-primary); font-weight: 600; }
.vdisp .vdisp-alert { margin-bottom: var(--space-4); }
.vdisp .mono { font-variant-numeric: tabular-nums; }

/* summary cards — reuse the dashboard .vdash-kpi card (see .vdash-kpis); these add the
   clickable-link behaviour + the descriptive sub-line that replaces the KPI delta row. */
.vdisp-kpi { text-decoration: none; color: inherit; cursor: pointer; }
.vdisp-kpi-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 10px; line-height: 1.4; }
/* even the page rhythm: the KPI grid keeps the same var(--space-4) gap below it as the
   needs-bar / filter-bar do, so the amber needs-bar isn't flush against the cards above. */
.vdisp .vdisp-kpis { margin-bottom: var(--space-4); }

/* needs-attention bar */
.vdisp .vdisp-needs-bar { display: flex; align-items: center; gap: 12px; background: var(--warning-bg); border: 1px solid var(--warning); border-radius: var(--radius-md); padding: 12px 16px; font-size: 13px; color: var(--text-primary); margin-bottom: var(--space-4); }
.vdisp .vdisp-needs-bar > svg { width: 18px; height: 18px; stroke: var(--warning); flex-shrink: 0; }
.vdisp .vdisp-needs-txt { flex: 1; line-height: 1.5; } .vdisp .vdisp-needs-txt b { color: var(--text-primary); font-weight: 700; }
.vdisp .vdisp-needs-bar .btn { flex-shrink: 0; }

/* tabs + filters bar */
.vdisp .vdisp-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: var(--space-4); flex-wrap: wrap; }
.vdisp .vdisp-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.vdisp .vdisp-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.vdisp .vdisp-tab:hover { color: var(--text-primary); }
.vdisp .vdisp-tab.on { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.vdisp .vdisp-c { font-size: 11px; font-weight: 700; background: var(--bg-tertiary); color: var(--text-secondary); border-radius: 6px; padding: 1px 7px; }
.vdisp .vdisp-tab.on .vdisp-c { background: var(--accent-contrast); color: var(--accent); }
.vdisp .vdisp-filters { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vdisp .vdisp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vdisp .vdisp-selectbox { position: relative; display: inline-flex; }
.vdisp .vdisp-selectbox select { appearance: none; -webkit-appearance: none; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 12.5px; font-weight: 500; padding: 9px 34px 9px 13px; cursor: pointer; outline: none; min-height: var(--control-h-sm); }
.vdisp .vdisp-selectbox::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: translateY(-65%) rotate(45deg); pointer-events: none; }
.vdisp .vdisp-search { display: flex; align-items: center; gap: 8px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 12px; min-height: var(--control-h-sm); color: var(--text-muted); }
.vdisp .vdisp-search svg { width: 14px; height: 14px; stroke: currentColor; }
.vdisp .vdisp-search input { background: none; border: none; outline: none; color: var(--text-primary); font-size: 12.5px; width: 160px; }
.vdisp .vdisp-search input::placeholder { color: var(--text-muted); }

/* status badges (shared tones) */
.vdisp .vdisp-sb, .vdisp .vdisp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.vdisp .vdisp-sb i, .vdisp .vdisp-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.vdisp .vdisp-sb.needs, .vdisp .vdisp-pill.needs { background: var(--warning-bg); color: var(--warning); }
.vdisp .vdisp-sb.await, .vdisp .vdisp-pill.await { background: var(--bg-tertiary); color: var(--text-secondary); }
.vdisp .vdisp-sb.review, .vdisp .vdisp-pill.review { background: var(--bg-tertiary); color: var(--text-secondary); }
.vdisp .vdisp-sb.mediation, .vdisp .vdisp-pill.mediation { background: var(--bg-hover); color: var(--text-primary); border: 1px solid var(--border-hover); }
.vdisp .vdisp-sb.loss, .vdisp .vdisp-pill.loss { background: var(--danger-bg); color: var(--danger); }
.vdisp .vdisp-sb.win, .vdisp .vdisp-pill.win { background: var(--success-bg); color: var(--success); }
.vdisp .vdisp-sb.closed, .vdisp .vdisp-pill.closed { background: var(--bg-tertiary); color: var(--text-muted); }

/* list table */
.vdisp .vdisp-tbl { overflow: hidden; padding: 0; }
.vdisp .vdisp-thead, .vdisp .vdisp-trow { display: grid; grid-template-columns: 60px 1fr 150px 168px 184px 84px; gap: 14px; align-items: center; }
.vdisp .vdisp-thead { padding: 13px 20px; border-bottom: 1px solid var(--border); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.vdisp .vdisp-trow { padding: 15px 20px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; color: inherit; }
.vdisp .vdisp-trow:last-of-type { border-bottom: none; }
.vdisp .vdisp-trow:hover { background: var(--bg-hover); }
.vdisp .vdisp-id { font-family: var(--font-display); font-weight: 600; color: var(--text-secondary); }
.vdisp .vdisp-prod { font-weight: 500; color: var(--text-primary); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdisp .vdisp-amt { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 3px; font-variant-numeric: tabular-nums; }
.vdisp .vdisp-buyer { font-size: 13px; color: var(--text-secondary); }
.vdisp .vdisp-type { font-size: 12.5px; color: var(--text-secondary); }
.vdisp .vdisp-opened { display: block; font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.vdisp .vdisp-viewcol { text-align: right; }
.vdisp .vdisp-mlab { display: none; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 3px; }
.vdisp .vdisp-empty { padding: 32px 20px; text-align: center; color: var(--text-muted); font-size: 13.5px; }

/* title + info hint row */
.vdisp .vdisp-titlerow { display: flex; align-items: center; gap: 8px; }
.vdisp .vdisp-titlerow h1 { margin: 0; }
.vdisp .vdisp-titlerow .vui-hint { flex-shrink: 0; }

/* dispute LIST as 3-per-row equal outlined rounded cards (action inside the card) */
.vdisp .vdisp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: stretch; }
.vdisp .vdisp-card { display: flex; flex-direction: column; gap: 9px; padding: 15px 17px; background: transparent; border: 1.5px solid var(--border); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: border-color .14s, background .14s; }
.vdisp .vdisp-card[hidden] { display: none; }
.vdisp .vdisp-card:hover { border-color: var(--border-hover); background: var(--bg-hover); }
.vdisp .vdisp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vdisp .vdisp-card .vdisp-id { font-family: var(--font-display); font-weight: 600; color: var(--text-secondary); font-size: 13.5px; }
.vdisp .vdisp-card-prod { font-weight: 600; font-size: 14.5px; color: var(--text-primary); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdisp .vdisp-card-meta { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-secondary); flex-wrap: wrap; }
.vdisp .vdisp-card-meta .amt { font-variant-numeric: tabular-nums; color: var(--text-primary); font-weight: 600; }
.vdisp .vdisp-card-meta .sep { color: var(--text-muted); }
.vdisp .vdisp-card-kvs { display: flex; flex-direction: column; gap: 5px; margin-top: 1px; padding-top: 11px; border-top: 1px solid var(--border); }
.vdisp .vdisp-card-kv { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.vdisp .vdisp-card-kv .k { color: var(--text-muted); flex-shrink: 0; }
.vdisp .vdisp-card-kv .v { color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.vdisp .vdisp-card-foot { margin-top: auto; padding-top: 4px; }
.vdisp .vdisp-card-foot .vdisp-viewbtn { width: 100%; justify-content: center; }
.vdisp .vdisp-cards .vdisp-empty-filtered { grid-column: 1 / -1; padding: 26px 16px; }
@media (max-width: 1040px) { .vdisp .vdisp-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .vdisp .vdisp-cards { grid-template-columns: 1fr; } }

/* ===== detail ===== */
.vdisp .vdisp-back { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 13px; font-weight: 500; margin-bottom: 14px; }
.vdisp .vdisp-back svg { width: 16px; height: 16px; } .vdisp .vdisp-back:hover { color: var(--text-primary); }
.vdisp .vdisp-dhead { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.vdisp .vdisp-dhead h1 { margin: 0; font-size: 26px; }
.vdisp .vdisp-grid { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
.vdisp .vdisp-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.vdisp .vdisp-rail { display: flex; flex-direction: column; gap: 16px; }

/* outcome banner */
.vdisp .vdisp-outcome { display: flex; align-items: flex-start; gap: 13px; border-radius: var(--radius-md); padding: 15px 18px; margin-bottom: 16px; }
.vdisp .vdisp-outcome > svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.vdisp .vdisp-outcome-t { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; color: var(--text-primary); }
.vdisp .vdisp-outcome-d { font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.vdisp .vdisp-outcome-money { font-variant-numeric: tabular-nums; font-size: 12.5px; margin-top: 8px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: var(--radius-sm); }
.vdisp .vdisp-outcome-money svg { width: 13px; height: 13px; }
.vdisp .vdisp-outcome.loss { background: var(--danger-bg); border: 1px solid var(--danger); } .vdisp .vdisp-outcome.loss > svg { stroke: var(--danger); } .vdisp .vdisp-outcome.loss .vdisp-outcome-money { background: var(--danger-bg); color: var(--danger); }
.vdisp .vdisp-outcome.win { background: var(--success-bg); border: 1px solid var(--success); } .vdisp .vdisp-outcome.win > svg { stroke: var(--success); } .vdisp .vdisp-outcome.win .vdisp-outcome-money { background: var(--success-bg); color: var(--success); }

/* detail cards */
.vdisp .vdisp-dcard { padding: 0; overflow: visible; background: transparent; border: 1.5px solid var(--border); }
.vdisp .vdisp-dch { padding: 13px 18px; border-bottom: 1px solid var(--border); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.vdisp .vdisp-dcb { padding: 16px 18px; }
.vdisp .vdisp-ordrow { display: flex; align-items: center; gap: 13px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.vdisp .vdisp-oico { width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--bg-tertiary); border: 1px solid var(--border); display: grid; place-items: center; flex-shrink: 0; color: var(--text-secondary); }
.vdisp .vdisp-oico svg { width: 22px; height: 22px; }
.vdisp .vdisp-oinfo { flex: 1; min-width: 0; }
.vdisp .vdisp-opn { font-weight: 600; font-size: 14.5px; color: var(--text-primary); }
.vdisp .vdisp-oamt { font-size: 13px; color: var(--text-secondary); margin-top: 3px; font-variant-numeric: tabular-nums; }
.vdisp .vdisp-obtns { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.vdisp .vdisp-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.vdisp .vdisp-k { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
.vdisp .vdisp-v { font-size: 13.5px; font-weight: 500; color: var(--text-primary); }
.vdisp .vdisp-reason { background: var(--bg-secondary); border: 1px solid var(--border); border-left: 3px solid var(--text-muted); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 13px 15px; margin-top: 14px; }
.vdisp .vdisp-rk { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 5px; }
.vdisp .vdisp-rt { font-size: 13.5px; color: var(--text-primary); line-height: 1.55; }

.vdisp .vdisp-guide { display: flex; align-items: flex-start; gap: 11px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 13px 15px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }
.vdisp .vdisp-guide svg { width: 17px; height: 17px; stroke: var(--text-secondary); flex-shrink: 0; margin-top: 1px; }
.vdisp .vdisp-guide b { color: var(--text-primary); font-weight: 600; }

/* timeline */
.vdisp .vdisp-tl-wrap { padding: 4px 4px 4px 6px; max-height: 430px; overflow-y: auto; }
.vdisp .vdisp-ev { position: relative; padding: 0 0 20px 26px; border-left: 2px solid var(--border); }
.vdisp .vdisp-ev.last { border-left-color: transparent; padding-bottom: 0; }
.vdisp .vdisp-dot { position: absolute; left: -8px; top: 1px; width: 15px; height: 15px; border-radius: 50%; border: 3px solid var(--bg-card); }
.vdisp .vdisp-ev.buyer .vdisp-dot { background: var(--text-muted); }
.vdisp .vdisp-ev.vendor .vdisp-dot { background: var(--accent); }
.vdisp .vdisp-ev.admin .vdisp-dot { background: var(--warning); }
.vdisp .vdisp-eb { display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 6px; text-transform: uppercase; margin-bottom: 6px; }
.vdisp .vdisp-ev.buyer .vdisp-eb { background: var(--bg-tertiary); color: var(--text-secondary); }
.vdisp .vdisp-ev.vendor .vdisp-eb { background: var(--accent-glow); color: var(--text-primary); }
.vdisp .vdisp-ev.admin .vdisp-eb { background: var(--warning-bg); color: var(--warning); }
.vdisp .vdisp-et { font-weight: 600; font-size: 14px; color: var(--text-primary); display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.vdisp .vdisp-etime { font-size: 11px; color: var(--text-muted); font-weight: 400; }
.vdisp .vdisp-ev-d { font-size: 12.5px; color: var(--text-secondary); margin-top: 5px; line-height: 1.55; }
.vdisp .vdisp-ev-chips { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.vdisp .vdisp-chip { display: inline-block; font-size: 11px; font-variant-numeric: tabular-nums; border-radius: 6px; padding: 2px 8px; }
.vdisp .vdisp-chip.propose { color: var(--warning); background: var(--warning-bg); }
.vdisp .vdisp-chip.exec { color: var(--success); background: var(--success-bg); }
.vdisp .vdisp-chip.gated { color: var(--text-secondary); background: var(--bg-tertiary); }

/* evidence */
.vdisp .vdisp-evi { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-secondary); margin-bottom: 9px; color: inherit; }
.vdisp .vdisp-evi:hover { border-color: var(--border-hover); background: var(--bg-hover); }
.vdisp .vdisp-efi { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--bg-tertiary); display: grid; place-items: center; flex-shrink: 0; color: var(--text-secondary); }
.vdisp .vdisp-efi svg { width: 16px; height: 16px; }
.vdisp .vdisp-en { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdisp .vdisp-eby { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; background: var(--bg-tertiary); color: var(--text-secondary); flex-shrink: 0; }
.vdisp .vdisp-noev { font-size: 12.5px; color: var(--text-muted); padding: 4px 0 12px; }
.vdisp .vdisp-upload { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.vdisp .vdisp-input { flex: 1; min-width: 160px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 9px 13px; color: var(--text-primary); font-size: 13px; outline: none; }
.vdisp .vdisp-input:focus { border-color: var(--border-hover); } .vdisp .vdisp-input::placeholder { color: var(--text-muted); }
.vdisp .vdisp-uplabel { cursor: pointer; }

/* respond panel */
.vdisp .vdisp-field { margin-bottom: 13px; }
.vdisp .vdisp-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.vdisp .vdisp-field textarea, .vdisp .vdisp-field select, .vdisp .vdisp-amtwrap input { width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 13px; color: var(--text-primary); font-size: 13.5px; outline: none; font-family: inherit; transition: border-color .15s, background .15s; }
.vdisp .vdisp-field textarea { resize: vertical; min-height: 90px; }
.vdisp .vdisp-field textarea:focus, .vdisp .vdisp-field select:focus, .vdisp .vdisp-amtwrap input:focus { border-color: var(--border-hover); background: var(--bg-card); }
.vdisp .vdisp-field textarea::placeholder, .vdisp .vdisp-amtwrap input::placeholder { color: var(--text-muted); }
.vdisp .vdisp-field select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.vdisp .vdisp-amtwrap { position: relative; }
.vdisp .vdisp-cur { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.vdisp .vdisp-amtwrap input { padding-left: 28px; font-variant-numeric: tabular-nums; }
.vdisp .vdisp-impact { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 13px; margin-bottom: 13px; line-height: 1.5; }
.vdisp .vdisp-impact svg { width: 15px; height: 15px; stroke: var(--warning); flex-shrink: 0; margin-top: 1px; }
.vdisp .vdisp-impact b { color: var(--text-primary); font-weight: 600; }
.vdisp .vdisp-rulenote { font-size: 11.5px; color: var(--text-muted); margin-bottom: 13px; line-height: 1.5; }
.vdisp .vdisp-full { width: 100%; justify-content: center; }

.vdisp .vdisp-escalate { padding: 16px 18px; background: transparent; border: 1.5px solid var(--border); }
.vdisp .vdisp-esc-t { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; margin-bottom: 5px; color: var(--text-primary); }
.vdisp .vdisp-esc-d { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.5; }
.vdisp .vdisp-final { display: flex; align-items: flex-start; gap: 11px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.vdisp .vdisp-final svg { width: 18px; height: 18px; stroke: var(--success); flex-shrink: 0; margin-top: 1px; }
.vdisp .vdisp-final b { color: var(--text-primary); font-weight: 600; }

/* focus-visible */
.vdisp .vdisp-tab:focus-visible, .vdisp .vdisp-trow:focus-visible, .vdisp .vdisp-selectbox select:focus-visible,
.vdisp .vdisp-search input:focus-visible, .vdisp .vdisp-evi:focus-visible, .vdisp .vdisp-back:focus-visible,
.vdisp .vdisp-needs-bar .btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* responsive */
@media (max-width: 980px) {
  .vdisp .vdisp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .vdisp .vdisp-bar { flex-direction: column; align-items: stretch; }
  .vdisp .vdisp-filters { margin-left: 0; flex-wrap: wrap; }
  .vdisp .vdisp-search input { width: 100%; }
  .vdisp .vdisp-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .vdisp .vdisp-thead { display: none; }
  .vdisp .vdisp-trow { grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 15px; }
  .vdisp .vdisp-prod { grid-column: 1 / -1; white-space: normal; }
  .vdisp .vdisp-mlab { display: block; }
  .vdisp .vdisp-viewcol { grid-column: 1 / -1; text-align: stretch; }
  .vdisp .vdisp-viewbtn { width: 100%; justify-content: center; }
  .vdisp .vdisp-pairs { grid-template-columns: 1fr; }
  .vdisp .vdisp-ordrow { flex-wrap: wrap; } .vdisp .vdisp-obtns { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .vdisp * { animation: none !important; transition: none !important; } }

/* ============================================================================
   VENDOR EARNINGS & PAYOUTS (.vearn) — balance hero + real-ledger net chart +
   derived split + tabbed activity + payouts. Tokens only; money/positive=success,
   negative=danger, pending/escrow=warning. Dark+light, responsive, a11y.
   ============================================================================ */
.vearn .vearn-eyebrow { color: var(--text-secondary); font-size: 13px; margin-bottom: 4px; }
.vearn .vearn-ph h1 { margin: 0; }
.vearn .vearn-alert { margin-bottom: var(--space-4); }
.vearn .vearn-mono { font-variant-numeric: tabular-nums; }

/* hero */
.vearn .vearn-hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; overflow: hidden; margin-bottom: var(--space-4); padding: 0; }
.vearn .vearn-hero-l { padding: 24px 26px; border-right: 1px solid var(--border); position: relative; }
.vearn .vearn-hero-lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 10px; }
.vearn .vearn-hero-big { font-family: var(--font-display); font-size: 46px; font-weight: 700; line-height: 1; color: var(--success); font-variant-numeric: tabular-nums; }
.vearn .vearn-hero-sub { color: var(--text-secondary); font-size: 12.5px; margin-top: 8px; margin-bottom: 18px; }
.vearn .vearn-hero-cta { font-size: 13.5px; padding: 12px 20px; }
.vearn .vearn-escrow-note { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: var(--text-muted); line-height: 1.5; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.vearn .vearn-escrow-note svg { width: 14px; height: 14px; stroke: var(--warning); flex-shrink: 0; margin-top: 1px; }
.vearn .vearn-hero-r { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.vearn .vearn-stat { display: flex; align-items: center; gap: 13px; }
.vearn .vearn-stat-ic { width: 36px; height: 36px; border-radius: var(--radius-md); display: grid; place-items: center; flex-shrink: 0; background: var(--bg-tertiary); border: 1px solid var(--border); }
.vearn .vearn-stat-ic svg { width: 17px; height: 17px; }
.vearn .vearn-stat.escrow .vearn-stat-ic { background: var(--warning-bg); } .vearn .vearn-stat.escrow .vearn-stat-ic svg { stroke: var(--warning); }
.vearn .vearn-stat.life .vearn-stat-ic svg { stroke: var(--text-secondary); }
.vearn .vearn-stat.paid .vearn-stat-ic { background: var(--success-bg); } .vearn .vearn-stat.paid .vearn-stat-ic svg { stroke: var(--success); }
.vearn .vearn-stat-l { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.vearn .vearn-stat-v { font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 600; margin-top: 2px; color: var(--text-primary); }

/* mid grid: chart + calc */
.vearn .vearn-mid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.vearn .vearn-chart-card, .vearn .vearn-calc { padding: 0; }
.vearn .vearn-ch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.vearn .vearn-ch-t { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-primary); }
.vearn .vearn-ch-t small { display: block; color: var(--text-muted); font-weight: 400; font-size: 12px; margin-top: 3px; font-family: var(--font-body, inherit); }
.vearn .vearn-rangeseg { display: inline-flex; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.vearn .vearn-rangeseg button { padding: 5px 11px; border-radius: 999px; color: var(--text-secondary); font-size: 11.5px; font-weight: 600; cursor: pointer; background: none; border: none; transition: background .15s, color .15s; }
.vearn .vearn-rangeseg button.on { background: var(--bg-tertiary); color: var(--text-primary); }
.vearn .vearn-chartbox { padding: 16px 18px 10px; position: relative; }
.vearn .vearn-chart { width: 100%; height: 160px; display: block; }
.vearn .vearn-bar { fill: var(--success); opacity: .85; transition: opacity .15s; }
.vearn .vearn-bar:hover { opacity: 1; }
.vearn .vearn-bar.neg { fill: var(--danger); }
.vearn .vearn-cl { fill: var(--text-muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.vearn .vearn-gl { stroke: var(--border); stroke-width: 1; }
.vearn .vearn-chart-empty { padding: 44px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }

.vearn .vearn-calc { padding: 18px 20px; }
.vearn .vearn-calc-t { font-family: var(--font-display); font-weight: 600; font-size: 15px; margin-bottom: 5px; color: var(--text-primary); }
.vearn .vearn-calc-intro { font-size: 12px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 16px; }
.vearn .vearn-splitbar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin-bottom: 14px; background: var(--bg-tertiary); }
.vearn .vearn-splitbar i { height: 100%; }
.vearn .vearn-splitbar .net { background: var(--success); } .vearn .vearn-splitbar .com { background: var(--accent); } .vearn .vearn-splitbar .fee { background: var(--warning); }
.vearn .vearn-legend { display: flex; flex-direction: column; gap: 9px; }
.vearn .vearn-lrow { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.vearn .vearn-d { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.vearn .vearn-d.net { background: var(--success); } .vearn .vearn-d.com { background: var(--accent); } .vearn .vearn-d.fee { background: var(--warning); }
.vearn .vearn-pct { font-variant-numeric: tabular-nums; font-weight: 600; width: 38px; color: var(--text-primary); }
.vearn .vearn-desc { color: var(--text-secondary); }
.vearn .vearn-calc-foot { font-size: 11.5px; color: var(--text-muted); margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); line-height: 1.5; }

/* ── 2026-06-15 redesign: 4-card top row + compact 2-col bottom ───────────────── */
.vearn .vearn-top4 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) minmax(0,1.7fr); gap: var(--space-3); margin-bottom: var(--space-4); align-items: stretch; }
.vearn .vearn-c { padding: 14px 16px; display: flex; flex-direction: column; overflow: visible; }
.vearn .vearn-chd { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.vearn .vearn-chd-t { font-size: 13px; font-weight: 600; color: var(--text-secondary); min-width: 0; line-height: 1.3; }
.vearn .vearn-chd .vui-hint { flex-shrink: 0; }
.vearn .vearn-chd .vearn-rangeseg { margin-left: auto; }
.vearn .vearn-c-avail-body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; }
.vearn .vearn-c-big { font-family: var(--font-display); font-size: 36px; font-weight: 700; line-height: 1; color: var(--success); font-variant-numeric: tabular-nums; }
.vearn .vearn-c-cta { font-size: 13px; padding: 10px 18px; }
.vearn .vearn-c-bal .vearn-statlist { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.vearn .vearn-c-bal .vearn-stat-l { display: flex; align-items: center; gap: 5px; }
.vearn .vearn-c-bal .vearn-stat-tx { min-width: 0; }
.vearn .vearn-c-calc .vearn-lrow { align-items: flex-start; }
.vearn .vearn-c-chart .vearn-chartbox { flex: 1; padding: 4px 2px 0; }
.vearn .vearn-c-chart .vearn-chart { height: 150px; }

.vearn .vearn-bottom { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: var(--space-4); align-items: start; margin-bottom: var(--space-4); }
.vearn .vearn-bottom .vearn-activity { margin-bottom: 0; }
.vearn .vearn-payouts .vearn-payform { flex-direction: column; align-items: stretch; gap: 12px; }
.vearn .vearn-payouts .vearn-payfield, .vearn .vearn-payouts .vearn-amtwrap input, .vearn .vearn-payouts .vearn-payselect { width: 100%; min-width: 0; box-sizing: border-box; }
.vearn .vearn-payhist-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; padding: 12px 20px 8px; border-top: 1px solid var(--border); }
.vearn .vearn-payhist { max-height: 220px; overflow-y: auto; }
.vearn .vearn-payrow { padding: 9px 20px; border-bottom: 1px solid var(--border); }
.vearn .vearn-payrow:last-child { border-bottom: none; }
.vearn .vearn-payrow-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vearn .vearn-payrow-amt { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13.5px; color: var(--text-primary); }
.vearn .vearn-payrow-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.vearn .vearn-payrow-fail { color: var(--danger); }
@media (max-width: 1080px) {
  .vearn .vearn-top4 { grid-template-columns: 1fr 1fr; }
  .vearn .vearn-c-chart { grid-column: 1 / -1; }
  .vearn .vearn-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vearn .vearn-top4 { grid-template-columns: 1fr; }
  .vearn .vearn-c-chart { grid-column: auto; }
}

/* activity */
.vearn .vearn-activity { padding: 0; overflow: hidden; margin-bottom: var(--space-4); }
.vearn .vearn-atabs { display: flex; align-items: center; gap: 8px; padding: 14px 18px 0; flex-wrap: wrap; }
.vearn .vearn-atab { padding: 9px 15px; border-radius: var(--radius-md) var(--radius-md) 0 0; color: var(--text-secondary); font-size: 13px; font-weight: 600; position: relative; cursor: pointer; background: none; border: none; transition: color .15s, background .15s; }
.vearn .vearn-atab:hover { color: var(--text-primary); }
.vearn .vearn-atab.on { color: var(--text-primary); background: var(--bg-secondary); }
.vearn .vearn-atab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.vearn .vearn-afilters { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-secondary); flex-wrap: wrap; }
.vearn .vearn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vearn .vearn-selectbox { position: relative; display: inline-flex; }
.vearn .vearn-selectbox select { appearance: none; -webkit-appearance: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 12.5px; font-weight: 500; padding: 9px 34px 9px 13px; cursor: pointer; outline: none; min-height: var(--control-h-sm); }
.vearn .vearn-selectbox::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: translateY(-65%) rotate(45deg); pointer-events: none; }
.vearn .vearn-search { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0 12px; min-height: var(--control-h-sm); color: var(--text-muted); }
.vearn .vearn-search svg { width: 14px; height: 14px; stroke: currentColor; }
.vearn .vearn-search input { background: none; border: none; outline: none; color: var(--text-primary); font-size: 12.5px; width: 150px; }
.vearn .vearn-search input::placeholder { color: var(--text-muted); }
.vearn .vearn-totals { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.vearn .vearn-totals b { color: var(--text-primary); font-variant-numeric: tabular-nums; font-weight: 600; }
.vearn .vearn-totals .net b { color: var(--success); }

.vearn .vearn-thead, .vearn .vearn-trow { display: grid; align-items: center; gap: 12px; }
.vearn .vearn-thead { padding: 12px 20px; border-bottom: 1px solid var(--border); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.vearn .vearn-trow { padding: 11px 20px; border-bottom: 1px solid var(--border); min-height: 58px; box-sizing: border-box; }
.vearn .vearn-trow:last-child { border-bottom: none; }
/* Both activity tables cap at ~5 equal rows, then scroll inside (replaces the "show more" bar). */
.vearn .vearn-tbody { max-height: 312px; overflow-y: auto; }
.vearn .vearn-trow:hover { background: var(--bg-hover); }
.vearn .vearn-grid-earn { grid-template-columns: 1.1fr 100px 110px 120px 100px 124px; }
.vearn .vearn-grid-tx { grid-template-columns: 1fr 1fr 150px; }
.vearn .vearn-grid-pay { grid-template-columns: 1fr 110px 1.1fr 120px 1.4fr; }
.vearn .vearn-r { text-align: right; }
.vearn .vearn-date { font-size: 12.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.vearn .vearn-mono { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-primary); }
.vearn .vearn-muted { color: var(--text-secondary); }
.vearn .vearn-net { font-weight: 600; color: var(--success); }
.vearn .vearn-strong { font-weight: 600; }
.vearn .vearn-amt { text-align: right; font-weight: 600; }
.vearn .vearn-amt.pos { color: var(--success); } .vearn .vearn-amt.neg { color: var(--danger); }
.vearn .vearn-mlab { display: none; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 3px; }
.vearn .vearn-clears { display: block; font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.vearn .vearn-ref { font-size: 12px; color: var(--text-secondary); }
.vearn .vearn-ref.fail { color: var(--danger); }
.vearn .vearn-morebar { display: none; } /* tables now scroll internally (5-row cap) instead of paginating */
.vearn .vearn-morebar button { color: var(--accent); font-size: 12.5px; font-weight: 600; background: none; border: none; cursor: pointer; }
.vearn .vearn-empty { padding: 30px 20px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* pills */
.vearn .vearn-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.vearn .vearn-pill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.vearn .vearn-pill.settled { background: var(--bg-tertiary); color: var(--text-secondary); }
.vearn .vearn-pill.escrow, .vearn .vearn-pill.processing { background: var(--warning-bg); color: var(--warning); }
.vearn .vearn-pill.released, .vearn .vearn-pill.paid { background: var(--success-bg); color: var(--success); }
.vearn .vearn-pill.refunded, .vearn .vearn-pill.failed { background: var(--danger-bg); color: var(--danger); }

/* tx type tags */
.vearn .vearn-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-primary); }
.vearn .vearn-tag-ic { width: 22px; height: 22px; border-radius: var(--radius-sm); display: grid; place-items: center; }
.vearn .vearn-tag-ic svg { width: 13px; height: 13px; }
.vearn .vearn-tag.pos .vearn-tag-ic { background: var(--success-bg); } .vearn .vearn-tag.pos .vearn-tag-ic svg { stroke: var(--success); }
.vearn .vearn-tag.neg .vearn-tag-ic { background: var(--danger-bg); } .vearn .vearn-tag.neg .vearn-tag-ic svg { stroke: var(--danger); }
.vearn .vearn-tag.out .vearn-tag-ic { background: var(--bg-tertiary); } .vearn .vearn-tag.out .vearn-tag-ic svg { stroke: var(--text-secondary); }
.vearn .vearn-tag.neutral .vearn-tag-ic { background: var(--bg-tertiary); } .vearn .vearn-tag.neutral .vearn-tag-ic svg { stroke: var(--text-secondary); }

/* payouts */
.vearn .vearn-payouts { padding: 0; overflow: visible; }
.vearn .vearn-pchead { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.vearn .vearn-pc-t { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-primary); }
.vearn .vearn-pc-avail { margin-left: auto; font-size: 12px; color: var(--text-secondary); }
.vearn .vearn-pc-avail b { color: var(--success); font-variant-numeric: tabular-nums; }
.vearn .vearn-payout-intro { font-size: 12.5px; color: var(--text-secondary); padding: 14px 20px 0; line-height: 1.5; }
.vearn .vearn-payform { display: flex; align-items: flex-end; gap: 12px; padding: 14px 20px 18px; flex-wrap: wrap; }
.vearn .vearn-payfield { display: flex; flex-direction: column; gap: 6px; }
.vearn .vearn-pk { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.vearn .vearn-amtwrap { position: relative; }
.vearn .vearn-cur { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.vearn .vearn-amtwrap input { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 13px 11px 28px; color: var(--text-primary); font-size: 14px; font-variant-numeric: tabular-nums; outline: none; width: 180px; }
.vearn .vearn-amtwrap input:focus { border-color: var(--border-hover); background: var(--bg-card); }
.vearn .vearn-payselect { appearance: none; -webkit-appearance: none; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 13px; padding: 11px 36px 11px 13px; cursor: pointer; outline: none; min-width: 240px; }
.vearn .vearn-payselect:focus { border-color: var(--border-hover); }
.vearn .vearn-paybtn { padding: 11px 18px; }
.vearn .vearn-minnote { font-size: 11.5px; color: var(--text-muted); width: 100%; margin-top: 2px; line-height: 1.6; }
.vearn .vearn-maxlink { color: var(--accent); font-weight: 600; cursor: pointer; }
.vearn .vearn-maxlink:hover { text-decoration: underline; }

/* focus-visible */
.vearn .vearn-rangeseg button:focus-visible, .vearn .vearn-atab:focus-visible, .vearn .vearn-selectbox select:focus-visible,
.vearn .vearn-search input:focus-visible, .vearn .vearn-morebar button:focus-visible, .vearn .vearn-maxlink:focus-visible,
.vearn .vearn-hero-cta:focus-visible, .vearn .vearn-amtwrap input:focus-visible, .vearn .vearn-payselect:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* responsive */
@media (max-width: 900px) {
  .vearn .vearn-hero { grid-template-columns: 1fr; }
  .vearn .vearn-hero-l { border-right: none; border-bottom: 1px solid var(--border); }
  .vearn .vearn-mid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .vearn .vearn-hero-big { font-size: 38px; }
  .vearn .vearn-afilters { flex-direction: column; align-items: stretch; }
  .vearn .vearn-totals { margin-left: 0; }
  .vearn .vearn-search input { width: 100%; }
  .vearn .vearn-thead { display: none; }
  .vearn .vearn-grid-earn, .vearn .vearn-grid-tx, .vearn .vearn-grid-pay { grid-template-columns: 1fr 1fr; gap: 9px 12px; padding: 14px; }
  .vearn .vearn-mlab { display: block; }
  .vearn .vearn-grid-earn .vearn-date, .vearn .vearn-grid-pay .vearn-ref { grid-column: 1 / -1; }
  .vearn .vearn-amt { text-align: left; }
  .vearn .vearn-r { text-align: left; }
  .vearn .vearn-payform { flex-direction: column; align-items: stretch; }
  .vearn .vearn-amtwrap input, .vearn .vearn-payselect, .vearn .vearn-payfield { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .vearn * { animation: none !important; transition: none !important; } }

/* ============================================================================
   VENDOR ANALYTICS (.vana) — real-data-only insights: KPI row + server-rendered
   sales-trend (real zero days) + proportion breakdowns + honest "not tracked".
   Tokens only; single accent (success) for sales/positive; health amber/danger.
   ============================================================================ */
.vana .vana-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vana .vana-ph h1 { margin: 0; }
.vana .vana-eyebrow { color: var(--text-secondary); font-size: 13px; margin-bottom: 4px; }
.vana .vana-sub { display: flex; align-items: flex-start; gap: 8px; color: var(--text-secondary); font-size: 12.5px; line-height: 1.55; margin-top: 8px; max-width: 640px; }
.vana .vana-sub svg { width: 15px; height: 15px; stroke: var(--success); flex-shrink: 0; margin-top: 2px; }
.vana .vana-head-ctrl { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.vana .vana-range-lbl { color: var(--text-muted); font-size: 12.5px; }
.vana .vana-selectbox { position: relative; display: inline-flex; }
.vana .vana-selectbox select { appearance: none; -webkit-appearance: none; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 12.5px; font-weight: 500; padding: 9px 34px 9px 13px; cursor: pointer; outline: none; min-height: var(--control-h-sm); }
.vana .vana-selectbox::after { content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: translateY(-65%) rotate(45deg); pointer-events: none; }

/* KPIs */
/* Analytics KPIs reuse the dashboard .vdash-kpi card; this keeps the 6-card grid + the muted
   hint line under the dispute/chargeback rates (tone accents dropped to match the dashboard). */
.vana .vana-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: var(--space-4); }
.vana .vana-kpi-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 8px; font-weight: 500; line-height: 1.4; }

/* section header (shared) */
.vana .vana-sect-h { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.vana .vana-sect-t { flex: 1 1 auto; min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vana .vana-sect-t small { display: block; color: var(--text-muted); font-weight: 400; font-size: 12px; margin-top: 3px; }
.vana .vana-sect-h .vui-hint { flex-shrink: 0; }
.vana .vana-title-row { display: flex; align-items: center; gap: 8px; }
.vana .vana-chartrow { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); align-items: start; }
.vana .vana-chartrow .vana-trend, .vana .vana-chartrow .vana-nt { margin-bottom: 0; }

/* sales trend chart */
.vana .vana-trend { margin-bottom: var(--space-4); overflow: visible; padding: 0; }
.vana .vana-chartbox { padding: 18px 18px 12px; }
.vana .vana-chart { width: 100%; height: 200px; display: block; }
.vana .vana-bar { fill: var(--success); opacity: .85; transition: opacity .15s; }
.vana .vana-bar:hover { opacity: 1; }
.vana .vana-bar.zero { fill: var(--bg-tertiary); opacity: 1; }
.vana .vana-vlab { fill: var(--text-primary); font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 600; }
.vana .vana-dlab { fill: var(--text-muted); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.vana .vana-clab { fill: var(--text-muted); font-size: 8.5px; font-variant-numeric: tabular-nums; }
.vana .vana-gl { stroke: var(--border); stroke-width: 1; }
.vana .vana-empty { padding: 30px 20px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* breakdowns */
.vana .vana-bdgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-4); }
.vana .vana-bd { overflow: visible; padding: 0; }
/* outline-only regions instead of filled cards (owner: thin 1.5px outline, no card fill) */
.vana .vana-bd, .vana .vana-trend, .vana .vana-nt { background: transparent; border: 1.5px solid var(--border); }
/* segmented 7D/30D toggle on the trend card */
.vana .vana-rangeseg { display: inline-flex; flex-shrink: 0; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.vana .vana-rangeseg button { padding: 5px 12px; border-radius: 999px; color: var(--text-secondary); font-size: 11.5px; font-weight: 600; cursor: pointer; background: none; border: none; transition: background .15s, color .15s; }
.vana .vana-rangeseg button.on { background: var(--bg-tertiary); color: var(--text-primary); }
.vana .vana-rangeseg button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* vertical mini bar chart per breakdown — bars auto-thin via flex; min-width + scroll keeps many items legible */
.vana .vana-vbars { display: flex; align-items: flex-start; gap: 6px; padding: 16px 14px 14px; min-height: 178px; overflow-x: auto; }
.vana .vana-vbar { flex: 1 1 0; min-width: 30px; display: flex; flex-direction: column; align-items: center; }
.vana .vana-vbar-plot { width: 100%; height: 132px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.vana .vana-vbar-val { font-size: 9.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vana .vana-vbar-bar { width: 48%; max-width: 26px; min-height: 3px; background: var(--success); border-radius: 4px 4px 0 0; transition: opacity .15s; }
.vana .vana-vbar:hover .vana-vbar-bar { opacity: .85; }
.vana .vana-vbar.unk .vana-vbar-bar { background: var(--text-muted); }
.vana .vana-vbar.unk .vana-vbar-lbl { font-style: italic; color: var(--text-muted); }
.vana .vana-vbar-lbl { font-size: 9.5px; color: var(--text-secondary); margin-top: 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.vana .vana-bd-b { padding: 8px 18px 16px; }
.vana .vana-brow { padding: 11px 0; border-bottom: 1px solid var(--border); }
.vana .vana-brow:last-child { border-bottom: none; }
.vana .vana-bt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.vana .vana-bn { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vana .vana-bn.unk { color: var(--text-muted); font-style: italic; }
.vana .vana-bv { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-primary); flex-shrink: 0; }
.vana .vana-cnt { color: var(--text-muted); font-size: 11px; }
.vana .vana-track { height: 6px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden; }
.vana .vana-track i { display: block; height: 100%; border-radius: 4px; background: var(--success); }
.vana .vana-track i.dim { background: var(--text-muted); }
.vana .vana-rank { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--bg-tertiary); color: var(--text-secondary); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 8px; vertical-align: middle; }

/* not tracked */
.vana .vana-nt { overflow: visible; padding: 0; }
.vana .vana-nt-b { padding: 8px 18px 4px; }
.vana .vana-ntrow { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.vana .vana-ntrow:last-child { border-bottom: none; }
.vana .vana-nic { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--bg-secondary); display: grid; place-items: center; flex-shrink: 0; color: var(--text-muted); }
.vana .vana-nic svg { width: 15px; height: 15px; }
.vana .vana-nn { flex: 1; font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.vana .vana-np { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-tertiary); border-radius: 6px; padding: 3px 9px; }
.vana .vana-nnote { font-size: 11.5px; color: var(--text-muted); padding: 13px 18px 16px; line-height: 1.5; display: flex; align-items: flex-start; gap: 8px; }
.vana .vana-nnote svg { width: 14px; height: 14px; stroke: var(--text-muted); flex-shrink: 0; margin-top: 1px; }

/* focus-visible */
.vana .vana-selectbox select:focus-visible, .vana .vana-export:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* responsive */
@media (max-width: 1024px) {
  .vana .vana-bdgrid { grid-template-columns: 1fr 1fr; }
  .vana .vana-chartrow { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .vana .vana-bdgrid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .vana .vana-ph { flex-direction: column; align-items: stretch; }
  .vana .vana-head-ctrl { width: 100%; }
  .vana .vana-selectbox { flex: 1; } .vana .vana-selectbox select { width: 100%; }
  .vana .vana-kpis { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .vana * { animation: none !important; transition: none !important; } }

/* ============================================================================
   VENDOR ACCOUNT STANDING & TIER (.vstand) — real tier/hold/status + metrics +
   protection windows + buyer blacklist. Tokens only; health amber/danger/success.
   ============================================================================ */
.vstand .vstand-eyebrow { color: var(--text-secondary); font-size: 13px; margin-bottom: 4px; }
.vstand .vstand-ph h1 { margin: 0; }
.vstand .vstand-alert { margin-bottom: var(--space-4); }

/* shared section header */
.vstand .vstand-sect-h { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--border); }
.vstand .vstand-sect-t { flex: 1 1 auto; min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vstand .vstand-sect-t small { display: block; color: var(--text-muted); font-weight: 400; font-size: 12px; margin-top: 3px; }
.vstand .vstand-sect-h .vui-hint { flex-shrink: 0; }
/* outlined regions (owner: separate areas with 1.5px lines, not filled cards) */
.vstand .vstand-metrics, .vstand .vstand-prot { background: transparent; border: 1.5px solid var(--border); border-radius: var(--radius-md); overflow: hidden; padding: 0; margin-bottom: var(--space-4); }
/* Left area (tier + status side by side, then Buyer protection below) | blacklist.
   align-items:stretch makes the left column match the blacklist height (protection
   fills the gap) and the two top cells equal height. Same 25/25/50 widths as before. */
.vstand .vstand-row3 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: stretch; margin-bottom: var(--space-4); }
.vstand .vstand-left { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.vstand .vstand-toprow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: stretch; }
.vstand .vstand-left .vstand-prot { flex: 1 1 auto; margin-bottom: 0; overflow: visible; }
.vstand .vstand-left .vstand-prot-b { grid-template-columns: 1fr; }
.vstand .vstand-cell { background: transparent; border: 1.5px solid var(--border); border-radius: var(--radius-md); overflow: visible; }
.vstand .vstand-cell-b { padding: 16px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

/* status row */
.vstand .vstand-status { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.vstand .vstand-scard { padding: 20px 22px; }
.vstand .vstand-lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 14px; }
.vstand .vstand-tier { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: var(--radius-md); background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-primary); font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.vstand .vstand-tier svg { width: 18px; height: 18px; fill: none; stroke: var(--warning); }
.vstand .vstand-hold { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 12px; border-radius: var(--radius-sm); background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary); font-size: 12.5px; font-weight: 500; }
.vstand .vstand-hold svg { width: 14px; height: 14px; stroke: var(--warning); }
.vstand .vstand-hold b { color: var(--text-primary); }
.vstand .vstand-tiernote { font-size: 12px; color: var(--text-muted); line-height: 1.55; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; align-items: flex-start; gap: 8px; }
.vstand .vstand-tiernote svg { width: 14px; height: 14px; stroke: var(--text-muted); flex-shrink: 0; margin-top: 1px; }
.vstand .vstand-statbig { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; border-radius: var(--radius-md); font-weight: 700; font-size: 15px; letter-spacing: .03em; text-transform: capitalize; }
.vstand .vstand-statbig i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.vstand .vstand-statbig.ok { background: var(--success-bg); color: var(--success); }
.vstand .vstand-statbig.warn { background: var(--warning-bg); color: var(--warning); }
.vstand .vstand-goodtxt { margin-top: 14px; font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.vstand .vstand-goodtxt svg { width: 15px; height: 15px; flex-shrink: 0; }
.vstand .vstand-statbig.ok ~ .vstand-goodtxt svg { stroke: var(--success); }

/* metrics */
.vstand .vstand-metrics { overflow: hidden; padding: 0; margin-bottom: var(--space-4); }
.vstand .vstand-mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.vstand .vstand-mcell { padding: 18px 20px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.vstand .vstand-mtop { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.vstand .vstand-mic { width: 26px; height: 26px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--bg-tertiary); }
.vstand .vstand-mic svg { width: 14px; height: 14px; stroke: var(--text-secondary); }
.vstand .vstand-ml { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.vstand .vstand-mv { font-family: var(--font-display); font-size: 25px; font-weight: 700; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.vstand .vstand-mh { font-size: 10.5px; margin-top: 6px; font-weight: 600; }
.vstand .vstand-mcell.good .vstand-mic { background: var(--success-bg); } .vstand .vstand-mcell.good .vstand-mic svg { stroke: var(--success); } .vstand .vstand-mcell.good .vstand-mh { color: var(--success); }
.vstand .vstand-mcell.warn .vstand-mic { background: var(--warning-bg); } .vstand .vstand-mcell.warn .vstand-mic svg { stroke: var(--warning); } .vstand .vstand-mcell.warn .vstand-mv { color: var(--warning); } .vstand .vstand-mcell.warn .vstand-mh { color: var(--warning); }
.vstand .vstand-mcell.danger .vstand-mic { background: var(--danger-bg); } .vstand .vstand-mcell.danger .vstand-mic svg { stroke: var(--danger); } .vstand .vstand-mcell.danger .vstand-mv { color: var(--danger); } .vstand .vstand-mcell.danger .vstand-mh { color: var(--danger); }

/* protection + blacklist two-col */
.vstand .vstand-twocol { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-4); margin-bottom: var(--space-4); align-items: start; }
/* blacklist cell: stacked add form + scrollable list (last ~5 visible) */
.vstand .vstand-bl .vstand-blform { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 14px; }
.vstand .vstand-bl .vstand-blfield, .vstand .vstand-bl .vstand-blfield.email, .vstand .vstand-bl .vstand-blfield.reason { flex: none; min-width: 0; width: 100%; }
.vstand .vstand-bl .vstand-bladd { width: 100%; justify-content: center; }
/* protection windows — compact multi-column grid */
.vstand .vstand-prot-b { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 28px; padding: 4px 20px 10px; }
.vstand .vstand-prow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.vstand .vstand-prow:last-child { border-bottom: none; }
.vstand .vstand-pn { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--text-primary); }
.vstand .vstand-pi { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--bg-secondary); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-secondary); flex-shrink: 0; }
.vstand .vstand-pi svg { width: 14px; height: 14px; }
.vstand .vstand-winpill { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--bg-tertiary); color: var(--text-primary); white-space: nowrap; }
.vstand .vstand-winpill.zero { color: var(--success); background: var(--success-bg); }

/* blacklist */
.vstand .vstand-bl-b { padding: 18px 20px; }
.vstand .vstand-advisory { display: flex; align-items: flex-start; gap: 9px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 13px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 16px; }
.vstand .vstand-advisory svg { width: 15px; height: 15px; stroke: var(--text-secondary); flex-shrink: 0; margin-top: 1px; }
.vstand .vstand-blform { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.vstand .vstand-blfield { display: flex; flex-direction: column; gap: 6px; }
.vstand .vstand-blfield.email { flex: 1; min-width: 200px; }
.vstand .vstand-blfield.reason { flex: 1.3; min-width: 200px; }
.vstand .vstand-blk { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.vstand .vstand-blfield input { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 13px; color: var(--text-primary); font-size: 13px; outline: none; width: 100%; transition: border-color .15s, background .15s; }
.vstand .vstand-blfield input:focus { border-color: var(--border-hover); background: var(--bg-card); }
.vstand .vstand-blfield input::placeholder { color: var(--text-muted); }
.vstand .vstand-bladd { padding: 11px 18px; }
.vstand .vstand-bllist { border-top: 1px solid var(--border); max-height: 250px; overflow-y: auto; }
.vstand .vstand-blrow { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.vstand .vstand-blrow:last-child { border-bottom: none; }
.vstand .vstand-blem { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 500; color: var(--text-primary); }
.vstand .vstand-blrs { flex: 1; font-size: 12.5px; color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vstand .vstand-blrm { width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; border: 1px solid var(--border); color: var(--text-muted); background: var(--bg-secondary); cursor: pointer; flex-shrink: 0; transition: color .15s, border-color .15s; }
.vstand .vstand-blrm:hover { color: var(--danger); border-color: var(--danger); }
.vstand .vstand-blrm svg { width: 14px; height: 14px; }
.vstand .vstand-blempty { text-align: center; padding: 26px 16px 8px; color: var(--text-muted); }
.vstand .vstand-blempty svg { width: 30px; height: 30px; stroke: var(--text-muted); margin: 0 auto 10px; }
.vstand .vstand-ble1 { font-size: 13.5px; font-weight: 500; color: var(--text-secondary); }
.vstand .vstand-ble2 { font-size: 12px; margin-top: 3px; }

/* focus-visible */
.vstand .vstand-blfield input:focus-visible, .vstand .vstand-bladd:focus-visible, .vstand .vstand-blrm:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* responsive */
@media (max-width: 980px) {
  .vstand .vstand-row3 { grid-template-columns: 1fr; }      /* left area, then blacklist */
}
@media (max-width: 640px) {
  .vstand .vstand-toprow { grid-template-columns: 1fr; }    /* tier + status stack */
}
@media (max-width: 720px) {
  .vstand .vstand-mcell { border-right: none; }
  .vstand .vstand-blform { flex-direction: column; align-items: stretch; }
  .vstand .vstand-blfield { width: 100%; min-width: 0; }
  .vstand .vstand-bladd { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .vstand * { animation: none !important; transition: none !important; } }

/* ============================================================================
   VENDOR STOREFRONT LIVE EDITOR (.vsfront / .sfv) — renders the REAL public
   storefront (store-* classes, reused) inside the dashboard with an in-place edit
   layer. Only the editor CHROME + edit affordances are styled here. Tokens only.
   ============================================================================ */
.vsfront-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 14px 0; margin-bottom: var(--space-4); flex-wrap: wrap; border-bottom: 1px solid var(--border); background: var(--bg-primary); }
.vsfront-tt { display: flex; flex-direction: column; gap: 3px; }
.vsfront-t { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1; color: var(--text-primary); }
.vsfront-s { font-size: 11.5px; color: var(--text-muted); }
.vsfront-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vsfront-langs { display: inline-flex; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.vsfront-lang { padding: 6px 11px; border-radius: 999px; color: var(--text-secondary); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; transition: background .15s, color .15s; }
.vsfront-lang:hover { color: var(--text-primary); }
.vsfront-lang.on { background: var(--bg-tertiary); color: var(--text-primary); }
.vsfront-mode { display: inline-flex; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
.vsfront-mode-btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; background: none; border: none; transition: background .15s, color .15s; }
.vsfront-mode-btn svg { width: 14px; height: 14px; }
.vsfront-mode-btn.on { background: var(--accent); color: var(--accent-contrast); }
.vsfront-mode-btn[data-mode="preview"].on { background: var(--bg-tertiary); color: var(--text-primary); }
.vsfront-openpub { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; }
.vsfront-openpub:hover { color: var(--text-primary); }
.vsfront-openpub svg { width: 14px; height: 14px; }

.vsfront-hint { display: none; align-items: center; gap: 10px; padding: 10px 16px; background: var(--accent-glow); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 12.5px; margin-bottom: var(--space-4); }
.vsfront-hint svg { width: 16px; height: 16px; stroke: var(--text-primary); fill: none; flex-shrink: 0; }
.vsfront-hint b { color: var(--text-primary); }
.vsfront-root.vsfront-editmode .vsfront-hint { display: flex; }
.vsfront-alert { margin-bottom: var(--space-4); }
.vsfront-urlbar { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.vsfront-urlbar svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }
.vsfront-urlbar b { color: var(--text-secondary); font-weight: 500; }

/* canvas frame around the real storefront */
.vsfront-canvas { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; position: relative; padding: 0 0 4px; }
.vsfront-livebadge { position: absolute; top: 14px; left: 14px; z-index: 8; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: rgba(11, 12, 14, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--text-secondary); }
.vsfront-livebadge i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-secondary); }
.vsfront-canvas.is-editing .vsfront-livebadge { color: var(--accent); } .vsfront-canvas.is-editing .vsfront-livebadge i { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
/* the storefront uses its own .container-less layout inside the canvas */
.vsfront-canvas .store-header, .vsfront-canvas .store-tabs, .vsfront-canvas .store-pane, .vsfront-canvas .store-contact { max-width: none; }
.vsfront-canvas > .store-header { margin: 0; border-radius: 0; border-left: none; border-right: none; border-top: none; }
.vsfront-canvas .store-tabs, .vsfront-canvas .store-pane, .vsfront-canvas .store-contact { margin-left: 18px; margin-right: 18px; }

/* edit affordance (per region) */
.sfv-region { position: relative; }
.sfv-ed-aff { display: none; position: absolute; top: 8px; right: 8px; z-index: 6; }
.vsfront-canvas.is-editing .sfv-region > .sfv-ed-aff { display: inline-flex; }       /* tap-friendly: always visible in edit mode */
.sfv-ed-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-contrast); font-size: 11.5px; font-weight: 700; cursor: pointer; border: none; box-shadow: 0 4px 12px -4px rgba(0,0,0,.6); }
.sfv-ed-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.vsfront-canvas.is-editing .sfv-region:hover { box-shadow: inset 0 0 0 1.5px var(--accent); border-radius: var(--radius-sm); }
.sfv-region.is-open > .sfv-ed-aff { display: none !important; }
.sfv-region.is-open > *:not(.sfv-editor):not(.sfv-ed-aff) { display: none; }
@media (hover: hover) {
  .vsfront-canvas.is-editing .sfv-region > .sfv-ed-aff { opacity: 0; transition: opacity .12s; }
  .vsfront-canvas.is-editing .sfv-region:hover > .sfv-ed-aff { opacity: 1; }
}

/* inline editor */
.sfv-editor { background: var(--bg-card); border: 1.5px solid var(--accent); border-radius: var(--radius-md); padding: 14px; margin: 10px 0; }
.sfv-elabel { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; margin-bottom: 9px; }
.sfv-editor textarea, .sfv-editor input[type="text"], .sfv-social-grid input { width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--text-primary); font-size: 13.5px; outline: none; font-family: inherit; transition: border-color .15s, background .15s; }
.sfv-editor textarea:focus, .sfv-editor input[type="text"]:focus, .sfv-social-grid input:focus { border-color: var(--border-hover); background: var(--bg-card-hover); }
.sfv-editor textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
.sfv-editor textarea::placeholder, .sfv-editor input::placeholder { color: var(--text-muted); }
.sfv-editor input[type="file"] { color: var(--text-secondary); font-size: 12.5px; }
.sfv-ebtns { display: flex; align-items: center; gap: 9px; margin-top: 11px; flex-wrap: wrap; }
.sfv-ehint { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.sfv-social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.sfv-social-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.sfv-social-chip { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-secondary); }
.sfv-social-chip.empty { opacity: .5; }
.sfv-social-note { font-size: 11px; color: var(--text-muted); }
.sfv-banner-empty { display: grid; place-items: center; min-height: 120px; color: var(--text-muted); font-size: 13px; background: var(--bg-tertiary); }
.sfv-placeholder { color: var(--text-muted); font-style: italic; }

/* FAQ editor rows */
.sfv-faq-rows { display: flex; flex-direction: column; gap: 9px; }
.sfv-faq-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 9px; align-items: start; }
.sfv-faq-del { width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-muted); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.sfv-faq-del:hover { color: var(--danger); border-color: var(--danger); }
.sfv-faq-del svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.sfv-faq-add { margin-top: 10px; color: var(--accent); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; }
.sfv-faq-add svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* read-only manage hints */
.sfv-manage-hint { display: flex; align-items: center; gap: 9px; background: var(--bg-secondary); border: 1px dashed var(--border); border-radius: var(--radius-md); padding: 10px 14px; font-size: 12px; color: var(--text-secondary); margin: 0 18px 14px; }
.sfv-manage-hint svg { width: 15px; height: 15px; stroke: var(--text-muted); fill: none; flex-shrink: 0; }
.sfv-manage-hint a { color: var(--accent); font-weight: 600; margin-left: auto; white-space: nowrap; }

/* focus-visible */
.vsfront-lang:focus-visible, .vsfront-mode-btn:focus-visible, .vsfront-openpub:focus-visible,
.sfv-ed-btn:focus-visible, .sfv-faq-del:focus-visible, .sfv-faq-add:focus-visible,
.sfv-editor textarea:focus-visible, .sfv-editor input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

@media (max-width: 720px) {
  .vsfront-bar { position: static; }
  .vsfront-right { width: 100%; }
  .vsfront-canvas .store-tabs, .vsfront-canvas .store-pane, .vsfront-canvas .store-contact { margin-left: 12px; margin-right: 12px; }
  .sfv-social-grid { grid-template-columns: 1fr; }
  .sfv-faq-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .vsfront-root *, .vsfront-canvas * { animation: none !important; transition: none !important; } }

/* ============================================================================
   VENDOR STAFF & ROLES (.vstaff) — invite card (preset bundles + grouped readable
   permissions: label + real scope) + team list with status badges. Tokens only.
   ============================================================================ */
.vstaff-eyebrow { color: var(--text-secondary); font-size: 13px; margin-bottom: 4px; }
.vstaff-ph h1 { margin: 0; }
.vstaff-sub { color: var(--text-secondary); font-size: 13px; line-height: 1.55; margin-top: 8px; max-width: 680px; }
.vstaff-alert { margin-bottom: var(--space-4); }
.vstaff-card { overflow: hidden; padding: 0; margin-bottom: var(--space-4); }
.vstaff-ch { display: flex; align-items: center; gap: 11px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.vstaff-ci { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--accent-glow); display: grid; place-items: center; flex-shrink: 0; }
.vstaff-ci svg { width: 17px; height: 17px; stroke: var(--text-primary); fill: none; }
.vstaff-ct { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text-primary); }
.vstaff-ct small { display: block; color: var(--text-muted); font-weight: 400; font-size: 12px; margin-top: 2px; }
.vstaff-teamcount { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 10px; }
.vstaff-cb { padding: 20px; }

.vstaff-field { margin-bottom: 18px; }
.vstaff-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 7px; }
.vstaff-field input { width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; color: var(--text-primary); font-size: 14px; outline: none; transition: border-color .15s, background .15s; }
.vstaff-field input:focus { border-color: var(--border-hover); background: var(--bg-card); }
.vstaff-field input::placeholder { color: var(--text-muted); }

.vstaff-seclbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 10px; }
.vstaff-title-row { display: flex; align-items: center; gap: 8px; }
.vstaff-ch .vstaff-ct { flex: 1 1 auto; min-width: 0; }
.vstaff-pick2 { display: grid; grid-template-columns: 190px 1fr; gap: 22px; align-items: start; }
.vstaff-permcol { min-width: 0; }
.vstaff-groups { display: flex; flex-direction: column; gap: 8px; max-height: 440px; overflow-y: auto; padding: 2px; margin: -2px; }

.vstaff-presets { display: flex; flex-direction: column; gap: 7px; }
.vstaff-preset { display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: flex-start; padding: 10px 13px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.vstaff-preset-n { flex: 1; text-align: left; }
.vstaff-preset:hover { color: var(--text-primary); }
.vstaff-preset.on { background: var(--accent-glow); border-color: var(--accent); color: var(--text-primary); }
.vstaff-preset svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.vstaff-pc { font-variant-numeric: tabular-nums; font-size: 10.5px; font-weight: 700; background: var(--bg-tertiary); border-radius: 5px; padding: 1px 6px; color: var(--text-secondary); }
.vstaff-preset.on .vstaff-pc { background: var(--accent); color: var(--accent-contrast); }
.vstaff-preset-custom { font-style: italic; }

.vstaff-permbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.vstaff-cnt { font-size: 12.5px; color: var(--text-secondary); } .vstaff-cnt b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.vstaff-permacts { margin-left: auto; display: flex; gap: 14px; }
.vstaff-permacts button { font-size: 12px; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; }
.vstaff-permacts button.mute { color: var(--text-muted); }

.vstaff-pgroup { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0; }
.vstaff-gh { display: flex; align-items: stretch; }
.vstaff-pgroup:not(.collapsed) .vstaff-gh { border-bottom: 1px solid var(--border); }
.vstaff-gcheck { display: grid; place-items: center; padding: 0 11px; cursor: pointer; flex-shrink: 0; position: relative; }
.vstaff-gcheck.disabled { cursor: not-allowed; opacity: .5; }
.vstaff-gcheck input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vstaff-gcheck input:checked + .vstaff-chk, .vstaff-gcheck input:indeterminate + .vstaff-chk { background: var(--accent); border-color: var(--accent); }
.vstaff-gcheck input:checked + .vstaff-chk svg { opacity: 1; }
.vstaff-gcheck input:indeterminate + .vstaff-chk svg { opacity: 0; }
.vstaff-gcheck input:indeterminate + .vstaff-chk::after { content: ''; width: 9px; height: 2px; border-radius: 1px; background: var(--accent-contrast); }
.vstaff-gtoggle { flex: 1; display: flex; align-items: center; gap: 10px; padding: 11px 12px 11px 2px; background: none; border: none; cursor: pointer; min-width: 0; }
.vstaff-gn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.vstaff-gn svg { width: 15px; height: 15px; stroke: var(--text-secondary); fill: none; flex-shrink: 0; }
.vstaff-gchev { display: grid; place-items: center; color: var(--text-muted); transition: transform .18s; flex-shrink: 0; }
.vstaff-gchev svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.vstaff-pgroup.collapsed .vstaff-gchev { transform: rotate(-90deg); }
.vstaff-gbody { display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.vstaff-pgroup.collapsed .vstaff-gbody, .vstaff-gbody[hidden] { display: none; }
.vstaff-perm { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background .13s; }
.vstaff-perm:hover { background: var(--bg-secondary); }
.vstaff-perm.on { background: var(--accent-glow); }
.vstaff-perm.locked { cursor: not-allowed; opacity: .55; }
.vstaff-perm input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vstaff-chk { width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--text-muted); display: grid; place-items: center; flex-shrink: 0; transition: background .13s, border-color .13s; }
.vstaff-perm.on .vstaff-chk { background: var(--accent); border-color: var(--accent); }
.vstaff-chk svg { width: 11px; height: 11px; stroke: var(--accent-contrast); fill: none; opacity: 0; }
.vstaff-perm.on .vstaff-chk svg { opacity: 1; }
.vstaff-chk.lock { border: none; width: 20px; height: 20px; }
.vstaff-chk.lock svg { width: 15px; height: 15px; stroke: var(--text-muted); opacity: 1; }
.vstaff-pl { font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vstaff-send { margin-top: 16px; }

/* team */
.vstaff-empty { text-align: center; padding: 34px 20px; color: var(--text-muted); }
.vstaff-empty svg { width: 30px; height: 30px; stroke: var(--text-muted); fill: none; margin: 0 auto 10px; }
.vstaff-empty-t { font-size: 13.5px; font-weight: 500; color: var(--text-secondary); }
.vstaff-empty-s { font-size: 12px; margin-top: 3px; }
.vstaff-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); padding: 16px 20px; }
.vstaff-member { display: flex; flex-direction: column; gap: 9px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-secondary); }
.vstaff-member.editing { grid-column: 1 / -1; }
.vstaff-mtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vstaff-av { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--bg-tertiary); border: 1px solid var(--border); color: var(--text-secondary); font-size: 14px; font-weight: 700; }
.vstaff-mi { min-width: 0; }
.vstaff-mn { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.vstaff-name { font-weight: 600; font-size: 14px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.vstaff-me { font-size: 12px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vstaff-mrole { font-size: 11.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.vstaff-mrole svg { width: 13px; height: 13px; stroke: var(--text-muted); fill: none; flex-shrink: 0; }
.vstaff-mrole span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vstaff-sbadge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; flex-shrink: 0; }
.vstaff-sbadge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.vstaff-sbadge.active { background: var(--success-bg); color: var(--success); }
.vstaff-sbadge.invited { background: var(--warning-bg); color: var(--warning); }
.vstaff-sbadge.revoked { background: var(--danger-bg); color: var(--danger); }
.vstaff-macts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.vstaff-macts .btn, .vstaff-macts .vendor-inline-form { flex: 1; }
.vstaff-macts .vendor-inline-form .btn { width: 100%; justify-content: center; }
.vstaff-editform { width: 100%; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.vstaff-ebtns { display: flex; align-items: center; gap: 9px; margin-top: 12px; }

/* focus-visible */
.vstaff-preset:focus-visible, .vstaff-permacts button:focus-visible, .vstaff-gall:focus-visible,
.vstaff-perm input:focus-visible + .vstaff-chk, .vstaff-field input:focus-visible,
.vstaff-macts .btn:focus-visible, .vstaff-send:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

@media (max-width: 1024px) {
  .vstaff-pick2 { grid-template-columns: 1fr; }
  .vstaff-team { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .vstaff-permbar { flex-direction: column; align-items: flex-start; }
  .vstaff-permacts { margin-left: 0; }
}
@media (max-width: 560px) {
  .vstaff-team { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .vstaff * { animation: none !important; transition: none !important; } }

/* ============================================================================
   VENDOR SETTINGS HUB (.vset) — General · Payouts · Verification · API tabs.
   Tokens only; sticky tabbar, switches, payout/doc rows, scope/event chips,
   status panels, responsive tables→cards. Dark+light, focus-visible, reduced-motion.
   ============================================================================ */
.vset-eyebrow { color: var(--text-secondary); font-size: 13px; margin-bottom: 4px; }
.vset-ph h1 { margin: 0; }
.vset-sub { color: var(--text-secondary); font-size: 13px; line-height: 1.55; margin-top: 8px; max-width: 640px; }
.vset-alert { margin-bottom: var(--space-4); }

/* tab bar */
.vset-tabbar { position: sticky; top: 0; z-index: 12; display: flex; gap: 4px; background: var(--bg-primary); border-bottom: 1px solid var(--border); margin-bottom: 22px; padding-top: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vset-tab { display: inline-flex; align-items: center; gap: 9px; padding: 13px 16px; color: var(--text-secondary); font-size: 13.5px; font-weight: 600; position: relative; white-space: nowrap; cursor: pointer; background: none; border: none; transition: color .15s; }
.vset-tab svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.vset-tab:hover { color: var(--text-primary); }
.vset-tab.on { color: var(--text-primary); }
.vset-tab.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; }
.vset-tpill { font-size: 10px; font-weight: 700; background: var(--success-bg); border: 1px solid var(--success); color: var(--success); border-radius: 7px; padding: 1px 7px; }

.vset-panel { display: none; }
.vset-panel.on { display: block; animation: vsetFade .2s ease; }
@keyframes vsetFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vset-panel.on { animation: none; } }

/* card */
.vset-card { overflow: hidden; padding: 0; margin-bottom: var(--space-4); }
.vset-ch { display: flex; align-items: center; gap: 11px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.vset-ci { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--accent-glow); display: grid; place-items: center; flex-shrink: 0; }
.vset-ci svg { width: 17px; height: 17px; stroke: var(--text-primary); fill: none; }
.vset-ci.amber { background: var(--warning-bg); } .vset-ci.amber svg { stroke: var(--warning); }
.vset-ci.blue svg { stroke: var(--text-secondary); }
.vset-ct { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text-primary); }
.vset-ct small { display: block; color: var(--text-muted); font-weight: 400; font-size: 12px; margin-top: 2px; }
.vset-cb { padding: 20px; }
.vset-title-row { display: flex; align-items: center; gap: 8px; }
.vset-ch .vset-ct { flex: 1 1 auto; min-width: 0; }
.vset-ch .vui-hint { flex-shrink: 0; }
/* General tab: Vacation + Account&security as two outlined cells (owner: 1.5px lines) */
.vset-gen2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.vset-gen2 .vset-card { background: transparent; border: 1.5px solid var(--border); margin-bottom: 0; overflow: visible; }
.vset-gen2 .vset-cb { padding: 16px 18px; }
.vset-gen2 .vset-shortrow { padding: 11px 13px; margin-bottom: 8px; }
/* Payouts tab: add-form (left) + methods (right) as two compact outlined cards */
.vset-pay2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.vset-pay2 .vset-card { background: transparent; border: 1.5px solid var(--border); margin-bottom: 0; overflow: visible; }
.vset-pay2 .vset-cb { padding: 16px 18px; }
.vset-pay2 .vset-field { margin-bottom: 12px; }
.vset-pay2 .vset-pmrow { padding: 12px 14px; gap: 11px; margin-bottom: 10px; }
.vset-pay2 .vset-pmic { width: 34px; height: 34px; } .vset-pay2 .vset-pmic svg { width: 16px; height: 16px; }
.vset-pay2 .vset-pmacts { width: 100%; margin-top: 6px; }
.vset-pay2 .vset-infonote { margin: 10px 0 0; }
/* API tab: API keys (left) + Webhooks (right) as two compact outlined cards */
.vset-api2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.vset-api2.single { grid-template-columns: 1fr; }
.vset-api2 .vset-card { background: transparent; border: 1.5px solid var(--border); margin-bottom: 0; overflow: visible; }
.vset-api2 .vset-cb { padding: 16px 18px; }
.vset-api2 .vset-field { margin-bottom: 12px; }
.vset-api2 .vset-chip { min-width: 0; flex: 1 1 calc(50% - 5px); }
.vset-api2 form > .btn-primary { width: 100%; justify-content: center; }
/* lists render as compact stacked cards in the narrow half-width column (reuses the table's existing data-l labels — no markup change) */
.vset-api2 .vset-table { margin-top: 14px; }
.vset-api2 .vset-table thead { display: none; }
.vset-api2 .vset-table tr { display: block; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 10px; background: var(--bg-secondary); }
.vset-api2 .vset-table td { display: flex; justify-content: space-between; gap: 12px; border: none; padding: 6px 0; }
.vset-api2 .vset-table td::before { content: attr(data-l); color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0; }
.vset-api2 .vset-table td:empty { display: none; }
/* long comma-joined scope/event lists stack below their label instead of fighting space-between */
.vset-api2 .vset-table td.mono { flex-direction: column; align-items: flex-start; gap: 4px; word-break: break-word; }
.vset-api2 .vset-rowacts { width: 100%; }
.vset-api2 .vset-rowacts .btn { flex: 1 1 auto; justify-content: center; }
.vset-api2 .vset-apidoc { flex-wrap: wrap; }
.vset-muted { color: var(--text-muted); font-size: 13px; }
.vset-seclbl { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin: 18px 0 13px; padding-top: 18px; border-top: 1px solid var(--border); }

.vset-field { margin-bottom: 16px; }
.vset-field > label { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); margin-bottom: 7px; }
.vset-field input, .vset-field select { width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; color: var(--text-primary); font-size: 14px; outline: none; transition: border-color .15s, background .15s; }
.vset-field input:focus, .vset-field select:focus { border-color: var(--border-hover); background: var(--bg-card); }
.vset-field input::placeholder { color: var(--text-muted); }
.vset-field .mono, .vset .mono { font-variant-numeric: tabular-nums; font-family: var(--font-mono, ui-monospace, monospace); }

/* switch */
.vset-switchrow { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-secondary); cursor: pointer; margin-bottom: 16px; }
.vset-switchrow-sm { margin: 4px 0 16px; }
.vset-si { flex: 1; }
.vset-st { display: block; font-weight: 600; font-size: 14px; color: var(--text-primary); }
.vset-sd { display: block; font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.45; }
.vset-warn { color: var(--warning); } .vset-ok { color: var(--success); }
.vset-switch { width: 46px; height: 26px; border-radius: 999px; background: var(--bg-tertiary); border: 1px solid var(--border); position: relative; flex-shrink: 0; transition: background .18s, border-color .18s; }
.vset-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.vset-switch i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-muted); transition: left .18s, background .18s; pointer-events: none; }
.vset-switch.on, .vset-switch:has(input:checked) { background: var(--success-bg); border-color: var(--success); }
.vset-switch.on i, .vset-switch:has(input:checked) i { left: 22px; background: var(--success); }

/* shortcut rows */
.vset-shortrow { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-secondary); margin-bottom: 10px; transition: background .15s; color: inherit; }
.vset-shortrow:last-child { margin-bottom: 0; }
.vset-shortrow:hover { background: var(--bg-hover); }
.vset-shic { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--bg-tertiary); display: grid; place-items: center; color: var(--text-secondary); flex-shrink: 0; }
.vset-shic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; }
.vset-shortrow.danger .vset-shic { background: var(--danger-bg); color: var(--danger); }
.vset-shx { flex: 1; min-width: 0; } .vset-shx .a { display: block; font-weight: 600; font-size: 13.5px; color: var(--text-primary); } .vset-shx .b { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.vset-arr { flex-shrink: 0; color: var(--text-muted); display: grid; place-items: center; } .vset-arr svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.vset-arr { color: var(--text-muted); } .vset-arr svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }

.vset-infonote { display: flex; align-items: flex-start; gap: 9px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 14px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin: 12px 0; }
.vset-infonote svg { width: 16px; height: 16px; stroke: var(--text-primary); fill: none; flex-shrink: 0; margin-top: 1px; }
.vset-infonote a { color: var(--accent); font-weight: 600; }

/* payout method rows */
.vset-pmrow { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-secondary); margin-bottom: 12px; flex-wrap: wrap; }
.vset-pmic { width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--bg-tertiary); display: grid; place-items: center; color: var(--text-secondary); flex-shrink: 0; }
.vset-pmic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
.vset-pmi { flex: 1; min-width: 0; }
.vset-pmn { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.vset-pmn .nm { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.vset-pmh { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }
.vset-pmmask { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.vset-pmacts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.vset-chip-default { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--accent); background: var(--accent-glow); border: 1px solid var(--accent); border-radius: 7px; padding: 2px 9px; }

/* verification */
.vset-vstatus { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius-lg); flex-wrap: wrap; }
.vset-vstatus.ok { border: 1px solid var(--success); background: var(--success-bg); }
.vset-vstatus.pending { border: 1px solid var(--warning); background: var(--warning-bg); }
.vset-vbig { width: 54px; height: 54px; border-radius: var(--radius-md); display: grid; place-items: center; flex-shrink: 0; }
.vset-vstatus.ok .vset-vbig { background: var(--success-bg); } .vset-vstatus.ok .vset-vbig svg { stroke: var(--success); }
.vset-vstatus.pending .vset-vbig { background: var(--warning-bg); } .vset-vstatus.pending .vset-vbig svg { stroke: var(--warning); }
.vset-vbig svg { width: 28px; height: 28px; fill: none; }
.vset-vi { flex: 1; min-width: 200px; }
.vset-vbadge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--success); color: var(--accent-contrast); font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: capitalize; }
.vset-vbadge.pending { background: var(--warning); }
.vset-vmeta { display: flex; gap: 20px; margin-top: 10px; flex-wrap: wrap; }
.vset-vmeta b { display: block; color: var(--text-muted); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; margin-bottom: 3px; }
.vset-vmeta .val { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-primary); }
.vset-vbadge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vset-vstatus.bad { border: 1px solid var(--danger); background: var(--danger-bg); }
.vset-vstatus.bad .vset-vbig { background: var(--danger-bg); } .vset-vstatus.bad .vset-vbig svg { stroke: var(--danger); }
.vset-vbadge.bad { background: var(--danger); }
/* Verification: 2 outlined cells + per-doc status icon + "+" upload */
.vset-ver2 { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-4); align-items: start; }
.vset-ver2 .vset-card { background: transparent; border: 1.5px solid var(--border); margin-bottom: 0; overflow: visible; }
.vset-ver2 .vset-cb { padding: 16px 18px; }
.vset-ver2 .vset-docrow { padding: 11px 13px; margin-bottom: 9px; gap: 11px; }
.vset-dstatus { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.vset-dstatus svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.vset-dstatus.none { background: var(--bg-tertiary); color: var(--text-muted); }
.vset-dstatus.ok { background: var(--success-bg); color: var(--success); }
.vset-dstatus.pending { background: var(--warning-bg); color: var(--warning); }
.vset-dstatus.bad { background: var(--danger-bg); color: var(--danger); }
.vset-dplus { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); border: 1px dashed var(--border); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; flex-shrink: 0; transition: border-color .15s, color .15s; }
.vset-dplus:hover, .vset-dplus:focus-within { border-color: var(--accent); color: var(--accent); }
.vset-dplus svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.vset-docsubmit { margin-top: 4px; }
.vset-docrow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-secondary); margin-bottom: 10px; flex-wrap: wrap; }
.vset-dic { width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--bg-tertiary); display: grid; place-items: center; color: var(--text-secondary); flex-shrink: 0; }
.vset-dic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.vset-di { flex: 1; min-width: 0; }
.vset-dn { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.vset-dn .nm { font-weight: 600; font-size: 13.5px; color: var(--text-primary); }
.vset-dh { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.vset-req { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; color: var(--warning); background: var(--warning-bg); border: 1px solid var(--warning); border-radius: 6px; padding: 2px 8px; }
.vset-opt { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; color: var(--text-muted); background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; }
.vset-docst { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; border-radius: 6px; padding: 2px 8px; }
.vset-docst.ok { color: var(--success); background: var(--success-bg); } .vset-docst.bad { color: var(--danger); background: var(--danger-bg); } .vset-docst.pending { color: var(--warning); background: var(--warning-bg); }
.vset-filebtn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--radius-sm); border: 1px dashed var(--border); background: var(--bg-card); color: var(--text-secondary); font-size: 12.5px; font-weight: 600; flex-shrink: 0; cursor: pointer; max-width: 220px; overflow: hidden; }
.vset-filebtn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.vset-filebtn.chosen { border-style: solid; border-color: var(--accent); color: var(--text-primary); }
.vset-filebtn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; flex-shrink: 0; }

/* scope/event chips */
.vset-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.vset-chip { display: flex; flex-direction: column; gap: 3px; padding: 9px 13px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-secondary); cursor: pointer; min-width: 150px; transition: border-color .13s, background .13s; }
.vset-chip.on { border-color: var(--accent); background: var(--accent-glow); }
.vset-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vset-chip-l { font-size: 12px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 7px; }
.vset-chip-box { width: 15px; height: 15px; border-radius: 5px; border: 2px solid var(--text-muted); display: grid; place-items: center; flex-shrink: 0; transition: background .13s, border-color .13s; }
.vset-chip.on .vset-chip-box { background: var(--accent); border-color: var(--accent); }
.vset-chip-box svg { width: 9px; height: 9px; stroke: var(--accent-contrast); fill: none; opacity: 0; }
.vset-chip.on .vset-chip-box svg { opacity: 1; }
.vset-chip-tok { font-variant-numeric: tabular-nums; font-family: var(--font-mono, ui-monospace, monospace); font-size: 10.5px; color: var(--text-muted); padding-left: 22px; }
.vset-chip.on .vset-chip-tok { color: var(--accent); }

/* tables */
.vset-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
.vset-table th { text-align: left; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; padding: 0 12px 10px; }
.vset-table td { padding: 13px 12px; border-top: 1px solid var(--border); vertical-align: middle; color: var(--text-primary); }
.vset-table td.mono, .vset-table code { font-variant-numeric: tabular-nums; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--text-secondary); }
.vset-stat { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: capitalize; }
.vset-stat.active { background: var(--success-bg); color: var(--success); }
.vset-stat.revoked { background: var(--danger-bg); color: var(--danger); }
.vset-stat.paused { background: var(--bg-tertiary); color: var(--text-secondary); }
.vset-rowacts { display: flex; gap: 6px; flex-wrap: wrap; }
.vset-apidoc { margin-top: 14px; font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.vset-apidoc svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.vset-apidoc code { font-variant-numeric: tabular-nums; font-family: var(--font-mono, ui-monospace, monospace); color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; }
.vset-secret { display: block; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; word-break: break-all; margin-top: 6px; }
.vset-flash { margin-bottom: var(--space-4); }
.vset-empty { text-align: center; padding: 26px 16px; color: var(--text-muted); font-size: 13px; }
.vset-empty svg { width: 30px; height: 30px; stroke: var(--text-muted); fill: none; margin: 0 auto 10px; }

/* focus-visible */
.vset-tab:focus-visible, .vset-field input:focus-visible, .vset-field select:focus-visible,
.vset-switch input:focus-visible + i, .vset-chip input:focus-visible ~ .vset-chip-l .vset-chip-box,
.vset-shortrow:focus-visible, .vset-filebtn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* responsive */
@media (max-width: 720px) {
  .vset-tabbar { margin-left: -4px; margin-right: -4px; padding-left: 4px; padding-right: 4px; }
  .vset-pmrow, .vset-docrow { flex-wrap: wrap; }
  .vset-pmacts, .vset-filebtn { width: 100%; margin-top: 8px; justify-content: center; max-width: none; }
  .vset-chip { min-width: 0; flex: 1 1 140px; }
  .vset-table thead { display: none; }
  .vset-table tr { display: block; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; margin-bottom: 10px; background: var(--bg-secondary); }
  .vset-table td { display: flex; justify-content: space-between; gap: 12px; border: none; padding: 6px 0; }
  .vset-table td::before { content: attr(data-l); color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
  .vset-rowacts { width: 100%; }
}
@media (max-width: 860px) { .vset .vset-gen2, .vset .vset-pay2, .vset .vset-ver2, .vset .vset-api2 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .vset * { animation: none !important; transition: none !important; } }

/* =====================================================================
   VENDOR COMPACT + HARMONIZE PASS (2026-06-14) — single-source overrides so
   every vendor page reads at the dashboard's compact, monochrome scale.
   Frontend-only; appended last so it wins by source order (no !important).
   ===================================================================== */
/* 1 — oversized page titles down to the dashboard scale (was fs-3xl) */
.vord-title, .vprod-title, .vbulk-title, .vcon-title { font-size: var(--fs-2xl); }

/* 2 — charts/bars/hero use the monochrome accent like the dashboard (not the
   loud green that drifted from the intended monochrome theme). Semantic
   success/danger is kept ONLY on +/- deltas, status pills and the net/fee/
   commission split-bar legend (where distinct colors carry meaning). */
.vearn .vearn-bar,
.vana .vana-bar { fill: var(--accent); }
.vana .vana-track i { background: var(--accent); }
.vearn .vearn-hero-big { font-size: var(--fs-3xl); color: var(--text-primary); }

/* 3 — info hint: a circular "i" next to a heading that reveals a popover on click
   (replaces verbose inline info banners). Reusable; toggled by app.js .vui-hint handler. */
.vui-titlerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Shared compact "← Back to …" link for sub-pages (replaces breadcrumbs in the vendor portal). */
.vui-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; }
.vui-back svg { width: 16px; height: 16px; flex: 0 0 auto; }
.vui-back:hover { color: var(--text-primary); }
.vui-back:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }
/* ============================================================================
   Themed dropdown (.hl-dd) — JS-enhanced [data-hl-select]; the native <select>
   stays in the DOM (form submit + change) but hidden, replaced by a dark-theme
   button + menu. Falls back to the native select if JS is off.
   ============================================================================ */
.hl-dd { position: relative; }
.hl-dd-native { display: none; }
.hl-dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; color: var(--text-primary); font-size: 14px; line-height: 1.3; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.hl-dd-btn:hover { border-color: var(--border-hover); }
.hl-dd.open .hl-dd-btn { border-color: var(--border-hover); background: var(--bg-card); }
.hl-dd-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-dd-chev { width: 16px; height: 16px; stroke: var(--text-muted); fill: none; flex-shrink: 0; transition: transform .18s; }
.hl-dd.open .hl-dd-chev { transform: rotate(180deg); }
.hl-dd-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 5px; max-height: 280px; overflow-y: auto; }
.hl-dd-opt { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: var(--radius-sm); padding: 9px 11px; color: var(--text-secondary); font-size: 13.5px; cursor: pointer; transition: background .12s, color .12s; }
.hl-dd-opt:hover { background: var(--bg-secondary); color: var(--text-primary); }
.hl-dd-opt.on { background: var(--accent-glow); color: var(--text-primary); font-weight: 600; }
.hl-dd-btn:focus-visible, .hl-dd-opt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hl-dd-chev { transition: none; } }

.vui-hint { position: relative; display: inline-flex; vertical-align: middle; }
.vui-hint-btn { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; transition: color var(--transition), background var(--transition); }
.vui-hint-btn:hover,
.vui-hint.open .vui-hint-btn { color: var(--accent); background: var(--bg-hover); }
.vui-hint-btn svg { width: 17px; height: 17px; }
.vui-hint-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.vui-hint-pop { position: absolute; top: calc(100% + 7px); left: 0; z-index: 60; display: none; width: max-content; max-width: min(360px, 78vw); padding: 11px 13px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: 1.5; letter-spacing: normal; text-transform: none; white-space: normal; }
.vui-hint--right .vui-hint-pop { left: auto; right: 0; }
.vui-hint.open .vui-hint-pop { display: block; }
@media (max-width: 480px) { .vui-hint-pop { position: fixed; left: 12px; right: 12px; top: auto; max-width: none; width: auto; } }

/* ── Guided review modal (buyer: My Orders / My Licenses "Leave a review") ────────────
   Reuses .hl-modal-* (full-screen on mobile) + a SKIPPABLE 1–5 star picker per question. */
.gr-product { font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--text-primary); margin: 2px 0 4px; }
.gr-hint { font-size: var(--fs-xs); color: var(--text-muted); margin: 0 0 16px; line-height: 1.5; }
.gr-sec { margin-bottom: 18px; }
.gr-sec-h { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-semibold); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.gr-sec-ic { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-sm); background: var(--bg-tertiary); border: 1px solid var(--border); }
.gr-sec-ic svg { width: 13px; height: 13px; fill: none; stroke: var(--text-secondary); stroke-width: 1.8; }
.grq { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; flex-wrap: wrap; }
.grq-label { font-size: var(--fs-sm); color: var(--text-primary); flex: 1 1 55%; min-width: 150px; line-height: 1.4; }
.grq-stars { display: inline-flex; gap: 2px; flex-shrink: 0; }
.grq-star { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: none; background: none; cursor: pointer; color: var(--border); transition: color var(--transition), transform .1s; }
.grq-star svg { width: 26px; height: 26px; fill: currentColor; }
.grq-star.on { color: #f5a623; }
.grq-star:hover { transform: scale(1.08); }
.gr-comment { width: 100%; margin-top: 6px; padding: 10px 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font: inherit; font-size: var(--fs-sm); resize: vertical; box-sizing: border-box; }
.gr-anon { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; cursor: pointer; }
.gr-anon input { position: absolute; opacity: 0; width: 0; height: 0; }
.gr-anon-box { flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border); background: var(--bg-secondary); display: grid; place-items: center; margin-top: 1px; transition: background var(--transition), border-color var(--transition); }
.gr-anon-box svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3; opacity: 0; }
.gr-anon input:checked + .gr-anon-box { background: var(--accent); border-color: var(--accent); }
.gr-anon input:checked + .gr-anon-box svg { opacity: 1; }
.gr-anon input:focus-visible + .gr-anon-box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.gr-anon-txt { font-size: var(--fs-sm); color: var(--text-primary); display: flex; flex-direction: column; gap: 2px; }
.gr-anon-txt small { color: var(--text-muted); font-size: var(--fs-2xs); }
.gr-err { margin-top: 12px; padding: 9px 12px; border-radius: var(--radius-md); background: var(--danger-bg); border: 1px solid rgba(239,68,68,.3); color: var(--danger); font-size: var(--fs-sm); }
.gr-review-btn { white-space: nowrap; }
.gr-review-btn.gr-done { opacity: .6; pointer-events: none; }
.od-review-row { margin-top: 12px; }
@media (max-width: 480px) {
  .grq { gap: 4px; padding: 10px 0; }
  .grq-label { flex-basis: 100%; min-width: 0; }
  .grq-star { width: 44px; height: 44px; }   /* ≥44px tap target on phones */
  .grq-star svg { width: 28px; height: 28px; }
}
/* Per-question star breakdown shown inside a published review (from its `criteria`). */
.rv-criteria { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 6px; }
.rv-crit-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--fs-xs); line-height: 1.3; }
.rv-crit-q { color: var(--text-secondary); }
.rv-crit-stars { display: inline-flex; gap: 1px; flex-shrink: 0; }
.rv-crit-stars svg { width: 13px; height: 13px; }
.rv-crit-stars svg.on { fill: #f5a623; }
.rv-crit-stars svg.off { fill: var(--border); }