@charset "UTF-8";

/* ============================================================================
   APPLICATION.CSS - Application-Specific Overrides
   ============================================================================
   This file extends component-library.css with app-specific needs:
   - Layout bridges (DOM structure differs from component library demos)
   - Hidden elements (H1 title, form labels in header context)
   - Icon/image references (SVGs, PNGs)
   - Page-name variants (#Body[page-name="..."])
   - Scroll state overrides (.scrolled, .scrolledBack)
   - Navigation integration (tabbed view framework bridge)
   - Bottom nav icon mappings

   Component structure/visual styling → component-library.css
   App-specific images & overrides → this file
   ============================================================================ */

/* ==========================================================================
   GERNAL CUSTOM OVERRIDES - need to fit somewhere better in the flow still 
   ========================================================================== */

#Mod_Products .detail-section.describe .description {
    max-width: initial;
}

#Mod_StockSearch[ux-no-results][data-empty-state-type="onboarding"] .search-welcome-header,
#Mod_ThreadSearch[ux-no-results][data-empty-state-type="default"] .search-welcome-header,
[data-empty-state-type="auth_required"] #Items_ProductResults {
    display: none;
}
#Mod_StockSearch[ux-no-results][data-empty-state-type="onboarding"] .onboarding-welcome,
#Cnt_ProductNoResults_AuthRequired {
    margin-top: var(--spacing-xl);
}

.search-welcome-header .realtime-status {
    display: none; /* just hide for now, this should just be assumed */
}
#Body[ux-anon="1"] #Mod_Products[data-seller-store-root="false"] .breadcrumb-navigation {
    display: none;
}

body[page-name="Checkout"].scrolledBack .app-header {
    position: static;
}

#Pnl_ProfileSetup .uploader.upload-dropzone {
    min-width: 0;
    width: auto;
    align-self: stretch;
}

[profile-field-type="avatar"] img {
    border-radius: var(--border-radius-full);
}

#Interactions .view[ux-change-form] #Dlg_MeetupLocationOnboarding .board {
    max-width: initial;
}

#OnboardingAvatarPreview .icon-svg {
    width: var(--icon-size-xl, var(--icon-size-md));
    height: var(--icon-size-xl, var(--icon-size-md));
}

#RecentlyViewedEmpty {
    justify-items: center;
}

#Tooltip {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Prevent tooltip output from causing horizontal scroll */
#Tooltip .output {
    max-width: calc(100vw - 20px);
    overflow-wrap: break-word;
}

#AttributeValueList {
    width: 100%;
}

/* create listing mobile footer needs to be wide primary button */
@media (max-width: 680px) {
    #View_CreateListing.dialog-drawer .dialog-footer {
        flex-direction: column-reverse;
        gap: var(--spacing-lg);
    }
}

#Content_StockDetail {
    width: 100%;
    max-width: var(--container-max-width, 1400px);
}

#Interactions #Dlg_VariantWizard[ux-change-form] .content .board {
    align-items: center;
}

#Interactions #Dlg_PublishWizard[ux-change-form] .content.uptodate .board,
#Interactions #Dlg_PublishWizard[ux-change-form] .content.welcome .board,
#Interactions #Dlg_PublishWizard[ux-change-form] .content.success .board {
    align-items: center;
}

/* ==========================================================================
   HIDDEN COMPONENTS (default)
   ========================================================================== */

.mode-display-pending .publish-reminder {
    display: none;
}

/* Hide live indicators if never published
   Applied to:
   - stock-detail view via stock-published="0" or data-published-state="draft-only"
   - dialogs opened from listing detail via data-listing-ever-published="false" */
[stock-published="0"] .live-indicator,
[stock-published="0"] .live-operation-notice,
[data-published-state="draft-only"] .live-indicator,
[data-published-state="draft-only"] .live-operation-notice,
[data-listing-ever-published="false"] .live-indicator,
[data-listing-ever-published="false"] .live-operation-notice {
    display: none !important;
}

#Content_StockSearch .cmdBulkActions { display:none; } /* not implemented yet */
#Content > h2.title {
    display: none;
}

.activity-realtime-footer {
    display: none;
}

#Menu {
    display: none;
}

#Dlg_StockFamilyContext > .dialog-footer {
    display: none;
}
#Dlg_VariantContext .navigation > .dialog-footer {
    display: none;
}

#Body[ux-anon="0"] .anonymous-only {
    display: none;
}

#Body[ux-anon="1"] .authenticated-only {
    display: none;
}


#Tv_BrowseBrand {
    display: none;
}

#ProductSummary_AddToCart .delivery-location .tab-item::after,
#ProductSummary_ProductDetail .delivery-location .tab-item::after {
    display: none;
}

#ProductSummary_ProductDetail .productDetails {
    display: none;
}

.back-to-search {
    display: none;
}

.app-header-search {
    margin-left: 0;
}
[page-name="Index"] .app-header-search {
    margin-left: auto;
}
.scrolledBack .app-header-search {
    margin-left: auto;
}
@media (max-width: 768px) {
    .app-header-search {
        margin-left: auto;
    }
}

.seller-scope-banner .banner-actions .scope-actions {
    display: none;
}

#Body[ux-modal] {
    overflow: hidden;
}

/* --- Fallback Option (None of These) --- */
.category-card.fallback-option {
    display:none; /* hide for now, not supported */
}

#Dlg_StockFamilyContext .menu-item.duplicateFamily { /* disabled for now */
    display: none;
}

/* ==========================================================================
   SELLER SCOPE — Visibility Rules
   --------------------------------------------------------------------------
   Seller scope components are hidden by default and shown based on
   data-navigation-scope attribute set by TypeScript on #Mod_Products.
   Migrated from style-shop-seller.css.
   Extends: component-library.css Section 52 (Seller Scope Components)
   ========================================================================== */

/* Hidden by default */
#SellerScopeBanner,
#ProductSellerInfo {
    display: none;
}

#Mod_Products #SellerUserInfo {
    display: none;
}

/* Seller scope active: show banner */
#Mod_Products[data-navigation-scope="seller"] #SellerScopeBanner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-self: center;
    width: 100%;
    max-width: var(--container-max-width, 1400px);
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--spacing-sm);
}

/* Seller store root: show user info panel */
#Mod_Products[data-navigation-scope="seller"][data-seller-store-root="true"] #SellerUserInfo {
    display: flex;
    flex-direction: column;
}

/* Seller scope: hide product-level seller info */
#Mod_Products[data-navigation-scope="seller"] #ProductSellerInfo {
    display: none;
}

/* Marketplace scope: hide seller scope elements */
#Mod_Products[data-navigation-scope="marketplace"] #SellerScopeBanner,
#Mod_Products[data-navigation-scope="marketplace"] #SellerUserInfo {
    display: none;
}

/* Marketplace detail: hide product seller info */
#Mod_Products[data-navigation-scope="marketplace"][search-context-state="detail"] #ProductSellerInfo {
    display: none;
}

/* Breadcrumb actions: shown in seller scope or when seller context exists */
#Mod_Products[data-navigation-scope="seller"] .breadcrumb-actions,
#Mod_Products[data-navigation-scope="marketplace"][data-seller-context]:not([data-seller-context=""]) .breadcrumb-actions {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}


/* ==========================================================================
   HEADER — Layout Bridges
   --------------------------------------------------------------------------
   The component library expects direct children of .app-header-primary:
     .app-header-logo → .app-header-search → .app-header-nav → .app-header-actions

   The real Razor HTML wraps these in a .container div:
     .app-header-primary > .container > [logo, search, nav, actions]

   This bridge passes flex layout through the .container wrapper.
   ========================================================================== */

/* Hide the page H1 title inside the header (SEO-only element) */
.app-header .title {
    display: none;
}

/* Bridge: pass flex layout through .container wrapper */
.app-header-primary .container {
    display: flex;
    align-items: center;
    column-gap: var(--spacing-md);
    row-gap: var(--spacing-xs);
    width: 100%;
    max-width: none;
    position: relative;
    text-align: left;
}

/* Search label: visually hidden (placeholder + search icon serve the role) */
.app-header-search label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================================
   HEADER — Icon Images & ID-Specific Overrides
   Extends: component-library.css Section 6B (App Header)
   ========================================================================== */

/* --- Cart icon --- */
#Nav_Store #Ni_Cart .name {
    background-image: url("/images/icon/cart-black.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    align-self: center;
    justify-self: center;
    max-height: 25px;
    text-indent: -9999px;
}

/* Cart bounce animation on add-to-cart */
#Ni_Cart[event-complete] {
    animation: 1.2s cubic-bezier(0.04, 0.4, 0.5, 0.95) 0s 1 normal forwards running bounce;
}

#Ni_Cart[data-count] {
    transform: scale(0.85);
}

#Ni_Cart[data-count="0"] {
    transform: scale(1);
}

/* Cart count hide when zero */
#Nav_Store #Ni_Cart .totalCount[data-value="0"] {
    display: none;
}

/* --- User action icons --- */
#Nav_User #Cmd_Calendar {
    background-image: url("/images/skin/icon.calendar@2x.png");
    background-size: var(--spacing-lg) var(--spacing-lg);
    background-repeat: no-repeat;
    background-position: center center;
}

#Nav_User #Cmd_UserOptions {
    gap: var(--spacing-xs);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius-full);
    padding: 2px 8px 2px 2px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#Nav_User #Cmd_UserOptions .app-header-user-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

#Nav_User #Cmd_UserOptions .app-header-user-slug {
    font-size: var(--font-size-sm);
    color: var(--color-primary-on-dark);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#Nav_User #Cmd_UserOptions .app-header-user-icon {
    display: flex;
    background-image: url("/images/skin/icon.user.png");
    background-size: var(--spacing-md) var(--spacing-md);
    background-repeat: no-repeat;
    background-position: center center;
    background-color: var(--color-background);
    border-radius: 50%;
    width: var(--spacing-md);
    height: var(--spacing-md);
    flex-shrink: 0;
}

#Nav_User #Cmd_UserOptions .app-header-user-arrow {
    display: flex;
    background-image: url("/images/icon/nav-arrow-down-white.svg");
    background-size: var(--spacing-md) var(--spacing-md);
    background-repeat: no-repeat;
    background-position: center center;
    width: var(--spacing-md);
    height: var(--spacing-md);
    flex-shrink: 0;
}


/* ==========================================================================
   HEADER — Search Input Overrides
   The component library's .app-header-search handles height, padding,
   background, and border-radius. Only truly app-specific overrides here.
   ========================================================================== */

/* Clear button z-index (above search icon z-index:1) */
#Header #Filter_ProductKeyword.textbox .cmdClear {
    z-index: 2;
}

/* Filter visibility: seller vs marketplace */
.viewSeller #Header #Filter_ProductKeyword {
    display: none;
}

.viewSeller #Header #Filter_ModifyKeyword {
    display: inline-block;
}


/* ==========================================================================
   HEADER — Page-Name Variants (Image & Layout Overrides Only)
   --------------------------------------------------------------------------
   Color/background/position for transparent header → component library
   (.app-header-transparent class added conditionally in _MasterLayout.cshtml)
   Scroll-back revert → component library (body.scrolledBack .app-header-transparent)
   These rules handle ONLY image URLs and app-specific layout concerns.
   ========================================================================== */

/* Homepage: white logo on transparent header */
#Body[page-name="Index"] #Logo img {
    content: url("/images/logo-white@2x.png");
}

/* Homepage: white cart icon on transparent header */
#Body[page-name="Index"] #Nav_Store #Ni_Cart .name {
    background-image: url("/images/icon/cart-white.svg");
}
#Body.scrolledBack[page-name="Index"] #Nav_Store #Ni_Cart .name {
    background-image: url("/images/icon/cart-black.svg");
}

/* Secondary header, show through */
#Body[page-name="Index"] .app-header-secondary {
    background: var(--color-overlay);
}

/* Homepage scrolled: revert logo to standard version */
#Body[page-name="Index"].scrolledBack #Header .container #Logo img {
    content: url("/images/logo@2x.png");
}


/* ==========================================================================
   HEADER — Scroll States (App-Specific Element Visibility Only)
   --------------------------------------------------------------------------
   Component library handles: position:fixed, box-shadow, animation,
   hide .app-header-secondary, transparent→opaque revert.
   These rules handle app-specific elements the library doesn't know about.
   ========================================================================== */

/* Hide shop nav tabs when scrolled back */
#Body.scrolledBack #Nb_Shop {
    display: none;
}

/* Hide quick nav when scrolled */
#Body.scrolled #QuickNav {
    display: none;
}

/* Search margin reset when scrolled */
.viewContent.scrolledBack #Header #Filter_ProductKeyword,
.viewContent.scrolledBack #Header #Filter_ModifyKeyword {
    margin-top: 0;
}


/* ==========================================================================
   NAVIGATION — Tabbed View Framework Bridge
   --------------------------------------------------------------------------
   The framework-level tabbed navigation uses:
     .tabbedView, .tabbedNavigation, .navItem, .marker, .selected
   These are managed by TypeScript behaviors and used across the entire app.

   The component library's .app-header-nav provides the flex scroll container.
   These rules style the framework classes within that header context.
   ========================================================================== */

/* Style framework .navItem within header nav context */
.app-header-nav .tabbedNavigation {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding-left: 0;
    width: 100%;
}

.app-header-nav .tabbedNavigation .navItem {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    white-space: nowrap;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-light);
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: color var(--transition-fast);
}

.app-header-nav .tabbedNavigation .navItem:hover {
    color: var(--color-primary);
}

.app-header-nav .tabbedNavigation .navItem.selected {
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

/* Sliding marker (JS-positioned underline) */
.app-header-nav .tabbedNavigation .marker {
    background-color: var(--color-primary);
    height: 3px;
}


/* ==========================================================================
   NAVIGATION — Legacy Reset
   Reset legacy float/display on nav elements so they participate in
   the component library's .app-header-nav flex layout naturally.
   ========================================================================== */

#Nav_Shop {
    float: none;
    display: flex;
    height: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}


/* ==========================================================================
   NAVIGATION — Quick Nav (Desktop Only)
   Links shown on non-shop pages for quick access to main sections.
   Hidden at <=600px when bottom nav takes over.
   ========================================================================== */

#QuickNav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-lg);
    height: 36px;
    background: transparent;
    order: 0;
    position: absolute;
    top: 0;
    width: auto;
    z-index: 3;
    left: auto;
    place-self: center;
}

.quick-nav-link {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-white);
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.quick-nav-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.quick-nav-separator {
    color: var(--color-primary-on-dark);
    opacity: 0.5;
    font-size: var(--font-size-sm);
}

@media only screen and (max-width: 600px) {
    #QuickNav {
        display: none;
    }
}


/* ==========================================================================
   BOTTOM NAVIGATION — Icon Mappings
   Extends: component-library.css Section 7 (Bottom Navigation)
   Icon images are app-specific; component library provides structure.
   ========================================================================== */

/* Inactive icons (black) */
.bottom-nav-icon.discover {
    background-image: url(/images/icon/search-engine-black.svg);
}

.bottom-nav-icon.listings {
    background-image: url(/images/icon/list-black.svg);
}

.bottom-nav-icon.activity {
    background-image: url(/images/icon/multi-bubble-black.svg);
}

.bottom-nav-icon.cart {
    background-image: url(/images/icon/cart-black.svg);
}

.bottom-nav-icon.account {
    background-image: url(/images/icon/person-black.svg);
}

/* Active icons (primary color) */
.bottom-nav-item.active .bottom-nav-icon.discover {
    background-image: url(/images/icon/search-engine-primary.svg);
}

.bottom-nav-item.active .bottom-nav-icon.listings {
    background-image: url(/images/icon/list-primary.svg);
}

.bottom-nav-item.active .bottom-nav-icon.activity {
    background-image: url(/images/icon/multi-bubble-primary.svg);
}

.bottom-nav-item.active .bottom-nav-icon.cart {
    background-image: url(/images/icon/cart-primary.svg);
}

.bottom-nav-item.active .bottom-nav-icon.account {
    background-image: url(/images/icon/person-primary.svg);
}

/* Bottom nav visibility: only show at 600px when has-bottom-nav attribute */
#BottomNav {
    display: none;
}

@media only screen and (max-width: 600px) {
    #Body[has-bottom-nav] #BottomNav {
        display: flex;
    }

    /* Hide top nav elements when bottom nav is active */
    #Body[has-bottom-nav] #Nav_Store {
        display: none;
    }

    #Body[has-bottom-nav] #Nb_Shop,
    #Body[has-bottom-nav] #Nav_User {
        display: none !important;
    }

    /* Show mobile username when top-right menu is hidden */
    #Body[has-bottom-nav] .app-header-mobile-user {
        display: inline-flex;
    }

    /* Footer and body padding to avoid bottom nav overlap */
    #Body[has-bottom-nav] {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0));
    }

    #Body[has-bottom-nav] #Ftr_Main {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0));
    }
}

/* Mobile username: hidden by default, shown at mobile breakpoint */
.app-header-mobile-user {
    display: none;
    font-size: var(--font-size-xs);
    color: var(--color-primary-on-dark);
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    margin-left: auto;
}


/* ==========================================================================
   HEADER — Responsive Bridge
   --------------------------------------------------------------------------
   The component library's 768px responsive targets .app-header-primary
   directly, but the real flex container is .app-header-primary > .container.
   Bridge the flex-wrap behavior through the wrapper.
   ========================================================================== */

@media only screen and (max-width: 768px) {
    .app-header-primary .container {
        flex-wrap: wrap;
    }
}


/* ==========================================================================
   DIALOG NAVIGATION — Icon Mappings
   Extends: component-library.css Section 56B (Dialog Drawer)
   Icon images are app-specific; component library provides structure.
   Ported from legacy style-dialog-account.css, style-dialog-listing-context.css,
   and style-dialog-variant-context.css.
   ========================================================================== */

/* --- Base nav icon sizing for dialog drawers --- */
.dialog-drawer .navigation .navItem .navLink .icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* --- User Options Menu (#View_UserOptions) --- */
#Interactions #View_UserOptions > .content .anonymousUserPane {
    display: none;
}

#Interactions #View_UserOptions[ux-user-state="anonymous"] > .content .anonymousUserPane {
    display: flex;
}

#Interactions #View_UserOptions > .content .authenticatedUserPane {
    display: none;
}

#Interactions #View_UserOptions[ux-user-state="authenticated"] > .content .authenticatedUserPane {
    display: flex;
}

/* Activity */
#View_UserOptions .icon.iconActivity { background-image: url(/images/icon/multi-bubble-black.svg); }
#UserMenu_Activity .notification-badge,
#UserMenu_Cart .notification-badge {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    font-size: 11px;
    line-height: 1;
    vertical-align: middle;
}

/* Shopping */
#View_UserOptions .icon.iconDiscover { background-image: url(/images/icon/compass-black.svg); }
#View_UserOptions .icon.iconCart { background-image: url(/images/icon/cart-black.svg); }

/* Selling */
#View_UserOptions .icon.iconCreate { background-image: url(/images/icon/plus-black.svg); }
#View_UserOptions .icon.iconListings { background-image: url(/images/icon/list-black.svg); }
#View_UserOptions .icon.iconSeller { background-image: url(/images/icon/store-black.svg); }
#View_UserOptions .icon.iconCollection { background-image: url(/images/icon/collection-black.svg); }

/* My Stuff */
#View_UserOptions .icon.iconWatchlist { background-image: url(/images/icon/bookmark-black.svg); }
#View_UserOptions .icon.iconFollowing { background-image: url(/images/icon/user-black.svg); }
#View_UserOptions .icon.iconRecentlyViewed { background-image: url(/images/icon/clock-black.svg); }

/* Account */
#View_UserOptions .icon.iconProfile { background-image: url(/images/icon/user-black.svg); }
#View_UserOptions .icon.iconBilling { background-image: url(/images/icon/credit-card-stack-black.svg); }
#View_UserOptions .icon.iconPrivacy { background-image: url(/images/icon/shield-check-black.svg); }

/* Quick Access */
#View_UserOptions .icon.iconInstall { background-image: url(/images/icon/download-black.svg); }

/* Help & Info */
#View_UserOptions .icon.iconHelp { background-image: url(/images/icon/help-circle-black.svg); }
#View_UserOptions .icon.iconSafety { background-image: url(/images/icon/shield-black.svg); }
#View_UserOptions .icon.iconSelling { background-image: url(/images/icon/label-black.svg); }
#View_UserOptions .icon.iconAbout { background-image: url(/images/icon/info-circle-black.svg); }
#View_UserOptions .icon.iconContact { background-image: url(/images/icon/message-black.svg); }

/* Admin */
#View_UserOptions .icon.iconUsers { background-image: url(/images/icon/group-black.svg); }
#View_UserOptions .icon.iconBadge { background-image: url(/images/icon/star-black.svg); }

/* Logout */
#View_UserOptions .icon.iconLogout { background-image: url(/images/icon/log-out-black.svg); }

/* --- Listing Family Context Menu (#Dlg_StockFamilyContext) --- */

/* Family Header - mirrors menu-user-info pattern */
#Dlg_StockFamilyContext .familyInfo .family-header-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    max-width:100%; 
}

#Dlg_StockFamilyContext .familyInfo .family-photo {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

#Dlg_StockFamilyContext .familyInfo .family-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#Dlg_StockFamilyContext .familyInfo .family-photo .no-photo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    color: var(--color-text-muted);
    background: var(--color-surface);
}

#Dlg_StockFamilyContext .familyInfo .family-info {
    flex: 1;
    min-width: 0;
}

#Dlg_StockFamilyContext .familyInfo .family-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    line-height: 1.3;
    margin: 0 0 4px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#Dlg_StockFamilyContext .familyInfo .family-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

/* Status Summary Grid */
#Dlg_StockFamilyContext .statusSummary {
    margin-top: var(--spacing-md);
}

#Dlg_StockFamilyContext .status-summary-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

#Dlg_StockFamilyContext .status-summary-grid .status-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
}

#Dlg_StockFamilyContext .status-summary-grid .status-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#Dlg_StockFamilyContext .status-summary-grid .status-text {
    flex: 1;
}

/* Status Icons - SVG background icons */
#Dlg_StockFamilyContext .status-icon.icon-published { background-image: url(/images/icon/check-secondary.svg); }
#Dlg_StockFamilyContext .status-icon.icon-partial { background-image: url(/images/icon/warning-hexagon-black.svg); }
#Dlg_StockFamilyContext .status-icon.icon-draft { background-image: url(/images/icon/edit-black.svg); }
#Dlg_StockFamilyContext .status-icon.icon-in-stock { background-image: url(/images/icon/package-black.svg); }
#Dlg_StockFamilyContext .status-icon.icon-out-of-stock { background-image: url(/images/icon/x-red.svg); }
#Dlg_StockFamilyContext .status-icon.icon-metrics { background-image: url(/images/icon/graph-black.svg); }

/* Menu Item Icons - Bulk Management Section */
#Dlg_StockFamilyContext .navigation .navItem.updateInventory .icon { background-image: url(/images/icon/package-black.svg); }
#Dlg_StockFamilyContext .navigation .navItem.updatePricing .icon { background-image: url(/images/icon/label-black.svg); }
#Dlg_StockFamilyContext .navigation .navItem.manageVisibility .icon { background-image: url(/images/icon/eye-black.svg); }
#Dlg_StockFamilyContext .navigation .navItem.viewAnalytics .icon { background-image: url(/images/icon/graph-black.svg); }
#Dlg_StockFamilyContext .navigation .navItem.exportData .icon { background-image: url(/images/icon/clipboard-black.svg); }
#Dlg_StockFamilyContext .navigation .navItem.goToManager .icon { background-image: url(/images/icon/chevron-right-black.svg); }
#Dlg_StockFamilyContext .navigation .navItem.duplicateFamily .icon { background-image: url(/images/icon/copy-black.svg); }
#Dlg_StockFamilyContext .navigation .navItem.deleteFamily .icon { background-image: url(/images/icon/trash-black.svg); }
#Dlg_StockFamilyContext .navigation .navItem.deleteFamily:hover .icon { background-image: url(/images/icon/trash-red.svg); }

/* Menu Item Icons - Your Listing Section (Detail Page) */
#Dlg_StockFamilyContext .navigation .navItem.editCaption .icon { background-image: url(/images/icon/edit-black.svg); }
#Dlg_StockFamilyContext .navigation .navItem.editDescription .icon { background-image: url(/images/icon/edit-black.svg); }
#Dlg_StockFamilyContext .navigation .navItem.changeListingMode .icon { background-image: url(/images/icon/list-black.svg); }
#Dlg_StockFamilyContext .navigation .navItem.managePhotos .icon { background-image: url(/images/icon/camera-black.svg); }
#Dlg_StockFamilyContext .navigation .navItem.publishListing .icon { background-image: url(/images/icon/rocket-black.svg); }
#Dlg_StockFamilyContext .navigation .navItem.viewPublishedListing .icon { background-image: url(/images/icon/eye-black.svg); }
#Dlg_StockFamilyContext .navigation .navItem.addVariant .icon { background-image: url(/images/icon/plus-black.svg); }

/* Menu Item Icons - Seller Settings Section (Detail Page) */
#Dlg_StockFamilyContext .navigation .navItem.meetupLocation .icon { background-image: url(/images/icon/pin-black.svg); }
#Dlg_StockFamilyContext .navigation .navItem.paymentMethods .icon { background-image: url(/images/icon/credit-card-stack-black.svg); }

/* Section Header Styling */
#Dlg_StockFamilyContext .menu-section {
    margin-bottom: var(--spacing-md);
}

#Dlg_StockFamilyContext .menu-section-header {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--spacing-xs);
}

#Dlg_StockFamilyContext .menu-section-header h4 {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Primary Action Styling - Publish Button */
#Dlg_StockFamilyContext .navigation .navItem.publishListing .menu-link.primary {
    background: rgba(var(--color-primary-rgb), 0.06);
    border-left: 3px solid var(--color-primary);
    margin-left: -3px;
}

#Dlg_StockFamilyContext .navigation .navItem.publishListing .menu-link.primary:hover {
    background: rgba(var(--color-primary-rgb), 0.12);
}

#Dlg_StockFamilyContext .navigation .navItem.publishListing .menu-link.primary .label {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* Status indicator in menu item - inline badge next to label */
#Dlg_StockFamilyContext .menu-status {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-warning);
    padding: 2px 8px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: var(--border-radius-full);
    white-space: nowrap;
    align-self: flex-start;
    margin-top: 2px;
}

#Dlg_StockFamilyContext .menu-status:empty {
    display: none;
}

/* Up to date state - subdued styling */
#Dlg_StockFamilyContext .navigation .navItem.publishListing.upToDate .menu-link.primary {
    background: var(--color-surface);
    border-left-color: var(--color-success);
}

#Dlg_StockFamilyContext .navigation .navItem.publishListing.upToDate .menu-link.primary .label {
    color: var(--color-success);
}

#Dlg_StockFamilyContext .navigation .navItem.publishListing.upToDate .menu-link.primary .description {
    color: var(--color-text-muted);
}

/* Section Visibility - Hide detail-only sections on search page (default) */
#Dlg_StockFamilyContext[data-source-page="search"] [data-show-on="detail"],
#Dlg_StockFamilyContext:not([data-source-page]) [data-show-on="detail"] {
    display: none !important;
}

/* Section Visibility - Hide search-only items on detail page */
#Dlg_StockFamilyContext[data-source-page="detail"] [data-hide-on="detail"] {
    display: none !important;
}
/* Section Visibility - Hide non-published items */
#Dlg_StockFamilyContext[data-listing-ever-published="false"] .exportData,
#Dlg_StockFamilyContext[data-listing-ever-published="false"] .viewAnalytics {
    display: none;
}

/* Danger Zone Section - subtle top border */
#Dlg_StockFamilyContext .dangerZoneSection {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
}

/* --- Variant Context Menu (#Dlg_VariantContext) --- */
#Dlg_VariantContext .navigation .navItem.editPackaging .icon { background-image: url(/images/icon/package-black.svg); }
#Dlg_VariantContext .navigation .navItem.editInventory .icon { background-image: url(/images/icon/package-black.svg); }
#Dlg_VariantContext .navigation .navItem.editPricing .icon { background-image: url(/images/icon/label-black.svg); }
#Dlg_VariantContext .navigation .navItem.editMarketValue .icon { background-image: url(/images/icon/graph-black.svg); }
#Dlg_VariantContext .navigation .navItem.editMeetupLocation .icon { background-image: url(/images/icon/pin-black.svg); }
#Dlg_VariantContext .navigation .navItem.editAttributes .icon { background-image: url(/images/icon/list-black.svg); }
#Dlg_VariantContext .navigation .navItem.visibilityChange .icon { background-image: url(/images/icon/eye-black.svg); }
#Dlg_VariantContext .navigation .navItem.revertAction .icon { background-image: url(/images/icon/revert-black.svg); }
#Dlg_VariantContext .navigation .navItem.editPhoto .icon { background-image: url(/images/icon/camera-black.svg); }
#Dlg_VariantContext .navigation .navItem.deleteAction .icon { background-image: url(/images/icon/trash-black.svg); }
#Dlg_VariantContext .navigation .navItem.deleteAction:hover .icon { background-image: url(/images/icon/trash-red.svg); }

/* Variant Context Menu - Detail Page Only Items (Phase 2) */
#Dlg_VariantContext .navigation .navItem.editCaption .icon { background-image: url(/images/icon/edit-black.svg); }
#Dlg_VariantContext .navigation .navItem.editDescription .icon { background-image: url(/images/icon/edit-black.svg); }
#Dlg_VariantContext .navigation .navItem.manageListing .icon { background-image: url(/images/icon/list-black.svg); }

/* Variant Context Menu Section Visibility Rules */
#Dlg_VariantContext[data-source-page="search"] [data-show-on="detail"],
#Dlg_VariantContext:not([data-source-page]) [data-show-on="detail"] {
    display: none !important;
}

/* Hide multi-variant items for single variants (controlled by JS) */
#Dlg_VariantContext [data-show-when="multi-variant"] {
    /* JS controls visibility via inline style */
}

/* --- Listing Menu Button in Sticky Status Bar (Phase 3) --- */
/* NOTE: Legacy standalone button styles removed - now using .split-button-group pattern
   in component-library.css (Section 28.2) with .split-menu-trigger and .split-primary-action */

/* --- Cart Item Context Menu (#Dlg_CartItemContext) --- */
#Dlg_CartItemContext .navigation .navItem.editQuantity .icon { background-image: url(/images/icon/edit-black.svg); }
#Dlg_CartItemContext .navigation .navItem.addToWatchlist .icon { background-image: url(/images/icon/bookmark-black.svg); }
#Dlg_CartItemContext .navigation .navItem.removeFromWatchlist .icon { background-image: url(/images/icon/bookmark-solid-black.svg); }
#Dlg_CartItemContext .navigation .navItem.viewDetails .icon { background-image: url(/images/icon/eye-black.svg); }
#Dlg_CartItemContext .navigation .navItem.removeFromCart .icon { background-image: url(/images/icon/trash-black.svg); }
#Dlg_CartItemContext .navigation .navItem.removeFromCart:hover .icon { background-image: url(/images/icon/trash-red.svg); }

/* --- Payment Onboarding Dialog (#Dlg_PaymentOnboarding) --- */

/* Payment option card icons */
#Dlg_PaymentOnboarding .payment-option .option-icon {
    --icon-size: 32px;
}

#Dlg_PaymentOnboarding .payment-option .icon-credit-card {
    background-image: url(/images/icon/credit-card-stack-primary.svg);
}

#Dlg_PaymentOnboarding .payment-option .icon-cash {
    background-image: url(/images/icon/hand-cash-primary.svg);
}

/* Benefit bullet dots (primary purple) */
#Dlg_PaymentOnboarding .payment-option .benefit .benefit-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background-color: var(--color-primary, #5C43F4);
}

/* Tip and warning icons */
#Dlg_PaymentOnboarding .tip-icon.icon-lightbulb {
    --icon-size: 20px;
    background-image: url(/images/icon/lightbulb-primary.svg);
}

#Dlg_PaymentOnboarding .warning-icon.icon-warning {
    --icon-size: 20px;
    background-image: url(/images/icon/warning-hexagon-primary.svg);
}

#Dlg_PaymentOnboarding .tip-icon.icon-location {
    --icon-size: 20px;
    background-image: url(/images/icon/location-primary.svg);
}

/* Step icons in how-it-works sections */
#Dlg_PaymentOnboarding .step-icon.icon-lock {
    background-image: url(/images/icon/lock-primary.svg);
}

#Dlg_PaymentOnboarding .step-icon.icon-bank {
    background-image: url(/images/icon/bank-black.svg);
}

#Dlg_PaymentOnboarding .step-icon.icon-bolt {
    background-image: url(/images/icon/bolt-primary.svg);
}

#Dlg_PaymentOnboarding .step-icon.icon-camera {
    background-image: url(/images/icon/camera-primary.svg);
}

#Dlg_PaymentOnboarding .step-icon.icon-cash {
    background-image: url(/images/icon/hand-cash-primary.svg);
}

#Dlg_PaymentOnboarding .step-icon.icon-credit-card {
    background-image: url(/images/icon/credit-card-stack-primary.svg);
}

/* Security badge icons in bank setup */
#Dlg_PaymentOnboarding .security-badge .badge-icon.icon-lock {
    background-image: url(/images/icon/lock-primary.svg);
}

#Dlg_PaymentOnboarding .security-badge .badge-icon.icon-shield {
    background-image: url(/images/icon/shield-primary.svg);
}

#Dlg_PaymentOnboarding .security-badge .badge-icon.icon-bolt {
    background-image: url(/images/icon/bolt-primary.svg);
}

/* --- Own Arrangements Dialog (#Dlg_OwnArrangements) --- */
/* Uses .selection-card pattern — same as CheckoutPaymentDialog */

#Dlg_OwnArrangements .selection-cards {
    text-align: left;
}

#Dlg_OwnArrangements .selection-card.selected,
#Dlg_OwnArrangements .selection-card:has(input:checked) {
    border-color: var(--color-primary);
    background-color: var(--color-primary-lighter);
    box-shadow: 0 0 0 1px var(--color-primary-muted),
                0 2px 12px rgba(124, 58, 237, 0.12);
}

#Dlg_OwnArrangements .option-content {
    margin-top: var(--spacing-xs);
}

#Dlg_OwnArrangements .benefits {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

#Dlg_OwnArrangements .benefit {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

#Dlg_OwnArrangements .benefit .benefit-dot {
    width: 6px;
    height: 6px;
    min-width: 6px;
    border-radius: 50%;
    background-color: var(--color-primary, #5C43F4);
    margin-top: 6px;
}

/* Bank setup pane: spacing above connect button */
#Dlg_PaymentOnboarding .banksetup .form-group {
    margin-top: var(--spacing-lg);
}

/* Bank setup pane: separator and manual entry toggle */
#Dlg_PaymentOnboarding .form-separator {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

#Dlg_PaymentOnboarding .form-separator::before,
#Dlg_PaymentOnboarding .form-separator::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--color-border);
}

#Dlg_PaymentOnboarding .manual-entry-toggle {
    text-align: center;
    margin-bottom: var(--spacing-md);
}

#Dlg_PaymentOnboarding .manual-entry-form {
    margin-top: var(--spacing-md);
}

/* Verify pane: constrain and center form inputs and notices */
#Interactions #Dlg_PaymentOnboarding .content.verify .board > .form-row,
#Interactions #Dlg_PaymentOnboarding .content.verify .board > .notice-banner,
#Interactions #Dlg_PaymentOnboarding .content.verify .board > p {
    max-width: min(500px, 100%);
    margin-left: auto;
    margin-right: auto;
}

/* --- Meetup Problem Dialog (#Dlg_MeetupProblem) --- */

#Dlg_MeetupProblem .message {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-primary-bg-tint);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-md);
    text-align:center;
}

#Dlg_MeetupProblem .message .icon-svg {
    --icon-size: var(--icon-size-md);
    flex-shrink: 0;
    display:none;
}

#Dlg_MeetupProblem .message h3 {
    margin: 0 0 var(--spacing-2xs);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

#Dlg_MeetupProblem .message p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

#Dlg_MeetupProblem .problemGroup,
#Dlg_TrustSafetyReview .problemGroup {
    margin-bottom: var(--spacing-lg);
}

#Dlg_MeetupProblem .problemGroup h4,
#Dlg_TrustSafetyReview .problemGroup h4 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-muted);
    margin: 0 0 var(--spacing-sm);
    padding: 0 var(--spacing-sm);
}

#Dlg_MeetupProblem .problemOption,
#Dlg_TrustSafetyReview .problemOption {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: var(--transition-card);
}

#Dlg_MeetupProblem .problemOption:hover,
#Dlg_TrustSafetyReview .problemOption:hover {
    border-color: var(--color-border-primary-subtle);
    background: var(--gradient-card-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

#Dlg_MeetupProblem .problemOption .icon-svg,
#Dlg_TrustSafetyReview .problemOption .icon-svg {
    --icon-size: var(--icon-size-lg);
    flex-shrink: 0;
    margin-top: 2px;
}

#Dlg_MeetupProblem .problemOption .text,
#Dlg_TrustSafetyReview .problemOption .text {
    flex: 1;
    min-width: 0;
}

#Dlg_MeetupProblem .problemOption .text strong,
#Dlg_TrustSafetyReview .problemOption .text strong {
    display: block;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-2xs);
}

#Dlg_MeetupProblem .problemOption .text p,
#Dlg_TrustSafetyReview .problemOption .text p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* --- Meetup Contact Support Dialog (#Dlg_MeetupContactSupport) --- */

#Dlg_MeetupContactSupport .meetup-support-context {
    margin-bottom: var(--spacing-md);
}

#Dlg_MeetupContactSupport .support-context-line {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    background: var(--color-surface-subtle, #f5f5f5);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-border-primary-subtle);
}

#Dlg_MeetupContactSupport .support-response-note {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* --- Meetup Location Picker Dialog (#Dlg_MeetupLocationPicker) --- */

#Dlg_MeetupLocationPicker .location-picker-intro {
    margin-bottom: var(--spacing-lg);
}

#Dlg_MeetupLocationPicker .location-picker-intro .dialog-subtitle {
    margin-bottom: var(--spacing-md);
}

/* Location choices container */
#Dlg_MeetupLocationPicker .location-choices {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Location option card */
#Dlg_MeetupLocationPicker .location-option {
    display: flex;
    flex-direction: column;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: var(--transition-card);
}

#Dlg_MeetupLocationPicker .location-option:hover {
    border-color: var(--color-border-primary-subtle);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

/* Selected/active state */
#Dlg_MeetupLocationPicker .location-option.selected,
#Dlg_MeetupLocationPicker .location-option.active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary-muted),
                var(--shadow-card-hover);
}

/* Location option header */
#Dlg_MeetupLocationPicker .location-option-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: linear-gradient(160deg, var(--color-background) 0%, var(--color-surface) 100%);
    border-bottom: 1px solid var(--color-border-light);
}

/* Location icons - styled backgrounds with SVG */
#Dlg_MeetupLocationPicker .location-option-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(92, 67, 244, 0.08) 0%, rgba(0, 255, 203, 0.04) 100%);
    border: 1px solid var(--color-border-primary-faint);
    border-radius: var(--border-radius-md);
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
}

#Dlg_MeetupLocationPicker .location-icon-public {
    background-image: url(/images/icon/store-black.svg);
}

#Dlg_MeetupLocationPicker .location-icon-private {
    background-image: url(/images/icon/home-black.svg);
}

/* Icon content */
#Dlg_MeetupLocationPicker .location-option-info {
    flex: 1;
    min-width: 0;
}

#Dlg_MeetupLocationPicker .location-option-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    margin-bottom: 4px;
}

#Dlg_MeetupLocationPicker .location-option-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
    line-height: var(--line-height-relaxed);
}

/* Location option body - shows current location or empty state */
#Dlg_MeetupLocationPicker .location-option-body {
    padding: var(--spacing-md) var(--spacing-lg);
    min-height: 60px;
}

/* Empty state styling */
#Dlg_MeetupLocationPicker .location-empty-state {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

#Dlg_MeetupLocationPicker .location-empty-state .empty-icon {
    width: 16px;
    height: 16px;
    background: url(/images/icon/info-circle-secondary.svg) center/contain no-repeat;
    opacity: 0.6;
}

/* Location address display when configured */
#Dlg_MeetupLocationPicker .location-address {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#Dlg_MeetupLocationPicker .location-address .location-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
}

#Dlg_MeetupLocationPicker .location-address .location-street {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
}

/* Location option actions */
#Dlg_MeetupLocationPicker .location-option-actions {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--gradient-footer-warm);
    border-top: 1px solid var(--color-border-light);
}

#Dlg_MeetupLocationPicker .location-option-actions .command {
    flex: 0 0 auto;
}

/* Hide "Use This Location" when no location is configured */
#Dlg_MeetupLocationPicker .location-option.no-location .cmdUseLocation {
    display: none;
}

/* When no location, make setup button primary */
#Dlg_MeetupLocationPicker .location-option.no-location .cmdSetupLocation {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

#Dlg_MeetupLocationPicker .location-option.no-location .cmdSetupLocation:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

/* Current selection state - shows which location is active on the variant */
#Dlg_MeetupLocationPicker .location-option.current-selection {
    border-color: var(--color-success);
    border-width: 2px;
    background: linear-gradient(160deg, rgba(34, 197, 94, 0.05) 0%, rgba(34, 197, 94, 0.02) 100%);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.15),
                var(--shadow-card);
}

#Dlg_MeetupLocationPicker .location-option.current-selection:hover {
    border-color: var(--color-success);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2),
                var(--shadow-card-hover);
}

#Dlg_MeetupLocationPicker .location-option.current-selection .location-option-header {
    position: relative;
}

/* Current badge with checkmark */
#Dlg_MeetupLocationPicker .location-option.current-selection .location-option-header::after {
    content: '✓ Current';
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    padding: 4px 10px;
    background: rgba(34, 197, 94, 0.15);
    color: #15803d;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-full);
    letter-spacing: 0.02em;
}

/* Current selection icon - just change border to green, don't override background (would lose icon) */
#Dlg_MeetupLocationPicker .location-option.current-selection .location-option-icon {
    border-color: rgba(34, 197, 94, 0.3);
}

/* Hide "Use This Location" button on current selection - it's already selected */
#Dlg_MeetupLocationPicker .location-option.current-selection .cmdUseLocation {
    display: none;
}

/* Make setup button say "Change Location" for current selection */
#Dlg_MeetupLocationPicker .location-option.current-selection .cmdSetupLocation {
    /* Button text changed via JS or we keep it as-is since "Set Up Location" still makes sense */
}

/* Private location note — gentle guidance to prefer public meetups */
#Dlg_MeetupLocationPicker .location-private-note {
    padding: var(--spacing-sm) var(--spacing-lg);
}

#Dlg_MeetupLocationPicker .location-private-note p {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
    line-height: 1.5;
    margin: 0;
}

/* Center the picker intro text */
#Dlg_MeetupLocationPicker .location-picker-intro {
    text-align: center;
    padding: 0 var(--spacing-lg);
}

/* Center the location choices within scroll area */
#Dlg_MeetupLocationPicker .dialog-scroll-content {
    max-width: 520px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Mobile responsive */
@media (max-width: 480px) {
    #Dlg_MeetupLocationPicker .location-option-header {
        padding: var(--spacing-md);
    }

    #Dlg_MeetupLocationPicker .location-option-icon {
        width: 40px;
        height: 40px;
        background-size: 20px 20px;
    }

    #Dlg_MeetupLocationPicker .location-option-actions {
        flex-direction: column;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    #Dlg_MeetupLocationPicker .location-option-actions .command {
        width: 100%;
        text-align: center;
    }
}

/* --- Meetup Location Picker: BULK MODE --- */

#Dlg_MeetupLocationPicker .location-choices.bulk-mode {
    gap: var(--spacing-lg);
}

/* Location cards section - uses settings-card pattern from seller settings */
#Dlg_MeetupLocationPicker .location-cards-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

#Dlg_MeetupLocationPicker .location-cards-section .settings-card {
    margin: 0;
}

#Dlg_MeetupLocationPicker .location-cards-section .settings-card.empty-card {
    border-style: dashed;
    opacity: 0.8;
}

#Dlg_MeetupLocationPicker .location-cards-section .settings-card.empty-card .settings-card-body {
    padding: var(--spacing-md);
}

#Dlg_MeetupLocationPicker .location-cards-section .empty-message {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-align: center;
    margin: 0;
}

/* Icons in settings card headers */
#Dlg_MeetupLocationPicker .settings-card-title .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: var(--spacing-xs);
    vertical-align: middle;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#Dlg_MeetupLocationPicker .settings-card-title .icon-store {
    background-image: url(/images/icon/store-black.svg);
}

#Dlg_MeetupLocationPicker .settings-card-title .icon-home {
    background-image: url(/images/icon/home-black.svg);
}

/* Bulk variants section */
#Dlg_MeetupLocationPicker .bulk-variants-section {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    overflow: hidden;
}

#Dlg_MeetupLocationPicker .bulk-variants-header {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#Dlg_MeetupLocationPicker .bulk-variants-list {
    max-height: 300px;
    overflow-y: auto;
}

#Dlg_MeetupLocationPicker .bulk-variant-row {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
    align-items: center;
}

#Dlg_MeetupLocationPicker .bulk-variant-row:last-child {
    border-bottom: none;
}

#Dlg_MeetupLocationPicker .bulk-variant-row.changed {
    background: rgba(92, 67, 244, 0.03);
}

#Dlg_MeetupLocationPicker .bulk-variant-row .variant-title {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Location toggle group */
#Dlg_MeetupLocationPicker .location-toggle-group {
    display: flex;
    gap: 2px;
    background: var(--color-surface);
    border-radius: var(--border-radius-sm);
    padding: 2px;
}

#Dlg_MeetupLocationPicker .location-toggle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: calc(var(--border-radius-sm) - 2px);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

#Dlg_MeetupLocationPicker .location-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#Dlg_MeetupLocationPicker .location-toggle:hover:not(.disabled) {
    color: var(--color-text-warm);
    background: rgba(92, 67, 244, 0.05);
}

#Dlg_MeetupLocationPicker .location-toggle.selected {
    background: var(--color-primary);
    color: white;
}

#Dlg_MeetupLocationPicker .location-toggle.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Bulk mode footer */
#Dlg_MeetupLocationPicker[data-mode="bulk"] .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

/* Mobile responsive for bulk mode */
@media (max-width: 480px) {
    #Dlg_MeetupLocationPicker .bulk-variants-header,
    #Dlg_MeetupLocationPicker .bulk-variant-row {
        grid-template-columns: 1fr 100px;
    }

    #Dlg_MeetupLocationPicker .location-cards-section {
        gap: var(--spacing-sm);
    }
}

/* --- Meetup Location Onboarding Dialog (#Dlg_MeetupLocationOnboarding) --- */

#Dlg_MeetupLocationOnboarding .location-search-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    flex: 1;
    min-height: 100%;
}

#Dlg_MeetupLocationOnboarding .location-search-section .mapContainer {
    flex: 1;
    display: flex;
    justify-self: stretch;
}

/* ==========================================================================
   Mapbox Marker Overrides — Brand-colored pins
   ========================================================================== */

/* Override default cyan (#3FB1CE) marker with anySKU primary violet */
.mapboxgl-marker svg path[fill="#3FB1CE"] {
    fill: var(--color-primary);
}

/* Hover state - slightly darker */
.mapboxgl-marker:hover svg path[fill="#3FB1CE"],
.mapboxgl-marker svg path[fill="#3FB1CE"]:hover {
    fill: var(--color-primary-dark);
}

/* hide step indicator for location setup for now , this is too out of order when not the first time */
#Dlg_MeetupLocationOnboarding .dialog-step-indicator {
    display:none;
}

/* Hide remove private location button for now, force them to use edit */
.card.private-location .cmdRemove {
    display:none;
}

/* Location benefits icons */
#Dlg_MeetupLocationOnboarding .location-benefits .benefit-icon {
    --icon-size: 20px;
    flex-shrink: 0;
}

#Dlg_MeetupLocationOnboarding .location-benefits .icon-store {
    background-image: url(/images/icon/store-black.svg);
}

#Dlg_MeetupLocationOnboarding .location-benefits .icon-lock {
    background-image: url(/images/icon/lock-black.svg);
}

#Dlg_MeetupLocationOnboarding .location-benefits .icon-bolt {
    background-image: url(/images/icon/bolt-black.svg);
}


#Dlg_MeetupLocationOnboarding .private-option-toggle {
    margin-top:var(--spacing-lg);
}

/* Tip icons */
#Dlg_MeetupLocationOnboarding .tip-icon.icon-info {
    --icon-size: 20px;
    background-image: url(/images/icon/info-circle-secondary.svg);
}

#Dlg_MeetupLocationOnboarding .tip-icon.icon-lightbulb {
    --icon-size: 20px;
    background-image: url(/images/icon/lightbulb-primary.svg);
}

/* Summary card icons */
#Dlg_MeetupLocationOnboarding .card-icon.icon-store {
    --icon-size: 20px;
    background-image: url(/images/icon/store-black.svg);
}

#Dlg_MeetupLocationOnboarding .card-icon.icon-home {
    --icon-size: 20px;
    background-image: url(/images/icon/home-black.svg);
}

/* Button icons */
#Dlg_MeetupLocationOnboarding .btn-icon.icon-location {
    --icon-size: 16px;
    background-image: url(/images/icon/location-primary.svg);
}

/* --------------------------------------------------------------------------
   Location Selection Flow
   Hide search prompt when location details are visible
   -------------------------------------------------------------------------- */

/* Search prompt - visible by default */
#Dlg_MeetupLocationOnboarding .location-search-prompt {
    margin-bottom: var(--spacing-lg);
}

#Dlg_MeetupLocationOnboarding .location-search-prompt h4 {
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

/* Hide search prompt when location is selected (JS adds .location-selected class) */
#Dlg_MeetupLocationOnboarding .location-search-section.location-selected .location-search-prompt {
    display: none;
}

/* Location confirmation section styling */
#Dlg_MeetupLocationOnboarding .location-confirmation {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
}

#Dlg_MeetupLocationOnboarding .location-confirmation .confirmation-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

#Dlg_MeetupLocationOnboarding .location-confirmation .dialog-subtitle {
    margin-bottom: 0;
}

/* Location details form styling */
#Dlg_MeetupLocationOnboarding .location-details {
    background: var(--color-surface);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

/* Address readonly section */
#Dlg_MeetupLocationOnboarding .address-readonly {
    margin-top: var(--spacing-md);
}

#Dlg_MeetupLocationOnboarding .address-readonly .form-field.readonly input {
    background-color: var(--color-surface-darkened);
    color: var(--color-text-muted);
}

/* City/State row */
#Dlg_MeetupLocationOnboarding .citystate.form-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-md);
}

/* Location commands - clean button layout */
#Dlg_MeetupLocationOnboarding .commands.location-commands {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border-light);
}

#Dlg_MeetupLocationOnboarding .commands.location-commands .btn-primary {
    flex: 0 0 auto;
}

#Dlg_MeetupLocationOnboarding .commands.location-commands .btn-ghost {
    flex: 0 0 auto;
}

/* Mobile responsive */
@media (max-width: 480px) {
    #Dlg_MeetupLocationOnboarding .location-details {
        padding: var(--spacing-md);
    }

    #Dlg_MeetupLocationOnboarding .citystate.form-row {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-sm);
    }

    #Dlg_MeetupLocationOnboarding .commands.location-commands {
        flex-direction: column;
        align-items: stretch;
    }

    #Dlg_MeetupLocationOnboarding .commands.location-commands .command {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   Merchandise Payment Method Dialog (#Dlg_MerchPaymentMethod)
   Picker-style dialog for choosing payment method at checkout.
   Follows location-option card pattern for visual consistency.
   ========================================================================== */

/* Scroll content padding for dialog body */
#Dlg_MerchPaymentMethod .dialog-scroll-content {
    padding: var(--spacing-md) var(--spacing-lg);
}

#Dlg_MerchPaymentMethod .dialog-subtitle {
    margin-bottom: var(--spacing-lg);
}

/* Payment method choices container */
#Dlg_MerchPaymentMethod .payment-method-choices {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

/* Payment method option card - clickable label */
#Dlg_MerchPaymentMethod .payment-method-option {
    display: flex;
    flex-direction: column;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: var(--transition-card);
    cursor: pointer;
}

/* Hidden radio input */
#Dlg_MerchPaymentMethod .payment-method-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Hover state */
#Dlg_MerchPaymentMethod .payment-method-option:hover {
    border-color: var(--color-border-primary-subtle);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

/* Active state - keyboard navigation highlight (distinct from selected) */
#Dlg_MerchPaymentMethod .payment-method-option.active {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-focus-ring, 0 0 0 3px rgba(92, 67, 244, 0.25));
    outline: none;
}

/* Focus state for accessibility - same as active */
#Dlg_MerchPaymentMethod .payment-method-option:focus {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-focus-ring, 0 0 0 3px rgba(92, 67, 244, 0.25));
    outline: none;
}

/* Focus on non-selected item - just ring, no selected styling */
#Dlg_MerchPaymentMethod .payment-method-option:focus:not(:has(.payment-method-radio:checked)) {
    background: var(--color-background);
}

/* Selected state - when radio is checked */
#Dlg_MerchPaymentMethod .payment-method-option:has(.payment-method-radio:checked) {
    border-color: var(--color-primary);
    border-width: 2px;
    box-shadow: 0 0 0 1px var(--color-primary-muted),
                var(--shadow-card-hover);
    background: linear-gradient(160deg, rgba(92, 67, 244, 0.03) 0%, rgba(92, 67, 244, 0.01) 100%);
}

/* Payment method header - icon + info + check */
#Dlg_MerchPaymentMethod .payment-method-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: linear-gradient(160deg, var(--color-background) 0%, var(--color-surface) 100%);
    border-bottom: 1px solid var(--color-border-light);
}

/* Payment method icons - styled backgrounds with inline SVG */
#Dlg_MerchPaymentMethod .payment-method-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(92, 67, 244, 0.08) 0%, rgba(0, 255, 203, 0.04) 100%);
    border: 1px solid var(--color-border-primary-faint);
    border-radius: var(--border-radius-md);
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
    transition: var(--transition-colors);
}

/* Card payment icon */
#Dlg_MerchPaymentMethod .payment-icon-card {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c43f4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E");
}

/* Cash payment icon */
#Dlg_MerchPaymentMethod .payment-icon-cash {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c43f4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M1 9h2'/%3E%3Cpath d='M21 9h2'/%3E%3Cpath d='M1 15h2'/%3E%3Cpath d='M21 15h2'/%3E%3C/svg%3E");
}

/* Icon tint on selected state */
#Dlg_MerchPaymentMethod .payment-method-option:has(.payment-method-radio:checked) .payment-method-icon {
    border-color: var(--color-primary-border-soft);
    background-color: rgba(92, 67, 244, 0.1);
}

/* Payment method info section */
#Dlg_MerchPaymentMethod .payment-method-info {
    flex: 1;
    min-width: 0;
}

#Dlg_MerchPaymentMethod .payment-method-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    margin-bottom: 4px;
}

#Dlg_MerchPaymentMethod .payment-method-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-muted);
    line-height: 1.5;
}

/* Selection check indicator */
#Dlg_MerchPaymentMethod .payment-method-check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border-medium);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-colors);
}

/* Check indicator when selected */
#Dlg_MerchPaymentMethod .payment-method-option:has(.payment-method-radio:checked) .payment-method-check {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

#Dlg_MerchPaymentMethod .payment-method-option:has(.payment-method-radio:checked) .payment-method-check::after {
    content: '';
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
}

/* Payment method body - benefits */
#Dlg_MerchPaymentMethod .payment-method-body {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--gradient-footer-warm);
}

/* Benefits container */
#Dlg_MerchPaymentMethod .payment-method-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* Benefit tags */
#Dlg_MerchPaymentMethod .benefit-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(92, 67, 244, 0.04);
    border: 1px solid rgba(92, 67, 244, 0.1);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
    transition: var(--transition-colors);
}

/* Benefit tags - context sets icon size */
#Dlg_MerchPaymentMethod .benefit-tag {
    --icon-size: var(--icon-size-xs);
}

/* Protected benefit - success color icons */
#Dlg_MerchPaymentMethod .benefit-tag.benefit-protected {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.15);
}

#Dlg_MerchPaymentMethod .benefit-tag.benefit-protected .icon-shield-check {
    background-image: url(/images/icon/shield-check-success.svg);
}

#Dlg_MerchPaymentMethod .benefit-tag.benefit-protected .icon-clock {
    background-image: url(/images/icon/clock-success.svg);
}

/* Value benefit - secondary color icons */
#Dlg_MerchPaymentMethod .benefit-tag.benefit-value {
    background: rgba(0, 255, 203, 0.06);
    border-color: rgba(0, 255, 203, 0.2);
}

#Dlg_MerchPaymentMethod .benefit-tag.benefit-value .icon-dollar {
    background-image: url(/images/icon/dollar-secondary.svg);
}

#Dlg_MerchPaymentMethod .benefit-tag.benefit-value .icon-bolt {
    background-image: url(/images/icon/bolt-secondary.svg);
}

/* Notice styling */
#Dlg_MerchPaymentMethod .payment-method-notice {
    margin-top: 0;
}

/* Seller payment acceptance - hide options based on data attributes */
#Dlg_MerchPaymentMethod[data-seller-accepts-card="false"] .option-card,
#Dlg_MerchPaymentMethod[data-seller-accepts-cash="false"] .option-cash {
    display: none;
}

/* When no options are available, show the unavailable notice */
#Dlg_MerchPaymentMethod[data-seller-accepts-card="false"][data-seller-accepts-cash="false"] .payment-method-choices {
    display: none;
}

#Dlg_MerchPaymentMethod[data-seller-accepts-card="false"][data-seller-accepts-cash="false"] .payment-method-notice {
    display: none;
}

#Dlg_MerchPaymentMethod[data-seller-accepts-card="false"][data-seller-accepts-cash="false"] .payment-method-unavailable {
    display: block !important;
}

/* Disable confirm button when no options available */
#Dlg_MerchPaymentMethod[data-seller-accepts-card="false"][data-seller-accepts-cash="false"] .btn-primary[event-name="MerchPaymentMethod-Save"] {
    display: none;
}

/* Unavailable notice styling */
#Dlg_MerchPaymentMethod .payment-method-unavailable .notice-banner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

#Dlg_MerchPaymentMethod .payment-method-unavailable .notice-content p {
    margin: var(--spacing-xs) 0 0 0;
}

#Dlg_MerchPaymentMethod .payment-method-unavailable .notice-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Mobile responsive */
@media (max-width: 480px) {
    #Dlg_MerchPaymentMethod .payment-method-header {
        padding: var(--spacing-md);
    }

    #Dlg_MerchPaymentMethod .payment-method-icon {
        width: 40px;
        height: 40px;
        background-size: 20px 20px;
    }

    #Dlg_MerchPaymentMethod .payment-method-body {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    #Dlg_MerchPaymentMethod .payment-method-benefits {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    #Dlg_MerchPaymentMethod .benefit-tag {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Dark mode adjustments */
[data-theme="dark"] #Dlg_MerchPaymentMethod .payment-method-option:has(.payment-method-radio:checked) {
    background: linear-gradient(160deg, rgba(92, 67, 244, 0.08) 0%, rgba(92, 67, 244, 0.03) 100%);
}

[data-theme="dark"] #Dlg_MerchPaymentMethod .benefit-tag {
    background: rgba(92, 67, 244, 0.08);
    border-color: rgba(92, 67, 244, 0.15);
}

[data-theme="dark"] #Dlg_MerchPaymentMethod .benefit-tag.benefit-protected {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] #Dlg_MerchPaymentMethod .benefit-tag.benefit-value {
    background: rgba(0, 255, 203, 0.1);
    border-color: rgba(0, 255, 203, 0.25);
}

/* --- Listing Mode Dialog (#Dlg_ListingMode) --- */

/* Hero section with illustration and friendly headline */
#Dlg_ListingMode .listing-mode-hero {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg) 0;
}

#Dlg_ListingMode .listing-mode-illustration {
    width: 180px;
    height: 140px;
    margin: 0 auto var(--spacing-md);
    background-image: url(/images/onboarding/illustration-listing-mode.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#Dlg_ListingMode .dialog-hero-headline {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-xs);
}

#Dlg_ListingMode .dialog-hero-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

/* Mode options layout */
#Dlg_ListingMode .listing-mode-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin: 0 var(--spacing-lg);
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--spacing-sm);
}

/* Mode option cards */
#Dlg_ListingMode .mode-option {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    background: var(--color-background);
    cursor: pointer;
    transition: all 0.2s var(--ease-elegant);
}

#Dlg_ListingMode .mode-option:hover {
    border-color: var(--color-primary-muted);
    background: rgba(var(--color-primary-rgb), 0.02);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08);
}

#Dlg_ListingMode .mode-option.selected {
    border-color: var(--color-primary);
    background: var(--color-primary-lighter);
    box-shadow: 0 0 0 1px var(--color-primary-muted), 0 4px 12px rgba(124, 58, 237, 0.15);
}

/* Hidden option - more subtle styling */
#Dlg_ListingMode .mode-option-hidden {
    border-style: dashed;
    opacity: 0.85;
}

#Dlg_ListingMode .mode-option-hidden:hover {
    opacity: 1;
}

/* Selection header with icon and title */
#Dlg_ListingMode .mode-visual {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

#Dlg_ListingMode .mode-icon {
    width: 48px;
    height: 48px;
    background-color: var(--color-surface);
    border-radius: var(--border-radius-md);
    flex-shrink: 0;
    background-size: 32px 32px;
    background-repeat: no-repeat;
    background-position: center;
}

#Dlg_ListingMode .mode-option.selected .mode-icon {
    background-color: var(--color-primary-bg-subtle);
}

#Dlg_ListingMode .mode-content {
    flex: 1;
    min-width: 0;
}

#Dlg_ListingMode .mode-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

#Dlg_ListingMode .mode-recommended {
    display: inline-flex;
    padding: 2px 8px;
    background: var(--color-primary);
    color: var(--color-text-on-primary, white);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    border-radius: var(--border-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#Dlg_ListingMode .mode-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Radio indicator positioning */
#Dlg_ListingMode .selection-indicator {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
}

#Dlg_ListingMode .selection-indicator input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* Feature items with checkmarks */
#Dlg_ListingMode .mode-features {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding-left: calc(48px + var(--spacing-md)); /* Align with mode content */
}

#Dlg_ListingMode .feature-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

#Dlg_ListingMode .feature-item.feature-neutral {
    color: var(--color-text-muted);
}

#Dlg_ListingMode .feature-check {
    width: 16px;
    height: 16px;
    background-image: url(/images/icon/check-primary.svg);
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

#Dlg_ListingMode .feature-dash {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#Dlg_ListingMode .feature-dash::before {
    content: '—';
    color: var(--color-text-muted);
    font-size: 12px;
}

/* Best for text */
#Dlg_ListingMode .mode-best-for {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    padding-left: calc(48px + var(--spacing-md));
    font-style: italic;
}

#Dlg_ListingMode .best-for-label {
    font-weight: var(--font-weight-semibold);
    font-style: normal;
}

/* Requirement notice */
#Dlg_ListingMode .mode-requirement {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    padding-left: calc(48px + var(--spacing-md));
    margin-top: var(--spacing-xs);
}

#Dlg_ListingMode .requirement-icon {
    width: 14px;
    height: 14px;
    background-image: url(/images/icon/info-primary.svg);
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* Publish notice styling */
#Dlg_ListingMode .listing-mode-publish-notice {
    margin-top: var(--spacing-md);
}

/* Dialog footer with save button */
#Dlg_ListingMode .dialog-footer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

/* Change notice in footer - full width above buttons */
#Dlg_ListingMode .listing-mode-change-notice {
    margin: 0;
}

/* Footer buttons row */
#Dlg_ListingMode .dialog-footer-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

#Dlg_ListingMode .cmdSaveMode {
    min-width: 140px;
}

#Dlg_ListingMode .cmdSaveMode[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Mode-specific icon images */
#Dlg_ListingMode .mode-option[data-mode="Showcase"] .mode-icon { background-image: url(/images/icon/listing-mode-showcase.svg); }
#Dlg_ListingMode .mode-option[data-mode="ShowcaseOffers"] .mode-icon { background-image: url(/images/icon/listing-mode-showcase-offers.svg); }
#Dlg_ListingMode .mode-option[data-mode="ForSale"] .mode-icon { background-image: url(/images/icon/listing-mode-sale.svg); }
#Dlg_ListingMode .mode-option[data-mode="ForSaleOffers"] .mode-icon { background-image: url(/images/icon/listing-mode-sale-offers.svg); }
#Dlg_ListingMode .mode-option[data-mode="Hidden"] .mode-icon { background-image: url(/images/icon/listing-mode-hidden.svg); }

/* Mobile responsive */
@media (max-width: 480px) {
    #Dlg_ListingMode .listing-mode-illustration {
        width: 140px;
        height: 100px;
    }

    #Dlg_ListingMode .mode-features,
    #Dlg_ListingMode .mode-best-for,
    #Dlg_ListingMode .mode-requirement {
        padding-left: 0;
    }

    #Dlg_ListingMode .mode-icon {
        width: 40px;
        height: 40px;
        background-size: 28px 28px;
    }
}

/* --- Publish Confirmation Dialog (#Dlg_PublishConfirmation) --- */

/* Change icon (pencil) in changes overview */
#Dlg_PublishConfirmation .change-type .change-icon {
    width: var(--icon-size-md, 20px);
    height: var(--icon-size-md, 20px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    background-image: url(/images/icon/design-pencil-black.svg);
}

/* Impact icons (first-time publish "what happens next") */
#Dlg_PublishConfirmation .impact-icon {
    display: inline-block;
    width: var(--icon-size-md, 20px);
    height: var(--icon-size-md, 20px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    vertical-align: middle;
}

#Dlg_PublishConfirmation .impact-item.visibility .impact-icon { background-image: url(/images/icon/eye-primary.svg); }
#Dlg_PublishConfirmation .impact-item.search .impact-icon { background-image: url(/images/icon/search-primary.svg); }
#Dlg_PublishConfirmation .impact-item.workflow .impact-icon { background-image: url(/images/icon/edit-primary.svg); }

/* Mode comparison icons (dynamically populated via data-listing-mode) */
#Dlg_PublishConfirmation .mode-icon[data-listing-mode] {
    display: inline-block;
    width: var(--icon-size-xl, 32px);
    height: var(--icon-size-xl, 32px);
    border-radius: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    vertical-align: middle;
}

#Dlg_PublishConfirmation .mode-icon[data-listing-mode="Showcase"] { background-image: url(/images/icon/listing-mode-showcase.svg); }
#Dlg_PublishConfirmation .mode-icon[data-listing-mode="ShowcaseOffers"] { background-image: url(/images/icon/listing-mode-showcase-offers.svg); }
#Dlg_PublishConfirmation .mode-icon[data-listing-mode="ForSale"] { background-image: url(/images/icon/listing-mode-sale.svg); }
#Dlg_PublishConfirmation .mode-icon[data-listing-mode="ForSaleOffers"] { background-image: url(/images/icon/listing-mode-sale-offers.svg); }
#Dlg_PublishConfirmation .mode-icon[data-listing-mode="Hidden"] { background-image: url(/images/icon/listing-mode-hidden.svg); }

/* --- Publish Prerequisites Dialog (#Dlg_PublishPrerequisites) --- */

/* Checklist status icons */
#Dlg_PublishPrerequisites .status-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

#Dlg_PublishPrerequisites .checklist-item.completed .status-icon { background-image: url(/images/icon/check-circle-primary.svg); }
#Dlg_PublishPrerequisites .status-icon.incomplete { background-image: url(/images/icon/x-circle-red.svg); }
#Dlg_PublishPrerequisites .status-icon.complete { background-image: url(/images/icon/check-circle-primary.svg); }
#Dlg_PublishPrerequisites .checklist-item.optional .status-icon { background-image: url(/images/icon/info-circle-primary.svg); }

/* Warning icon in skip-warning banner */
#Dlg_PublishPrerequisites .warning-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    vertical-align: middle;
    background-image: url(/images/icon/alert-triangle-secondary.svg);
}


/* ==========================================================================
   STOCK DETAIL — Icon & Art Mappings
   ==========================================================================
   SVG icon backgrounds for StockDetailView.cshtml and related views.
   Replaces inline emoji with CSS background-image on empty elements.
   ========================================================================== */

/* --- Sticky Status Bar icons --- */

/* Pending changes indicator icon (📝) */
#Stock_StockDetail .pending-changes-indicator .indicator-icon,
#Stock_StockDetail .changes-badge .badge-icon,
#Stock_StockDetail .draft-indicator,
#Stock_StockDetail .mode-pending-notice .pending-icon {
    display: inline-block;
    width: var(--icon-size-sm, 16px);
    height: var(--icon-size-sm, 16px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    background-image: url(/images/icon/draft-primary.svg);
}

/* --- Analytics Card icons --- */

#Stock_StockDetail .analytics-card.views-card .card-icon {
    display: inline-block;
    width: var(--icon-size-md, 20px);
    height: var(--icon-size-md, 20px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/images/icon/eye-primary.svg);
}

#Stock_StockDetail .analytics-card.watchers-card .card-icon {
    display: inline-block;
    width: var(--icon-size-md, 20px);
    height: var(--icon-size-md, 20px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/images/icon/heart-primary.svg);
}

#Stock_StockDetail .analytics-card.engagement-card .card-icon {
    display: inline-block;
    width: var(--icon-size-md, 20px);
    height: var(--icon-size-md, 20px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/images/icon/trending-up-primary.svg);
}

/* Insight badge icon (⭐) */
#Stock_StockDetail .insight-badge .insight-icon {
    display: inline-block;
    width: var(--icon-size-sm, 16px);
    height: var(--icon-size-sm, 16px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    background-image: url(/images/icon/star-primary.svg);
}

/* --- Welcome / AI Generation icons --- */

/* Welcome icon (✨) */
#Stock_StockDetail .welcome-icon,
#Stock_StockDetail .banner-icon {
    display: inline-block;
    width: var(--icon-size-md, 20px);
    height: var(--icon-size-md, 20px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    background-image: url(/images/icon/sparks-primary.svg);
}

/* Next-step icons */
#Stock_StockDetail .next-steps .step {
    padding-left: 28px;
    background-size: var(--icon-size-sm, 16px) var(--icon-size-sm, 16px);
    background-repeat: no-repeat;
    background-position: left center;
}

#Stock_StockDetail .next-steps .step:nth-child(1) { background-image: url(/images/icon/edit-primary.svg); }
#Stock_StockDetail .next-steps .step:nth-child(2) { background-image: url(/images/icon/dollar-sign-primary.svg); }
#Stock_StockDetail .next-steps .step:nth-child(3) { background-image: url(/images/icon/rocket-primary.svg); }

/* Info note icon (ℹ️) */
#Stock_StockDetail .analysis-info-note strong,
#Stock_StockDetail .available-modes-hint .hint-icon {
    display: inline-block;
    width: var(--icon-size-sm, 16px);
    height: var(--icon-size-sm, 16px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    background-image: url(/images/icon/info-circle-secondary.svg);
}

/* --- Listing Mode Display icons --- */

/* Mode icon — uses JPG art via data-current-mode attribute (same as ListingModeDialog) */
#Stock_StockDetail .listing-mode-display .mode-icon,
#Stock_StockDetail .listing-mode-display .live-mode-icon {
    display: inline-block;
    width: var(--icon-size-xl, 32px);
    height: var(--icon-size-xl, 32px);
    border-radius: 100%;
    background-size: var(--icon-size-lg, 32px) var(--icon-size-lg, 32px);
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    vertical-align: middle;
}

#Stock_StockDetail .listing-mode-display[data-current-mode="Showcase"] .mode-icon { background-image: url(/images/icon/listing-mode-showcase.svg); }
#Stock_StockDetail .listing-mode-display[data-current-mode="ShowcaseOffers"] .mode-icon { background-image: url(/images/icon/listing-mode-showcase-offers.svg); }
#Stock_StockDetail .listing-mode-display[data-current-mode="ForSale"] .mode-icon { background-image: url(/images/icon/listing-mode-sale.svg); }
#Stock_StockDetail .listing-mode-display[data-current-mode="ForSaleOffers"] .mode-icon { background-image: url(/images/icon/listing-mode-sale-offers.svg); }
#Stock_StockDetail .listing-mode-display[data-current-mode="Hidden"] .mode-icon { background-image: url(/images/icon/listing-mode-hidden.svg); }

/* --- Variant Block icons --- */

/* No-photo placeholder (📷) */
#Stock_StockDetail .variant-block-no-photo,
#Stock_StockDetail .no-photo {
    background-image: url(/images/icon/camera-black.svg);
}

/* Add Photo button - matches Photo Manager dialog styling */
#Stock_StockDetail .photo-card-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    aspect-ratio: 1;
    border: 2px dashed rgba(92, 67, 244, 0.2);
    border-radius: var(--border-radius-card);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-card);
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.02) 0%,
        rgba(0, 255, 203, 0.015) 100%
    );
}

#Stock_StockDetail .photo-card-add:hover {
    border-color: var(--color-primary);
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.05) 0%,
        rgba(0, 255, 203, 0.03) 100%
    );
    box-shadow: 0 4px 16px rgba(92, 67, 244, 0.08);
    transform: translateY(-2px);
}

#Stock_StockDetail .photo-card-add:active {
    transform: scale(0.98);
}

#Stock_StockDetail .photo-card-add .icon-svg {
    width: 32px;
    height: 32px;
    transition: var(--transition-fast);
}

#Stock_StockDetail .photo-card-add .icon-plus {
    background-image: url('/images/icon/plus-primary.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#Stock_StockDetail .photo-card-add:hover .icon-svg {
    transform: scale(1.1);
}

/* Scope badge - positioned status indicator on photo cards */
#Stock_StockDetail .photo-card .scope-badge {
    position: absolute;
    top: var(--spacing-xs);
    left: var(--spacing-xs);
    font-size: 10px;
    padding: 2px 6px;
    z-index: 5;
}

#Stock_StockDetail .photo-card .scope-badge.badge-shared {
    background: var(--color-surface-darkened);
    color: var(--color-text-muted);
}

#Stock_StockDetail .photo-card .scope-badge.badge-variant {
    background: var(--color-primary);
    color: white;
}

/* Settings gear (⚙️) */
#Stock_StockDetail .variant-settings .command {
    background-image: url(/images/icon/settings-black.svg);
}

/* Edit pencil (✏️) — used throughout variant blocks */
#Stock_StockDetail .variant-packaging .command.cmdEdit,
#Stock_StockDetail .variant-meetup-location .command.cmdEdit,
#Stock_StockDetail .attributes-header .command.cmdEdit,
#Stock_StockDetail .detail-section.collection-assignment .cmdEdit,
#Stock_StockDetail .detail-section.photo-manager .cmdEdit,
#Stock_StockDetail .detail-section.describe .cmdEdit,
#Stock_StockDetail .attribute-flow-edit {
    display: inline-block;
    width: var(--icon-size-sm, 16px);
    height: var(--icon-size-sm, 16px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/images/icon/edit-primary.svg);
    font-size: 0;
    color: transparent;
}

#Stock_StockDetail .variant-packaging .command.cmdEdit,
#Stock_StockDetail .variant-meetup-location .command.cmdEdit,
#Stock_StockDetail .attributes-header .command.cmdEdit,
#Stock_StockDetail .attribute-flow-edit {
    display: none; /* Hide for now, force use of context menu */
}


#Stock_StockDetail .detail-section.describe .cmdEdit {
    display: inline-block; /* Alwasys show this one */
}

/* --- Summary Card icons --- */

/* Live indicator (⚡) */
#Stock_StockDetail .summary-card .live-indicator {
    display: inline-block;
    width: var(--icon-size-sm, 16px);
    height: var(--icon-size-sm, 16px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/images/icon/zap-primary.svg);
    cursor:default;
}

/* Summary card edit pencil (✏️) */
#Stock_StockDetail .summary-card .command.cmdEdit {
    display: inline-block;
    width: var(--icon-size-sm, 16px);
    height: var(--icon-size-sm, 16px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/images/icon/edit-primary.svg);
    font-size: 0;
    color: transparent;
    cursor: pointer;
}

/* --- Meetup Location icons --- */

/* Public location (🌍) */
#Stock_StockDetail .variant-meetup-location.location-type-public .icon {
    background-image: url(/images/icon/globe-primary.svg);
}

/* Private location (🏠) */
#Stock_StockDetail .variant-meetup-location.location-type-private .icon {
    background-image: url(/images/icon/home-secondary.svg);
}


/* ==========================================================================
   PRODUCT SUMMARY — Purchase Section State Management
   --------------------------------------------------------------------------
   Clean-selector equivalents of the state rules in legacy style-shop.css.
   The .product-summary container is reused in both the Buy Options dialog
   (#View_ProductSummary) and the inline product detail page
   (#Content_ProductDetail), so these rules are scoped to .product-summary,
   NOT dialog-specific.

   Attribute-driven states set by TypeScript behavior:
     ux-no-purchase    — showcase-only listing (no buy/offer)
     ux-show-market    — display listed market value
     ux-allow-buy-now  — enable purchase section
     ux-allow-offer    — enable offer section
     ux-buy-disabled   — force-hide purchase + offer
     ux-replenish      — pre-order messaging for out-of-stock
     data-onhand       — current stock quantity
     ux-cart-count     — per-section items already in cart
     ux-max-cart-count — per-section max items allowed
     ux-disabled       — per-button disabled flag
     ux-add-simple     — simple qty selector (hidden by default; JS toggles)
   ========================================================================== */

/* ---------------------------------------------------------------------------
   A. Purchase Section Visibility
   All four section types hidden by default; toggled by parent attributes.
   --------------------------------------------------------------------------- */

.product-summary .purchase-section {
    display: none;
}

.product-summary[ux-no-purchase] .purchase-section.nopurchase {
    display: flex;
}

.product-summary[ux-show-market] .purchase-section.mkt {
    display: flex;
}

.product-summary[ux-allow-buy-now] .purchase-section.purchase {
    display: flex;
}

.product-summary[ux-allow-offer] .purchase-section.offer {
    display: flex;
}

/* ux-buy-disabled overrides ux-allow-buy-now / ux-allow-offer */
.product-summary[ux-buy-disabled] .purchase-section.purchase,
.product-summary[ux-buy-disabled] .purchase-section.offer {
    display: none;
}

/* ---------------------------------------------------------------------------
   B. Cart Count States
   The [ux-cart-count] attribute on each .purchase-section controls
   visibility of remove button, cart quantity badge, and command container
   styling.
   --------------------------------------------------------------------------- */

/* When cart is empty: streamlined layout */
.product-summary .purchase-section[ux-cart-count="0"] .commands {
    border-color: transparent;
    padding: 0;
}

.product-summary .purchase-section[ux-cart-count="0"] .commands .cmdRemove {
    display: none;
}

.product-summary .purchase-section[ux-cart-count="0"] .cartQuantity {
    display: none;
}

.product-summary .purchase-section[ux-cart-count="0"] .commands .cmdSubmit {
    flex-basis: initial;
    margin-top: 0;
}

/* Empty cart background reset */
.product-summary .purchase-section.purchase[ux-cart-count="0"],
.product-summary .purchase-section.offer[ux-cart-count="0"] {
    background-color: var(--color-background);
    color: var(--color-text);
    border-radius: 0;
}

/* Disabled submit button */
.product-summary .purchase-section[ux-cart-count] .command.cmdSubmit[ux-disabled] {
    background-color: rgba(0, 0, 0, 0.75);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   C. Stock Availability States
   [data-onhand="0"] on .product-summary controls out-of-stock appearance.
   --------------------------------------------------------------------------- */

/* Default: .oos and .replenish hidden */
.product-summary .cartOption .available .oos {
    display: none;
}

.product-summary .cartOption .available .replenish {
    display: none;
}

/* Out of stock: dim the cart option area */
.product-summary[data-onhand="0"] .cartOption {
    border-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.5);
}

/* Out of stock: hide in-stock quantity text */
.product-summary[data-onhand="0"] .cartOption .available .onhand {
    display: none;
}

/* Out of stock: show "Out of stock" message */
.product-summary[data-onhand="0"] .cartOption .available .oos {
    display: flex;
    font-weight: var(--font-weight-bold);
}

/* Out of stock: hide incrementer and submit */
.product-summary[data-onhand="0"] .cartOption .incrementer {
    display: none;
}

.product-summary[data-onhand="0"] .cartOption .commands .cmdSubmit {
    display: none;
}

/* Out of stock: muted price breaks */
.product-summary[data-onhand="0"] .cartOption [data-key="item.price-breaks"] .break .qty,
.product-summary[data-onhand="0"] .cartOption [data-key="item.price-breaks"] .break .value {
    color: rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------------------------
   D. Replenish (Pre-order) State
   --------------------------------------------------------------------------- */

.product-summary[ux-replenish] .cartOption .available .replenish {
    display: flex;
}

/* ---------------------------------------------------------------------------
   E. Single Item State
   When only 1 unit available, hide incrementer and show "Only X available".
   --------------------------------------------------------------------------- */

.product-summary .purchase-section[ux-max-cart-count="1"] .cartOption .available .onhand {
    font-size: var(--font-size-lg);
}

.product-summary .purchase-section[ux-max-cart-count="1"] .cartOption .available .onhand:before {
    content: 'Only';
    display: inline;
    margin-right: var(--spacing-xs);
}

.product-summary .purchase-section[ux-max-cart-count="1"] .cartOption .incrementer {
    display: none;
}

/* Already have the max 1 in cart — hide submit */
.product-summary .purchase-section[ux-max-cart-count="1"][ux-cart-count="1"] .cartOption .cmdSubmit {
    display: none;
}

/* ---------------------------------------------------------------------------
   F. Quantity Selector Toggle
   [ux-add-simple] is hidden by default (bulk incrementer shown).
   JS toggles to simple <select> when quantity <= 10.
   --------------------------------------------------------------------------- */

.product-summary .purchase-section [ux-add-simple] {
    display: none;
}

/* ---------------------------------------------------------------------------
   G. Social Stats Conditional Visibility
   Hide stats when counts are zero.
   --------------------------------------------------------------------------- */

.product-summary[data-watcher-count="0"][data-view-count="0"] .product-stats {
    display: none;
}

.product-summary[data-view-count="0"] .product-stats .stat-item.view-count {
    display: none;
}

.product-summary[data-watcher-count="0"] .product-stats .stat-item.watcher-count {
    display: none;
}


/* ==========================================================================
   QUICKVIEW — STICKY PURCHASE SECTION
   --------------------------------------------------------------------------
   In the Buy Options drawer, TypeScript moves the purchase/offer sections
   out of .about and appends them to #Form_AddToCart (the scroll container).
   This lets position:sticky work against the scroll viewport so the full
   purchase block (qty, price, add/remove, cart count) sticks to the bottom
   until the user scrolls to its natural position.
   Scoped to #View_ProductSummary so the detail page is unaffected.
   ========================================================================== */

/* When JS moves the purchase section to be a direct child of .productSummary,
   it adds .quickview-sticky. Sticky bottom keeps it visible at the bottom of
   the scroll viewport. It unsticks when the user scrolls to its natural
   position (between .about and .productDetails). */
#View_ProductSummary .product-summary > .purchase-section.quickview-sticky {
    position: sticky;
    bottom: var(--spacing-sm);
    z-index: 10;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    margin: 0 var(--spacing-sm);
    width: calc(100% - var(--spacing-sm) - var(--spacing-sm));
    padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
    gap: 0;
}

/* Desktop: align sticky purchase with the about pane (right column) */
@media (min-width: 769px) {
    #View_ProductSummary .product-summary > .purchase-section.quickview-sticky {
        width: calc(55% - var(--spacing-sm) - var(--spacing-md));
        margin-left: auto;
        margin-right: var(--spacing-sm);
    }
}

#View_ProductSummary .product-summary > .purchase-section.quickview-sticky .interaction {
    gap: 0;
    padding: 0;
}

#View_ProductSummary .product-summary > .purchase-section.quickview-sticky .interaction .quantity,
#View_ProductSummary .product-summary > .purchase-section.quickview-sticky .interaction .display {
    padding: var(--spacing-xs);
}

#View_ProductSummary .product-summary > .purchase-section.quickview-sticky .commands {
    padding: var(--spacing-xs) 0 0;
}

/* Hide section header and quantity label in sticky mode */
#View_ProductSummary .product-summary > .purchase-section.quickview-sticky > .name,
#View_ProductSummary .product-summary > .purchase-section.quickview-sticky .incrementer-label {
    display: none;
}

/* --- Quickview purchase section layout cleanup (sticky and non-sticky) --- */

#View_ProductSummary .purchase-section .interaction {
    align-items: center;
}

#View_ProductSummary .purchase-section .interaction .quantity {
    align-items: flex-start;
}

#View_ProductSummary .purchase-section .interaction .display {
    align-items: flex-end;
}

#View_ProductSummary .purchase-section .interaction .display .total {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-top: 0;
}

#View_ProductSummary .purchase-section .available {
    align-items: center;
    text-align: center;
    padding: var(--spacing-xs) 0 0;
}

#View_ProductSummary .purchase-section .available .onhand {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-normal);
}

#View_ProductSummary .purchase-section .incrementer {
    border: 2px solid var(--color-primary-lighter);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

#View_ProductSummary .purchase-section .incrementer .command {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

/* "Change" link in the added-to-cart success banner */
#View_ProductSummary .added-notice .notice-action {
    flex-shrink: 0;
    margin-left: auto;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
    cursor: pointer;
    align-self: center;
}

/* Hide the empty dialog-footer to reclaim space */
#View_ProductSummary > .content.product > .dialog-footer {
    display: none;
}


/* ==========================================================================
   STOCK DETAIL — STATE MANAGEMENT
   ==========================================================================
   Clean-selector state rules for the listing detail page that are NOT yet in
   component-library.css.  These supplement the rules in component-library.css
   sections A–L (lines ~15690-16220) which already cover:
     ux-has-product-type, ux-draft-only/ux-published/ux-listed (welcome,
     mode-display, variant blocks), data-published-state, data-has-pending-changes,
     data-pending-changes-reason, data-has-draft-changes, stock-published,
     ux-variant-count, ux-scrollcontent-hz-end, data-has-social-data, ux-filled.

   Legacy sources: style-listings-detail.css, style-listings-detail-cards.css,
   style-listings-detail-versioning.css, style-listings-detail-variants.css,
   style-listings-detail-market-social.css.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   A. Section Data Visibility (.has-data)
   TypeScript adds/removes .has-data on .section.market-analysis and
   .section.social-analytics when data is loaded/cleared.
   --------------------------------------------------------------------------- */

/* Default: hidden (base display:none in component-library) */
.stockDetail .section.market-analysis.has-data {
    display: block;
}

.stockDetail .section.social-analytics.has-data {
    display: flex;
}


/* ---------------------------------------------------------------------------
   B. Variant Attributes Visibility
   [variant-has-attributes] is set by stock.detail.draw.ts when a variant
   has attributes.  The attributes tbody is hidden by default.
   --------------------------------------------------------------------------- */

.stockDetail .variant-block[variant-has-attributes] .section.attributes .tbody.attributes {
    display: flex;
}


/* ---------------------------------------------------------------------------
   C. Draft Notice Hidden for Draft-Only Listings
   When a listing has never been published, the draft operation notice is
   redundant (everything is already draft) — hide it.
   --------------------------------------------------------------------------- */

.stockDetail[ux-draft-only] .operation-notice.draft-notice {
    display: none;
}


/* ---------------------------------------------------------------------------
   D. Live Operation Notice Layout
   Created dynamically by stock.detail.persist.availability.ts.
   Hide rules already in component-library.css (stock-published="0",
   :not([ux-published])).  Layout rules were only in legacy versioning CSS.
   --------------------------------------------------------------------------- */

.stockDetail .live-operation-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    background: rgba(0, 255, 203, 0.06);
    border: 1px solid rgba(0, 255, 203, 0.2);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.stockDetail .live-operation-notice .notice-icon {
    font-size: var(--font-size-xl);
    color: var(--color-secondary);
    flex-shrink: 0;
    margin-top: var(--spacing-xs-2);
}

.stockDetail .live-operation-notice .notice-content {
    flex: 1;
    font-size: var(--font-size-md);
    line-height: 1.4;
}

.stockDetail .live-operation-notice .notice-content strong {
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
}

@media only screen and (max-width: 480px) {
    .stockDetail .live-operation-notice {
        flex-direction: column;
        text-align: center;
    }

    .stockDetail .live-operation-notice .notice-icon {
        align-self: center;
        margin-top: 0;
        margin-bottom: var(--spacing-sm);
    }
}


/* ---------------------------------------------------------------------------
   E. Summary Card — Empty States (.ux-empty)
   When a summary card (inventory, pricing, market) has no data, TypeScript
   adds .ux-empty.  Shows dashed border, dimmed header, empty message with
   a CTA "Add" button; hides filled content.
   --------------------------------------------------------------------------- */

/* Base empty appearance */
.stockDetail .summary-card.ux-empty {
    border: 1px dashed var(--color-border-light);
    background: var(--color-surface-subtle);
}

.stockDetail .summary-card.ux-empty .card-header {
    opacity: 0.6;
}

/* Empty state content container */
.stockDetail .summary-card.ux-empty .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    min-height: 80px;
}

.stockDetail .summary-card.ux-empty .empty-message {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-sm);
    text-align: center;
}

.stockDetail .summary-card.ux-empty .tasks {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
}

.stockDetail .summary-card.ux-empty .task {
    display: flex;
    justify-content: center;
}

/* Hide edit command on empty cards, show add CTA */
.stockDetail .summary-card.ux-empty .command.cmdEdit {
    display: none;
}

.stockDetail .summary-card.ux-empty .command.cmdAdd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-primary);
    color: var(--color-background);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
    border: none;
    min-height: var(--spacing-xl);
}

.stockDetail .summary-card.ux-empty .command.cmdAdd:hover {
    background: var(--color-primary-hover);
    transform: translateY(var(--hover-transform));
}

.stockDetail .summary-card.ux-empty .command.cmdAdd:active {
    transform: translateY(0);
}

/* Hide filled content when empty */
.stockDetail .summary-card.ux-empty .large-number,
.stockDetail .summary-card.ux-empty .sub-status,
.stockDetail .summary-card.ux-empty .tertiary-status,
.stockDetail .summary-card.ux-empty .pricing-status,
.stockDetail .summary-card.ux-empty .price-break,
.stockDetail .summary-card.ux-empty .market-status,
.stockDetail .summary-card.ux-empty .market-visibility {
    display: none;
}

/* Show empty content only when card IS empty */
.stockDetail .summary-card:not(.ux-empty) .empty-state,
.stockDetail .summary-card:not(.ux-empty) .tasks {
    display: none;
}

/* Card-type-specific empty borders */
.stockDetail .summary-card.inventory-card.ux-empty {
    border-color: var(--color-success-light);
}

.stockDetail .summary-card.pricing-card.ux-empty {
    border-color: var(--color-primary-light);
}

.stockDetail .summary-card.market-card.ux-empty {
    border-color: var(--color-warning-light);
}

/* Card-type-specific CTA button colors */
.stockDetail .summary-card.inventory-card.ux-empty .command.cmdAdd {
    background: var(--color-success);
}

.stockDetail .summary-card.inventory-card.ux-empty .command.cmdAdd:hover {
    background: rgba(34, 197, 94, 0.9);
}

.stockDetail .summary-card.market-card.ux-empty .command.cmdAdd {
    background: var(--color-warning);
    color: var(--color-text);
}

.stockDetail .summary-card.market-card.ux-empty .command.cmdAdd:hover {
    background: rgba(251, 191, 36, 0.9);
}


/* ---------------------------------------------------------------------------
   F. Required + Empty State Animation
   Market card pulses when required and empty (e.g. listing mode requires
   market data but none is set).
   --------------------------------------------------------------------------- */

@keyframes stockDetailRequiredPulse {
    0%, 100% {
        border-color: var(--color-form-error);
        transform: scale(1);
    }
    50% {
        border-color: rgba(239, 68, 68, 0.7);
        transform: scale(1.01);
    }
}

.stockDetail .summary-card.market-card.ux-required.ux-empty {
    animation: stockDetailRequiredPulse 2s ease-in-out infinite;
}

.stockDetail .summary-card.market-card.ux-required.ux-empty:hover,
.stockDetail .summary-card.market-card.ux-required.ux-empty:focus-within {
    animation: none;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .stockDetail .summary-card.market-card.ux-required.ux-empty {
        animation: none;
    }
}


/* ==========================================================================
   AREA 2: DIALOG SHARED UI — ICON RULES (WIP)
   ==========================================================================
   Migrated from: style-dialog.css
   Status: WIP — dialogs may be refactored during testing. Revisit after
           each section is tested and dialog patterns are finalized.

   Already migrated to component-library.css Section 56:
     .dialog-close  → close-black.svg     (was icon-close@2x.png)
     .dialog-back   → arrow-left-black.svg (was icon-back@2x.png)
     .dialog-status → alert-primary.svg    (unchanged)

   SVGs that may need to be created in /images/icon/:
     arrow-left-black.svg      — back arrow for dialog navigation
     arrow-left-white.svg      — dark mode variant
     check-none-black.svg      — empty checkbox for list selection
     check-all-black.svg       — fully checked checkbox
     check-partial-black.svg   — indeterminate checkbox
   ========================================================================== */

/* --- Delete Command Icon ---
   Legacy: body #Interactions .view .commands .cmdDelete::after
   Source: style-dialog.css L1075-1091 (icon-delete-dark@2x.png)
   Clean class: .dialog-cmd-delete
*/
.dialog-cmd-delete::after {
    content: '';
    display: inline-block;
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    background-image: url("/images/icon/trash-primary.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-left: var(--spacing-xs);
}

.dialog-cmd-delete:hover {
    background-color: transparent;
}

/* --- Remove Command Icon ---
   Legacy: body #Interactions .view .dialogs .dialog .commands .cmdRemove
   Source: style-dialog.css L1097-1139 (icon-delete-dark@2x.png)
   Clean class: .dialog-cmd-remove
   Shows only when parent dialog has [ux-filled]
*/
.dialog-cmd-remove {
    position: relative;
    display: none;
    align-items: center;
    margin-top: var(--spacing-sm);
    padding-left: var(--spacing-lg);
    background-image: none;
    background-color: transparent;
    color: var(--color-text);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-sm);
    line-height: var(--spacing-lg);
    width: auto;
    text-indent: 0;
    cursor: pointer;
}

[ux-filled] .dialog-cmd-remove {
    display: flex;
}

.dialog-cmd-remove:hover {
    text-decoration: underline;
}

.dialog-cmd-remove::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: var(--spacing-lg);
    height: var(--spacing-lg);
    background-image: url("/images/icon/trash-primary.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

.dialog-cmd-remove::after {
    display: none;
}

/* --- Progress Cancel Button ---
   Legacy: #Interactions .view .commands .command .progress .cmdCancel
   Source: style-dialog.css L1044-1060 (ic-close.png)
   Clean class: .progress-cancel
*/
.progress-cancel {
    position: absolute;
    right: var(--spacing-lg);
    top: 15px;
    width: 15px;
    height: 15px;
    padding: 0;
    margin: 0;
    border: 0;
    text-indent: -9999px;
    background: url("/images/icon/close-black.svg") center / contain no-repeat;
    cursor: pointer;
}

.progress-cancel::after {
    display: none;
}

/* --- List Check-All Toggle ---
   Legacy: #Interactions .content .command.cmdCheckAll
   Source: style-dialog.css L1371-1391 (icon-check-none/all/partial@2x.png)
   Clean class: .list-check-toggle
   State driven by [list-selection] attribute on parent container
*/
.list-check-toggle {
    display: flex;
    align-items: center;
    padding: 0 0 0 var(--spacing-lg);
    height: auto;
    line-height: var(--spacing-xl);
    background-size: var(--spacing-md) var(--spacing-md);
    background-position: left center;
    background-repeat: no-repeat;
    cursor: pointer;
}

[list-selection="none"] .list-check-toggle {
    background-image: url("/images/icon/check-none-black.svg");
}

[list-selection="all"] .list-check-toggle {
    background-image: url("/images/icon/check-all-black.svg");
}

[list-selection="partial"] .list-check-toggle {
    background-image: url("/images/icon/check-partial-black.svg");
}

/* --- EditProfile Notice Icons ---
   Info banners in email/phone verification sections.
   Uses info-circle-secondary.svg for the notice-icon element.
*/
#Dlg_EditProfile .notice-banner .notice-icon {
    width: var(--icon-size-md, 20px);
    height: var(--icon-size-md, 20px);
    flex-shrink: 0;
    background-image: url("/images/icon/info-circle-secondary.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


/* ==========================================================================
   AREA 3: DIALOG — LISTING CREATION & MANAGEMENT ICONS
   ==========================================================================
   Migrated from: style-dialog-listing.css, style-dialog-listing-create.css,
                  style-dialog-listing-manager.css
   Target: PNG → SVG icon migration for listing dialogs.

   Already covered by component-library.css Section 56:
     .dialog-close  → close-black.svg  (covers L110, L588)
     .dialog-back   → arrow-left-black.svg (covers L605)

   SVGs created for this area:
     live-primary.svg          — broadcast/signal "live" indicator
     toggle-off-black.svg      — toggle switch off position
     toggle-on-black.svg       — toggle switch on position
     toggle-on-muted-black.svg — toggle switch on, disabled/muted
   ========================================================================== */

/* --- A. Variant Toggle Button (cmdVariant) ---
   Legacy: style-dialog-listing.css L479-536
   PNG: icon-off@2x.png, icon-on@2x.png
*/
#Interactions .view[ux-change-form] .cmdVariant {
    background-image: url("/images/icon/toggle-off-black.svg");
}

#Interactions .view[ux-change-form][ux-variant] .cmdVariant {
    background-image: url("/images/icon/toggle-on-black.svg");
}

#Interactions .view[ux-change-form] .dialog .variantPicker .cmdVariant {
    background-image: url("/images/icon/toggle-on-black.svg");
}

/* --- B. Listing Generated View Icons ---
   Legacy: style-dialog-listing.css L710, L726
   PNG: icon-generated3.png → sparks-primary.svg
   PNG: icon.listing-tag-color.png → label-primary.svg
*/
#View_ListingGenerated .pane .commands .inform {
    background-image: url("/images/icon/sparks-primary.svg");
}

#View_ListingGenerated > .title {
    background-image: url("/images/icon/label-primary.svg");
}

/* --- C. Pricing / Market Value Notice Icons ---
   Legacy: style-dialog-listing.css L1281-1303
   These use clean selectors already (.pricing-notice, .market-value-notice)
*/
.pricing-notice .notice-icon {
    background-image: url("/images/icon/live-primary.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    text-indent: -9999px;
}

.market-value-notice .notice-icon {
    background-image: url("/images/icon/draft-primary.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    text-indent: -9999px;
}

/* --- D. Publish Confirmation Error Icon ---
   Legacy: style-dialog-listing.css L1620-1632
   SVG: error-square-red.svg (already existed)
*/
#Dlg_PublishConfirmation .warning::before {
    background-image: url("/images/icon/error-square-red.svg");
}

/* --- E. Lightbulb Tip Icons ---
   Legacy: style-dialog-listing.css L2015-2028, L2484-2497
           style-dialog-listing-create.css L138-150
   SVG: lightbulb-primary.svg (already existed)
   These use ::before pseudo-elements on .help-text and .tip-icon
*/
#Dlg_Availability .availability-section .help-text::before {
    background-image: url("/images/icon/lightbulb-primary.svg");
}

#Dlg_Packaging .pack-count-section .help-text::before {
    background-image: url("/images/icon/lightbulb-primary.svg");
}

#View_CreateListing .photo-tip .tip-icon {
    background-image: url("/images/icon/lightbulb-primary.svg");
}

/* --- F. Live Operation Notice Icon (Availability Dialog) ---
   Legacy: style-dialog-listing.css L2173-2183
   SVG: live-primary.svg
*/
#Dlg_Availability[ux-state="consolidated"] .live-operation-notice .notice-icon {
    background-image: url("/images/icon/live-primary.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    text-indent: -9999px;
}

/* --- G. Create Listing — Onboarding Art ---
   Legacy: style-dialog-listing-create.css L505-551, L1276-1345
   These are JPG/SVG art images for the listing creation wizard.
   JPGs are kept as-is (not converted to SVG).
*/
#View_CreateListing .upload-option .option-icon {
    background-image: url("/images/onboarding/upload-file.jpg");
}

#View_CreateListing .camera-option .option-icon,
#View_CreateListing .camera-unavailable .option-icon {
    background-image: url("/images/onboarding/camera-capture.jpg");
}

#View_CreateListing .photo-option.upload-option[ux-uploaded] .option-icon {
    background-image: url("/images/onboarding/upload-file.svg"), linear-gradient(45deg, transparent 40%, var(--color-secondary) 40%, var(--color-secondary) 60%, transparent 60%);
    background-size: contain, 20px 20px;
    background-position: center, top right;
    background-repeat: no-repeat, no-repeat;
}

#View_CreateListing .photo-option.camera-option[ux-captured] .option-icon {
    background-image: url("/images/onboarding/camera-capture.svg"), linear-gradient(45deg, transparent 40%, var(--color-secondary) 40%, var(--color-secondary) 60%, transparent 60%);
    background-size: contain, 20px 20px;
    background-position: center, top right;
    background-repeat: no-repeat, no-repeat;
}

/* --- Camera State — Viewfinder Polish (shared by Create Listing & Photo Manager) --- */

#Interactions #View_CreateListing .content.camera .board,
#Interactions #Dlg_PhotoManager .content.camera .board {
    gap: 0;
}

/* Camera container - refined framing */
#View_CreateListing .content.camera .camera-container,
#Dlg_PhotoManager .content.camera .camera-container {
    position: relative;
    margin: var(--spacing-md);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Video preview - full size */
#View_CreateListing .content.camera .camera-preview,
#Dlg_PhotoManager .content.camera .camera-preview {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: #000;
}

/* Viewfinder border overlay */
#View_CreateListing .content.camera .camera-container::before,
#Dlg_PhotoManager .content.camera .camera-container::before {
    content: "";
    position: absolute;
    inset: var(--spacing-lg);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-md);
    pointer-events: none;
    z-index: 1;
}

/* Corner markers - creates viewfinder corners */
#View_CreateListing .content.camera .camera-container::after,
#Dlg_PhotoManager .content.camera .camera-container::after {
    content: "";
    position: absolute;
    inset: var(--spacing-lg);
    pointer-events: none;
    z-index: 1;
    background:
        /* Top-left */
        linear-gradient(to right, white 20px, transparent 20px) 0 0,
        linear-gradient(to bottom, white 20px, transparent 20px) 0 0,
        /* Top-right */
        linear-gradient(to left, white 20px, transparent 20px) 100% 0,
        linear-gradient(to bottom, white 20px, transparent 20px) 100% 0,
        /* Bottom-left */
        linear-gradient(to right, white 20px, transparent 20px) 0 100%,
        linear-gradient(to top, white 20px, transparent 20px) 0 100%,
        /* Bottom-right */
        linear-gradient(to left, white 20px, transparent 20px) 100% 100%,
        linear-gradient(to top, white 20px, transparent 20px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 24px 3px, 3px 24px;
}

/* Capture button - enhanced styling */
#View_CreateListing .content.camera .camera-controls,
#Dlg_PhotoManager .content.camera .camera-controls {
    position: absolute;
    bottom: var(--spacing-xl);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

#View_CreateListing .content.camera .cmdCapture,
#Dlg_PhotoManager .content.camera .cmdCapture {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    color: white;
    cursor: pointer;
}

#View_CreateListing .content.camera .capture-button,
#Dlg_PhotoManager .content.camera .capture-button {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s var(--ease-elegant);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}

#View_CreateListing .content.camera .capture-button:hover,
#Dlg_PhotoManager .content.camera .capture-button:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.05);
}

#View_CreateListing .content.camera .capture-inner,
#Dlg_PhotoManager .content.camera .capture-inner {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: white;
    transition: transform 0.15s var(--ease-elegant);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#View_CreateListing .content.camera .cmdCapture:active .capture-inner,
#Dlg_PhotoManager .content.camera .cmdCapture:active .capture-inner {
    transform: scale(0.85);
}

#View_CreateListing .content.camera .cmdCapture span,
#Dlg_PhotoManager .content.camera .cmdCapture span {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.02em;
}

/* Camera state header */
#View_CreateListing .content.camera .board h4,
#Dlg_PhotoManager .content.camera .board h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-xs);
}

#View_CreateListing .content.camera .dialog-subtitle,
#Dlg_PhotoManager .content.camera .dialog-subtitle {
    color: var(--color-text-muted);
    margin: 0;
}

/* --- Mobile Camera — Expand to Fill Available Space --- */
@media (max-width: 600px) {
    /* Make camera state use flex layout to fill space */
    #View_CreateListing .content.camera .dialog-scroll,
    #Dlg_PhotoManager .content.camera .dialog-scroll {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 0;
    }

    /* Header board - compact on mobile */
    #View_CreateListing .content.camera .board,
    #Dlg_PhotoManager .content.camera .board {
        flex-shrink: 0;
        padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
    }

    #View_CreateListing .content.camera .board h4,
    #Dlg_PhotoManager .content.camera .board h4 {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-xxs);
    }

    #View_CreateListing .content.camera .dialog-subtitle,
    #Dlg_PhotoManager .content.camera .dialog-subtitle {
        font-size: var(--font-size-sm);
    }

    /* Camera container - expand to fill remaining space */
    #View_CreateListing .content.camera .camera-container,
    #Dlg_PhotoManager .content.camera .camera-container {
        flex: 1;
        margin: 0;
        border-radius: 0;
        min-height: 0; /* Allow shrinking */
    }

    /* Video fills container height, not fixed aspect ratio */
    #View_CreateListing .content.camera .camera-preview,
    #Dlg_PhotoManager .content.camera .camera-preview {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }

    /* Adjust viewfinder inset for full-bleed camera */
    #View_CreateListing .content.camera .camera-container::before,
    #Dlg_PhotoManager .content.camera .camera-container::before {
        inset: var(--spacing-md);
    }

    #View_CreateListing .content.camera .camera-container::after,
    #Dlg_PhotoManager .content.camera .camera-container::after {
        inset: var(--spacing-md);
    }

    /* Capture button positioning */
    #View_CreateListing .content.camera .camera-controls,
    #Dlg_PhotoManager .content.camera .camera-controls {
        bottom: var(--spacing-lg);
    }
}

/* --- QR Scanner — Meetup Verification S4 (follows camera-container pattern) --- */

.meetup-scan-camera {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

/* Scanner container — matches .camera-container framing from CreateListing/PhotoManager */
.meetup-scan-camera .camera-container {
    position: relative;
    margin: var(--spacing-md);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Video preview — square aspect for QR scanning (not 4:3 like photo capture) */
.meetup-scan-camera .camera-preview {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: #000;
}

/* Viewfinder border overlay — same as CreateListing camera */
.meetup-scan-camera .camera-container::before {
    content: "";
    position: absolute;
    inset: var(--spacing-lg);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-md);
    pointer-events: none;
    z-index: 1;
}

/* Corner markers — same gradient technique as CreateListing camera */
.meetup-scan-camera .camera-container::after {
    content: "";
    position: absolute;
    inset: var(--spacing-lg);
    pointer-events: none;
    z-index: 1;
    background:
        /* Top-left */
        linear-gradient(to right, white 20px, transparent 20px) 0 0,
        linear-gradient(to bottom, white 20px, transparent 20px) 0 0,
        /* Top-right */
        linear-gradient(to left, white 20px, transparent 20px) 100% 0,
        linear-gradient(to bottom, white 20px, transparent 20px) 100% 0,
        /* Bottom-left */
        linear-gradient(to right, white 20px, transparent 20px) 0 100%,
        linear-gradient(to top, white 20px, transparent 20px) 0 100%,
        /* Bottom-right */
        linear-gradient(to left, white 20px, transparent 20px) 100% 100%,
        linear-gradient(to top, white 20px, transparent 20px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 24px 3px, 3px 24px;
}

/* Scanning animation — pulsing line across viewfinder */
.meetup-scan-camera .scan-line {
    position: absolute;
    left: var(--spacing-lg);
    right: var(--spacing-lg);
    height: 2px;
    background: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary);
    z-index: 2;
    animation: scan-sweep 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes scan-sweep {
    0%, 100% { top: 20%; opacity: 0.6; }
    50% { top: 80%; opacity: 1; }
}

/* Scan status text */
.meetup-scan-camera .scan-instructions {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.meetup-scan-camera .scan-status {
    font-size: var(--font-size-sm);
    min-height: 1.4em;
}

.meetup-scan-camera .scan-status.scan-error {
    color: var(--color-error);
}

/* Mobile: expand camera to fill available space (matches CreateListing responsive) */
@media (max-width: 600px) {
    .meetup-scan-camera .camera-container {
        flex: 1;
        margin: 0;
        border-radius: 0;
        min-height: 0;
    }

    .meetup-scan-camera .camera-preview {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }

    .meetup-scan-camera .camera-container::before,
    .meetup-scan-camera .camera-container::after {
        inset: var(--spacing-md);
    }
}

/* Analyzing / Generating illustrations (::before on h3) */
#View_CreateListing .art.busy .generating-message h3::before,
#View_CreateListing .art.busy .analyzing-message h3::before,
#View_CreateListing .art.busy .pricing-message h3::before {
    background-image: url("/images/onboarding/upload-analyze.jpg");
}

#View_CreateListing .art.busy .generating-message h3::before {
    background-image: url("/images/onboarding/listing-generate.jpg");
}

/* --- H. Create Listing — Data Notice Draft Icon ---
   Legacy: style-dialog-listing-create.css L1988-1999
   SVG: draft-primary.svg (already existed)
*/
#View_CreateListing .pane.analysis .data-notice .notice-icon {
    background-image: url("/images/icon/draft-primary.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
    text-indent: -9999px;
}

/* --- H2. Create Listing — Selection Card Icons --- */
#View_CreateListing .selection-card .card-icon {
    --icon-size: 48px;
}

#View_CreateListing .selection-card .icon-folder {
    background-image: url("/images/icon/folder-primary.svg");
}

#View_CreateListing .selection-card .icon-camera {
    background-image: url("/images/icon/camera-primary.svg");
}

#View_CreateListing .selection-card .icon-camera-off {
    background-image: url("/images/icon/camera-black.svg");
    opacity: 0.4;
}

/* --- H3. Create Listing — Notice Banner Icons --- */
#View_CreateListing .notice-icon.icon-lightbulb {
    --icon-size: 20px;
    background-image: url("/images/icon/lightbulb-primary.svg");
}

/* Success-colored lightbulb for create-listing-tip (teal accent) */
#View_CreateListing .create-listing-tip .notice-icon.icon-lightbulb {
    background-image: url("/images/icon/lightbulb-success.svg");
}

#View_CreateListing .notice-icon.icon-warning {
    --icon-size: 20px;
    background-image: url("/images/icon/warning-hexagon-primary.svg");
}

#View_CreateListing .notice-icon.icon-info {
    --icon-size: 20px;
    background-image: url("/images/icon/info-circle-secondary.svg");
}

/* --- H4. Create Listing — Market Data Card Icons --- */
#View_CreateListing .market-data-card .meta-icon {
    --icon-size: 16px;
    vertical-align: middle;
    margin-right: 4px;
}

#View_CreateListing .market-data-card .icon-location {
    background-image: url("/images/icon/location-primary.svg");
}

#View_CreateListing .market-data-card .icon-globe {
    background-image: url("/images/icon/globe-primary.svg");
}

#View_CreateListing .market-data-card .icon-map {
    background-image: url("/images/icon/map-primary.svg");
}

#View_CreateListing .market-data-card .icon-user {
    background-image: url("/images/icon/user-black.svg");
}

#View_CreateListing .market-data-card .icon-store {
    background-image: url("/images/icon/store-black.svg");
}

/* --- I. Listing Manager — Variant Publish Toggles ---
   Legacy: style-dialog-listing-manager.css L31-81
   PNG: icon-alert-white@2x.png → alert-white.svg
   PNG: icon-off@2x.png → toggle-off-black.svg
   PNG: icon-on-disabled@2x.png → toggle-on-muted-black.svg
   PNG: icon-on@2x.png → toggle-on-black.svg
*/
#View_ListingManager .variant .cmdPublish::before {
    background-image: url("/images/icon/alert-white.svg");
}

#View_ListingManager .variant .cmdPublish::after {
    background-image: url("/images/icon/toggle-off-black.svg");
}

#View_ListingManager .variant[variant-state="online"] .cmdPublish::after {
    background-image: url("/images/icon/toggle-on-muted-black.svg");
}

#View_ListingManager .variant[variant-data-complete][variant-state="online"] .cmdPublish::after {
    background-image: url("/images/icon/toggle-on-black.svg");
}

/* ==========================================================================
   THREAD DETAIL — State Management Only
   --------------------------------------------------------------------------
   Visual styling moved to component-library.css Section 77.
   This section contains ONLY state-driven visibility toggles and
   animation behaviors that cannot be expressed in the component library.
   ========================================================================== */

/* --- Accordion Toggle Animation --- */
/* Toggle icon rotation and text visibility handled in Thread Detail layout section */

/* --- Meetup Time/Location Visibility --- */
/* When time is scheduled, hide pending; when no time, hide time-cards */
.thread-detail-columns .meetup-when[data-has-time] .status-pending {
    display: none;
}

.thread-detail-columns .meetup-when:not([data-has-time]) .time-cards {
    display: none;
}

/* Hide map options when no lat/lng */
.thread-detail-columns .meetup-where:not([ux-map-location]) .meetup-options {
    display: none;
}

/* Hide address when not available */
.thread-detail-columns .meetup-where:not([ux-has-address]) .meetup-address {
    display: none;
}

/* --- Action Panel Visibility --- */
/* Hide offer target when no offer */
.thread-detail-columns:not([ux-has-offer]) .offer-target {
    display: none;
}

/* Hide action group when no action text */
.thread-detail-columns:not([ux-has-action-text]) .thread-action-panel {
    display: none;
}


/* ==========================================================================
   THREAD DETAIL — Page Layout
   --------------------------------------------------------------------------
   Two-column layout for transaction details + messaging.
   Left: sticky sidebar with order/meetup/action cards
   Right: scrollable chat panel
   Mobile: single column, stacked with action panel first
   ========================================================================== */

/* --- Page Container --- */
#Content_ThreadDetail.thread-detail-view {
    width: 100%;
    max-width: var(--container-max-width, 1400px);
    margin: 0 auto;
    padding: var(--spacing-lg);
    padding-top:0;
    box-sizing: border-box;
    min-height: 100vh;
    /* Warm canvas background per style guide */
    background: linear-gradient( 180deg, rgba(92, 67, 244, 0.018) 0%, rgba(92, 67, 244, 0.008) 40%, rgba(0, 255, 203, 0.006) 100% );
}

/* --- Primary Header (Simplified to match other detail pages) --- */
#Content_ThreadDetail .threadDetail > .primary.thread-detail-header {
    background: var(--color-primary-darker);
    color: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--spacing-lg);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: flex-start;
}

/* Subtle accent removed - keeping header clean */
#Content_ThreadDetail .threadDetail > .primary.thread-detail-header::before {
    display: none;
}

/* Header content layout */
#Content_ThreadDetail .primary.thread-detail-header .header-content {
    flex: 1;
    min-width: 200px;
    position: relative;
    z-index: 1;
}

#Content_ThreadDetail .primary.thread-detail-header .header-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

#Content_ThreadDetail .primary.thread-detail-header .category-label {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.9;
}

/* Role context badge — dot+pill pattern */
#Content_ThreadDetail .role-context-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 10px;
    background: var(--color-glass);
    backdrop-filter: blur(8px);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-white);
}

#Content_ThreadDetail .role-context-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-glass-heavy);
    flex-shrink: 0;
}

#Content_ThreadDetail .threadDetail.seller-role .role-context-badge::before {
    background: var(--color-success);
}

#Content_ThreadDetail .threadDetail.buyer-role .role-context-badge::before {
    background: var(--color-info);
}

#Content_ThreadDetail .threadDetail.dual-role .role-context-badge::before {
    background: var(--color-warning);
}

/* Thread title */
#Content_ThreadDetail .primary.thread-detail-header .thread-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: var(--line-height-tight);
}

/* Thread status badge */
#Content_ThreadDetail .primary.thread-detail-header .thread-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 10px;
    background: var(--color-glass);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

#Content_ThreadDetail .primary.thread-detail-header .thread-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-white);
    flex-shrink: 0;
}

/* --- Two-Column Layout (Desktop) --- */
#Content_ThreadDetail .thread-detail-columns {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--spacing-lg);
    align-items: start;
}

@media (min-width: 1200px) {
    #Content_ThreadDetail .thread-detail-columns {
        grid-template-columns: 400px 1fr;
    }
}

@media (min-width: 1400px) {
    #Content_ThreadDetail .thread-detail-columns {
        grid-template-columns: 500px 1fr;
    }
}

@media (max-width: 968px) {
    #Content_ThreadDetail .thread-detail-columns {
        grid-template-columns: 320px 1fr;
        gap: var(--spacing-lg);
    }
}

/* --- Left Sidebar --- */
#Content_ThreadDetail .paneGroup.main.thread-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    row-gap: var(--spacing-sm);
}


/* --- Card Containers --- Uses .card from component-library.css, adds overrides */
#Content_ThreadDetail .order-card.card,
#Content_ThreadDetail .thread-meetup-card.card,
#Content_ThreadDetail .thread-action-panel.card {
    padding: 0; /* Internal sections handle padding */
    overflow: hidden; /* For accordion functionality */
}

#Content_ThreadDetail .thread-meetup-card.card {
    display: flex;
    flex-direction: column;
}

/* Disable the diagonal accent ::after from base .card */
#Content_ThreadDetail .order-card.card::after,
#Content_ThreadDetail .thread-meetup-card.card::after,
#Content_ThreadDetail .thread-action-panel.card::after {
    display: none;
}

/* --- Order Card --- */
#Content_ThreadDetail .order-rollup {
    background: linear-gradient(
        135deg,
        rgba(250, 248, 255, 1) 0%,
        rgba(245, 243, 255, 0.8) 100%
    );
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-primary-lighter);
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

#Content_ThreadDetail .order-rollup .summary-grid {
    display: flex;
    gap: var(--spacing-sm);
    align-items: stretch;
}

#Content_ThreadDetail .order-rollup .summary-item {
    flex: 1;
    min-width: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border-primary-light);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm) var(--spacing-xs);
    text-align: center;
    transition: var(--transition-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

#Content_ThreadDetail .order-rollup .summary-item:hover {
    border-color: var(--color-primary-border-soft);
    box-shadow: 0 2px 8px var(--color-primary-lighter);
}

/* Icon at top */
#Content_ThreadDetail .order-rollup .summary-item .item-icon {
    width: 16px;
    height: 16px;
    opacity: 0.35;
    order: 0;
    margin-bottom: 4px;
    flex-shrink: 0;
}

/* Label text (key, target) - sentence case per style guide */
#Content_ThreadDetail .order-rollup .summary-item .key,
#Content_ThreadDetail .order-rollup .summary-item .target {
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-muted);
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.3;
    order: 2;
    margin-top: 2px;
    min-height: 26px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* Value text (value, qty) - warm text per style guide */
#Content_ThreadDetail .order-rollup .summary-item .value,
#Content_ThreadDetail .order-rollup .summary-item .qty {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-warm);
    line-height: 1.1;
    order: 1;
}

/* Order items thumbnails */
#Content_ThreadDetail .order-items {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    flex-wrap: wrap;
}

#Content_ThreadDetail .product-item {
    width: 64px;
    height: 64px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    position: relative;
    transition: var(--transition-card);
}

#Content_ThreadDetail .product-item:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
}

#Content_ThreadDetail .product-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Expand toggle */
#Content_ThreadDetail .accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: var(--color-primary-bg-light);
    border-top: 1px solid var(--color-primary-lighter);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-fast);
}

#Content_ThreadDetail .accordion-toggle:hover {
    background: var(--color-border-primary-faint);
}

#Content_ThreadDetail .accordion-toggle .toggle-icon {
    transition: transform 0.3s var(--ease-elegant);
}

/* Toggle text visibility: collapsed state */
#Content_ThreadDetail .accordion-toggle .toggle-text-expanded {
    display: none;
}

#Content_ThreadDetail .accordion-toggle .toggle-text-collapsed {
    display: inline;
}

/* Expanded state: toggle button changes appearance */
#Content_ThreadDetail .order-rollup[ux-expanded] .accordion-toggle {
    background: linear-gradient(135deg, rgba(92, 67, 244, 0.08) 0%, rgba(92, 67, 244, 0.04) 100%);
    border-top-color: rgba(92, 67, 244, 0.15);
}

#Content_ThreadDetail .order-rollup[ux-expanded] .accordion-toggle .toggle-icon {
    transform: rotate(180deg);
}

/* Toggle text visibility: expanded state */
#Content_ThreadDetail .order-rollup[ux-expanded] .accordion-toggle .toggle-text-collapsed {
    display: none;
}

#Content_ThreadDetail .order-rollup[ux-expanded] .accordion-toggle .toggle-text-expanded {
    display: inline;
}

/* Order breakdown (expanded) */
#Content_ThreadDetail .order-breakdown {
    padding: var(--spacing-md);
    border-top: 1px solid var(--color-border-light);
}

#Content_ThreadDetail .kv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
}

#Content_ThreadDetail .kv-row .key {
    color: var(--color-text-muted);
}

#Content_ThreadDetail .kv-row .value {
    font-weight: var(--font-weight-semibold);
}

#Content_ThreadDetail .kv-row.final-total {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 2px solid var(--color-primary);
}

#Content_ThreadDetail .kv-row.final-total .key,
#Content_ThreadDetail .kv-row.final-total .value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

/* --- Mobile Responsive Order Card --- */
@media (max-width: 600px) {
    #Content_ThreadDetail .order-rollup {
        padding: var(--spacing-sm);
        width: 100%;
        box-sizing: border-box;
    }

    #Content_ThreadDetail .order-rollup .summary-grid {
        flex-direction: column;
        gap: var(--spacing-sm);
        width: 100%;
    }

    /* Receipt/checkout style: [icon] [label] ... [value] */
    #Content_ThreadDetail .order-rollup .summary-item {
        width: 100% !important;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-md);
        text-align: left;
        box-sizing: border-box;
    }

    #Content_ThreadDetail .order-rollup .summary-item .item-icon {
        order: 0;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    /* Label after icon - grows to fill space */
    #Content_ThreadDetail .order-rollup .summary-item .key,
    #Content_ThreadDetail .order-rollup .summary-item .target {
        order: 1;
        margin-top: 0;
        min-height: auto;
        flex: 1;
        justify-content: flex-start;
        align-items: center;
        text-align: left;
    }

    /* Value right-aligned at end */
    #Content_ThreadDetail .order-rollup .summary-item .value,
    #Content_ThreadDetail .order-rollup .summary-item .qty {
        order: 2;
        flex-shrink: 0;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    #Content_ThreadDetail .order-items {
        justify-content: center;
        padding: var(--spacing-sm);
    }

    #Content_ThreadDetail .order-breakdown {
        padding: var(--spacing-sm);
    }

    /* Mobile chat form - stacked layout with full-width textarea */
    #Content_ThreadDetail .chat-form,
    #Content_ThreadDetail .pane.form.messaging {
        padding: var(--spacing-sm);
        background: var(--color-surface);
    }

    #Content_ThreadDetail .chat-form .message {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }
}

/* --- Meetup Card --- */
#Content_ThreadDetail .thread-meetup-card .meetup-title {
    background: linear-gradient(
        135deg,
        rgba(250, 248, 255, 1) 0%,
        rgba(245, 243, 255, 0.9) 100%
    );
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    border-bottom: 1px solid var(--color-primary-lighter);
    font-weight: var(--font-weight-semibold);
}

#Content_ThreadDetail .thread-meetup-card .meetup-title .other-party {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

#Content_ThreadDetail .thread-meetup-card .meetup-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--color-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#Content_ThreadDetail .thread-meetup-card .meetup-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* When/Where sections */
#Content_ThreadDetail .meetup-when,
#Content_ThreadDetail .meetup-where {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

#Content_ThreadDetail .meetup-when + .meetup-where {
    border-top: 1px solid var(--color-border-light);
}

/* Time/Date/Location cards */
#Content_ThreadDetail .time-cards,
#Content_ThreadDetail .location-card {
    display: flex;
    gap: var(--spacing-sm);
}

#Content_ThreadDetail .date-card,
#Content_ThreadDetail .time-card,
#Content_ThreadDetail .location-card {
    flex: 1;
    background: var(--color-primary-bg-tint);
    border: 1px solid var(--color-border-primary-light);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

#Content_ThreadDetail .date-card .value,
#Content_ThreadDetail .time-card .value,
#Content_ThreadDetail .location-card .value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

/* Pending state pill - uses warning tokens from vars.css */
#Content_ThreadDetail .status-pending {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-warning-lighter);
    border: 1px dashed var(--color-warning-muted);
    border-radius: var(--border-radius-md);
    color: var(--color-warning-text);
    font-size: var(--font-size-sm);
}

/* Address display */
#Content_ThreadDetail .meetup-address {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Map options - layout only, buttons use component-library.css classes */
#Content_ThreadDetail .meetup-options {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

/* --- Transaction Celebration Card --- */
#Content_ThreadDetail .thread-celebration-card {
    margin: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-sm);
}
#Content_ThreadDetail .thread-celebration-card .milestone {
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
}
#Content_ThreadDetail .thread-celebration-card .milestone-icon {
    width: 48px;
    height: 48px;
    font-size: var(--font-size-xl);
}
#Content_ThreadDetail .thread-celebration-card .milestone-title {
    font-size: var(--font-size-md);
}
#Content_ThreadDetail .thread-celebration-card .milestone-description {
    font-size: var(--font-size-sm);
    max-width: none;
}

/* --- Post-Meetup Actions Card --- */
#Content_ThreadDetail .thread-postmeetup-card {
    padding: var(--spacing-md);
    margin: var(--spacing-md);
}
#Content_ThreadDetail .thread-postmeetup-card::after { display: none; }
#Content_ThreadDetail .thread-postmeetup-card .postmeetup-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--spacing-sm) 0;
}
#Content_ThreadDetail .postmeetup-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
#Content_ThreadDetail .postmeetup-action {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
#Content_ThreadDetail .postmeetup-action:hover {
    background: var(--color-surface-subtle, rgba(0, 0, 0, 0.04));
}
#Content_ThreadDetail .postmeetup-action .icon-svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.7;
}
#Content_ThreadDetail .postmeetup-help {
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border-light);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* --- Action Panel --- */
#Content_ThreadDetail .thread-action-panel {
    padding: var(--spacing-lg);
}

/* Action banner */
#Content_ThreadDetail .thread-action-panel .actionItem {
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.9) 0%,
        rgba(120, 100, 255, 0.85) 100%
    );
    color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    margin-bottom: var(--spacing-md);
}

/* Target cards (offer/time) */
#Content_ThreadDetail .action-targets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

#Content_ThreadDetail .offer-target,
#Content_ThreadDetail .time-target {
    background: rgba(250, 248, 255, 0.8);
    border: 1px solid var(--color-border-primary-light);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    text-align: center;
}

#Content_ThreadDetail .offer-target .label,
#Content_ThreadDetail .time-target .label {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    text-transform: none;
    letter-spacing: normal;
    margin-bottom: 2px;
}

#Content_ThreadDetail .offer-target .value,
#Content_ThreadDetail .time-target .value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

/* Primary CTA button - uses .btn-primary from component-library.css, this adds full-width layout */
#Content_ThreadDetail .thread-action-panel .action-command {
    display: block;
    width: 100%;
    text-align: center;
}

/* --- Right Column: Chat Panel --- */
#Content_ThreadDetail .paneGroup.messaging.thread-chat-panel {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    min-height: 500px;
    max-height: calc(100vh - var(--spacing-xl) * 2);
}

/* Messaging header */
#Content_ThreadDetail .messaging-header {
    background: linear-gradient(
        135deg,
        rgba(250, 248, 255, 1) 0%,
        rgba(245, 243, 255, 0.9) 100%
    );
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    border-bottom: 1px solid var(--color-primary-lighter);
    font-weight: var(--font-weight-semibold);
}

/* Chat scroll container */
#Content_ThreadDetail .pane.chat.chat-container {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
    background: linear-gradient(
        180deg,
        rgba(250, 248, 255, 0.5) 0%,
        var(--color-white) 100%
    );
}

/* Posts container */
#Content_ThreadDetail .posts {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Message form at bottom */
#Content_ThreadDetail .pane.form.messaging.chat-form {
    background: rgba(250, 248, 255, 0.8);
    padding: var(--spacing-md);
    border-top: 1px solid var(--color-border-light);
}

/* Compose row — textarea + send button inline */
#Content_ThreadDetail .chat-compose-row {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-sm);
    width: 100%;
}

#Content_ThreadDetail .chat-textarea {
    flex: 1;
    min-width: 0;
}

#Content_ThreadDetail .chat-textarea textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius-lg);
    background: var(--color-white) !important;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
}

/* Send button — compact circle, icon-only */
#Content_ThreadDetail .chat-send {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
    padding: 0;
}

#Content_ThreadDetail .chat-send:hover {
    background: var(--color-primary-hover);
    transform: scale(1.05);
}

#Content_ThreadDetail .chat-send:active {
    transform: scale(0.95);
}

#Content_ThreadDetail .chat-send .icon-svg {
    --icon-size: 20px;
    filter: brightness(0) invert(1);
}

/* --- Mobile Layout (≤768px) --- */
@media (max-width: 768px) {
    #Content_ThreadDetail.thread-detail-view {
        padding: var(--spacing-md);
    }

    #Content_ThreadDetail .thread-detail-columns {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    #Content_ThreadDetail .paneGroup.main.thread-sidebar {
        width: 100%;
    }

    /* Cards should stretch full width on mobile */
    #Content_ThreadDetail .order-card,
    #Content_ThreadDetail .thread-meetup-card,
    #Content_ThreadDetail .thread-action-panel {
        width: 100%;
        box-sizing: border-box;
    }

    /* Reorder: action panel first on mobile */
    #Content_ThreadDetail .thread-action-panel {
        order: -1;
    }

    /* Chat panel takes remaining space */
    #Content_ThreadDetail .paneGroup.messaging.thread-chat-panel {
        min-height: 400px;
        max-height: 60vh;
        width: 100%;
    }

    /* Smaller header on mobile */
    #Content_ThreadDetail .threadDetail > .primary.thread-detail-header {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    #Content_ThreadDetail .primary.thread-detail-header .thread-title {
        font-size: 1.25rem;
    }
}

/* --- Animations --- */
@keyframes threadFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#Content_ThreadDetail .order-card,
#Content_ThreadDetail .thread-meetup-card,
#Content_ThreadDetail .thread-action-panel,
#Content_ThreadDetail .paneGroup.messaging.thread-chat-panel {
    animation: threadFadeIn 0.4s var(--ease-elegant) both;
}

#Content_ThreadDetail .order-card { animation-delay: 0.1s; }
#Content_ThreadDetail .thread-meetup-card { animation-delay: 0.15s; }
#Content_ThreadDetail .thread-action-panel { animation-delay: 0.2s; }
#Content_ThreadDetail .paneGroup.messaging.thread-chat-panel { animation-delay: 0.25s; }


/* ==========================================================================
   ACTIVITY MEETUP CALLOUT — Upcoming meetups pinned above inbox results
   ========================================================================== */

.activity-meetup-callout {
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.025) 0%,
        rgba(0, 255, 203, 0.015) 50%,
        var(--color-background) 100%
    );
    border: 1px solid var(--color-border-primary-faint);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.activity-meetup-callout .callout-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
}

.activity-meetup-callout .callout-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm-muted);
}

.activity-meetup-callout .callout-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
}

.activity-meetup-callout .callout-collapse {
    width: 16px;
    height: 16px;
    opacity: 0.5;
    cursor: pointer;
    transition: var(--transition-fast);
    margin-left: auto;
}

.activity-meetup-callout .callout-collapse:hover {
    opacity: 0.8;
}

.activity-meetup-callout[data-collapsed] .callout-body {
    display: none;
}

.activity-meetup-callout[data-collapsed] .callout-overflow {
    display: none !important;
}

.activity-meetup-callout[data-collapsed] .callout-collapse {
    transform: rotate(-90deg);
}

/* --- Callout Rows --- */

.activity-meetup-callout .callout-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.activity-meetup-callout .callout-row:hover {
    background: rgba(92, 67, 244, 0.04);
}

.activity-meetup-callout .callout-row + .callout-row {
    border-top: 1px solid var(--color-border-primary-faint);
}

/* Time column — fixed width for alignment */
.activity-meetup-callout .callout-time {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 72px;
    flex-shrink: 0;
}

.activity-meetup-callout .callout-time-relative {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
}

.activity-meetup-callout .callout-time-absolute {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
}

/* Detail column — flex grows */
.activity-meetup-callout .callout-detail {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.activity-meetup-callout .callout-item-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-meetup-callout .callout-party {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
}

/* Location column */
.activity-meetup-callout .callout-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    flex-shrink: 0;
}

.activity-meetup-callout .callout-location .icon-svg {
    width: 14px;
    height: 14px;
    opacity: 0.5;
}

/* In-progress meetup emphasis */
.activity-meetup-callout .callout-row.meetup-in-progress .callout-time-relative {
    color: var(--color-primary);
}

/* Overflow link */
.activity-meetup-callout .callout-overflow {
    padding: var(--spacing-xs) var(--spacing-xs) 0;
    text-align: center;
}

.activity-meetup-callout .callout-overflow-text {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    cursor: pointer;
}

.activity-meetup-callout .callout-overflow-text:hover {
    color: var(--color-primary);
}

/* --- Responsive --- */

@media (max-width: 600px) {
    .activity-meetup-callout .callout-row {
        flex-wrap: wrap;
        gap: var(--spacing-xs) var(--spacing-sm);
    }

    .activity-meetup-callout .callout-time {
        min-width: auto;
        flex-direction: row;
        gap: var(--spacing-xs);
    }

    .activity-meetup-callout .callout-location {
        width: 100%;
        order: 3;
    }
}


/* ==========================================================================
   78B. ORDER REVIEW DIALOG — Seller reviews order requiring approval
   Uses form-panel centering and meetup-info-card patterns.
   ========================================================================== */

#View_OrderReview .dialog-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
}

#View_OrderReview .review-hero {
    width: min(500px, 100%);
    padding: 0 0 var(--spacing-sm);
}

#View_OrderReview .dialog-subtitle {
    color: var(--color-text-warm-body);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    margin: 0;
}

#View_OrderReview .review-order-summary {
    background: var(--gradient-card-base);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-md) var(--spacing-lg);
    width: min(500px, 100%);
    box-sizing: border-box;
    box-shadow: var(--shadow-card);
    margin: var(--spacing-sm) 0 var(--spacing-md);
}

#View_OrderReview .review-order-items {
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

#View_OrderReview .review-order-items:empty {
    display: none;
}

#View_OrderReview .review-order-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
}

#View_OrderReview .review-item-photo {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-sm);
    object-fit: cover;
    border: 1px solid var(--color-border);
}

#View_OrderReview .review-item-name {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    color: var(--color-text-warm);
}

#View_OrderReview .review-order-details {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#View_OrderReview .review-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-border);
}

#View_OrderReview .review-detail-row:last-child {
    border-bottom: none;
}

#View_OrderReview .review-detail-label {
    color: var(--color-text-warm-muted);
}

#View_OrderReview .review-detail-value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-warm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

#View_OrderReview .notice-banner {
    width: min(500px, 100%);
    margin: 0 0 var(--spacing-sm);
    box-sizing: border-box;
}

#View_OrderReview .help-text {
    width: min(500px, 100%);
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    line-height: 1.6;
}

#View_OrderReview .help-text p {
    margin: 0;
}

@media (max-width: 520px) {
    #View_OrderReview .dialog-scroll {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    #View_OrderReview .review-order-summary {
        width: 100%;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    #View_OrderReview .notice-banner,
    #View_OrderReview .help-text,
    #View_OrderReview .review-hero {
        width: 100%;
    }
}

/* --- 78C. Thread Order Help Link — persistent entry to meetup problem menu --- */
.thread-order-help {
    padding: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
    margin-top: var(--spacing-sm);
    text-align: center;
    order: 1000; /* always at end */
}

.thread-order-help .command {
    font-size: var(--font-size-xs);
    color: var(--color-text-warm-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition-colors);
}

.thread-order-help .command:hover {
    color: var(--color-primary);
}

/* ==========================================================================
   79. MEETUP VERIFICATION — State Container + Infographic + Commands
   ========================================================================== */

/* --- 79-A. Content Container --- */

#View_MeetupVerification .content.verification {
    padding: 0;
    gap: 0;
}

/* Meetup state sections fill the dialog body with scroll + footer layout */
#View_MeetupVerification .meetup-state {
    flex-direction: column;
    flex: 1;
    width: 100%;
    min-height: 0;
}

/* --- 79-A2. State-Based Visibility Rules --- */

/* Role-based visibility — hide opposing role elements
   !important needed: these must override .commands .command { display: flex } which has equal specificity */
#View_MeetupVerification[ux-role="seller"] [ux-role="buyer"] { display: none !important; }
#View_MeetupVerification[ux-role="buyer"] [ux-role="seller"] { display: none !important; }

/* Arrival window gating — hide arrival button and show "too early" notice when outside window */
#View_MeetupVerification .arrival-too-early { display: none; }
#View_MeetupVerification:not([ux-can-arrive]) .arrival-gate { display: none !important; }
#View_MeetupVerification:not([ux-can-arrive]) .arrival-too-early { display: flex; padding: 8px 12px; font-size: 13px; margin: 0 0 8px; }

/* Payment type visibility — hide non-matching payment elements
   Server values: "cash", "credit/debit card", "crypto" */
#View_MeetupVerification[ux-payment-type="credit/debit card"] [ux-payment-type="cash"] { display: none !important; }
#View_MeetupVerification[ux-payment-type="cash"] [ux-payment-type="credit/debit card"] { display: none !important; }
#View_MeetupVerification[ux-payment-type="credit/debit card"] [ux-payment-type="crypto"] { display: none !important; }
#View_MeetupVerification[ux-payment-type="crypto"] [ux-payment-type="credit/debit card"] { display: none !important; }
#View_MeetupVerification[ux-payment-type="cash"] [ux-payment-type="crypto"] { display: none !important; }
#View_MeetupVerification[ux-payment-type="crypto"] [ux-payment-type="cash"] { display: none !important; }

/* Cancellation visibility rules */
#View_MeetupVerification[ux-cancel-initiator] [ux-cancel-other] { display: none !important; }
#View_MeetupVerification[ux-cancel-other] [ux-cancel-initiator] { display: none !important; }

/* Cash amount display — only show for cash orders */
#View_MeetupVerification[ux-payment-type="credit/debit card"] [ux-data="order.cashAmount"],
#View_MeetupVerification[ux-payment-type="credit/debit card"] .cash-amount-display { display: none !important; }

/* Flag-based button visibility (S5 dual-flag cash flow) */
#View_MeetupVerification[ux-buyer-paid-cash] .command[ux-hide-if-paid] { display: none; }
#View_MeetupVerification[ux-seller-delivered] .command[ux-hide-if-delivered] { display: none; }

/* Role-specific undo button visibility */
#View_MeetupVerification[ux-buyer-paid-cash][ux-role="buyer"] .command[ux-show-if-paid] { display: flex; }
#View_MeetupVerification[ux-seller-delivered][ux-role="seller"] .command[ux-show-if-delivered] { display: flex; }

/* Warm canvas background on dialog scroll area */
#View_MeetupVerification .dialog-scroll {
    scrollbar-width: thin;
    background: linear-gradient(
        180deg,
        rgba(92, 67, 244, 0.012) 0%,
        rgba(92, 67, 244, 0.004) 40%,
        var(--color-background) 100%
    );
}

/* --- 79-B. Meetup Hero (Illustration + Title) --- */

#View_MeetupVerification .meetup-hero {
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-lg) 0;
}

#View_MeetupVerification .meetup-hero-image {
    display: inline-flex;
    margin-bottom: var(--spacing-sm);
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.10));
}

#View_MeetupVerification .meetup-hero-image img {
    max-width: 200px;
    height: auto;
    border-radius: var(--border-radius-lg);
    object-fit: cover;
}

#View_MeetupVerification .meetup-hero-text {
    padding: 0 var(--spacing-md);
}

#View_MeetupVerification .meetup-hero-text h2 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: var(--spacing-sm) 0 var(--spacing-sm);
    line-height: 1.3;
}

#View_MeetupVerification .meetup-hero-text p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    max-width: 400px;
    margin: 0 auto var(--spacing-md);
    line-height: 1.5;
}

/* --- 79-C. Meetup Body (content below hero) --- */

#View_MeetupVerification .meetup-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
}

#View_MeetupVerification h3 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.4;
}

#View_MeetupVerification p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1.6;
}

#View_MeetupVerification p strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

#View_MeetupVerification p small {
    font-size: var(--font-size-xs);
    opacity: 0.8;
}

/* --- 79-D. Instructions & Info Sections --- */

#View_MeetupVerification .instructions {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--gradient-tint-primary);
    border-radius: var(--border-radius-card);
    border: 1px solid var(--color-border-primary-faint);
    width: min(500px, 100%);
    align-self: center;
    align-items: flex-start;
    box-sizing: border-box;
}

#View_MeetupVerification .instructions p {
    margin: var(--spacing-xs) 0;
}

#View_MeetupVerification .instructions .notice-content > :first-child {
    margin-top: 0;
}

#View_MeetupVerification .instructions .notice-content > :last-child {
    margin-bottom: 0;
}

/* --- 79-E. Seller ID Banner — prominent code display --- */

#View_MeetupVerification .seller-id-banner .seller-id-code {
    margin: var(--spacing-md) 0;
    text-align: center;
}

#View_MeetupVerification .seller-id-banner .seller-id-code .verification-code {
    font-size: 2rem;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius-md);
    background: var(--gradient-surface-branded);
    border: 2px solid var(--color-border-primary-subtle);
}

/* When/where info card in S0 */
#View_MeetupVerification .meetup-info-card {
    background: var(--gradient-card-base);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    padding: var(--spacing-md) var(--spacing-lg);
    width: min(500px, 100%);
    align-self: center;
    box-sizing: border-box;
    box-shadow: var(--shadow-card);
    margin-bottom: var(--spacing-md);
}

#View_MeetupVerification .when h3 {
    color: var(--color-text-warm);
}

#View_MeetupVerification .when .datetime,
#View_MeetupVerification .when .location {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) 0;
}

#View_MeetupVerification .when .datetime {
    font-size: var(--font-size-base);
    color: var(--color-text-warm-heading);
    font-weight: var(--font-weight-semibold);
}

#View_MeetupVerification .when .location {
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
}

/* --- 79-E. Payment Breakdown --- */

#View_MeetupVerification .payment-breakdown {
    padding: var(--spacing-md);
    background: var(--gradient-card-base);
    border-radius: var(--border-radius-card);
    border: 1px solid var(--color-border);
    margin: var(--spacing-md) 0;
}

#View_MeetupVerification .payment-breakdown p {
    margin: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
}

#View_MeetupVerification .payment-details {
    padding: var(--spacing-md);
    background: var(--gradient-card-base);
    border-radius: var(--border-radius-card);
    margin: var(--spacing-md) 0;
}

/* Payment capture states */
#View_MeetupVerification [ux-payment-capture-state="Captured"] .payment-details {
    background: var(--color-state-success-bg);
    border: 1px solid var(--color-state-success-border);
}

#View_MeetupVerification [ux-payment-capture-state="Failed"] .payment-details {
    background: var(--color-state-error-bg);
    border: 1px solid var(--color-state-error-border);
}

#View_MeetupVerification [ux-payment-capture-state="HeldForReview"] .payment-details {
    background: var(--color-state-warning-bg);
    border: 1px solid var(--color-state-warning-border);
}

/* Manual review section */
#View_MeetupVerification .manual-review {
    margin: var(--spacing-md) 0;
}

/* --- 79-F. Delivery Hints & Restart Options --- */

#View_MeetupVerification .delivery-hint {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
}

#View_MeetupVerification .delivery-hint p {
    color: var(--color-text-muted);
}

#View_MeetupVerification .restart-options {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--gradient-card-base);
    border-radius: var(--border-radius-card);
    border: 1px solid var(--color-border);
}

/* --- 79-G. Command Buttons (ctaPrimary / ctaAlt / ctaAux) --- */

#View_MeetupVerification .commands {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    margin-top: auto;
}

#View_MeetupVerification .commands .hud {
    display: none;
}

#View_MeetupVerification .commands .btn-primary {
    order: -1;
}

#View_MeetupVerification .commands .command {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    text-align: center;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    border: none;
    outline: none;
}

/* Button styles provided by component-library btn-primary/btn-secondary/btn-ghost */


/* ==========================================================================
   80. MEETUP VERIFICATION — Code Display + Input + Timers
   ========================================================================== */

/* --- 80-A. Inline Verification Code --- */

#View_MeetupVerification .verification-code {
    display: inline-block;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    letter-spacing: 0.15em;
    background: var(--color-border-primary-faint);
    padding: 2px var(--spacing-sm);
    border-radius: var(--border-radius-sm);
}

/* --- 80-B. QR Code Section --- */

#View_MeetupVerification .qr-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    margin: var(--spacing-sm) 0;
}

#View_MeetupVerification .qr-code .qr-display {
    width: 180px;
    height: 180px;
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#View_MeetupVerification .qr-code .code-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

#View_MeetupVerification .qr-code .code-text .verification-code {
    font-size: var(--font-size-lg);
}

/* --- 80-C. Code Input Field --- */

#View_MeetupVerification .code-input {
    position: relative;
    width: min(500px, 100%);
    align-self: center;
}

#View_MeetupVerification .code-input input {
    padding-right: calc(var(--spacing-xl) + var(--icon-size-lg));
    font-size: var(--font-size-lg);
    letter-spacing: 0.15em;
}

#View_MeetupVerification .code-input .input-action-icon {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast);
    --icon-size: var(--icon-size-lg);
}

#View_MeetupVerification .code-input .input-action-icon:hover {
    background-color: var(--color-primary-bg-subtle);
}

#View_MeetupVerification .buyer-enter-code .form-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#View_MeetupVerification .buyer-enter-code .code-input {
    width: min(220px, 100%);
}

/* --- 80-D. Hand-off Code (Large Display — State 99) --- */

#View_MeetupVerification .handoff-code {
    display: flex;
    justify-content: center;
    margin: var(--spacing-lg) 0;
}

#View_MeetupVerification .handoff-code .verification-code {
    font-size: 3rem;
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--border-radius-card);
    background: var(--gradient-surface-branded);
    border: 2px solid var(--color-border-primary-subtle);
    letter-spacing: 0.3em;
    min-width: 200px;
    text-align: center;
    box-shadow: var(--shadow-card);
}

/* Code expiry countdown */
#View_MeetupVerification .code-expiry {
    text-align: center;
    margin-top: var(--spacing-sm);
}

/* Status text under hand-off code */
#View_MeetupVerification .status-text {
    text-align: center;
    font-style: italic;
}

/* --- 80-E. Wait Timer + Countdown + Inspection Timer --- */

#View_MeetupVerification .wait-timer {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--gradient-tint-primary);
    border: 1px solid var(--color-border-primary-faint);
    border-radius: var(--border-radius-card);
    text-align: center;
}

#View_MeetupVerification .wait-timer p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

#View_MeetupVerification .inspection-timer p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

#View_MeetupVerification .elapsed-time {
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

#View_MeetupVerification .countdown {
    font-weight: var(--font-weight-bold);
    color: var(--color-error-dark);
}

#View_MeetupVerification .absolute-time {
    font-weight: var(--font-weight-semibold);
}

/* --- 80-F. Payment Status Boxes --- */

#View_MeetupVerification .payment-status {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    margin: var(--spacing-sm) 0;
}

#View_MeetupVerification .payment-status.status-confirmed {
    background: var(--color-state-success-bg);
    border: 1px solid var(--color-state-success-border);
}

#View_MeetupVerification .payment-status.status-waiting {
    background: var(--color-state-warning-bg);
    border: 1px solid var(--color-state-warning-border);
}


/* ==========================================================================
   81. MEETUP VERIFICATION — Timeout Banners + Rating Section
   ========================================================================== */

/* --- 81-A. Timeout Banners Container --- */

#View_MeetupVerification .timeout-banners {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* --- 81-B. Individual Timeout Banner --- */

#View_MeetupVerification .timeout-banner {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#View_MeetupVerification .timeout-banner .banner-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

#View_MeetupVerification .timeout-banner .banner-icon {
    font-size: var(--font-size-lg);
    line-height: 1;
    flex-shrink: 0;
}

#View_MeetupVerification .timeout-banner .banner-text {
    flex: 1;
    min-width: 0;
}

#View_MeetupVerification .timeout-banner .banner-text p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

#View_MeetupVerification .timeout-banner .banner-text p strong {
    font-weight: var(--font-weight-semibold);
}

#View_MeetupVerification .timeout-banner .banner-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

#View_MeetupVerification .timeout-banner .banner-actions .command {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    white-space: nowrap;
    border: none;
    transition: background-color var(--transition-fast);
}

/* Banner color variants */
#View_MeetupVerification .timeout-banner.arrival-wait {
    background: var(--color-state-warning-bg);
    border: 1px solid var(--color-state-warning-border);
}

#View_MeetupVerification .timeout-banner.idle-session {
    background: var(--color-surface-darkened);
    border: 1px solid var(--color-border);
}

#View_MeetupVerification .timeout-banner.cash-payment {
    background: var(--color-state-error-bg);
    border: 1px solid var(--color-state-error-border);
}

#View_MeetupVerification .timeout-banner.inspection-deadline {
    background: var(--gradient-tint-info);
    border: 1px solid var(--color-border);
}

#View_MeetupVerification .timeout-banner.cancellation-grace,
#View_MeetupVerification .timeout-banner.rejection-grace {
    background: var(--color-state-error-bg);
    border: 1px solid var(--color-state-error-border);
}

/* Banner action buttons - inherits btn-primary/btn-secondary from component library */

/* --- 81-C. Rating Section (S8: Completed) --- */

#View_MeetupVerification .rating {
    margin-top: var(--spacing-md);
}

#View_MeetupVerification .rating > p {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

#View_MeetupVerification .rating-options {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

#View_MeetupVerification .rating-options .rating-choice {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--gradient-card-base);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-card);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-warm-body);
    cursor: pointer;
    transition: var(--transition-card);
    box-shadow: var(--shadow-xs);
}

#View_MeetupVerification .rating-options .rating-choice:hover {
    border-color: var(--color-primary);
    background: var(--gradient-card-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

#View_MeetupVerification .rating-options .rating-choice.selected {
    border-color: var(--color-primary);
    background: var(--color-primary-lighter);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

#View_MeetupVerification .rating textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    font-size: var(--font-size-sm);
    font-family: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    resize: vertical;
    min-height: 80px;
    outline: none;
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#View_MeetupVerification .rating textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(92, 67, 244, 0.1);
}

/* --- 81-D. Responsive: Mobile Adjustments --- */

@media (max-width: 768px) {
    #View_MeetupVerification .meetup-hero-image img {
        max-width: 140px;
    }

    #View_MeetupVerification .meetup-hero-text h2 {
        font-size: var(--font-size-lg);
    }

    #View_MeetupVerification .meetup-hero {
        padding: var(--spacing-md) var(--spacing-md) 0;
    }

    #View_MeetupVerification .handoff-code .verification-code {
        font-size: 2.25rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    #View_MeetupVerification .rating-options {
        flex-direction: column;
    }

    #View_MeetupVerification .timeout-banner .banner-content {
        flex-direction: column;
        align-items: flex-start;
    }

    #View_MeetupVerification .timeout-banner .banner-actions {
        width: 100%;
    }

    #View_MeetupVerification .timeout-banner .banner-actions .command {
        flex: 1;
        text-align: center;
    }
}


/* ==========================================================================
   82. THREAD DETAIL — SVG Icon Replacements (Emoji → SVG)
   Hides emoji text via font-size:0 and renders SVG via background-image.
   Dark mode: use filter: brightness(0) invert(1) on the icon spans.
   ========================================================================== */

/* --- 82-A. Shared icon base styles --- */

.thread-detail-columns .role-indicator,
.thread-detail-columns .back-icon,
.thread-detail-columns .toggle-icon,
.thread-detail-columns .card-icon,
.thread-detail-columns .pending-icon,
.thread-detail-columns .meetup-icon,
.thread-detail-columns .map-icon,
.thread-detail-columns .expires-icon,
.thread-detail-columns .header-icon,
.thread-detail-columns .send-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    font-size: 0;
    line-height: 0;
    vertical-align: -2px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Larger icon variants */
.thread-detail-columns .card-icon,
.thread-detail-columns .pending-icon,
.thread-detail-columns .meetup-icon,
.thread-detail-columns .header-icon {
    width: 20px;
    height: 20px;
    vertical-align: -4px;
}

/* --- 82-B. Role Indicators --- */
/* Icons from /images/icon/ - add missing icons as needed */

/* 🔄 Cycle/refresh → dual-role */
.thread-detail-columns.dual-role .role-indicator {
    background-image: url("/images/icon/refresh-black.svg");
}

/* 🛒 Cart → buyer-role */
.thread-detail-columns.buyer-role .role-indicator {
    background-image: url("/images/icon/cart-black.svg");
}

/* 💰 Dollar → seller-role */
.thread-detail-columns.seller-role .role-indicator {
    background-image: url("/images/icon/dollar-black.svg");
}

/* 💬 Chat bubble → conversation */
.thread-detail-columns.conversation .role-indicator {
    background-image: url("/images/icon/message-black.svg");
}

/* --- 82-C. Navigation Icons --- */

/* ← Back arrow */
.thread-detail-view .back-icon {
    background-image: url("/images/icon/arrow-left-black.svg");
}

/* ↓ Toggle chevron */
.thread-detail-columns .toggle-icon {
    background-image: url("/images/icon/nav-arrow-down-black.svg");
}

/* --- 82-D. Card & Section Icons --- */

/* 📅 Calendar → date card */
.thread-detail-columns .date-card .card-icon {
    background-image: url("/images/icon/calendar-black.svg");
}

/* 🕐 Clock → time card */
.thread-detail-columns .time-card .card-icon {
    background-image: url("/images/icon/clock-black.svg");
}

/* 📍 Map pin → location card */
.thread-detail-columns .location-card .card-icon {
    background-image: url("/images/icon/pin-black.svg");
}

/* ⏳ Hourglass → pending */
.thread-detail-columns .pending-icon {
    background-image: url("/images/icon/hourglass-pending.svg");
}

/* 📍 Map pin → meetup title */
.thread-detail-columns .meetup-icon {
    background-image: url("/images/icon/pin-black.svg");
}

/* 🗺️ Map → map button */
.thread-detail-columns .map-icon {
    background-image: url("/images/icon/map-primary.svg");
}

/* ⏰ Alarm → expiration */
.thread-detail-columns .expires-icon {
    background-image: url("/images/icon/alarm-error.svg");
}

/* --- 82-E. Chat Icons --- */

/* 💬 Chat bubble → messaging header */
.thread-detail-columns .messaging-header .header-icon {
    background-image: url("/images/icon/message-black.svg");
}

/* ➤ Send arrow */
.thread-detail-columns .send-icon {
    background-image: url("/images/icon/send-white.svg");
}

/* ==========================================================================
   THREAD DETAIL + MEETUP VERIFICATION — Page-Specific Dark Mode
   --------------------------------------------------------------------------
   Dark mode overrides for thread detail and meetup verification layout.
   ========================================================================== */

/* --- Thread Detail: Page Container --- */
[data-theme="dark"] #Content_ThreadDetail.thread-detail-view,
[data-theme="dark-high-contrast"] #Content_ThreadDetail.thread-detail-view {
    background: linear-gradient(
        180deg,
        rgba(92, 67, 244, 0.04) 0%,
        rgba(92, 67, 244, 0.015) 40%,
        rgba(0, 0, 0, 0) 100%
    );
}

/* --- Thread Detail: Primary Header --- */
[data-theme="dark"] #Content_ThreadDetail .threadDetail > .primary.thread-detail-header,
[data-theme="dark-high-contrast"] #Content_ThreadDetail .threadDetail > .primary.thread-detail-header {
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.95) 0%,
        rgba(92, 67, 244, 0.8) 50%,
        rgba(120, 100, 255, 0.85) 100%
    );
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.4),
        0 1px 3px rgba(92, 67, 244, 0.2);
}

/* --- Thread Detail: Card Base Styling --- */
[data-theme="dark"] #Content_ThreadDetail .order-card,
[data-theme="dark"] #Content_ThreadDetail .thread-meetup-card,
[data-theme="dark"] #Content_ThreadDetail .thread-action-panel,
[data-theme="dark-high-contrast"] #Content_ThreadDetail .order-card,
[data-theme="dark-high-contrast"] #Content_ThreadDetail .thread-meetup-card,
[data-theme="dark-high-contrast"] #Content_ThreadDetail .thread-action-panel {
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Card header gradients */
[data-theme="dark"] #Content_ThreadDetail .order-card .order-summary,
[data-theme="dark"] #Content_ThreadDetail .thread-meetup-card .meetup-title,
[data-theme="dark-high-contrast"] #Content_ThreadDetail .order-card .order-summary,
[data-theme="dark-high-contrast"] #Content_ThreadDetail .thread-meetup-card .meetup-title {
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.15) 0%,
        rgba(92, 67, 244, 0.08) 100%
    );
    border-bottom-color: var(--color-primary-border-soft);
}

/* Order metric cells */
[data-theme="dark"] #Content_ThreadDetail .metric,
[data-theme="dark-high-contrast"] #Content_ThreadDetail .metric {
    background: var(--color-surface);
    border-color: var(--color-primary-border-soft);
}

/* --- Thread Detail: Time/Date/Location Cards --- */
[data-theme="dark"] #Content_ThreadDetail .date-card,
[data-theme="dark"] #Content_ThreadDetail .time-card,
[data-theme="dark"] #Content_ThreadDetail .location-card,
[data-theme="dark-high-contrast"] #Content_ThreadDetail .date-card,
[data-theme="dark-high-contrast"] #Content_ThreadDetail .time-card,
[data-theme="dark-high-contrast"] #Content_ThreadDetail .location-card {
    background: var(--color-primary-lighter);
    border-color: var(--color-primary-border-soft);
}

/* Pending state pill - tokens from vars.css auto-adapt to dark mode */

/* Address display */
[data-theme="dark"] #Content_ThreadDetail .meetup-address,
[data-theme="dark-high-contrast"] #Content_ThreadDetail .meetup-address {
    background: rgba(255, 255, 255, 0.04);
}

/* --- Thread Detail: Action Panel Targets --- */
[data-theme="dark"] #Content_ThreadDetail .offer-target,
[data-theme="dark"] #Content_ThreadDetail .time-target,
[data-theme="dark-high-contrast"] #Content_ThreadDetail .offer-target,
[data-theme="dark-high-contrast"] #Content_ThreadDetail .time-target {
    background: rgba(92, 67, 244, 0.1);
    border-color: var(--color-primary-border-soft);
}

[data-theme="dark"] #Content_ThreadDetail .offer-target .value,
[data-theme="dark"] #Content_ThreadDetail .time-target .value,
[data-theme="dark-high-contrast"] #Content_ThreadDetail .offer-target .value,
[data-theme="dark-high-contrast"] #Content_ThreadDetail .time-target .value {
    color: rgb(167, 139, 250);
}

/* --- Thread Detail: Chat Panel --- */
[data-theme="dark"] #Content_ThreadDetail .paneGroup.messaging.thread-chat-panel,
[data-theme="dark-high-contrast"] #Content_ThreadDetail .paneGroup.messaging.thread-chat-panel {
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Messaging header */
[data-theme="dark"] #Content_ThreadDetail .messaging-header,
[data-theme="dark-high-contrast"] #Content_ThreadDetail .messaging-header {
    background: linear-gradient(
        135deg,
        rgba(92, 67, 244, 0.15) 0%,
        rgba(92, 67, 244, 0.08) 100%
    );
    border-bottom-color: var(--color-primary-border-soft);
}

/* Chat scroll container */
[data-theme="dark"] #Content_ThreadDetail .pane.chat.chat-container,
[data-theme="dark-high-contrast"] #Content_ThreadDetail .pane.chat.chat-container {
    background: linear-gradient(
        180deg,
        rgba(92, 67, 244, 0.05) 0%,
        var(--color-surface) 100%
    );
}

/* Message form */
[data-theme="dark"] #Content_ThreadDetail .pane.form.messaging.chat-form,
[data-theme="dark-high-contrast"] #Content_ThreadDetail .pane.form.messaging.chat-form {
    background: var(--color-primary-lighter);
    border-top-color: var(--color-primary-border-soft);
}


/* ==========================================================================
   Sections 79-81: MEETUP VERIFICATION Dark Mode Overrides
   ========================================================================== */

/* --- 79: State Container + Meetup Hero + Commands --- */

[data-theme="dark"] #View_MeetupVerification .meetup-hero-text h2,
[data-theme="dark-high-contrast"] #View_MeetupVerification .meetup-hero-text h2 {
    -webkit-text-fill-color: unset;
    background: none;
    color: var(--color-text);
}

[data-theme="dark"] #View_MeetupVerification .instructions,
[data-theme="dark-high-contrast"] #View_MeetupVerification .instructions {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--color-border);
}

[data-theme="dark"] #View_MeetupVerification .payment-breakdown,
[data-theme="dark-high-contrast"] #View_MeetupVerification .payment-breakdown {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--color-border);
}

[data-theme="dark"] #View_MeetupVerification .payment-details,
[data-theme="dark-high-contrast"] #View_MeetupVerification .payment-details {
    background: rgba(255, 255, 255, 0.04);
}


[data-theme="dark"] #View_MeetupVerification .restart-options,
[data-theme="dark-high-contrast"] #View_MeetupVerification .restart-options {
    background: rgba(255, 255, 255, 0.04);
}

/* CTA buttons */
[data-theme="dark"] #View_MeetupVerification .commands .command.ctaAlt,
[data-theme="dark-high-contrast"] #View_MeetupVerification .commands .command.ctaAlt {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* --- 80: Code Display + Input + Timers --- */

[data-theme="dark"] #View_MeetupVerification .verification-code,
[data-theme="dark-high-contrast"] #View_MeetupVerification .verification-code {
    background: rgba(92, 67, 244, 0.15);
    color: rgb(167, 139, 250);
}

[data-theme="dark"] #View_MeetupVerification .handoff-code .verification-code,
[data-theme="dark-high-contrast"] #View_MeetupVerification .handoff-code .verification-code {
    background: rgba(92, 67, 244, 0.18);
}

[data-theme="dark"] #View_MeetupVerification .qr-code .qr-display,
[data-theme="dark-high-contrast"] #View_MeetupVerification .qr-code .qr-display {
    background: var(--color-white);
    border-color: var(--color-border);
}

[data-theme="dark"] #View_MeetupVerification .code-input input,
[data-theme="dark-high-contrast"] #View_MeetupVerification .code-input input {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] #View_MeetupVerification .code-input input:focus,
[data-theme="dark-high-contrast"] #View_MeetupVerification .code-input input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(92, 67, 244, 0.2);
}

[data-theme="dark"] #View_MeetupVerification .wait-timer,
[data-theme="dark-high-contrast"] #View_MeetupVerification .wait-timer {
    background: var(--color-primary-lighter);
}

[data-theme="dark"] #View_MeetupVerification .countdown,
[data-theme="dark-high-contrast"] #View_MeetupVerification .countdown {
    color: rgb(248, 113, 113);
}

[data-theme="dark"] #View_MeetupVerification .elapsed-time,
[data-theme="dark-high-contrast"] #View_MeetupVerification .elapsed-time {
    color: rgb(167, 139, 250);
}

/* Payment status */
[data-theme="dark"] #View_MeetupVerification .payment-status.status-confirmed,
[data-theme="dark-high-contrast"] #View_MeetupVerification .payment-status.status-confirmed {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] #View_MeetupVerification .payment-status.status-waiting,
[data-theme="dark-high-contrast"] #View_MeetupVerification .payment-status.status-waiting {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
}

/* --- 81: Timeout Banners + Rating --- */

[data-theme="dark"] #View_MeetupVerification .timeout-banner.arrival-wait,
[data-theme="dark-high-contrast"] #View_MeetupVerification .timeout-banner.arrival-wait {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.25);
}

[data-theme="dark"] #View_MeetupVerification .timeout-banner.idle-session,
[data-theme="dark-high-contrast"] #View_MeetupVerification .timeout-banner.idle-session {
    background: rgba(107, 114, 128, 0.15);
    border-color: rgba(107, 114, 128, 0.25);
}

[data-theme="dark"] #View_MeetupVerification .timeout-banner.cash-payment,
[data-theme="dark-high-contrast"] #View_MeetupVerification .timeout-banner.cash-payment {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.25);
}

[data-theme="dark"] #View_MeetupVerification .timeout-banner.inspection-deadline,
[data-theme="dark-high-contrast"] #View_MeetupVerification .timeout-banner.inspection-deadline {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.25);
}

[data-theme="dark"] #View_MeetupVerification .timeout-banner.cancellation-grace,
[data-theme="dark-high-contrast"] #View_MeetupVerification .timeout-banner.cancellation-grace,
[data-theme="dark"] #View_MeetupVerification .timeout-banner.rejection-grace,
[data-theme="dark-high-contrast"] #View_MeetupVerification .timeout-banner.rejection-grace {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] #View_MeetupVerification .timeout-banner .banner-actions .ctaAlt,
[data-theme="dark-high-contrast"] #View_MeetupVerification .timeout-banner .banner-actions .ctaAlt {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text);
}

/* Rating */
[data-theme="dark"] #View_MeetupVerification .rating-options .rating-choice,
[data-theme="dark-high-contrast"] #View_MeetupVerification .rating-options .rating-choice {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--color-border);
}

[data-theme="dark"] #View_MeetupVerification .rating-options .rating-choice:hover,
[data-theme="dark-high-contrast"] #View_MeetupVerification .rating-options .rating-choice:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-lighter);
}

[data-theme="dark"] #View_MeetupVerification .rating-options .rating-choice.selected,
[data-theme="dark-high-contrast"] #View_MeetupVerification .rating-options .rating-choice.selected {
    background: rgba(92, 67, 244, 0.15);
}

[data-theme="dark"] #View_MeetupVerification .rating textarea,
[data-theme="dark-high-contrast"] #View_MeetupVerification .rating textarea {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] #View_MeetupVerification .rating textarea:focus,
[data-theme="dark-high-contrast"] #View_MeetupVerification .rating textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(92, 67, 244, 0.2);
}


/* ==========================================================================
   Section 82: THREAD DETAIL SVG Icons — Dark Mode
   Invert black/gray stroked icons for visibility on dark backgrounds.
   ========================================================================== */

[data-theme="dark"] .thread-detail-columns .role-indicator,
[data-theme="dark-high-contrast"] .thread-detail-columns .role-indicator,
[data-theme="dark"] .thread-detail-view .back-icon,
[data-theme="dark-high-contrast"] .thread-detail-view .back-icon,
[data-theme="dark"] .thread-detail-columns .toggle-icon,
[data-theme="dark-high-contrast"] .thread-detail-columns .toggle-icon,
[data-theme="dark"] .thread-detail-columns .card-icon,
[data-theme="dark-high-contrast"] .thread-detail-columns .card-icon,
[data-theme="dark"] .thread-detail-columns .meetup-icon,
[data-theme="dark-high-contrast"] .thread-detail-columns .meetup-icon,
[data-theme="dark"] .thread-detail-columns .messaging-header .header-icon,
[data-theme="dark-high-contrast"] .thread-detail-columns .messaging-header .header-icon {
    filter: brightness(0) invert(1);
}

/* Pending icon uses amber stroke — lighten for dark mode */
[data-theme="dark"] .thread-detail-columns .pending-icon,
[data-theme="dark-high-contrast"] .thread-detail-columns .pending-icon {
    filter: brightness(1.4);
}

/* Expires icon uses red stroke — lighten for dark mode */
[data-theme="dark"] .thread-detail-columns .expires-icon,
[data-theme="dark-high-contrast"] .thread-detail-columns .expires-icon {
    filter: brightness(1.4);
}

/* Map icon uses primary stroke — no change needed */
/* Send icon uses white stroke — no change needed */


/* ==========================================================================
   AUTH PAGES (Login, Join) - Page-Specific Overrides
   ========================================================================== */

/* Hide default #Hero on auth pages */
[page-name="Login"] #Hero,
[page-name="Join"] #Hero {
    display: none;
}

[page-name="Login"] #Content,
[page-name="Join"] #Content {
    display: block !important;
    float: none !important;
    padding: 0;
    min-height: 0;
}

/* Auth page header/logo - override legacy styles */
[page-name="Login"] #Header,
[page-name="Join"] #Header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-index-header, 100);
    height: auto;
    background: transparent;
    pointer-events: none;
}

[page-name="Login"] .app-header-primary,
[page-name="Join"] .app-header-primary {
    box-shadow: initial;
}

[page-name="Login"] #Header .container,
[page-name="Join"] #Header .container {
    padding: var(--spacing-md) var(--spacing-lg);
    pointer-events: auto;
    max-width:initial;
}

[page-name="Login"] #Header #Logo,
[page-name="Join"] #Header #Logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
}

[page-name="Login"] #Header #Logo img,
[page-name="Join"] #Header #Logo img {
    width: auto !important;
    height: 32px !important;
    content: url("/images/logo-white@2x.png") !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* Auth page footer - fixed at bottom */
[page-name="Login"] #Ftr_Main,
[page-name="Join"] #Ftr_Main {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-primary-darker, #231969);
    color: rgba(255, 255, 255, 0.8);
    padding: var(--spacing-sm) var(--spacing-lg);
    text-align: center;
    z-index: 50;
}

[page-name="Login"] #Ftr_Main #Copyright,
[page-name="Join"] #Ftr_Main #Copyright {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-size-sm);
    margin: 0;
}

[page-name="Login"] #Ftr_Main #Copyright a,
[page-name="Join"] #Ftr_Main #Copyright a {
    color: var(--color-secondary);
}

/* Auth page application wrapper - full viewport */
[page-name="Login"] #App_Main,
[page-name="Join"] #App_Main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

[page-name="Login"] #App_Content,
[page-name="Join"] #App_Content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

[page-name="Login"] #Cnt_Main,
[page-name="Join"] #Cnt_Main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
}

[page-name="Login"] #Mod_Content,
[page-name="Join"] #Mod_Content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

[page-name="Login"] #Cnt_Content,
[page-name="Join"] #Cnt_Content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
}

[page-name="Login"] #Content,
[page-name="Join"] #Content {
    flex: 1;
    display: flex !important;
    flex-direction: column;
}

/* Mobile: Header scrolls with page (not fixed) */
@media (max-width: 768px) {
    [page-name="Login"] #Header,
    [page-name="Join"] #Header {
        position: relative; /* Normal flow - scrolls with page */
        background: transparent;
        z-index: 10;
    }
}

/* Mobile: Keep logo at readable size */
@media (max-width: 480px) {
    [page-name="Login"] #Header #Logo img,
    [page-name="Join"] #Header #Logo img {
        height: 32px !important;
        width: auto !important;
    }
}

/* Auth pages: Ignore scrolledBack sticky header behavior entirely */
[page-name="Login"].scrolledBack #Header,
[page-name="Join"].scrolledBack #Header {
    position: fixed; /* Keep desktop behavior but... */
    background: transparent !important;
    box-shadow: none !important;
    animation: none !important;
}

@media (max-width: 768px) {
    /* On mobile, scrolledBack should NOT make header fixed */
    [page-name="Login"].scrolledBack #Header,
    [page-name="Join"].scrolledBack #Header {
        position: relative !important;
        background: transparent !important;
    }
}

/* Join Page Content Wrapper - wider layout for value props */
[page-name="Join"] .join-content {
    width: 100%;
    max-width: 640px; /* Wider than auth forms to fit 3 value props */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Auth pages: auth-card alignment fix - content starts from top, not centered */
[page-name="Login"] .auth-card,
[page-name="Join"] .auth-card {
    justify-content: safe center;
    align-items: center;
    padding-top: var(--spacing-2xl);
}

@media (max-width: 480px) {
    [page-name="Join"] .join-content {
        gap: var(--spacing-md);
        max-width: 100%;
    }

    [page-name="Login"] .auth-card,
    [page-name="Join"] .auth-card {
        padding-top: var(--spacing-lg);
    }
}

/* Join Page: Wider right side for value props */
@media (min-width: 769px) {
    [page-name="Join"] .auth-split .hero-panel {
        flex: 0 0 40%; /* Narrower hero */
    }

    [page-name="Join"] .auth-card {
        flex: 0 0 60%; /* Wider content */
    }
}

/* --------------------------------------------------------------------------
   LEGACY AUTH STYLES - Login page interactive patterns
   These support the waitlist wizard and can be removed once migration is complete.
   -------------------------------------------------------------------------- */

/* Legacy: Referral indicator */
[page-name="Login"] .referral-indicator {
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(251, 146, 60, 0.1);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-lg);
}

[page-name="Login"] .referral-indicator .referral-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--gradient-badge-referral);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--border-radius-full);
}

[page-name="Login"] .referral-indicator .referral-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Waitlist explainer */
[page-name="Login"] .waitlist-explainer {
    background: var(--color-surface-secondary);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

[page-name="Login"] .waitlist-explainer .headline {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

[page-name="Login"] .waitlist-explainer .detail {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Location context text */
[page-name="Login"] .location-context {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-align: center;
    margin-top: var(--spacing-sm);
}

/* Waitlist status card - celebration styling */
[page-name="Login"] .waitlist-status-card.celebration-card {
    background: var(--color-celebration-surface);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-lg);
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

[page-name="Login"] .waitlist-status-card.celebration-card-glow {
    box-shadow: var(--shadow-celebration-glow);
}

/* Position display */
[page-name="Login"] .position-display.waitlist-position {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

[page-name="Login"] .position-label.celebration-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

[page-name="Login"] .position-number.waitlist-position-number {
    font-size: clamp(3rem, 10vw, 4.5rem);
    font-weight: var(--font-weight-extrabold);
    line-height: 1;
    background: var(--gradient-celebration-number);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[page-name="Login"] .position-total.waitlist-position-context {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* Region name badge */
[page-name="Login"] .region-name {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-primary-bg-subtle);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius-full);
    margin-top: var(--spacing-sm);
}

/* Progress message */
[page-name="Login"] .progress-message {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-sm);
}

/* Referral section */
[page-name="Login"] .referral-section.celebration-actions {
    border-top: 1px solid var(--color-border-default);
    padding-top: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

[page-name="Login"] .referral-header {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    text-align: center;
    margin: 0 0 var(--spacing-xs) 0;
}

[page-name="Login"] .referral-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0 0 var(--spacing-md) 0;
}

/* Referral link container */
[page-name="Login"] .referral-link-container.celebration-share {
    display: flex;
    gap: var(--spacing-sm);
    padding: 0;
    background: transparent;
}

[page-name="Login"] .referral-link-input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-surface-secondary);
    border: 1px solid var(--color-border-default);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

[page-name="Login"] .referral-link-container .cmdCopy {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-primary);
    color: white;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
}

[page-name="Login"] .referral-link-container .cmdCopy:hover {
    background: var(--color-primary-dark);
}

/* Referral stats */
[page-name="Login"] .referral-stats {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
    margin-top: var(--spacing-md);
}

/* Success icon */
[page-name="Login"] .icon.success.milestone-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-success);
    border-radius: var(--border-radius-full);
    color: white;
    font-size: var(--font-size-2xl);
}

[page-name="Login"] .icon.success.milestone-icon::before {
    content: '✓';
}

/* Waitlist icon */
[page-name="Login"] .icon.waitlist {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-hero);
    border-radius: var(--border-radius-full);
    color: white;
    font-size: var(--font-size-2xl);
}

[page-name="Login"] .icon.waitlist::before {
    content: '🎟️';
}

/* Waitlist illustration */
[page-name="Login"] .waitlist-illustration {
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

[page-name="Login"] .waitlist-illustration img {
    max-width: 200px;
    border-radius: var(--border-radius-lg);
}

[page-name="Login"] .waitlist-illustration .placeholder {
    font-size: 4rem;
}

/* Hide the default workspace icon and bottom commands (but not end/failure state icons) */
[page-name="Login"] .interactive .interactiveContent.start .workspace > .icon:first-child:empty {
    display: none;
}

[page-name="Login"] .interactive > .commands {
    display: none;
}

/* HUD messages */
[page-name="Login"] .interactive .hud {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-error-bg);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-error);
    text-align: center;
}

[page-name="Login"] .interactive .hud.message {
    background: var(--color-info-bg);
    color: var(--color-info);
}

/* Terms acceptance checkbox */
[page-name="Login"] .terms-acceptance {
    margin-top: var(--spacing-md);
}

[page-name="Login"] .terms-acceptance label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

[page-name="Login"] .terms-acceptance a {
    color: var(--color-primary);
}

/* Mobile responsive */
@media (max-width: 480px) {
    [page-name="Login"] #Content,
    [page-name="Join"] #Content {
        padding: var(--spacing-md);
    }

    [page-name="Login"] .interactive[ux-mode="unified"],
    [page-name="Join"] .interactive {
        padding: var(--spacing-lg);
        border-radius: var(--border-radius-lg);
    }

    [page-name="Login"] .interactive .title {
        font-size: var(--font-size-xl);
    }

    [page-name="Login"] .position-number.waitlist-position-number {
        font-size: clamp(2.5rem, 12vw, 3.5rem);
    }
}

/* ==========================================================================
   SETTINGS PANEL ICONS
   --------------------------------------------------------------------------
   Domain-level icon definitions for settings panels.
   Icons use SVGs from /images/icon/ directory.
   ========================================================================== */

/* Base icon styling for settings panels */
.settings-board .icon,
.settings-card .icon,
.callout .icon {
    display: inline-block;
    width: var(--icon-size-md, 20px);
    height: var(--icon-size-md, 20px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Smaller icons for inline key/value displays */
.settings-key .icon,
.settings-card-title .icon {
    width: var(--icon-size-sm, 16px);
    height: var(--icon-size-sm, 16px);
    margin-right: var(--spacing-xs, 4px);
}

/* Step icons in onboarding how-it-works sections */
.step-icon {
    width: var(--icon-size-lg, 24px);
    height: var(--icon-size-lg, 24px);
}

.value-props-compact .value-prop-discover .value-icon {
    background-image: url(/images/icon/search-engine-black.svg);
    background-size: var(--icon-size-lg) var(--icon-size-lg) !important;
}

.value-props-compact .value-prop-fast .value-icon {
    background-image: url(/images/icon/action-black.svg);
    background-size: var(--icon-size-lg) var(--icon-size-lg) !important;
}

.value-props-compact .value-prop-safety .value-icon {
    background-image: url(/images/icon/shield-check-black.svg);
    background-size: var(--icon-size-lg) var(--icon-size-lg) !important;
}

.value-prop-money .value-icon {
    background-image: url(/images/features/value-money.jpg);
}

.value-prop-tools .value-icon {
    background-image: url(/images/features/value-tools.jpg);
}

.value-prop-sustainable .value-icon {
    background-image: url(/images/features/value-sustainable.jpg);
}

.value-prop-everyone .value-icon {
    background-image: url(/images/features/value-everyone.jpg);
}

/* Individual icon definitions - using -black for neutral settings UI */
.callout-icon-launch {
    background-size: cover !important;
    background-image: url(/images/features/value-fast.jpg) !important;
}

/* Join page: value prop cards as centered cards (matching homepage style) */
.join-value-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

@media (max-width: 640px) {
    .join-value-cards {
        grid-template-columns: 1fr;
    }
}

.join-content .join-value-cards .value-prop,
.join-content > .value-prop {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-md);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-card);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    gap: 0;
}

.join-content .join-value-cards .value-prop:hover,
.join-content > .value-prop:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    border-color: rgba(92, 67, 244, 0.2);
}

.join-content .join-value-cards .value-icon,
.join-content > .value-prop .value-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    margin: 0 auto var(--spacing-sm) auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.join-content .join-value-cards .value-prop h3,
.join-content > .value-prop h3 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--spacing-xs) 0;
}

.join-content .join-value-cards .value-prop p,
.join-content > .value-prop p {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    margin: 0;
}

/* Join page: card-specific illustrations */
.join-content .value-prop-discover .value-icon { background-image: url(/images/features/value-money.jpg); }
.join-content .value-prop-fast .value-icon { background-image: url(/images/features/value-fast.jpg); }
.join-content .value-prop-safety .value-icon { background-image: url(/images/features/value-safety.jpg); }
.join-content .value-prop-launch .value-icon { background-image: url(/images/features/value-everyone.jpg); }
.join-content .value-prop-referral .value-icon { background-image: url(/images/features/value-sustainable.jpg); }

/* Referral card gets a warm highlight border */
.join-content .value-prop-referral {
    border-color: rgba(251, 146, 60, 0.2);
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.03) 0%, var(--color-background) 100%);
}

/* Launch card is always full width below the grid */
.join-content > .value-prop-launch {
    margin-bottom: var(--spacing-md);
}
.icon-credit-card { background-image: url(/images/icon/credit-card-stack-black.svg); }
.icon-cash { background-image: url(/images/icon/cash-stack-black.svg); }
.icon-warning { background-image: url(/images/icon/warning-hexagon-black.svg); }
.icon-bank { background-image: url(/images/icon/bank-black.svg); }
.icon-store { background-image: url(/images/icon/store-black.svg); }
.icon-home { background-image: url(/images/icon/home-black.svg); }
.icon-settings { background-image: url(/images/icon/settings-black.svg); }
.icon-approval { background-image: url(/images/icon/shield-check-black.svg); }
.icon-lightbulb { background-image: url(/images/icon/lightbulb-black.svg); }
.icon-calendar { background-image: url(/images/icon/calendar-black.svg); }
.icon-money { background-image: url(/images/icon/dollar-black.svg); }

/* Profile panel icons */
.icon-email { background-image: url(/images/icon/email-black.svg); }
.icon-phone { background-image: url(/images/icon/phone-black.svg); }
.icon-at-sign { background-image: url(/images/icon/at-sign-black.svg); }
.icon-user { background-image: url(/images/icon/user-black.svg); }
.icon-id-card { background-image: url(/images/icon/id-card-black.svg); }
.icon-map-pin { background-image: url(/images/icon/map-pin-black.svg); }
.icon-edit { background-image: url(/images/icon/edit-black.svg); }
.icon-location { background-image: url(/images/icon/location-black.svg); }
.icon-camera { background-image: url(/images/icon/camera-black.svg); }
.icon-image { background-image: url(/images/icon/image-black.svg); }
.icon-trash { background-image: url(/images/icon/trash-black.svg); }

/* Privacy panel icons */
.icon-eye { background-image: url(/images/icon/eye-black.svg); }
.icon-search { background-image: url(/images/icon/search-black.svg); }
.icon-message { background-image: url(/images/icon/message-black.svg); }
.icon-bell { background-image: url(/images/icon/bell-black.svg); }
.icon-chart { background-image: url(/images/icon/chart-black.svg); }
.icon-shield { background-image: url(/images/icon/shield-black.svg); }

/* Subscription panel icons */
.icon-star { background-image: url(/images/icon/star-black.svg); }
.icon-receipt { background-image: url(/images/icon/receipt-black.svg); }


/* ==========================================================================
   DIALOG FRAMEWORK INTEGRATION
   ==========================================================================
   Application-level CSS for dialog state management and positioning.
   Moved from component-library.css Section 56D.

   The component library defines standalone visual styles for:
   - .dialog-drawer, .dialog-header, .dialog-body, .dialog-footer
   - .dialog-simple, .dialog-title, .dialog-close, .dialog-back

   This section handles framework integration:
   - #Interactions container and view visibility
   - ux-* attribute state management
   - Frozen overlays and modal backdrops
   - Drawer positioning (fixed, right-edge)
   ========================================================================== */


/* --------------------------------------------------------------------------
   FROZEN OVERLAYS
   --------------------------------------------------------------------------
   Full-screen backdrop overlays controlled by the framework.
   #Frozen_Dialog appears behind dialogs, #Frozen_Request behind AJAX calls.
   -------------------------------------------------------------------------- */

#Frozen_Request {
    background-color: rgba(0, 0, 0, 0.75);
    opacity: 0.75;
}

#Frozen_Dialog {
    z-index: var(--z-index-modal-backdrop, 201);
    background-color: rgba(0, 0, 0, 0.8);
    background: linear-gradient(var(--color-dialog-backdrop), var(--color-dialog-backdrop-dark)) no-repeat;
    opacity: 0.9;
    backdrop-filter: blur(2px);
}

#Frozen_Header,
#Frozen_Navigation {
    z-index: var(--z-index-modal-backdrop, 201);
    background-color: rgba(0, 0, 0, 0.8);
}

body[frozen] {
    overflow: hidden;
}

body[frozen="Header"] {
    overflow: auto;
}

body[frozen="Header"] #Header {
    z-index: var(--z-index-modal, 10000);
}


/* --------------------------------------------------------------------------
   VIEW ACTIVATION & VISIBILITY
   --------------------------------------------------------------------------
   All views inside #Interactions are hidden by default.
   The framework sets [ux-view-active] when a view should be shown.
   -------------------------------------------------------------------------- */

#Interactions .view,
#Interactions > .dialog {
    display: none;
    padding: 0;
}

#Interactions .view[ux-view-active] {
    display: flex;
    flex-direction: column;
}

#Interactions .view[ux-view-active][ux-inside],
#Interactions .view[ux-view-active][ux-modal] {
    display: flex;
    flex-direction: column;
}


/* --------------------------------------------------------------------------
   MODAL BACKDROP
   --------------------------------------------------------------------------
   [ux-modal] views are full-screen overlays with backdrop blur.
   -------------------------------------------------------------------------- */

#Interactions .view[ux-modal] {
    background-image: linear-gradient(var(--color-dialog-backdrop), var(--color-dialog-backdrop-dark));
    backdrop-filter: blur(2px);
    height: 100dvh;
    width: 100vw;
    position: fixed;
    z-index: var(--z-index-dropdown);
}

/* Floating incoming message banner — overlays any ux-modal dialog when chat arrives */
.incoming-message-banner {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: calc(var(--z-index-modal) + 10);
    background: var(--color-primary);
    color: #fff;
    padding: 10px 20px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    font-size: 0.875rem;
    animation: incomingBannerSlide 0.3s ease-out;
    max-width: calc(100vw - 32px);
}
.incoming-message-banner:hover {
    filter: brightness(1.1);
}
.incoming-message-banner .icon-svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
@keyframes incomingBannerSlide {
    from { transform: translateX(-50%) translateY(-100%); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* --- Meetup Note in Verification View --- */
.meetup-note {
    margin-top: var(--spacing-sm);
    width: 100%;
}
.meetup-note .notice-banner {
    align-items: flex-start;
    padding: var(--spacing-md) var(--spacing-lg);
}
.meetup-note .meetup-note-label {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-heading);
}
.meetup-note .meetup-note-text {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-warm-body);
    white-space: pre-wrap;
}
.meetup-note .meetup-note-action {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-sm);
}
.meetup-note .meetup-note-action a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.meetup-note .meetup-note-action a:hover {
    color: var(--color-primary-hover);
}

#Interactions .view[ux-modal] .header {
    background-color: transparent;
    max-width: 100%;
    text-align: center;
}

#Interactions .view[ux-modal] .content {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

#Interactions .view[ux-modal] .header h2,
#Interactions .view[ux-modal] .content h2,
#Interactions .view[ux-modal] .commands {
    align-items: center;
    justify-content: center;
    width: 100%;
}

body[ux-modal] #Interactions {
    background-image: linear-gradient(var(--color-dialog-backdrop-blur), var(--color-dialog-backdrop-secondary));
    backdrop-filter: blur(1px);
    height: 100dvh;
    width: 100vw;
    max-width: 100%;
    position: fixed;
    top: 0;
    left: auto;
    right: 0;
    padding: var(--spacing-lg);
    z-index: var(--z-index-modal-backdrop);
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.12);
    display: flex;
    justify-content: center;
    flex-basis: 100%;
    flex-direction: row;
}


/* --------------------------------------------------------------------------
   CHANGE FORM (Drawer) — Right-edge slide-in panels
   --------------------------------------------------------------------------
   [ux-change-form] views are drawers fixed to the right edge.
   -------------------------------------------------------------------------- */

#Interactions .view[ux-change-form] {
    background-image: linear-gradient(125deg, rgba(255, 255, 255, 1) 30%, rgba(239, 239, 239, 1) 95%, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(2px);
    height: 100dvh;
    width: var(--dialog-change-form-width);
    max-width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    padding: 0;
    z-index: var(--z-index-modal-backdrop);
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.12);
    max-height: 100dvh;
    flex-direction: column;
    border: 0;
    background-color: transparent;
}

/* Mobile: bottom-sheet style with backdrop peek */
@media (max-width: 520px) {
    #Interactions .view[ux-change-form]:not(.dialog-menu):not(.filter-dialog) {
        top: auto;
        bottom: 0;
        height: calc(100dvh - 48px);
        max-height: calc(100dvh - 48px);
        border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
        box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.15);
    }
    /* Subdialogs step down so parent handle peeks through */
    #Interactions .view[ux-change-form] > .dialogs > .view {
        max-height: calc(100dvh - 96px);
        height: calc(100dvh - 96px);
        backdrop-filter: none;
        background-color: var(--color-background);
        background-image: none;
    }
    #Interactions .view[ux-change-form] > .dialogs > .view > .dialogs > .view {
        max-height: calc(100dvh - 144px);
        height: calc(100dvh - 144px);
    }
    /* Freeze parent scroll when subdialog is active */
    #Interactions .view[ux-change-form][ux-dialog] > .content {
        overflow: hidden;
    }
    #Interactions .view .dialogs .dialog[ux-dialog] {
        overflow: hidden;
    }
}

#Interactions .view[ux-change-form] > .content {
    flex-direction: column;
    flex-grow: 1;
    position: static;
    box-sizing: border-box;
    border: 0;
    background-image: none;
    flex: 1;
    height: auto;
    top: 0;
    left: 0;
    display: flex;
    min-height: 1px;
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#Interactions .view[ux-change-form] .content .board > * {
    margin-left: var(--spacing-lg);
    margin-right: var(--spacing-lg);
    max-width:calc(100% - var(--spacing-lg) - var(--spacing-lg));
}
#Interactions .view[ux-change-form] .content .board > .dialog-footer {
    margin-left: 0; margin-right: 0;
}

#Interactions .view[ux-change-form] .content .board {
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
    left: 0;
    overflow: visible;
    box-sizing: border-box;
    padding: var(--spacing-lg) 0;
    padding-bottom: var(--spacing-sm);
    flex-direction: column;
    flex: 1;
    max-height: initial;
    min-height: initial;
    align-items: flex-start;
    gap: var(--spacing-md);
    display: flex !important;
}

body #Interactions .view[ux-inform] {
    left: auto;
    right: auto;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    height: calc(100vh - 40px);
    background-color: transparent;
    background-image: linear-gradient(125deg, rgba(61, 84, 245, 0.95) 10%, rgba(0, 0, 0, 0.7));
    border-radius: var(--border-radius-md);
}


/* --------------------------------------------------------------------------
   WORKSPACE DIALOG — Wider drawer for complex content
   -------------------------------------------------------------------------- */

#Interactions .view[ux-workspace-dialog] {
    width: var(--dialog-workspace-width);
    max-width: max(-120px + 100vw, 320px);
    height: 100dvh;
    box-sizing: border-box;
}
@media only screen and (max-width: 600px) {
    #Interactions .view[ux-workspace-dialog] {
        max-width: 100%;
    }
}

#Interactions .view[ux-workspace-dialog] > .content {
        display: flex;
        flex-direction: column;
        max-width: 100%;
        width: 100%;
        height: auto;
        flex-grow: 1;
        box-sizing: border-box;
    }

        #Interactions .view[ux-workspace-dialog] > .content > .pane {
            display: none;
            flex-direction: column;
            max-width: 100%;
            width: 100%;
            box-sizing: border-box;
            height: auto;
            flex-grow: 1;
        }

        #Interactions .view[ux-workspace-dialog] > .content .pane.scrollable {
            padding-right: var(--spacing-sm);
            overflow-y: scroll;
            box-sizing: border-box;
            height: auto;
            max-height: 100dvh;
            padding: var(--spacing-sm) 0;
        }


    /* --------------------------------------------------------------------------
   TITLE BAR
   -------------------------------------------------------------------------- */

    #Interactions .view[ux-change-form] > .title {
        font-weight: var(--font-weight-medium);
        font-size: var(--spacing-md);
        line-height: 30px;
        width: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-xxl);
        text-align: left;
        margin: 3px 0 0;
        justify-content: center;
        position: static;
        min-height: 30px;
        border: 0;
        background-color: transparent;
        background-image: none;
    }

    /* --------------------------------------------------------------------------
   CLOSE & BACK BUTTONS (Framework positioning)

   Base styling for .dialog-close and .dialog-back is in component-library.css
   Section 56. This section only handles framework-specific z-index adjustments.
   -------------------------------------------------------------------------- */

    /* Ensure close button stays above content during prepare state transition */
    #Body #Interactions .view[ux-change-form][ux-state="prepare"] .dialog-close {
        z-index: var(--z-index-dialog-stack);
    }



    /* --------------------------------------------------------------------------
   CONTENT & BOARD LAYOUT
   -------------------------------------------------------------------------- */

    #Interactions .view .content {
        align-items: stretch;
    }

    #Interactions .view .pane,
    #Interactions .view .board {
        flex-direction: column;
        align-content: flex-start;
        align-items: stretch;
    }

    #Interactions .view > .content.scrollable {
        padding-right: var(--spacing-sm);
        overflow-y: scroll;
        box-sizing: border-box;
        height: auto;
        max-height: auto;
    }

    #Interactions .view[ux-change-form] .content .board.scrollable {
        overflow-y: scroll;
    }

    #Interactions .view .header {
        position: relative;
        top: 0;
        left: 0;
        padding: var(--spacing-sm) var(--spacing-lg);
        text-align: center;
        max-width: 800px;
    }

    #Interactions .view[ux-modal] .header {
        background-color: transparent;
        max-width: 100%;
        text-align: center;
    }


    /* --------------------------------------------------------------------------
   BUSY / LOADING STATES
   -------------------------------------------------------------------------- */

    #Interactions .view[ux-change-form] .busy {
        max-width: 100%;
        display: none;
        background-color: var(--color-dialog-overlay, rgba(255, 255, 255, 0.85));
        backdrop-filter: blur(2px);
        position: absolute;
        inset: 0;
        max-height: initial;
        z-index: var(--z-index-dialog-busy);
        width: 100%;
        box-sizing: border-box;
        height: auto !important;
        overflow: visible !important;
    }

    #Body #Interactions .view[ux-change-form][ux-state="prepare"] .busy,
    #Interactions .view[ux-change-form][ux-busy] .busy {
        display: block;
    }

    /* Show dialog-loading (flex for centering) in prepare state */
    #Body #Interactions .view[ux-change-form][ux-state="prepare"] > .dialog-loading {
        display: flex;
    }

    #Interactions .view[ux-change-form][ux-busy] .view .busy {
        display: none;
    }

    #Interactions .view[ux-change-form] .dialogs[ux-busy] .dialog .busy,
    #Interactions .view[ux-change-form] .dialogs .dialog[ux-busy] .busy {
        display: block;
    }

    #Interactions .view[ux-change-form] .dialogs .dialog[ux-busy] .art.busy {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    #Body #Interactions .view[ux-change-form][ux-state="prepare"] .title,
    #Body #Interactions .view[ux-change-form][ux-state="prepare"] > .content,
    #Body #Interactions .view[ux-change-form][ux-state="prepare"] .content .command,
    #Body #Interactions .view[ux-change-form][ux-state="prepare"] .form,
    #Body #Interactions .view[ux-change-form][ux-state="prepare"] p {
        display: none;
    }


    /* --------------------------------------------------------------------------
   DIALOG CONTAINERS & OVERLAY (Nested dialogs)
   -------------------------------------------------------------------------- */

    #Interactions .view .dialogs {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    #Interactions .view[ux-dialog] .dialogs {
        display: flex;
        width: 100%;
        flex-basis: 100%;
        flex: 1;
    }

    #Interactions .view[ux-dialog]::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background-image: linear-gradient(rgba(141, 141, 141, 0.196), rgba(141, 141, 141, 0.384));
        backdrop-filter: blur(1px);
        height: 100dvh;
        z-index: var(--z-index-modal-backdrop);
        box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.12);
    }

    /* Hide parent backdrop when subdialog is active - subdialog provides its own visual separation */
    #Interactions .view[ux-dialog]:has(.dialogs .dialog[ux-view-active])::after {
        display: none;
    }

    /* Subdialog container needs higher z-index than parent backdrop */
    #Interactions .view[ux-dialog] .dialogs {
        z-index: calc(var(--z-index-modal-backdrop) + 10);
    }

    #Interactions .view .dialogs .dialog {
        left: 0;
        top: auto;
        bottom: 0;
        height: auto;
        max-height: calc(100% - 80px);
        width: 100%;
        position: fixed;
        padding: 0;
        background-color: var(--color-dialog-background);
        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
        box-sizing: border-box;
        overflow: hidden auto;
        height: calc(100% - 80px);
    }

        #Interactions .view .dialogs .dialog.manage-dialog {
            top: 0;
            left: auto;
            right: 0;
            min-height: 100%;
            max-height: 100%;
            width: var(--dialog-manage-width);
            max-width: 100%;
            z-index: var(--z-index-dialog-manage);
            background-color: var(--color-dialog-background);
            opacity: 1;
        }

    body #Interactions .view .dialogs .dialog .dialogs,
    body #Interactions .view .dialogs .dialog .dialogs .dialog .dialogs {
        display: none;
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body #Interactions .view .dialogs .dialog[ux-dialog] .dialogs,
    body #Interactions .view .dialogs .dialog[ux-dialog] .dialogs .dialog[ux-dialog] .dialogs {
        display: flex;
    }
    /* --------------------------------------------------------------------------
   CHANGE FORM DIALOG (Nested dialogs within drawers)
   -------------------------------------------------------------------------- */

    #Interactions .view[ux-change-form] .dialog {
        display: flex;
        flex-direction: column;
        position: fixed;
        right: 0;
        left: auto;
        width: 100%;
        place-items: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding-top: 0;
    }

        #Interactions .view[ux-change-form] .dialog > .header {
            position: sticky;
            top: 0;
            left: 0;
            width: 100%;
            min-height: 56px;
            height: auto;
            max-height: none;
            box-sizing: border-box;
            background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-background) 100%);
            border-bottom: 1px solid var(--color-border);
            z-index: var(--z-index-sticky);
            display: flex;
            flex: 0 0 auto;
            padding: var(--spacing-md) var(--spacing-xl);
            margin: 0;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

            #Interactions .view[ux-change-form] .dialog > .header .title {
                font-size: var(--font-size-lg);
                font-weight: var(--font-weight-semibold);
                line-height: 1.3;
                color: var(--color-text-warm, rgba(30, 25, 55, 0.88));
                max-width: calc(100% - 100px);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: flex;
                place-self: center;
                flex: 1;
                align-items: center;
                justify-content: center;
                text-align: center;
                letter-spacing: -0.01em;
            }

        #Interactions .view[ux-change-form] .dialog .board {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            flex-shrink: 1;
            width: 100%;
            box-sizing: border-box;
            padding: var(--spacing-lg) var(--spacing-xl);
            padding-bottom: var(--spacing-xxl);
            gap: var(--spacing-md);
        }
    /* --------------------------------------------------------------------------
   CONFIRMATION DIALOG (in views)
   -------------------------------------------------------------------------- */

    #Interactions .dialogs #Dlg_Confirmation,
    #Interactions .dialogs #Dlg_MeetupConfirmation {
        background-color: var(--color-surface-elevated, rgba(30, 30, 35, 0.95));
        height: auto;
        max-height: 280px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: var(--spacing-xl);
        border-radius: var(--border-radius-lg);
        text-align: center;
        max-width: initial;
    }

        #Interactions .dialogs #Dlg_Confirmation h3,
        #Interactions .dialogs #Dlg_MeetupConfirmation h3 {
            text-transform: none;
            line-height: 1.5;
            font-size: var(--font-size-base);
            padding: 0;
            margin: 0 0 var(--spacing-lg);
            color: var(--color-text);
        }

        #Interactions .dialogs #Dlg_MeetupConfirmation .dialog-details {
            font-size: var(--font-size-sm);
            color: var(--color-text-muted);
            margin: 0 0 var(--spacing-xl);
            line-height: 1.5;
        }

        #Interactions .dialogs #Dlg_Confirmation .commands,
        #Interactions .dialogs #Dlg_MeetupConfirmation .commands {
            display: flex;
            flex-direction: row;
            justify-content: center;
            width: 100%;
            gap: var(--spacing-md);
            padding: 0;
            border: none;
            background: transparent;
        }
    /* --------------------------------------------------------------------------
   FORM CONTROLS IN VIEWS
   -------------------------------------------------------------------------- */

    #Interactions .view .form .board {
        padding-top: var(--spacing-lg);
    }

    #Interactions .view[ux-change-form] .form .board .form-group {
        margin-bottom: var(--spacing-md);
    }

    #Interactions .view[ux-change-form] .form .board .form-hint {
        margin-top: var(--spacing-xs);
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
        line-height: 1.5;
    }

    #Interactions .view[ux-change-form] .form .board .tip-info,
    #Interactions .view[ux-change-form] .form .board .tip-neutral,
    #Interactions .view[ux-change-form] .form .board .tip-important,
    #Interactions .view[ux-change-form] .form .board .tip-success,
    #Interactions .view[ux-change-form] .form .board .tip-error {
        margin-top: var(--spacing-lg);
    }
    /* --------------------------------------------------------------------------
   HUD ERROR MESSAGES (Dialog Status)
   Validation errors use red (error) styling - not orange (warning).
   Consumer-friendly: clear, not scary. Icon + left-aligned text.
   -------------------------------------------------------------------------- */

    #Interactions .view[ux-change-form] .content .hud,
    #Interactions .view .dialog-footer .hud {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        width: 100%;
        padding: var(--spacing-sm) var(--spacing-md);
        padding-left: calc(var(--spacing-md) + 28px);
        font-size: var(--font-size-sm);
        line-height: 1.5;
        text-align: left;
        /* Error state (red) - validation failures should feel clear, not scary */
        color: var(--color-error, #dc2626);
        background-color: rgba(239, 68, 68, 0.06);
        background-image: url(/images/icon/alert-triangle-red.svg);
        background-repeat: no-repeat;
        background-position: left var(--spacing-sm) top var(--spacing-sm);
        background-size: 18px 18px;
        border: 1px solid rgba(239, 68, 68, 0.15);
        border-radius: var(--border-radius-md);
        box-sizing: border-box;
        order: -2;
        margin: 0;
        animation: hudReveal 0.2s ease-out forwards;
    }

    @keyframes hudReveal {
        from {
            opacity: 0;
            transform: translateY(-4px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    /* Multiple validation messages - subtle separator */
    #Interactions .view .dialog-footer .hud p,
    #Interactions .view[ux-change-form] .content .hud p {
        margin: 0;
        padding: 2px 0;
    }

        #Interactions .view .dialog-footer .hud p + p,
        #Interactions .view[ux-change-form] .content .hud p + p {
            border-top: 1px solid rgba(239, 68, 68, 0.1);
            padding-top: var(--spacing-xs);
            margin-top: var(--spacing-xs);
        }
    /* --------------------------------------------------------------------------
   LIGHTBOX
   -------------------------------------------------------------------------- */

    #Lightbox {
        position: fixed;
        border-radius: 0;
        top: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

        #Lightbox .interactive-content.start {
            width: 100vw !important;
            margin: 0 !important;
            padding: 0 !important;
            max-width: 100% !important;
            max-height: 100% !important;
        }

        #Lightbox.dialog .interactive-content .workspace {
            max-height: 100% !important;
            height: 100dvh !important;
        }

        #Lightbox.dialog .interactive-content .icon {
            display: none;
        }

        #Lightbox .commands {
            display: none;
        }
    /* --------------------------------------------------------------------------
   INLINE COMMAND & FILTER
   -------------------------------------------------------------------------- */

    #Interactions .view[ux-change-form] .inline-command {
        color: var(--color-primary);
        text-decoration: underline;
        margin-top: var(--spacing-sm);
    }

        #Interactions .view[ux-change-form] .inline-command:hover {
            color: var(--color-primary-muted, rgba(62, 77, 255, 0.7));
        }

    #Interactions .view[ux-change-form] .filter {
        width: 100%;
    }

        #Interactions .view[ux-change-form] .filter input {
            width: 100%;
            background-color: var(--color-dialog-background);
            padding-left: var(--spacing-sm);
            padding-right: var(--spacing-sm);
            box-sizing: border-box;
        }
    /* --------------------------------------------------------------------------
   INTERACTIVE DIALOG WORKSPACE & SCROLLING
   -------------------------------------------------------------------------- */

    #Interactions .interactive-content .workspace {
        overflow-x: hidden;
        overflow-y: auto;
        padding-right: 0;
        background-color: transparent;
        max-height: 75vh;
        box-sizing: border-box;
    }

    #Content .interactive[interactive-phase="end"] .interactive-content {
        display: none;
    }

        #Content .interactive[interactive-phase="end"] .interactive-content.end {
            display: block;
        }
    /* ==========================================================================
   ACCOUNT PAGE - ONBOARDING STATE MANAGEMENT
   Controls visibility of onboarding heroes vs established-user cards
   on the Seller Settings page (/account/seller-settings)
   ========================================================================== */
    /* --------------------------------------------------------------------------
   Payment Setup Section (#Seller_PaymentSetup)
   States: .show-onboarding (new user) | .show-cards (configured user)
   -------------------------------------------------------------------------- */
    /* New user state: show onboarding hero, hide cards */
    #Seller_PaymentSetup.show-onboarding .onboarding-intro {
        display: block;
    }

    #Seller_PaymentSetup.show-onboarding .established-user-view {
        display: none;
    }
    /* Configured user state: hide onboarding hero, show cards */
    #Seller_PaymentSetup.show-cards .onboarding-intro {
        display: none;
    }

    #Seller_PaymentSetup.show-cards .established-user-view {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    /* Default state (fallback): show cards */
    #Seller_PaymentSetup:not(.show-onboarding):not(.show-cards) .onboarding-intro {
        display: none;
    }

    #Seller_PaymentSetup:not(.show-onboarding):not(.show-cards) .established-user-view {
        display: block;
    }
    /* --------------------------------------------------------------------------
   Location Setup Section (#Seller_LocationSetup)
   States: .show-onboarding (new user) | .show-locations (configured user)
   -------------------------------------------------------------------------- */
    /* New user state: show onboarding hero, hide location cards */
    #Seller_LocationSetup.show-onboarding .onboarding-intro {
        display: block;
    }

    #Seller_LocationSetup.show-onboarding .established-user-view {
        display: none;
    }
    /* Configured user state: hide onboarding hero, show location cards */
    #Seller_LocationSetup.show-locations .onboarding-intro {
        display: none;
    }

    #Seller_LocationSetup.show-locations .established-user-view {
        display: block;
    }
    /* Default state (fallback): show locations */
    #Seller_LocationSetup:not(.show-onboarding):not(.show-locations) .onboarding-intro {
        display: none;
    }

    #Seller_LocationSetup:not(.show-onboarding):not(.show-locations) .established-user-view {
        display: block;
    }
    /* --------------------------------------------------------------------------
   Seller Settings Page - Onboarding Styling & Mobile Improvements
   -------------------------------------------------------------------------- */
    /* Path Benefits - Better icon styling for seller settings onboarding */
    #Seller_PaymentSetup .path-benefits,
    #Seller_LocationSetup .path-benefits {
        text-align: left;
        list-style: none;
        padding-left: 0;
    }

        #Seller_PaymentSetup .path-benefits li,
        #Seller_LocationSetup .path-benefits li {
            display: flex;
            align-items: flex-start;
            gap: var(--spacing-sm);
            text-align: left;
            line-height: 1.5;
            margin-bottom: var(--spacing-sm);
        }

        #Seller_PaymentSetup .path-benefits .benefit-icon,
        #Seller_LocationSetup .path-benefits .benefit-icon {
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            min-width: 24px;
            margin-top: 2px;
        }
    /* Onboarding tip styling */
    #Seller_PaymentSetup .onboarding-tip,
    #Seller_LocationSetup .onboarding-tip {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
        background: var(--color-info-bg);
        border-radius: var(--border-radius-md);
        margin-top: var(--spacing-md);
    }

        #Seller_PaymentSetup .onboarding-tip .tip-icon,
        #Seller_LocationSetup .onboarding-tip .tip-icon {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
        }

        #Seller_PaymentSetup .onboarding-tip .tip-text,
        #Seller_LocationSetup .onboarding-tip .tip-text {
            font-size: var(--font-size-sm);
            color: var(--color-text-muted);
            line-height: 1.4;
        }
    /* Location notes callout */
    #Seller_LocationSetup .location-notes {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-md);
        background: var(--color-info-bg);
        border-radius: var(--border-radius-md);
        padding: var(--spacing-lg);
        margin-top: var(--spacing-lg);
    }

        #Seller_LocationSetup .location-notes .note-icon {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            min-width: 32px;
        }

            #Seller_LocationSetup .location-notes .note-icon .icon-svg {
                width: 18px;
                height: 18px;
                display: inline-block;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }

            #Seller_LocationSetup .location-notes .note-icon .icon-lightbulb {
                background-image: url(/images/icon/lightbulb-primary.svg);
            }

        #Seller_LocationSetup .location-notes .note-text {
            flex: 1;
        }

            #Seller_LocationSetup .location-notes .note-text p {
                margin: 0 0 var(--spacing-sm) 0;
                font-size: var(--font-size-sm);
                color: var(--color-text-light);
                line-height: 1.4;
            }

            #Seller_LocationSetup .location-notes .note-text ul {
                margin: var(--spacing-xs) 0 0 0;
                padding-left: var(--spacing-lg);
                list-style-type: disc;
            }

            #Seller_LocationSetup .location-notes .note-text li {
                font-size: var(--font-size-sm);
                color: var(--color-text-light);
                line-height: 1.4;
                margin-bottom: var(--spacing-xs);
                display: list-item;
            }
    /* Mobile Responsive - Seller Settings */
    @media (max-width: 768px) {
        #Seller_PaymentSetup .welcome-hero,
        #Seller_LocationSetup .welcome-hero {
            gap: var(--spacing-md);
            margin-bottom: var(--spacing-lg);
        }

        #Seller_PaymentSetup .hero-illustration img,
        #Seller_LocationSetup .hero-illustration img {
            max-width: 160px;
        }

        #Seller_PaymentSetup .hero-text h2,
        #Seller_LocationSetup .hero-text h2 {
            font-size: var(--font-size-h3);
        }

        #Seller_PaymentSetup .hero-text p,
        #Seller_LocationSetup .hero-text p {
            font-size: var(--font-size-sm);
            margin-bottom: var(--spacing-md);
        }

        #Seller_PaymentSetup .path-benefits,
        #Seller_LocationSetup .path-benefits {
            margin: var(--spacing-sm) 0 var(--spacing-md) 0;
        }

            #Seller_PaymentSetup .path-benefits li,
            #Seller_LocationSetup .path-benefits li {
                font-size: var(--font-size-sm);
                line-height: 1.4;
            }

            #Seller_PaymentSetup .path-benefits .benefit-icon,
            #Seller_LocationSetup .path-benefits .benefit-icon {
                width: 20px;
                height: 20px;
                min-width: 20px;
            }

        #Seller_LocationSetup .location-notes {
            padding: var(--spacing-md);
            margin-top: var(--spacing-md);
            gap: var(--spacing-sm);
        }

            #Seller_LocationSetup .location-notes .note-icon {
                width: 28px;
                height: 28px;
                min-width: 28px;
            }

                #Seller_LocationSetup .location-notes .note-icon .icon-svg {
                    width: 16px;
                    height: 16px;
                }

                #Seller_LocationSetup .location-notes .note-icon .icon-lightbulb {
                    background-image: url(/images/icon/lightbulb-primary.svg);
                }

            #Seller_LocationSetup .location-notes .note-text ul {
                padding-left: var(--spacing-md);
            }

            #Seller_LocationSetup .location-notes .note-text li {
                font-size: var(--font-size-xs);
                line-height: 1.3;
            }

        #Seller_PaymentSetup .hero-cta .command,
        #Seller_LocationSetup .hero-cta .command {
            padding: var(--spacing-sm) var(--spacing-lg);
            font-size: var(--font-size-sm);
        }
    }

    @media (max-width: 480px) {
        #Seller_PaymentSetup .welcome-hero,
        #Seller_LocationSetup .welcome-hero {
            gap: var(--spacing-sm);
        }

        #Seller_PaymentSetup .hero-illustration img,
        #Seller_LocationSetup .hero-illustration img {
            max-width: 120px;
        }

        #Seller_PaymentSetup .hero-text h2,
        #Seller_LocationSetup .hero-text h2 {
            font-size: var(--font-size-lg);
        }

        #Seller_LocationSetup .location-notes {
            padding: var(--spacing-sm);
        }

            #Seller_LocationSetup .location-notes .note-icon {
                width: 24px;
                height: 24px;
                min-width: 24px;
            }

                #Seller_LocationSetup .location-notes .note-icon .icon-svg {
                    width: 14px;
                    height: 14px;
                }

                #Seller_LocationSetup .location-notes .note-icon .icon-lightbulb {
                    background-image: url(/images/icon/lightbulb-primary.svg);
                }

            #Seller_LocationSetup .location-notes .note-text li {
                font-size: 0.7rem;
            }
    }
    /* --------------------------------------------------------------------------
   Change Plan Dialog (#Dlg_ChangePlan)
   Multi-step dialog: planselection → paymentmethod → confirmation
   States: planselection | paymentmethod | confirmation | freeconfirmation
   -------------------------------------------------------------------------- */
    /* All content sections hidden by default */
    #Interactions #Dlg_ChangePlan > .content {
        display: none;
    }
    /* Show content based on ux-state */
    #Interactions #Dlg_ChangePlan[ux-state="planselection"] > .content.planselection,
    #Interactions #Dlg_ChangePlan[ux-state="paymentmethod"] > .content.paymentmethod,
    #Interactions #Dlg_ChangePlan[ux-state="confirmation"] > .content.confirmation,
    #Interactions #Dlg_ChangePlan[ux-state="freeconfirmation"] > .content.freeconfirmation {
        display: flex;
    }
    /* Hide step indicator in prepare state (loading) */
    #Interactions #Dlg_ChangePlan[ux-state="prepare"] > .step-indicator {
        display: none;
    }
    /* Hide step indicator for free confirmation (single-step downgrade) */
    #Interactions #Dlg_ChangePlan[ux-state="freeconfirmation"] > .step-indicator {
        display: none;
    }
    /* Step indicator positioning */
    #Dlg_ChangePlan .dialog-step-indicator {
        padding: 0 var(--spacing-lg);
        margin-top: var(--spacing-sm);
    }
    /* Step indicator dot states based on dialog state */
    #Interactions #Dlg_ChangePlan[ux-state="planselection"] .step-indicator-dot[data-step="planselection"] {
        background: var(--color-primary);
        color: var(--color-white);
        box-shadow: var(--shadow-focus-ring);
    }

    #Interactions #Dlg_ChangePlan[ux-state="paymentmethod"] .step-indicator-dot[data-step="planselection"] {
        background: var(--color-success);
        color: var(--color-white);
    }

    #Interactions #Dlg_ChangePlan[ux-state="paymentmethod"] .step-indicator-dot[data-step="paymentmethod"] {
        background: var(--color-primary);
        color: var(--color-white);
        box-shadow: var(--shadow-focus-ring);
    }

    #Interactions #Dlg_ChangePlan[ux-state="confirmation"] .step-indicator-dot[data-step="planselection"],
    #Interactions #Dlg_ChangePlan[ux-state="confirmation"] .step-indicator-dot[data-step="paymentmethod"] {
        background: var(--color-success);
        color: var(--color-white);
    }

    #Interactions #Dlg_ChangePlan[ux-state="confirmation"] .step-indicator-dot[data-step="confirmation"] {
        background: var(--color-primary);
        color: var(--color-white);
        box-shadow: var(--shadow-focus-ring);
    }
    /* Confirmation notice icon — align to top of multiline text */
    #Dlg_ChangePlan .content.confirmation .notice-banner .notice-icon {
        align-self: flex-start;
        margin-top: 2px;
    }
    /* --------------------------------------------------------------------------
       Payment Method Step Fixes
       Fix layout issues for #Subscription_PaymentMethodCard and values display
       -------------------------------------------------------------------------- */
    /* Dialog drawer height constraint to prevent content bleeding */
    #Interactions #Dlg_ChangePlan.dialog-drawer {
        max-height: 100vh;
        max-height: 100dvh;
        overflow: hidden;
    }

        #Interactions #Dlg_ChangePlan.dialog-drawer > .content {
            max-height: calc(100vh - 120px);
            max-height: calc(100dvh - 120px);
            overflow: hidden;
        }

    #Interactions #Dlg_ChangePlan .dialog-scroll {
        overflow-y: auto;
        overflow-x: hidden;
        flex: 1;
        min-height: 0;
    }
    /* Payment method values - fix key/value pair layout */
    #Dlg_ChangePlan #Subscription_PaymentMethodValues.values {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

        #Dlg_ChangePlan #Subscription_PaymentMethodValues.values .item {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: var(--spacing-sm) 0;
            border-bottom: 1px solid var(--color-border-light);
        }

            #Dlg_ChangePlan #Subscription_PaymentMethodValues.values .item:last-child {
                border-bottom: none;
            }

            #Dlg_ChangePlan #Subscription_PaymentMethodValues.values .item .data.key {
                font-size: var(--font-size-sm);
                color: var(--color-text-muted);
                flex-shrink: 0;
            }

            #Dlg_ChangePlan #Subscription_PaymentMethodValues.values .item .data.value {
                font-size: var(--font-size-base);
                font-weight: var(--font-weight-medium);
                color: var(--color-text);
                text-align: right;
            }
    /* All content boards stretch full width with consistent padding */
    #Dlg_ChangePlan .board {
        width: 100%;
        padding: 0 var(--spacing-lg);
        box-sizing: border-box;
    }
    /* Cards and settings-boards inside steps — full width */
    #Dlg_ChangePlan .card.plan-summary,
    #Dlg_ChangePlan .payment-methods,
    #Dlg_ChangePlan .change-summary,
    #Dlg_ChangePlan .final-review {
        width: 100%;
    }
        /* Change summary settings-board — remove extra side padding, add padding to rows */
        #Dlg_ChangePlan .change-summary .settings-board {
            margin-bottom: 0;
            padding-left: 0;
            padding-right: 0;
        }

        #Dlg_ChangePlan .change-summary .form-group.summary-item {
            padding: var(--spacing-sm) var(--spacing-sm);
        }
    /* Payment method settings-board styling */
    #Dlg_ChangePlan #Subscription_PaymentMethodCard.settings-board {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-md);
        margin-bottom: var(--spacing-lg);
    }

    #Dlg_ChangePlan #Subscription_PaymentMethodCard .settings-board-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--color-border-light);
    }

    #Dlg_ChangePlan #Subscription_PaymentMethodCard .settings-board-body {
        padding: var(--spacing-md);
    }
    /* Notice banner in payment method - improve layout */
    #Dlg_ChangePlan #Subscription_PaymentMethodCard .notice-banner.tasks {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        margin-top: var(--spacing-md);
        background: var(--color-info-light);
        border-radius: var(--border-radius-md);
    }

        #Dlg_ChangePlan #Subscription_PaymentMethodCard .notice-banner.tasks .notice-content {
            font-size: var(--font-size-sm);
            color: var(--color-text-muted);
            text-align: left;
        }

        #Dlg_ChangePlan #Subscription_PaymentMethodCard .notice-banner.tasks .notice-actions {
            display: flex;
            justify-content: flex-start;
        }

            #Dlg_ChangePlan #Subscription_PaymentMethodCard .notice-banner.tasks .notice-actions .command {
                width: auto;
            }
    /* Empty state vs populated state */
    #Dlg_ChangePlan #Subscription_PaymentMethodCard[ux-empty] .values {
        display: none;
    }

    #Dlg_ChangePlan #Subscription_PaymentMethodCard[ux-empty] .tasks {
        display: flex;
    }

    #Dlg_ChangePlan #Subscription_PaymentMethodCard:not([ux-empty]) .values {
        display: flex;
    }

    #Dlg_ChangePlan #Subscription_PaymentMethodCard:not([ux-empty]) .tasks {
        display: none;
    }
    /* Mobile responsive fixes for payment method step */
    @media (max-width: 480px) {
        #Interactions #Dlg_ChangePlan.dialog-drawer > .content {
            max-height: calc(100vh - 100px);
            max-height: calc(100dvh - 100px);
        }

        #Dlg_ChangePlan #Subscription_PaymentMethodCard .settings-board-header,
        #Dlg_ChangePlan #Subscription_PaymentMethodCard .settings-board-body {
            padding: var(--spacing-sm);
        }

        #Dlg_ChangePlan #Subscription_PaymentMethodValues.values .item {
            padding: var(--spacing-xs) 0;
        }

            #Dlg_ChangePlan #Subscription_PaymentMethodValues.values .item .data.key {
                font-size: var(--font-size-xs);
            }

            #Dlg_ChangePlan #Subscription_PaymentMethodValues.values .item .data.value {
                font-size: var(--font-size-sm);
            }

        #Dlg_ChangePlan #Subscription_PaymentMethodCard .notice-banner.tasks {
            padding: var(--spacing-sm);
        }
        /* Plan summary card compact on mobile */
        #Dlg_ChangePlan .plan-summary {
            padding: var(--spacing-sm);
        }

            #Dlg_ChangePlan .plan-summary .card-title {
                font-size: var(--font-size-base);
            }

            #Dlg_ChangePlan .plan-summary .card-description {
                font-size: var(--font-size-lg);
            }
    }
    /* --------------------------------------------------------------------------
       Plan Selection Step Fixes
       Remove uppercase from badges, style current plan card consistently
       -------------------------------------------------------------------------- */
    /* Remove uppercase from all badges in Change Plan dialog */
    #Dlg_ChangePlan .card.plan .card-badge {
        text-transform: none;
        font-size: var(--font-size-xs);
        letter-spacing: normal;
    }
    /* Current plan card - match new plan cards but with distinct styling */
    #Dlg_ChangePlan .current-plan-card {
        position: relative;
        background: var(--color-surface);
        border: 2px solid var(--color-border);
        margin-bottom: var(--spacing-lg);
    }

        #Dlg_ChangePlan .current-plan-card .card-badge.badge-current {
            display: block;
            background: var(--color-surface-darkened);
            color: var(--color-text-muted);
            border: 1px solid var(--color-border);
        }

        #Dlg_ChangePlan .current-plan-card .planHeader {
            text-align: left;
            padding: 0 var(--spacing-sm);
        }

        #Dlg_ChangePlan .current-plan-card .planName {
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-bold);
            color: var(--color-text);
        }

        #Dlg_ChangePlan .current-plan-card .planActions {
            padding: var(--spacing-md);
            text-align: center;
        }

        #Dlg_ChangePlan .current-plan-card .plan-status {
            font-size: var(--font-size-sm);
            color: var(--color-text-muted);
            font-style: italic;
        }
    /* Upgrade/Recommended badges - sentence case */
    #Dlg_ChangePlan .card.plan .card-badge.upgrade-badge {
        text-transform: none;
    }

    #Dlg_ChangePlan .card.plan .card-badge.popular-badge {
        text-transform: none;
    }
    /* Ensure the "Choose a new plan" section heading is styled consistently */
    #Dlg_ChangePlan .upgrade-prompt {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
        margin: var(--spacing-lg) 0 var(--spacing-md) 0;
    }
    /* ==========================================================================
   VARIANT WIZARD DIALOG - Domain-specific overrides
   Curated warmth aesthetic with refined checkbox list styling
   ========================================================================== */
    /* Variant header - shows selected attributes as elegant pills */
    /* Selection summary container - combines count and selected attributes */
    #Dlg_VariantWizard .selection-summary {
        text-align: center;
        margin-top: var(--spacing-lg);
        padding: var(--spacing-md);
        background: var(--color-surface);
        border: 1px solid var(--color-border-light);
        border-radius: var(--border-radius-lg);
    }
    /* Variant header - shows pills of selected attributes (inside selection-summary) */
    #Dlg_VariantWizard .variant-header {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-xs);
        margin-top: var(--spacing-sm);
        padding-top: var(--spacing-sm);
        border-top: 1px solid var(--color-border-light);
    }

    #Dlg_VariantWizard .variant-header-label {
        display: none; /* Hide label, pills are self-explanatory */
    }

    #Dlg_VariantWizard .variant-header-pill {
        display: inline-flex;
        align-items: center;
        padding: var(--spacing-xs) var(--spacing-sm);
        background: linear-gradient(135deg, var(--color-primary-lighter) 0%, rgba(124, 58, 237, 0.08) 100%);
        border: 1px solid var(--color-primary-muted);
        border-radius: var(--border-radius-full);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        color: var(--color-primary-dark);
        letter-spacing: 0.2px;
    }
    /* Checkbox list - tighter, more refined layout */
    #Dlg_VariantWizard .checkbox-list {
        gap: var(--spacing-sm);
    }
    /* Checkbox list header - subtle but clear category separator */
    #Dlg_VariantWizard .checkbox-list-header {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md) 0 var(--spacing-xs) 0;
        margin-top: var(--spacing-lg);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-secondary);
    }

        #Dlg_VariantWizard .checkbox-list-header:first-child {
            margin-top: 0;
            padding-top: 0;
        }

        #Dlg_VariantWizard .checkbox-list-header::after {
            content: "";
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, var(--color-border) 0%, transparent 100%);
        }
    /* Selection count - subtle feedback */
    /* Selection count within selection-summary */
    #Dlg_VariantWizard .selection-count {
        font-size: var(--font-size-sm);
        color: var(--color-primary);
        font-weight: var(--font-weight-medium);
    }
    /* Section headers within wizard */
    #Dlg_VariantWizard .attribute-section h5 {
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
        margin-bottom: var(--spacing-xs);
    }

    #Dlg_VariantWizard .attribute-section .section-hint {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
        margin-bottom: var(--spacing-md);
        line-height: var(--line-height-relaxed);
    }
    /* ==========================================================================
   VARIANT WIZARD - Back Button Visibility
   Show back button on steps that support navigation back
   ========================================================================== */

    #Dlg_VariantWizard > .header .cmdStack {
        display: none;
    }

    #Dlg_VariantWizard[ux-state="attributes"] > .header .cmdStack,
    #Dlg_VariantWizard[ux-state="values"] > .header .cmdStack,
    #Dlg_VariantWizard[ux-state="required"] > .header .cmdStack {
        display: flex;
    }
    /* ==========================================================================
   VARIANT WIZARD - Step 2 & 3 Tip Styling
   Uses component-library .tip-info pattern with SVG icons
   ========================================================================== */
    /* Dialog subtitle tips - uses .tip-info from component library */
    /* Add icon support via ::before pseudo-element with SVG background */
    #Dlg_VariantWizard .dialog-subtitle.tip-info {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: var(--spacing-sm);
        margin: var(--spacing-sm) 0 var(--spacing-lg) 0;
    }

        #Dlg_VariantWizard .dialog-subtitle.tip-info::before {
            content: '';
            flex-shrink: 0;
            width: 18px;
            height: 18px;
            margin-top: 2px;
            background-image: url('/images/icon/info-secondary.svg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
    /* Section hint tips within attribute sections - uses .tip-info with icon */
    #Dlg_VariantWizard .attribute-section .section-hint.tip-info {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
    }

        #Dlg_VariantWizard .attribute-section .section-hint.tip-info::before {
            content: '';
            flex-shrink: 0;
            width: 16px;
            height: 16px;
            margin-top: 2px;
            background-image: url('/images/icon/info-secondary.svg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
    /* ==========================================================================
   VARIANT WIZARD - Step 3 Values Selection
   Attribute value rows with label + chip groups
   ========================================================================== */
    /* Change attributes link - subtle footer helper */
    #Dlg_VariantWizard .dialog-footer .change-attributes-link {
        order: -1;
        margin-right: auto;
        display: inline-flex;
    }

        #Dlg_VariantWizard .dialog-footer .change-attributes-link .link {
            display: inline-flex;
            align-items: center;
            gap: var(--spacing-xs);
            color: var(--color-text-muted);
            font-size: var(--font-size-xs);
            text-decoration: none;
            transition: color 0.2s var(--ease-elegant);
        }

            #Dlg_VariantWizard .dialog-footer .change-attributes-link .link::before {
                content: "←";
                font-size: 10px;
                opacity: 0.6;
            }

            #Dlg_VariantWizard .dialog-footer .change-attributes-link .link:hover {
                color: var(--color-primary);
            }

    @media (max-width: 600px) {
        #Dlg_VariantWizard .dialog-footer .change-attributes-link {
            order: 10;
            margin-right: 0;
            width: 100%;
            text-align: center;
            margin-top: var(--spacing-sm);
        }
    }
    /* Attribute value row - label + chips layout */
    #Dlg_VariantWizard .attribute-value-row {
        margin-bottom: var(--spacing-lg);
        padding: var(--spacing-md);
        background: var(--color-background);
        border: 1px solid var(--color-border-light);
        border-radius: var(--border-radius-lg);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

        #Dlg_VariantWizard .attribute-value-row > label {
            display: block;
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-semibold);
            color: var(--color-text);
            margin-bottom: var(--spacing-sm);
            letter-spacing: 0.2px;
        }
    /* Attribute chips container */
    #Dlg_VariantWizard .attribute-chips {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }
    /* ==========================================================================
   VARIANT WIZARD - Chip Styling Refinements
   Warm, tactile chip selections
   ========================================================================== */

    #Dlg_VariantWizard .chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-xs) var(--spacing-md);
        min-height: 36px;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-secondary);
        background: var(--color-background);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-full);
        cursor: pointer;
        transition: all 0.15s var(--ease-elegant);
        user-select: none;
    }

        #Dlg_VariantWizard .chip:hover {
            border-color: var(--color-primary-muted);
            background: linear-gradient(135deg, var(--color-background) 0%, rgba(124, 58, 237, 0.03) 100%);
            box-shadow: 0 2px 8px rgba(124, 58, 237, 0.1);
            transform: translateY(-1px);
        }

        #Dlg_VariantWizard .chip:active {
            transform: translateY(0);
            box-shadow: 0 1px 4px rgba(124, 58, 237, 0.1);
        }
        /* Selected chip - prominent purple fill */
        #Dlg_VariantWizard .chip.selected {
            color: white;
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
            border-color: var(--color-primary);
            box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            font-weight: var(--font-weight-semibold);
        }

            #Dlg_VariantWizard .chip.selected:hover {
                background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
                box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            }
        /* "More..." chip - distinct helper style */
        #Dlg_VariantWizard .chip.more {
            color: var(--color-primary);
            background: transparent;
            border: 1px dashed var(--color-primary-muted);
            font-style: italic;
            font-weight: var(--font-weight-normal);
        }

            #Dlg_VariantWizard .chip.more:hover {
                background: var(--color-primary-lighter);
                border-style: solid;
                font-style: normal;
            }
        /* Custom value chip */
        #Dlg_VariantWizard .chip.custom {
            color: var(--color-secondary);
            background: rgba(251, 191, 36, 0.08);
            border-color: rgba(251, 191, 36, 0.3);
        }
    /* ==========================================================================
   VARIANT WIZARD - Step 2: Define Attributes
   Card-style checkbox items matching AttributeList dialog
   ========================================================================== */
    /* Attribute sections - subtle panel grouping */
    #Dlg_VariantWizard .attribute-section {
        margin-bottom: var(--spacing-xl);
    }

        #Dlg_VariantWizard .attribute-section h5 {
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-warm);
            margin-bottom: var(--spacing-md);
            letter-spacing: -0.01em;
        }
        /* "Currently Varying" section - special card treatment */
        #Dlg_VariantWizard .attribute-section.already-varying {
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--border-radius-card);
            padding: var(--spacing-md) var(--spacing-lg);
            box-shadow: var(--shadow-sm);
        }

            #Dlg_VariantWizard .attribute-section.already-varying h5 {
                color: var(--color-text-warm);
                margin-bottom: var(--spacing-sm);
            }
    /* Checkbox list - grouped attributes */
    #Dlg_VariantWizard .checkbox-list {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }
    /* Checkbox list headers (family names like "Look & Feel") */
    #Dlg_VariantWizard .checkbox-list-header {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md) 0 var(--spacing-xs) 0;
        margin-top: var(--spacing-md);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-warm-medium);
        letter-spacing: 0.01em;
    }

        #Dlg_VariantWizard .checkbox-list-header:first-child {
            margin-top: 0;
            padding-top: 0;
        }

        #Dlg_VariantWizard .checkbox-list-header::after {
            content: "";
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, var(--color-border) 0%, transparent 100%);
        }
    /* Checkbox item - card-style matching AttributeList */
    #Dlg_VariantWizard .checkbox-item {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        column-gap: var(--spacing-sm);
        row-gap: 2px;
        padding: var(--spacing-md);
        background: var(--color-background);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-md);
        cursor: pointer;
        transition: all 0.15s var(--ease-elegant);
    }

        #Dlg_VariantWizard .checkbox-item:hover {
            border-color: var(--color-border-medium);
            background: linear-gradient(135deg, var(--color-background) 0%, rgba(92, 67, 244, 0.02) 100%);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
        }
        /* Checkbox input - custom styled, spans both rows */
        #Dlg_VariantWizard .checkbox-item input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            grid-row: 1 / 3;
            align-self: center;
            width: 20px;
            height: 20px;
            min-width: 20px;
            margin: 0;
            border: 2px solid var(--color-border-medium);
            border-radius: var(--border-radius-sm);
            background: var(--color-background);
            cursor: pointer;
            transition: all 0.15s var(--ease-elegant);
            position: relative;
        }

            #Dlg_VariantWizard .checkbox-item input[type="checkbox"]:hover {
                border-color: var(--color-primary-muted);
            }

            #Dlg_VariantWizard .checkbox-item input[type="checkbox"]:checked {
                background: var(--color-primary);
                border-color: var(--color-primary);
            }

                #Dlg_VariantWizard .checkbox-item input[type="checkbox"]:checked::after {
                    content: '';
                    position: absolute;
                    top: 3px;
                    left: 6px;
                    width: 5px;
                    height: 9px;
                    border: solid white;
                    border-width: 0 2px 2px 0;
                    transform: rotate(45deg);
                }

            #Dlg_VariantWizard .checkbox-item input[type="checkbox"]:focus-visible {
                box-shadow: var(--shadow-focus-ring-sm);
            }
        /* Selected checkbox item - subtle highlight */
        #Dlg_VariantWizard .checkbox-item:has(input:checked) {
            border-color: var(--color-border-primary-subtle);
            background: linear-gradient(135deg, rgba(92, 67, 244, 0.03) 0%, var(--color-background) 100%);
        }
        /* Checkbox label - attribute name (row 1, col 2) */
        #Dlg_VariantWizard .checkbox-item label,
        #Dlg_VariantWizard .checkbox-item .checkbox-item-name {
            grid-row: 1;
            grid-column: 2;
            cursor: pointer;
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            color: var(--color-text-warm-body);
            line-height: 1.4;
        }
        /* Checkbox hint - "Current: value" with teal dot (row 2, col 2) */
        #Dlg_VariantWizard .checkbox-item .checkbox-item-hint {
            grid-row: 2;
            grid-column: 2;
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-normal);
            color: var(--color-text-muted);
        }

            #Dlg_VariantWizard .checkbox-item .checkbox-item-hint::before {
                content: '';
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--color-secondary);
                flex-shrink: 0;
            }
            /* Hide hint row when empty (no value set) */
            #Dlg_VariantWizard .checkbox-item .checkbox-item-hint:empty {
                display: none;
            }

                #Dlg_VariantWizard .checkbox-item .checkbox-item-hint:empty::before {
                    display: none;
                }
    /* ==========================================================================
   VARIANT WIZARD - Currently Varying Section
   Variation cards with inline confirmation following dialog patterns
   ========================================================================== */
    /* Variation card container */
    #Dlg_VariantWizard .variation-card,
    #Dlg_VariantWizard .attribute-variation-card {
        background: var(--color-background);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-md);
        margin-bottom: var(--spacing-sm);
        overflow: hidden;
        transition: all 0.2s var(--ease-elegant);
    }

        #Dlg_VariantWizard .variation-card:last-of-type,
        #Dlg_VariantWizard .attribute-variation-card:last-of-type {
            margin-bottom: 0;
        }
    /* Variation card content - normal state */
    #Dlg_VariantWizard .variation-card-content {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }
    /* Variation info - name and hint stacked */
    #Dlg_VariantWizard .variation-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    #Dlg_VariantWizard .variation-name,
    #Dlg_VariantWizard .attribute-name {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-warm-body);
    }

    #Dlg_VariantWizard .variation-hint,
    #Dlg_VariantWizard .attribute-hint {
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
    }
    /* Remove button - uses icon via CSS */
    #Dlg_VariantWizard .variation-remove,
    #Dlg_VariantWizard .remove-variation {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-sm);
        cursor: pointer;
        transition: all 0.15s var(--ease-out);
        flex-shrink: 0;
    }

        #Dlg_VariantWizard .variation-remove::before,
        #Dlg_VariantWizard .remove-variation::before {
            content: '';
            width: 12px;
            height: 12px;
            background-image: url('/images/icon/x-black.svg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0.5;
            transition: opacity 0.15s var(--ease-out);
        }

        #Dlg_VariantWizard .variation-remove:hover,
        #Dlg_VariantWizard .remove-variation:hover {
            background: var(--color-error-light);
            border-color: var(--color-error);
        }

            #Dlg_VariantWizard .variation-remove:hover::before,
            #Dlg_VariantWizard .remove-variation:hover::before {
                opacity: 1;
                filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(1583%) hue-rotate(338deg) brightness(91%) contrast(97%);
            }
    /* Remove animation */
    #Dlg_VariantWizard .variation-card.removing,
    #Dlg_VariantWizard .attribute-variation-card.removing {
        opacity: 0;
        transform: translateX(-10px);
        transition: all 0.2s var(--ease-out);
    }
    /* Variation note - info tip at bottom */
    #Dlg_VariantWizard .variation-note,
    #Dlg_VariantWizard .variation-attributes-note {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
        margin-top: var(--spacing-sm);
        background: var(--color-surface);
        border-radius: var(--border-radius-md);
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
    }

        #Dlg_VariantWizard .variation-note::before,
        #Dlg_VariantWizard .variation-attributes-note .note-icon {
            content: '';
            flex-shrink: 0;
            width: 14px;
            height: 14px;
            background-image: url('/images/icon/info-secondary.svg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        #Dlg_VariantWizard .variation-attributes-note .note-icon {
            display: none; /* Hide text icon, using ::before */
        }
    /* ==========================================================================
   VARIANT WIZARD - Step Indicator Polish
   Refined step dots with better visual progression
   ========================================================================== */

    #Dlg_VariantWizard h4 {
        display: none; /* Hide default step title, using custom step indicator instead */
    }

    #Dlg_VariantWizard .step-indicator {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-xs);
        margin-bottom: var(--spacing-xl);
        padding: var(--spacing-sm) 0;
        display: none; /* Hide step indicator for now, can be enabled when needed */
    }

    #Dlg_VariantWizard .step-indicator-dot {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-bold);
        border-radius: 50%;
        transition: all 0.2s var(--ease-elegant);
    }
        /* Completed step */
        #Dlg_VariantWizard .step-indicator-dot.completed,
        #Dlg_VariantWizard .step-indicator-dot.step-done {
            color: white;
            background: linear-gradient(135deg, var(--color-success) 0%, #16a34a 100%);
            box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
        }
        /* Current step */
        #Dlg_VariantWizard .step-indicator-dot.current,
        #Dlg_VariantWizard .step-indicator-dot.step-active {
            color: white;
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
            box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
        }
        /* Future step */
        #Dlg_VariantWizard .step-indicator-dot:not(.completed):not(.current):not(.step-done):not(.step-active) {
            color: var(--color-text-muted);
            background: var(--color-surface);
            border: 2px solid var(--color-border);
        }

    #Dlg_VariantWizard .step-indicator-label {
        margin-left: var(--spacing-sm);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-secondary);
    }
    /* ==========================================================================
   ATTRIBUTE VALUE DIALOG - Layout adjustments
   Uses .checkbox-item component for selection items
   ========================================================================== */
    /* Back button - hidden by default, shown via [ux-has-back] from component */
    #Dlg_AttributeValue > .header .dialog-back {
        display: none;
    }

    #Dlg_AttributeValue[ux-has-back] > .header .dialog-back {
        display: flex;
    }
    /* Dialog body - flex column with scrollable content, anchored footer */
    #Dlg_AttributeValue > .content.attributeValues {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    /* Scrollable container for the list */
    #Dlg_AttributeValue .autocomplete-container {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
    }
    /* Container layout - use checkbox-list gap pattern */
    #Dlg_AttributeValue .autocomplete-choices {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        padding: var(--spacing-md);
        max-height: initial;
    }
    /* Footer anchored to bottom */
    #Dlg_AttributeValue > .content.attributeValues > .dialog-footer {
        flex-shrink: 0;
        border-top: 1px solid var(--color-border-light);
    }
    /* "Other" item - dashed border to distinguish */
    #Dlg_AttributeValue .checkbox-item[data-key="0"] {
        border-style: dashed;
    }
    /* ============================================================================
   Photo Manager Dialog (#Dlg_PhotoManager)
   ============================================================================ */
    /* --------------------------------------------------------------------------
   Photo Card Drag Handle - Domain extension for .drag-handle component
   --------------------------------------------------------------------------
   Component library provides .drag-handle and .drag-handle-hover classes.
   Domain CSS adds .photo-card:hover support (component uses .card:hover).
   -------------------------------------------------------------------------- */
    /* Photo cards use .photo-card not .card, so extend hover reveal behavior */
    .photo-card:hover > .drag-handle.drag-handle-hover {
        opacity: 1;
    }
    /* Hide drag handle when nothing to reorder (0 or 1 photo) */
    .photo-gallery[data-photo-count="0"] .drag-handle,
    .photo-gallery[data-photo-count="1"] .drag-handle,
    #PhotoManager_PhotoGrid[data-photo-count="0"] .drag-handle,
    #PhotoManager_PhotoGrid[data-photo-count="1"] .drag-handle,
    #PhotoManager_SelectGrid[data-photo-count="0"] .drag-handle,
    #PhotoManager_SelectGrid[data-photo-count="1"] .drag-handle {
        display: none;
    }
    /* Photo grids - simple responsive grid */
    #PhotoManager_PhotoGrid,
    #PhotoManager_SelectGrid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: var(--spacing-md);
    }
    /* Selectable photo - selected state */
    #Dlg_PhotoManager .selectable-photo.selected {
        outline: 3px solid var(--color-primary);
        outline-offset: 2px;
    }
    /* Current Primary section - centered large preview */
    #PhotoManager_CurrentPrimary .current-primary-content {
        display: flex;
        justify-content: center;
        padding: var(--spacing-md) 0;
    }

    #PhotoManager_CurrentPrimary .primary-preview {
        border-radius: var(--radius-md);
        overflow: hidden;
        box-shadow: var(--shadow-md);
    }

        #PhotoManager_CurrentPrimary .primary-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    /* Scope badges in selectable photos - top-left (scope/sharing info) */
    #Dlg_PhotoManager .selectable-photo .scope-badge {
        font-size: 0.65rem;
        padding: 2px 6px;
    }
    /* Edit/Remove buttons use component library .photo-card-edit and .photo-card-remove styles */
    /* Photo card image clickable in manage/select states */
    #Dlg_PhotoManager .photo-card img {
        cursor: pointer;
    }
    /* Add Photo welcome header - simpler version of create-listing-hero */
    #Dlg_PhotoManager .add-photo-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-md);
        animation: clFadeInDown 0.3s var(--ease-elegant) both;
    }

    #Dlg_PhotoManager .add-photo-headline {
        margin: 0 0 var(--spacing-sm);
        font-size: var(--font-size-h2);
        font-weight: var(--font-weight-bold);
        color: var(--color-primary);
        letter-spacing: -0.02em;
    }

    #Dlg_PhotoManager .add-photo-subtitle {
        margin: 0;
        font-size: var(--font-size-base);
        color: var(--color-text-warm-body);
        line-height: var(--line-height-relaxed);
        max-width: 420px;
    }
    /* Add Photo board follows create-listing-board pattern */
    #Dlg_PhotoManager .add-photo-board {
        padding: 0 var(--spacing-md) var(--spacing-lg);
    }

    /* Upload dropzone inside Photo Manager - fit within selection card */
    #Dlg_PhotoManager .uploader.upload-dropzone {
        min-width: 0;
        width: auto;
        align-self: stretch;
    }

    @media (max-width: 480px) {
        #Dlg_PhotoManager .add-photo-header {
            padding: var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
        }

        #Dlg_PhotoManager .add-photo-headline {
            font-size: var(--font-size-xl);
        }

        #Dlg_PhotoManager .add-photo-subtitle {
            font-size: var(--font-size-sm);
        }
    }
    /* Photo Action Menu - Domain-specific overrides only
   Base styling from component-library: .dialog-drawer, .dialog-menu, .context-menu, .menu-nav, etc. */
    /* Photo preview info section */
    #Dlg_PhotoActionMenu .photo-preview-info {
        text-align: center;
    }

        #Dlg_PhotoActionMenu .photo-preview-info .photo-card {
            margin: 0 auto var(--spacing-sm);
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

            #Dlg_PhotoActionMenu .photo-preview-info .photo-card img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

    #Dlg_PhotoActionMenu .photo-scope-info {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
    }
    /* ==========================================================================
   Photo Action Menu - Compact Drawer Override
   ==========================================================================
   The nested dialog CSS sets width: 100%, but we need this menu to be a
   compact 380px side panel like Dlg_AttributeValue. These rules have higher
   specificity to override the nested dialog defaults. */
    /* Force compact width in nested dialog context */
    #Dlg_PhotoManager .dialogs #Dlg_PhotoActionMenu,
    body #Interactions .view .dialogs #Dlg_PhotoActionMenu {
        width: 380px;
        max-width: calc(100vw - var(--spacing-xl));
        left: auto;
        right: 0;
        border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12), -2px 0 8px rgba(0, 0, 0, 0.08);
        animation: photoMenuSlideIn 0.25s var(--ease-elegant) both;
    }

    @keyframes photoMenuSlideIn {
        from {
            opacity: 0;
            transform: translateX(100%);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    /* Mobile: full width but with top border radius */
    @media (max-width: 420px) {
        #Dlg_PhotoManager .dialogs #Dlg_PhotoActionMenu,
        body #Interactions .view .dialogs #Dlg_PhotoActionMenu {
            width: 100%;
            max-width: 100%;
            border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
            top: auto;
            bottom: 0;
            animation: photoMenuSlideUp 0.25s var(--ease-elegant) both;
        }

        @keyframes photoMenuSlideUp {
            from {
                opacity: 0;
                transform: translateY(100%);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    }
    /* Photo Action Menu header styling */
    #Dlg_PhotoActionMenu > .dialog-header {
        padding: var(--spacing-md) var(--spacing-lg);
        border-bottom: 1px solid var(--color-border-light);
    }

        #Dlg_PhotoActionMenu > .dialog-header .dialog-title {
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-semibold);
            color: var(--color-primary); /* Violet accent for consistency */
        }
    /* Photo preview with subtle highlight */
    #Dlg_PhotoActionMenu .photo-preview-info {
        padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
        background: linear-gradient( 180deg, var(--color-surface) 0%, transparent 100% );
    }

        #Dlg_PhotoActionMenu .photo-preview-info .photo-card {
            position: relative;
            border: 2px solid var(--color-border-light);
            transition: var(--transition-fast);
            box-shadow: var(--shadow-card); /* Better elevation */
        }

    #Dlg_PhotoActionMenu .photo-scope-info {
        margin-top: var(--spacing-sm);
        padding: var(--spacing-xs) var(--spacing-sm);
        background: var(--color-surface-alt);
        border-radius: var(--radius-sm);
        display: inline-block;
    }
    /* Menu items - clean list styling */
    #Dlg_PhotoActionMenu .context-menu {
        padding: var(--spacing-xs) 0;
    }

    #Dlg_PhotoActionMenu .menu-nav {
        padding: 0;
    }

    #Dlg_PhotoActionMenu .menu-item {
        margin: var(--spacing-xs) var(--spacing-md);
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    #Dlg_PhotoActionMenu .menu-link {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md) var(--spacing-lg);
        transition: var(--transition-fast);
        cursor: pointer;
    }

        #Dlg_PhotoActionMenu .menu-link:hover {
            background: var(--color-surface-hover);
            box-shadow: var(--shadow-sm);
        }

        #Dlg_PhotoActionMenu .menu-link:active {
            background: var(--color-surface-active);
        }

    #Dlg_PhotoActionMenu .menu-link-text {
        flex: 1;
    }

    #Dlg_PhotoActionMenu .menu-label {
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-medium);
        color: var(--color-text);
        margin-bottom: 2px;
    }

    #Dlg_PhotoActionMenu .menu-description {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
        line-height: 1.3;
    }
    /* Danger action (Remove Photo) */
    #Dlg_PhotoActionMenu .menu-link.danger .menu-label {
        color: var(--color-danger);
    }

    #Dlg_PhotoActionMenu .menu-link.danger:hover {
        background: rgba(var(--color-danger-rgb, 220, 53, 69), 0.08);
    }
    /* Menu divider */
    #Dlg_PhotoActionMenu .menu-divider {
        height: 1px;
        background: var(--color-border-light);
        margin: var(--spacing-xs) var(--spacing-lg);
        list-style: none;
    }
    /* Footer - styled ghost buttons */
    #Dlg_PhotoActionMenu .dialog-footer {
        padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
        border-top: none;
        background: transparent;
        display: flex;
        justify-content: center;
    }

        #Dlg_PhotoActionMenu .dialog-footer .command {
            padding: var(--spacing-sm) var(--spacing-lg);
            border-radius: var(--radius-md);
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-medium);
            color: var(--color-text-secondary);
            background: var(--color-surface);
            border: 1px solid var(--color-border-light);
            cursor: pointer;
            transition: var(--transition-fast);
        }

            #Dlg_PhotoActionMenu .dialog-footer .command:hover {
                background: var(--color-surface-hover);
                border-color: var(--color-border-medium);
                color: var(--color-text);
            }
    /* Confirmation subviews (shared by primary-confirm and remove-confirm) */
    #Dlg_PhotoActionMenu .action-menu-confirm {
        padding: var(--spacing-lg);
    }

    #Dlg_PhotoActionMenu .confirm-prompt {
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-warm);
        text-align: center;
        margin: 0 0 var(--spacing-sm) 0;
    }

    #Dlg_PhotoActionMenu .confirm-hint {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
        text-align: center;
        margin: 0 0 var(--spacing-md) 0;
        padding-bottom: var(--spacing-md);
        border-bottom: 1px solid var(--color-border-light);
    }
    /* When no hint, prompt gets the border */
    #Dlg_PhotoActionMenu .confirm-prompt:last-of-type {
        margin-bottom: var(--spacing-md);
        padding-bottom: var(--spacing-md);
        border-bottom: 1px solid var(--color-border-light);
    }

    #Dlg_PhotoActionMenu .action-menu-confirm .context-menu {
        padding: 0;
    }
    /* Confirmation action buttons - styled as primary buttons */
    #Dlg_PhotoActionMenu .action-menu-confirm .menu-link {
        background: var(--color-surface);
        border: 1px solid var(--color-border-light);
        border-radius: var(--radius-md);
        margin: var(--spacing-xs) 0;
    }

        #Dlg_PhotoActionMenu .action-menu-confirm .menu-link:hover {
            background: rgba(var(--color-primary-rgb), 0.08);
            border-color: var(--color-primary-muted);
        }

        #Dlg_PhotoActionMenu .action-menu-confirm .menu-link .menu-label {
            color: var(--color-primary);
            font-weight: var(--font-weight-semibold);
        }
    /* ==========================================================================
   Photo Manager - Manage State (Redesigned)
   ==========================================================================
   Gallery-curator aesthetic: Let photos be the hero. Clean sections with
   subtle visual hierarchy. Welcoming entrance to photo management.
   ========================================================================== */
    /* --- Manage Header - Welcoming entrance --- */
    #Dlg_PhotoManager .manage-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
        animation: clFadeInDown 0.3s var(--ease-elegant) both;
    }

    #Dlg_PhotoManager .manage-headline {
        margin: 0 0 var(--spacing-xs);
        font-size: var(--font-size-h2);
        font-weight: var(--font-weight-bold);
        color: var(--color-primary);
        letter-spacing: -0.02em;
    }

    #Dlg_PhotoManager .manage-subtitle {
        margin: 0;
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
        line-height: var(--line-height-relaxed);
    }
    /* --- Main Gallery Section --- */
    #Dlg_PhotoManager .manage-gallery-section {
        padding: 0 var(--spacing-md) var(--spacing-md);
        animation: clFadeInUp 0.4s var(--ease-elegant) 0.1s both;
    }
    /* Photo grid - gallery layout with inline add button */
    #Dlg_PhotoManager .manage-photo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 120px));
        gap: var(--spacing-md);
        justify-content: start;
    }
        /* Photo cards - following style-guide.md card patterns */
        #Dlg_PhotoManager .manage-photo-grid > .photo-card {
            position: relative;
            aspect-ratio: 1;
            border-radius: var(--border-radius-card);
            overflow: hidden;
            background: var(--color-background);
            border: 1px solid var(--color-border);
            box-shadow: var(--shadow-card);
            transition: var(--transition-card);
        }

            #Dlg_PhotoManager .manage-photo-grid > .photo-card img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: var(--transition-card-photo);
            }
            /* Hover: style-guide lift + shadow + zoom */
            #Dlg_PhotoManager .manage-photo-grid > .photo-card:hover {
                transform: translateY(-4px);
                box-shadow: var(--shadow-card-hover);
            }

                #Dlg_PhotoManager .manage-photo-grid > .photo-card:hover img {
                    transform: scale(1.03);
                }

            #Dlg_PhotoManager .manage-photo-grid > .photo-card:active {
                transform: translateY(-2px);
            }
    /* ==========================================================================
   Badge Scope Colors - Global for Photo Manager
   ==========================================================================
   Consistent badge colors across all contexts: main grid, select grid,
   variant strips, help section examples.
   - Shared: subtle gray (photo appears on ALL variants)
   - Variant: primary accent (photo assigned to SPECIFIC variants)
   ========================================================================== */
    /* Scope badge - positioned status indicator on photo cards
   Uses .badge base (not .feature-badge) for simpler status styling */

    #Dlg_PhotoManager .photo-card .scope-badge {
        position: absolute;
        top: var(--spacing-xs);
        left: var(--spacing-xs);
        font-size: 10px;
        padding: 2px 6px;
        z-index: 5;
    }
        /* Shared: subtle gray - photo appears on ALL variants */
        #Dlg_PhotoManager .photo-card .scope-badge.badge-shared,
        #Dlg_PhotoManager .help-badge-item .scope-badge.badge-shared {
            background: var(--color-surface-darkened);
            color: var(--color-text-muted);
        }
        /* Variant: primary solid - photo assigned to SPECIFIC variants */
        #Dlg_PhotoManager .photo-card .scope-badge.badge-variant,
        #Dlg_PhotoManager .help-badge-item .scope-badge.badge-variant {
            background: var(--color-primary);
            color: white;
        }
    /* Menu button - reveal on hover */
    #Dlg_PhotoManager .manage-photo-grid > .photo-card .photo-card-menu {
        position: absolute;
        top: var(--spacing-xs);
        right: var(--spacing-xs);
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: scale(0.8);
        transition: var(--transition-fast);
        cursor: pointer;
        box-shadow: var(--shadow-sm);
        display: none !important; /* whole card is clickable no need for context menu button */
    }

    #Dlg_PhotoManager .manage-photo-grid > .photo-card:hover .photo-card-menu {
        opacity: 1;
        transform: scale(1);
    }

    #Dlg_PhotoManager .manage-photo-grid > .photo-card .photo-card-menu:hover {
        background: white;
        box-shadow: var(--shadow-md);
    }
    /* Drag handle - grip indicator */
    #Dlg_PhotoManager .manage-photo-grid > .photo-card .photo-card-handle {
        position: absolute;
        top: var(--spacing-xs);
        left: var(--spacing-xs);
        width: 24px;
        height: 24px;
        border-radius: var(--border-radius-sm);
        background: rgba(255, 255, 255, 0.92) url('/images/icon/grip-vertical.svg') center/12px no-repeat;
        backdrop-filter: blur(4px);
        opacity: 0;
        cursor: grab;
        transition: var(--transition-fast);
        text-indent: -9999px;
        box-shadow: var(--shadow-sm);
        display: none; /* Hidden when only 1 photo */
    }
    /* Show drag handles when there's more than 1 photo (sorting is possible) */
    #Dlg_PhotoManager .manage-photo-grid[data-photo-count]:not([data-photo-count="0"]):not([data-photo-count="1"]) > .photo-card .photo-card-handle {
        display: block;
        opacity: 0.6; /* Always visible but subtle */
    }

    #Dlg_PhotoManager .manage-photo-grid > .photo-card:hover .photo-card-handle {
        opacity: 1;
    }

    #Dlg_PhotoManager .manage-photo-grid > .photo-card .photo-card-handle:hover {
        background-color: white;
        box-shadow: var(--shadow-md);
    }

    #Dlg_PhotoManager .manage-photo-grid > .photo-card .photo-card-handle:active {
        cursor: grabbing;
    }
    /* Add Photo button - flows in grid with photos, style-guide dashed pattern */
    #Dlg_PhotoManager .manage-photo-grid > .photo-card-add {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-xs);
        aspect-ratio: 1;
        min-width: 100px;
        max-width: 120px;
        min-height: 100px;
        max-height: 120px;
        border: 2px dashed rgba(92, 67, 244, 0.2);
        border-radius: var(--border-radius-card);
        color: var(--color-primary);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        cursor: pointer;
        transition: var(--transition-card);
        background: linear-gradient( 135deg, rgba(92, 67, 244, 0.02) 0%, rgba(0, 255, 203, 0.015) 100% );
    }

        #Dlg_PhotoManager .manage-photo-grid > .photo-card-add:hover {
            border-color: var(--color-primary);
            background: linear-gradient( 135deg, rgba(92, 67, 244, 0.05) 0%, rgba(0, 255, 203, 0.03) 100% );
            box-shadow: 0 4px 16px rgba(92, 67, 244, 0.08);
            transform: translateY(-2px);
        }

        #Dlg_PhotoManager .manage-photo-grid > .photo-card-add:active {
            transform: scale(0.98);
        }

        #Dlg_PhotoManager .photo-card-add.disabled,
        #Dlg_PhotoManager .photo-card-add[disabled] {
            opacity: 0.35;
            pointer-events: none;
            cursor: default;
            border-color: rgba(0,0,0,0.1);
        }

        #Dlg_PhotoManager .manage-photo-grid > .photo-card-add .icon-svg {
            width: 32px;
            height: 32px;
            transition: var(--transition-fast);
        }

        #Dlg_PhotoManager .manage-photo-grid > .photo-card-add .icon-plus {
            background-image: url('/images/icon/plus-primary.svg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        #Dlg_PhotoManager .manage-photo-grid > .photo-card-add:hover .icon-svg {
            transform: scale(1.1);
        }
    /* --- Empty State - Welcoming first-time experience --- */
    #Dlg_PhotoManager .empty-state-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--spacing-2xl) var(--spacing-xl);
        background: linear-gradient( 135deg, var(--color-surface) 0%, rgba(var(--color-primary-rgb), 0.03) 100% );
        border: 1px solid var(--color-border-light);
        border-radius: var(--radius-lg);
        animation: clFadeInUp 0.4s var(--ease-elegant) both;
    }

    #Dlg_PhotoManager .empty-state-icon {
        width: 64px;
        height: 64px;
        margin-bottom: var(--spacing-md);
        opacity: 0.3;
        background-image: url('/images/icon/image-primary.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    #Dlg_PhotoManager .empty-state-title {
        margin: 0 0 var(--spacing-xs);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
    }

    #Dlg_PhotoManager .empty-state-text {
        margin: 0 0 var(--spacing-lg);
        font-size: var(--font-size-base);
        color: var(--color-text-muted);
        max-width: 280px;
        line-height: var(--line-height-relaxed);
    }

    #Dlg_PhotoManager .empty-state-card .btn-primary {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

        #Dlg_PhotoManager .empty-state-card .btn-primary .icon-svg {
            width: 18px;
            height: 18px;
        }
    /* --- Photo Help Section - Uses component library expandable pattern --- */
    #Dlg_PhotoManager .photo-help-section {
        margin: var(--spacing-md) var(--spacing-md) 0;
        border-radius: var(--border-radius-md);
    }

        #Dlg_PhotoManager .photo-help-section .expand-toggle {
            border-radius: var(--border-radius-md);
        }

        #Dlg_PhotoManager .photo-help-section[ux-expanded] .expand-toggle {
            border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
        }
        /* Help content panel - hidden by default, visible when expanded */
        #Dlg_PhotoManager .photo-help-content,
        #Dlg_PhotoManager .photo-help-section .section-content {
            display: none;
            padding: var(--spacing-md);
            background: var(--color-surface);
            border: 1px solid var(--color-primary-lighter);
            border-top: none;
            border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
        }
        /* When expanded, show the content */
        #Dlg_PhotoManager .photo-help-section[ux-expanded] .photo-help-content,
        #Dlg_PhotoManager .photo-help-section[ux-expanded] .section-content {
            display: block;
        }
    /* Badge explanation items */
    #Dlg_PhotoManager .photo-help-badges {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    #Dlg_PhotoManager .help-badge-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
    }

        #Dlg_PhotoManager .help-badge-item .badge {
            flex-shrink: 0;
            font-size: 9px;
            padding: 2px 6px;
            min-width: 45px;
            text-align: center;
        }

    #Dlg_PhotoManager .photo-help-tip {
        margin: var(--spacing-sm) 0 0;
        padding-top: var(--spacing-sm);
        border-top: 1px solid var(--color-border-light);
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
    }
    /* --- Single Variant Note - Minimal inline hint --- */
    #Dlg_PhotoManager .single-variant-note {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin: var(--spacing-md) var(--spacing-md) 0;
        padding: var(--spacing-sm) var(--spacing-md);
        background: var(--color-surface);
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        animation: clFadeInUp 0.4s var(--ease-elegant) 0.2s both;
    }

        #Dlg_PhotoManager .single-variant-note .note-icon {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            opacity: 0.6;
            background-image: url('/images/icon/info-primary.svg');
            background-size: contain;
            background-repeat: no-repeat;
        }
    /* --- Variant Preview Section - Compact strip view --- */
    #Dlg_PhotoManager .variant-preview-section {
        margin: var(--spacing-lg) var(--spacing-md) 0;
        animation: clFadeInUp 0.4s var(--ease-elegant) 0.3s both;
    }

    #Dlg_PhotoManager .variant-preview-header {
        margin-bottom: var(--spacing-md);
    }

    #Dlg_PhotoManager .variant-preview-title {
        margin: 0 0 var(--spacing-xxs);
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
    }

    #Dlg_PhotoManager .variant-preview-tip {
        margin: 0;
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
    }
    /* Variant strips - responsive grid layout that flows and wraps */
    #Dlg_PhotoManager .variant-strips {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--spacing-md);
    }

    #Dlg_PhotoManager .variant-card {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
        background: var(--color-surface);
        border: 1px solid var(--color-border-light);
        border-radius: var(--radius-md);
        transition: var(--transition-fast);
    }

        #Dlg_PhotoManager .variant-card:hover {
            border-color: var(--color-border-medium);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }

    #Dlg_PhotoManager .variant-card-header {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    #Dlg_PhotoManager .variant-card .variant-name {
        flex: 1;
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-warm);
    }

    #Dlg_PhotoManager .variant-card .photo-count-badge {
        font-size: 11px;
        color: var(--color-text-muted);
        background: transparent;
        padding: 0;
    }

    #Dlg_PhotoManager .variant-card .variant-manage-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: var(--border-radius-full);
        background: var(--color-surface-darkened);
        color: var(--color-text-muted);
        cursor: pointer;
        transition: var(--transition-fast);
    }

        #Dlg_PhotoManager .variant-card .variant-manage-btn:hover {
            background: var(--color-primary-lighter);
            color: var(--color-primary);
        }

        #Dlg_PhotoManager .variant-card .variant-manage-btn .icon-svg {
            width: 16px;
            height: 16px;
        }
    /* Variant strip photos - larger thumbnails for better visibility */
    #Dlg_PhotoManager .variant-photos {
        display: flex;
        gap: var(--spacing-sm);
        flex-wrap: wrap;
        padding: var(--spacing-xs) 0;
        flex-direction: row;
    }

        #Dlg_PhotoManager .variant-photos .photo-card {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: var(--border-radius-md);
            overflow: hidden;
            cursor: pointer;
            box-shadow: var(--shadow-card);
            transition: var(--transition-card);
        }

            #Dlg_PhotoManager .variant-photos .photo-card img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            #Dlg_PhotoManager .variant-photos .photo-card:hover {
                transform: translateY(-2px);
                box-shadow: var(--shadow-card);
                z-index: 1;
            }
        /* Drag handle visibility in variant strip - uses component library .drag-handle */
        #Dlg_PhotoManager .variant-photos .drag-handle {
            display: none; /* Hidden when only 1 photo */
        }
        /* Show drag handles when there's more than 1 photo in variant strip */
        #Dlg_PhotoManager .variant-photos[data-photo-count]:not([data-photo-count="0"]):not([data-photo-count="1"]) .drag-handle {
            display: block;
        }
        /* Add Photo tile in variant strips - matches .photo-card-add styling */
        #Dlg_PhotoManager .variant-photos .photo-card-add {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-xs);
            width: 100px;
            height: 100px;
            border: 2px dashed rgba(92, 67, 244, 0.2);
            border-radius: var(--border-radius-md);
            color: var(--color-primary);
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-medium);
            cursor: pointer;
            transition: var(--transition-card);
            background: linear-gradient( 135deg, rgba(92, 67, 244, 0.02) 0%, rgba(0, 255, 203, 0.015) 100% );
            min-height: initial;
        }

            #Dlg_PhotoManager .variant-photos .photo-card-add:hover {
                border-color: var(--color-primary);
                background: linear-gradient( 135deg, rgba(92, 67, 244, 0.05) 0%, rgba(0, 255, 203, 0.03) 100% );
                box-shadow: 0 4px 16px rgba(92, 67, 244, 0.08);
                transform: translateY(-2px);
            }

            #Dlg_PhotoManager .variant-photos .photo-card-add:active {
                transform: scale(0.98);
            }

            #Dlg_PhotoManager .variant-photos .photo-card-add .icon-svg {
                width: 24px;
                height: 24px;
                transition: var(--transition-fast);
            }

            #Dlg_PhotoManager .variant-photos .photo-card-add .icon-plus {
                background-image: url('/images/icon/plus-primary.svg');
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }

            #Dlg_PhotoManager .variant-photos .photo-card-add:hover .icon-svg {
                transform: scale(1.1);
            }
        /* Hide scope badges on variant strip - only show primary */
        #Dlg_PhotoManager .variant-photos .photo-card .image-card-overlay,
        #Dlg_PhotoManager .variant-photos .photo-card .scope-badge,
        #Dlg_PhotoManager .variant-photos .photo-card .photo-badges {
            display: none;
        }
    /* --- Mobile Adjustments --- */
    @media (max-width: 480px) {
        #Dlg_PhotoManager .manage-header {
            padding: var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
        }

        #Dlg_PhotoManager .manage-headline {
            font-size: var(--font-size-xl);
        }

        #Dlg_PhotoManager .manage-subtitle {
            font-size: var(--font-size-sm);
        }

        #Dlg_PhotoManager .manage-gallery-section {
            padding: 0 var(--spacing-sm);
        }

        #Dlg_PhotoManager .manage-photo-grid {
            grid-template-columns: repeat(auto-fill, minmax(85px, 100px));
            gap: var(--spacing-sm);
            justify-content: start;
        }
            /* Add Photo button - match grid sizing on mobile */
            #Dlg_PhotoManager .manage-photo-grid > .photo-card-add {
                min-width: 85px;
                max-width: 100px;
                min-height: 85px;
                max-height: 100px;
            }

                #Dlg_PhotoManager .manage-photo-grid > .photo-card-add .icon-svg {
                    width: 24px;
                    height: 24px;
                }

                #Dlg_PhotoManager .manage-photo-grid > .photo-card-add span:last-child {
                    font-size: var(--font-size-xs);
                }
            /* Smaller badges on mobile */
            #Dlg_PhotoManager .manage-photo-grid > .photo-card .feature-badge {
                font-size: 8px;
                padding: 1px 4px;
            }

        #Dlg_PhotoManager .scope-legend-inline {
            margin: var(--spacing-sm) var(--spacing-sm) 0;
            padding: var(--spacing-xs) var(--spacing-sm);
            font-size: var(--font-size-xs);
        }

        #Dlg_PhotoManager .help-section-inline {
            margin: var(--spacing-xs) var(--spacing-sm) 0;
        }

        #Dlg_PhotoManager .variant-preview-section {
            margin: var(--spacing-md) var(--spacing-sm) 0;
        }

        #Dlg_PhotoManager .variant-photos .photo-card {
            width: 80px;
            height: 80px;
        }
    }
    /* ==========================================================================
   Photo Manager - Select State Polish
   ========================================================================== */
    /* Current Primary - hero treatment */
    #Dlg_PhotoManager .content.select #PhotoManager_CurrentPrimary {
        background: linear-gradient( 135deg, rgba(var(--color-primary-rgb), 0.04) 0%, rgba(var(--color-primary-rgb), 0.02) 100% );
        border-radius: var(--radius-lg);
        margin-bottom: var(--spacing-lg);
    }

        #Dlg_PhotoManager .content.select #PhotoManager_CurrentPrimary .settings-section {
            padding: var(--spacing-md);
            text-align: center;
            max-width: none;
        }
        /* Tighter spacing for Current Primary - reduce wasted whitespace */
        #Dlg_PhotoManager .content.select #PhotoManager_CurrentPrimary .settings-header {
            margin-bottom: var(--spacing-sm);
        }

        #Dlg_PhotoManager .content.select #PhotoManager_CurrentPrimary .settings-title {
            margin-bottom: var(--spacing-xs);
        }

        #Dlg_PhotoManager .content.select #PhotoManager_CurrentPrimary .settings-tip {
            margin-bottom: 0;
        }
    /* Photo grid section needs full width (override .settings-section max-width: 500px) */
    #Dlg_PhotoManager .content.select .form-panel,
    #Dlg_PhotoManager .content.select .settings-section,
    #Dlg_PhotoManager .content.select #PhotoManager_SelectGrid {
        max-width: none;
        width: 100%;
    }
    /* Board in select state should be flex column, not grid */
    #Dlg_PhotoManager .content.select .board {
        display: flex;
        flex-direction: column;
    }
    /* All section titles in select state should be violet for consistency */
    #Dlg_PhotoManager .content.select .settings-title {
        color: var(--color-primary);
        font-weight: var(--font-weight-semibold);
    }

    #Dlg_PhotoManager .content.select .primary-preview {
        position: relative;
        border: 3px solid var(--color-primary);
        box-shadow: 0 8px 32px rgba(var(--color-primary-rgb), 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
        /* Override inline 160px to be larger hero preview */
        width: 200px !important;
        height: 200px !important;
    }
        /* Tighter badge positioning for Current Primary preview */
        #Dlg_PhotoManager .content.select .primary-preview .feature-badge {
            bottom: var(--spacing-xs);
        }
    /* Or divider - enhanced styling */
    #Dlg_PhotoManager .content.select .divider {
        margin: var(--spacing-xl) 0;
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

        #Dlg_PhotoManager .content.select .divider::before,
        #Dlg_PhotoManager .content.select .divider::after {
            background: linear-gradient( 90deg, transparent 0%, var(--color-border) 50%, transparent 100% );
        }
    /* Add New Photo button in select state */
    #Dlg_PhotoManager .content.select > .dialog-scroll > .board > .btn-secondary {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-sm);
    }
    /* ==========================================================================
   Photo Manager - Camera State Polish
   ========================================================================== */
    /* Camera container - refined framing */
    #Dlg_PhotoManager .content.camera .camera-container {
        position: relative;
        margin: var(--spacing-md);
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    }
        /* Viewfinder corners overlay */
        #Dlg_PhotoManager .content.camera .camera-container::before {
            content: "";
            position: absolute;
            inset: var(--spacing-lg);
            border: 2px solid rgba(255, 255, 255, 0.4);
            border-radius: var(--radius-md);
            pointer-events: none;
            z-index: 1;
        }
        /* Corner markers */
        #Dlg_PhotoManager .content.camera .camera-container::after {
            content: "";
            position: absolute;
            inset: var(--spacing-lg);
            pointer-events: none;
            z-index: 1;
            background:
            /* Top-left */
            linear-gradient(to right, white 20px, transparent 20px) 0 0, linear-gradient(to bottom, white 20px, transparent 20px) 0 0,
            /* Top-right */
            linear-gradient(to left, white 20px, transparent 20px) 100% 0, linear-gradient(to bottom, white 20px, transparent 20px) 100% 0,
            /* Bottom-left */
            linear-gradient(to right, white 20px, transparent 20px) 0 100%, linear-gradient(to top, white 20px, transparent 20px) 0 100%,
            /* Bottom-right */
            linear-gradient(to left, white 20px, transparent 20px) 100% 100%, linear-gradient(to top, white 20px, transparent 20px) 100% 100%;
            background-repeat: no-repeat;
            background-size: 24px 3px, 3px 24px;
        }
    /* Camera preview */
    #Dlg_PhotoManager .content.camera .camera-preview {
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        display: block;
        background: var(--color-text);
    }
    /* Capture button - enhanced styling */
    #Dlg_PhotoManager .content.camera .camera-controls {
        position: absolute;
        bottom: var(--spacing-xl);
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
    }

    #Dlg_PhotoManager .content.camera .cmdCapture {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-xs);
        color: white;
        cursor: pointer;
    }

    #Dlg_PhotoManager .content.camera .capture-button {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s var(--ease-elegant);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 0 0 2px rgba(255, 255, 255, 0.3);
    }

        #Dlg_PhotoManager .content.camera .capture-button:hover {
            background: rgba(255, 255, 255, 0.35);
            transform: scale(1.05);
        }

    #Dlg_PhotoManager .content.camera .capture-inner {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: white;
        transition: transform 0.15s var(--ease-elegant);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    #Dlg_PhotoManager .content.camera .cmdCapture:active .capture-inner {
        transform: scale(0.85);
    }

    #Dlg_PhotoManager .content.camera .cmdCapture span {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        letter-spacing: 0.02em;
    }
    /* Camera state header */
    #Dlg_PhotoManager .content.camera .board h4 {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        color: var(--color-text);
        margin: 0 0 var(--spacing-xs);
    }

    #Dlg_PhotoManager .content.camera .dialog-subtitle {
        color: var(--color-text-muted);
        margin: 0;
    }
    /* ==========================================================================
   Photo Manager - Edit State Polish
   ========================================================================== */
    /* Edit state section header - violet accent for consistency */
    #Dlg_PhotoManager .content.edit .section-header h4,
    #Dlg_PhotoManager .content.edit .settings-header h4 {
        color: var(--color-primary);
        font-weight: var(--font-weight-semibold);
    }
    /* Form panels in select/edit states - add subtle elevation */
    #Dlg_PhotoManager .content.select .form-panel,
    #Dlg_PhotoManager .content.edit .form-panel {
        background: var(--color-surface);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
        margin-bottom: var(--spacing-md);
    }
    /* Edit preview - centered with subtle styling */
    #Dlg_PhotoManager .content.edit #PhotoManager_EditPreview {
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-md);
        border: 1px solid var(--color-border-light);
    }

        #Dlg_PhotoManager .content.edit #PhotoManager_EditPreview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    /* Assignment mode radio buttons - card-like styling */
    #Dlg_PhotoManager .content.edit .assignment-mode .radio-item {
        background: var(--color-surface);
        border: 1px solid var(--color-border-light);
        border-radius: var(--radius-md);
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-sm);
        transition: var(--transition-fast);
    }

        #Dlg_PhotoManager .content.edit .assignment-mode .radio-item:hover {
            border-color: var(--color-border-medium);
        }

        #Dlg_PhotoManager .content.edit .assignment-mode .radio-item:has(input:checked) {
            border-color: var(--color-primary);
            background: rgba(var(--color-primary-rgb), 0.04);
        }
    /* Variant selection checkboxes */
    #Dlg_PhotoManager .content.edit #PhotoManager_VariantSelection {
        background: var(--color-surface);
        border: 1px solid var(--color-border-light);
        border-radius: var(--radius-md);
        padding: var(--spacing-sm);
        margin-top: var(--spacing-md);
    }

    #Dlg_PhotoManager .content.edit .variant-checkbox {
        padding: var(--spacing-sm);
        border-radius: var(--radius-sm);
        transition: var(--transition-fast);
    }

        #Dlg_PhotoManager .content.edit .variant-checkbox:hover {
            background: var(--color-surface-hover);
        }
        /* Fix: Checkbox label needs left padding to clear the ::before checkbox indicator (18px + gap) */
        #Dlg_PhotoManager .content.edit .variant-checkbox .variant-label {
            padding-left: 28px;
        }
    /* ==========================================================================
   ATTRIBUTE LIST DIALOG (#View_AttributeList)
   ==========================================================================
   Curated warmth aesthetic matching Variant Wizard patterns.
   Follows style-guide.md: depth over flatness, consumer-first, warm text.
   ========================================================================== */
    /* --- Dialog Body - Warm canvas background --- */
    #View_AttributeList > .content.dialog-body {
        background: linear-gradient( 180deg, rgba(92, 67, 244, 0.012) 0%, rgba(92, 67, 244, 0.004) 40%, var(--color-background) 100% );
    }

    #View_AttributeList .board {
        padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xl);
    }
    /* --- Section Panels (This Option Only / Shared Across All Options) --- */
    #View_AttributeList .attribute-section {
        background: var(--color-background);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-card);
        padding: 0;
        margin-bottom: var(--spacing-xl);
        box-shadow: var(--shadow-card);
    }
        /* Variant section gets subtle primary tint to distinguish */
        #View_AttributeList .attribute-section.variant-section {
            border-color: var(--color-border-primary-subtle);
            background: linear-gradient( 160deg, rgba(92, 67, 244, 0.025) 0%, var(--color-background) 100% );
        }
        /* Section headers - warm, inviting, not clinical */
        #View_AttributeList .attribute-section > .section-header {
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding: var(--spacing-md) var(--spacing-lg);
            background: linear-gradient( 180deg, var(--color-surface) 0%, rgba(248, 249, 252, 0.5) 100% );
            border-bottom: 1px solid var(--color-border);
            margin-bottom: var(--spacing-sm);
        }

        #View_AttributeList .attribute-section.variant-section > .section-header {
            background: linear-gradient( 180deg, rgba(92, 67, 244, 0.04) 0%, rgba(92, 67, 244, 0.015) 100% );
            border-bottom-color: var(--color-border-primary-faint);
        }

    #View_AttributeList .section-header .form-section-title {
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-semibold);
        color: var(--color-primary);
        letter-spacing: -0.01em;
    }

    #View_AttributeList .section-header .section-hint {
        font-size: var(--font-size-sm);
        color: var(--color-text-warm-muted);
        font-weight: var(--font-weight-normal);
    }
    /* --- Attribute Groups Container --- */
    #View_AttributeList .attribute-groups {
        padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }
    /* --- Individual Attribute Group (matches Variant Wizard card style) --- */
    #View_AttributeList .attribute-group {
        background: var(--color-background);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-md);
        padding: var(--spacing-md);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
        transition: var(--transition-card);
    }

        #View_AttributeList .attribute-group:hover {
            border-color: var(--color-border-medium);
            box-shadow: var(--shadow-sm);
        }
        /* Group header (family name like "Look & Feel", "Size") */
        #View_AttributeList .attribute-group .group-header {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-warm-medium);
            margin-bottom: var(--spacing-md);
            padding-bottom: var(--spacing-sm);
            border-bottom: 1px solid var(--color-border);
            letter-spacing: 0.01em;
        }
        /* Group content - attribute rows */
        #View_AttributeList .attribute-group .group-content {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
        }
    /* --- Attribute Row --- */
    #View_AttributeList .attribute-row {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

        #View_AttributeList .attribute-row .form-group {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xs);
        }
        /* Attribute label */
        #View_AttributeList .attribute-row .form-label {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            color: var(--color-text-warm-body);
        }
    /* --- Chip Group (matches Variant Wizard chip styling) --- */
    #View_AttributeList .chip-group {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
        align-items: center;
    }
    /* Base chip style - clean pills matching Variant Wizard */
    #View_AttributeList .chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-xs) var(--spacing-md);
        min-height: 36px;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-warm-body);
        background: var(--color-background);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-full);
        cursor: pointer;
        transition: all 0.15s var(--ease-elegant);
        user-select: none;
    }

        #View_AttributeList .chip:hover {
            border-color: var(--color-primary-muted);
            background: linear-gradient(135deg, var(--color-background) 0%, rgba(92, 67, 244, 0.03) 100%);
            box-shadow: 0 2px 8px rgba(92, 67, 244, 0.1);
            transform: translateY(-1px);
        }

        #View_AttributeList .chip:active {
            transform: translateY(0);
            box-shadow: 0 1px 4px rgba(92, 67, 244, 0.1);
        }
        /* Selected chip - prominent violet fill */
        #View_AttributeList .chip.selected {
            color: white;
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
            border-color: var(--color-primary);
            box-shadow: 0 2px 8px rgba(92, 67, 244, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            font-weight: var(--font-weight-semibold);
        }

            #View_AttributeList .chip.selected:hover {
                background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
                box-shadow: 0 4px 12px rgba(92, 67, 244, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            }
        /* "More..." chip - dashed border style matching Variant Wizard */
        #View_AttributeList .chip.more {
            color: var(--color-primary);
            background: transparent;
            border: 1px dashed var(--color-primary-muted);
            font-weight: var(--font-weight-normal);
        }

            #View_AttributeList .chip.more:hover {
                background: var(--color-primary-lighter);
                border-style: solid;
                border-color: var(--color-primary);
            }
    /* --- Toggle Switch (Varies by option) --- */
    #View_AttributeList .option-toggle {
        display: flex;
        align-items: center;
        padding-top: var(--spacing-xs);
    }

        #View_AttributeList .option-toggle .toggle-checkbox {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        #View_AttributeList .option-toggle .toggle-label {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            cursor: pointer;
            user-select: none;
        }

        #View_AttributeList .option-toggle .toggle-switch {
            position: relative;
            width: 44px;
            height: 24px;
            background: var(--color-surface-darkened);
            border: 1px solid var(--color-border);
            border-radius: var(--border-radius-full);
            transition: all 0.2s var(--ease-elegant);
            flex-shrink: 0;
        }

            #View_AttributeList .option-toggle .toggle-switch::after {
                content: '';
                position: absolute;
                top: 2px;
                left: 2px;
                width: 18px;
                height: 18px;
                background: white;
                border-radius: 50%;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
                transition: transform 0.2s var(--ease-elegant);
            }
        /* Toggle checked state */
        #View_AttributeList .option-toggle .toggle-checkbox:checked + .toggle-label .toggle-switch {
            background: var(--color-primary);
            border-color: var(--color-primary);
        }

            #View_AttributeList .option-toggle .toggle-checkbox:checked + .toggle-label .toggle-switch::after {
                transform: translateX(20px);
            }
        /* Toggle focus state */
        #View_AttributeList .option-toggle .toggle-checkbox:focus-visible + .toggle-label .toggle-switch {
            box-shadow: var(--shadow-focus-ring);
        }

        #View_AttributeList .option-toggle .toggle-text {
            font-size: var(--font-size-sm);
            color: var(--color-text-warm-muted);
            font-weight: var(--font-weight-normal);
        }

        #View_AttributeList .option-toggle .toggle-checkbox:checked + .toggle-label .toggle-text {
            color: var(--color-primary);
            font-weight: var(--font-weight-medium);
        }
    /* --- Text/Numeric Input Fields (SKU, Serial Number, Barcode) --- */
    #View_AttributeList .attribute-row .textbox {
        position: relative;
    }

    #View_AttributeList .attribute-row .form-input {
        width: 100%;
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
        color: var(--color-text);
        background: var(--color-background);
        border: 1px solid var(--color-border);
        border-radius: var(--border-radius-md);
        transition: all 0.15s var(--ease-out);
    }

        #View_AttributeList .attribute-row .form-input::placeholder {
            color: var(--color-text-muted);
        }

        #View_AttributeList .attribute-row .form-input:hover {
            border-color: var(--color-border-medium);
        }

        #View_AttributeList .attribute-row .form-input:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: var(--shadow-focus-ring-sm);
        }
    /* Input group (numeric with unit) */
    #View_AttributeList .attribute-row .input-group {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

        #View_AttributeList .attribute-row .input-group .textbox {
            flex: 1;
            max-width: 120px;
        }

        #View_AttributeList .attribute-row .input-group .form-hint {
            font-size: var(--font-size-sm);
            color: var(--color-text-muted);
        }
    /* --- Read-only Attribute Row --- */
    #View_AttributeList .attribute-row[data-readonly] {
        opacity: 0.7;
    }

    #View_AttributeList .attribute-row .readonly-value {
        font-size: var(--font-size-sm);
        color: var(--color-text-warm-body);
        padding: var(--spacing-xs) 0;
    }

    #View_AttributeList .attribute-row .scope-indicator {
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
        font-style: italic;
    }
    /* --- Empty State --- */
    #View_AttributeList .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-3xl) var(--spacing-xl);
        text-align: center;
    }

        #View_AttributeList .empty-state .icon {
            font-size: 48px;
            margin-bottom: var(--spacing-md);
            opacity: 0.5;
        }

        #View_AttributeList .empty-state .message {
            font-size: var(--font-size-base);
            color: var(--color-text-warm-muted);
            margin-bottom: var(--spacing-lg);
        }
    /* --- Mobile Responsive --- */
    @media (max-width: 480px) {
        #View_AttributeList .board {
            padding: var(--spacing-sm) var(--spacing-md) var(--spacing-lg);
        }

        #View_AttributeList .attribute-groups {
            padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
        }

        #View_AttributeList .attribute-group {
            padding: var(--spacing-sm);
        }

        #View_AttributeList .chip {
            min-height: 32px;
            padding: var(--spacing-xs) var(--spacing-sm);
            font-size: var(--font-size-xs);
        }
    }
    /* --- Dark Mode Adjustments --- */
    [data-theme="dark"] #View_AttributeList > .content.dialog-body {
        background: linear-gradient( 180deg, rgba(92, 67, 244, 0.03) 0%, rgba(92, 67, 244, 0.01) 40%, var(--color-background) 100% );
    }

    [data-theme="dark"] #View_AttributeList .attribute-section.variant-section {
        background: linear-gradient( 160deg, rgba(92, 67, 244, 0.06) 0%, var(--color-background) 100% );
    }

        [data-theme="dark"] #View_AttributeList .attribute-section.variant-section > .section-header {
            background: linear-gradient( 180deg, rgba(92, 67, 244, 0.08) 0%, rgba(92, 67, 244, 0.03) 100% );
        }

    [data-theme="dark"] #View_AttributeList .option-toggle .toggle-switch::after {
        background: var(--color-surface-elevated);
    }

    [data-theme="dark"] #View_AttributeList .chip:hover {
        background: linear-gradient(135deg, var(--color-surface) 0%, rgba(92, 67, 244, 0.08) 100%);
    }

    [data-theme="dark"] #View_AttributeList .section-header .form-section-title {
        color: var(--color-primary-light-solid);
    }
    /* --- Dark Mode: Variant Wizard Define Attributes --- */
    [data-theme="dark"] #Dlg_VariantWizard .attribute-section.already-varying {
        background: var(--color-surface);
    }

    [data-theme="dark"] #Dlg_VariantWizard .checkbox-item {
        background: var(--color-surface);
    }

        [data-theme="dark"] #Dlg_VariantWizard .checkbox-item:hover {
            background: linear-gradient(135deg, var(--color-surface) 0%, rgba(92, 67, 244, 0.06) 100%);
        }

        [data-theme="dark"] #Dlg_VariantWizard .checkbox-item:has(input:checked) {
            background: linear-gradient(135deg, rgba(92, 67, 244, 0.08) 0%, var(--color-surface) 100%);
        }

        [data-theme="dark"] #Dlg_VariantWizard .checkbox-item input[type="checkbox"] {
            background: var(--color-surface-darkened);
            border-color: var(--color-border-medium);
        }

        [data-theme="dark"] #Dlg_VariantWizard .checkbox-item .checkbox-item-hint::before {
            background: var(--color-secondary);
        }
    /* ==========================================================================
   Detail Section Context Menu Trigger
   Matches listing-card context-menu-trigger styling for consistency
   ========================================================================== */

    .detail-section .context-menu-trigger {
        flex-shrink: 0;
        margin-left: auto;
    }

        .detail-section .context-menu-trigger .menu-button {
            width: 32px;
            height: 32px;
            background: var(--color-background);
            border: 1px solid var(--color-border-medium, var(--color-border));
            border-radius: var(--border-radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition-fast);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

            .detail-section .context-menu-trigger .menu-button:hover {
                background: var(--color-primary-bg-subtle);
                border-color: var(--color-border-primary-subtle);
                box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.15);
            }

            .detail-section .context-menu-trigger .menu-button .menu-icon {
                width: 16px;
                height: 16px;
                background-image: url(/images/icon/more-vert-black.svg);
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                opacity: 0.7;
            }

            .detail-section .context-menu-trigger .menu-button:hover .menu-icon {
                opacity: 0.85;
            }
    /* Dark mode */
    [data-theme="dark"] .detail-section .context-menu-trigger .menu-button {
        background: var(--color-surface);
        border-color: var(--color-border);
    }

        [data-theme="dark"] .detail-section .context-menu-trigger .menu-button .menu-icon {
            filter: invert(1);
        }
    /* Caption Dialog */
    #Dlg_Caption .tip-info {
        align-self: center;
    }

    #Dlg_Caption .form-group {
        align-self: center;
        margin: var(--spacing-lg) 0;
    }
    /* ==========================================================================
   PAYMENT METHOD PICKER (View_PaymentMethod)
   ============================================================================
   Refined payment method selection with card brand icons, selection states,
   and "curated warmth" aesthetic. Extends selection-card pattern.
   ========================================================================== */
    /* Payment method list container */
    .payment-method-list {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
        padding: var(--spacing-xs);
    }
    /* Payment card - extends selection-card with horizontal row layout */
    .payment-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-md) var(--spacing-lg);
        border: 2px solid var(--color-border);
        border-radius: var(--border-radius-md);
        background: var(--gradient-card-base);
        cursor: pointer;
        position: relative;
        transition: border-color 0.25s var(--ease-elegant), background-color 0.25s var(--ease-elegant), box-shadow 0.3s var(--ease-elegant), transform 0.25s var(--ease-elegant);
    }
        /* Hover lift with purple-tinted shadow */
        .payment-card:hover {
            border-color: var(--color-primary-muted);
            background: rgba(var(--color-surface-primary-tint-rgb), 0.6);
            box-shadow: 0 4px 16px rgba(92, 67, 244, 0.1), 0 2px 6px rgba(0, 0, 0, 0.04);
            transform: translateY(-2px);
        }
        /* Selected state - primary border with subtle glow */
        .payment-card.selected {
            border-color: var(--color-primary);
            background: var(--color-surface-primary-tint);
            box-shadow: 0 0 0 1px var(--color-primary-muted), 0 4px 20px rgba(92, 67, 244, 0.15), 0 2px 8px rgba(92, 67, 244, 0.08);
        }

            .payment-card.selected:hover {
                transform: translateY(-1px);
                box-shadow: 0 0 0 1px var(--color-primary-muted), 0 6px 24px rgba(92, 67, 244, 0.18), 0 3px 10px rgba(92, 67, 244, 0.1);
            }
    /* Card brand icon container */
    .payment-card-icon {
        flex-shrink: 0;
        width: 48px;
        height: 32px;
        border-radius: 4px;
        background-color: var(--color-surface);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        border: 1px solid var(--color-border);
        transition: border-color 0.2s var(--ease-out);
    }

    .payment-card:hover .payment-card-icon,
    .payment-card.selected .payment-card-icon {
        border-color: var(--color-border-primary-subtle);
    }
    /* Card brand icons - SVG data URIs for immediate availability */
    .payment-card[card-type="visa"] .payment-card-icon,
    .payment-card[card-type="Visa"] .payment-card-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Crect fill='%231a1f71' width='48' height='32' rx='4'/%3E%3Cpath fill='%23fff' d='M19.5 21h-2.8l1.8-11h2.8l-1.8 11zm11.4-10.7c-.6-.2-1.4-.4-2.5-.4-2.8 0-4.7 1.5-4.7 3.6 0 1.6 1.4 2.5 2.5 3 1.1.5 1.5.9 1.5 1.4 0 .7-.9 1.1-1.7 1.1-1.1 0-1.8-.2-2.7-.6l-.4-.2-.4 2.5c.7.3 1.9.6 3.2.6 2.9 0 4.9-1.5 4.9-3.7 0-1.2-.7-2.2-2.3-3-.9-.5-1.5-.8-1.5-1.3 0-.4.5-.9 1.5-.9.9 0 1.5.2 2 .4l.2.1.4-2.6zm7.1-.3h-2.2c-.7 0-1.2.2-1.5.9l-4.2 10.1h2.9l.6-1.6h3.6l.3 1.6h2.6l-2.1-11zm-3.5 7.1c.2-.6 1.1-3 1.1-3s.2-.6.4-1l.2.9.7 3.1h-2.4zM15.6 10l-2.7 7.5-.3-1.5c-.5-1.7-2.1-3.6-3.9-4.5l2.5 9.5h3l4.4-11h-3z'/%3E%3Cpath fill='%23f9a533' d='M10.4 10H5.9l-.1.3c3.5.9 5.9 3.1 6.8 5.7l-1-5c-.2-.7-.7-.9-1.2-1z'/%3E%3C/svg%3E");
    }

    .payment-card[card-type="mastercard"] .payment-card-icon,
    .payment-card[card-type="Mastercard"] .payment-card-icon,
    .payment-card[card-type="MasterCard"] .payment-card-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Crect fill='%232b2b2b' width='48' height='32' rx='4'/%3E%3Ccircle fill='%23eb001b' cx='18' cy='16' r='9'/%3E%3Ccircle fill='%23f79e1b' cx='30' cy='16' r='9'/%3E%3Cpath fill='%23ff5f00' d='M24 9.3c-2.1 1.6-3.4 4.1-3.4 6.7s1.3 5.1 3.4 6.7c2.1-1.6 3.4-4.1 3.4-6.7s-1.3-5.1-3.4-6.7z'/%3E%3C/svg%3E");
    }

    .payment-card[card-type="amex"] .payment-card-icon,
    .payment-card[card-type="Amex"] .payment-card-icon,
    .payment-card[card-type="American Express"] .payment-card-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Crect fill='%23006fcf' width='48' height='32' rx='4'/%3E%3Cpath fill='%23fff' d='M8 12l-3 8h3.2l.4-1.1h1.9l.4 1.1h3.5v-.9l.3.9h1.8l.3-.9v.9h7.4l.9-1 .8 1h3.8l-2.5-4 2.5-4h-3.7l-.9.9-.8-.9h-8.1l-.6 1.4-.6-1.4h-3.2v.9l-.4-.9H8zm1.3 1.3h1.5l1.7 4v-4h1.7l1.3 3 1.2-3h1.7v5.4h-1l-.1-4.2-1.4 4.2h-1l-1.5-4.2v4.2h-2.1l-.4-1.1H8.8l-.4 1.1h-1.2l1.9-5.4h.2zm14.3 0h4.1l1.3 1.4 1.3-1.4h1.3l-2 2.1 2 2h-1.4l-1.3-1.4-1.3 1.4h-4v-4.1zm1.1 1v.9h2.2v.8h-2.2v1h2.5l1.1-1.3-1-1.4h-2.6zM9.9 14.2l-.6 1.5h1.2l-.6-1.5z'/%3E%3C/svg%3E");
    }

    .payment-card[card-type="discover"] .payment-card-icon,
    .payment-card[card-type="Discover"] .payment-card-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Crect fill='%23fff' width='48' height='32' rx='4'/%3E%3Crect fill='%23f47216' x='0' y='18' width='48' height='14' rx='0 0 4 4'/%3E%3Cellipse fill='%23f47216' cx='30' cy='16' rx='8' ry='7'/%3E%3Ctext x='6' y='15' font-family='Arial' font-size='6' font-weight='bold' fill='%23231f20'%3EDISCOVER%3C/text%3E%3C/svg%3E");
    }
    /* Generic card fallback */
    .payment-card:not([card-type]) .payment-card-icon,
    .payment-card[card-type=""] .payment-card-icon,
    .payment-card[card-type="unknown"] .payment-card-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Crect fill='%23e5e7eb' width='48' height='32' rx='4'/%3E%3Crect fill='%239ca3af' x='4' y='8' width='12' height='8' rx='1'/%3E%3Crect fill='%239ca3af' x='4' y='20' width='20' height='2' rx='1'/%3E%3Crect fill='%23d1d5db' x='4' y='24' width='14' height='2' rx='1'/%3E%3C/svg%3E");
    }
    /* Card info section */
    .payment-card-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0; /* Allow text truncation */
    }

    .payment-card-name {
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-warm);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .payment-card-number {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-warm-medium);
        font-family: var(--font-family-mono);
        letter-spacing: 0.02em;
    }

    .payment-card-expires {
        font-size: var(--font-size-xs);
        color: var(--color-text-warm-muted);
    }
        /* Expired card styling */
        .payment-card-expires.expired {
            color: var(--color-error);
            font-weight: var(--font-weight-semibold);
        }

    .payment-card.payment-card-expired {
        opacity: 0.7;
        border-color: var(--color-error-muted);
    }

        .payment-card.payment-card-expired:hover {
            border-color: var(--color-error);
        }

        .payment-card.payment-card-expired .payment-card-icon {
            filter: grayscale(0.5);
        }
    /* Selection indicator - radio with custom styling */
    .payment-card .selection-indicator {
        flex-shrink: 0;
        position: relative;
        width: 22px;
        height: 22px;
    }

        .payment-card .selection-indicator input[type="radio"] {
            appearance: none;
            -webkit-appearance: none;
            width: 22px;
            height: 22px;
            border: 2px solid var(--color-border-medium);
            border-radius: 50%;
            background: var(--color-background);
            cursor: pointer;
            transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out), box-shadow 0.25s var(--ease-elegant);
        }

    .payment-card:hover .selection-indicator input[type="radio"] {
        border-color: var(--color-primary-muted);
    }

    .payment-card.selected .selection-indicator input[type="radio"] {
        border-color: var(--color-primary);
        background: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-light);
    }
        /* Checkmark inside radio when selected */
        .payment-card.selected .selection-indicator input[type="radio"]::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 5px;
            border: 2px solid white;
            border-top: none;
            border-right: none;
            transform: translate(-50%, -60%) rotate(-45deg);
        }
    /* Add new card button - dashed pattern */
    .payment-add-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md) var(--spacing-lg);
        border: 2px dashed var(--color-border-medium);
        border-radius: var(--border-radius-md);
        background: transparent;
        cursor: pointer;
        transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
        color: var(--color-text-warm-muted);
    }

        .payment-add-card:hover {
            border-color: var(--color-primary);
            background: var(--color-primary-lighter);
            color: var(--color-primary);
        }

        .payment-add-card:active {
            transform: scale(0.98);
        }

        .payment-add-card .add-icon {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: var(--font-weight-light);
            line-height: 1;
            border-radius: 50%;
            background: var(--color-surface);
            border: 1px solid currentColor;
            transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
        }

        .payment-add-card:hover .add-icon {
            background: var(--color-primary);
            border-color: var(--color-primary);
            color: white;
        }

        .payment-add-card .add-label {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
        }
    /* Empty state styling */
    .payment-method-list[ux-empty] .payment-add-card {
        padding: var(--spacing-xl) var(--spacing-lg);
        border-style: solid;
        background: var(--gradient-surface-primary);
    }
    /* Dialog body scroll container adjustments for payment method view */
    #View_PaymentMethod .dialog-body.dialog-scroll,
    #View_PaymentMethod .dialog-body .dialog-scroll {
        padding: var(--spacing-md);
    }

    #View_PaymentMethod .dialog-subtitle {
        font-size: var(--font-size-sm);
        color: var(--color-text-warm-muted);
        margin-bottom: var(--spacing-md);
        text-align: center;
    }
    /* Animation for new cards being added */
    @keyframes paymentCardSlideIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .payment-card.animate-in {
        animation: paymentCardSlideIn 0.35s var(--ease-elegant) forwards;
    }
    /* Staggered animation delays for list items */
    .payment-card:nth-child(1) {
        animation-delay: 0s;
    }

    .payment-card:nth-child(2) {
        animation-delay: 0.05s;
    }

    .payment-card:nth-child(3) {
        animation-delay: 0.1s;
    }

    .payment-card:nth-child(4) {
        animation-delay: 0.15s;
    }

    .payment-card:nth-child(5) {
        animation-delay: 0.2s;
    }
    /* Dark mode adjustments */
    [data-theme="dark"] .payment-card {
        background: var(--color-surface);
        border-color: var(--color-border);
    }

        [data-theme="dark"] .payment-card:hover {
            background: var(--color-surface-elevated);
            border-color: var(--color-primary-muted);
        }

        [data-theme="dark"] .payment-card.selected {
            background: rgba(92, 67, 244, 0.12);
            border-color: var(--color-primary);
        }

    [data-theme="dark"] .payment-card-icon {
        background-color: var(--color-surface-elevated);
        border-color: var(--color-border-medium);
    }

    [data-theme="dark"] .payment-add-card {
        border-color: var(--color-border);
        color: var(--color-text-muted);
    }

        [data-theme="dark"] .payment-add-card:hover {
            border-color: var(--color-primary);
            background: rgba(92, 67, 244, 0.1);
            color: var(--color-primary-light-solid);
        }

        [data-theme="dark"] .payment-add-card .add-icon {
            background: var(--color-surface);
        }
    /* Mobile responsive adjustments */
    @media (max-width: 480px) {
        .payment-card {
            padding: var(--spacing-sm) var(--spacing-md);
            gap: var(--spacing-sm);
        }

        .payment-card-icon {
            width: 40px;
            height: 26px;
        }

        .payment-card-name {
            font-size: var(--font-size-sm);
        }

        .payment-card-number {
            font-size: var(--font-size-xs);
        }

        .payment-card-expires {
            font-size: 11px;
        }
    }
    /* ==========================================================================
   COLLECTION MANAGER DIALOG
   Phase 6: Full collection management with grid, detail, and context menus
   ========================================================================== */
    /* Collection Manager Dialog */
    .collection-manager-dialog .manage-header {
        text-align: center;
        padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
    }

    .collection-manager-dialog .manage-headline {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
        margin-bottom: var(--spacing-xs);
    }

    .collection-manager-dialog .manage-subtitle {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
    }
    /* Collections Grid */
    .collection-manager-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }
    /* Collection Card */
    .collection-manager-card {
        position: relative;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        transition: all 0.2s var(--ease-out);
        cursor: pointer;
    }

        .collection-manager-card:hover {
            border-color: var(--color-primary-muted);
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }

        .collection-manager-card .collection-card-cover {
            aspect-ratio: 1;
            background: var(--color-surface-inset);
            overflow: hidden;
        }

            .collection-manager-card .collection-card-cover img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        .collection-manager-card .collection-card-info {
            padding: var(--spacing-sm);
        }

        .collection-manager-card .collection-card-name {
            display: block;
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            color: var(--color-text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .collection-manager-card .collection-card-count {
            display: block;
            font-size: var(--font-size-xs);
            color: var(--color-text-muted);
            margin-top: 2px;
        }
        /* Keyboard navigation focus ring */
        .collection-manager-card:focus {
            outline: none;
            box-shadow: var(--shadow-focus-ring);
        }
        /* Active state for Forms.List keyboard navigation */
        .collection-manager-card.active {
            outline: 2px solid var(--color-primary-muted);
            outline-offset: 2px;
        }
    /* Add Collection Card */
    .collection-manager-grid .collection-add-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 120px;
        background: transparent;
        border: 2px dashed var(--color-border);
        border-radius: var(--radius-lg);
        gap: var(--spacing-sm);
        color: var(--color-text-muted);
        transition: all 0.2s var(--ease-out);
    }

        .collection-manager-grid .collection-add-card:hover {
            border-color: var(--color-primary);
            color: var(--color-primary);
            background: var(--color-primary-subtle);
        }

        .collection-manager-grid .collection-add-card .add-text {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
        }
    /* Limit Indicator */
    .collection-limit-indicator {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-xs);
        padding: var(--spacing-sm);
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
    }
    /* Empty State */
    .collection-manager-dialog .empty-state-card {
        text-align: center;
        padding: var(--spacing-xl) var(--spacing-lg);
        background: var(--gradient-surface-primary);
        border-radius: var(--radius-lg);
        margin: var(--spacing-md);
    }

    .collection-manager-dialog .empty-state-icon {
        font-size: 48px;
        color: var(--color-text-muted);
        margin-bottom: var(--spacing-md);
    }

    .collection-manager-dialog .empty-state-title {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
        margin-bottom: var(--spacing-sm);
    }

    .collection-manager-dialog .empty-state-text {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
        margin-bottom: var(--spacing-lg);
    }
    /* Detail View */
    .collection-manager-dialog .content.detail .form-panel {
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--color-border-subtle);
    }

        .collection-manager-dialog .content.detail .form-panel:last-child {
            border-bottom: none;
        }

    .collection-manager-dialog .cover-photo-selector {
        display: flex;
        gap: var(--spacing-md);
        align-items: flex-start;
    }

    .collection-manager-dialog .cover-preview {
        width: 80px;
        height: 80px;
        border-radius: var(--radius-md);
        overflow: hidden;
        background: var(--color-surface-inset);
        flex-shrink: 0;
    }

        .collection-manager-dialog .cover-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .collection-manager-dialog .cover-options {
        flex: 1;
    }

    .collection-manager-dialog .section-controls {
        margin-bottom: var(--spacing-sm);
    }
    /* Items Grid */
    .collection-items-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: var(--spacing-sm);
    }

    .collection-item-card {
        position: relative;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        overflow: hidden;
        cursor: pointer;
        transition: all 0.2s var(--ease-out);
    }

        .collection-item-card:hover {
            border-color: var(--color-primary-muted);
        }

        .collection-item-card .drag-handle {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 24px;
            background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
            opacity: 0;
            transition: opacity 0.2s;
            cursor: grab;
            z-index: 1;
        }

    .collection-items-grid.reorder-mode .collection-item-card .drag-handle {
        opacity: 1;
    }

    .collection-item-card .item-card-photo {
        aspect-ratio: 1;
        background: var(--color-surface-inset);
    }

        .collection-item-card .item-card-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .collection-item-card .item-card-info {
        padding: var(--spacing-xs);
    }

    .collection-item-card .item-card-title {
        display: block;
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-medium);
        color: var(--color-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .collection-item-card .item-card-status {
        display: block;
        font-size: 10px;
        color: var(--color-text-muted);
    }

        .collection-item-card .item-card-status.status-published {
            color: var(--color-success);
        }

        .collection-item-card .item-card-status.status-draft {
            color: var(--color-warning);
        }

    .collection-item-card .item-card-menu {
        position: absolute;
        top: var(--spacing-xs);
        right: var(--spacing-xs);
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.9);
        border-radius: var(--radius-full);
        opacity: 0;
        transition: opacity 0.2s var(--ease-out);
    }

    .collection-item-card:hover .item-card-menu {
        opacity: 1;
    }
    /* Empty Items State */
    .empty-items-card {
        padding: var(--spacing-lg);
        text-align: center;
        background: var(--color-surface-inset);
        border-radius: var(--radius-md);
    }

    .empty-items-text {
        font-size: var(--font-size-sm);
        color: var(--color-text);
        margin-bottom: var(--spacing-xs);
    }

    .empty-items-hint {
        font-size: var(--font-size-xs);
        color: var(--color-text-muted);
    }
    /* Choose Cover State */
    .cover-items-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }

    .cover-item {
        position: relative;
        background: var(--color-surface);
        border: 2px solid var(--color-border);
        border-radius: var(--radius-md);
        overflow: hidden;
        cursor: pointer;
        transition: all 0.2s var(--ease-out);
    }

        .cover-item:hover {
            border-color: var(--color-primary-muted);
        }

        .cover-item.selected {
            border-color: var(--color-primary);
        }

        .cover-item .cover-item-photo {
            aspect-ratio: 1;
            background: var(--color-surface-inset);
        }

            .cover-item .cover-item-photo img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        .cover-item .cover-item-title {
            display: block;
            padding: var(--spacing-xs);
            font-size: var(--font-size-xs);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .cover-item .selection-badge {
            position: absolute;
            top: var(--spacing-xs);
            right: var(--spacing-xs);
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-primary);
            color: white;
            border-radius: var(--radius-full);
            opacity: 0;
            transform: scale(0.8);
            transition: all 0.2s var(--ease-out);
        }

        .cover-item.selected .selection-badge {
            opacity: 1;
            transform: scale(1);
        }
    /* ==========================================================================
   Collection Action Menus - Compact Drawer Override
   ==========================================================================
   Match PhotoManager action menu styling: 380px compact side panel
   with slide-in animation. */
    /* Force compact width in nested dialog context */
    #Dlg_CollectionManager .dialogs #Dlg_CollectionActionMenu,
    #Dlg_CollectionManager .dialogs #Dlg_CollectionItemActionMenu,
    body #Interactions .view .dialogs #Dlg_CollectionActionMenu,
    body #Interactions .view .dialogs #Dlg_CollectionItemActionMenu {
        width: 380px;
        max-width: calc(100vw - var(--spacing-xl));
        left: auto;
        right: 0;
        border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12), -2px 0 8px rgba(0, 0, 0, 0.08);
        animation: collectionMenuSlideIn 0.25s var(--ease-elegant) both;
    }

    @keyframes collectionMenuSlideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    /* Mobile: full width with top border radius */
    @media (max-width: 420px) {
        #Dlg_CollectionManager .dialogs #Dlg_CollectionActionMenu,
        #Dlg_CollectionManager .dialogs #Dlg_CollectionItemActionMenu,
        body #Interactions .view .dialogs #Dlg_CollectionActionMenu,
        body #Interactions .view .dialogs #Dlg_CollectionItemActionMenu {
            width: 100%;
            max-width: 100%;
            border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
            top: auto;
            bottom: 0;
            animation: collectionMenuSlideUp 0.25s var(--ease-elegant) both;
        }

        @keyframes collectionMenuSlideUp {
            from {
                transform: translateY(100%);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
    }
    /* ==========================================================================
   Collection Action Menu - Domain-specific styling (preview info only)
   Note: Context menu styling comes from component-library.css Section 88
   ========================================================================== */
    /* Preview info header (domain-specific) */
    #Dlg_CollectionActionMenu .collection-preview-info,
    #Dlg_CollectionItemActionMenu .item-preview-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: var(--spacing-md);
        text-align: center;
    }

    #Dlg_CollectionActionMenu .collection-preview,
    #Dlg_CollectionItemActionMenu .item-preview {
        width: 80px;
        height: 80px;
        border-radius: var(--radius-md);
        overflow: hidden;
        background: var(--color-surface-inset);
    }

        #Dlg_CollectionActionMenu .collection-preview img,
        #Dlg_CollectionItemActionMenu .item-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    #Dlg_CollectionActionMenu .collection-name,
    #Dlg_CollectionItemActionMenu .item-name {
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
        margin-top: var(--spacing-sm);
    }

    #Dlg_CollectionActionMenu .collection-count {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
    }
    /* Confirmation subview */
    #Dlg_CollectionActionMenu .action-menu-confirm {
        padding: var(--spacing-lg);
    }

    #Dlg_CollectionActionMenu .confirm-prompt {
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-medium);
        text-align: center;
        margin: 0 0 var(--spacing-md) 0;
    }

    #Dlg_CollectionActionMenu .confirm-hint {
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
        text-align: center;
        margin: 0 0 var(--spacing-md) 0;
    }
    /* ==========================================================================
   Collection Card - No Cover Placeholder
   ========================================================================== */

    .collection-manager-card .collection-card-cover {
        position: relative;
    }

        .collection-manager-card .collection-card-cover .no-cover-placeholder {
            position: absolute;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            background: var(--color-surface-inset);
            border-radius: var(--radius-md);
        }

        .collection-manager-card .collection-card-cover.no-cover .no-cover-placeholder {
            display: flex;
        }

        .collection-manager-card .collection-card-cover.no-cover .cover-image {
            display: none;
        }

    .collection-manager-card .no-cover-placeholder .icon-svg {
        color: var(--color-text-muted);
        opacity: 0.5;
    }
    /* Animation keyframes */
    @keyframes collectionCardSlideIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .collection-manager-card,
    .collection-item-card {
        animation: collectionCardSlideIn 0.35s var(--ease-elegant) forwards;
    }
    /* Mobile responsive */
    @media (max-width: 480px) {
        .collection-manager-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: var(--spacing-sm);
        }

        .collection-items-grid {
            grid-template-columns: repeat(3, 1fr);
        }

        .cover-items-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }
    /* ==========================================================================
   PAYOUT HISTORY PAGE
   ========================================================================== */

    #Mod_PayoutHistory {
        max-width: var(--container-max-width, 1200px);
        margin: 0 auto;
        padding: var(--spacing-xl) var(--spacing-lg);
    }

        #Mod_PayoutHistory .section-title {
            font-family: var(--font-family-display, var(--font-family-base));
            font-size: var(--font-size-xxl, 1.75rem);
            font-weight: var(--font-weight-bold);
            color: var(--color-text);
            margin: 0 0 var(--spacing-lg);
        }
        /* Breadcrumb navigation */
        #Mod_PayoutHistory .breadcrumb-nav {
            display: flex;
            align-items: center;
            gap: var(--spacing-xs);
            margin-bottom: var(--spacing-md);
            font-size: var(--font-size-sm);
        }

        #Mod_PayoutHistory .breadcrumb-link {
            color: var(--color-primary);
            text-decoration: none;
            transition: color 0.2s var(--ease-elegant);
        }

            #Mod_PayoutHistory .breadcrumb-link:hover {
                color: var(--color-primary-hover, var(--color-primary));
                text-decoration: underline;
            }

        #Mod_PayoutHistory .breadcrumb-separator {
            color: var(--color-text-muted);
        }

        #Mod_PayoutHistory .breadcrumb-current {
            color: var(--color-text-muted);
        }
        /* Stats grid override - single card left-aligned */
        #Mod_PayoutHistory .payout-stats {
            justify-content: flex-start;
            margin-bottom: var(--spacing-xl);
        }

            #Mod_PayoutHistory .payout-stats .stat-card {
                min-width: 200px;
                max-width: 300px;
            }

            #Mod_PayoutHistory .payout-stats .stat-detail {
                font-size: var(--font-size-sm);
                color: var(--color-text-muted);
                margin-top: var(--spacing-xs);
            }
        /* Filters row */
        #Mod_PayoutHistory .payout-filters {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            gap: var(--spacing-md);
            margin-bottom: var(--spacing-lg);
            padding: var(--spacing-lg);
            background: var(--color-surface, var(--color-background));
            border-radius: var(--border-radius-card);
            border: 1px solid var(--color-border);
        }

        #Mod_PayoutHistory .filter-field {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-xs);
        }

        #Mod_PayoutHistory .form-label {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            color: var(--color-text-muted);
        }

        #Mod_PayoutHistory .form-select,
        #Mod_PayoutHistory .form-input {
            padding: var(--spacing-sm) var(--spacing-md);
            border: 1px solid var(--color-border-medium, var(--color-border));
            border-radius: var(--border-radius-md, 6px);
            font-size: var(--font-size-base);
            background: var(--color-background);
            color: var(--color-text);
            transition: border-color 0.2s var(--ease-elegant);
            min-width: 140px;
        }

            #Mod_PayoutHistory .form-select:focus,
            #Mod_PayoutHistory .form-input:focus {
                outline: none;
                border-color: var(--color-primary);
                box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 92, 67, 244), 0.1);
            }

        #Mod_PayoutHistory .filter-actions {
            display: flex;
            gap: var(--spacing-sm);
            align-items: center;
        }
        /* Table overrides */
        #Mod_PayoutHistory .table-container {
            margin-bottom: var(--spacing-lg);
        }

        #Mod_PayoutHistory .data-table .cell-right {
            text-align: right;
            font-variant-numeric: tabular-nums;
        }

        #Mod_PayoutHistory .data-table .table-link {
            color: var(--color-primary);
            text-decoration: none;
            font-weight: var(--font-weight-medium);
        }

            #Mod_PayoutHistory .data-table .table-link:hover {
                text-decoration: underline;
            }
        /* Empty state */
        #Mod_PayoutHistory .payout-empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: var(--spacing-xxl, 3rem) var(--spacing-lg);
            color: var(--color-text-muted);
        }

            #Mod_PayoutHistory .payout-empty-state .empty-icon {
                opacity: 0.4;
                margin-bottom: var(--spacing-md);
                color: var(--color-primary);
            }

            #Mod_PayoutHistory .payout-empty-state .empty-title {
                font-size: var(--font-size-lg);
                font-weight: var(--font-weight-semibold);
                color: var(--color-text);
                margin: 0 0 var(--spacing-sm);
            }

            #Mod_PayoutHistory .payout-empty-state .empty-message {
                max-width: 400px;
                line-height: 1.6;
                margin: 0;
                font-size: var(--font-size-base);
            }
        /* Loading state */
        #Mod_PayoutHistory .payout-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--spacing-md);
            padding: var(--spacing-xxl, 3rem);
            color: var(--color-text-muted);
        }

        #Mod_PayoutHistory .loading-spinner {
            width: 32px;
            height: 32px;
            border: 3px solid var(--color-border);
            border-top-color: var(--color-primary);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        /* Pagination */
        #Mod_PayoutHistory .payout-pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--spacing-xs);
            padding: var(--spacing-md) 0;
        }

        #Mod_PayoutHistory .page-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 36px;
            height: 36px;
            padding: 0 var(--spacing-sm);
            border-radius: var(--border-radius-md, 6px);
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            color: var(--color-text);
            cursor: pointer;
            transition: all 0.2s var(--ease-elegant);
            user-select: none;
        }

            #Mod_PayoutHistory .page-btn:hover {
                background: var(--color-surface, rgba(0,0,0,0.04));
                color: var(--color-primary);
            }

            #Mod_PayoutHistory .page-btn.active {
                background: var(--color-primary);
                color: var(--color-background);
                box-shadow: var(--shadow-sm);
            }

        #Mod_PayoutHistory .page-ellipsis {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 36px;
            height: 36px;
            color: var(--color-text-muted);
            font-size: var(--font-size-sm);
        }

        #Mod_PayoutHistory .page-info {
            margin-left: var(--spacing-md);
            font-size: var(--font-size-sm);
            color: var(--color-text-muted);
        }
    /* Responsive */
    @media (max-width: 680px) {
        #Mod_PayoutHistory {
            padding: var(--spacing-md);
        }

            #Mod_PayoutHistory .payout-filters {
                flex-direction: column;
                align-items: stretch;
            }

            #Mod_PayoutHistory .form-select,
            #Mod_PayoutHistory .form-input {
                min-width: 100%;
            }

            #Mod_PayoutHistory .filter-actions {
                justify-content: flex-end;
            }

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

                #Mod_PayoutHistory .payout-stats .stat-card {
                    max-width: none;
                }
    }