/* ui/weline-foundation.css */
/* Weline UI source: css/foundation.css */
/* Weline UI source: css/foundation.css */
@layer reset, tokens, base, layout, components, utilities, page;

@layer tokens {
    :root {
        color-scheme: light;
        /* Body canvas follows palette --color-bg-canvas; menus/panels use surface (bg-primary). */
        --weline-theme-canvas: var(--color-bg-canvas, #ffffff);
        --weline-chrome-body-bg: var(--color-bg-canvas, #ffffff);
        --weline-theme-body-bg: var(--weline-chrome-body-bg, var(--weline-theme-canvas));
        --weline-theme-surface: var(--color-bg-primary, #ffffff);
        --weline-theme-surface-raised: #ffffff;
        --weline-theme-surface-muted: #eef1f6;
        --weline-theme-surface-hover: var(--color-surface-hover, #f3f3f3);
        --weline-theme-text: #182230;
        --weline-theme-text-muted: #637083;
        --weline-theme-text-subtle: #8490a2;
        --weline-theme-border: #d7dde7;
        --weline-theme-border-strong: #aeb8c7;
        --weline-theme-primary: var(--color-primary, #315ee7);
        --weline-theme-primary-hover: var(--color-primary-hover, var(--color-primary-dark, #244bc4));
        --weline-theme-primary-surface: var(--color-primary-bg-subtle, color-mix(in srgb, var(--weline-theme-primary) 14%, transparent));
        --weline-theme-primary-emphasis: var(--color-primary-text-emphasis, var(--weline-theme-primary-hover));
        --weline-theme-primary-border: var(--color-primary-border-subtle, color-mix(in srgb, var(--weline-theme-primary) 34%, transparent));
        --weline-theme-on-primary: var(--color-on-primary, #ffffff);
        --weline-theme-secondary: var(--color-secondary, #475569);
        --weline-theme-secondary-hover: var(--color-secondary-hover, #334155);
        --weline-theme-secondary-surface: var(--color-secondary-bg-subtle, #e2e8f0);
        --weline-theme-secondary-border: var(--color-secondary-border-subtle, #94a3b8);
        --weline-theme-secondary-emphasis: var(--color-secondary-text-emphasis, #334155);
        --weline-theme-on-secondary: var(--color-on-secondary, #ffffff);
        --weline-theme-menu-panel-text-hover: var(--weline-chrome-menu-panel-text-hover, var(--color-primary, #ff9900));
        --weline-theme-menu-panel-surface-hover: color-mix(in srgb, var(--weline-theme-menu-panel-text-hover) 14%, #ffffff);
        --weline-chrome-mega-menu-top-hover-color: #ffffff;
        --weline-chrome-mega-menu-top-hover-bg: rgba(255, 255, 255, 0.15);
        --weline-theme-mega-menu-top-hover-color: var(--weline-chrome-mega-menu-top-hover-color, #ffffff);
        --weline-theme-mega-menu-top-hover-bg: var(--weline-chrome-mega-menu-top-hover-bg, rgba(255, 255, 255, 0.15));
        /* Stable light-on-dark surface text (Amazon footer etc). Never flip in dark mode. */
        --weline-theme-text-on-dark: #f8fafc;
        --weline-theme-text-on-dark-muted: #cbd5e1;
        --weline-theme-bg-dark: #131921;
        --weline-theme-bg-dark-secondary: #232f3e;
        /* Semantic status ramp: palette (--color-*) → component tokens. */
        --weline-theme-success: var(--color-success, #167a4d);
        --weline-theme-success-hover: var(--color-success-hover, #11633e);
        --weline-theme-success-surface: var(--color-success-bg-subtle, #e8f7ef);
        --weline-theme-success-border: var(--color-success-border-subtle, color-mix(in srgb, var(--weline-theme-success) 34%, transparent));
        --weline-theme-success-emphasis: var(--color-success-text-emphasis, var(--weline-theme-success-hover));
        --weline-theme-on-success: var(--color-on-success, #ffffff);
        --weline-theme-warning: var(--color-warning, #8a5a00);
        --weline-theme-warning-hover: var(--color-warning-hover, #704900);
        --weline-theme-warning-surface: var(--color-warning-bg-subtle, #fff5d6);
        --weline-theme-warning-border: var(--color-warning-border-subtle, color-mix(in srgb, var(--weline-theme-warning) 34%, transparent));
        --weline-theme-warning-emphasis: var(--color-warning-text-emphasis, var(--weline-theme-warning-hover));
        --weline-theme-on-warning: var(--color-on-warning, #241700);
        --weline-theme-danger: var(--color-danger, var(--color-error, #b42338));
        --weline-theme-danger-hover: var(--color-danger-hover, var(--color-error-hover, #991b1b));
        --weline-theme-danger-surface: var(--color-danger-bg-subtle, #fdecef);
        --weline-theme-danger-border: var(--color-danger-border-subtle, color-mix(in srgb, var(--weline-theme-danger) 34%, transparent));
        --weline-theme-danger-emphasis: var(--color-danger-text-emphasis, var(--weline-theme-danger-hover));
        --weline-theme-on-danger: var(--color-on-danger, #ffffff);
        --weline-theme-info: var(--color-info, #126d8b);
        --weline-theme-info-hover: var(--color-info-hover, #075985);
        --weline-theme-info-surface: var(--color-info-bg-subtle, #e6f6fb);
        --weline-theme-info-border: var(--color-info-border-subtle, color-mix(in srgb, var(--weline-theme-info) 34%, transparent));
        --weline-theme-info-emphasis: var(--color-info-text-emphasis, var(--weline-theme-info-hover));
        --weline-theme-on-info: var(--color-on-info, #ffffff);
        --weline-theme-focus: var(--color-primary, #315ee7);
        --weline-theme-focus-ring: 0 0 0 3px color-mix(in srgb, var(--weline-theme-focus) 26%, transparent);
        --weline-theme-overlay: rgba(9, 16, 29, 0.64);
        --weline-theme-shadow-sm: 0 1px 2px rgba(9, 16, 29, 0.08);
        --weline-theme-shadow-md: 0 10px 28px rgba(9, 16, 29, 0.14);
        --weline-theme-shadow-lg: 0 24px 64px rgba(9, 16, 29, 0.2);
        --weline-font-sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
        --weline-font-serif: Georgia, "Times New Roman", serif;
        --weline-font-display: var(--weline-font-sans);
        --weline-font-ui: var(--weline-font-sans);
        --weline-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
        --weline-font-size-xs: 0.75rem;
        --weline-font-size-sm: 0.875rem;
        --weline-font-size-md: 1rem;
        --weline-font-size-lg: 1.125rem;
        --weline-font-size-xl: 1.375rem;
        --weline-line-height: 1.5;
        --weline-space-1: 0.25rem;
        --weline-space-2: 0.5rem;
        --weline-space-3: 0.75rem;
        --weline-space-4: 1rem;
        --weline-space-5: 1.25rem;
        --weline-space-6: 1.5rem;
        --weline-space-8: 2rem;
        --weline-space-10: 2.5rem;
        --weline-space-12: 3rem;
        --weline-radius-sm: 0.375rem;
        --weline-radius-md: 0.625rem;
        --weline-radius-lg: 0.875rem;
        --weline-radius-round: 999px;
        /* Layout stability defaults (overridable via theme variables pack) */
        --weline-skeleton-card-min-h: 14rem;
        --weline-lines-lh: 1.4;
        --weline-control-height-sm: 2rem;
        --weline-control-height: 2.5rem;
        --weline-control-height-lg: 3rem;
        --weline-motion-fast: 120ms;
        --weline-motion-normal: 180ms;
        --weline-z-sticky-header: 100;
        --weline-z-menu: 700;
        --weline-z-overlay: 900;
        --weline-z-toast: 1100;
        /* Mini-cart drawer open: lift .weline-header stacking above store music (2147483001), below theme editor (2147483100+). */
        --weline-z-mini-cart-modal: 2147483010;
        /* Amazon / storefront body copy (overridden by theme variables/_colors.css when loaded) */
        --weline-chrome-body-text: #0f1111;
        --weline-chrome-body-text-secondary: #565959;
        --weline-chrome-body-text-muted: #666666;
        --weline-chrome-body-text-heading: #0f1111;
        --weline-chrome-body-link: #007185;
        --weline-chrome-body-link-hover: #c45500;
        --weline-theme-body-text: var(--weline-chrome-body-text);
        --weline-theme-body-text-secondary: var(--weline-chrome-body-text-secondary);
        --weline-theme-body-text-muted: var(--weline-chrome-body-text-muted);
        --weline-theme-body-text-heading: var(--weline-chrome-body-text-heading);
        --weline-theme-body-link: var(--weline-chrome-body-link);
        --weline-theme-body-link-hover: var(--weline-chrome-body-link-hover);
        --color-product-label-new-bg: #e6f2e6;
        --color-product-label-new-text: #007600;
        --color-product-label-sale-bg: #fde8ec;
        --color-product-label-sale-text: #9f1239;
        --color-product-label-demo-bg: #e8edf2;
        --color-product-label-demo-text: #475569;
        --weline-product-label-new-bg: var(--color-product-label-new-bg);
        --weline-product-label-new-text: var(--color-product-label-new-text);
        --weline-product-label-sale-bg: var(--color-product-label-sale-bg);
        --weline-product-label-sale-text: var(--color-product-label-sale-text);
        --weline-product-label-demo-bg: var(--color-product-label-demo-bg);
        --weline-product-label-demo-text: var(--color-product-label-demo-text);
        --weline-safe-area-top: env(safe-area-inset-top, 0px);
        --weline-safe-area-right: env(safe-area-inset-right, 0px);
        --weline-safe-area-bottom: env(safe-area-inset-bottom, 0px);
        --weline-safe-area-left: env(safe-area-inset-left, 0px);
    }

    [data-theme="dark"] {
        color-scheme: dark;
        --weline-theme-canvas: var(--color-bg-canvas, #101722);
        --weline-chrome-body-bg: var(--color-bg-canvas, #101722);
        --weline-theme-body-bg: var(--weline-chrome-body-bg, var(--weline-theme-canvas));
        --weline-theme-surface: var(--color-bg-primary, #182230);
        --weline-theme-surface-raised: #202c3c;
        --weline-theme-surface-muted: #253244;
        --weline-theme-surface-hover: #2d3b4f;
        --weline-theme-text: #edf2f8;
        --weline-theme-text-muted: #b0bccb;
        --weline-theme-text-subtle: #8997aa;
        --weline-theme-border: #36455a;
        --weline-theme-border-strong: #56677e;
        --weline-theme-primary: var(--color-primary, #7c9dff);
        --weline-theme-primary-hover: var(--color-primary-hover, #9ab3ff);
        --weline-theme-primary-surface: var(--color-primary-bg-subtle, color-mix(in srgb, var(--weline-theme-primary) 18%, transparent));
        --weline-theme-primary-emphasis: var(--color-primary-text-emphasis, var(--weline-theme-primary-hover));
        --weline-theme-primary-border: var(--color-primary-border-subtle, color-mix(in srgb, var(--weline-theme-primary) 42%, transparent));
        --weline-theme-on-primary: var(--color-on-primary, #101b3f);
        --weline-theme-secondary: var(--color-secondary, #cbd5e1);
        --weline-theme-secondary-hover: var(--color-secondary-hover, #e2e8f0);
        --weline-theme-secondary-surface: var(--color-secondary-bg-subtle, #1e293b);
        --weline-theme-secondary-border: var(--color-secondary-border-subtle, #64748b);
        --weline-theme-secondary-emphasis: var(--color-secondary-text-emphasis, #e2e8f0);
        --weline-theme-on-secondary: var(--color-on-secondary, #0f172a);
        --weline-theme-text-on-dark: #f8fafc;
        --weline-theme-text-on-dark-muted: #cbd5e1;
        --weline-theme-bg-dark: #131921;
        --weline-theme-bg-dark-secondary: #232f3e;
        --weline-theme-success: var(--color-success, #67d6a4);
        --weline-theme-success-hover: var(--color-success-hover, #8be3bd);
        --weline-theme-success-surface: var(--color-success-bg-subtle, #173c2d);
        --weline-theme-success-border: var(--color-success-border-subtle, color-mix(in srgb, var(--weline-theme-success) 42%, transparent));
        --weline-theme-success-emphasis: var(--color-success-text-emphasis, var(--weline-theme-success-hover));
        --weline-theme-on-success: var(--color-on-success, #09271c);
        --weline-theme-warning: var(--color-warning, #f5c15c);
        --weline-theme-warning-hover: var(--color-warning-hover, #ffd57e);
        --weline-theme-warning-surface: var(--color-warning-bg-subtle, #463514);
        --weline-theme-warning-border: var(--color-warning-border-subtle, color-mix(in srgb, var(--weline-theme-warning) 42%, transparent));
        --weline-theme-warning-emphasis: var(--color-warning-text-emphasis, var(--weline-theme-warning-hover));
        --weline-theme-on-warning: var(--color-on-warning, #2c1d00);
        --weline-theme-danger: var(--color-danger, var(--color-error, #ff8e9c));
        --weline-theme-danger-hover: var(--color-danger-hover, #fda4af);
        --weline-theme-danger-surface: var(--color-danger-bg-subtle, #4b2028);
        --weline-theme-danger-border: var(--color-danger-border-subtle, color-mix(in srgb, var(--weline-theme-danger) 42%, transparent));
        --weline-theme-danger-emphasis: var(--color-danger-text-emphasis, var(--weline-theme-danger-hover));
        --weline-theme-on-danger: var(--color-on-danger, #31080e);
        --weline-theme-info: var(--color-info, #70cbe8);
        --weline-theme-info-hover: var(--color-info-hover, #7dd3fc);
        --weline-theme-info-surface: var(--color-info-bg-subtle, #173b48);
        --weline-theme-info-border: var(--color-info-border-subtle, color-mix(in srgb, var(--weline-theme-info) 42%, transparent));
        --weline-theme-info-emphasis: var(--color-info-text-emphasis, var(--weline-theme-info-hover));
        --weline-theme-on-info: var(--color-on-info, #082f49);
        --weline-theme-focus: var(--color-primary-hover, #9ab3ff);
        --weline-theme-focus-ring: 0 0 0 3px color-mix(in srgb, var(--weline-theme-focus) 34%, transparent);
        --weline-theme-overlay: rgba(0, 0, 0, 0.78);
        --weline-theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
        --weline-theme-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.34);
        --weline-theme-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.44);
    }

    @media (prefers-color-scheme: dark) {
        [data-theme-preference="system"]:not([data-theme="light"]) {
            color-scheme: dark;
            --weline-theme-canvas: var(--color-bg-canvas, #101722);
            --weline-chrome-body-bg: var(--color-bg-canvas, #101722);
            --weline-theme-body-bg: var(--weline-chrome-body-bg, var(--weline-theme-canvas));
            --weline-theme-surface: var(--color-bg-primary, #182230);
            --weline-theme-surface-raised: #202c3c;
            --weline-theme-surface-muted: #253244;
            --weline-theme-surface-hover: #2d3b4f;
            --weline-theme-text: #edf2f8;
            --weline-theme-text-muted: #b0bccb;
            --weline-theme-text-subtle: #8997aa;
            --weline-theme-border: #36455a;
            --weline-theme-border-strong: #56677e;
            --weline-theme-primary: var(--color-primary, #7c9dff);
            --weline-theme-primary-hover: var(--color-primary-hover, #9ab3ff);
            --weline-theme-primary-surface: var(--color-primary-bg-subtle, color-mix(in srgb, var(--weline-theme-primary) 18%, transparent));
            --weline-theme-primary-emphasis: var(--color-primary-text-emphasis, var(--weline-theme-primary-hover));
            --weline-theme-primary-border: var(--color-primary-border-subtle, color-mix(in srgb, var(--weline-theme-primary) 42%, transparent));
            --weline-theme-on-primary: var(--color-on-primary, #101b3f);
            --weline-theme-secondary: var(--color-secondary, #cbd5e1);
            --weline-theme-secondary-hover: var(--color-secondary-hover, #e2e8f0);
            --weline-theme-secondary-surface: var(--color-secondary-bg-subtle, #1e293b);
            --weline-theme-secondary-border: var(--color-secondary-border-subtle, #64748b);
            --weline-theme-secondary-emphasis: var(--color-secondary-text-emphasis, #e2e8f0);
            --weline-theme-on-secondary: var(--color-on-secondary, #0f172a);
            --weline-theme-text-on-dark: #f8fafc;
            --weline-theme-text-on-dark-muted: #cbd5e1;
            --weline-theme-bg-dark: #131921;
            --weline-theme-bg-dark-secondary: #232f3e;
            --weline-theme-success: var(--color-success, #67d6a4);
            --weline-theme-success-hover: var(--color-success-hover, #8be3bd);
            --weline-theme-success-surface: var(--color-success-bg-subtle, #173c2d);
            --weline-theme-success-border: var(--color-success-border-subtle, color-mix(in srgb, var(--weline-theme-success) 42%, transparent));
            --weline-theme-success-emphasis: var(--color-success-text-emphasis, var(--weline-theme-success-hover));
            --weline-theme-on-success: var(--color-on-success, #09271c);
            --weline-theme-warning: var(--color-warning, #f5c15c);
            --weline-theme-warning-hover: var(--color-warning-hover, #ffd57e);
            --weline-theme-warning-surface: var(--color-warning-bg-subtle, #463514);
            --weline-theme-warning-border: var(--color-warning-border-subtle, color-mix(in srgb, var(--weline-theme-warning) 42%, transparent));
            --weline-theme-warning-emphasis: var(--color-warning-text-emphasis, var(--weline-theme-warning-hover));
            --weline-theme-on-warning: var(--color-on-warning, #2c1d00);
            --weline-theme-danger: var(--color-danger, var(--color-error, #ff8e9c));
            --weline-theme-danger-hover: var(--color-danger-hover, #fda4af);
            --weline-theme-danger-surface: var(--color-danger-bg-subtle, #4b2028);
            --weline-theme-danger-border: var(--color-danger-border-subtle, color-mix(in srgb, var(--weline-theme-danger) 42%, transparent));
            --weline-theme-danger-emphasis: var(--color-danger-text-emphasis, var(--weline-theme-danger-hover));
            --weline-theme-on-danger: var(--color-on-danger, #31080e);
            --weline-theme-info: var(--color-info, #70cbe8);
            --weline-theme-info-hover: var(--color-info-hover, #7dd3fc);
            --weline-theme-info-surface: var(--color-info-bg-subtle, #173b48);
            --weline-theme-info-border: var(--color-info-border-subtle, color-mix(in srgb, var(--weline-theme-info) 42%, transparent));
            --weline-theme-info-emphasis: var(--color-info-text-emphasis, var(--weline-theme-info-hover));
            --weline-theme-on-info: var(--color-on-info, #082f49);
            --weline-theme-focus: var(--color-primary-hover, #9ab3ff);
            --weline-theme-focus-ring: 0 0 0 3px color-mix(in srgb, var(--weline-theme-focus) 34%, transparent);
            --weline-theme-overlay: rgba(0, 0, 0, 0.78);
            --weline-theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
            --weline-theme-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.34);
            --weline-theme-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.44);
        }
    }

    [data-w-area="backend"] {
        --weline-theme-canvas: var(--backend-color-bg-canvas, var(--weline-theme-canvas));
        --weline-chrome-body-bg: var(--backend-color-bg-body, var(--weline-chrome-body-bg));
        --weline-theme-body-bg: var(--backend-color-bg-body, var(--weline-theme-body-bg));
        --weline-theme-surface: var(--backend-color-card-bg, var(--weline-theme-surface));
        --weline-theme-surface-raised: var(--backend-color-bg-primary, var(--weline-theme-surface-raised));
        --weline-theme-surface-muted: var(--backend-color-bg-secondary, var(--weline-theme-surface-muted));
        --weline-theme-surface-hover: var(--backend-color-table-bg-hover, var(--backend-color-bg-tertiary, var(--weline-theme-surface-hover)));
        --weline-theme-text: var(--backend-color-text-primary, var(--weline-theme-text));
        --weline-theme-text-muted: var(--backend-color-text-secondary, var(--weline-theme-text-muted));
        --weline-theme-text-subtle: var(--backend-color-text-tertiary, var(--weline-theme-text-subtle));
        --weline-theme-border: var(--backend-color-border-default, var(--weline-theme-border));
        --weline-theme-border-strong: var(--backend-color-border-emphasis, var(--weline-theme-border-strong));
        --weline-theme-primary: var(--backend-color-primary, var(--weline-theme-primary));
        --weline-theme-primary-hover: var(--backend-color-primary-hover, var(--weline-theme-primary-hover));
        --weline-theme-primary-surface: var(--backend-color-primary-bg-subtle, var(--weline-theme-primary-surface));
        --weline-theme-primary-emphasis: var(--backend-color-primary-text-emphasis, var(--weline-theme-primary-emphasis));
        --weline-theme-primary-border: var(--backend-color-primary-border-subtle, var(--weline-theme-primary-border));
        --weline-theme-on-primary: var(--backend-color-on-primary, var(--weline-theme-on-primary));
        --weline-theme-secondary: var(--backend-color-secondary, var(--weline-theme-secondary));
        --weline-theme-secondary-hover: var(--backend-color-secondary-hover, var(--weline-theme-secondary-hover));
        --weline-theme-secondary-surface: var(--backend-color-secondary-bg-subtle, var(--weline-theme-secondary-surface));
        --weline-theme-secondary-border: var(--backend-color-secondary-border-subtle, var(--weline-theme-secondary-border));
        --weline-theme-secondary-emphasis: var(--backend-color-secondary-text-emphasis, var(--weline-theme-secondary-emphasis));
        --weline-theme-on-secondary: var(--backend-color-on-secondary, var(--weline-theme-on-secondary));
        --weline-theme-success: var(--backend-color-success, var(--weline-theme-success));
        --weline-theme-success-hover: var(--backend-color-success-hover, var(--weline-theme-success-hover));
        --weline-theme-success-surface: var(--backend-color-success-bg-subtle, var(--weline-theme-success-surface));
        --weline-theme-success-border: var(--backend-color-success-border-subtle, var(--weline-theme-success-border));
        --weline-theme-success-emphasis: var(--backend-color-success-text-emphasis, var(--weline-theme-success-emphasis));
        --weline-theme-on-success: var(--backend-color-on-success, var(--weline-theme-on-success));
        --weline-theme-warning: var(--backend-color-warning, var(--weline-theme-warning));
        --weline-theme-warning-hover: var(--backend-color-warning-hover, var(--weline-theme-warning-hover));
        --weline-theme-warning-surface: var(--backend-color-warning-bg-subtle, var(--weline-theme-warning-surface));
        --weline-theme-warning-border: var(--backend-color-warning-border-subtle, var(--weline-theme-warning-border));
        --weline-theme-warning-emphasis: var(--backend-color-warning-text-emphasis, var(--weline-theme-warning-emphasis));
        --weline-theme-on-warning: var(--backend-color-on-warning, var(--weline-theme-on-warning));
        --weline-theme-danger: var(--backend-color-danger, var(--weline-theme-danger));
        --weline-theme-danger-hover: var(--backend-color-danger-hover, var(--weline-theme-danger-hover));
        --weline-theme-danger-surface: var(--backend-color-danger-bg-subtle, var(--weline-theme-danger-surface));
        --weline-theme-danger-border: var(--backend-color-danger-border-subtle, var(--weline-theme-danger-border));
        --weline-theme-danger-emphasis: var(--backend-color-danger-text-emphasis, var(--weline-theme-danger-emphasis));
        --weline-theme-on-danger: var(--backend-color-on-danger, var(--weline-theme-on-danger));
        --weline-theme-info: var(--backend-color-info, var(--weline-theme-info));
        --weline-theme-info-hover: var(--backend-color-info-hover, var(--weline-theme-info-hover));
        --weline-theme-info-surface: var(--backend-color-info-bg-subtle, var(--weline-theme-info-surface));
        --weline-theme-info-border: var(--backend-color-info-border-subtle, var(--weline-theme-info-border));
        --weline-theme-info-emphasis: var(--backend-color-info-text-emphasis, var(--weline-theme-info-emphasis));
        --weline-theme-on-info: var(--backend-color-on-info, var(--weline-theme-on-info));
        --weline-theme-focus: var(--backend-color-primary, var(--weline-theme-focus));
        /* Drawer/dialog scrim must follow backend palette; otherwise list text stays sharp behind OffCanvas. */
        --weline-theme-overlay: var(--backend-color-bg-overlay, var(--backend-theme-overlay, var(--weline-theme-overlay)));
        /* Legacy backend components still use generic --color-* names. The backend palette
         * only provides --color-bg-primary/secondary/canvas, so popover/modal backgrounds
         * and text would otherwise resolve to transparent/empty. Keep old components readable
         * by mapping the missing legacy names onto the backend semantic tokens. */
        --color-bg-surface: var(--weline-theme-surface-raised);
        --color-bg-muted: var(--weline-theme-surface-muted);
        --color-bg-slate: var(--weline-theme-surface-muted);
        --color-bg-panel: var(--weline-theme-surface-raised);
        --color-bg-dark: var(--weline-theme-bg-dark, #131921);
        --color-bg-inverse: var(--weline-theme-bg-dark, #131921);
        --color-text: var(--weline-theme-text);
        --color-text-primary: var(--weline-theme-text);
        --color-text-secondary: var(--weline-theme-text-muted);
        --color-text-muted: var(--weline-theme-text-muted);
        --color-text-faint: var(--weline-theme-text-subtle);
        --color-text-light: var(--weline-theme-text-on-dark);
        --color-border: var(--weline-theme-border);
        --color-border-default: var(--weline-theme-border);
        --color-border-soft: var(--weline-theme-border);
        --color-border-muted: var(--weline-theme-border);
        --color-border-light: var(--weline-theme-border);
        --color-overlay-50: color-mix(in srgb, var(--weline-theme-overlay) 70%, transparent);
        --color-surface: var(--weline-theme-surface-raised);
        --color-surface-hover: var(--weline-theme-surface-hover);
        --color-link: var(--backend-color-primary, #7c9dff);
        --color-info: var(--backend-color-primary, #7c9dff);
        /* Avoid cycle: --weline-theme-danger/success/warning fall back to --color-* themselves. */
        --color-danger: var(--backend-color-danger, #ff8e9c);
        --color-success: var(--backend-color-success, #67d6a4);
        --color-warning: var(--backend-color-warning, #f5c15c);
        /* Legacy spacing/radius/type tokens are also absent in backend; map the common
         * ones so old modals keep their intended padding, borders and shadows. */
        --border-width-thin: 1px;
        --border-width-medium: 2px;
        --spacing-0_5: calc(var(--weline-space-1, .25rem) * .5);
        --spacing-1: var(--weline-space-1, .25rem);
        --spacing-1_5: calc(var(--weline-space-1, .25rem) * 1.5);
        --spacing-2: var(--weline-space-2, .5rem);
        --spacing-2_5: calc(var(--weline-space-1, .25rem) * 2.5);
        --spacing-3: var(--weline-space-3, .75rem);
        --spacing-4: var(--weline-space-4, 1rem);
        --spacing-5: var(--weline-space-5, 1.25rem);
        --spacing-6: var(--weline-space-6, 1.5rem);
        --spacing-7: var(--weline-space-7, 1.75rem);
        --spacing-8: var(--weline-space-8, 2rem);
        --radius-sm: var(--weline-radius-sm, .25rem);
        --radius-md: var(--weline-radius-md, .5rem);
        --radius-lg: var(--weline-radius-lg, .75rem);
        --radius-xl: var(--weline-radius-xl, 1rem);
        --border-radius-md: var(--weline-radius-md, .5rem);
        --font-size-sm: var(--weline-font-size-sm, .875rem);
        --font-size-lg: var(--weline-font-size-lg, 1.125rem);
        --font-size-xl: var(--weline-font-size-xl, 1.25rem);
        --font-size-2_5xl: var(--weline-font-size-2xl, 1.5rem);
        --font-size-13: 13px;
        --control-height-lg: var(--weline-control-height-lg, 2.5rem);
        --control-height-2xl: var(--weline-control-height-2xl, 3rem);
        --letter-spacing-wide: .03em;
        --weline-shadow-md: var(--weline-theme-shadow-md);
        --weline-shadow-lg: var(--weline-theme-shadow-lg);

        --backend-theme-canvas: var(--weline-theme-canvas);
        --backend-theme-surface: var(--weline-theme-surface);
        --backend-theme-surface-raised: var(--weline-theme-surface-raised);
        --backend-theme-text: var(--weline-theme-text);
        --backend-theme-text-muted: var(--weline-theme-text-muted);
        --backend-theme-border: var(--weline-theme-border);
        --backend-theme-primary: var(--weline-theme-primary);
        --backend-theme-sidebar-bg: var(--backend-color-sidebar-bg, var(--backend-theme-surface));
        --backend-theme-header-bg: var(--backend-color-header-bg, var(--backend-theme-surface));
        --backend-theme-sidebar-width: 16.5rem;
        --backend-theme-sidebar-collapsed-width: 4.375rem;
        --backend-theme-topbar-height: 4rem;
    }
}

/* Dark backend raised surface: backend palette bridge keeps --backend-color-bg-primary
 * light even when [data-theme="dark"], which made .w-menu popovers white with light text. */
[data-w-area="backend"][data-theme="dark"],
[data-w-area="backend"][data-theme-mode="dark"],
[data-w-area="backend"][data-layout-mode="dark"] {
    --weline-theme-surface-raised: #202c3c;
}

@media (prefers-color-scheme: dark) {
    [data-w-area="backend"]:not([data-theme="light"]):not([data-theme-preference="light"]) {
        --weline-theme-surface-raised: #202c3c;
    }
}

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { min-height: 100%; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
    body { min-height: 100%; margin: 0; }
    img, picture, svg, canvas, video { display: block; max-width: 100%; height: auto; }
    /* file:image 输出的占位宽高 + 本规则 = Google CLS/响应式写法；封面场景可用更具体选择器覆盖 height */
    .w-file-image { max-width: 100%; height: auto; }
    button, input, select, textarea { margin: 0; font: inherit; color: inherit; }
    :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
        select,
        textarea
    ) {
        box-sizing: border-box;
        inline-size: 100%;
        min-inline-size: 0;
        max-inline-size: 100%;
    }
    button, [role="button"] { touch-action: manipulation; }
    table { border-collapse: collapse; border-spacing: 0; }
    /* HTML hidden is a state contract, not a low-priority presentation hint.
       Component display modes must never make a closed surface visible again. */
    [hidden]:not([hidden="until-found"]) { display: none !important; }
}

@layer base {
    body {
        background: var(--weline-theme-body-bg, var(--weline-theme-canvas));
        color: var(--weline-theme-body-text, var(--color-text-primary));
        font-family: var(--weline-font-sans);
        font-size: var(--weline-font-size-md);
        line-height: var(--weline-line-height);
    }
    h1, h2, h3, h4, h5, h6 {
        margin: 0;
        color: var(--weline-theme-text);
        font-family: var(--weline-font-display, var(--weline-font-sans));
        line-height: 1.25;
        font-weight: var(--weline-font-weight-semibold, 600);
    }
    button, input, select, textarea {
        font-family: var(--weline-font-ui, var(--weline-font-sans));
    }
    p { margin-block: 0 var(--weline-space-4); }
    a { color: var(--weline-theme-primary); text-underline-offset: 0.16em; }
    a:hover { color: var(--weline-theme-primary-hover); }
    code, pre, kbd, samp { font-family: var(--weline-font-mono); }
    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
        outline: 3px solid color-mix(in srgb, var(--weline-theme-focus) 42%, transparent);
        outline-offset: 2px;
    }
    ::selection { background: color-mix(in srgb, var(--weline-theme-primary) 28%, transparent); }
}

@layer layout {
    .w-container {
        box-sizing: border-box;
        width: min(100%, var(--weline-layout-content-max-width));
        max-width: 100%;
        min-width: 0;
        margin-inline: auto;
        padding-inline: var(--weline-layout-content-padding-inline);
    }
    .w-theme-content-width {
        box-sizing: border-box;
        width: min(100%, var(--weline-layout-content-max-width));
        max-width: 100%;
        min-width: 0;
        margin-inline: auto;
        padding-inline: var(--weline-layout-content-padding-inline);
    }
    /*
     * terms/policy/contact/about 底部扩展槽（contact-info 等）：布局拥有版心，
     * 部件本身 width:100%。未约束时白卡片会左右贴边（grocery 继承 Default 政策页同现）。
     */
    .terms-bottom-slot,
    .policy-bottom-slot,
    .contact-bottom-slot,
    .about-bottom-slot {
        box-sizing: border-box;
        width: min(100%, var(--weline-layout-content-max-width));
        max-width: 100%;
        min-width: 0;
        margin-inline: auto;
        padding-inline: max(1rem, var(--weline-layout-content-padding-inline, 1rem));
        padding-block: var(--weline-space-4, 1rem) var(--weline-space-6, 1.5rem);
    }
    .w-grid { display: grid; grid-template-columns: repeat(var(--w-columns, 12), minmax(0, 1fr)); gap: var(--w-row-gap, var(--w-gap, var(--weline-space-4))) var(--w-column-gap, var(--w-gap, var(--weline-space-4))); }
    .w-grid > * { grid-column: span var(--w-span, 12); min-width: 0; }
    /*
     * Adaptive pack grid for KPI tiles, filter fields, action groups, etc.
     * Prefer this over .w-grid + --w-span when children should share a row by
     * container width instead of a fixed 12-column breakpoint plan.
     */
    .w-auto-grid,
    .w-stat-tiles {
        display: grid;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        /* min(100%, …) keeps tracks from forcing the page wider than the parent. */
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--w-auto-grid-min, var(--w-stat-tile-min, 8rem))), 1fr));
        gap: var(--w-row-gap, var(--w-gap, var(--weline-space-4))) var(--w-column-gap, var(--w-gap, var(--weline-space-4)));
        margin-block-end: var(--w-mb, 0);
        align-items: stretch;
    }
    .w-auto-grid > *,
    .w-stat-tiles > * { min-width: 0; max-width: 100%; }
    /* If combined with .w-grid, cancel the default span-12 so items stay adaptive. */
    .w-auto-grid.w-grid,
    .w-stat-tiles.w-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--w-auto-grid-min, var(--w-stat-tile-min, 8rem))), 1fr)); }
    .w-auto-grid.w-grid > *,
    .w-stat-tiles.w-grid > * { grid-column: auto; }
    .w-auto-grid :where(.w-input, .w-select) { width: 100%; max-width: 100%; }
    .w-auto-grid > .w-button { width: auto; max-width: 100%; justify-self: start; align-self: end; }
    .w-stack { display: flex; flex-direction: column; gap: var(--w-gap, var(--weline-space-4)); }
    .w-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--w-gap, var(--weline-space-3)); }
    :where(.w-stack, .w-cluster)[data-align="start"] { align-items: flex-start; }
    :where(.w-stack, .w-cluster)[data-align="end"] { align-items: flex-end; }
    :where(.w-stack, .w-cluster)[data-align="stretch"] { align-items: stretch; }
    :where(.w-stack, .w-cluster)[data-justify="center"] { justify-content: center; }
    :where(.w-stack, .w-cluster)[data-justify="end"] { justify-content: flex-end; }
    :where(.w-stack, .w-cluster)[data-justify="between"] { justify-content: space-between; }
    :where(.w-stack, .w-cluster)[data-justify="around"] { justify-content: space-around; }
    :where(.w-stack, .w-cluster)[data-justify="evenly"] { justify-content: space-evenly; }
    .w-cluster[data-wrap="false"] { flex-wrap: nowrap; }
    [data-self="start"] { align-self: flex-start; }
    [data-self="center"] { align-self: center; }
    [data-self="end"] { align-self: flex-end; }
    [data-self="stretch"] { align-self: stretch; }
    [data-grow="true"] { flex-grow: 1; min-width: 0; }
    [data-shrink="false"] { flex-shrink: 0; }
    [data-w-visible-from] { display: none; }
    [data-w-display="block"] { display: block; }
    [data-w-display="inline"] { display: inline; }
    [data-w-display="inline-block"] { display: inline-block; }
    [data-w-display="flex"] { display: flex; }
    [data-w-display="grid"] { display: grid; }
    [data-w-visible-from][data-w-display] { display: none; }
    [data-w-width="full"] { width: 100%; }
    [data-w-width="25"] { width: 25%; }
    [data-w-width="50"] { width: 50%; }
    [data-w-width="75"] { width: 75%; }
    [data-w-width="auto"] { width: auto; }
    [data-w-height="full"] { height: 100%; }
    [data-w-overflow="hidden"] { overflow: hidden; }
    [data-w-overflow="auto"] { overflow: auto; }
    [data-w-overflow="x-auto"] { overflow-x: auto; }
    [data-w-vertical="middle"] { vertical-align: middle; }
    [data-w-border="all"] { border: 1px solid var(--weline-theme-border); }
    [data-w-border="top"] { border-block-start: 1px solid var(--weline-theme-border); }
    [data-w-border="bottom"] { border-block-end: 1px solid var(--weline-theme-border); }
    [data-w-border="start"] { border-inline-start: 1px solid var(--weline-theme-border); }
    [data-w-border="end"] { border-inline-end: 1px solid var(--weline-theme-border); }
    [data-w-border="none"] { border: 0; }
    [data-w-radius="md"] { border-radius: var(--weline-radius-md); }
    [data-w-radius="round"] { border-radius: var(--weline-radius-round); }
    [data-w-shadow="sm"] { box-shadow: var(--weline-theme-shadow-sm); }
    [data-w-shadow="md"] { box-shadow: var(--weline-theme-shadow-md); }
    [data-w-background="primary"] { background: var(--weline-theme-primary); color: var(--weline-theme-on-primary); }
    [data-w-background="secondary"] { background: var(--weline-theme-secondary-surface); color: var(--weline-theme-secondary-emphasis, var(--weline-theme-secondary)); }
    [data-w-background="success"] { background: var(--weline-theme-success-surface); color: var(--weline-theme-success); }
    [data-w-background="warning"] { background: var(--weline-theme-warning-surface); color: var(--weline-theme-warning); }
    [data-w-background="danger"] { background: var(--weline-theme-danger-surface); color: var(--weline-theme-danger); }
    [data-w-background="info"] { background: var(--weline-theme-info-surface); color: var(--weline-theme-info); }
    [data-w-background="muted"] { background: var(--weline-theme-surface-muted); }
    [data-w-position="relative"] { position: relative; }
    [data-w-position="absolute"] { position: absolute; }
    [data-w-position="fixed"] { position: fixed; }
    [data-w-position="sticky"] { position: sticky; }
    [style*="--w-top:"] { inset-block-start: var(--w-top); }
    [style*="--w-bottom:"] { inset-block-end: var(--w-bottom); }
    [style*="--w-start:"] { inset-inline-start: var(--w-start); }
    [style*="--w-end:"] { inset-inline-end: var(--w-end); }
    [data-w-translate="middle"] { translate: -50% -50%; }
    [data-w-avatar="true"] { width: var(--w-avatar-size, 2.5rem); height: var(--w-avatar-size, 2.5rem); flex: 0 0 var(--w-avatar-size, 2.5rem); overflow: hidden; border-radius: var(--weline-radius-round); }
    [data-w-avatar-content="true"] { display: grid; width: 100%; height: 100%; place-items: center; background: var(--weline-theme-surface-muted); }
    [style*="--w-mt:"] { margin-block-start: var(--w-mt); }
    [style*="--w-me:"] { margin-inline-end: var(--w-me); }
    [style*="--w-mb:"] { margin-block-end: var(--w-mb); }
    [style*="--w-ms:"] { margin-inline-start: var(--w-ms); }
    [style*="--w-pt:"] { padding-block-start: var(--w-pt); }
    [style*="--w-pe:"] { padding-inline-end: var(--w-pe); }
    [style*="--w-pb:"] { padding-block-end: var(--w-pb); }
    [style*="--w-ps:"] { padding-inline-start: var(--w-ps); }
    @media (min-width: 36rem) {
        [data-w-visible-from="sm"] { display: var(--w-responsive-display, revert); }
        [data-w-visible-from="sm"][data-w-display="block"] { display: block; }
        [data-w-visible-from="sm"][data-w-display="inline"] { display: inline; }
        [data-w-visible-from="sm"][data-w-display="inline-block"] { display: inline-block; }
        [data-w-visible-from="sm"][data-w-display="flex"] { display: flex; }
        [data-w-visible-from="sm"][data-w-display="grid"] { display: grid; }
        [data-w-hidden-from="sm"] { display: none; }
        [style*="--w-mt-sm:"] { margin-block-start: var(--w-mt-sm); }
        [style*="--w-me-sm:"] { margin-inline-end: var(--w-me-sm); }
        [style*="--w-mb-sm:"] { margin-block-end: var(--w-mb-sm); }
        [style*="--w-ms-sm:"] { margin-inline-start: var(--w-ms-sm); }
        [style*="--w-pt-sm:"] { padding-block-start: var(--w-pt-sm); }
        [style*="--w-pe-sm:"] { padding-inline-end: var(--w-pe-sm); }
        [style*="--w-pb-sm:"] { padding-block-end: var(--w-pb-sm); }
        [style*="--w-ps-sm:"] { padding-inline-start: var(--w-ps-sm); }
        [style*="--w-gap-sm:"] { gap: var(--w-gap-sm); }
        [style*="--w-column-gap-sm:"] { column-gap: var(--w-column-gap-sm); }
        [style*="--w-row-gap-sm:"] { row-gap: var(--w-row-gap-sm); }
    }
    @media (min-width: 48rem) {
        .w-grid > * { grid-column: span var(--w-span-md, var(--w-span, 12)); }
        .w-auto-grid.w-grid > *,
        .w-stat-tiles.w-grid > * { grid-column: auto; }
        [data-w-visible-from="md"] { display: var(--w-responsive-display, revert); }
        [data-w-visible-from="md"][data-w-display="block"] { display: block; }
        [data-w-visible-from="md"][data-w-display="inline"] { display: inline; }
        [data-w-visible-from="md"][data-w-display="inline-block"] { display: inline-block; }
        [data-w-visible-from="md"][data-w-display="flex"] { display: flex; }
        [data-w-visible-from="md"][data-w-display="grid"] { display: grid; }
        [data-w-hidden-from="md"] { display: none; }
        [style*="--w-mt-md:"] { margin-block-start: var(--w-mt-md); }
        [style*="--w-me-md:"] { margin-inline-end: var(--w-me-md); }
        [style*="--w-mb-md:"] { margin-block-end: var(--w-mb-md); }
        [style*="--w-ms-md:"] { margin-inline-start: var(--w-ms-md); }
        [style*="--w-pt-md:"] { padding-block-start: var(--w-pt-md); }
        [style*="--w-pe-md:"] { padding-inline-end: var(--w-pe-md); }
        [style*="--w-pb-md:"] { padding-block-end: var(--w-pb-md); }
        [style*="--w-ps-md:"] { padding-inline-start: var(--w-ps-md); }
        [style*="--w-gap-md:"] { gap: var(--w-gap-md); }
        [style*="--w-column-gap-md:"] { column-gap: var(--w-column-gap-md); }
        [style*="--w-row-gap-md:"] { row-gap: var(--w-row-gap-md); }
    }
    @media (min-width: 64rem) {
        .w-grid > * { grid-column: span var(--w-span-lg, var(--w-span-md, var(--w-span, 12))); }
        .w-auto-grid.w-grid > *,
        .w-stat-tiles.w-grid > * { grid-column: auto; }
        [data-w-visible-from="lg"] { display: var(--w-responsive-display, revert); }
        [data-w-visible-from="lg"][data-w-display="block"] { display: block; }
        [data-w-visible-from="lg"][data-w-display="inline"] { display: inline; }
        [data-w-visible-from="lg"][data-w-display="inline-block"] { display: inline-block; }
        [data-w-visible-from="lg"][data-w-display="flex"] { display: flex; }
        [data-w-visible-from="lg"][data-w-display="grid"] { display: grid; }
        [data-w-hidden-from="lg"] { display: none; }
        [style*="--w-mt-lg:"] { margin-block-start: var(--w-mt-lg); }
        [style*="--w-me-lg:"] { margin-inline-end: var(--w-me-lg); }
        [style*="--w-mb-lg:"] { margin-block-end: var(--w-mb-lg); }
        [style*="--w-ms-lg:"] { margin-inline-start: var(--w-ms-lg); }
        [style*="--w-pt-lg:"] { padding-block-start: var(--w-pt-lg); }
        [style*="--w-pe-lg:"] { padding-inline-end: var(--w-pe-lg); }
        [style*="--w-pb-lg:"] { padding-block-end: var(--w-pb-lg); }
        [style*="--w-ps-lg:"] { padding-inline-start: var(--w-ps-lg); }
        [style*="--w-gap-lg:"] { gap: var(--w-gap-lg); }
        [style*="--w-column-gap-lg:"] { column-gap: var(--w-column-gap-lg); }
        [style*="--w-row-gap-lg:"] { row-gap: var(--w-row-gap-lg); }
    }
    @media (min-width: 80rem) {
        [data-w-visible-from="xl"] { display: var(--w-responsive-display, revert); }
        [data-w-visible-from="xl"][data-w-display="block"] { display: block; }
        [data-w-visible-from="xl"][data-w-display="inline"] { display: inline; }
        [data-w-visible-from="xl"][data-w-display="inline-block"] { display: inline-block; }
        [data-w-visible-from="xl"][data-w-display="flex"] { display: flex; }
        [data-w-visible-from="xl"][data-w-display="grid"] { display: grid; }
        [data-w-hidden-from="xl"] { display: none; }
        [style*="--w-mt-xl:"] { margin-block-start: var(--w-mt-xl); }
        [style*="--w-me-xl:"] { margin-inline-end: var(--w-me-xl); }
        [style*="--w-mb-xl:"] { margin-block-end: var(--w-mb-xl); }
        [style*="--w-ms-xl:"] { margin-inline-start: var(--w-ms-xl); }
        [style*="--w-pt-xl:"] { padding-block-start: var(--w-pt-xl); }
        [style*="--w-pe-xl:"] { padding-inline-end: var(--w-pe-xl); }
        [style*="--w-pb-xl:"] { padding-block-end: var(--w-pb-xl); }
        [style*="--w-ps-xl:"] { padding-inline-start: var(--w-ps-xl); }
    }
    @media (min-width: 96rem) {
        [data-w-visible-from="xxl"] { display: var(--w-responsive-display, revert); }
        [data-w-visible-from="xxl"][data-w-display="block"] { display: block; }
        [data-w-visible-from="xxl"][data-w-display="inline"] { display: inline; }
        [data-w-visible-from="xxl"][data-w-display="inline-block"] { display: inline-block; }
        [data-w-visible-from="xxl"][data-w-display="flex"] { display: flex; }
        [data-w-visible-from="xxl"][data-w-display="grid"] { display: grid; }
        [data-w-hidden-from="xxl"] { display: none; }
        [style*="--w-mt-xxl:"] { margin-block-start: var(--w-mt-xxl); }
        [style*="--w-me-xxl:"] { margin-inline-end: var(--w-me-xxl); }
        [style*="--w-mb-xxl:"] { margin-block-end: var(--w-mb-xxl); }
        [style*="--w-ms-xxl:"] { margin-inline-start: var(--w-ms-xxl); }
        [style*="--w-pt-xxl:"] { padding-block-start: var(--w-pt-xxl); }
        [style*="--w-pe-xxl:"] { padding-inline-end: var(--w-pe-xxl); }
        [style*="--w-pb-xxl:"] { padding-block-end: var(--w-pb-xxl); }
        [style*="--w-ps-xxl:"] { padding-inline-start: var(--w-ps-xxl); }
    }
}

@layer components {
    .w-card {
        min-width: 0;
        overflow: clip;
        background: var(--weline-theme-surface);
        color: var(--weline-theme-text);
        border: 1px solid var(--weline-theme-border);
        border-radius: var(--weline-radius-lg);
        box-shadow: var(--weline-theme-shadow-sm);
    }
    .w-card__header, .w-card__body, .w-card__footer { padding: var(--weline-space-5); }
    .w-card__header, .w-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--weline-space-3); }
    .w-card__header { border-bottom: 1px solid var(--weline-theme-border); }
    .w-card__footer { border-top: 1px solid var(--weline-theme-border); }
    .w-card__title { margin: 0; font-size: var(--weline-font-size-lg); }
    .w-card[data-tone="muted"] { background: var(--weline-theme-surface-muted); box-shadow: none; }

    
    
    .w-button[data-tone="neutral"] { background: var(--weline-theme-surface); border-color: var(--weline-theme-border-strong); color: var(--weline-theme-text); }
    .w-button[data-tone="neutral"]:hover { background: var(--weline-theme-surface-hover); }
    .w-button[data-tone="secondary"] { background: var(--weline-theme-secondary); border-color: var(--weline-theme-secondary); color: var(--weline-theme-on-secondary); }
    .w-button[data-tone="secondary"]:hover { background: var(--weline-theme-secondary-hover); border-color: var(--weline-theme-secondary-hover); color: var(--weline-theme-on-secondary); }
    .w-button[data-tone="quiet"] { background: transparent; border-color: transparent; color: var(--w-surface-fg, var(--weline-theme-text)); }
    .w-button[data-tone="quiet"]:hover { background: var(--weline-theme-surface-hover); color: var(--w-surface-fg, var(--weline-theme-text)); }
    .w-button[data-tone="danger"] { background: var(--weline-theme-danger); border-color: var(--weline-theme-danger); color: var(--weline-theme-on-danger, var(--weline-theme-surface)); }
    .w-button[data-tone="success"] { background: var(--weline-theme-success); border-color: var(--weline-theme-success); color: var(--weline-theme-on-success, var(--weline-theme-surface)); }
    .w-button[data-tone="warning"] { background: var(--weline-theme-warning); border-color: var(--weline-theme-warning); color: var(--weline-theme-on-warning, var(--weline-theme-surface)); }
    .w-button[data-tone="info"] { background: var(--weline-theme-info); border-color: var(--weline-theme-info); color: var(--weline-theme-on-info, var(--weline-theme-surface)); }
    .w-button[data-variant="outline"] { background: transparent; color: var(--weline-theme-primary); }
    .w-button[data-variant="outline"][data-tone="neutral"] { border-color: var(--weline-theme-border-strong); color: var(--weline-theme-text); }
    .w-button[data-variant="outline"][data-tone="secondary"] { border-color: var(--weline-theme-secondary-border, var(--weline-theme-secondary)); color: var(--weline-theme-secondary-emphasis, var(--weline-theme-secondary)); }
    .w-button[data-variant="outline"][data-tone="success"] { border-color: var(--weline-theme-success); color: var(--weline-theme-success); }
    .w-button[data-variant="outline"][data-tone="warning"] { border-color: var(--weline-theme-warning); color: var(--weline-theme-warning); }
    .w-button[data-variant="outline"][data-tone="danger"] { border-color: var(--weline-theme-danger); color: var(--weline-theme-danger); }
    .w-button[data-variant="outline"][data-tone="info"] { border-color: var(--weline-theme-info); color: var(--weline-theme-info); }
    .w-button[data-variant="soft"] { border-color: transparent; background: var(--weline-theme-surface-muted); color: var(--weline-theme-text); }
    .w-button[data-variant="soft"][data-tone="primary"] { background: color-mix(in srgb, var(--weline-theme-primary) 14%, var(--weline-theme-surface)); color: var(--weline-theme-primary); }
    .w-button[data-variant="soft"][data-tone="secondary"] { background: var(--weline-theme-secondary-surface); color: var(--weline-theme-secondary-emphasis, var(--weline-theme-secondary)); }
    .w-button[data-variant="soft"][data-tone="success"] { background: var(--weline-theme-success-surface); color: var(--weline-theme-success); }
    .w-button[data-variant="soft"][data-tone="warning"] { background: var(--weline-theme-warning-surface); color: var(--weline-theme-warning); }
    .w-button[data-variant="soft"][data-tone="danger"] { background: var(--weline-theme-danger-surface); color: var(--weline-theme-danger); }
    .w-button[data-variant="soft"][data-tone="info"] { background: var(--weline-theme-info-surface); color: var(--weline-theme-info); }
    /* Close glyph is a fallback for empty [data-w-close] buttons only.
       Buttons that already embed <w-icon>/svg/text must not also paint ×. */
    .w-button[data-w-close] { min-inline-size: var(--weline-control-height-sm); padding-inline: var(--weline-space-2); }
    .w-button[data-w-close]:empty::before { content: "\00d7"; font-size: var(--weline-font-size-lg); line-height: 1; }
    .w-button[data-w-close]:has(.w-icon, w-icon, svg, img)::before { content: none; }
    .w-button[data-size="sm"] { min-height: var(--weline-control-height-sm); padding-inline: var(--weline-space-3); font-size: var(--weline-font-size-sm); }
    .w-button[data-size="lg"] { min-height: var(--weline-control-height-lg); padding-inline: var(--weline-space-5); }
    .w-button[data-icon-only="true"] {
        min-inline-size: var(--weline-control-height);
        inline-size: var(--weline-control-height);
        padding-inline: 0;
    }
    .w-button[data-icon-only="true"][data-size="sm"] {
        min-inline-size: var(--weline-control-height-sm);
        inline-size: var(--weline-control-height-sm);
    }
    .w-button[data-icon-only="true"][data-size="lg"] {
        min-inline-size: var(--weline-control-height-lg);
        inline-size: var(--weline-control-height-lg);
    }
    
    /* busy = 灰面 + spinner；禁止只降 opacity 仍显实色蓝（用户可见「没变灰」） */
    .w-button[aria-busy="true"] {
        position: relative;
        opacity: 1;
        cursor: wait;
        pointer-events: none;
        color: var(--weline-theme-text-muted);
        background: var(--weline-theme-surface-muted);
        border-color: var(--weline-theme-border);
        box-shadow: none;
    }
    .w-button[aria-busy="true"]:hover {
        color: var(--weline-theme-text-muted);
        background: var(--weline-theme-surface-muted);
        border-color: var(--weline-theme-border);
    }
    .w-button[aria-busy="true"]::after {
        content: "";
        inline-size: 0.9em;
        block-size: 0.9em;
        border: 2px solid currentColor;
        border-inline-end-color: transparent;
        border-radius: var(--weline-radius-round);
        animation: w-spin 700ms linear infinite;
    }
    .w-button-group {
        display: inline-flex;
        max-width: 100%;
        align-items: stretch;
        flex-wrap: nowrap;
        vertical-align: middle;
    }
    .w-button-group > .w-button {
        flex: 0 0 auto;
        border-radius: 0;
    }
    .w-button-group > .w-button:first-child { border-start-start-radius: var(--weline-radius-md); border-end-start-radius: var(--weline-radius-md); }
    .w-button-group > .w-button:last-child { border-start-end-radius: var(--weline-radius-md); border-end-end-radius: var(--weline-radius-md); }
    .w-button-group > .w-button + .w-button { margin-inline-start: -1px; }
    .w-button-group[data-w-width="full"] { display: flex; width: 100%; }
    .w-button-group[data-w-width="full"] > .w-button { flex: 1 1 0; justify-content: center; }
    .w-button-group[data-density="icon"] {
        gap: var(--weline-space-1);
        padding: var(--weline-space-1);
        border: 1px solid var(--weline-theme-border);
        border-radius: var(--weline-radius-md);
        background: var(--weline-theme-surface);
        box-shadow: 0 1px 2px color-mix(in srgb, var(--weline-theme-text) 6%, transparent);
    }
    .w-button-group[data-density="icon"] > .w-button {
        margin-inline-start: 0;
        border-radius: var(--weline-radius-sm);
    }
    .w-button-group[data-density="icon"] > .w-button:first-child,
    .w-button-group[data-density="icon"] > .w-button:last-child { border-radius: var(--weline-radius-sm); }
    .w-button-group[data-density="icon"] > .w-button[data-variant="outline"] {
        background: transparent;
    }
    .w-button-group[data-density="icon"] > .w-button:hover:not(:disabled) {
        background: var(--weline-theme-surface-hover);
    }

    .w-form { display: grid; min-width: 0; min-inline-size: 0; max-width: 100%; max-inline-size: 100%; gap: var(--weline-space-5); }
    :where(.w-form, .w-field, .w-field__control, .w-grid, .w-stack, .w-cluster) > * {
        min-inline-size: 0;
        max-inline-size: 100%;
    }
    @media (prefers-reduced-motion: reduce) {
        .w-field:has(> .w-field__label):has(:is(.w-input, .w-select, .w-textarea, .w-field__control, .w-language-select)):not(
            :has(> .w-check),
            :has(> .w-switch),
            .w-theme-disk-field--inline,
            [data-label-layout="stacked"],
            [data-label-layout="inline"],
            .w-search-inline,
            .w-search-bar
        ) > .w-field__label {
            transition: none;
        }
    }
    .w-input, .w-select, .w-textarea {
        box-sizing: border-box;
        inline-size: 100%;
        min-inline-size: 0;
        max-inline-size: 100%;
        min-height: var(--weline-control-height);
        padding: var(--weline-space-2) var(--weline-space-3);
        border: 1px solid var(--weline-theme-border-strong);
        border-radius: var(--weline-radius-md);
        background: var(--weline-theme-surface);
        color: var(--weline-theme-text);
        /* Match search-chip contract: fill color must follow theme text Token.
         * Inverse chrome / autofill can leave a light -webkit-text-fill-color that
         * paints over `color` → prefilled values look like washed-out placeholders. */
        -webkit-text-fill-color: var(--weline-theme-text);
        caret-color: var(--weline-theme-text);
        transition: border-color var(--weline-motion-fast), box-shadow var(--weline-motion-fast);
    }
    /* Native select chevron: keep inset from the trailing edge (not flush). */
    .w-select {
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1.75 6 6.25 10.5 1.75' stroke='%23565959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--weline-space-3) center;
        background-size: 0.75rem 0.5rem;
        padding-inline-end: calc(var(--weline-space-3) + 1.15rem);
    }
    :where(.w-input, .w-select)[data-size="sm"] { min-height: var(--weline-control-height-sm); padding-block: var(--weline-space-1); font-size: var(--weline-font-size-sm); }
    .w-textarea { min-height: 7rem; resize: vertical; }
    .w-input::placeholder, .w-textarea::placeholder {
        color: var(--weline-theme-text-subtle);
        -webkit-text-fill-color: var(--weline-theme-text-subtle);
        opacity: 1;
    }
    /* Autofill must keep theme ink on light surfaces (WO-UI-CONTRAST / inverse nest). */
    .w-input:-webkit-autofill,
    .w-input:-webkit-autofill:hover,
    .w-input:-webkit-autofill:focus,
    .w-input:-webkit-autofill:active,
    .w-textarea:-webkit-autofill,
    .w-textarea:-webkit-autofill:hover,
    .w-textarea:-webkit-autofill:focus,
    .w-textarea:-webkit-autofill:active {
        -webkit-text-fill-color: var(--weline-theme-text);
        caret-color: var(--weline-theme-text);
        box-shadow: 0 0 0 1000px var(--weline-theme-surface) inset;
        transition: background-color 99999s ease-out 0s;
    }
    .w-input:hover, .w-select:hover, .w-textarea:hover { border-color: var(--weline-theme-primary); }
    .w-input:focus, .w-select:focus, .w-textarea:focus { border-color: var(--weline-theme-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--weline-theme-focus) 20%, transparent); outline: 0; }
    :where(.w-input, .w-select, .w-textarea)[aria-invalid="true"] { border-color: var(--weline-theme-danger); }
    :where(.w-input, .w-select, .w-textarea):disabled {
        background: var(--weline-theme-surface-muted);
        color: var(--weline-theme-text-muted);
        -webkit-text-fill-color: var(--weline-theme-text-muted);
        caret-color: var(--weline-theme-text-muted);
        cursor: not-allowed;
    }
                                .w-file { display: grid; gap: var(--weline-space-2); padding: var(--weline-space-5); border: 1px dashed var(--weline-theme-border-strong); border-radius: var(--weline-radius-lg); background: var(--weline-theme-surface-muted); text-align: center; }

    .app-search.w-search-inline {
        display: block;
        margin: 0;
    }

    .w-search-inline__control {
        display: flex;
        align-items: center;
        gap: var(--weline-space-2);
        min-block-size: var(--weline-control-height-sm);
        padding: 0 var(--weline-space-3);
        border: 1px solid var(--weline-theme-border);
        border-radius: var(--weline-radius-md);
        background: var(--weline-theme-surface);
        transition: border-color var(--weline-motion-fast), box-shadow var(--weline-motion-fast);
    }

    .w-search-inline__control:focus-within {
        border-color: var(--weline-theme-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--weline-theme-primary) 18%, transparent);
    }

    .w-search-inline__control > .w-input {
        flex: 1 1 auto;
        min-inline-size: 0;
        min-block-size: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .w-search-inline__control > .w-input:focus {
        border: 0;
        box-shadow: none;
        outline: 0;
    }

    .w-search-inline__control > :is(w-icon, .w-icon) {
        flex: 0 0 auto;
        color: var(--weline-theme-text-subtle);
        pointer-events: none;
    }

    .w-search-bar {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .w-search-bar__control {
        display: flex;
        align-items: stretch;
        width: 100%;
        min-block-size: var(--weline-control-height);
        border: 1px solid var(--weline-theme-border-strong);
        border-radius: var(--weline-radius-md);
        background: var(--weline-theme-surface);
        overflow: hidden;
        transition: border-color var(--weline-motion-fast), box-shadow var(--weline-motion-fast);
    }

    .w-search-bar__control:focus-within {
        border-color: var(--weline-theme-focus);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--weline-theme-focus) 20%, transparent);
    }

    .w-search-bar__input {
        flex: 1 1 auto;
        min-width: 0;
        min-block-size: 0;
        margin: 0;
        padding: var(--weline-space-2) var(--weline-space-3);
        border: 0;
        background: transparent;
        color: var(--weline-theme-text);
        font: inherit;
        font-size: inherit;
        outline: 0;
        box-shadow: none;
    }

    .w-search-bar__input::placeholder {
        color: var(--weline-theme-text-subtle);
    }

    .w-search-bar__submit {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        min-inline-size: var(--weline-control-height);
        padding: 0 var(--weline-space-3);
        margin: 0;
        border: 0;
        border-inline-start: 1px solid color-mix(in srgb, var(--weline-theme-primary) 28%, var(--weline-theme-border));
        border-radius: 0;
        background: var(--weline-theme-primary);
        color: var(--weline-theme-on-primary, #fff);
        cursor: pointer;
        transition: background-color var(--weline-motion-fast), filter var(--weline-motion-fast);
    }

    .w-search-bar[data-size="sm"] .w-search-bar__control {
        min-block-size: var(--weline-control-height-sm);
    }

    .w-search-bar[data-size="sm"] .w-search-bar__input {
        padding-block: var(--weline-space-1);
        font-size: var(--weline-font-size-sm);
    }

    .w-search-bar[data-size="sm"] .w-search-bar__submit {
        min-inline-size: var(--weline-control-height-sm);
    }

    .w-search-bar__submit:hover {
        filter: brightness(1.05);
    }

    .w-search-bar__submit:focus-visible {
        outline: 2px solid var(--weline-theme-focus);
        outline-offset: -2px;
    }

    .w-search-bar__icon {
        inline-size: 1.125rem;
        block-size: 1.125rem;
        display: block;
    }

    .w-text { color: var(--weline-theme-text); }
    .w-text[data-size="sm"] { font-size: var(--weline-font-size-sm); }
    .w-text[data-size="lg"] { font-size: var(--weline-font-size-lg); }
    .w-text[data-weight="strong"] { font-weight: 700; }
    .w-text[data-weight="medium"] { font-weight: 550; }
    .w-text[data-tone="muted"] { color: var(--weline-theme-text-muted); }
    .w-text[data-tone="primary"] { color: var(--weline-theme-primary); }
    .w-text[data-tone="secondary"] { color: var(--weline-theme-secondary-emphasis, var(--weline-theme-secondary)); }
    .w-text[data-tone="success"] { color: var(--weline-theme-success); }
    .w-text[data-tone="warning"] { color: var(--weline-theme-warning); }
    .w-text[data-tone="danger"] { color: var(--weline-theme-danger); }
    .w-text[data-tone="info"] { color: var(--weline-theme-info); }
    .w-text[data-tone="inverse"] { color: var(--weline-theme-on-primary); }
    .w-text[data-align="start"] { text-align: start; }
    .w-text[data-align="center"] { text-align: center; }
    .w-text[data-align="end"] { text-align: end; }
    .w-text[data-family="mono"] { font-family: var(--weline-font-mono); }
    .w-text[data-transform="uppercase"] { text-transform: uppercase; }
    .w-text[data-truncate="true"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .w-text[style*="--w-font-size:"] { font-size: var(--w-font-size); }
    [data-w-text-wrap="break"] { overflow-wrap: anywhere; word-break: break-word; }
    [data-w-decoration="none"] { text-decoration: none; }
    [data-w-decoration="underline"] { text-decoration: underline; }
    @media (min-width: 36rem) {
        .w-text[data-w-align-sm="start"] { text-align: start; }
        .w-text[data-w-align-sm="center"] { text-align: center; }
        .w-text[data-w-align-sm="end"] { text-align: end; }
    }
    @media (min-width: 48rem) {
        .w-text[data-w-align-md="start"] { text-align: start; }
        .w-text[data-w-align-md="center"] { text-align: center; }
        .w-text[data-w-align-md="end"] { text-align: end; }
    }
    @media (min-width: 64rem) {
        .w-text[data-w-align-lg="start"] { text-align: start; }
        .w-text[data-w-align-lg="center"] { text-align: center; }
        .w-text[data-w-align-lg="end"] { text-align: end; }
    }

    .w-table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--weline-theme-border); border-radius: var(--weline-radius-lg); background: var(--weline-theme-surface); }
    .w-table { width: 100%; background: var(--weline-theme-surface); color: var(--weline-theme-text); }
    .w-table th, .w-table td { padding: var(--weline-space-4) var(--weline-space-4); border-bottom: 1px solid var(--weline-theme-border); text-align: start; vertical-align: middle; }
    .w-table th { background: var(--weline-theme-surface); font-size: var(--weline-font-size-sm); font-weight: 700; white-space: nowrap; color: var(--weline-theme-text); }
    .w-table tbody tr:hover { background: var(--weline-theme-surface-hover); }
    .w-table tbody tr:last-child > * { border-bottom: 0; }
    /* Sticky start/end columns (e.g. action bar) — use inside .w-table-wrap */
    .w-table:has([data-w-sticky]),
    .w-table[data-w-sticky-start],
    .w-table[data-w-sticky-end] { border-collapse: separate; border-spacing: 0; }
    .w-table th[data-w-sticky="start"],
    .w-table td[data-w-sticky="start"],
    .w-table th[data-w-sticky="end"],
    .w-table td[data-w-sticky="end"] {
        position: sticky;
        z-index: 2;
        background: var(--weline-theme-surface);
    }
    .w-table th[data-w-sticky="start"],
    .w-table th[data-w-sticky="end"] {
        z-index: 4;
        background: var(--weline-theme-surface);
    }
    .w-table th[data-w-sticky="start"],
    .w-table td[data-w-sticky="start"] {
        inset-inline-start: 0;
        min-inline-size: var(--w-table-sticky-start-min, auto);
        border-inline-end: 1px solid var(--weline-theme-border);
        box-shadow: 0.75rem 0 1.5rem color-mix(in srgb, var(--weline-theme-canvas) 58%, transparent);
    }
    .w-table th[data-w-sticky="end"],
    .w-table td[data-w-sticky="end"] {
        inset-inline-end: 0;
        min-inline-size: var(--w-table-sticky-end-min, 8.5rem);
        border-inline-start: 1px solid var(--weline-theme-border);
        box-shadow: -0.75rem 0 1.5rem color-mix(in srgb, var(--weline-theme-canvas) 58%, transparent);
    }
    .w-table tbody tr:hover > [data-w-sticky="start"],
    .w-table tbody tr:hover > [data-w-sticky="end"] {
        background: var(--weline-theme-surface-hover);
    }
    /* Table-level shorthand: pin first/last column without per-cell attrs */
    .w-table[data-w-sticky-start] > thead > tr > th:first-child,
    .w-table[data-w-sticky-start] > tbody > tr > td:first-child {
        position: sticky;
        inset-inline-start: 0;
        z-index: 2;
        min-inline-size: var(--w-table-sticky-start-min, auto);
        background: var(--weline-theme-surface);
        border-inline-end: 1px solid var(--weline-theme-border);
        box-shadow: 0.75rem 0 1.5rem color-mix(in srgb, var(--weline-theme-canvas) 58%, transparent);
    }
    .w-table[data-w-sticky-start] > thead > tr > th:first-child {
        z-index: 4;
        background: var(--weline-theme-surface);
    }
    .w-table[data-w-sticky-end] > thead > tr > th:last-child,
    .w-table[data-w-sticky-end] > tbody > tr > td:last-child {
        position: sticky;
        inset-inline-end: 0;
        z-index: 2;
        min-inline-size: var(--w-table-sticky-end-min, 8.5rem);
        background: var(--weline-theme-surface);
        border-inline-start: 1px solid var(--weline-theme-border);
        box-shadow: -0.75rem 0 1.5rem color-mix(in srgb, var(--weline-theme-canvas) 58%, transparent);
    }
    .w-table[data-w-sticky-end] > thead > tr > th:last-child {
        z-index: 4;
        background: var(--weline-theme-surface);
    }
    .w-table[data-w-sticky-start] > tbody > tr:hover > td:first-child,
    .w-table[data-w-sticky-end] > tbody > tr:hover > td:last-child {
        background: var(--weline-theme-surface-hover);
    }

    .w-badge { display: inline-flex; align-items: center; gap: var(--weline-space-1); padding: 0.2rem 0.55rem; border-radius: var(--weline-radius-round); background: var(--weline-theme-surface-muted); color: var(--weline-theme-text); font-size: var(--weline-font-size-xs); font-weight: 700; white-space: nowrap; flex-shrink: 0; }
    .w-badge[data-tone="primary"] { background: var(--weline-theme-primary-surface); color: var(--weline-theme-primary); }
    .w-badge[data-tone="secondary"] { background: var(--weline-theme-secondary-surface); color: var(--weline-theme-secondary-emphasis, var(--weline-theme-secondary)); }
    .w-badge[data-tone="success"] { background: var(--weline-theme-success-surface); color: var(--weline-theme-success); }
    .w-badge[data-tone="warning"] { background: var(--weline-theme-warning-surface); color: var(--weline-theme-warning); }
    .w-badge[data-tone="danger"] { background: var(--weline-theme-danger-surface); color: var(--weline-theme-danger); }
    .w-badge[data-tone="info"] { background: var(--weline-theme-info-surface); color: var(--weline-theme-info); }
    .w-badge[data-tone="muted"] { background: var(--weline-theme-surface-muted); color: var(--weline-theme-text-muted); }
    .w-product-labels { position: absolute; inset-block-start: var(--weline-space-3); inset-inline-start: var(--weline-space-3); z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--weline-space-1); max-inline-size: calc(100% - var(--weline-space-6)); pointer-events: none; }
    .w-product-label { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; inline-size: fit-content; max-inline-size: 100%; gap: var(--weline-space-1); padding-block: var(--weline-space-1); padding-inline: var(--weline-space-3); border-radius: var(--weline-radius-round); font-size: var(--weline-font-size-xs); font-weight: var(--weline-font-weight-semibold, 600); line-height: 1.25; letter-spacing: 0; white-space: nowrap; }
    .w-product-labels--bottom-start { inset-block-start: auto; inset-block-end: var(--weline-space-3); }
    .w-product-label[data-kind="new"] { background: var(--w-product-label-new-bg, var(--weline-product-label-new-bg, var(--color-product-label-new-bg))); color: var(--w-product-label-new-text, var(--weline-product-label-new-text, var(--color-product-label-new-text))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w-product-label-new-text, var(--weline-product-label-new-text, var(--color-product-label-new-text))) 12%, transparent); }
    .w-product-label[data-kind="sale"] { background: var(--w-product-label-sale-bg, var(--weline-product-label-sale-bg, var(--color-product-label-sale-bg))); color: var(--w-product-label-sale-text, var(--weline-product-label-sale-text, var(--color-product-label-sale-text))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w-product-label-sale-text, var(--weline-product-label-sale-text, var(--color-product-label-sale-text))) 12%, transparent); }
    .w-product-label[data-kind="demo"] { background: var(--w-product-label-demo-bg, var(--weline-product-label-demo-bg, var(--color-product-label-demo-bg))); color: var(--w-product-label-demo-text, var(--weline-product-label-demo-text, var(--color-product-label-demo-text))); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w-product-label-demo-text, var(--weline-product-label-demo-text, var(--color-product-label-demo-text))) 12%, transparent); }
    .w-alert { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: var(--weline-space-3); padding: var(--weline-space-4); border: 1px solid var(--weline-theme-border); border-radius: var(--weline-radius-md); background: var(--weline-theme-surface-muted); color: var(--weline-theme-text); }
    .w-alert:has(> .w-icon),
    .w-alert:has(> w-icon),
    .w-alert:has(> i),
    .w-alert:has(> svg) { grid-template-columns: auto 1fr auto; }
    .w-alert > .w-button[data-w-close],
    .w-alert > .w-btn-close { justify-self: end; align-self: start; flex-shrink: 0; }
    .w-alert[data-tone="secondary"] { background: var(--weline-theme-secondary-surface); color: var(--weline-theme-secondary-emphasis, var(--weline-theme-secondary)); }
    .w-alert[data-tone="success"] { background: var(--weline-theme-success-surface); color: var(--weline-theme-success); }
    .w-alert[data-tone="warning"] { background: var(--weline-theme-warning-surface); color: var(--weline-theme-warning); }
    .w-alert[data-tone="danger"] { background: var(--weline-theme-danger-surface); color: var(--weline-theme-danger); }
    .w-alert[data-tone="info"] { background: var(--weline-theme-info-surface); color: var(--weline-theme-info); }
    .w-messages { display: grid; gap: var(--weline-space-3); inline-size: 100%; }
    .w-messages:empty, .w-messages__content:empty { display: none; }
    .w-alert__content { display: grid; gap: var(--weline-space-1); min-inline-size: 0; }
    .w-alert__title { font-weight: var(--weline-font-weight-semibold); }

    .w-pagination, .w-breadcrumb, .w-list-group { display: flex; align-items: center; gap: var(--weline-space-1); margin: 0; padding: 0; list-style: none; }
    .w-pagination { flex-wrap: wrap; }
    .w-pagination__link { display: grid; min-inline-size: var(--weline-control-height-sm); min-block-size: var(--weline-control-height-sm); place-items: center; padding-inline: var(--weline-space-2); border: 1px solid var(--weline-theme-border); border-radius: var(--weline-radius-sm); background: var(--weline-theme-surface); color: var(--weline-theme-text); text-decoration: none; }
    .w-pagination__link[aria-current="page"] { background: var(--weline-theme-primary); border-color: var(--weline-theme-primary); color: var(--weline-theme-on-primary); }
    .w-pagination__item[data-state="active"] > .w-pagination__link { background: var(--weline-theme-primary); border-color: var(--weline-theme-primary); color: var(--weline-theme-on-primary); }
    .w-pagination__link[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
    /* Jump form: keep page input + submit on the same row as pager links.
       Default .w-input { inline-size:100% } would wrap the button under flex-wrap. */
    .w-pagination__jump,
    .w-pagination__item > .w-cluster {
        display: inline-flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--w-gap, var(--weline-space-2));
        margin: 0;
        min-inline-size: 0;
    }
    .w-pagination__jump > .w-input,
    .w-pagination__item > .w-cluster > .w-input {
        width: auto;
        inline-size: auto;
        flex: 0 1 auto;
        max-inline-size: 9rem;
        min-block-size: var(--weline-control-height-sm);
    }
    .w-pagination__jump > .w-button,
    .w-pagination__item > .w-cluster > .w-button {
        flex: 0 0 auto;
        white-space: nowrap;
        min-block-size: var(--weline-control-height-sm);
        min-height: var(--weline-control-height-sm);
        padding-block: 0;
        padding-inline: var(--weline-space-2);
        font-size: var(--weline-font-size-sm);
        border-radius: var(--weline-radius-sm);
        line-height: 1.2;
    }
    .w-breadcrumb { flex-wrap: wrap; color: var(--weline-theme-text-muted); font-size: var(--weline-font-size-sm); }
    .w-breadcrumb > li + li::before { content: "/"; margin-inline-end: var(--weline-space-1); color: var(--weline-theme-text-subtle); }
    .w-list-group { flex-direction: column; align-items: stretch; gap: 0; border: 1px solid var(--weline-theme-border); border-radius: var(--weline-radius-md); overflow: clip; }
    .w-list-group__item { padding: var(--weline-space-3) var(--weline-space-4); background: var(--weline-theme-surface); border-bottom: 1px solid var(--weline-theme-border); }
    .w-list-group__item:last-child { border-bottom: 0; }

    .w-tabs__list { display: flex; align-items: stretch; gap: var(--weline-space-1); margin: 0; padding: 0; list-style: none; overflow-x: auto; border-bottom: 1px solid var(--weline-theme-border); scrollbar-width: thin; }
    .w-tabs__list > li { display: contents; list-style: none; margin: 0; padding: 0; }
    .w-tabs__tab { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--weline-space-2); min-height: var(--weline-control-height); padding-inline: var(--weline-space-4); border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--weline-theme-text-muted); font: inherit; font-size: var(--weline-font-size-sm); font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--weline-motion-fast), color var(--weline-motion-fast), box-shadow var(--weline-motion-fast), border-color var(--weline-motion-fast); }
    .w-tabs__tab:hover { color: var(--weline-theme-text); }
    .w-tabs__tab:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--weline-theme-focus) 35%, transparent); }
    .w-tabs__tab[aria-selected="true"], .w-tabs__tab[data-state="active"], .w-tabs__tab.active { border-bottom-color: var(--weline-theme-primary); color: var(--weline-theme-primary); }
    .w-tabs__tab > .w-icon,
    .w-tabs__tab > svg.w-icon { display: block; flex: 0 0 auto; color: currentColor; }
    .w-tabs__tab > span { display: inline; line-height: 1.2; }
    .w-tabs__list[data-variant="soft"] {
        gap: var(--weline-space-1);
        padding: var(--weline-space-1);
        border: 1px solid var(--weline-theme-border);
        border-radius: var(--weline-radius-lg);
        background: var(--weline-theme-surface-muted);
        box-shadow: inset 0 1px 0 color-mix(in srgb, var(--weline-theme-surface) 70%, transparent);
    }
    .w-tabs__list[data-variant="soft"] .w-tabs__tab {
        flex: 0 0 auto;
        min-height: calc(var(--weline-control-height) - 0.25rem);
        padding-inline: var(--weline-space-3);
        border-bottom: 0;
        border-radius: var(--weline-radius-md);
        color: var(--weline-theme-text-muted);
    }
    .w-tabs__list[data-variant="soft"] .w-tabs__tab:hover {
        background: color-mix(in srgb, var(--weline-theme-surface) 72%, transparent);
        color: var(--weline-theme-text);
    }
    .w-tabs__list[data-variant="soft"] .w-tabs__tab[aria-selected="true"],
    .w-tabs__list[data-variant="soft"] .w-tabs__tab[data-state="active"],
    .w-tabs__list[data-variant="soft"] .w-tabs__tab.active {
        background: var(--weline-theme-surface);
        color: var(--weline-theme-primary);
        box-shadow: var(--weline-theme-shadow-sm);
    }
    .w-tabs__panel { padding-block: var(--weline-space-4); }

    .w-dialog { box-sizing: border-box; inline-size: min(42rem, calc(100dvw - 2rem)); min-inline-size: 0; max-inline-size: calc(100dvw - 2rem); max-block-size: min(80dvh, 52rem); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--weline-theme-border); border-radius: var(--weline-radius-lg); background: var(--weline-theme-surface-raised); color: var(--weline-theme-text); box-shadow: var(--weline-theme-shadow-lg); }
    /* Native modal top-layer children stay inside the dialog and must remain
       unclipped. Drawer/non-native overlay floatings portal to body instead. */
    .w-dialog:has(> .w-toast-region),
    .w-dialog:has(> [data-w-floating-portal]) { overflow: visible; }
    .w-dialog::backdrop { background: var(--weline-theme-overlay); }
    .w-dialog__header, .w-dialog__body, .w-dialog__footer { min-inline-size: 0; max-inline-size: 100%; padding: var(--weline-space-5); }
    :where(.w-dialog__header, .w-dialog__body, .w-dialog__footer) > * { min-inline-size: 0; max-inline-size: 100%; }
    .w-dialog__header, .w-dialog__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--weline-space-3); }
    .w-dialog__header { border-bottom: 1px solid var(--weline-theme-border); }
    .w-dialog__body { max-height: 60vh; overflow: auto; }
    .w-dialog__footer { justify-content: flex-end; border-top: 1px solid var(--weline-theme-border); }
    .w-dialog[data-size="sm"] { width: min(24rem, calc(100vw - 2rem)); }
    .w-dialog[data-size="lg"] { width: min(64rem, calc(100vw - 2rem)); }
    .w-dialog:not(dialog) {
        position: fixed;
        inset: 0;
        z-index: var(--weline-z-overlay);
        width: 100%;
        /* Reset card sizing from .w-dialog — otherwise inset:0 is trapped in ~42rem on the inline-start edge. */
        inline-size: auto;
        max-inline-size: none;
        max-block-size: none;
        max-height: none;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: auto;
    }
    /* Closed contract: without this, a missing [hidden] leaves a full-viewport white surface. */
    .w-dialog:not(dialog)[hidden] {
        display: none !important;
    }
    .w-dialog:not(dialog)[data-state="closed"] {
        display: none;
    }
    .w-dialog:not(dialog) > .w-dialog__frame { display: grid; min-height: 100%; min-block-size: 100%; place-items: center; padding: var(--weline-space-4); }
    .w-dialog__surface { box-sizing: border-box; inline-size: min(42rem, calc(100dvw - 2rem)); min-inline-size: 0; max-inline-size: calc(100dvw - 2rem); max-block-size: min(86dvh, 52rem); overflow: auto; border: 1px solid var(--weline-theme-border); border-radius: var(--weline-radius-lg); background: var(--weline-theme-surface-raised); box-shadow: var(--weline-theme-shadow-lg); }
    .w-dialog[data-size="sm"] .w-dialog__surface { width: min(24rem, calc(100vw - 2rem)); }
    .w-dialog[data-size="lg"] .w-dialog__surface { width: min(64rem, calc(100vw - 2rem)); }

    .w-drawer { box-sizing: border-box; position: fixed; inset-block: 0; inset-inline-end: 0; z-index: var(--weline-z-overlay); inline-size: min(28rem, 92dvw); min-inline-size: 0; max-inline-size: 100dvw; padding: var(--weline-space-5); overflow: auto; border-inline-start: 1px solid var(--weline-theme-border); background: var(--weline-theme-surface-raised); color: var(--weline-theme-text); box-shadow: var(--weline-theme-shadow-lg); translate: 100% 0; visibility: hidden; transition: translate var(--weline-motion-normal), visibility var(--weline-motion-normal); }
    .w-drawer[data-state="open"] { translate: 0; visibility: visible; }
    .w-drawer[data-size="sm"] { width: min(22rem, 92vw); }
    .w-drawer[data-size="lg"] { width: min(52rem, 96vw); }
    .w-drawer[data-size="full"] { width: 100vw; }
    /*
     * Docked offcanvas: full viewport height, scrollable body, footer pinned to bottom.
     * Use on side drawers with iframe/remote content + external actions.
     */
    .w-drawer.w-drawer--dock {
        display: flex;
        flex-direction: column;
        padding: 0;
        overflow: hidden;
        block-size: 100dvh;
        max-block-size: 100dvh;
    }
    .w-drawer.w-drawer--dock > .w-drawer__header {
        flex: 0 0 auto;
        margin: 0;
        padding: var(--weline-space-4) var(--weline-space-5);
        border-bottom: 1px solid var(--weline-theme-border);
    }
    .w-drawer.w-drawer--dock > .w-drawer__body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-block-size: 0;
        margin: 0;
        overflow: auto;
    }
    .w-drawer.w-drawer--dock > .w-drawer__footer {
        flex: 0 0 auto;
        margin: 0;
        margin-block-start: auto;
        padding: var(--weline-space-4) var(--weline-space-5);
        border-top: 1px solid var(--weline-theme-border);
        background: var(--weline-theme-surface-raised);
        box-shadow: 0 -6px 18px color-mix(in srgb, var(--weline-theme-shadow) 10%, transparent);
    }
    .w-drawer.w-drawer--dock .w-local-translation-drawer .w-drawer__body {
        overflow: auto;
        padding: 0;
    }
    .w-drawer[data-w-side="start"] { inset-inline: 0 auto; border-inline: 0 1px solid var(--weline-theme-border); translate: -100% 0; }
    .w-drawer[data-w-side="start"][data-state="open"] { translate: 0; }
    .w-drawer[data-w-side="top"], .w-drawer[data-w-side="bottom"] { inset-inline: 0; width: 100%; height: min(42rem, 92vh); border-inline: 0; }
    .w-drawer[data-w-side="top"] { inset-block: 0 auto; border-block-end: 1px solid var(--weline-theme-border); translate: 0 -100%; }
    .w-drawer[data-w-side="bottom"] { inset-block: auto 0; border-block-start: 1px solid var(--weline-theme-border); translate: 0 100%; }
    .w-drawer[data-w-side="top"][data-state="open"], .w-drawer[data-w-side="bottom"][data-state="open"] { translate: 0; }
    .w-drawer__header, .w-drawer__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--weline-space-3); }
    .w-drawer__title { display: inline-flex; align-items: center; gap: var(--weline-space-2); margin: 0; min-width: 0; font-size: var(--weline-font-size-lg); font-weight: 600; line-height: 1.3; }
    .w-drawer__title .w-icon { flex: 0 0 auto; }
    .w-drawer__body { min-inline-size: 0; max-inline-size: 100%; margin-block: var(--weline-space-4); }
    :where(.w-drawer__header, .w-drawer__body, .w-drawer__footer) > * { min-inline-size: 0; max-inline-size: 100%; }
    .w-remote-drawer { display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 0; }
    .w-remote-drawer[hidden] { display: none; }
    .w-remote-drawer > .w-drawer__header { padding: var(--weline-space-4) var(--weline-space-5); border-bottom: 1px solid var(--weline-theme-border); }
    .w-remote-drawer > .w-drawer__body { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr); margin: 0; }
    .w-remote-drawer__toolbar { padding: var(--weline-space-3) var(--weline-space-5); border-bottom: 1px solid var(--weline-theme-border); }
    .w-remote-drawer__frame-host {
        position: relative;
        display: grid;
        grid-template: minmax(0, 1fr) / minmax(0, 1fr);
        min-height: 0;
        min-inline-size: 0;
    }
    .w-remote-drawer__frame-host > .w-remote-drawer__frame {
        grid-area: 1 / 1;
        width: 100%;
        height: 100%;
        min-height: 20rem;
        border: 0;
        background: var(--weline-theme-surface);
    }
    .w-remote-drawer__frame { width: 100%; height: 100%; min-height: 20rem; border: 0; background: var(--weline-theme-surface); }
    .w-remote-drawer__loading {
        grid-area: 1 / 1;
        z-index: 1;
        display: grid;
        place-items: center;
        min-height: 20rem;
        pointer-events: auto;
    }
    .w-remote-drawer__loading[hidden] { display: none; }
    .w-remote-drawer__loading-backdrop {
        position: absolute;
        inset: 0;
        background: color-mix(in srgb, var(--weline-theme-surface) 68%, transparent);
        backdrop-filter: blur(2px);
    }
    .w-remote-drawer__loading-content {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--weline-space-3);
        padding: var(--weline-space-4);
        border: 1px solid var(--weline-theme-border);
        border-radius: var(--weline-radius-lg);
        background: var(--weline-theme-surface);
        box-shadow: var(--weline-theme-shadow-lg);
        color: var(--weline-theme-text);
    }
    /* Solid scrim (no blur): dense admin tables look mottled under backdrop-filter. */
    .w-overlay {
        position: fixed;
        inset: 0;
        z-index: calc(var(--weline-z-overlay) - 1);
        background: var(--weline-theme-overlay);
    }

    /*
     * In-place elevate layers (megamenu / overflow dropdown / custom flyout).
     * Markup: [data-wf-scope] > [data-wf-host] > [data-wf-layer]
     * JS (Weline.UI.stack.elevate) sets data-wf-raised + z-index = sibling peak + 1.
     */
    [data-wf-scope],
    [data-wf-host] {
        position: relative;
    }
    [data-wf-scope][data-wf-raised],
    [data-wf-host][data-wf-raised] {
        z-index: var(--wf-stack-z, var(--weline-z-menu));
        overflow: visible;
    }
    [data-wf-layer][data-wf-raised] {
        z-index: var(--wf-stack-z, calc(var(--weline-z-menu) + 1));
    }
    /* Ancestors between scope and layer must not clip the flyout */
    [data-wf-unclip] {
        overflow: visible;
    }

    .w-menu-root { position: relative; }
    .w-menu, .w-popover, .w-combobox__panel, .w-icon-picker__panel { box-sizing: border-box; position: absolute; z-index: var(--weline-z-menu); inline-size: var(--w-floating-inline-size, max-content); min-inline-size: min(12rem, var(--w-floating-max-inline-size, calc(100dvw - 1rem))); max-inline-size: min(24rem, var(--w-floating-max-inline-size, calc(100dvw - 1rem))); max-block-size: var(--w-floating-max-block-size, calc(100dvh - 1rem)); padding: var(--weline-space-2); overflow: auto; overflow-wrap: anywhere; overscroll-behavior: contain; scrollbar-width: thin; border: 1px solid var(--weline-theme-border); border-radius: var(--weline-radius-md); background: var(--weline-theme-surface-raised); color: var(--weline-theme-text); box-shadow: var(--weline-theme-shadow-md); }
    :where(.w-menu, .w-popover, .w-combobox__panel, .w-icon-picker__panel) > * { min-inline-size: 0; max-inline-size: 100%; }
    /* Any portaled floating (menu/popover/combobox/icon-picker/language-select/tooltip/…) */
    .w-menu[data-w-floating-positioned],
    .w-popover[data-w-floating-positioned],
    .w-combobox__panel[data-w-floating-positioned],
    .w-icon-picker__panel[data-w-floating-positioned],
    .w-language-select__popover[data-w-floating-positioned],
    .w-currency-select__popover[data-w-floating-positioned],
    .w-tooltip[data-w-floating-positioned],
    [data-w-component~="anchored-float"][data-w-floating-positioned],
    [data-w-floating-portal][data-w-floating-positioned],
    .w-address__menu[data-w-floating-positioned] {
        position: fixed;
        inset: auto;
        top: max(var(--w-floating-top, 0px), var(--w-floating-viewport-top, .5rem));
        left: max(var(--w-floating-left, 0px), var(--w-floating-viewport-left, .5rem));
        margin: 0;
        translate: none;
        /* Use JS-published visualViewport/safe-area bounds; dvh/dvw are fallbacks only. */
        max-inline-size: min(
            var(--w-floating-max-inline-size, calc(100dvw - 1rem)),
            calc(
                var(--w-floating-viewport-right, calc(100dvw - .5rem))
                - max(var(--w-floating-left, 0px), var(--w-floating-viewport-left, .5rem))
            )
        );
        max-block-size: min(
            var(--w-floating-max-block-size, calc(100dvh - 1rem)),
            calc(
                var(--w-floating-viewport-bottom, calc(100dvh - .5rem))
                - max(var(--w-floating-top, 0px), var(--w-floating-viewport-top, .5rem))
            )
        );
        transform-origin: var(--w-floating-transform-origin, top);
        opacity: 1;
        isolation: isolate;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    /* 菜单/弹层：portal 到 body 后保持不透明浅色面。tooltip 除外（需反色字：深底浅字）。 */
    .w-menu[data-w-floating-positioned],
    .w-popover[data-w-floating-positioned],
    .w-combobox__panel[data-w-floating-positioned],
    .w-icon-picker__panel[data-w-floating-positioned],
    .w-language-select__popover[data-w-floating-positioned],
    .w-currency-select__popover[data-w-floating-positioned],
    [data-w-component~="anchored-float"][data-w-floating-positioned],
    [data-w-floating-portal][data-w-floating-positioned]:not(.w-tooltip),
    .w-address__menu[data-w-floating-positioned] {
        background-color: #ffffff;
        background-color: var(--weline-theme-surface-raised, #ffffff);
        background: var(--weline-theme-surface-raised, #ffffff);
    }
    .w-tooltip[data-w-floating-positioned] {
        background-color: var(--weline-theme-text);
        background: var(--weline-theme-text);
        color: var(--weline-theme-surface);
    }
    [data-w-floating-positioned="pending"] { visibility: hidden; }
    .w-menu__item, .w-combobox__option { display: flex; width: 100%; min-width: 0; min-height: var(--weline-control-height-sm); align-items: center; gap: var(--weline-space-2); padding: var(--weline-space-2) var(--weline-space-3); border: 0; border-radius: var(--weline-radius-sm); background: transparent; color: inherit; text-align: start; text-decoration: none; cursor: pointer; }
    .w-menu__item:hover, .w-menu__item:focus-visible, .w-menu__item[data-state="active"], .w-combobox__option:hover, .w-combobox__option[aria-selected="true"] { background: var(--weline-theme-surface-hover); outline: 0; }
    /*
     * Search category menu nests as a raised light tree — open branch must stay
     * paper ink. Only non-category dark flyouts keep inverse hover text.
     */
    .w-menu.search-type-menu.search-category-menu .search-type-submenu .w-menu__item:hover,
    .w-menu.search-type-menu.search-category-menu .search-type-submenu .w-menu__item:focus-visible,
    .w-menu.search-type-menu.search-category-menu .search-type-submenu .w-menu__item.is-active,
    .w-menu.search-type-menu.search-category-menu .search-type-submenu .w-menu__item[aria-selected="true"],
    .w-menu.search-type-menu.search-category-menu .search-type-submenu .search-type-node.is-open > .search-type-option--branch,
    .w-menu.search-type-menu.search-category-menu .search-type-submenu .search-type-node[data-state="open"] > .search-type-option--branch {
        background: var(--weline-theme-surface-hover, rgba(15, 17, 17, 0.06));
        color: var(--amz-drawer-text, #0f1111);
        outline: 0;
    }
    .w-menu.search-type-menu.search-category-menu .search-type-submenu .w-menu__item:hover .search-type-option-chevron,
    .w-menu.search-type-menu.search-category-menu .search-type-submenu .w-menu__item:focus-visible .search-type-option-chevron,
    .w-menu.search-type-menu.search-category-menu .search-type-submenu .search-type-node.is-open > .search-type-option--branch .search-type-option-chevron,
    .w-menu.search-type-menu.search-category-menu .search-type-submenu .search-type-node[data-state="open"] > .search-type-option--branch .search-type-option-chevron {
        color: var(--amz-drawer-muted, #565959);
    }
    .w-menu:not(.search-category-menu) .search-type-submenu .w-menu__item:hover,
    .w-menu:not(.search-category-menu) .search-type-submenu .w-menu__item:focus-visible,
    .w-menu:not(.search-category-menu) .search-type-submenu .w-menu__item.is-active,
    .w-menu:not(.search-category-menu) .search-type-submenu .w-menu__item[aria-selected="true"],
    .w-menu:not(.search-category-menu) .search-type-submenu .search-type-node.is-open > .search-type-option--branch,
    .w-menu:not(.search-category-menu) .search-type-submenu .search-type-node[data-state="open"] > .search-type-option--branch {
        background: rgba(255, 255, 255, 0.14);
        color: var(--weline-chrome-text-on-inverse, var(--weline-theme-text-on-dark, #ffffff));
        outline: 0;
    }
    .w-menu:not(.search-category-menu) .search-type-submenu .w-menu__item:hover .search-type-option-chevron,
    .w-menu:not(.search-category-menu) .search-type-submenu .w-menu__item:focus-visible .search-type-option-chevron,
    .w-menu:not(.search-category-menu) .search-type-submenu .search-type-node.is-open > .search-type-option--branch .search-type-option-chevron,
    .w-menu:not(.search-category-menu) .search-type-submenu .search-type-node[data-state="open"] > .search-type-option--branch .search-type-option-chevron {
        color: rgba(255, 255, 255, 0.85);
    }
    .search-type-submenu .w-menu__item.is-active .search-type-option-check,
    .search-type-submenu .w-menu__item[aria-selected="true"] .search-type-option-check {
        color: var(--weline-chrome-primary, var(--weline-theme-primary, var(--color-primary)));
    }
    .w-menu__item[data-tone="primary"] { color: var(--weline-theme-primary); font-weight: 700; }
    .w-menu__item[data-tone="danger"] { color: var(--weline-theme-danger); }
    .w-menu__header { padding: var(--weline-space-2) var(--weline-space-3); color: var(--weline-theme-text-muted); font-size: var(--weline-font-size-xs); font-weight: 700; text-transform: uppercase; }
    .w-menu__divider { height: 1px; margin-block: var(--weline-space-2); background: var(--weline-theme-border); }
    .w-language-switcher__trigger { max-width: min(12rem, 36vw); }
    .w-language-switcher__current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .w-language-switcher__menu {
        display: grid;
        width: min(24rem, calc(100dvw - 1rem));
        max-height: min(32rem, calc(100dvh - 1rem));
        max-block-size: min(32rem, var(--w-floating-max-block-size, calc(100dvh - 1rem)));
        grid-template-rows: auto minmax(0, 1fr) auto;
        padding: 0;
        overflow: hidden;
        overscroll-behavior: contain;
        background-color: var(--weline-theme-surface-raised, #ffffff);
        background: var(--weline-theme-surface-raised, #ffffff);
        /*
         * Paper ink on raised switcher panel (WO-UI-CONTRAST-INVERSE).
         * Header/footer [data-surface=inverse] remaps --weline-theme-text to
         * on-dark; this menu is surface-raised cream → must restore ink locally
         * (same contract as account-dropdown / mini-cart-drawer).
         */
        --_paper-text: var(--amz-drawer-text, #0f1111);
        --_paper-muted: var(--amz-drawer-muted, #565959);
        --_inverse-text: var(--_paper-text);
        --_inverse-muted: var(--_paper-muted);
        --weline-theme-text: var(--_paper-text);
        --weline-theme-text-secondary: var(--_paper-muted);
        --weline-theme-text-muted: var(--_paper-muted);
        --weline-theme-text-subtle: var(--_paper-muted);
        --weline-theme-body-text: var(--_paper-text);
        --weline-theme-body-text-secondary: var(--_paper-muted);
        --weline-theme-body-text-muted: var(--_paper-muted);
        --weline-theme-body-text-heading: var(--_paper-text);
        --weline-theme-color-text: var(--_paper-text);
        --weline-theme-color-text-muted: var(--_paper-muted);
        --color-text: var(--_paper-text);
        --color-text-primary: var(--_paper-text);
        --color-text-secondary: var(--_paper-muted);
        --color-text-muted: var(--_paper-muted);
        --color-text-placeholder: var(--_paper-muted);
        --w-surface-fg: var(--_paper-text);
        --w-surface-fg-muted: var(--_paper-muted);
        --w-surface-fg-subtle: var(--_paper-muted);
        color: var(--_paper-text);
        color-scheme: light;
    }
    /*
     * Language-support request dialog is a native <dialog> still nested under
     * inverse chrome in the DOM; without local paper rebind, title/labels/hints
     * paint on-dark on surface-raised (白字白底). w-field/w-input consume these
     * Tokens — keep subtle/placeholder + light color-scheme so theme controls stay readable.
     */
    .w-dialog[data-language-request-modal],
    dialog.w-dialog[data-language-request-modal],
    .w-dialog[data-i18n-unsupported-lang],
    dialog.w-dialog[data-i18n-unsupported-lang] {
        --_paper-text: var(--amz-drawer-text, #0f1111);
        --_paper-muted: var(--amz-drawer-muted, #565959);
        --_inverse-text: var(--_paper-text);
        --_inverse-muted: var(--_paper-muted);
        --weline-theme-text: var(--_paper-text);
        --weline-theme-text-secondary: var(--_paper-muted);
        --weline-theme-text-muted: var(--_paper-muted);
        --weline-theme-text-subtle: var(--_paper-muted);
        --weline-theme-body-text: var(--_paper-text);
        --weline-theme-body-text-secondary: var(--_paper-muted);
        --weline-theme-body-text-muted: var(--_paper-muted);
        --weline-theme-body-text-heading: var(--_paper-text);
        --weline-theme-color-text: var(--_paper-text);
        --weline-theme-color-text-muted: var(--_paper-muted);
        --color-text: var(--_paper-text);
        --color-text-primary: var(--_paper-text);
        --color-text-secondary: var(--_paper-muted);
        --color-text-muted: var(--_paper-muted);
        --color-text-placeholder: var(--_paper-muted);
        --w-surface-fg: var(--_paper-text);
        --w-surface-fg-muted: var(--_paper-muted);
        --w-surface-fg-subtle: var(--_paper-muted);
        color: var(--_paper-text);
        color-scheme: light;
    }
    .w-language-switcher__search-wrap {
        position: relative;
        z-index: 2;
        padding: var(--weline-space-2);
        border-block-end: 1px solid var(--weline-theme-border);
        background: var(--weline-theme-surface-raised, #ffffff);
    }
    .w-language-switcher__search { width: 100%; min-width: 0; }
    .w-language-switcher__list {
        min-height: 0;
        padding: var(--weline-space-2);
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .w-language-switcher__empty {
        margin: 0;
        padding: var(--weline-space-3);
        color: var(--weline-theme-text-muted);
        font-size: var(--weline-font-size-sm);
        text-align: center;
    }
    .w-language-switcher__footer {
        display: grid;
        gap: 0;
        padding: var(--weline-space-1) var(--weline-space-2) var(--weline-space-2);
        border-block-start: 1px solid var(--weline-theme-border);
        background: var(--weline-theme-surface-raised, #ffffff);
    }
    .w-language-switcher__footer .w-menu__divider { display: none; }
    .w-language-switcher__group + .w-language-switcher__group { margin-block-start: var(--weline-space-2); }
    .w-language-switcher__group-label { display: flex; align-items: center; justify-content: space-between; gap: var(--weline-space-2); }
    .w-language-switcher__group-label small { font-size: inherit; font-weight: 500; }
    .w-language-switcher__option { align-items: flex-start; }
    .w-language-switcher__flag { display: inline-flex; inline-size: 1.5rem; min-height: 1rem; flex: 0 0 auto; align-items: center; justify-content: center; overflow: hidden; }
    .w-language-switcher__flag svg,
    .w-language-switcher__flag img.w-flag-icon { display: block; inline-size: 1.5rem; block-size: auto; max-block-size: 1.1rem; stroke: none; }
    .w-language-switcher__copy { display: grid; min-width: 0; gap: var(--weline-space-1); }
    .w-language-switcher__copy small { color: var(--weline-theme-text-muted); white-space: normal; }
    /* Dialog surface already has a wide shell. The 24rem cap is for the dropdown panel. */
    .w-language-switcher[data-i18n-surface="dialog"] .w-language-switcher__menu {
        width: 100%;
        max-inline-size: 100%;
    }
    .w-language-switcher[data-i18n-surface="dialog"] .w-language-switcher__copy { flex: 1 1 auto; }
    .w-unsupported-path {
        display: grid;
        gap: var(--weline-space-4);
        min-inline-size: 0;
    }
    .w-unsupported-path[data-columns="2"] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .w-unsupported-path__col { min-inline-size: 0; }
    .w-unsupported-path__label {
        margin: 0 0 var(--weline-space-2);
        font-size: var(--weline-font-size-sm);
        color: var(--weline-chrome-body-text, #0f1111);
    }
    .w-unsupported-path .w-currency-switcher__menu,
    .w-unsupported-path .w-language-switcher__menu {
        width: 100%;
        max-inline-size: 100%;
    }
    @media (max-width: 720px) {
        .w-unsupported-path[data-columns="2"] {
            grid-template-columns: minmax(0, 1fr);
        }
    }
    .w-disclosure {
        overflow: clip;
        border: 1px solid var(--weline-theme-border);
        border-radius: var(--weline-radius-lg);
        background: var(--weline-theme-surface);
    }
    .w-disclosure > :is(h1, h2, h3, h4, h5, h6) {
        margin: 0;
        font: inherit;
    }
    .w-disclosure__trigger {
        display: flex;
        width: 100%;
        min-height: var(--weline-control-height-lg);
        align-items: center;
        justify-content: flex-start;
        gap: var(--weline-space-3);
        padding: var(--weline-space-3) var(--weline-space-4);
        border: 0;
        background: var(--weline-theme-surface-muted);
        color: var(--weline-theme-text);
        font: inherit;
        font-weight: 650;
        line-height: 1.35;
        text-align: start;
        cursor: pointer;
        transition: background var(--weline-motion-fast, 0.15s ease), color var(--weline-motion-fast, 0.15s ease);
    }
    .w-disclosure__trigger:hover {
        background: var(--weline-theme-surface-hover);
    }
    .w-disclosure__trigger:focus-visible {
        outline: 2px solid var(--weline-theme-primary);
        outline-offset: -2px;
    }
    /* 默认识别为手风琴：右侧 chevron；已自带末尾图标时不重复画 */
    .w-disclosure__trigger::after {
        content: "";
        flex: 0 0 auto;
        width: 0.5rem;
        height: 0.5rem;
        margin-inline-start: auto;
        border-inline-end: 2px solid currentColor;
        border-block-end: 2px solid currentColor;
        transform: rotate(45deg);
        opacity: 0.72;
        transition: transform var(--weline-motion-fast, 0.15s ease), opacity var(--weline-motion-fast, 0.15s ease);
    }
    .w-disclosure__trigger[aria-expanded="true"]::after,
    .w-disclosure[data-state="open"] > .w-disclosure__trigger::after,
    .w-disclosure[data-state="open"] > :is(h1, h2, h3, h4, h5, h6) > .w-disclosure__trigger::after {
        transform: rotate(-135deg);
        opacity: 1;
    }
    .w-disclosure__trigger:has(> :not(.w-icon) ~ .w-icon:last-child)::after,
    .w-disclosure__trigger:has(> .w-icon ~ .w-icon:last-child)::after {
        content: none;
        display: none;
    }
    .w-disclosure__trigger:has(> :not(.w-icon) ~ .w-icon:last-child) > .w-icon:last-child,
    .w-disclosure__trigger:has(> .w-icon ~ .w-icon:last-child) > .w-icon:last-child {
        margin-inline-start: auto;
        transition: transform var(--weline-motion-fast, 0.15s ease);
    }
    .w-disclosure__trigger[aria-expanded="true"]:has(> :not(.w-icon) ~ .w-icon:last-child) > .w-icon:last-child,
    .w-disclosure__trigger[aria-expanded="true"]:has(> .w-icon ~ .w-icon:last-child) > .w-icon:last-child,
    .w-disclosure[data-state="open"] > .w-disclosure__trigger:has(> :not(.w-icon) ~ .w-icon:last-child) > .w-icon:last-child,
    .w-disclosure[data-state="open"] > .w-disclosure__trigger:has(> .w-icon ~ .w-icon:last-child) > .w-icon:last-child,
    .w-disclosure[data-state="open"] > :is(h1, h2, h3, h4, h5, h6) > .w-disclosure__trigger:has(> :not(.w-icon) ~ .w-icon:last-child) > .w-icon:last-child,
    .w-disclosure[data-state="open"] > :is(h1, h2, h3, h4, h5, h6) > .w-disclosure__trigger:has(> .w-icon ~ .w-icon:last-child) > .w-icon:last-child {
        transform: rotate(180deg);
    }
    .w-disclosure__panel {
        padding: 0;
        color: var(--weline-theme-text-muted);
    }
    .w-disclosure__body {
        padding: var(--weline-space-4);
        border-block-start: 1px solid var(--weline-theme-border);
        color: var(--weline-theme-text);
    }
    .w-stack > .w-disclosure + .w-disclosure {
        margin-block-start: var(--weline-space-3);
    }

    .w-toast-region { position: fixed; inset-block-start: max(var(--weline-space-4), env(safe-area-inset-top)); inset-inline-end: max(var(--weline-space-4), env(safe-area-inset-right)); z-index: var(--weline-z-toast); display: grid; width: min(24rem, calc(100dvw - 2rem)); max-block-size: calc(100dvh - max(var(--weline-space-8), env(safe-area-inset-top)) - max(var(--weline-space-4), env(safe-area-inset-bottom))); gap: var(--weline-space-3); overflow: auto; overscroll-behavior: contain; pointer-events: none; scrollbar-width: thin; }
    /* Popover UA stylesheet centers/borders the host; keep corner toast layout when
       the region is promoted into the top layer above native modal dialogs. */
    .w-toast-region[popover] {
        inset: unset;
        inset-block-start: max(var(--weline-space-4), env(safe-area-inset-top));
        inset-inline-end: max(var(--weline-space-4), env(safe-area-inset-right));
        width: min(24rem, calc(100dvw - 2rem));
        height: fit-content;
        max-block-size: calc(100dvh - max(var(--weline-space-8), env(safe-area-inset-top)) - max(var(--weline-space-4), env(safe-area-inset-bottom)));
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        overflow: auto;
    }
    .w-toast { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: var(--weline-space-3); padding: var(--weline-space-4); border: 1px solid var(--weline-theme-border); border-inline-start: 4px solid var(--weline-theme-primary); border-radius: var(--weline-radius-md); background: var(--weline-theme-surface-raised); color: var(--weline-theme-text); box-shadow: var(--weline-theme-shadow-md); pointer-events: auto; }
    .w-toast__icon { color: var(--weline-theme-primary); }
    .w-toast__content { display: grid; min-width: 0; gap: var(--weline-space-1); overflow-wrap: anywhere; }
    .w-toast__content > * { min-width: 0; max-width: 100%; }
    .w-toast__code {
        display: inline-flex;
        width: fit-content;
        max-width: 100%;
        padding: 0.1rem 0.4rem;
        border-radius: var(--weline-radius-sm);
        background: var(--weline-theme-surface-muted);
        color: var(--weline-theme-text-muted, var(--weline-theme-text));
        font-family: var(--weline-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
        font-size: var(--weline-font-size-xs);
        line-height: 1.4;
    }
    .w-toast__details {
        margin: 0;
        border-radius: var(--weline-radius-sm);
        background: var(--weline-theme-surface-muted);
    }
    .w-toast__details > summary {
        cursor: pointer;
        list-style: none;
        padding: var(--weline-space-1) var(--weline-space-2);
        color: var(--weline-theme-text-muted, var(--weline-theme-text));
        font-size: var(--weline-font-size-xs);
        user-select: none;
    }
    .w-toast__details > summary::-webkit-details-marker { display: none; }
    .w-toast__details[open] > summary {
        border-block-end: 1px solid var(--weline-theme-border);
    }
    .w-toast__details-body {
        margin: 0;
        padding: var(--weline-space-2);
        max-block-size: 12rem;
        overflow: auto;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        font-family: var(--weline-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
        font-size: var(--weline-font-size-xs);
        line-height: 1.45;
        color: var(--weline-theme-text);
    }
    .w-toast[data-tone="success"] { border-inline-start-color: var(--weline-theme-success); }
    .w-toast[data-tone="warning"] { border-inline-start-color: var(--weline-theme-warning); }
    .w-toast[data-tone="danger"] { border-inline-start-color: var(--weline-theme-danger); }
    .w-toast[data-tone="success"] .w-toast__icon { color: var(--weline-theme-success); }
    .w-toast[data-tone="warning"] .w-toast__icon { color: var(--weline-theme-warning); }
    .w-toast[data-tone="danger"] .w-toast__icon { color: var(--weline-theme-danger); }
    .w-toast[data-tone="info"] .w-toast__icon { color: var(--weline-theme-info); }
    .w-tooltip { position: fixed; z-index: var(--weline-z-toast); max-width: 18rem; padding: var(--weline-space-1) var(--weline-space-2); border-radius: var(--weline-radius-sm); background: var(--weline-theme-text); color: var(--weline-theme-surface); font-size: var(--weline-font-size-xs); box-shadow: var(--weline-theme-shadow-sm); pointer-events: none; }

    .w-progress { width: 100%; height: 0.55rem; overflow: hidden; border-radius: var(--weline-radius-round); background: var(--weline-theme-surface-muted); }
    .w-progress__bar { height: 100%; width: var(--w-progress, 0%); border-radius: inherit; background: var(--weline-theme-primary); transition: width var(--weline-motion-normal); }
    .w-progress__bar[data-tone="success"] { background: var(--weline-theme-success); }
    .w-progress__bar[data-tone="warning"] { background: var(--weline-theme-warning); }
    .w-progress__bar[data-tone="danger"] { background: var(--weline-theme-danger); }
    .w-progress__bar[data-tone="info"] { background: var(--weline-theme-info); }
    .w-spinner {
        display: inline-block;
        flex-shrink: 0;
        box-sizing: border-box;
        inline-size: 1.25rem;
        block-size: 1.25rem;
        border: 2px solid var(--weline-theme-border);
        border-top-color: var(--weline-theme-primary);
        border-radius: 50%;
        animation: w-spin 700ms linear infinite;
        vertical-align: -0.15em;
    }
    .w-loading {
        position: fixed;
        inset: 0;
        z-index: var(--weline-z-overlay);
        display: grid;
        place-items: center;
        padding: calc(var(--weline-space-4) + var(--weline-safe-area-top))
            calc(var(--weline-space-4) + var(--weline-safe-area-right))
            calc(var(--weline-space-4) + var(--weline-safe-area-bottom))
            calc(var(--weline-space-4) + var(--weline-safe-area-left));
    }
    /* Local/container loading: host must be position:relative (see .w-busy). */
    .w-loading.w-loading--local,
    .w-loading[data-w-scope="local"] {
        position: absolute;
        inset: 0;
        z-index: calc(var(--weline-z-overlay, 20) - 1);
        padding: var(--weline-space-3);
        border-radius: inherit;
    }
    .w-loading[hidden] { display: none; }
    .w-loading__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--weline-theme-surface) 68%, transparent); backdrop-filter: blur(2px); }
    .w-loading.w-loading--local > .w-loading__backdrop,
    .w-loading[data-w-scope="local"] > .w-loading__backdrop {
        border-radius: inherit;
    }
    .w-loading__content {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--weline-space-3);
        max-inline-size: min(30rem, 100%);
        padding: var(--weline-space-4);
        border: 1px solid var(--weline-theme-border);
        border-radius: var(--weline-radius-lg);
        background: var(--weline-theme-surface);
        box-shadow: var(--weline-theme-shadow-lg);
        color: var(--weline-theme-text);
    }
    /* Programmatic container busy (Weline.UI.setBusy): blocks interaction until cleared. */
    .w-busy {
        position: relative;
    }
    .w-busy[data-w-busy="true"] {
        cursor: wait;
    }
    .w-busy[data-w-busy="true"] > *:not([data-w-busy-overlay]) {
        pointer-events: none;
        user-select: none;
    }
    .w-busy__overlay {
        position: absolute;
        inset: 0;
        z-index: calc(var(--weline-z-overlay, 20) - 1);
        display: grid;
        place-items: center;
        border-radius: inherit;
        pointer-events: auto;
    }
    .w-busy__overlay[hidden] { display: none; }
    .w-busy__backdrop {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: color-mix(in srgb, var(--weline-theme-surface) 72%, transparent);
        backdrop-filter: blur(1px);
    }
    .w-busy__content {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: var(--weline-space-2);
        max-inline-size: min(24rem, 100%);
        padding: var(--weline-space-3) var(--weline-space-4);
        border: 1px solid var(--weline-theme-border);
        border-radius: var(--weline-radius-md);
        background: var(--weline-theme-surface);
        box-shadow: var(--weline-theme-shadow-md);
        color: var(--weline-theme-text);
        font-size: var(--weline-font-size-sm, 0.875rem);
    }
    .w-busy__message:empty { display: none; }
    /*
     * Layout stability (Theme mechanism · CLS): .w-frame / .w-skeleton / .w-lines
     * Geometry is global; colors/radii/heights via --weline-theme-* / registered tokens.
     * Enter theme-head once — FORBID per-layout copies or widget-private aspect locks.
     */
    .w-frame {
        --weline-frame-ratio: 1;
        --weline-frame-fit: cover;
        box-sizing: border-box;
        display: block;
        position: relative;
        width: 100%;
        overflow: hidden;
        aspect-ratio: var(--weline-frame-ratio);
        background: var(--weline-theme-surface-muted, var(--weline-theme-surface-hover, transparent));
        border-radius: var(--weline-radius-md, var(--weline-theme-radius-md, 0.625rem));
    }
    .w-frame[data-ratio="1"] { --weline-frame-ratio: 1; }
    .w-frame[data-ratio="3/4"] { --weline-frame-ratio: 3 / 4; }
    .w-frame[data-ratio="2/3"] { --weline-frame-ratio: 2 / 3; }
    .w-frame[data-ratio="4/3"] { --weline-frame-ratio: 4 / 3; }
    .w-frame[data-ratio="3/2"] { --weline-frame-ratio: 3 / 2; }
    .w-frame[data-ratio="16/5"] { --weline-frame-ratio: 16 / 5; }
    .w-frame[data-ratio="16/9"] { --weline-frame-ratio: 16 / 9; }
    .w-frame[data-ratio="21/9"] { --weline-frame-ratio: 21 / 9; }
    .w-frame[data-fit="cover"] { --weline-frame-fit: cover; }
    .w-frame[data-fit="contain"] { --weline-frame-fit: contain; }
    .w-frame > :is(img, .w-file-image, picture),
    .w-frame > a:first-child {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
    }
    .w-frame > :is(img, .w-file-image),
    .w-frame > a:first-child > :is(img, .w-file-image),
    .w-frame > picture > img {
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: var(--weline-frame-fit);
        object-position: center;
    }
    .w-skeleton {
        min-height: 1rem;
        border-radius: var(--weline-radius-sm);
        background: linear-gradient(
            90deg,
            var(--weline-theme-surface-muted),
            var(--weline-theme-surface-hover),
            var(--weline-theme-surface-muted)
        );
        background-size: 200% 100%;
        animation: w-skeleton 1.2s ease-in-out infinite;
    }
    .w-skeleton[data-size="card"] {
        min-height: var(--weline-skeleton-card-min-h, 14rem);
        width: 100%;
        border-radius: var(--weline-radius-md, var(--weline-theme-radius-md, 0.625rem));
    }
    .w-lines {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: var(--weline-lines-lh, 1.4);
        min-height: calc(var(--weline-lines-n, 2) * var(--weline-lines-lh, 1.4) * 1em);
        -webkit-line-clamp: var(--weline-lines-n, 2);
    }
    .w-lines[data-lines="2"] { --weline-lines-n: 2; }
    .w-lines[data-lines="3"] { --weline-lines-n: 3; }
    @keyframes w-spin { to { rotate: 1turn; } }
    @keyframes w-skeleton { to { background-position-x: -200%; } }
    .w-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--weline-space-3); }
    .w-empty { display: grid; min-height: 12rem; place-items: center; gap: var(--weline-space-3); padding: var(--weline-space-8); color: var(--weline-theme-text-muted); text-align: center; }

    .w-transfer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--weline-space-3); align-items: stretch; }
    .w-transfer__list { min-height: 14rem; padding: var(--weline-space-2); overflow: auto; border: 1px solid var(--weline-theme-border); border-radius: var(--weline-radius-md); background: var(--weline-theme-surface); }
    .w-tree, .w-tree ul { margin: 0; padding: 0; list-style: none; }
    .w-tree ul { padding-inline-start: var(--weline-space-5); }
    .w-tree__row { display: flex; min-height: var(--weline-control-height-sm); align-items: center; gap: var(--weline-space-1); border-radius: var(--weline-radius-sm); }
    .w-tree__row:hover { background: var(--weline-theme-surface-hover); }
    [data-w-reorder-handle] { cursor: grab; touch-action: none; user-select: none; }
    [data-w-reorder-handle][data-state="dragging"] { cursor: grabbing; }
    [data-w-reorder-item][data-state="dragging"] { position: relative; z-index: 1; opacity: 0.62; box-shadow: var(--weline-theme-shadow-md); }

    w-icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
    .w-icon { inline-size: 1.25rem; block-size: 1.25rem; flex: 0 0 auto; }
    .w-icon[data-size="xs"] { inline-size: 0.875rem; block-size: 0.875rem; }
    .w-icon[data-size="sm"] { inline-size: 1rem; block-size: 1rem; }
    .w-icon[data-size="lg"] { inline-size: 1.5rem; block-size: 1.5rem; }
    .w-icon[data-size="xl"] { inline-size: 2rem; block-size: 2rem; }
    .w-icon-picker { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--weline-space-2); }
    .w-icon-picker__trigger { display: flex; min-height: var(--weline-control-height); align-items: center; gap: var(--weline-space-2); padding: 0 var(--weline-space-3); border: 1px solid var(--weline-theme-border-strong); border-radius: var(--weline-radius-md); background: var(--weline-theme-surface); color: var(--weline-theme-text); cursor: pointer; }
    .w-icon-picker__preview { display: inline-grid; min-inline-size: 1.25rem; place-items: center; }
    .w-icon-picker__text { flex: 1; overflow: hidden; color: var(--weline-theme-text-muted); text-align: start; text-overflow: ellipsis; white-space: nowrap; }
    .w-icon-picker__clear { display: grid; place-items: center; border: 0; background: transparent; color: var(--weline-theme-text-muted); cursor: pointer; }
    .w-icon-picker__panel { inset-block-start: calc(100% + var(--weline-space-1)); inset-inline: 0; }
    .w-icon-picker__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr)); gap: var(--weline-space-1); max-height: 18rem; margin-block-start: var(--weline-space-2); overflow: auto; }
    .w-icon-picker__option { display: grid; aspect-ratio: 1; place-items: center; border: 1px solid transparent; border-radius: var(--weline-radius-sm); background: transparent; color: var(--weline-theme-text); cursor: pointer; }
    .w-icon-picker__option:hover, .w-icon-picker__option[aria-selected="true"] { border-color: var(--weline-theme-primary); background: var(--weline-theme-surface-hover); color: var(--weline-theme-primary); }
    .w-icon-picker__empty { margin: var(--weline-space-4) 0; color: var(--weline-theme-text-muted); text-align: center; }
    .w-icon-picker__custom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--weline-space-2); margin-block-start: var(--weline-space-2); padding-block-start: var(--weline-space-2); border-block-start: 1px solid var(--weline-theme-border); }
}

@layer utilities {
    .w-visually-hidden { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
    [data-w-scroll-locked="true"] { overflow: hidden; }
    /*
     * Attribute utilities are declared in @layer layout earlier in this file.
     * Components layer comes after layout, so a bare `.w-badge` / `.w-card`
     * background would win over `[data-w-background]`. Re-declare the
     * component-overriding subset here in @layer utilities (which is after
     * components) so semantic tone/background/avatar markers always win.
     */
    [data-w-background="primary"] { background: var(--weline-theme-primary); color: var(--weline-theme-on-primary); }
    [data-w-background="secondary"] { background: var(--weline-theme-secondary-surface); color: var(--weline-theme-secondary-emphasis, var(--weline-theme-secondary)); }
    [data-w-background="success"] { background: var(--weline-theme-success-surface); color: var(--weline-theme-success); }
    [data-w-background="warning"] { background: var(--weline-theme-warning-surface); color: var(--weline-theme-warning); }
    [data-w-background="danger"] { background: var(--weline-theme-danger-surface); color: var(--weline-theme-danger); }
    [data-w-background="info"] { background: var(--weline-theme-info-surface); color: var(--weline-theme-info); }
    [data-w-background="muted"] { background: var(--weline-theme-surface-muted); }
    [data-w-avatar="true"] { width: var(--w-avatar-size, 2.5rem); height: var(--w-avatar-size, 2.5rem); flex: 0 0 var(--w-avatar-size, 2.5rem); overflow: hidden; border-radius: var(--weline-radius-round); }
    [data-w-avatar-content="true"] { display: grid; width: 100%; height: 100%; place-items: center; background: var(--weline-theme-surface-muted); }
    [data-w-radius="md"] { border-radius: var(--weline-radius-md); }
    [data-w-radius="round"] { border-radius: var(--weline-radius-round); }
    [data-w-border="none"] { border: 0; }
    /*
     * Width utilities must live above @layer components so they beat
     * .w-input/.w-select/.w-textarea { inline-size: 100% } in filter toolbars
     * (w-cluster). Keep physical + logical aliases in sync.
     */
    [data-w-width="full"] { width: 100%; inline-size: 100%; }
    [data-w-width="25"] { width: 25%; inline-size: 25%; }
    [data-w-width="50"] { width: 50%; inline-size: 50%; }
    [data-w-width="75"] { width: 75%; inline-size: 75%; }
    [data-w-width="auto"] { width: auto; inline-size: auto; }
    /* Filter toolbars: keep selects content-sized inside flex clusters. */
    .w-cluster > :is(.w-select, .w-input)[data-w-width="auto"] {
        width: auto;
        inline-size: auto;
        flex: 0 1 auto;
    }
}

@media (max-width: 47.99rem), (pointer: coarse) {
    @layer components {
        .w-card__header, .w-card__body, .w-card__footer { padding: var(--weline-space-4); }
        .w-transfer { grid-template-columns: 1fr; }
        .w-icon-picker__custom { grid-template-columns: 1fr; }
        .w-icon-picker__custom > .w-button { inline-size: 100%; }
        .w-toast-region { inset-inline: var(--weline-space-3); width: auto; }
        .w-button[data-size="sm"], .w-menu__item, .w-combobox__option { min-block-size: 2.75rem; }
        .w-button[data-icon-only="true"][data-size="sm"] { min-inline-size: 2.75rem; inline-size: 2.75rem; }
        /* Keep pager jump CTA aligned with sm pagination links (do not inherit touch 2.75rem). */
        .w-pagination__jump > .w-button,
        .w-pagination__item > .w-cluster > .w-button {
            min-block-size: var(--weline-control-height-sm);
            min-height: var(--weline-control-height-sm);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto; animation-duration: 1ms; animation-iteration-count: 1; transition-duration: 1ms; }
}

/* Weline UI source: css/tokens/apple.css */
/* Weline UI · Apple-style semantic token layer
 * ------------------------------------------------------------------
 * 唯一来源：本文件只定义「语义 Token」和「组件尺度」，不写具体组件规则。
 * 调色板（色盘）通过 --color-*（前台）/ --backend-color-*（后台）覆盖本层，
 * 组件层只消费 --weline-theme-* / --weline-control-* / --weline-radius-*。
 */
@layer tokens {
    :root {
        /* ---- semantic palette (palette-driven, Apple neutrals as fallback) ---- */
        --weline-theme-canvas: var(--color-bg-canvas, #f5f5f7);
        --weline-theme-surface: var(--color-bg-primary, #ffffff);
        --weline-theme-surface-raised: var(--color-bg-raised, #ffffff);
        --weline-theme-surface-muted: var(--color-bg-subtle, #f5f5f7);
        --weline-theme-surface-hover: var(--color-surface-hover, #f0f0f2);
        --weline-theme-active-bg: color-mix(in srgb, var(--weline-theme-primary) 14%, var(--weline-theme-surface));
        --weline-theme-active-text: var(--color-primary-text-emphasis, var(--weline-theme-primary));
        --weline-theme-text: var(--color-text-primary, #1d1d1f);
        --weline-theme-text-muted: var(--color-text-secondary, #6e6e73);
        --weline-theme-text-subtle: var(--color-text-tertiary, #86868b);
        --weline-theme-border: var(--color-border-default, #d2d2d7);
        --weline-theme-border-strong: var(--color-border-strong, #b0b0b5);
        --weline-theme-primary: var(--color-primary, #0071e3);
        --weline-theme-primary-hover: var(--color-primary-hover, #0077ed);
        --weline-theme-on-primary: var(--color-on-primary, #ffffff);
        --weline-theme-focus: var(--color-primary, #0071e3);
        --weline-theme-focus-ring: 0 0 0 3px color-mix(in srgb, var(--weline-theme-focus) 32%, transparent);
        --weline-theme-success: var(--color-success, #248a3d);
        --weline-theme-warning: var(--color-warning, #b25000);
        --weline-theme-danger: var(--color-danger, var(--color-error, #d70015));
        --weline-theme-info: var(--color-info, #0071a4);
        --weline-theme-overlay: rgba(0, 0, 0, 0.42);

        /* ---- shape: Apple-style continuous corners ---- */
        --weline-radius-xs: 0.375rem;   /* 6px  – tags, tiny chips */
        --weline-radius-sm: 0.5rem;     /* 8px  – inline controls */
        --weline-radius-md: 0.75rem;    /* 12px – buttons, inputs, cards */
        --weline-radius-lg: 1.125rem;   /* 18px – panels, dialogs */
        --weline-radius-xl: 1.375rem;   /* 22px – hero surfaces */
        --weline-radius-round: 999px;

        /* ---- elevation: soft, layered, never harsh ---- */
        --weline-theme-shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.04);
        --weline-theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.03);
        --weline-theme-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
        --weline-theme-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.06);
        --weline-theme-shadow-dialog: 0 28px 80px rgba(0, 0, 0, 0.22);

        /* ---- type: Apple system stack for frontend, Noto Sans SC kept for backend ---- */
        --weline-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
            "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
        --weline-font-ui: var(--weline-font-sans);
        --weline-font-display: var(--weline-font-sans);
        --weline-font-size-xs: 0.75rem;
        --weline-font-size-sm: 0.875rem;
        --weline-font-size-md: 1rem;
        --weline-font-size-lg: 1.125rem;
        --weline-font-size-xl: 1.375rem;
        --weline-font-size-2xl: 1.625rem;
        --weline-line-height: 1.5;
        --weline-letter-tight: -0.011em;

        /* ---- controls: one height scale for buttons/inputs/selects/switches ---- */
        --weline-control-height-sm: 2rem;    /* 32px */
        --weline-control-height: 2.5rem;     /* 40px */
        --weline-control-height-lg: 3rem;    /* 48px */
        --weline-control-padding-inline: 0.875rem;
        --weline-control-gap: 0.5rem;

        /* ---- motion: short, eased, respects reduced-motion ---- */
        --weline-motion-fast: 140ms;
        --weline-motion-normal: 220ms;
        --weline-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
        --weline-motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* 暗色：hover/active 用暗色语义，禁止回落到前台浅色 palette；active 文本不用纯白。 */
    [data-theme="dark"],
    [data-theme-mode="dark"],
    [data-layout-mode="dark"] {
        --weline-theme-surface-hover: var(--backend-color-surface-hover, color-mix(in srgb, #ffffff 8%, var(--weline-theme-surface)));
        --weline-theme-active-bg: var(--backend-color-sidebar-active, color-mix(in srgb, var(--weline-theme-primary) 24%, var(--weline-theme-surface)));
        --weline-theme-active-text: var(--backend-color-primary-text-emphasis, #dbe4ff);
    }

    /* 后台：保留工作界面的无衬线字体栈与更紧凑的信息密度；
     * 颜色仍走同一语义层（后台色盘 --backend-color-* 优先）。 */
    [data-w-area="backend"] {
        --weline-font-sans: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC",
            "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
        --weline-font-ui: var(--weline-font-sans);
        --weline-font-display: var(--weline-font-sans);
        --weline-font-serif: var(--weline-font-sans);
        --weline-theme-primary: var(--backend-color-primary, var(--color-primary, #0071e3));
        --weline-theme-primary-hover: var(--backend-color-primary-hover, var(--color-primary-hover, #0077ed));
        --weline-theme-on-primary: var(--backend-color-on-primary, var(--color-on-primary, #ffffff));
        --weline-theme-surface: var(--backend-color-card-bg, var(--color-bg-primary, #ffffff));
        --weline-theme-surface-muted: var(--backend-color-bg-secondary, var(--color-bg-subtle, #f5f5f7));
        --weline-theme-surface-hover: var(--backend-color-surface-hover, var(--color-surface-hover, #f0f0f2));
        --weline-theme-active-bg: var(--backend-color-sidebar-active, var(--backend-color-primary-bg-subtle, color-mix(in srgb, var(--weline-theme-primary) 14%, var(--weline-theme-surface))));
        --weline-theme-active-text: var(--backend-color-primary-text-emphasis, var(--weline-theme-primary));
        --weline-theme-text: var(--backend-color-text-primary, var(--color-text-primary, #1d1d1f));
        --weline-theme-text-muted: var(--backend-color-text-secondary, var(--color-text-secondary, #6e6e73));
        --weline-theme-border: var(--backend-color-border-default, var(--color-border-default, #d2d2d7));
        --weline-theme-border-strong: var(--backend-color-border-strong, var(--color-border-strong, #b0b0b5));
        --weline-theme-focus: var(--backend-color-primary, var(--color-primary, #0071e3));
        --weline-theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
        --weline-theme-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.08);
        --weline-theme-shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --weline-motion-fast: 0ms;
        --weline-motion-normal: 0ms;
    }
}

/* Weline UI source: css/components/button.css */
/* Weline UI · Button（Apple 风格）
 * 规则：只用语义 Token；高度/圆角/间距走统一尺度；主按钮每屏 ≤1（见设计品味）。
 */
@layer components {
    .w-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        font-family: inherit;
        gap: var(--weline-control-gap);
        min-block-size: var(--weline-control-height);
        padding-inline: calc(var(--weline-control-padding-inline) + 0.125rem);
        border: 1px solid color-mix(in srgb, var(--weline-theme-primary) 88%, var(--weline-theme-border));
        border-radius: var(--weline-radius-md);
        background: var(--weline-theme-primary);
        color: var(--weline-theme-on-primary, var(--color-on-primary));
        font-size: var(--weline-font-size-sm);
        font-weight: 590;
        letter-spacing: var(--weline-letter-tight);
        line-height: 1.1;
        box-shadow: var(--weline-theme-shadow-xs);
        transition:
            background-color var(--weline-motion-fast) var(--weline-motion-ease),
            border-color var(--weline-motion-fast) var(--weline-motion-ease),
            color var(--weline-motion-fast) var(--weline-motion-ease),
            box-shadow var(--weline-motion-normal) var(--weline-motion-ease),
            transform var(--weline-motion-fast) var(--weline-motion-ease);
    }
    .w-button:hover {
        background: var(--weline-theme-primary-hover);
        border-color: var(--weline-theme-primary-hover);
        box-shadow: var(--weline-theme-shadow-sm);
    }
    .w-button:active { transform: translateY(0.5px); box-shadow: none; }
    .w-button:focus-visible { outline: 0; box-shadow: var(--weline-theme-focus-ring); }
    .w-button[data-tone="neutral"],
    .w-button[data-variant="outline"],
    .w-button[data-variant="soft"] { box-shadow: none; }
    .w-button[data-tone="neutral"] {
        background: var(--weline-theme-surface);
        border-color: var(--weline-theme-border);
        color: var(--weline-theme-text);
    }
    .w-button[data-tone="neutral"]:hover {
        background: var(--weline-theme-surface-hover);
        border-color: var(--weline-theme-border-strong);
    }
    .w-button[data-variant="soft"] {
        background: var(--weline-theme-surface-muted);
        border-color: transparent;
        color: var(--weline-theme-text);
    }
    .w-button[data-variant="soft"]:hover { background: var(--weline-theme-surface-hover); }
    .w-button[data-variant="soft"][data-tone="primary"] {
        background: color-mix(in srgb, var(--weline-theme-primary) 12%, var(--weline-theme-surface));
        color: var(--weline-theme-primary);
    }
    .w-button[data-size="sm"] {
        min-block-size: var(--weline-control-height-sm);
        padding-inline: var(--weline-control-padding-inline);
        border-radius: var(--weline-radius-sm);
        font-size: var(--weline-font-size-xs);
    }
    .w-button[data-size="lg"] {
        min-block-size: var(--weline-control-height-lg);
        padding-inline: calc(var(--weline-control-padding-inline) + 0.375rem);
        font-size: var(--weline-font-size-md);
        border-radius: var(--weline-radius-lg);
    }
    .w-button[data-icon-only="true"] { border-radius: var(--weline-radius-round); }
    .w-button[data-icon-only="true"]:hover { box-shadow: var(--weline-theme-shadow-sm); }
    .w-button:disabled,
    .w-button[aria-disabled="true"] {
        opacity: 0.55;
        cursor: not-allowed;
        pointer-events: none;
        box-shadow: none;
        transform: none;
    }
    .w-button .w-icon,
    .w-button > w-icon,
    .w-button > svg { flex: 0 0 auto; }
    .w-button-group[data-density="icon"] { border-radius: var(--weline-radius-md); box-shadow: var(--weline-theme-shadow-xs); }
    .w-button-group > .w-button:first-child { border-start-start-radius: var(--weline-radius-md); border-end-start-radius: var(--weline-radius-md); }
    .w-button-group > .w-button:last-child { border-start-end-radius: var(--weline-radius-md); border-end-end-radius: var(--weline-radius-md); }
    /* 显式 .w-spinner 已存在时，不再用 ::after 生成第二个 spinner（登录按钮双 loading 修复）。 */
    .w-button[aria-busy="true"]:has(.w-spinner)::after { content: none; }
}

/* Weline UI source: css/components/field.css */
/* Weline UI · Field / Input / Select / Textarea（Apple 风格） */
@layer components {
    /* migrated from foundation.css (layout-first split) */
    .w-field { display: grid; min-width: 0; min-inline-size: 0; max-width: 100%; max-inline-size: 100%; gap: var(--weline-space-2); }
    .w-field__label { color: var(--weline-theme-text); font-size: var(--weline-font-size-sm); font-weight: 650; }
    /* w-field--outlined-notch + floating label:
           default (empty input/textarea): label rests as in-field placeholder;
           :focus-within / :not(:placeholder-shown) / select: float to top-border notch.
           Opt out: data-floating-label="0" (always notch). */
        .w-field:has(> .w-field__label):has(:is(.w-input, .w-select, .w-textarea, .w-field__control, .w-language-select)):not(
            :has(> .w-check),
            :has(> .w-switch),
            .w-theme-disk-field--inline,
            [data-label-layout="stacked"],
            [data-label-layout="inline"],
            .w-search-inline,
            .w-search-bar
        ) {
            position: relative;
        }
    .w-field:has(> .w-field__label):has(:is(.w-input, .w-select, .w-textarea, .w-field__control, .w-language-select)):not(
            :has(> .w-check),
            :has(> .w-switch),
            .w-theme-disk-field--inline,
            [data-label-layout="stacked"],
            [data-label-layout="inline"],
            .w-search-inline,
            .w-search-bar
        ) > .w-field__label {
            position: absolute;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            inset-block-start: 0;
            inset-inline-start: var(--weline-space-3);
            translate: 0 -50%;
            max-inline-size: calc(100% - (var(--weline-space-3) * 2));
            margin: 0;
            padding-inline: var(--weline-space-1);
            overflow: hidden;
            color: var(--weline-theme-text-muted);
            background: var(--weline-theme-field-label-bg, var(--weline-theme-surface));
            font-size: var(--weline-font-size-xs);
            font-weight: 650;
            line-height: 1.2;
            white-space: nowrap;
            text-overflow: ellipsis;
            pointer-events: none;
            transition:
                color var(--weline-motion-fast),
                font-size var(--weline-motion-fast),
                font-weight var(--weline-motion-fast),
                inset-block-start var(--weline-motion-fast),
                translate var(--weline-motion-fast),
                background-color var(--weline-motion-fast),
                padding-inline var(--weline-motion-fast);
        }
    .w-field:has(> .w-field__label):has(:is(.w-input, .w-select, .w-textarea, .w-field__control, .w-language-select)):not(
            :has(> .w-check),
            :has(> .w-switch),
            .w-theme-disk-field--inline,
            [data-label-layout="stacked"],
            [data-label-layout="inline"],
            .w-search-inline,
            .w-search-bar
        ) > .w-field__label .w-icon {
            width: 1em;
            height: 1em;
            min-width: 1em;
            min-height: 1em;
            flex: 0 0 1em;
        }
    /* Resting: empty text controls act as in-field placeholder (select stays notched).
           language-select 弹层内空 search 不算字段值；有胶囊时靠 .has-value / [data-has-value=true] 上浮. */
        .w-field:has(> .w-field__label):has(:is(.w-input, .w-textarea)):not(
            :has(> .w-check),
            :has(> .w-switch),
            .w-theme-disk-field--inline,
            [data-label-layout="stacked"],
            [data-label-layout="inline"],
            [data-floating-label="0"],
            .w-search-inline,
            .w-search-bar,
            :has(.w-language-select)
        ):has(:is(.w-input, .w-textarea):placeholder-shown):not(:focus-within) > .w-field__label {
            /* Relative to control height — not 50% of .w-field (hint/error would sink the label). */
            inset-block-start: calc(var(--weline-control-height) / 2);
            translate: 0 -50%;
            padding-inline: 0;
            color: var(--weline-theme-text-subtle);
            background: transparent;
            font-size: var(--weline-font-size-sm);
            font-weight: 500;
        }
    .w-field:has(> .w-field__label):has(.w-language-select):not(
            :has(> .w-check),
            :has(> .w-switch),
            .w-theme-disk-field--inline,
            [data-label-layout="stacked"],
            [data-label-layout="inline"],
            [data-floating-label="0"],
            .w-search-inline,
            .w-search-bar
        ):has(.w-language-select:not([data-has-value="true"])):not(:focus-within) > .w-field__label {
            inset-block-start: calc(var(--weline-control-height) / 2);
            translate: 0 -50%;
            padding-inline: 0;
            color: var(--weline-theme-text-subtle);
            background: transparent;
            font-size: var(--weline-font-size-sm);
            font-weight: 500;
        }
    .w-field:has(> .w-field__label):has(.w-language-select):not(
            :has(> .w-check),
            :has(> .w-switch),
            .w-theme-disk-field--inline,
            [data-label-layout="stacked"],
            [data-label-layout="inline"],
            [data-floating-label="0"],
            .w-search-inline,
            .w-search-bar
        ):has(.w-language-select:not([data-has-value="true"])):not(:focus-within) .w-language-select__placeholder {
            color: transparent;
            -webkit-text-fill-color: transparent;
            opacity: 0;
        }
    .w-field:has(> .w-field__label):has(:is(.w-input, .w-select, .w-textarea, .w-field__control, .w-language-select)):not(
            :has(> .w-check),
            :has(> .w-switch),
            .w-theme-disk-field--inline,
            [data-label-layout="stacked"],
            [data-label-layout="inline"],
            .w-search-inline,
            .w-search-bar
        ):focus-within > .w-field__label {
            color: var(--weline-theme-primary);
        }
    .w-field:has(> .w-field__label):has(:is(.w-input, .w-select, .w-textarea, .w-field__control)[aria-invalid="true"]):not(
            :has(> .w-check),
            :has(> .w-switch),
            .w-theme-disk-field--inline,
            [data-label-layout="stacked"],
            [data-label-layout="inline"],
            .w-search-inline,
            .w-search-bar
        ) > .w-field__label {
            color: var(--weline-theme-danger);
        }
    .w-field__hint { color: var(--weline-theme-text-muted); font-size: var(--weline-font-size-sm); }
    .w-field__error { color: var(--weline-theme-danger); font-size: var(--weline-font-size-sm); }
    /* Floating label: rest = label is the cue (hide native placeholder); float/focus = show placeholder hint. */
        .w-field:has(> .w-field__label):has(:is(.w-input, .w-textarea)):not(
            :has(> .w-check),
            :has(> .w-switch),
            .w-theme-disk-field--inline,
            [data-label-layout="stacked"],
            [data-label-layout="inline"],
            [data-floating-label="0"],
            .w-search-inline,
            .w-search-bar,
            :has(.w-language-select)
        ):has(:is(.w-input, .w-textarea):placeholder-shown):not(:focus-within) :is(.w-input, .w-textarea)::placeholder {
            color: transparent;
            -webkit-text-fill-color: transparent;
            opacity: 0;
        }
    .w-field:has(> .w-field__label):has(:is(.w-input, .w-textarea)):not(
            :has(> .w-check),
            :has(> .w-switch),
            .w-theme-disk-field--inline,
            [data-label-layout="stacked"],
            [data-label-layout="inline"],
            [data-floating-label="0"],
            .w-search-inline,
            .w-search-bar
        ):focus-within :is(.w-input, .w-textarea)::placeholder {
            color: var(--weline-theme-text-subtle);
            -webkit-text-fill-color: var(--weline-theme-text-subtle);
            opacity: 1;
        }
    .w-field__control { display: flex; min-width: 0; min-inline-size: 0; max-width: 100%; max-inline-size: 100%; align-items: stretch; flex-wrap: wrap; }
    .w-field__control > :where(.w-input, .w-select, .w-textarea) { min-width: 0; min-inline-size: 0; flex: 1 1 min(100%, 12rem); }
    .w-field__addon { display: inline-flex; align-items: center; padding-inline: var(--weline-space-3); border: 1px solid var(--weline-theme-border-strong); background: var(--weline-theme-surface-muted); color: var(--weline-theme-text-muted); }
    .w-field__control > .w-field__addon { align-self: stretch; display: flex; align-items: center; justify-content: center; min-block-size: var(--weline-control-height); }

    .w-field { gap: var(--weline-space-2); }
    .w-field__label { font-size: var(--weline-font-size-sm); font-weight: 590; letter-spacing: var(--weline-letter-tight); }
    .w-field__hint { color: var(--weline-theme-text-muted); font-size: var(--weline-font-size-xs); line-height: 1.45; }
    .w-field__error { color: var(--weline-theme-danger); font-size: var(--weline-font-size-xs); }

    .w-input,
    .w-select,
    .w-textarea {
        display: block;
        box-sizing: border-box;
        inline-size: 100%;
        font-family: inherit;
        min-block-size: var(--weline-control-height);
        padding-inline: var(--weline-control-padding-inline);
        border: 1px solid var(--weline-theme-border);
        border-radius: var(--weline-radius-md);
        background: var(--weline-theme-surface);
        color: var(--weline-theme-text);
        font: inherit;
        font-size: var(--weline-font-size-sm);
        line-height: 1.35;
        box-shadow: inset 0 1px 1px color-mix(in srgb, var(--weline-theme-text) 4%, transparent);
        transition:
            border-color var(--weline-motion-fast) var(--weline-motion-ease),
            box-shadow var(--weline-motion-fast) var(--weline-motion-ease),
            background-color var(--weline-motion-fast) var(--weline-motion-ease);
    }
    .w-textarea { min-block-size: calc(var(--weline-control-height) * 2.5); padding-block: var(--weline-space-2); resize: vertical; }
    .w-input:hover,
    .w-select:hover,
    .w-textarea:hover { border-color: var(--weline-theme-border-strong); }
    .w-input:focus,
    .w-select:focus,
    .w-textarea:focus {
        outline: 0;
        border-color: var(--weline-theme-focus);
        box-shadow: var(--weline-theme-focus-ring);
        background: var(--weline-theme-surface-raised);
    }
    .w-input::placeholder,
    .w-textarea::placeholder { color: var(--weline-theme-text-subtle); }
    .w-input:disabled,
    .w-select:disabled,
    .w-textarea:disabled {
        background: var(--weline-theme-surface-muted);
        color: var(--weline-theme-text-muted);
        cursor: not-allowed;
        box-shadow: none;
    }
    .w-input[data-size="sm"],
    .w-select[data-size="sm"] {
        min-block-size: var(--weline-control-height-sm);
        padding-inline: var(--weline-space-3);
        border-radius: var(--weline-radius-sm);
        font-size: var(--weline-font-size-xs);
    }
    .w-input[data-size="lg"],
    .w-select[data-size="lg"] {
        min-block-size: var(--weline-control-height-lg);
        border-radius: var(--weline-radius-lg);
        font-size: var(--weline-font-size-md);
    }
    .w-input[type="color"] {
        inline-size: auto;
        inline-size: calc(var(--weline-control-height) + var(--weline-space-1));
        padding: var(--weline-space-1);
        cursor: pointer;
    }
    .w-input[type="file"] { padding-block: var(--weline-space-1); }
    .w-select {
        appearance: none;
        padding-inline-end: calc(var(--weline-control-padding-inline) + 1.25rem);
        background-image: linear-gradient(45deg, transparent 50%, var(--weline-theme-text-muted) 50%),
            linear-gradient(135deg, var(--weline-theme-text-muted) 50%, transparent 50%);
        background-position:
            calc(100% - 1.05rem) 50%,
            calc(100% - 0.7rem) 50%;
        background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
        background-repeat: no-repeat;
    }
    .w-field[data-state="error"] .w-input,
    .w-field[data-state="error"] .w-select,
    .w-field[data-state="error"] .w-textarea {
        border-color: var(--weline-theme-danger);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--weline-theme-danger) 24%, transparent);
    }
    .w-field__control { min-width: 0; }
}

/* Weline UI source: css/components/selection.css */
/* Weline UI · Selection controls（Switch / Checkbox / Radio，Apple 风格） */
@layer components {
    .w-switch {
        display: inline-flex;
        align-items: center;
        gap: var(--weline-space-2);
        cursor: pointer;
        min-block-size: var(--weline-control-height-sm);
        font-size: var(--weline-font-size-sm);
        user-select: none;
    }
    .w-switch > input {
        --w-switch-width: 3.1875rem;   /* 51px */
        --w-switch-height: 1.9375rem;  /* 31px */
        --w-switch-knob: calc(var(--w-switch-height) - 0.25rem);
        position: relative;
        appearance: none;
        margin: 0;
        cursor: inherit;
        flex: 0 0 var(--w-switch-width);
        inline-size: var(--w-switch-width);
        block-size: var(--w-switch-height);
        border: 0;
        border-radius: var(--weline-radius-round);
        background: var(--weline-theme-surface-muted);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--weline-theme-text) 8%, transparent);
        transition: background-color var(--weline-motion-normal) var(--weline-motion-ease);
    }
    .w-switch > input::before {
        content: "";
        position: absolute;
        inset-block-start: 0.125rem;
        inset-inline-start: 0.125rem;
        inline-size: var(--w-switch-knob);
        block-size: var(--w-switch-knob);
        margin: 0;
        border-radius: 50%;
        background: var(--weline-theme-surface-raised);
        box-shadow: 0 3px 8px color-mix(in srgb, var(--weline-theme-text) 18%, transparent), 0 1px 1px color-mix(in srgb, var(--weline-theme-text) 8%, transparent);
        transition: translate var(--weline-motion-normal) var(--weline-motion-ease);
    }
    .w-switch > input:checked {
        background: var(--weline-theme-primary);
        box-shadow: none;
    }
    .w-switch > input:checked::before {
        translate: calc(var(--w-switch-width) - var(--w-switch-knob) - 0.25rem) 0;
    }
    .w-switch > input:focus-visible { outline: 0; box-shadow: var(--weline-theme-focus-ring); }
    .w-switch > input:disabled { opacity: 0.5; cursor: not-allowed; }
    .w-switch:has(> input:disabled) { color: var(--weline-theme-text-muted); cursor: not-allowed; }

    .w-check {
        display: inline-flex;
        align-items: center;
        gap: var(--weline-space-2);
        cursor: pointer;
        min-block-size: var(--weline-control-height-sm);
        font-size: var(--weline-font-size-sm);
    }
    .w-check > input[type="checkbox"],
    .w-check > input[type="radio"] {
        appearance: none;
        position: relative;
        flex: 0 0 auto;
        inline-size: 1.125rem;
        block-size: 1.125rem;
        margin: 0;
        border: 1px solid var(--weline-theme-border-strong);
        border-radius: var(--weline-radius-xs);
        background: var(--weline-theme-surface);
        box-shadow: inset 0 1px 1px color-mix(in srgb, var(--weline-theme-text) 5%, transparent);
        transition:
            background-color var(--weline-motion-fast) var(--weline-motion-ease),
            border-color var(--weline-motion-fast) var(--weline-motion-ease),
            box-shadow var(--weline-motion-fast) var(--weline-motion-ease);
        cursor: inherit;
    }
    .w-check > input[type="radio"] { border-radius: 50%; }
    .w-check > input[type="checkbox"]:checked,
    .w-check > input[type="radio"]:checked {
        border-color: var(--weline-theme-primary);
        background: var(--weline-theme-primary);
        box-shadow: none;
    }
    .w-check > input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        box-sizing: border-box;
        inline-size: 0.28rem;
        block-size: 0.5rem;
        inset-inline-start: 50%;
        inset-block-start: 46%;
        border-right: 0.125rem solid var(--weline-theme-on-primary);
        border-bottom: 0.125rem solid var(--weline-theme-on-primary);
        transform: translate(-50%, -62%) rotate(45deg);
    }
    .w-check > input[type="radio"]:checked { box-shadow: inset 0 0 0 3px var(--weline-theme-surface); }
    .w-check > input:focus-visible { outline: 0; box-shadow: var(--weline-theme-focus-ring); }
    .w-check > input:disabled { opacity: 0.5; cursor: not-allowed; }
}

/* Weline UI source: css/components/navigation.css */
/* Weline UI · Navigation（Tabs / Pagination / Breadcrumb / Menu，Apple 风格） */
@layer components {
    .w-tabs__list {
        display: inline-flex;
        box-sizing: border-box;
        flex-wrap: nowrap;
        gap: var(--weline-space-1);
        max-width: 100%;
        padding: var(--weline-space-1);
        border: 1px solid color-mix(in srgb, var(--weline-theme-border) 72%, transparent);
        border-radius: var(--weline-radius-md);
        background: var(--weline-theme-surface-muted);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .w-tabs__list::-webkit-scrollbar { display: none; }
    .w-tabs__list > li { display: contents; }
    .w-tabs__tab {
        min-height: var(--weline-control-height-sm);
        padding-inline: var(--weline-space-4);
        border: 0;
        border-radius: var(--weline-radius-sm);
        background: transparent;
        color: var(--weline-theme-text-muted);
        font-size: var(--weline-font-size-sm);
        font-weight: 590;
        letter-spacing: var(--weline-letter-tight);
        transition:
            background-color var(--weline-motion-fast) var(--weline-motion-ease),
            color var(--weline-motion-fast) var(--weline-motion-ease),
            box-shadow var(--weline-motion-fast) var(--weline-motion-ease);
    }
    .w-tabs__tab:hover { color: var(--weline-theme-text); background: color-mix(in srgb, var(--weline-theme-surface) 55%, transparent); }
    .w-tabs__tab[aria-selected="true"],
    .w-tabs__tab.is-active {
        background: var(--weline-theme-surface);
        color: var(--weline-theme-text);
        box-shadow: var(--weline-theme-shadow-xs);
    }
    .w-tabs__tab:focus-visible { outline: 0; box-shadow: var(--weline-theme-focus-ring); }

    .w-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--weline-space-1); margin: 0; padding: 0; list-style: none; }
    .w-pagination__link {
        border: 1px solid transparent;
        border-radius: var(--weline-radius-sm);
        background: transparent;
        color: var(--weline-theme-text-muted);
        font-size: var(--weline-font-size-sm);
        transition: background-color var(--weline-motion-fast) var(--weline-motion-ease), color var(--weline-motion-fast) var(--weline-motion-ease);
    }
    .w-pagination__link:hover { background: var(--weline-theme-surface-muted); color: var(--weline-theme-text); }
    .w-pagination__link[aria-current="page"],
    .w-pagination__item[data-state="active"] > .w-pagination__link {
        background: var(--weline-theme-primary);
        border-color: var(--weline-theme-primary);
        color: var(--weline-theme-on-primary);
    }

    .w-breadcrumb { gap: var(--weline-space-2); color: var(--weline-theme-text-muted); font-size: var(--weline-font-size-xs); }
    .w-breadcrumb a { color: var(--weline-theme-text-muted); text-decoration: none; }
    .w-breadcrumb a:hover { color: var(--weline-theme-text); }

    .w-menu__item[data-state="active"],
    .w-menu__item[aria-selected="true"] {
        background: var(--weline-theme-active-bg);
        color: var(--weline-theme-active-text);
    }
    .w-menu {
        display: block;
        box-sizing: border-box;
        padding: var(--weline-space-1);
        border: 1px solid color-mix(in srgb, var(--weline-theme-border) 72%, transparent);
        border-radius: var(--weline-radius-md);
        background: var(--weline-theme-surface-raised);
        box-shadow: var(--weline-theme-shadow-md);
    }
    .w-menu__item { border-radius: var(--weline-radius-sm); font-size: var(--weline-font-size-sm); }
    .w-menu__item:hover { background: var(--weline-theme-surface-hover); }
    .w-menu__divider { background: var(--weline-theme-border); }
}

/* Weline UI source: css/components/surface.css */
/* Weline UI · Surface（Card / Table / Dialog / Empty，Apple 风格） */
@layer components {
    .w-card {
        display: block;
        box-sizing: border-box;
        border: 1px solid color-mix(in srgb, var(--weline-theme-border) 72%, transparent);
        border-radius: var(--weline-radius-lg);
        background: var(--weline-theme-surface);
        box-shadow: var(--weline-theme-shadow-sm);
        overflow: clip;
    }
    .w-card__header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--weline-space-3);
        padding: var(--weline-space-4) var(--weline-space-5);
        border-block-end: 1px solid color-mix(in srgb, var(--weline-theme-border) 64%, transparent);
        background: var(--weline-theme-surface);
    }
    .w-card__body { padding: var(--weline-space-5); }
    .w-card__footer {
        padding: var(--weline-space-3) var(--weline-space-5);
        border-block-start: 1px solid color-mix(in srgb, var(--weline-theme-border) 64%, transparent);
        background: var(--weline-theme-surface-muted);
    }
    .w-card__title { margin: 0; color: var(--weline-theme-text); font-size: var(--weline-font-size-md); font-weight: 650; letter-spacing: var(--weline-letter-tight); }

    .w-table-wrap {
        display: block;
        box-sizing: border-box;
        max-inline-size: 100%;
        overflow: auto;
        border: 1px solid color-mix(in srgb, var(--weline-theme-border) 72%, transparent);
        border-radius: var(--weline-radius-lg);
        background: var(--weline-theme-surface);
        box-shadow: var(--weline-theme-shadow-xs);
    }
    .w-table {
        display: table;
        inline-size: 100%;
        border-collapse: collapse;
        border-spacing: 0;
    }
    .w-table th,
    .w-table td { padding: var(--weline-space-3) var(--weline-space-4); border-block-end: 1px solid color-mix(in srgb, var(--weline-theme-border) 64%, transparent); }
    .w-table thead th {
        background: var(--weline-theme-surface-muted);
        color: var(--weline-theme-text-muted);
        font-size: var(--weline-font-size-xs);
        font-weight: 650;
        letter-spacing: 0.01em;
    }
    .w-table tbody tr { transition: background-color var(--weline-motion-fast) var(--weline-motion-ease); }
    .w-table tbody tr:hover { background: var(--weline-theme-surface-hover); }
    .w-table tbody tr:last-child td { border-block-end: 0; }
    .w-table td { font-size: var(--weline-font-size-sm); }

    .w-dialog {
        border: 1px solid color-mix(in srgb, var(--weline-theme-border) 56%, transparent);
        border-radius: var(--weline-radius-xl);
        background: var(--weline-theme-surface-raised);
        box-shadow: var(--weline-theme-shadow-dialog, var(--weline-theme-shadow-lg));
    }
    .w-dialog__header { padding: var(--weline-space-5) var(--weline-space-6); }
    .w-dialog__body { padding: 0 var(--weline-space-6) var(--weline-space-5); }
    .w-dialog__footer { padding: var(--weline-space-4) var(--weline-space-6); border-block-start: 1px solid var(--weline-theme-border); }
    .w-dialog__surface { border-radius: inherit; }

    .w-drawer {
        border-radius: var(--weline-radius-xl) 0 0 var(--weline-radius-xl);
        background: var(--weline-theme-surface-raised);
        box-shadow: var(--weline-theme-shadow-dialog, var(--weline-theme-shadow-lg));
    }
    .w-drawer__header { padding: var(--weline-space-5) var(--weline-space-5) var(--weline-space-3); }
    .w-drawer__body { padding: var(--weline-space-3) var(--weline-space-5) var(--weline-space-5); }
    .w-drawer__footer { padding: var(--weline-space-4) var(--weline-space-5); border-block-start: 1px solid var(--weline-theme-border); }

    .w-empty {
        gap: var(--weline-space-3);
        min-block-size: 11rem;
        padding: var(--weline-space-8);
        border-radius: var(--weline-radius-lg);
        background: var(--weline-theme-surface-muted);
        color: var(--weline-theme-text-muted);
    }
    .w-empty__title { font-size: var(--weline-font-size-md); font-weight: 650; letter-spacing: var(--weline-letter-tight); }

    .w-alert {
        border: 1px solid color-mix(in srgb, var(--weline-theme-border) 72%, transparent);
        border-radius: var(--weline-radius-md);
        background: var(--weline-theme-surface-muted);
        box-shadow: none;
    }
}

/* Weline UI source: css/components/feedback.css */
/* Weline UI · Feedback（Badge / Alert / Loading / Skeleton，Apple 风格） */
@layer components {
    .w-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--weline-space-1);
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.2rem 0.55rem;
        border-radius: var(--weline-radius-round);
        font-size: var(--weline-font-size-xs);
        font-weight: 590;
        letter-spacing: 0.005em;
    }
    .w-badge[data-tone="primary"] { background: color-mix(in srgb, var(--weline-theme-primary) 12%, var(--weline-theme-surface)); color: var(--weline-theme-primary); }
    .w-badge[data-tone="muted"] { background: var(--weline-theme-surface-muted); color: var(--weline-theme-text-muted); }

    .w-alert { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: var(--weline-space-3); box-sizing: border-box; padding: var(--weline-space-4); border-radius: var(--weline-radius-md); }
    .w-alert[data-tone="info"] { background: color-mix(in srgb, var(--weline-theme-info) 8%, var(--weline-theme-surface)); border-color: color-mix(in srgb, var(--weline-theme-info) 28%, transparent); color: var(--weline-theme-text); }
    .w-alert[data-tone="success"] { background: color-mix(in srgb, var(--weline-theme-success) 8%, var(--weline-theme-surface)); border-color: color-mix(in srgb, var(--weline-theme-success) 28%, transparent); color: var(--weline-theme-text); }
    .w-alert[data-tone="warning"] { background: color-mix(in srgb, var(--weline-theme-warning) 10%, var(--weline-theme-surface)); border-color: color-mix(in srgb, var(--weline-theme-warning) 32%, transparent); color: var(--weline-theme-text); }
    .w-alert[data-tone="danger"] { background: color-mix(in srgb, var(--weline-theme-danger) 8%, var(--weline-theme-surface)); border-color: color-mix(in srgb, var(--weline-theme-danger) 30%, transparent); color: var(--weline-theme-text); }

    .w-spinner {
        border-radius: var(--weline-radius-round);
        color: var(--weline-theme-primary);
    }
    .w-skeleton {
        border-radius: var(--weline-radius-md);
        background: linear-gradient(90deg, var(--weline-theme-surface-muted) 25%, var(--weline-theme-surface-hover) 37%, var(--weline-theme-surface-muted) 63%);
        background-size: 400% 100%;
    }
    .w-loading { color: var(--weline-theme-text-muted); font-size: var(--weline-font-size-sm); }
    .w-loading__backdrop { background: color-mix(in srgb, var(--weline-theme-canvas) 72%, transparent); backdrop-filter: blur(2px); }
}

/* ui/weline-frontend.css */
/* Weline UI source: css/frontend.css */
@layer reset, tokens, base, layout, components, utilities, page;

@layer base {
    /* Page canvas: prefer body-bg token; do not require data-w-area (some layouts omit it). */
    body {
        background: var(--weline-theme-body-bg, var(--weline-chrome-body-bg, var(--color-bg-canvas, var(--weline-theme-canvas, #ffffff))));
        color: var(--weline-theme-body-text, var(--color-text-primary));
    }

    [data-w-area="frontend"] body {
        background: var(--weline-theme-body-bg, var(--weline-chrome-body-bg, var(--color-bg-canvas, var(--weline-theme-canvas, #ffffff))));
        color: var(--weline-theme-body-text, var(--color-text-primary));
    }

    [data-surface="body"],
    .w-surface-body {
        --w-surface-fg: var(--weline-theme-body-text, var(--color-text-primary));
        --w-surface-fg-muted: var(--weline-theme-body-text-muted, #666666);
        --w-surface-fg-subtle: var(--weline-theme-body-text-secondary, #565959);
        /* Menus/panels stay on surface (primary), not page canvas */
        --w-surface-bg: var(--weline-theme-surface, var(--weline-chrome-bg-primary, #ffffff));
        color: var(--w-surface-fg);
        background-color: var(--w-surface-bg);
    }

    [data-surface="body"] h1,
    [data-surface="body"] h2,
    [data-surface="body"] h3,
    [data-surface="body"] h4,
    [data-surface="body"] h5,
    [data-surface="body"] h6,
    .w-surface-body h1,
    .w-surface-body h2,
    .w-surface-body h3,
    .w-surface-body h4,
    .w-surface-body h5,
    .w-surface-body h6 {
        color: var(--weline-theme-body-text-heading, var(--weline-theme-body-text, var(--color-text-primary)));
    }
}

@layer layout {
    /* Page shell: canvas from theme body-bg; layouts must not repaint body/main. */
    .weline-page-wrapper {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background: transparent;
    }
    .weline-main-content {
        flex: 1 0 auto;
        width: 100%;
        min-width: 0;
        min-height: 80vh;
        background-color: var(--weline-theme-body-bg, var(--weline-chrome-body-bg, var(--color-bg-canvas, var(--weline-theme-canvas, #ffffff))));
        color: var(--weline-theme-body-text, var(--color-text-primary));
    }
    .w-frontend-shell { display: flex; min-height: 100vh; flex-direction: column; }
    .w-frontend-main { flex: 1 0 auto; min-width: 0; }
    .w-frontend-page { display: grid; gap: var(--weline-space-6); padding-block: var(--weline-space-8); }
    .w-frontend-content-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--weline-space-6); align-items: start; }
    .w-frontend-content, .w-frontend-sidebar { min-width: 0; }
    /* Empty chrome slots must not occupy a grid row/column.
       Do NOT mix :blank into this list — unsupported :blank drops the whole rule in Chromium. */
    .w-frontend-sidebar:not(:has(*)),
    .w-frontend-content-before:not(:has(*)),
    .w-frontend-content-after:not(:has(*)) { display: none; }
    .w-frontend-header, .w-frontend-footer { background: var(--weline-theme-surface); color: var(--weline-theme-text); }
    .w-frontend-header { border-bottom: 1px solid var(--weline-theme-border); }
    .w-frontend-footer { border-top: 1px solid var(--weline-theme-border); }
    .w-maintenance-shell { display: grid; min-height: 100vh; place-items: center; padding: var(--weline-space-5); }
}

@media (min-width: 64rem) {
    @layer layout {
        .w-frontend-content-grid:has(> .w-frontend-sidebar:has(*):first-child) { grid-template-columns: minmax(13rem, 18rem) minmax(0, 1fr); }
        .w-frontend-content-grid:has(> .w-frontend-sidebar:has(*):last-child) { grid-template-columns: minmax(0, 1fr) minmax(13rem, 18rem); }
        .w-frontend-content-grid:has(> .w-frontend-sidebar:has(*):first-child):has(> .w-frontend-sidebar:has(*):last-child) { grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr) minmax(11rem, 15rem); }
    }
}

@layer components {
    .w-builder-section, .w-builder-card { position: relative; isolation: isolate; overflow: hidden; }
    .w-builder-section__background-media, .w-builder-card__background-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .w-builder-section__background-media > img, .w-builder-section__background-media > figure, .w-builder-section__background-media > figure > img,
    .w-builder-card__background-media > img, .w-builder-card__background-media > figure, .w-builder-card__background-media > figure > img { width: 100%; height: 100%; margin: 0; object-fit: cover; }
    .w-builder-section__background-media img { object-position: var(--w-builder-bg-position, center); }
    .w-builder-section__background-media figcaption, .w-builder-card__background-media figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; padding: var(--weline-space-2); background: rgb(0 0 0 / 55%); color: #fff; }
    .w-builder-section > :not(.w-builder-section__background-media), .w-builder-card > :not(.w-builder-card__background-media) { position: relative; z-index: 1; }
    .w-builder-image__asset img { display: block; width: 100%; height: auto; }
    .w-builder-image__asset figure { margin: 0; }
    .w-frontend-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--weline-space-4); min-height: 4rem; }
    .w-frontend-brand { display: inline-flex; max-width: 12rem; align-items: center; color: var(--weline-theme-text); font-size: var(--weline-font-size-lg); font-weight: 750; text-decoration: none; }
    .w-frontend-brand img { width: auto; max-height: 2.75rem; object-fit: contain; }
    .w-frontend-nav__desktop { min-width: 0; }
    .w-frontend-nav__links, .w-frontend-mobile-nav__links, .w-frontend-footer__list { display: flex; flex-wrap: wrap; gap: var(--weline-space-4); margin: 0; padding: 0; list-style: none; }
    .w-frontend-nav__link { color: var(--weline-theme-text); font-weight: 600; text-decoration: none; }
    .w-frontend-nav__link:hover, .w-frontend-nav__link[aria-current="page"] { color: var(--weline-theme-primary); }
    .w-frontend-search { display: flex; min-width: min(18rem, 100%); flex: 1 1 18rem; align-items: center; gap: var(--weline-space-2); }
    .w-frontend-nav__actions { display: flex; align-items: center; gap: var(--weline-space-2); margin-inline-start: auto; }
    .w-frontend-nav__actions-desktop { display: inline-flex; align-items: center; gap: var(--weline-space-2); }
    .w-frontend-mobile-nav { display: none; margin-inline-start: auto; }
    .w-frontend-mobile-nav__panel { display: grid; grid-template-rows: auto minmax(0, 1fr); inline-size: min(22rem, var(--w-floating-max-inline-size, calc(100dvw - 1.5rem))); gap: 0; padding: 0; overflow: hidden; }
    .w-frontend-mobile-nav__header { display: flex; align-items: center; justify-content: space-between; gap: var(--weline-space-3); padding: var(--weline-space-3); border-block-end: 1px solid var(--weline-theme-border); }
    .w-frontend-mobile-nav__title { margin: 0; font-size: var(--weline-font-size-md); font-weight: 700; }
    .w-frontend-mobile-nav__body { display: grid; min-block-size: 0; gap: var(--weline-space-3); padding: var(--weline-space-3); overflow: auto; overscroll-behavior: contain; }
    .w-frontend-mobile-nav__links { display: grid; }
    .w-frontend-mobile-nav__links a { display: flex; min-block-size: 2.75rem; align-items: center; }
    .w-frontend-mobile-nav__ops { display: grid; gap: var(--weline-space-2); padding-block-start: var(--weline-space-2); border-block-start: 1px solid var(--weline-theme-border); }
    .w-frontend-mobile-nav__ops .action-link { display: flex; min-block-size: 2.75rem; flex-direction: column; justify-content: center; gap: 0.15rem; padding: var(--weline-space-2); border-radius: var(--weline-radius-sm); color: var(--weline-theme-text); text-decoration: none; }
    .w-frontend-mobile-nav__ops .action-line-1 { font-size: var(--weline-font-size-xs); color: var(--weline-theme-text-muted); }
    .w-frontend-mobile-nav__ops .action-line-2 { font-weight: 650; }
    .w-frontend-mobile-nav__section-title { margin: 0; font-size: var(--weline-font-size-sm); font-weight: 700; color: var(--weline-theme-text-muted); }
    .w-frontend-mobile-nav__account-links { display: grid; gap: var(--weline-space-1); margin: 0; padding: 0; list-style: none; }
    .w-frontend-mobile-nav__account-links a { display: flex; min-block-size: 2.75rem; align-items: center; padding: var(--weline-space-2); border-radius: var(--weline-radius-sm); color: var(--weline-theme-text); text-decoration: none; font-weight: 600; }
    .w-frontend-mobile-nav__account-links a:hover { background: var(--weline-theme-surface); color: var(--weline-theme-primary); }
    .w-header-account { position: relative; }
    .w-header-account__trigger { display: inline-flex; align-items: center; gap: var(--weline-space-2); max-width: 12rem; }
    .w-header-account__copy { display: grid; text-align: start; line-height: 1.15; min-width: 0; }
    .w-header-account__line1 { font-size: var(--weline-font-size-xs); color: var(--weline-theme-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .w-header-account__line2 { font-size: var(--weline-font-size-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .w-header-account__menu { min-width: 12rem; }
    .w-header-account__home { color: inherit; font-weight: 700; text-decoration: none; }
    .w-header-account__links { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
    .w-header-account__links a { display: block; padding: var(--weline-space-2) var(--weline-space-3); color: var(--weline-theme-text); text-decoration: none; }
    .w-header-account__links a:hover { background: var(--weline-theme-surface); color: var(--weline-theme-primary); }
    .w-frontend-breadcrumb { padding-block: var(--weline-space-3); }
    .w-frontend-footer__content { display: grid; gap: var(--weline-space-6); padding-block: var(--weline-space-8); }
    .w-frontend-footer__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--weline-space-8); }
    .w-frontend-footer__links { display: grid; flex: 1 1 28rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--weline-space-6); }
    .w-frontend-footer__newsletter { flex: 0 1 20rem; min-width: min(100%, 18rem); }
    .w-frontend-footer__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--weline-space-5); padding-block: var(--weline-space-4); border-block: 1px solid var(--weline-theme-border); }
    .w-frontend-footer__social, .w-frontend-footer__payment { min-width: 0; }
    .w-frontend-footer__title { font-size: var(--weline-font-size-md); }
    .w-frontend-footer__list { display: grid; gap: var(--weline-space-2); }
    .w-frontend-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--weline-space-3); padding-block: var(--weline-space-5); color: var(--weline-theme-text-muted); }
    .w-skip-link:focus { position: fixed; inset-block-start: var(--weline-space-2); inset-inline-start: var(--weline-space-2); z-index: var(--weline-z-toast); width: auto; height: auto; padding: var(--weline-space-3); clip: auto; background: var(--weline-theme-surface-raised); }
    .w-maintenance-card { width: min(38rem, 100%); text-align: center; }
    .w-maintenance-logo { max-width: min(12rem, 65%); max-height: 6rem; margin-inline: auto; object-fit: contain; }
}

@media (max-width: 63.99rem) {
    @layer components {
        .w-frontend-nav__desktop { display: none; }
        .w-frontend-mobile-nav { display: block; }
        .w-frontend-search { order: 5; flex-basis: 100%; }
        .w-frontend-nav__actions { margin-inline-start: 0; }
        .w-frontend-nav__actions-desktop { display: none; }
    }
}

/* frontend/assets/css/theme.css */
/**
 * 主题通用样式（默认主题入口，与 theme.js 同级）
 *
 * 只包含通用的、基础的样式。
 * 布局特定样式：layouts/{layoutType}/{layoutOption}.css。
 * 认证页版面留白与 .auth-form Flash：assets/css/auth-form-wflash.css（account_auth 按需加载）。
 */

/* ========== 基础页面结构 ========== */
/* Off-canvas chrome (mini-cart etc.) must never create a horizontal page gutter. */
html,
body {
    overflow-x: clip;
    max-width: 100%;
}

/* 页面画布：只由 token 决定，主题不得再用 !important 覆盖 body 背景。 */
body {
    background-color: var(--weline-page-canvas-color);
    background-image: var(--weline-page-canvas-image);
    background-size: var(--weline-page-canvas-size);
    background-repeat: var(--weline-page-canvas-repeat);
    background-position: var(--weline-page-canvas-position);
}

.weline-page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: transparent;
    overflow-x: clip;
    max-width: 100%;
}

.weline-main-content {
    /* Keep the page shell's main area at its intrinsic content height. */
    flex: 1 0 auto;
    width: 100%;
    min-height: 80vh;
    background-color: var(--weline-theme-body-bg, var(--weline-chrome-body-bg, var(--color-bg-canvas, var(--weline-theme-canvas, #ffffff))));
    color: var(--weline-theme-body-text, var(--color-text-primary));
}

/* Hook source wrapper: transparent to grid/flex direct-child layouts */
.weline-hook-source {
    display: contents;
}

html[dir="rtl"],
html[data-dir="rtl"] {
    direction: rtl;
}

html[dir="ltr"],
html[data-dir="ltr"] {
    direction: ltr;
}

/* ========== 布局主体主题变量桥接 ========== */
:root {
    --weline-theme-primary: var(--color-primary, var(--weshop-primary, #0f766e));
    --weline-theme-primary-hover: var(--color-primary-hover, var(--weshop-primary-hover, #115e59));
    --weline-theme-primary-active: var(--color-primary-active, var(--weshop-primary-active, #134e4a));
    --weline-theme-primary-rgb: var(--color-primary-rgb, var(--weshop-primary-rgb, 15, 118, 110));
    --weline-theme-on-primary: var(--color-on-primary, var(--weshop-primary-contrast, #ffffff));
    --weline-theme-primary-subtle: var(--color-primary-bg-subtle, var(--weshop-primary-bg-soft, #ecfdf5));
    --weline-theme-primary-border-subtle: var(--color-primary-border-subtle, var(--weshop-primary-border-soft, #99f6e4));
    --weline-theme-primary-text-emphasis: var(--color-primary-text-emphasis, var(--weshop-primary-text-emphasis, #115e59));
    --weline-theme-secondary: var(--color-secondary, var(--weshop-secondary, #475569));
    --weline-theme-secondary-rgb: var(--color-secondary-rgb, 71, 85, 105);
    --weline-theme-secondary-hover: var(--color-secondary-hover, var(--weline-theme-secondary));
    --weline-theme-secondary-active: var(--color-secondary-active, var(--weline-theme-secondary-hover));
    --weline-theme-on-secondary: var(--color-on-secondary, #ffffff);
    --weline-theme-secondary-subtle: var(--color-secondary-bg-subtle, var(--weline-theme-surface-subtle));
    --weline-theme-secondary-border-subtle: var(--color-secondary-border-subtle, var(--weline-theme-border-color-subtle));
    --weline-theme-secondary-text-emphasis: var(--color-secondary-text-emphasis, var(--weline-theme-secondary));
    --weline-theme-success: var(--color-success, var(--weshop-success, #15803d));
    --weline-theme-success-rgb: var(--color-success-rgb, 21, 128, 61);
    --weline-theme-success-hover: var(--color-success-hover, var(--weline-theme-success));
    --weline-theme-success-active: var(--color-success-active, var(--weline-theme-success-hover));
    --weline-theme-on-success: var(--color-on-success, #ffffff);
    --weline-theme-success-subtle: var(--color-success-bg-subtle, var(--weshop-success-bg-soft, #f0fdf4));
    --weline-theme-success-border-subtle: var(--color-success-border-subtle, #bbf7d0);
    --weline-theme-success-text-emphasis: var(--color-success-text-emphasis, var(--weline-theme-success));
    --weline-theme-warning: var(--color-warning, var(--weshop-warning, #b45309));
    --weline-theme-warning-rgb: var(--color-warning-rgb, 180, 83, 9);
    --weline-theme-warning-hover: var(--color-warning-hover, var(--weline-theme-warning));
    --weline-theme-warning-active: var(--color-warning-active, var(--weline-theme-warning-hover));
    --weline-theme-on-warning: var(--color-on-warning, #ffffff);
    --weline-theme-warning-subtle: var(--color-warning-bg-subtle, var(--weshop-warning-bg-soft, #fffbeb));
    --weline-theme-warning-border-subtle: var(--color-warning-border-subtle, #fde68a);
    --weline-theme-warning-text-emphasis: var(--color-warning-text-emphasis, var(--weline-theme-warning));
    --weline-theme-danger: var(--color-danger, var(--weshop-danger, #dc2626));
    --weline-theme-danger-rgb: var(--color-danger-rgb, 220, 38, 38);
    --weline-theme-danger-hover: var(--color-danger-hover, var(--weline-theme-danger));
    --weline-theme-danger-active: var(--color-danger-active, var(--weline-theme-danger-hover));
    --weline-theme-on-danger: var(--color-on-danger, #ffffff);
    --weline-theme-danger-subtle: var(--color-danger-bg-subtle, var(--weshop-danger-bg-soft, #fef2f2));
    --weline-theme-danger-border-subtle: var(--color-danger-border-subtle, #fecaca);
    --weline-theme-danger-text-emphasis: var(--color-danger-text-emphasis, var(--weline-theme-danger));
    --weline-theme-info: var(--color-info, var(--weshop-info, #0369a1));
    --weline-theme-info-rgb: var(--color-info-rgb, 3, 105, 161);
    --weline-theme-info-hover: var(--color-info-hover, var(--weline-theme-info));
    --weline-theme-info-active: var(--color-info-active, var(--weline-theme-info-hover));
    --weline-theme-on-info: var(--color-on-info, #ffffff);
    --weline-theme-info-subtle: var(--color-info-bg-subtle, #eff6ff);
    --weline-theme-info-border-subtle: var(--color-info-border-subtle, #bfdbfe);
    --weline-theme-info-text-emphasis: var(--color-info-text-emphasis, var(--weline-theme-info));
    --weline-theme-surface-canvas: var(--color-bg-canvas, var(--weshop-background, #ffffff));
    --weline-theme-surface-canvas-rgb: var(--color-bg-canvas-rgb, 255, 255, 255);
    --weline-theme-body-bg: var(--weline-chrome-body-bg, var(--weline-theme-surface-canvas, #ffffff));
    --weline-theme-surface: var(--color-bg-primary, var(--weshop-surface, #ffffff));
    --weline-theme-surface-subtle: var(--color-bg-secondary, var(--weshop-background, #f8f9fa));
    --weline-theme-surface-muted: var(--color-bg-tertiary, #f1f5f9);
    --weline-theme-text: var(--color-text, var(--weshop-text-primary, #111827));
    --weline-theme-text-rgb: var(--color-text-rgb, 23, 32, 51);
    --weline-theme-emphasis-rgb: var(--color-emphasis-rgb, var(--weline-theme-text-rgb));
    --weline-theme-text-secondary: var(--color-text-secondary, var(--weshop-text-secondary, #6b7280));
    --weline-theme-text-muted: var(--color-text-tertiary, var(--color-text-muted, var(--weshop-text-secondary, #6b7280)));
    --weline-theme-text-inverse: var(--color-text-inverse, #ffffff);
    --weline-theme-link: var(--color-link, var(--weshop-primary, var(--weline-theme-primary)));
    --weline-theme-link-hover: var(--color-link-hover, var(--weshop-primary-hover, var(--weline-theme-primary-hover)));
    --weline-theme-border-width: var(--border-width, var(--weshop-border-width, 1px));
    --weline-theme-border-width-0: 0;
    --weline-theme-border-width-2: var(--border-width-2, 2px);
    --weline-theme-border-style: var(--border-style, solid);
    --weline-theme-border-color: var(--color-border-default, var(--color-border-light, var(--weshop-border, #e5e7eb)));
    --weline-theme-border-color-subtle: var(--color-border-subtle, #f1f5f9);
    --weline-theme-border-color-strong: var(--color-border-strong, #cbd5e1);
    --weline-theme-radius-sm: var(--radius-sm, var(--border-radius-sm, var(--weshop-border-radius-sm, 3px)));
    --weline-theme-radius-md: var(--radius-md, var(--weshop-border-radius-md, 4px));
    --weline-theme-radius-lg: var(--radius-lg, var(--border-radius-lg, var(--weshop-border-radius-lg, 8px)));
    --weline-theme-radius-xl: var(--radius-xl, var(--border-radius-xl, var(--weshop-border-radius-xl, 12px)));
    --weline-theme-radius-2xl: var(--radius-2xl, var(--border-radius-2xl, 16px));
    --weline-theme-radius-full: var(--radius-full, var(--border-radius-full, var(--weshop-border-radius-full, 9999px)));
    --weline-theme-shadow-xs: var(--shadow-xs, 0 1px 1px rgba(15, 23, 42, 0.04));
    --weline-theme-shadow-sm: var(--shadow-sm, var(--weshop-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06)));
    --weline-theme-shadow-md: var(--shadow-md, var(--weshop-shadow-md, 0 8px 24px rgba(15, 23, 42, 0.08)));
    --weline-theme-shadow-lg: var(--shadow-lg, var(--weshop-shadow-lg, 0 18px 44px rgba(15, 23, 42, 0.12)));
    --weline-theme-focus-ring-width: var(--focus-ring-width, 3px);
    --weline-theme-focus-ring-color: var(--focus-ring-color, rgba(var(--weline-theme-primary-rgb), 0.16));
    --weline-theme-success-focus-ring-color: var(--color-success-focus-ring-color, rgba(var(--color-success-rgb, 21, 128, 61), 0.32));
    --weline-theme-danger-focus-ring-color: var(--color-danger-focus-ring-color, rgba(var(--color-danger-rgb, 220, 38, 38), 0.32));
    --weline-theme-focus-ring: var(--focus-ring, 0 0 0 var(--weline-theme-focus-ring-width) var(--weline-theme-focus-ring-color));
    --weline-theme-focus-outline: var(--color-border-focus, var(--weline-theme-primary));
    --weline-theme-overlay: var(--color-bg-overlay, rgb(15 23 42 / 0.42));
    --weline-theme-danger-focus-ring: var(--danger-focus-ring, 0 0 0 var(--weline-theme-focus-ring-width) var(--weline-theme-danger-focus-ring-color));
    --weline-theme-success-focus-ring: var(--success-focus-ring, 0 0 0 var(--weline-theme-focus-ring-width) var(--weline-theme-success-focus-ring-color));
    --weline-theme-control-height-sm: var(--control-height-sm, var(--weline-control-height-sm, 35px));
    --weline-theme-control-height: var(--control-height, var(--weshop-control-height, var(--weline-control-height, 42px)));
    --weline-theme-control-height-lg: var(--control-height-lg, var(--weline-control-height-lg, 48px));
    --weline-theme-control-height-md: var(--control-height-md, 40px);
    --weline-theme-control-height-xl: var(--control-height-xl, 48px);
    --weline-theme-loader-border-width: var(--loader-border-width, 3px);
    --weline-theme-transition-fast: var(--transition-fast, 0.16s ease);
    --weline-theme-transition-base: var(--transition-base, 0.2s ease);
    --weline-theme-transition-slow: var(--transition-slow, 0.32s ease);

    /* ========== foundation / 组件兼容别名（叶子由 variables+colors 提供） ========== */
    --weline-theme-canvas: var(--weline-theme-surface-canvas);
    --weline-theme-border: var(--weline-theme-border-color);
    --weline-theme-surface-raised: var(--weline-theme-surface);
    --weline-theme-surface-hover: var(--color-surface-hover, var(--weline-theme-surface-muted));
    --weline-theme-container-max: var(--weline-layout-content-max-width);
    --weline-theme-primary-surface: var(--weline-theme-primary-subtle);
    --weline-theme-primary-light: var(--weline-theme-primary-subtle);
    --weline-theme-primary-emphasis: var(--weline-theme-primary-text-emphasis);
    --weline-theme-success-surface: var(--weline-theme-success-subtle);
    --weline-theme-warning-surface: var(--weline-theme-warning-subtle);
    --weline-theme-danger-surface: var(--weline-theme-danger-subtle);
    --weline-theme-info-surface: var(--weline-theme-info-subtle);
    --weline-product-label-new-bg: var(--color-product-label-new-bg);
    --weline-product-label-new-text: var(--color-product-label-new-text);
    --weline-product-label-sale-bg: var(--color-product-label-sale-bg);
    --weline-product-label-sale-text: var(--color-product-label-sale-text);
    --weline-theme-text-on-dark: var(--color-text-on-dark, var(--weline-chrome-text-light, #ffffff));
    --weline-theme-text-on-dark-muted: var(--color-text-on-dark-muted, var(--weline-chrome-text-light-secondary, #dddddd));
    --weline-theme-body-text: var(--weline-chrome-body-text, var(--weline-theme-text));
    --weline-theme-body-text-secondary: var(--weline-chrome-body-text-secondary, var(--weline-theme-text-secondary));
    --weline-theme-body-text-muted: var(--weline-chrome-body-text-muted, var(--weline-theme-text-muted));
    --weline-theme-body-text-heading: var(--weline-chrome-body-text-heading, var(--weline-theme-text));
    --weline-theme-body-border: var(--weline-chrome-body-border, var(--weline-theme-border-color));
    --weline-theme-body-link: var(--weline-chrome-body-link, var(--weline-theme-link));
    --weline-theme-body-link-hover: var(--weline-chrome-body-link-hover, var(--weline-theme-link-hover));
    --weline-theme-menu-panel-text: var(--weline-chrome-menu-panel-text, var(--weline-theme-body-text));
    --weline-theme-menu-panel-text-heading: var(--weline-chrome-menu-panel-text-heading, var(--weline-theme-body-text-heading));
    --weline-theme-menu-panel-text-muted: var(--weline-chrome-menu-panel-text-muted, var(--weline-theme-body-text-muted));
    --weline-theme-menu-panel-text-hover: var(--weline-chrome-menu-panel-text-hover, var(--weline-theme-body-link-hover));
    --weline-theme-menu-panel-surface-hover: color-mix(in srgb, var(--weline-theme-menu-panel-text-hover, var(--weline-chrome-primary)) 14%, var(--weline-theme-surface));
    --weline-theme-menu-panel-border: var(--weline-chrome-menu-panel-border, var(--weline-theme-body-border));
    --weline-theme-header-bg: var(--weline-chrome-bg-dark, var(--color-bg-dark-secondary));
    --weline-theme-header-nav-bg: var(--weline-chrome-bg-dark, var(--color-bg-dark-secondary));
    --weline-theme-header-text: var(--weline-chrome-text-light, var(--color-text-light));
    --weline-theme-mega-menu-top-hover-color: var(--weline-chrome-mega-menu-top-hover-color, var(--color-text-light));
    --weline-theme-mega-menu-top-hover-bg: var(--weline-chrome-mega-menu-top-hover-bg, var(--color-on-dark-15));
    --weline-theme-header-search-focus: var(--weline-chrome-primary, var(--color-primary));
    --weline-theme-footer-bg: var(--weline-chrome-footer-bg, var(--color-bg-dark));
    --weline-theme-footer-bg-deep: var(--weline-chrome-footer-bg-deep, var(--color-bg-dark-secondary));
    --weline-theme-footer-text: var(--weline-chrome-text-light, #ffffff);
    --weline-theme-footer-link: var(--weline-chrome-text-light-secondary, #dddddd);
    --weline-theme-footer-back-top-bg: var(--weline-chrome-footer-back-top-bg, #37475a);
    --weline-shadow-sm: var(--shadow-sm, var(--weline-theme-shadow-sm));
    --weline-shadow-md: var(--shadow-md, var(--weline-theme-shadow-md));
    --weline-shadow-lg: var(--shadow-lg, var(--weline-theme-shadow-lg));

    --weline-layout-font-family: var(--font-family-base, var(--weshop-font-family, "Noto Sans SC", "PingFang SC", sans-serif));
    --weline-layout-font-family-display: var(--font-family-display, var(--weshop-font-display, var(--weline-layout-font-family)));
    --weline-layout-font-family-ui: var(--font-family-ui, var(--weline-layout-font-family));
    --weline-layout-font-size-xs: var(--font-size-xs, var(--weshop-font-size-xs, 0.75rem));
    --weline-layout-font-size-sm: var(--font-size-sm, var(--weshop-font-size-sm, 0.875rem));
    --weline-layout-font-size-base: var(--font-size-base, var(--weshop-font-size-base, 1rem));
    --weline-layout-font-size-lg: var(--font-size-lg, var(--weshop-font-size-lg, 1.125rem));
    --weline-layout-font-size-xl: var(--font-size-xl, var(--weshop-font-size-xl, 1.25rem));
    --weline-layout-font-size-2xl: var(--font-size-2xl, var(--weshop-font-size-2xl, 1.5rem));
    --weline-layout-font-size-3xl: var(--font-size-3xl, var(--weshop-font-size-3xl, 1.75rem));
    --weline-layout-font-size-4xl: var(--font-size-4xl, var(--weshop-font-size-4xl, 2rem));
    --weline-layout-font-weight-medium: var(--font-weight-medium, var(--weshop-font-weight-medium, 500));
    --weline-layout-font-weight-semibold: var(--font-weight-semibold, var(--weshop-font-weight-semibold, 600));
    --weline-layout-font-weight-bold: var(--font-weight-bold, var(--weshop-font-weight-bold, 700));
    --weline-layout-line-height-tight: var(--line-height-tight, var(--weshop-line-height-tight, 1.25));
    --weline-layout-line-height-normal: var(--line-height-normal, var(--weshop-line-height-normal, 1.5));
    --weline-layout-line-height-relaxed: var(--line-height-relaxed, var(--weshop-line-height-relaxed, 1.75));
    --weline-layout-line-height-loose: var(--line-height-loose, 2);
    --weline-layout-spacing-xs: var(--spacing-xs, var(--weshop-spacing-xs, 0.25rem));
    --weline-layout-spacing-sm: var(--spacing-sm, var(--weshop-spacing-sm, 0.5rem));
    --weline-layout-spacing-md: var(--spacing-md, var(--weshop-spacing-md, 1rem));
    --weline-layout-spacing-lg: var(--spacing-lg, var(--weshop-spacing-lg, 1.5rem));
    --weline-layout-spacing-xl: var(--spacing-xl, var(--weshop-spacing-xl, 2rem));
    --weline-layout-spacing-2xl: var(--spacing-2xl, var(--weshop-spacing-2xl, 3rem));
    --weline-layout-spacing-3xl: var(--spacing-3xl, var(--weshop-spacing-3xl, 4rem));
    --weline-layout-radius-sm: var(--weline-theme-radius-sm);
    --weline-layout-radius-md: var(--weline-theme-radius-md);
    --weline-layout-radius-lg: var(--weline-theme-radius-lg);
    --weline-layout-radius-xl: var(--weline-theme-radius-xl);
    --weline-layout-radius-full: var(--weline-theme-radius-full);
    --weline-layout-text-primary: var(--weline-theme-text);
    --weline-layout-text-secondary: var(--weline-theme-text-secondary);
    --weline-layout-text-tertiary: var(--weline-theme-text-muted);
    --weline-layout-surface-primary: var(--weline-theme-surface);
    --weline-layout-surface-secondary: var(--weline-theme-surface-subtle);
    --weline-layout-surface-tertiary: var(--weline-theme-surface-muted);
    --weline-layout-border-color: var(--weline-theme-border-color);
    --weline-layout-link-color: var(--weline-theme-link);
    --weline-layout-link-hover-color: var(--weline-theme-link-hover);
    --weline-layout-content-max-width: var(--layout-max-width);
    /* 与 variables/_spacing.css 同义：内沿 gutter 恒在，禁止 ≥版心归零贴边 */
    --weline-layout-content-padding-inline: var(--spacing-container-padding);
    --weline-layout-z-index-dropdown: var(--z-index-dropdown, 1000);
    --weline-layout-z-index-modal: var(--z-index-modal, 1050);
    --weline-component-primary: var(--weline-theme-primary);
    --weline-component-primary-hover: var(--weline-theme-primary-hover);
    --weline-component-primary-text: var(--weline-theme-on-primary);
    --weline-component-secondary: var(--weline-theme-secondary);
    --weline-component-secondary-hover: var(--weline-theme-secondary-hover);
    --weline-component-secondary-active: var(--weline-theme-secondary-active);
    --weline-component-secondary-text: var(--weline-theme-on-secondary);
    --weline-component-success: var(--weline-theme-success);
    --weline-component-warning: var(--weline-theme-warning);
    --weline-component-danger: var(--weline-theme-danger);
    --weline-component-info: var(--weline-theme-info);
    --weline-component-primary-bg-soft: var(--weline-theme-primary-subtle);
    --weline-component-success-bg-soft: var(--weline-theme-success-subtle);
    --weline-component-warning-bg-soft: var(--weline-theme-warning-subtle);
    --weline-component-danger-bg-soft: var(--weline-theme-danger-subtle);
    --weline-component-control-height: var(--weline-theme-control-height);
    --weline-component-control-height-sm: var(--weline-theme-control-height-sm);
    --weline-component-control-height-md: var(--weline-theme-control-height-md);
    --weline-component-control-height-lg: var(--weline-theme-control-height-lg);
    --weline-component-control-height-xl: var(--weline-theme-control-height-xl);
    --weline-component-focus-ring: var(--weline-theme-focus-ring);
    --weline-component-shadow-sm: var(--weline-theme-shadow-sm);
    --weline-component-shadow-md: var(--weline-theme-shadow-md);
    --weline-component-shadow-lg: var(--weline-theme-shadow-lg);
    --weline-component-scrollbar-thumb: var(--scrollbar-thumb, var(--weline-theme-border-color-strong));
    --weline-component-scrollbar-thumb-hover: var(--scrollbar-thumb-hover, var(--weline-theme-text-muted));
    --weline-component-scrollbar-track: var(--scrollbar-track, transparent);
    --weline-component-notice-surface: var(--weline-theme-surface);
    --weline-component-notice-border: var(--weline-theme-border-color);
    --weline-component-notice-overlay: var(--weline-theme-overlay);
    --weline-component-notice-mark-shadow: var(--weline-theme-focus-ring);
}

/* Legacy Default-theme variables are semantic aliases, not a second component layer. */
:root {
    --theme-primary: var(--weline-theme-primary); --theme-primary-hover: var(--weline-theme-primary-hover); --theme-primary-light: var(--weline-theme-primary-subtle);
    --theme-secondary: var(--weline-theme-secondary); --theme-success: var(--weline-theme-success); --theme-warning: var(--weline-theme-warning); --theme-danger: var(--weline-theme-danger); --theme-info: var(--weline-theme-info);
    --theme-white: var(--weline-theme-text-inverse); --theme-black: var(--weline-theme-text);
    --theme-gray-50: var(--weline-theme-surface); --theme-gray-100: var(--weline-theme-surface-subtle); --theme-gray-200: var(--weline-theme-surface-muted); --theme-gray-300: var(--weline-theme-border-color); --theme-gray-400: var(--weline-theme-text-muted); --theme-gray-500: var(--weline-theme-text-secondary); --theme-gray-600: var(--weline-theme-text-secondary); --theme-gray-700: var(--weline-theme-text); --theme-gray-800: var(--weline-theme-text); --theme-gray-900: var(--weline-theme-text);
    --theme-bg: var(--weline-theme-surface); --theme-bg-secondary: var(--weline-theme-surface-subtle); --theme-bg-tertiary: var(--weline-theme-surface-muted);
    --theme-text: var(--weline-theme-text); --theme-text-secondary: var(--weline-theme-text-secondary); --theme-text-muted: var(--weline-theme-text-muted); --theme-border: var(--weline-theme-border-color);
    --theme-border-radius: var(--weline-theme-radius-md); --theme-border-radius-sm: var(--weline-theme-radius-sm); --theme-border-radius-lg: var(--weline-theme-radius-lg);
    --theme-shadow-sm: var(--weline-theme-shadow-sm); --theme-shadow: var(--weline-theme-shadow-md); --theme-shadow-md: var(--weline-theme-shadow-md); --theme-shadow-lg: var(--weline-theme-shadow-lg);
    --theme-spacing-xs: var(--weline-layout-spacing-xs); --theme-spacing-sm: var(--weline-layout-spacing-sm); --theme-spacing-md: var(--weline-layout-spacing-md); --theme-spacing-lg: var(--weline-layout-spacing-lg); --theme-spacing-xl: var(--weline-layout-spacing-xl);
    --theme-font-family: var(--weline-layout-font-family); --theme-font-size-xs: var(--weline-layout-font-size-xs); --theme-font-size-sm: var(--weline-layout-font-size-sm); --theme-font-size-base: var(--weline-layout-font-size-base); --theme-font-size-lg: var(--weline-layout-font-size-lg); --theme-font-size-xl: var(--weline-layout-font-size-xl);
    --theme-container-max-width: var(--weline-layout-content-max-width); --theme-header-height: 64px; --theme-footer-height: auto;
    --theme-transition: var(--weline-theme-transition-base); --theme-transition-fast: var(--weline-theme-transition-fast); --theme-transition-slow: 0.3s ease;
}

.weline-page-wrapper,
.weline-main-content,
.main-content,
main[data-layout],
.w-frontend-main,
.w-frontend-content {
    font-family: var(--weline-layout-font-family);
    font-size: var(--weline-layout-font-size-base);
    line-height: var(--weline-layout-line-height-normal);
    color: var(--weline-theme-body-text, var(--color-text-primary));
}

.w-frontend-main,
.w-frontend-content,
main[data-layout]:not(.weline-main-content) {
    background-color: var(--weline-theme-body-bg, var(--weline-chrome-body-bg, var(--weline-theme-canvas, #ffffff)));
}

/* ========== Theme component defaults ========== */
.w-btn,
.w-button,
.btn,
.button,
button.btn,
a.btn,
input[type="button"].btn,
input[type="submit"].btn,
input[type="reset"].btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--weline-layout-spacing-sm);
    min-height: var(--weline-component-control-height);
    padding: var(--weline-space-2) var(--weline-space-4);
    border: var(--weline-theme-border-width) var(--weline-theme-border-style) transparent;
    border-radius: var(--weline-layout-radius-md);
    background: var(--weline-component-primary);
    color: var(--weline-component-primary-text);
    cursor: pointer;
    font: inherit;
    font-size: var(--weline-layout-font-size-sm);
    font-weight: var(--weline-layout-font-weight-semibold);
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    transition: transform var(--weline-theme-transition-base), box-shadow var(--weline-theme-transition-base), background-color var(--weline-theme-transition-base), border-color var(--weline-theme-transition-base), color var(--weline-theme-transition-base);
}

.w-btn:hover,
.w-button:hover,
.btn:hover,
.button:hover,
a.btn:hover,
button.btn:hover {
    background: var(--weline-component-primary-hover);
    color: var(--weline-component-primary-text);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--weline-component-shadow-sm);
}

.w-btn:focus-visible,
.w-button:focus-visible,
.btn:focus-visible,
.button:focus-visible,
button.btn:focus-visible,
a.btn:focus-visible {
    outline: 0;
    box-shadow: var(--weline-component-focus-ring);
}

.w-btn:disabled,
.w-btn.w-disabled,
.w-button:disabled,
.w-button.w-disabled,
.btn:disabled,
.btn.disabled,
.button:disabled,
.button.disabled,
button[disabled].btn,
input[disabled].btn {
    opacity: 0.62;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .w-btn,
    .w-button,
    .btn,
    .button,
    button.btn,
    a.btn {
        transition: none;
        transform: none;
    }
}


.w-btn-primary,
.w-button-primary,
.btn-primary,
.button-primary {
    background: var(--weline-component-primary);
    color: var(--weline-component-primary-text);
}

.w-btn-secondary,
.w-button-secondary,
.btn-secondary,
.button-secondary {
    background: var(--weline-component-secondary);
    color: var(--weline-theme-on-secondary);
}

.w-btn-success,
.btn-success {
    background: var(--weline-component-success);
    color: var(--weline-theme-on-success);
}

.w-btn-warning,
.btn-warning {
    background: var(--weline-component-warning);
    color: var(--weline-theme-on-warning);
}

.w-btn-danger,
.btn-danger {
    background: var(--weline-component-danger);
    color: var(--weline-theme-on-danger);
}

.w-btn-info,
.btn-info {
    background: var(--weline-component-info);
    color: var(--weline-theme-on-info);
}

.w-btn-outline,
.w-btn-outline-primary,
.w-button-outline,
.btn-outline,
.btn-outline-primary,
.button-outline {
    background: transparent;
    border-color: var(--weline-component-primary);
    color: var(--weline-component-primary);
}

.w-btn-outline:hover,
.w-btn-outline-primary:hover,
.w-button-outline:hover,
.btn-outline:hover,
.btn-outline-primary:hover,
.button-outline:hover {
    background: var(--weline-component-primary);
    color: var(--weline-component-primary-text);
}

.w-btn-link,
.btn-link {
    min-height: auto;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--weline-layout-link-color);
    box-shadow: none;
}

.w-btn-link:hover,
.btn-link:hover {
    background: transparent;
    color: var(--weline-layout-link-hover-color);
    box-shadow: none;
    transform: none;
    text-decoration: underline;
}

/* ========== Header language / currency triggers（inverse chrome，跟随主题浅色 Token） ==========
 * Unlayered `.w-button` defaults to `--weline-component-primary` fill; layered quiet
 * tone loses. Dark chrome must stay ghost (same rank as account/wishlist), not brand chips.
 */
[data-surface="inverse"] .w-button[data-tone="quiet"],
.w-surface-inverse .w-button[data-tone="quiet"],
[data-surface="inverse"] .w-language-switcher__trigger.w-button,
[data-surface="inverse"] .w-currency-switcher__trigger.w-button,
.w-surface-inverse .w-language-switcher__trigger.w-button,
.w-surface-inverse .w-currency-switcher__trigger.w-button {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
    color: var(--w-surface-fg, var(--weline-theme-header-text, var(--weline-theme-text-on-dark)));
}

[data-surface="inverse"] .w-button[data-tone="quiet"]:hover,
.w-surface-inverse .w-button[data-tone="quiet"]:hover,
[data-surface="inverse"] .w-language-switcher__trigger.w-button:hover,
[data-surface="inverse"] .w-currency-switcher__trigger.w-button:hover,
.w-surface-inverse .w-language-switcher__trigger.w-button:hover,
.w-surface-inverse .w-currency-switcher__trigger.w-button:hover {
    background: var(--color-on-dark-soft);
    border-color: transparent;
    box-shadow: none;
    transform: none;
    color: var(--w-surface-fg, var(--weline-theme-header-text, var(--weline-theme-text-on-dark)));
}

/* Notice-bar scope switcher: text-link ghost on cream notice (not primary chip). */
.weline-header .header-site-notice .w-scope-switcher__trigger.w-button,
.weline-header .header-site-notice-links .w-scope-switcher__trigger.w-button,
.weline-header .header-top-bar-rights-cluster .w-scope-switcher__trigger.w-button {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
    color: inherit;
}

.weline-header .header-site-notice .w-scope-switcher__trigger.w-button:hover,
.weline-header .header-site-notice-links .w-scope-switcher__trigger.w-button:hover,
.weline-header .header-top-bar-rights-cluster .w-scope-switcher__trigger.w-button:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
    color: inherit;
}

/* ========== Header delivery / location entry（主题默认 UI，模块勿私写裸按钮） ========== */
.w-header-delivery-entry,
.location-link,
.delivery-entry {
    display: inline-flex;
    align-items: center;
    gap: var(--weline-space-2);
    min-height: auto;
    margin: 0;
    padding: var(--weline-space-2);
    border: var(--weline-theme-border-width) var(--weline-theme-border-style) transparent;
    border-radius: var(--weline-theme-radius-sm);
    background: transparent;
    color: var(--weline-theme-text-on-dark);
    font: inherit;
    font-weight: var(--weline-layout-font-weight-medium);
    line-height: var(--weline-layout-line-height-tight);
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transform: none;
    transition: border-color var(--weline-theme-transition-fast), background-color var(--weline-theme-transition-fast), color var(--weline-theme-transition-fast);
}

.w-header-delivery-entry:hover,
.location-link:hover,
.delivery-entry:hover {
    border-color: var(--weline-theme-text-on-dark-muted);
    background: var(--color-on-dark-soft);
    color: var(--weline-theme-text-on-dark);
    text-decoration: none;
    box-shadow: none;
    transform: none;
}

.w-header-delivery-entry:focus-visible,
.location-link:focus-visible,
.delivery-entry:focus-visible {
    outline: 0;
    box-shadow: var(--weline-theme-focus-ring);
}

.location-text,
.delivery-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: var(--weline-layout-line-height-tight);
}

.location-line-1,
.delivery-line-1 {
    font-size: var(--weline-layout-font-size-xs);
    font-weight: var(--weline-layout-font-weight-medium);
    color: var(--w-surface-fg-muted, var(--weline-theme-text-on-dark-muted));
}

.location-line-2,
.delivery-line-2 {
    max-width: var(--size-panel-180);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--weline-layout-font-size-sm);
    font-weight: var(--weline-layout-font-weight-semibold);
    color: var(--w-surface-fg, var(--weline-theme-text-on-dark));
}

[data-header-tone="light"] .w-header-delivery-entry,
[data-header-tone="light"] .location-link,
[data-header-tone="light"] .delivery-entry {
    color: var(--weline-theme-text);
}

[data-header-tone="light"] .w-header-delivery-entry:hover,
[data-header-tone="light"] .location-link:hover,
[data-header-tone="light"] .delivery-entry:hover {
    border-color: var(--weline-theme-border-color);
    background: var(--weline-theme-surface-hover);
    color: var(--weline-theme-text);
}

[data-header-tone="light"] .location-line-1,
[data-header-tone="light"] .delivery-line-1 {
    color: var(--weline-theme-text-muted);
}

[data-header-tone="light"] .location-line-2,
[data-header-tone="light"] .delivery-line-2 {
    color: var(--weline-theme-text);
}

/* ========== Checkout 配送浮层（主题默认 UI，避免 slot 内联样式未加载时挤成竖条） ========== */
.header-location,
.header-location-slot {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
}

[data-checkout-delivery-widget] {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

[data-checkout-delivery-widget] .delivery-panel {
    position: absolute;
    left: 0;
    top: calc(100% + var(--weline-space-2));
    width: min(var(--size-content-640, 42.5rem), 92vw);
    min-width: min(22.5rem, 92vw);
    box-sizing: border-box;
    border: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-theme-body-border, var(--weline-theme-border));
    border-radius: var(--weline-theme-radius-lg);
    padding: var(--weline-space-4);
    box-shadow: var(--weline-theme-shadow-md);
    z-index: var(--z-index-dropdown);
}

[data-checkout-delivery-widget] .delivery-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--weline-space-3);
    margin-bottom: var(--weline-space-4);
}

[data-checkout-delivery-widget] .delivery-panel-head strong {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--weline-layout-font-size-base);
    line-height: 1.35;
    white-space: nowrap;
}

[data-checkout-delivery-widget] .delivery-panel[hidden] {
    display: none !important;
}

.w-btn-sm,
.btn-sm,
.w-button[data-size="sm"],
.w-button[data-size="xs"] {
    min-height: var(--weline-component-control-height-sm);
    padding: var(--weline-space-2) var(--weline-space-3);
    font-size: var(--weline-layout-font-size-xs);
}

.w-btn-lg,
.btn-lg,
.w-button[data-size="lg"] {
    min-height: var(--weline-component-control-height-lg);
    padding: var(--weline-space-3) var(--weline-space-5);
    font-size: var(--weline-layout-font-size-base);
}

.w-button[data-size="md"] {
    min-height: var(--weline-component-control-height-md);
}

.w-button[data-icon-only="true"] {
    min-inline-size: var(--weline-component-control-height);
    inline-size: var(--weline-component-control-height);
    padding-inline: 0;
}

.w-button[data-icon-only="true"][data-size="sm"],
.w-button[data-icon-only="true"][data-size="xs"] {
    min-inline-size: var(--weline-component-control-height-sm);
    inline-size: var(--weline-component-control-height-sm);
}

.w-button[data-icon-only="true"][data-size="lg"] {
    min-inline-size: var(--weline-component-control-height-lg);
    inline-size: var(--weline-component-control-height-lg);
}

.w-input,
.w-select,
.w-textarea,
input[type="text"]:not([class]),
input[type="search"]:not([class]),
input[type="email"]:not([class]),
input[type="password"]:not([class]),
input[type="number"]:not([class]),
select:not([class]),
textarea:not([class]),
.form-control,
.w-form-control {
    min-height: var(--weline-component-control-height-md);
    box-sizing: border-box;
}

.w-btn-loading,
.btn-loading {
    cursor: wait;
    pointer-events: none;
    opacity: 0.72;
}

.w-card,
.w-panel,
.w-box,
.w-widget,
.w-content-card,
.w-product-card,
.w-summary-card,
.w-total-card,
.w-stat-card,
.w-stats-card,
.w-metric-card,
.card,
.panel,
.box,
.widget,
.content-card,
.product-card,
.summary-card,
.total-card,
.stat-card,
.stats-card,
.metric-card {
    min-width: 0;
    border: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-layout-border-color);
    border-radius: var(--weline-layout-radius-lg);
    background: var(--weline-layout-surface-primary);
    color: var(--weline-layout-text-primary);
    box-shadow: var(--weline-component-shadow-sm);
    overflow: hidden;
}

.w-card-header,
.w-panel-header,
.w-box-header,
.w-widget-header,
.card-header,
.panel-header,
.box-header,
.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--weline-layout-spacing-md);
    padding: var(--weline-space-4) var(--weline-space-5);
    border-bottom: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-layout-border-color);
    background: var(--weline-layout-surface-secondary);
}

.w-card-image,
.card-image {
    display: block;
    width: 100%;
    height: auto;
}

.w-card-body,
.w-panel-body,
.w-box-body,
.w-widget-body,
.card-body,
.panel-body,
.box-body,
.widget-body {
    padding: var(--weline-space-5);
}

.w-card-footer,
.w-panel-footer,
.w-box-footer,
.w-widget-footer,
.card-footer,
.panel-footer,
.box-footer,
.widget-footer {
    padding: var(--weline-space-4) var(--weline-space-5);
    border-top: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-layout-border-color);
    background: var(--weline-layout-surface-secondary);
}

.w-card-title,
.w-panel-title,
.w-box-title,
.w-widget-title,
.card-title,
.panel-title,
.box-title,
.widget-title {
    margin: 0;
    color: var(--weline-layout-text-primary);
    font-family: var(--weline-layout-font-family-display);
    font-size: var(--weline-layout-font-size-lg);
    font-weight: var(--weline-layout-font-weight-semibold);
    line-height: var(--weline-layout-line-height-tight);
}

.w-card-subtitle,
.card-subtitle {
    margin: var(--weline-space-1) 0 0;
    color: var(--weline-layout-text-secondary);
    font-size: var(--weline-layout-font-size-sm);
}

.w-card-actions,
.card-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--weline-layout-spacing-sm);
}

.w-card-text,
.w-card-description,
.w-panel-description,
.w-widget-description,
.card-text,
.card-description,
.panel-description,
.widget-description {
    margin: var(--weline-space-1) 0 0;
    color: var(--weline-layout-text-secondary);
    font-size: var(--weline-layout-font-size-sm);
}

.w-stats-grid,
.w-stat-grid,
.w-metrics-grid,
.w-total-grid,
.w-summary-grid,
.stats-grid,
.stat-grid,
.metrics-grid,
.total-grid,
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--weline-layout-spacing-md);
}

.w-stat-card,
.w-stats-card,
.w-metric-card,
.w-total-card,
.stat-card,
.stats-card,
.metric-card,
.total-card {
    display: grid;
    gap: var(--weline-layout-spacing-xs);
    padding: var(--weline-space-4) var(--weline-space-5);
}

.w-stat-label,
.w-stats-label,
.w-metric-label,
.w-total-label,
.stat-label,
.stats-label,
.metric-label,
.total-label {
    color: var(--weline-layout-text-tertiary);
    font-size: var(--weline-layout-font-size-sm);
    font-weight: var(--weline-layout-font-weight-medium);
}

.w-stat-value,
.w-stats-value,
.w-metric-value,
.w-total-value,
.w-total,
.stat-value,
.stats-value,
.metric-value,
.total-value,
.total {
    color: var(--weline-layout-text-primary);
    font-family: var(--weline-layout-font-family-display);
    font-size: var(--weline-layout-font-size-3xl);
    font-weight: var(--weline-layout-font-weight-bold);
    line-height: var(--weline-layout-line-height-tight);
}

.w-stat-meta,
.w-stats-meta,
.w-metric-meta,
.w-total-meta,
.stat-meta,
.stats-meta,
.metric-meta,
.total-meta {
    color: var(--weline-layout-text-secondary);
    font-size: var(--weline-layout-font-size-xs);
}

.w-badge,
.w-tag,
.w-label,
.w-pill,
.badge,
.tag,
.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--weline-space-1);
    max-width: 100%;
    padding: var(--weline-space-1) var(--weline-space-2);
    border: var(--weline-theme-border-width) var(--weline-theme-border-style) transparent;
    border-radius: var(--weline-layout-radius-full);
    background: var(--weline-layout-surface-secondary);
    color: var(--weline-layout-text-secondary);
    font-size: var(--weline-layout-font-size-xs);
    font-weight: var(--weline-layout-font-weight-semibold);
    line-height: 1.35;
    vertical-align: middle;
    white-space: nowrap;
}

.w-badge-primary,
.w-tag-primary,
.w-label-primary,
.badge-primary,
.tag-primary {
    background: var(--weline-component-primary-bg-soft);
    color: var(--weline-component-primary);
}

.w-badge-secondary,
.w-tag-secondary,
.w-label-secondary,
.badge-secondary,
.tag-secondary {
    background: var(--weline-theme-secondary-subtle);
    color: var(--weline-theme-secondary-text-emphasis);
}

.w-badge-success,
.w-tag-success,
.w-label-success,
.badge-success,
.tag-success {
    background: var(--weline-component-success-bg-soft);
    color: var(--weline-component-success);
}

.w-badge-warning,
.w-tag-warning,
.w-label-warning,
.badge-warning,
.tag-warning {
    background: var(--weline-component-warning-bg-soft);
    color: var(--weline-component-warning);
}

.w-badge-danger,
.w-tag-danger,
.w-label-danger,
.badge-danger,
.tag-danger {
    background: var(--weline-component-danger-bg-soft);
    color: var(--weline-component-danger);
}

.w-badge-info,
.w-tag-info,
.w-label-info,
.badge-info,
.tag-info {
    background: var(--weline-theme-info-subtle);
    color: var(--weline-theme-info);
}

.w-form-group,
.w-field,
.w-control-group,
.form-group,
.field,
.control-group {
    display: grid;
    gap: var(--weline-space-2);
    margin-bottom: var(--weline-layout-spacing-md);
}

.w-form-label,
.w-field-label,
.form-label,
.field-label,
label.control-label {
    color: var(--weline-layout-text-primary);
    font-size: var(--weline-layout-font-size-sm);
    font-weight: var(--weline-layout-font-weight-semibold);
}

.w-form-text,
.form-text,
.w-help-text,
.help-text {
    color: var(--weline-layout-text-tertiary);
    font-size: var(--weline-layout-font-size-xs);
}

.w-form-control,
.w-form-select,
.w-input-text,
.w-input-control,
.form-control,
.form-select,
.input-text,
.input-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
    width: 100%;
    min-height: var(--weline-component-control-height);
    padding: var(--weline-space-2) var(--weline-space-3);
    border: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-layout-border-color);
    border-radius: var(--weline-layout-radius-md);
    background: var(--weline-layout-surface-primary);
    color: var(--weline-layout-text-primary);
    font: inherit;
    line-height: 1.4;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

textarea,
textarea.form-control,
textarea.w-form-control {
    min-height: var(--size-panel-120);
    resize: vertical;
}

.w-form-control::placeholder,
.w-input-text::placeholder,
.form-control::placeholder,
.input-text::placeholder,
textarea::placeholder,
input::placeholder {
    color: var(--weline-layout-text-tertiary);
}

.w-form-control:focus,
.w-form-select:focus,
.w-input-text:focus,
.w-input-control:focus,
.form-control:focus,
.form-select:focus,
.input-text:focus,
.input-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    outline: 0;
    border-color: var(--weline-component-primary);
    box-shadow: var(--weline-component-focus-ring);
}

.w-form-control:disabled,
.w-form-select:disabled,
.w-input-text:disabled,
.w-input-control:disabled,
.form-control:disabled,
.form-select:disabled,
.input-text:disabled,
.input-control:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.w-form-control.w-is-valid,
.w-form-select.w-is-valid,
.w-input-text.w-is-valid,
.w-input-control.w-is-valid,
.w-is-valid,
.form-control.is-valid,
.form-select.is-valid,
.input-text.is-valid,
.input-control.is-valid,
.is-valid {
    border-color: var(--weline-component-success);
}

.w-form-control.w-is-valid:focus,
.w-form-select.w-is-valid:focus,
.w-input-text.w-is-valid:focus,
.w-input-control.w-is-valid:focus,
.form-control.is-valid:focus,
.form-select.is-valid:focus,
.input-text.is-valid:focus,
.input-control.is-valid:focus {
    border-color: var(--weline-component-success);
    box-shadow: var(--weline-theme-success-focus-ring);
}

.w-valid-feedback,
.valid-feedback {
    color: var(--weline-theme-success-text-emphasis);
    font-size: var(--weline-layout-font-size-xs);
}

.valid-tooltip {
    color: var(--weline-theme-on-success);
    background-color: var(--weline-theme-success);
    border: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-theme-success-border-subtle);
}

.w-form-control.w-is-invalid,
.w-form-select.w-is-invalid,
.w-input-text.w-is-invalid,
.w-input-control.w-is-invalid,
.w-is-invalid,
.form-control.is-invalid,
.form-select.is-invalid,
.input-text.is-invalid,
.input-control.is-invalid,
.is-invalid {
    border-color: var(--weline-component-danger);
}

.w-form-control.w-is-invalid:focus,
.w-form-select.w-is-invalid:focus,
.w-input-text.w-is-invalid:focus,
.w-input-control.w-is-invalid:focus,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.input-text.is-invalid:focus,
.input-control.is-invalid:focus {
    border-color: var(--weline-component-danger);
    box-shadow: var(--weline-theme-danger-focus-ring);
}

.w-invalid-feedback,
.invalid-feedback,
.w-field-error,
.field-error {
    color: var(--weline-theme-danger-text-emphasis);
    font-size: var(--weline-layout-font-size-xs);
}

.invalid-tooltip {
    color: var(--weline-theme-on-danger);
    background-color: var(--weline-theme-danger);
    border: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-theme-danger-border-subtle);
}

.w-table,
.table,
table.table {
    width: 100%;
    border-collapse: collapse;
    color: var(--weline-layout-text-primary);
    font-size: var(--weline-layout-font-size-sm);
}

.w-table th,
.w-table td,
.table th,
.table td,
table.table th,
table.table td {
    padding: var(--weline-space-3) var(--weline-space-4);
    border-bottom: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-layout-border-color);
    text-align: start;
    vertical-align: middle;
}

.w-table th,
.table th,
table.table th {
    background: var(--weline-layout-surface-secondary);
    color: var(--weline-layout-text-secondary);
    font-weight: var(--weline-layout-font-weight-semibold);
}

.w-table tbody tr:hover,
.table tbody tr:hover,
table.table tbody tr:hover {
    background: var(--weline-layout-surface-secondary);
}

.w-table-striped tbody tr:nth-child(even),
.table-striped tbody tr:nth-child(even) {
    background: var(--weline-layout-surface-secondary);
}

.w-table-bordered,
.table-bordered {
    border: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-layout-border-color);
}

.w-table-bordered th,
.w-table-bordered td,
.table-bordered th,
.table-bordered td {
    border: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-layout-border-color);
}

.w-table-hover tbody tr:hover,
.table-hover tbody tr:hover {
    background: var(--weline-theme-primary-subtle);
}

.w-alert,
.w-message,
.w-notice,
.alert,
.message,
.notice {
    padding: var(--weline-space-3) var(--weline-space-4);
    border: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-layout-border-color);
    border-radius: var(--weline-layout-radius-md);
    background: var(--weline-layout-surface-secondary);
    color: var(--weline-layout-text-primary);
}

.w-alert-dismissible,
.alert-dismissible {
    position: relative;
    padding-inline-end: 3rem;
}

.w-btn-close,
.btn-close {
    position: absolute;
    top: 0.75rem;
    inset-inline-end: 0.75rem;
    width: var(--spacing-7);
    height: var(--spacing-7);
    padding: 0;
    border: 0;
    border-radius: var(--weline-layout-radius-sm);
    background: transparent;
    color: currentColor;
    cursor: pointer;
    opacity: 0.72;
}

.w-btn-close::before,
.btn-close::before {
    content: "\00d7";
    display: block;
    font-size: var(--weline-font-size-xl);
    line-height: 1.75rem;
    text-align: center;
}

.w-btn-close:hover,
.btn-close:hover,
.w-btn-close:focus-visible,
.btn-close:focus-visible {
    opacity: 1;
    outline: 0;
    box-shadow: var(--weline-component-focus-ring);
}

.w-alert-success,
.w-message-success,
.w-notice-success,
.alert-success,
.message-success,
.notice-success {
    border-color: var(--weline-component-success);
    background: var(--weline-component-success-bg-soft);
    color: var(--weline-component-success);
}

.w-alert-warning,
.w-message-warning,
.w-notice-warning,
.alert-warning,
.message-warning,
.notice-warning {
    border-color: var(--weline-component-warning);
    background: var(--weline-component-warning-bg-soft);
    color: var(--weline-component-warning);
}

.w-alert-danger,
.w-message-danger,
.w-notice-danger,
.w-alert-error,
.w-message-error,
.alert-danger,
.message-danger,
.notice-danger,
.alert-error,
.message-error {
    border-color: var(--weline-component-danger);
    background: var(--weline-component-danger-bg-soft);
    color: var(--weline-component-danger);
}

.w-alert-info,
.w-message-info,
.w-notice-info,
.alert-info,
.message-info,
.notice-info {
    border-color: var(--weline-theme-info);
    background: var(--weline-theme-info-subtle);
    color: var(--weline-theme-info);
}

.w-pagination,
.w-pager,
.w-toolbar,
.w-pagination-list,
.pagination,
.pager,
.toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--weline-layout-spacing-sm);
}

.w-pagination-list,
.pagination-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.w-pagination a,
.w-pagination span,
.w-pager a,
.w-pager span,
.w-page-link,
.pagination a,
.pagination span,
.pager a,
.pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--control-height-sm);
    min-height: var(--control-height-sm);
    padding: var(--weline-space-1) var(--weline-space-3);
    border: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-layout-border-color);
    border-radius: var(--weline-layout-radius-md);
    background: var(--weline-layout-surface-primary);
    color: var(--weline-layout-text-secondary);
    text-decoration: none;
}

.w-pagination .active,
.w-pagination a:hover,
.w-pager .active,
.w-pager a:hover,
.w-page-item.w-active .w-page-link,
.w-page-item.active .w-page-link,
.w-page-link:hover,
.pagination .active,
.pagination a:hover,
.pager .active,
.pager a:hover {
    border-color: var(--weline-component-primary);
    background: var(--weline-component-primary);
    color: var(--weline-component-primary-text);
}

.w-dropdown,
.dropdown {
    position: relative;
    display: inline-block;
}

.w-dropdown-menu,
.dropdown-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    inset-inline-start: 0;
    z-index: var(--weline-layout-z-index-dropdown);
    display: none;
    min-width: 12rem;
    padding: var(--weline-space-1);
    border: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-layout-border-color);
    border-radius: var(--weline-layout-radius-md);
    background: var(--weline-layout-surface-primary);
    box-shadow: var(--weline-component-shadow-md);
}

.w-dropdown-right .w-dropdown-menu,
.dropdown-right .dropdown-menu {
    inset-inline-end: 0;
    inset-inline-start: auto;
}

.w-dropdown.w-open .w-dropdown-menu,
.w-dropdown:hover .w-dropdown-menu,
.dropdown.show .dropdown-menu,
.dropdown:hover .dropdown-menu,
.dropdown-menu.show {
    display: block;
}

.w-dropdown-item,
.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--weline-layout-spacing-sm);
    width: 100%;
    padding: var(--weline-space-2) var(--weline-space-3);
    border-radius: var(--weline-layout-radius-sm);
    color: var(--weline-layout-text-secondary);
    text-decoration: none;
}

.w-dropdown-item:hover,
.dropdown-item:hover {
    background: var(--weline-layout-surface-secondary);
    color: var(--weline-layout-text-primary);
}

.w-dropdown-header,
.dropdown-header {
    padding: var(--weline-space-2) var(--weline-space-3);
    color: var(--weline-layout-text-tertiary);
    font-size: var(--weline-layout-font-size-xs);
    font-weight: var(--weline-layout-font-weight-semibold);
}

.w-dropdown-divider,
.dropdown-divider {
    height: 0;
    margin: var(--weline-space-1) 0;
    border-top: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-layout-border-color);
}

.w-modal,
.modal {
    position: fixed;
    inset: 0;
    z-index: var(--weline-layout-z-index-modal);
    display: none;
    overflow: auto;
    padding: clamp(1rem, 4vw, 2.5rem);
    background: color-mix(in srgb, var(--weline-theme-text) 45%, transparent);
}

.w-modal.w-open,
.w-modal.show,
.modal.show {
    display: grid;
    place-items: center;
}

.w-modal-dialog,
.modal-dialog {
    width: min(100%, 640px);
    margin: auto;
}

.w-modal-content,
.modal-content {
    overflow: hidden;
    border: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-layout-border-color);
    border-radius: var(--weline-layout-radius-lg);
    background: var(--weline-layout-surface-primary);
    color: var(--weline-layout-text-primary);
    box-shadow: var(--weline-component-shadow-lg);
}

.w-modal-sm { max-width: var(--size-modal-sm); }
.w-modal-md { max-width: var(--size-modal-md); }
.w-modal-lg { max-width: var(--size-modal-lg); }
.w-modal-xl { max-width: var(--size-modal-xl); }

.w-modal-header,
.modal-header,
.w-modal-footer,
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--weline-layout-spacing-md);
    padding: var(--weline-space-4) var(--weline-space-5);
    background: var(--weline-layout-surface-secondary);
}

.w-modal-header,
.modal-header {
    border-bottom: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-layout-border-color);
}

.w-modal-footer,
.modal-footer {
    border-top: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-layout-border-color);
}

.w-modal-title,
.modal-title {
    margin: 0;
    color: var(--weline-layout-text-primary);
    font-size: var(--weline-layout-font-size-lg);
    font-weight: var(--weline-layout-font-weight-semibold);
}

.w-modal-body,
.modal-body {
    padding: var(--weline-space-5);
}

.w-modal-close,
.close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-icon-lg);
    height: var(--size-icon-lg);
    padding: 0;
    border: 0;
    border-radius: var(--weline-layout-radius-sm);
    background: transparent;
    color: var(--weline-layout-text-secondary);
    cursor: pointer;
}

.w-modal-close:hover,
.close:hover {
    background: var(--weline-layout-surface-tertiary);
    color: var(--weline-layout-text-primary);
}

.w-loading,
.loading-component {
    position: fixed;
    inset: 0;
    z-index: calc(var(--weline-layout-z-index-modal) + 1);
}

.w-loading-overlay,
.loading-overlay {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--weline-theme-text) 35%, transparent);
}

.w-loading-content,
.loading-content {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 100%;
    place-items: center;
    gap: var(--weline-layout-spacing-md);
    color: var(--weline-component-primary-text);
}

.w-loader,
.loader {
    position: relative;
    width: var(--control-height-xl);
    height: var(--control-height-xl);
}

.w-loader-outter,
.loader-outter,
.w-loader-inner,
.loader-inner {
    position: absolute;
    inset: 0;
    border-radius: var(--weline-layout-radius-full);
}

.w-loader-outter,
.loader-outter {
    border: var(--weline-theme-loader-border-width) solid color-mix(in srgb, var(--weline-component-primary) 24%, transparent);
}

.w-loader-inner,
.loader-inner {
    border: var(--weline-theme-loader-border-width) solid transparent;
    border-top-color: var(--weline-component-primary);
    animation: w-spin 0.75s linear infinite;
}

.w-loading-text,
.loading-text {
    color: var(--weline-layout-surface-primary);
    font-size: var(--weline-layout-font-size-sm);
    font-weight: var(--weline-layout-font-weight-medium);
}

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

/* ========== 通用工具类 ========== */
/* ========== Surface / Text 语义抽象（禁止裸 span 依赖页面默认黑字） ========== */
:root {
    --w-surface-fg: var(--weline-theme-text);
    --w-surface-fg-muted: var(--weline-theme-text-muted);
    --w-surface-fg-subtle: var(--weline-theme-text-secondary);
    --w-surface-bg: var(--weline-theme-surface);
}

[data-surface="default"],
.w-surface {
    --w-surface-fg: var(--weline-theme-text);
    --w-surface-fg-muted: var(--weline-theme-text-muted);
    --w-surface-fg-subtle: var(--weline-theme-text-secondary);
    --w-surface-bg: var(--weline-theme-surface);
    color: var(--w-surface-fg);
    background-color: var(--w-surface-bg);
}

[data-surface="muted"],
.w-surface-muted {
    --w-surface-fg: var(--weline-theme-text);
    --w-surface-fg-muted: var(--weline-theme-text-muted);
    --w-surface-fg-subtle: var(--weline-theme-text-secondary);
    --w-surface-bg: var(--weline-theme-surface-muted);
    color: var(--w-surface-fg);
    background-color: var(--w-surface-bg);
}

[data-surface="inverse"],
.w-surface-inverse {
    --w-surface-fg: var(--weline-theme-text-on-dark);
    --w-surface-fg-muted: var(--weline-theme-text-on-dark-muted);
    --w-surface-fg-subtle: var(--weline-theme-text-on-dark-muted);
    --w-surface-bg: var(--color-bg-chrome, var(--weline-theme-bg-dark, var(--color-bg-dark-secondary)));
    color: var(--w-surface-fg);
}

[data-surface="body"],
.w-surface-body {
    --w-surface-fg: var(--weline-theme-body-text);
    --w-surface-fg-muted: var(--weline-theme-body-text-muted);
    --w-surface-fg-subtle: var(--weline-theme-body-text-secondary);
    --w-surface-bg: var(--weline-chrome-bg-primary, var(--weline-theme-surface));
    color: var(--w-surface-fg);
    background-color: var(--w-surface-bg);
}

/* Light panels only — split mega-menu chrome stays on-dark (sidebar labels). */
[data-surface="body"].header-category-panel:not(.is-megamenu),
[data-surface="body"].categories-overflow-panel:not(.is-megamenu),
[data-surface="body"].nav-more-menu,
[data-surface="body"].sidebar-category-panel,
.w-surface-body.header-category-panel:not(.is-megamenu),
.w-surface-body.categories-overflow-panel:not(.is-megamenu),
.w-surface-body.nav-more-menu,
.w-surface-body.sidebar-category-panel {
    --w-surface-fg: var(--weline-theme-body-text, var(--color-text-primary));
    --w-surface-fg-muted: var(--weline-theme-body-text-muted, #666666);
    --w-surface-fg-subtle: var(--weline-theme-body-text-secondary, #565959);
    color: var(--weline-theme-body-text, var(--color-text-primary));
}

[data-surface="body"].header-category-panel.is-megamenu,
[data-surface="body"].categories-overflow-panel.is-megamenu,
.w-surface-body.header-category-panel.is-megamenu,
.w-surface-body.categories-overflow-panel.is-megamenu {
    --w-surface-fg: var(--weline-theme-text-on-dark, #ffffff);
    --w-surface-fg-muted: var(--weline-theme-text-on-dark-muted, #dddddd);
    --w-surface-fg-subtle: var(--weline-theme-text-on-dark-muted, #dddddd);
    color: var(--weline-theme-text-on-dark, #ffffff);
    background-color: var(--weline-chrome-bg-dark-secondary, #232f3e);
}

[data-surface="body"].header-category-panel a.category-link,
[data-surface="body"].categories-overflow-panel a.category-link,
.w-surface-body.header-category-panel a.category-link,
.w-surface-body.categories-overflow-panel a.category-link {
    color: var(--weline-theme-body-text, var(--color-text-primary));
}

[data-surface="body"].header-category-panel a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item),
.w-surface-body.header-category-panel a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item),
[data-surface="body"].categories-overflow-panel a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item),
.w-surface-body.categories-overflow-panel a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item) {
    color: var(--weline-theme-body-text, var(--color-text-primary));
}

[data-surface="body"].header-category-panel a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item):hover,
.w-surface-body.header-category-panel a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item):hover,
[data-surface="body"].categories-overflow-panel a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item):hover,
.w-surface-body.categories-overflow-panel a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item):hover {
    color: var(--weline-theme-body-link-hover, var(--weline-theme-primary));
}

[data-surface="body"].header-category-panel a.mega-menu-sidebar-item,
[data-surface="body"].header-category-panel a.w-mega-menu__sidebar-item,
[data-surface="body"].categories-overflow-panel a.mega-menu-sidebar-item,
[data-surface="body"].categories-overflow-panel a.w-mega-menu__sidebar-item,
.w-surface-body.header-category-panel a.mega-menu-sidebar-item,
.w-surface-body.header-category-panel a.w-mega-menu__sidebar-item,
.w-surface-body.categories-overflow-panel a.mega-menu-sidebar-item,
.w-surface-body.categories-overflow-panel a.w-mega-menu__sidebar-item {
    color: var(--weline-theme-mega-menu-top-hover-color, var(--weline-chrome-mega-menu-top-hover-color, #ffffff));
}

[data-surface="body"].header-category-panel a.mega-menu-sidebar-item:hover,
[data-surface="body"].header-category-panel a.mega-menu-sidebar-item.is-active,
[data-surface="body"].header-category-panel a.mega-menu-sidebar-item:focus-visible,
[data-surface="body"].header-category-panel a.w-mega-menu__sidebar-item:hover,
[data-surface="body"].header-category-panel a.w-mega-menu__sidebar-item.is-active,
[data-surface="body"].header-category-panel a.w-mega-menu__sidebar-item:focus-visible,
[data-surface="body"].categories-overflow-panel a.mega-menu-sidebar-item:hover,
[data-surface="body"].categories-overflow-panel a.mega-menu-sidebar-item.is-active,
[data-surface="body"].categories-overflow-panel a.mega-menu-sidebar-item:focus-visible,
[data-surface="body"].categories-overflow-panel a.w-mega-menu__sidebar-item:hover,
[data-surface="body"].categories-overflow-panel a.w-mega-menu__sidebar-item.is-active,
[data-surface="body"].categories-overflow-panel a.w-mega-menu__sidebar-item:focus-visible,
.w-surface-body.header-category-panel a.mega-menu-sidebar-item:hover,
.w-surface-body.header-category-panel a.mega-menu-sidebar-item.is-active,
.w-surface-body.header-category-panel a.mega-menu-sidebar-item:focus-visible,
.w-surface-body.header-category-panel a.w-mega-menu__sidebar-item:hover,
.w-surface-body.header-category-panel a.w-mega-menu__sidebar-item.is-active,
.w-surface-body.header-category-panel a.w-mega-menu__sidebar-item:focus-visible,
.w-surface-body.categories-overflow-panel a.mega-menu-sidebar-item:hover,
.w-surface-body.categories-overflow-panel a.mega-menu-sidebar-item.is-active,
.w-surface-body.categories-overflow-panel a.mega-menu-sidebar-item:focus-visible,
.w-surface-body.categories-overflow-panel a.w-mega-menu__sidebar-item:hover,
.w-surface-body.categories-overflow-panel a.w-mega-menu__sidebar-item.is-active,
.w-surface-body.categories-overflow-panel a.w-mega-menu__sidebar-item:focus-visible {
    color: var(--weline-theme-mega-menu-top-hover-color, var(--weline-chrome-mega-menu-top-hover-color, #ffffff));
}

[data-surface="body"] a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item),
.w-surface-body a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item) {
    color: var(--weline-theme-body-link);
}

/* Chrome (header/footer) stays on-dark; layouts must not wrap them in body surface,
   but keep a higher-specificity reset if a page shell still does. */
[data-surface="body"] .weline-header a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item),
.w-surface-body .weline-header a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item),
[data-surface="body"] .weline-footer a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item),
.w-surface-body .weline-footer a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item) {
    color: inherit;
}

[data-surface="body"] a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item):hover,
.w-surface-body a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item):hover {
    color: var(--weline-theme-body-link-hover);
}

[data-surface="body"] .weline-header a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item):hover,
.w-surface-body .weline-header a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item):hover,
[data-surface="body"] .weline-footer a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item):hover,
.w-surface-body .weline-footer a:not([class*="w-button"]):not(.btn):not(.mega-menu-sidebar-item):not(.w-mega-menu__sidebar-item):hover {
    color: inherit;
}

[data-surface="inverse"] a:not([class*="w-button"]):not(.btn):not(.mini-cart-drawer__btn):not(.header-logo__link),
/* Paper-drawer tabs/type switchers own primary/muted ink — do not inherit inverse cream. */
[data-surface="inverse"] button:not(.w-button):not(.btn):not(.search-submit-btn):not(.search-category-facade):not(.search-type-facade):not(.search-type-trigger):not(.mini-cart-drawer__extras-tab):not(.b2b-mini-cart-type-option),
[data-surface="inverse"] .w-icon,
[data-surface="inverse"] svg {
    color: inherit;
}

[data-surface="inverse"] svg {
    stroke: currentColor;
}

/* Flag SVGs carry authored fill colors; inverse icon stroke must not recolor stars. */
[data-surface="inverse"] .w-language-switcher__flag svg,
.w-surface-inverse .w-language-switcher__flag svg {
    stroke: none;
    color: unset;
}

.w-text {
    color: var(--w-surface-fg, var(--weline-theme-text));
}

.w-text-muted {
    color: var(--w-surface-fg-muted, var(--weline-theme-text-muted));
}

.w-text-subtle {
    color: var(--w-surface-fg-subtle, var(--weline-theme-text-secondary));
}

.w-text-inverse {
    color: var(--weline-theme-text-on-dark);
}

.w-text-inverse-muted {
    color: var(--weline-theme-text-on-dark-muted);
}

/* ========== Weline default theme utilities (w-*) ========== */
.w-text-primary { color: var(--weline-theme-primary); }
.w-text-secondary { color: var(--weline-theme-text-secondary); }
.w-text-success { color: var(--weline-theme-success); }
.w-text-warning { color: var(--weline-theme-warning); }
.w-text-danger { color: var(--weline-theme-danger); }
.w-text-info { color: var(--weline-theme-info); }

.w-bg-primary {
    background: var(--weline-theme-primary);
    color: var(--weline-theme-on-primary);
}

.w-bg-primary-subtle {
    background: var(--weline-theme-primary-subtle);
    color: var(--weline-theme-primary-text-emphasis);
}

.w-bg-surface { background: var(--weline-theme-surface); }
.w-bg-subtle { background: var(--weline-theme-surface-subtle); }
.w-bg-muted { background: var(--weline-theme-surface-muted); }
.w-bg-success-subtle { background: var(--weline-theme-success-subtle); }
.w-bg-warning-subtle { background: var(--weline-theme-warning-subtle); }
.w-bg-danger-subtle { background: var(--weline-theme-danger-subtle); }
.w-bg-info-subtle { background: var(--weline-theme-info-subtle); }

.w-border {
    border: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-theme-border-color);
}

.w-border-0 { border-width: var(--weline-theme-border-width-0); }
.w-border-2 { border-width: var(--weline-theme-border-width-2); }
.w-border-top { border-top: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-theme-border-color); }
.w-border-bottom { border-bottom: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-theme-border-color); }
.w-border-primary { border-color: var(--weline-theme-primary); }
.w-border-primary-subtle { border-color: var(--weline-theme-primary-border-subtle); }
.w-border-secondary-subtle { border-color: var(--weline-theme-secondary-border-subtle); }
.w-border-success-subtle { border-color: var(--weline-theme-success-border-subtle); }
.w-border-warning-subtle { border-color: var(--weline-theme-warning-border-subtle); }
.w-border-danger-subtle { border-color: var(--weline-theme-danger-border-subtle); }
.w-border-strong { border-color: var(--weline-theme-border-color-strong); }
.w-border-subtle { border-color: var(--weline-theme-border-color-subtle); }

.w-rounded-sm { border-radius: var(--weline-theme-radius-sm); }
.w-rounded { border-radius: var(--weline-theme-radius-md); }
.w-rounded-lg { border-radius: var(--weline-theme-radius-lg); }
.w-rounded-xl { border-radius: var(--weline-theme-radius-xl); }
.w-rounded-full { border-radius: var(--weline-theme-radius-full); }

.w-shadow-xs { box-shadow: var(--weline-theme-shadow-xs); }
.w-shadow-sm { box-shadow: var(--weline-theme-shadow-sm); }
.w-shadow { box-shadow: var(--weline-theme-shadow-md); }
.w-shadow-lg { box-shadow: var(--weline-theme-shadow-lg); }

.w-focus-ring:focus-visible {
    outline: 0;
    box-shadow: var(--weline-theme-focus-ring);
}

.skip-to-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    z-index: calc(var(--weline-z-overlay, 900) + 1);
}

.skip-to-content:focus-visible {
    width: auto;
    height: auto;
    margin: 0;
    left: 50%;
    top: var(--weline-space-2, 0.5rem);
    transform: translateX(-50%);
    padding: var(--weline-space-2) var(--weline-space-4);
    overflow: visible;
    clip: auto;
    clip-path: none;
    background: var(--weline-theme-primary);
    color: var(--weline-theme-on-primary);
    text-decoration: none;
    border-radius: var(--weline-theme-radius-md);
}

/* Visual-property transitions stay on interactive components: a universal rule
 * also delays inherited Alert text through every nested descendant. */

/* ========== 通用清除浮动 ========== */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ========== 通用隐藏类 ========== */
.hidden {
    display: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* =============================================
   极细滚动条样式 - 全局应用
   ============================================= */

/* Webkit 浏览器（Chrome, Safari, Edge） */
::-webkit-scrollbar {
    width: var(--scrollbar-width, 4px);
    height: var(--scrollbar-width, 4px);
}

::-webkit-scrollbar-track {
    background: var(--weline-component-scrollbar-track);
    border-radius: var(--weline-theme-radius-md);
}

::-webkit-scrollbar-thumb {
    background: var(--weline-component-scrollbar-thumb);
    border-radius: var(--weline-theme-radius-md);
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--weline-component-scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox 浏览器 */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--weline-component-scrollbar-thumb) var(--weline-component-scrollbar-track);
}

/* ========== 主题地址级联选择 ========== */
.w-address {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--weline-layout-spacing-md);
    margin: var(--weline-layout-spacing-xs) 0;
    font-family: inherit;
}

.w-address--single {
    display: block;
}

.w-address__multi {
    display: flex;
    flex-direction: column;
    gap: var(--weline-layout-spacing-md);
    grid-column: 1 / -1;
    margin: var(--weline-layout-spacing-xs) 0;
    color: var(--weline-theme-text);
}

.w-address__multi-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--weline-layout-spacing-xs);
    align-items: center;
    min-height: 1.5rem;
}

.w-address__multi-chips .w-badge {
    cursor: pointer;
}

.w-address.w-address--multi {
    margin: 0;
}

.w-address__multi .w-address__control {
    background: var(--weline-theme-surface);
    color: var(--weline-theme-text);
}

.w-address__multi .w-address__menu {
    background: var(--weline-theme-surface);
    color: var(--weline-theme-text);
    border-color: var(--weline-theme-border-color);
}

.w-address__multi .w-address__option {
    color: var(--weline-theme-text);
}

.w-address__multi .w-address__option:hover,
.w-address__multi .w-address__option.is-active {
    background: var(--weline-theme-primary-subtle);
    color: var(--weline-theme-primary-text-emphasis);
}

.w-address__multi .w-address__empty,
.w-address__multi .w-address__menu-hint {
    color: var(--weline-theme-text-muted);
}

.w-address__multi .w-address__group-label {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--weline-space-2) var(--spacing-2_5) var(--weline-space-1);
    margin: 0;
    font-size: var(--weline-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--weline-theme-text-muted);
    background: color-mix(in srgb, var(--weline-theme-surface, #fff) 92%, var(--weline-theme-primary, #333) 8%);
    border-bottom: 1px solid color-mix(in srgb, var(--weline-theme-border-color, #ddd) 70%, transparent);
}

.w-address__item {
    position: relative;
    min-width: 0;
    --weline-theme-field-label-bg: var(--weline-theme-surface, var(--weline-theme-surface-raised, #fff));
}

.w-address__item.w-field {
    gap: 0;
}

/* Legacy .w-address__label no longer used; cascade labels are .w-field__label. */

.w-address__control {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--weline-control-height, var(--weline-theme-control-height));
    border: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-theme-border-strong, var(--weline-theme-border-color));
    border-radius: var(--weline-radius-md, var(--weline-theme-radius-md, 8px));
    background: var(--weline-theme-surface);
    box-shadow: var(--theme-input-shadow, none);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.w-address__control:focus-within {
    border-color: var(--weline-theme-primary);
    box-shadow: var(--weline-theme-focus-ring);
}

.w-address__control.is-disabled {
    background: var(--weline-theme-surface-subtle);
    color: var(--weline-theme-text-muted);
    cursor: not-allowed;
}

.w-address__control.is-loading {
    pointer-events: none;
    background: var(--weline-theme-surface-subtle);
}

.w-address__control.is-embargoed {
    border-color: color-mix(in srgb, var(--weline-theme-danger, #c0392b) 70%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--weline-theme-danger, #c0392b) 35%, transparent);
}

.w-address__option.is-embargoed {
    color: var(--weline-theme-danger, #c0392b);
}

.w-address__control.is-loading .w-address__arrow {
    visibility: hidden;
}

.w-address__control.is-loading::after {
    content: '';
    position: absolute;
    inset-inline-end: 12px;
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, var(--weline-theme-primary) 24%, transparent);
    border-top-color: var(--weline-theme-primary);
    border-radius: 50%;
    animation: w-spin 0.75s linear infinite;
}

.w-address__input {
    width: 100%;
    min-width: 0;
    height: var(--weline-component-control-height);
    padding-block: 0;
    padding-inline: var(--weline-space-4) var(--weline-space-9);
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--weline-theme-text);
    font: inherit;
}

.w-address__input::placeholder {
    color: var(--weline-theme-text-muted);
}

.w-address__arrow {
    position: absolute;
    inset-inline-end: 12px;
    color: var(--weline-theme-text-muted);
    font-size: var(--weline-font-size-xs);
    pointer-events: none;
}

.w-address__menu {
    position: absolute;
    z-index: 1080;
    top: calc(100% + var(--weline-space-2));
    inset-inline: 0;
    display: none;
    max-height: min(260px, 70vh);
    overflow: auto;
    padding: var(--weline-space-2);
    border: var(--weline-theme-border-width) var(--weline-theme-border-style) var(--weline-theme-border-color);
    border-radius: var(--weline-theme-radius-lg);
    background: var(--weline-theme-surface);
    box-shadow: var(--weline-theme-shadow-lg);
}

/*
 * Portal + 智能边界（Weline.UI.floating）：菜单挂到 body 后，禁止再沿用
 * 「相对 .w-address__item 的 absolute + inset-inline:0」，否则 top:100% / 左右拉满
 * 会压过 --w-floating-*，洲标签条会掉到视口底部。
 */
.w-address__menu[data-w-float-surface],
.w-address__menu[data-multi-menu],
.w-address__menu[data-w-floating-portal],
.w-address__menu[data-w-floating-positioned] {
    position: fixed;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    inset-inline: auto;
    margin: 0;
}

.w-address__menu[data-multi-menu]:not([hidden]),
.w-address__menu[data-w-float-surface]:not([hidden]) {
    display: block;
}

.w-address__menu[data-w-floating-positioned] {
    top: max(var(--w-floating-top, 0px), var(--w-floating-viewport-top, .5rem));
    left: max(var(--w-floating-left, 0px), var(--w-floating-viewport-left, .5rem));
    inline-size: var(--w-floating-inline-size, auto);
    max-inline-size: min(
        var(--w-floating-max-inline-size, calc(100dvw - 1rem)),
        calc(
            var(--w-floating-viewport-right, calc(100dvw - .5rem))
            - max(var(--w-floating-left, 0px), var(--w-floating-viewport-left, .5rem))
        )
    );
    max-block-size: min(
        260px,
        var(--w-floating-max-block-size, 70vh),
        calc(
            var(--w-floating-viewport-bottom, calc(100dvh - .5rem))
            - max(var(--w-floating-top, 0px), var(--w-floating-viewport-top, .5rem))
        )
    );
    transform-origin: var(--w-floating-transform-origin, top);
}

.w-address__menu[data-w-floating-positioned="pending"] {
    visibility: hidden;
}

.w-address__menu .w-address__group-label {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--weline-space-2) var(--spacing-2_5) var(--weline-space-1);
    margin: 0;
    font-size: var(--weline-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--weline-theme-text-muted);
    background: color-mix(in srgb, var(--weline-theme-surface, #fff) 92%, var(--weline-theme-primary, #333) 8%);
    border-bottom: 1px solid color-mix(in srgb, var(--weline-theme-border-color, #ddd) 70%, transparent);
}

.w-address__menu.has-group-jump .w-address__group-label {
    position: static;
    top: auto;
}

.w-address__menu .w-address__group-jump {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: var(--weline-space-1);
    padding: var(--weline-space-1) var(--weline-space-1) var(--weline-space-2);
    margin: 0 0 var(--spacing-px);
    background: var(--weline-theme-surface);
    border-bottom: 1px solid color-mix(in srgb, var(--weline-theme-border-color, #ddd) 70%, transparent);
}

.w-address__menu .w-address__group-jump-chip {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--weline-theme-border-color, #ddd) 80%, transparent);
    border-radius: var(--weline-theme-radius-full);
    padding: var(--spacing-0_5) var(--weline-space-2);
    background: transparent;
    color: var(--weline-theme-text-muted);
    font: inherit;
    font-size: var(--weline-font-size-xs);
    line-height: 1.4;
    cursor: pointer;
}

.w-address__menu .w-address__group-jump-chip:hover,
.w-address__menu .w-address__group-jump-chip.is-active {
    border-color: var(--weline-theme-primary);
    color: var(--weline-theme-primary-text-emphasis, var(--weline-theme-primary));
    background: var(--weline-theme-primary-subtle);
}

.w-address__menu .w-address__group-empty {
    padding: var(--weline-space-2) var(--spacing-2_5) var(--spacing-2_5);
    color: var(--weline-theme-text-muted);
    font-size: var(--weline-layout-font-size-sm);
}

.w-address__item.is-open .w-address__menu {
    display: block;
}

.w-address__option {
    display: block;
    width: 100%;
    padding: var(--weline-space-2) var(--spacing-2_5);
    border: 0;
    border-radius: var(--weline-theme-radius-md);
    background: transparent;
    color: var(--weline-theme-text);
    cursor: pointer;
    font: inherit;
    text-align: start;
}

.w-address__option:hover,
.w-address__option.is-active {
    background: var(--weline-theme-primary-subtle);
    color: var(--weline-theme-primary-text-emphasis);
}

.w-address__empty {
    padding: var(--weline-space-3);
    color: var(--weline-theme-text-muted);
    font-size: var(--weline-layout-font-size-sm);
    text-align: center;
}

@media (max-width: 720px) {
    .w-address {
        grid-template-columns: 1fr;
    }
}

/* ========== Visual builder primitives ========== */
.w-builder-section {
    width: min(100%, var(--weline-layout-content-max-width));
    max-width: var(--w-builder-max-width, var(--weline-layout-content-max-width));
    min-height: var(--w-builder-min-height, 0);
    margin-inline: auto;
    padding: var(--w-builder-padding, var(--weline-layout-spacing-2xl) var(--weline-layout-content-padding-inline));
    color: var(--w-builder-color, var(--weline-layout-text-primary));
    background-color: var(--w-builder-bg, transparent);
    background-image: var(--w-builder-bg-image, none);
    background-position: var(--w-builder-bg-position, center);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: var(--w-builder-radius, 0);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.w-builder-section[data-vertical-align="center"] {
    justify-content: center;
}

.w-builder-section[data-vertical-align="bottom"] {
    justify-content: flex-end;
}

.w-builder-section--subtle {
    border-radius: var(--w-builder-radius, var(--weline-layout-radius-xl));
    background-color: var(--w-builder-bg, var(--weline-layout-surface-secondary));
}

.w-builder-section--hero {
    padding-block: clamp(3rem, 8vw, 6rem);
}

.w-builder-section--cta {
    border-radius: var(--w-builder-radius, var(--weline-layout-radius-xl));
    background:
        var(--w-builder-bg-image, none),
        radial-gradient(circle at 15% 12%, rgba(var(--weline-theme-primary-rgb), 0.16), transparent 28%),
        linear-gradient(135deg, var(--w-builder-bg, var(--weline-layout-surface-primary)), var(--weline-theme-primary-subtle));
    box-shadow: var(--weline-component-shadow-md);
}

.w-builder-card {
    min-height: var(--w-builder-min-height, auto);
    color: var(--w-builder-color, var(--weline-layout-text-primary));
    background-color: var(--w-builder-bg, var(--weline-layout-surface-primary));
    background-image: var(--w-builder-bg-image, none);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: var(--w-builder-radius, var(--weline-layout-radius-lg));
    border: var(--weline-theme-border-width) solid var(--weline-theme-border-color);
    overflow: hidden;
}

.w-builder-card--soft {
    background-color: var(--w-builder-bg, var(--weline-layout-surface-secondary));
    border-color: transparent;
}

.w-builder-card--outline {
    background-color: var(--w-builder-bg, transparent);
    border-color: var(--weline-theme-border-color-strong);
}

.w-builder-card--solid {
    background-color: var(--w-builder-bg, var(--weline-component-primary));
    color: var(--w-builder-color, var(--weline-theme-on-primary));
}

.w-builder-card .w-builder-card-header,
.w-builder-card .w-builder-card-body,
.w-builder-card .w-builder-card-footer {
    padding-inline: var(--w-builder-card-padding, var(--weline-layout-spacing-lg));
}

.w-builder-card .w-builder-card-header {
    padding-block: var(--w-builder-card-padding, var(--weline-layout-spacing-lg)) var(--weline-layout-spacing-sm);
    background: transparent;
}

.w-builder-card .w-builder-card-body {
    padding-block: var(--weline-layout-spacing-md);
}

.w-builder-card .w-builder-card-footer {
    padding-block: var(--weline-layout-spacing-sm) var(--w-builder-card-padding, var(--weline-layout-spacing-lg));
    background: transparent;
}

.w-builder-card-title,
.w-builder-card-subtitle {
    color: inherit;
}

.w-builder-shadow-none {
    box-shadow: none;
}

.w-builder-shadow-sm {
    box-shadow: var(--weline-component-shadow-sm);
}

.w-builder-shadow-md {
    box-shadow: var(--weline-component-shadow-md);
}

.w-builder-shadow-lg {
    box-shadow: var(--weline-component-shadow-lg);
}

.w-builder-section__header {
    display: grid;
    gap: var(--weline-layout-spacing-sm);
    max-width: 760px;
    margin-block-end: var(--weline-layout-spacing-xl);
}

.w-builder-section__eyebrow,
.w-builder-text__eyebrow {
    margin: 0;
    color: var(--weline-component-primary);
    font-size: var(--weline-layout-font-size-sm);
    font-weight: var(--weline-layout-font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.w-builder-section__title,
.w-builder-text__title {
    margin: 0;
    color: var(--w-builder-color, var(--weline-layout-text-primary));
    font-family: var(--weline-layout-font-family-display);
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: var(--w-builder-title-weight, var(--weline-layout-font-weight-bold));
    line-height: var(--weline-layout-line-height-tight);
}

.w-builder-section__description,
.w-builder-text__body {
    margin: 0;
    color: var(--weline-layout-text-secondary);
    font-size: var(--weline-layout-font-size-lg);
    line-height: var(--w-builder-line-height, var(--weline-layout-line-height-relaxed));
}

.w-builder-section__body {
    min-width: 0;
}

.w-builder-grid {
    display: grid;
    grid-template-columns: repeat(var(--w-builder-grid-columns, 2), minmax(min(100%, var(--w-builder-grid-min, 220px)), 1fr));
    gap: var(--w-builder-grid-gap, var(--weline-layout-spacing-md));
    align-items: var(--w-builder-grid-align, stretch);
    justify-items: var(--w-builder-grid-justify, stretch);
    padding: var(--w-builder-padding, 0);
    background-color: var(--w-builder-bg, transparent);
    min-width: 0;
}

.w-builder-text {
    display: grid;
    gap: var(--weline-layout-spacing-sm);
    max-width: var(--w-builder-text-max, 760px);
    color: var(--w-builder-color, inherit);
}

.w-builder-text--sm .w-builder-text__title {
    font-size: var(--weline-layout-font-size-2xl);
}

.w-builder-text--sm .w-builder-text__body {
    font-size: var(--weline-layout-font-size-base);
}

.w-builder-text--lg .w-builder-text__title {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

.w-builder-text--lg .w-builder-text__body {
    font-size: var(--weline-layout-font-size-xl);
}

.w-builder-align-center {
    text-align: center;
}

.w-builder-align-center .w-builder-section__header,
.w-builder-align-center.w-builder-text {
    margin-inline: auto;
}

.w-builder-align-end {
    text-align: end;
}

.w-builder-align-end .w-builder-section__header,
.w-builder-align-end.w-builder-text {
    margin-inline-start: auto;
}

.w-builder-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--w-builder-button-radius, var(--weline-theme-radius-md));
}

.w-builder-button-custom {
    background: var(--w-builder-button-bg);
    color: var(--w-builder-button-color);
}

.w-builder-button.w-builder-align-center {
    margin-inline: auto;
}

.w-builder-button.w-builder-align-end {
    margin-inline-start: auto;
}

.w-builder-button-full {
    display: flex;
    width: 100%;
}

.w-builder-align-center.w-builder-image {
    margin-inline: auto;
}

.w-builder-align-end.w-builder-image {
    margin-inline-start: auto;
}

.w-builder-image {
    max-width: var(--w-builder-image-max, 100%);
    margin: 0;
    overflow: hidden;
    border-radius: var(--w-builder-radius, var(--weline-layout-radius-lg));
    background: var(--weline-layout-surface-secondary);
    color: var(--weline-layout-text-secondary);
}

.w-builder-image img,
.w-builder-image__placeholder {
    display: block;
    width: 100%;
}

.w-builder-image img {
    height: 100%;
    object-fit: cover;
    object-position: var(--w-builder-object-position, center);
}

.w-builder-image--contain img {
    object-fit: contain;
}

.w-builder-image--1x1 img,
.w-builder-image--1x1 .w-builder-image__placeholder {
    aspect-ratio: 1 / 1;
}

.w-builder-image--4x3 img,
.w-builder-image--4x3 .w-builder-image__placeholder {
    aspect-ratio: 4 / 3;
}

.w-builder-image--16x9 img,
.w-builder-image--16x9 .w-builder-image__placeholder {
    aspect-ratio: 16 / 9;
}

.w-builder-image--21x9 img,
.w-builder-image--21x9 .w-builder-image__placeholder {
    aspect-ratio: 21 / 9;
}

.w-builder-image--auto img {
    height: auto;
}

.w-builder-image__link {
    display: block;
    color: inherit;
}

.w-builder-image__placeholder {
    display: grid;
    min-height: 180px;
    place-items: center;
    border: var(--weline-theme-border-width) dashed var(--weline-theme-border-color-strong);
    color: var(--weline-layout-text-tertiary);
    font-size: var(--weline-layout-font-size-sm);
}

.w-builder-image__caption {
    padding: var(--weline-layout-spacing-sm) var(--weline-layout-spacing-md);
    color: var(--weline-layout-text-secondary);
    font-size: var(--weline-layout-font-size-sm);
}

.w-builder-divider {
    display: flex;
    align-items: center;
    gap: var(--weline-layout-spacing-md);
    width: min(100%, var(--w-builder-divider-max, 100%));
    margin-block: var(--w-builder-divider-spacing, var(--weline-layout-spacing-lg));
    margin-inline: auto;
    color: var(--weline-layout-text-tertiary);
}

.w-builder-divider::before,
.w-builder-divider::after {
    content: "";
    flex: 1 1 auto;
    border-top: var(--w-builder-divider-thickness, var(--weline-theme-border-width)) solid var(--w-builder-divider-color, var(--weline-layout-border-color));
}

.w-builder-divider-label-start::before {
    flex: 0 0 min(72px, 20%);
}

.w-builder-divider-label-end::after {
    flex: 0 0 min(72px, 20%);
}

.w-builder-divider--dashed::before,
.w-builder-divider--dashed::after {
    border-top-style: dashed;
}

.w-builder-divider--dotted::before,
.w-builder-divider--dotted::after {
    border-top-style: dotted;
}

.w-builder-divider__label {
    flex: 0 0 auto;
    font-size: var(--weline-layout-font-size-sm);
    font-weight: var(--weline-layout-font-weight-medium);
}

.w-builder-spacer {
    display: block;
    height: var(--w-builder-spacer-size, var(--weline-layout-spacing-xl));
}

.w-builder-spacer--xs {
    --w-builder-spacer-size: var(--weline-layout-spacing-sm);
}

.w-builder-spacer--sm {
    --w-builder-spacer-size: var(--weline-layout-spacing-md);
}

.w-builder-spacer--md {
    --w-builder-spacer-size: var(--weline-layout-spacing-xl);
}

.w-builder-spacer--lg {
    --w-builder-spacer-size: var(--weline-layout-spacing-2xl);
}

.w-builder-spacer--xl {
    --w-builder-spacer-size: var(--weline-layout-spacing-3xl);
}

.w-builder-slot-placeholder {
    display: grid;
    min-height: 92px;
    place-items: center;
    padding: var(--weline-layout-spacing-md);
    border: var(--weline-theme-border-width-2) dashed var(--weline-theme-primary-border-subtle);
    border-radius: var(--weline-layout-radius-lg);
    background: var(--weline-theme-primary-subtle);
    color: var(--weline-theme-primary-text-emphasis);
    font-size: var(--weline-layout-font-size-sm);
}

.w-builder-slot-placeholder.compact {
    min-height: var(--weline-component-control-height-xl, var(--control-height-xl));
}

@media (max-width: 720px) {
    .w-builder-section {
        padding-block: var(--weline-layout-spacing-xl);
    }

    .w-builder-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================
   Global Bootstrap adapter (the only component layer; Bootstrap 5.1 + 5.3)
   ======================================================================== */
:root {
    --bs-body-color: var(--weline-theme-text);
    --bs-body-color-rgb: var(--weline-theme-text-rgb);
    --bs-body-bg: var(--weline-theme-surface-canvas);
    --bs-body-bg-rgb: var(--weline-theme-surface-canvas-rgb);
    --bs-emphasis-color: var(--weline-theme-text);
    --bs-emphasis-color-rgb: var(--weline-theme-emphasis-rgb);
    --bs-secondary-color: var(--weline-theme-text-secondary);
    --bs-secondary-bg: var(--weline-theme-surface-subtle);
    --bs-tertiary-color: var(--weline-theme-text-muted);
    --bs-tertiary-bg: var(--weline-theme-surface-muted);
    --bs-border-color: var(--weline-theme-border-color);
    --bs-border-color-translucent: var(--weline-theme-border-color-subtle);
    --bs-heading-color: var(--weline-theme-text);
    --bs-link-color: var(--weline-theme-link);
    --bs-link-hover-color: var(--weline-theme-link-hover);
    --bs-primary: var(--weline-theme-primary);
    --bs-primary-rgb: var(--weline-theme-primary-rgb);
    --bs-secondary-rgb: var(--weline-theme-secondary-rgb);
    --bs-primary-text-emphasis: var(--weline-theme-primary-text-emphasis);
    --bs-primary-bg-subtle: var(--weline-theme-primary-subtle);
    --bs-primary-border-subtle: var(--weline-theme-primary-border-subtle);
    --bs-secondary: var(--weline-theme-secondary);
    --bs-secondary-text-emphasis: var(--weline-theme-secondary-text-emphasis);
    --bs-secondary-bg-subtle: var(--weline-theme-secondary-subtle);
    --bs-secondary-border-subtle: var(--weline-theme-secondary-border-subtle);
    --bs-success: var(--weline-theme-success);
    --bs-success-rgb: var(--weline-theme-success-rgb);
    --bs-success-text-emphasis: var(--weline-theme-success-text-emphasis);
    --bs-success-bg-subtle: var(--weline-theme-success-subtle);
    --bs-success-border-subtle: var(--weline-theme-success-border-subtle);
    --bs-warning: var(--weline-theme-warning);
    --bs-warning-rgb: var(--weline-theme-warning-rgb);
    --bs-warning-text-emphasis: var(--weline-theme-warning-text-emphasis);
    --bs-warning-bg-subtle: var(--weline-theme-warning-subtle);
    --bs-warning-border-subtle: var(--weline-theme-warning-border-subtle);
    --bs-danger: var(--weline-theme-danger);
    --bs-danger-rgb: var(--weline-theme-danger-rgb);
    --bs-danger-text-emphasis: var(--weline-theme-danger-text-emphasis);
    --bs-danger-bg-subtle: var(--weline-theme-danger-subtle);
    --bs-danger-border-subtle: var(--weline-theme-danger-border-subtle);
    --bs-info: var(--weline-theme-info);
    --bs-info-rgb: var(--weline-theme-info-rgb);
    --bs-info-text-emphasis: var(--weline-theme-info-text-emphasis);
    --bs-info-bg-subtle: var(--weline-theme-info-subtle);
    --bs-info-border-subtle: var(--weline-theme-info-border-subtle);
    --bs-focus-ring-color: var(--weline-theme-focus-ring-color);
    --bs-form-valid-color: var(--weline-theme-success-text-emphasis);
    --bs-form-valid-border-color: var(--weline-theme-success);
    --bs-form-valid-focus-color: var(--weline-theme-success-focus-ring-color);
    --bs-form-invalid-color: var(--weline-theme-danger-text-emphasis);
    --bs-form-invalid-border-color: var(--weline-theme-danger);
    --bs-form-invalid-focus-color: var(--weline-theme-danger-focus-ring-color);
}

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body {
    color: var(--weline-theme-body-text, var(--color-text-primary));
    background-color: var(--weline-theme-surface-canvas);
}

.card { --bs-card-bg: var(--weline-theme-surface); --bs-card-color: var(--weline-theme-text); --bs-card-border-color: var(--weline-theme-border-color); }
.modal-content { --bs-modal-bg: var(--weline-theme-surface); --bs-modal-color: var(--weline-theme-text); --bs-modal-border-color: var(--weline-theme-border-color); }
.offcanvas { --bs-offcanvas-bg: var(--weline-theme-surface); --bs-offcanvas-color: var(--weline-theme-text); --bs-offcanvas-border-color: var(--weline-theme-border-color); }
.dropdown-menu { --bs-dropdown-bg: var(--weline-theme-surface); --bs-dropdown-color: var(--weline-theme-text); --bs-dropdown-border-color: var(--weline-theme-border-color); --bs-dropdown-link-color: var(--weline-theme-text); --bs-dropdown-link-hover-color: var(--weline-theme-text); --bs-dropdown-link-hover-bg: var(--weline-theme-surface-subtle); --bs-dropdown-link-active-bg: var(--weline-theme-primary); }
.accordion { --bs-accordion-color: var(--weline-theme-text); --bs-accordion-bg: var(--weline-theme-surface); --bs-accordion-border-color: var(--weline-theme-border-color); --bs-accordion-btn-color: var(--weline-theme-text); --bs-accordion-btn-bg: var(--weline-theme-surface); --bs-accordion-active-color: var(--weline-theme-on-primary); --bs-accordion-active-bg: var(--weline-theme-primary); }
.table { --bs-table-color: var(--weline-theme-text); --bs-table-bg: var(--weline-theme-surface); --bs-table-border-color: var(--weline-theme-border-color); --bs-table-striped-bg: var(--weline-theme-surface-subtle); --bs-table-hover-bg: var(--weline-theme-surface-muted); }
.list-group { --bs-list-group-color: var(--weline-theme-text); --bs-list-group-bg: var(--weline-theme-surface); --bs-list-group-border-color: var(--weline-theme-border-color); --bs-list-group-action-hover-color: var(--weline-theme-text); --bs-list-group-action-hover-bg: var(--weline-theme-surface-subtle); --bs-list-group-active-color: var(--weline-theme-on-primary); --bs-list-group-active-bg: var(--weline-theme-primary); --bs-list-group-active-border-color: var(--weline-theme-primary); }
.form-control, .form-select { --bs-form-control-bg: var(--weline-theme-surface); --bs-form-control-color: var(--weline-theme-text); --bs-form-control-border-color: var(--weline-theme-border-color); --bs-form-control-disabled-bg: var(--weline-theme-surface-muted); }
.input-group { --bs-input-group-addon-bg: var(--weline-theme-surface-subtle); --bs-input-group-addon-color: var(--weline-theme-text); --bs-input-group-addon-border-color: var(--weline-theme-border-color); }
.nav { --bs-nav-link-color: var(--weline-theme-link); --bs-nav-link-hover-color: var(--weline-theme-link-hover); }
.nav-tabs { --bs-nav-tabs-border-color: var(--weline-theme-border-color); --bs-nav-tabs-link-active-color: var(--weline-theme-text); --bs-nav-tabs-link-active-bg: var(--weline-theme-surface); --bs-nav-tabs-link-active-border-color: var(--weline-theme-border-color) var(--weline-theme-border-color) var(--weline-theme-surface); }
.pagination { --bs-pagination-color: var(--weline-theme-link); --bs-pagination-bg: var(--weline-theme-surface); --bs-pagination-border-color: var(--weline-theme-border-color); --bs-pagination-hover-color: var(--weline-theme-link-hover); --bs-pagination-hover-bg: var(--weline-theme-surface-subtle); --bs-pagination-hover-border-color: var(--weline-theme-border-color); --bs-pagination-active-bg: var(--weline-theme-primary); --bs-pagination-active-border-color: var(--weline-theme-primary); --bs-pagination-disabled-color: var(--weline-theme-text-muted); --bs-pagination-disabled-bg: var(--weline-theme-surface-muted); }
.alert { --bs-alert-color: var(--weline-theme-primary-text-emphasis); --bs-alert-bg: var(--weline-theme-primary-subtle); --bs-alert-border-color: var(--weline-theme-primary); }
.badge { --bs-badge-color: var(--weline-theme-on-primary); --bs-badge-bg: var(--weline-theme-primary); }
.toast { --bs-toast-color: var(--weline-theme-text); --bs-toast-bg: var(--weline-theme-surface); --bs-toast-border-color: var(--weline-theme-border-color); --bs-toast-header-color: var(--weline-theme-text); --bs-toast-header-bg: var(--weline-theme-surface-subtle); --bs-toast-header-border-color: var(--weline-theme-border-color); }
.popover { --bs-popover-bg: var(--weline-theme-surface); --bs-popover-body-color: var(--weline-theme-text); --bs-popover-header-bg: var(--weline-theme-surface-subtle); --bs-popover-header-color: var(--weline-theme-text); --bs-popover-border-color: var(--weline-theme-border-color); }

.card, .modal-content, .offcanvas, .dropdown-menu, .accordion-item, .list-group-item, .toast, .popover { color: var(--weline-theme-text); background-color: var(--weline-theme-surface); border-color: var(--weline-theme-border-color); }
.card-header, .card-footer, .accordion-button, .input-group-text, .toast-header, .popover-header { color: var(--weline-theme-text); background-color: var(--weline-theme-surface-subtle); border-color: var(--weline-theme-border-color); }
.dropdown-item, .nav-tabs .nav-link { color: var(--weline-theme-text-secondary); }
.dropdown-item:hover, .dropdown-item:focus, .list-group-item-action:hover, .list-group-item-action:focus, .nav-tabs .nav-link:hover, .pagination .page-link:hover { color: var(--weline-theme-text); background-color: var(--weline-theme-surface-muted); border-color: var(--weline-theme-border-color); }
.accordion-button:not(.collapsed), .dropdown-item.active, .dropdown-item:active, .list-group-item.active, .nav-pills .nav-link.active, .nav-pills .show > .nav-link, .pagination .page-item.active .page-link, .form-check-input:checked { color: var(--weline-theme-on-primary); background-color: var(--weline-theme-primary); border-color: var(--weline-theme-primary); }
/* Bootstrap may load after the Theme stylesheet; keep dropdown interaction states
 * attached to semantic tokens in either color mode. */
.dropdown-item:hover, .dropdown-item:focus { color: var(--weline-theme-text); background-color: var(--weline-theme-surface-muted); border-color: var(--weline-theme-border-color); }
.dropdown-item.active, .dropdown-item:active { color: var(--weline-theme-on-primary); background-color: var(--weline-theme-primary); border-color: var(--weline-theme-primary); }
.accordion-button::after { filter: none; }
html[data-theme="dark"] .accordion-button::after, html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.table, .table > :not(caption) > * > * { color: var(--weline-theme-text); border-color: var(--weline-theme-border-color); }
.table > :not(caption) > * > * { background-color: transparent; }
.table-striped > tbody > tr:nth-of-type(odd) > *, .table-hover > tbody > tr:hover > * { color: var(--weline-theme-text); background-color: var(--weline-theme-surface-subtle); }
.form-control, .form-select, .input-group-text, .form-check-input { color: var(--weline-theme-text); background-color: var(--weline-theme-surface); border-color: var(--weline-theme-border-color); }
.input-group-text { background-color: var(--weline-theme-surface-subtle); }
.form-control::placeholder { color: var(--weline-theme-text-muted); opacity: 1; }
.form-select, .form-select option, select { color-scheme: inherit; }
.form-control:disabled, .form-select:disabled, .form-check-input:disabled, .btn:disabled, .btn.disabled, .dropdown-item.disabled, .list-group-item.disabled, .nav-link.disabled, .page-link.disabled, .page-item.disabled .page-link { color: var(--weline-theme-text-muted); background-color: var(--weline-theme-surface-muted); border-color: var(--weline-theme-border-color); opacity: 1; pointer-events: none; }
.form-control:focus, .form-select:focus, .form-check-input:focus { color: var(--weline-theme-text); background-color: var(--weline-theme-surface); border-color: var(--weline-theme-focus-outline); box-shadow: var(--weline-theme-focus-ring); outline: 2px solid var(--weline-theme-focus-outline); outline-offset: 1px; }
.btn:focus-visible, .page-link:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible, .accordion-button:focus-visible { outline: 2px solid var(--weline-theme-focus-outline); outline-offset: 2px; box-shadow: var(--weline-theme-focus-ring); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--weline-theme-text); background-color: var(--weline-theme-surface); border-color: var(--weline-theme-border-color) var(--weline-theme-border-color) var(--weline-theme-surface); }
.pagination .page-link { color: var(--weline-theme-link); background-color: var(--weline-theme-surface); border-color: var(--weline-theme-border-color); }
.alert-primary, .w-alert-primary { color: var(--weline-theme-primary-text-emphasis); background-color: var(--weline-theme-primary-subtle); border-color: var(--weline-theme-primary); }
.alert-secondary, .w-alert-secondary { color: var(--weline-theme-secondary-text-emphasis); background-color: var(--weline-theme-secondary-subtle); border-color: var(--weline-theme-secondary); }
.alert-success, .w-alert-success { color: var(--weline-theme-success-text-emphasis); background-color: var(--weline-theme-success-subtle); border-color: var(--weline-theme-success); }
.alert-warning, .w-alert-warning { color: var(--weline-theme-warning-text-emphasis); background-color: var(--weline-theme-warning-subtle); border-color: var(--weline-theme-warning); }
.alert-danger, .w-alert-danger { color: var(--weline-theme-danger-text-emphasis); background-color: var(--weline-theme-danger-subtle); border-color: var(--weline-theme-danger); }
.alert-info, .w-alert-info { color: var(--weline-theme-info-text-emphasis); background-color: var(--weline-theme-info-subtle); border-color: var(--weline-theme-info); }
.alert .alert-link, .w-alert .alert-link { color: inherit; }
.badge, .bg-primary { color: var(--weline-theme-on-primary); background-color: var(--weline-theme-primary); }
.bg-secondary { color: var(--weline-theme-on-secondary); background-color: var(--weline-theme-secondary); }
.bg-success { color: var(--weline-theme-on-success); background-color: var(--weline-theme-success); }
.bg-warning { color: var(--weline-theme-on-warning); background-color: var(--weline-theme-warning); }
.bg-danger { color: var(--weline-theme-on-danger); background-color: var(--weline-theme-danger); }
.bg-info { color: var(--weline-theme-on-info); background-color: var(--weline-theme-info); }
.badge.badge-primary { color: var(--weline-theme-primary-text-emphasis); background-color: var(--weline-theme-primary-subtle); }
.badge.badge-secondary { color: var(--weline-theme-secondary-text-emphasis); background-color: var(--weline-theme-secondary-subtle); }
.badge.badge-success { color: var(--weline-theme-success-text-emphasis); background-color: var(--weline-theme-success-subtle); }
.badge.badge-warning { color: var(--weline-theme-warning-text-emphasis); background-color: var(--weline-theme-warning-subtle); }
.badge.badge-danger { color: var(--weline-theme-danger-text-emphasis); background-color: var(--weline-theme-danger-subtle); }
.badge.badge-info { color: var(--weline-theme-info-text-emphasis); background-color: var(--weline-theme-info-subtle); }
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before { border-top-color: var(--weline-theme-border-color); }
.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after { border-top-color: var(--weline-theme-surface); }
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before { border-left-color: var(--weline-theme-border-color); }
.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after { border-left-color: var(--weline-theme-surface); }
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before { border-bottom-color: var(--weline-theme-border-color); }
.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after { border-bottom-color: var(--weline-theme-surface); }
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before { border-right-color: var(--weline-theme-border-color); }
.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after { border-right-color: var(--weline-theme-surface); }
.modal-header, .modal-footer, .offcanvas-header { border-color: var(--weline-theme-border-color); }
.table-active > * > *, .table > tbody > tr[aria-selected="true"] > * { color: var(--weline-theme-text); background-color: var(--weline-theme-primary-subtle); border-color: var(--weline-theme-primary-border-subtle); }
.btn-primary:hover, .btn-primary:focus-visible { color: var(--weline-theme-on-primary); background-color: var(--weline-theme-primary-hover); border-color: var(--weline-theme-primary-hover); }
.btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle { color: var(--weline-theme-on-primary); background-color: var(--weline-theme-primary-active); border-color: var(--weline-theme-primary-active); }
.btn-primary:disabled, .btn-primary.disabled { color: var(--weline-theme-text-muted); background-color: var(--weline-theme-primary-subtle); border-color: var(--weline-theme-primary-border-subtle); }
.btn-secondary { color: var(--weline-component-secondary-text); background-color: var(--weline-component-secondary); border-color: var(--weline-component-secondary); }
.btn-secondary:hover, .btn-secondary:focus-visible { color: var(--weline-component-secondary-text); background-color: var(--weline-component-secondary-hover); border-color: var(--weline-component-secondary-hover); }
.btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle { color: var(--weline-component-secondary-text); background-color: var(--weline-component-secondary-active); border-color: var(--weline-component-secondary-active); }
.btn-success:hover, .btn-success:focus-visible { color: var(--weline-theme-on-success); background-color: var(--weline-theme-success-hover); border-color: var(--weline-theme-success-hover); }
.btn-success:active, .btn-success.active, .show > .btn-success.dropdown-toggle { color: var(--weline-theme-on-success); background-color: var(--weline-theme-success-active); border-color: var(--weline-theme-success-active); }
.btn-warning:hover, .btn-warning:focus-visible { color: var(--weline-theme-on-warning); background-color: var(--weline-theme-warning-hover); border-color: var(--weline-theme-warning-hover); }
.btn-warning:active, .btn-warning.active, .show > .btn-warning.dropdown-toggle { color: var(--weline-theme-on-warning); background-color: var(--weline-theme-warning-active); border-color: var(--weline-theme-warning-active); }
.btn-danger:hover, .btn-danger:focus-visible { color: var(--weline-theme-on-danger); background-color: var(--weline-theme-danger-hover); border-color: var(--weline-theme-danger-hover); }
.btn-danger:active, .btn-danger.active, .show > .btn-danger.dropdown-toggle { color: var(--weline-theme-on-danger); background-color: var(--weline-theme-danger-active); border-color: var(--weline-theme-danger-active); }
.btn-info:hover, .btn-info:focus-visible { color: var(--weline-theme-on-info); background-color: var(--weline-theme-info-hover); border-color: var(--weline-theme-info-hover); }
.btn-info:active, .btn-info.active, .show > .btn-info.dropdown-toggle { color: var(--weline-theme-on-info); background-color: var(--weline-theme-info-active); border-color: var(--weline-theme-info-active); }
.btn-outline-primary:hover, .btn-outline-primary:active { color: var(--weline-theme-on-primary); background-color: var(--weline-theme-primary); border-color: var(--weline-theme-primary); }
.btn-outline-secondary { color: var(--weline-theme-secondary); background-color: transparent; border-color: var(--weline-theme-secondary); }
.btn-outline-secondary:hover, .btn-outline-secondary:active { color: var(--weline-theme-on-secondary); background-color: var(--weline-theme-secondary); border-color: var(--weline-theme-secondary); }
.btn-outline-success { color: var(--weline-theme-success); background-color: transparent; border-color: var(--weline-theme-success); }
.btn-outline-warning { color: var(--weline-theme-warning); background-color: transparent; border-color: var(--weline-theme-warning); }
.btn-outline-danger { color: var(--weline-theme-danger); background-color: transparent; border-color: var(--weline-theme-danger); }
.btn-outline-info { color: var(--weline-theme-info); background-color: transparent; border-color: var(--weline-theme-info); }
.btn-outline-success:hover, .btn-outline-success:active { color: var(--weline-theme-on-success); background-color: var(--weline-theme-success); border-color: var(--weline-theme-success); }
.btn-outline-warning:hover, .btn-outline-warning:active { color: var(--weline-theme-on-warning); background-color: var(--weline-theme-warning); border-color: var(--weline-theme-warning); }
.btn-outline-danger:hover, .btn-outline-danger:active { color: var(--weline-theme-on-danger); background-color: var(--weline-theme-danger); border-color: var(--weline-theme-danger); }
.btn-outline-info:hover, .btn-outline-info:active { color: var(--weline-theme-on-info); background-color: var(--weline-theme-info); border-color: var(--weline-theme-info); }
.btn-secondary:disabled, .btn-secondary.disabled, .btn-success:disabled, .btn-success.disabled, .btn-warning:disabled, .btn-warning.disabled, .btn-danger:disabled, .btn-danger.disabled, .btn-info:disabled, .btn-info.disabled { color: var(--weline-theme-text-muted); background-color: var(--weline-theme-surface-muted); border-color: var(--weline-theme-border-color); }
/* Weline button variant state adapter: keep semantic variants above the generic .w-btn:hover rule. */
:is(.w-btn-primary, .w-button-primary, .button-primary) { color: var(--weline-theme-on-primary); background-color: var(--weline-theme-primary); background-image: none; border-color: var(--weline-theme-primary); }
:is(.w-btn-primary, .w-button-primary, .button-primary):hover, :is(.w-btn-primary, .w-button-primary, .button-primary):focus-visible { color: var(--weline-theme-on-primary); background-color: var(--weline-theme-primary-hover); background-image: none; border-color: var(--weline-theme-primary-hover); }
:is(.w-btn-primary, .w-button-primary, .button-primary):active, :is(.w-btn-primary, .w-button-primary, .button-primary).active, .show > :is(.w-btn-primary, .w-button-primary, .button-primary).dropdown-toggle { color: var(--weline-theme-on-primary); background-color: var(--weline-theme-primary-active); background-image: none; border-color: var(--weline-theme-primary-active); }
:is(.w-btn-secondary, .w-button-secondary, .button-secondary) { color: var(--weline-theme-on-secondary); background-color: var(--weline-theme-secondary); background-image: none; border-color: var(--weline-theme-secondary); }
:is(.w-btn-secondary, .w-button-secondary, .button-secondary):hover, :is(.w-btn-secondary, .w-button-secondary, .button-secondary):focus-visible { color: var(--weline-theme-on-secondary); background-color: var(--weline-theme-secondary-hover); background-image: none; border-color: var(--weline-theme-secondary-hover); }
:is(.w-btn-secondary, .w-button-secondary, .button-secondary):active, :is(.w-btn-secondary, .w-button-secondary, .button-secondary).active, .show > :is(.w-btn-secondary, .w-button-secondary, .button-secondary).dropdown-toggle { color: var(--weline-theme-on-secondary); background-color: var(--weline-theme-secondary-active); background-image: none; border-color: var(--weline-theme-secondary-active); }
:is(.w-btn-success, .w-button-success, .button-success) { color: var(--weline-theme-on-success); background-color: var(--weline-theme-success); background-image: none; border-color: var(--weline-theme-success); }
:is(.w-btn-success, .w-button-success, .button-success):hover, :is(.w-btn-success, .w-button-success, .button-success):focus-visible { color: var(--weline-theme-on-success); background-color: var(--weline-theme-success-hover); background-image: none; border-color: var(--weline-theme-success-hover); }
:is(.w-btn-success, .w-button-success, .button-success):active, :is(.w-btn-success, .w-button-success, .button-success).active, .show > :is(.w-btn-success, .w-button-success, .button-success).dropdown-toggle { color: var(--weline-theme-on-success); background-color: var(--weline-theme-success-active); background-image: none; border-color: var(--weline-theme-success-active); }
:is(.w-btn-warning, .w-button-warning, .button-warning) { color: var(--weline-theme-on-warning); background-color: var(--weline-theme-warning); background-image: none; border-color: var(--weline-theme-warning); }
:is(.w-btn-warning, .w-button-warning, .button-warning):hover, :is(.w-btn-warning, .w-button-warning, .button-warning):focus-visible { color: var(--weline-theme-on-warning); background-color: var(--weline-theme-warning-hover); background-image: none; border-color: var(--weline-theme-warning-hover); }
:is(.w-btn-warning, .w-button-warning, .button-warning):active, :is(.w-btn-warning, .w-button-warning, .button-warning).active, .show > :is(.w-btn-warning, .w-button-warning, .button-warning).dropdown-toggle { color: var(--weline-theme-on-warning); background-color: var(--weline-theme-warning-active); background-image: none; border-color: var(--weline-theme-warning-active); }
:is(.w-btn-danger, .w-button-danger, .button-danger) { color: var(--weline-theme-on-danger); background-color: var(--weline-theme-danger); background-image: none; border-color: var(--weline-theme-danger); }
:is(.w-btn-danger, .w-button-danger, .button-danger):hover, :is(.w-btn-danger, .w-button-danger, .button-danger):focus-visible { color: var(--weline-theme-on-danger); background-color: var(--weline-theme-danger-hover); background-image: none; border-color: var(--weline-theme-danger-hover); }
:is(.w-btn-danger, .w-button-danger, .button-danger):active, :is(.w-btn-danger, .w-button-danger, .button-danger).active, .show > :is(.w-btn-danger, .w-button-danger, .button-danger).dropdown-toggle { color: var(--weline-theme-on-danger); background-color: var(--weline-theme-danger-active); background-image: none; border-color: var(--weline-theme-danger-active); }
:is(.w-btn-info, .w-button-info, .button-info) { color: var(--weline-theme-on-info); background-color: var(--weline-theme-info); background-image: none; border-color: var(--weline-theme-info); }
:is(.w-btn-info, .w-button-info, .button-info):hover, :is(.w-btn-info, .w-button-info, .button-info):focus-visible { color: var(--weline-theme-on-info); background-color: var(--weline-theme-info-hover); background-image: none; border-color: var(--weline-theme-info-hover); }
:is(.w-btn-info, .w-button-info, .button-info):active, :is(.w-btn-info, .w-button-info, .button-info).active, .show > :is(.w-btn-info, .w-button-info, .button-info).dropdown-toggle { color: var(--weline-theme-on-info); background-color: var(--weline-theme-info-active); background-image: none; border-color: var(--weline-theme-info-active); }
:is(.w-btn-primary, .w-button-primary, .button-primary, .w-btn-secondary, .w-button-secondary, .button-secondary, .w-btn-success, .w-button-success, .button-success, .w-btn-warning, .w-button-warning, .button-warning, .w-btn-danger, .w-button-danger, .button-danger, .w-btn-info, .w-button-info, .button-info):is(:disabled, .w-disabled, .disabled) { color: var(--weline-theme-text-muted); background-color: var(--weline-theme-surface-muted); background-image: none; border-color: var(--weline-theme-border-color); opacity: 0.62; }
.text-bg-primary { color: var(--weline-theme-on-primary); background-color: var(--weline-theme-primary); }
.text-bg-secondary { color: var(--weline-theme-on-secondary); background-color: var(--weline-theme-secondary); }
.text-bg-success { color: var(--weline-theme-on-success); background-color: var(--weline-theme-success); }
.text-bg-warning { color: var(--weline-theme-on-warning); background-color: var(--weline-theme-warning); }
.text-bg-danger { color: var(--weline-theme-on-danger); background-color: var(--weline-theme-danger); }
.text-bg-info { color: var(--weline-theme-on-info); background-color: var(--weline-theme-info); }
html[data-theme="dark"] .form-select { appearance: auto; -webkit-appearance: auto; background-image: none; padding-inline-end: 0.75rem; }
@media (prefers-color-scheme: dark) { html[data-theme-preference="system"]:not([data-theme="light"]) { color-scheme: dark; } :root[data-theme-preference="system"]:not([data-theme="light"]) .form-select { appearance: auto; -webkit-appearance: auto; background-image: none; padding-inline-end: 0.75rem; } :root[data-theme-preference="system"]:not([data-theme="light"]) .accordion-button::after, :root[data-theme-preference="system"]:not([data-theme="light"]) .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }

/*
 * Inverse / on-dark storefront surfaces (WO-UI-CONTRAST-INVERSE) — architecture only.
 * theme.css owns the surface mechanism (`[data-surface=inverse]` / `.w-surface-inverse`).
 * Style shells (Commerce about/faq/policy heroes, shopper toast, chrome-commerce) live in
 * their own style CSS or layout <style>; do NOT register .commerce-* here.
 *
 * Dark heroes must set data-surface="inverse" (or .w-surface-inverse) and rebind
 * tokens with non-zero specificity + hard on-dark fallbacks — never chain through
 * --color-text-light (circular once rebound).
 */
[data-surface="inverse"],
.w-surface-inverse {
    --_inverse-text: var(--color-text-on-dark, #f7f4ef);
    --_inverse-muted: var(--color-text-on-dark-muted, #d4cfc5);
    --weline-theme-text: var(--_inverse-text);
    --weline-theme-text-secondary: var(--_inverse-muted);
    --weline-theme-text-muted: var(--_inverse-muted);
    --weline-theme-body-text: var(--_inverse-text);
    --weline-theme-body-text-secondary: var(--_inverse-muted);
    --weline-theme-body-text-heading: var(--_inverse-text);
    --weline-layout-text-primary: var(--_inverse-text);
    --weline-layout-text-secondary: var(--_inverse-muted);
    --bs-heading-color: var(--_inverse-text);
    --bs-body-color: var(--_inverse-text);
    --color-text: var(--_inverse-text);
    --color-text-primary: var(--_inverse-text);
    --color-text-secondary: var(--_inverse-muted);
    --color-text-light: var(--_inverse-text);
    --color-text-light-secondary: var(--_inverse-muted);
    --color-link: var(--color-primary-light, #d4786a);
    --weline-theme-link: var(--color-link);
    color: var(--_inverse-text);
}

[data-surface="inverse"] :is(h1, h2, h3, h4, h5, h6),
.w-surface-inverse :is(h1, h2, h3, h4, h5, h6) {
    color: var(--_inverse-text, var(--color-text-on-dark, #f7f4ef));
}

[data-surface="inverse"] :is(p, li, small, span),
.w-surface-inverse :is(p, li, small, span) {
    color: var(--_inverse-muted, var(--color-text-on-dark-muted, #d4cfc5));
}

/* Light search chip / raised menus / chrome actions: inverse span rule must not paint labels on-dark.
 * Light paper belts may keep data-surface=inverse for raised drawers but remount belt `color` to ink;
 * Account/Cart/currency labels live in spans and must inherit that surface color (not _inverse-muted). */
[data-surface="inverse"] .header-search-form :is(p, li, small, span),
[data-surface="inverse"] .w-search-form :is(p, li, small, span),
[data-surface="inverse"] .search-suggestions :is(p, li, small, span),
[data-surface="inverse"] .w-search-suggestions :is(p, li, small, span),
[data-surface="inverse"] .header-actions :is(p, li, small, span),
[data-surface="inverse"] .header-user-area :is(p, li, small, span),
[data-surface="inverse"] .header-top-bar-locale :is(p, li, small, span),
[data-surface="inverse"] .w-language-switcher__menu :is(p, li, small, span),
[data-surface="inverse"] .w-currency-switcher__menu :is(p, li, small, span),
[data-surface="inverse"] .w-scope-switcher__menu :is(p, li, small, span, a, div),
[data-surface="inverse"] .w-scope-switcher__panel :is(p, li, small, span, a, div),
[data-surface="inverse"] .w-dialog[data-language-request-modal] :is(p, li, small, span, label, h2),
[data-surface="inverse"] dialog.w-dialog[data-language-request-modal] :is(p, li, small, span, label, h2),
[data-surface="inverse"] .delivery-panel :is(p, li, small, span, strong, label, button:not(.w-button):not(.btn)),
.w-surface-inverse .header-search-form :is(p, li, small, span),
.w-surface-inverse .w-search-form :is(p, li, small, span),
.w-surface-inverse .search-suggestions :is(p, li, small, span),
.w-surface-inverse .w-search-suggestions :is(p, li, small, span),
.w-surface-inverse .header-actions :is(p, li, small, span),
.w-surface-inverse .header-user-area :is(p, li, small, span),
.w-surface-inverse .header-top-bar-locale :is(p, li, small, span),
.w-surface-inverse .w-language-switcher__menu :is(p, li, small, span),
.w-surface-inverse .w-currency-switcher__menu :is(p, li, small, span),
.w-surface-inverse .w-scope-switcher__menu :is(p, li, small, span, a, div),
.w-surface-inverse .w-scope-switcher__panel :is(p, li, small, span, a, div),
.w-surface-inverse .w-dialog[data-language-request-modal] :is(p, li, small, span, label, h2),
.w-surface-inverse dialog.w-dialog[data-language-request-modal] :is(p, li, small, span, label, h2),
.w-surface-inverse .delivery-panel :is(p, li, small, span, strong, label, button:not(.w-button):not(.btn)) {
    color: inherit;
}

/* Theme UI buttons keep own on-primary / outline ink under paper remap. */
[data-surface="inverse"] .delivery-panel .w-button,
.w-surface-inverse .delivery-panel .w-button {
    color: var(--weline-theme-on-primary);
}
[data-surface="inverse"] .delivery-panel .w-button[data-variant="outline"],
.w-surface-inverse .delivery-panel .w-button[data-variant="outline"] {
    color: var(--weline-theme-primary);
    background: transparent;
}
[data-surface="inverse"] .delivery-panel .w-button[data-variant="outline"][data-tone="neutral"],
.w-surface-inverse .delivery-panel .w-button[data-variant="outline"][data-tone="neutral"] {
    color: var(--weline-theme-text);
    border-color: var(--weline-theme-border-strong);
    background: transparent;
}

/*
 * Raised light panels nested under inverse chrome (architecture side-effect).
 * Header belt remaps text tokens to on-dark; account menu, mini-cart, white search
 * chip, language switcher menu, scope switcher panel, language-request dialog,
 * and checkout delivery-panel sit on surface-raised and must restore paper ink
 * or copy vanishes (WO-UI-CONTRAST-INVERSE).
 */
[data-surface="inverse"] .account-dropdown,
[data-surface="inverse"] .mini-cart-drawer,
[data-surface="inverse"] .header-search-form,
[data-surface="inverse"] .w-search-form,
[data-surface="inverse"] .search-suggestions,
[data-surface="inverse"] .w-search-suggestions,
[data-surface="inverse"] .w-language-switcher__menu,
[data-surface="inverse"] .w-scope-switcher__menu,
[data-surface="inverse"] .w-scope-switcher__panel,
[data-surface="inverse"] .w-dialog[data-language-request-modal],
[data-surface="inverse"] dialog.w-dialog[data-language-request-modal],
[data-surface="inverse"] .delivery-panel,
.w-surface-inverse .account-dropdown,
.w-surface-inverse .mini-cart-drawer,
.w-surface-inverse .header-search-form,
.w-surface-inverse .w-search-form,
.w-surface-inverse .search-suggestions,
.w-surface-inverse .w-search-suggestions,
.w-surface-inverse .w-language-switcher__menu,
.w-surface-inverse .w-scope-switcher__menu,
.w-surface-inverse .w-scope-switcher__panel,
.w-surface-inverse .w-dialog[data-language-request-modal],
.w-surface-inverse dialog.w-dialog[data-language-request-modal],
.w-surface-inverse .delivery-panel {
    --_paper-text: #0f1111;
    --_paper-muted: #565959;
    --_inverse-text: var(--_paper-text);
    --_inverse-muted: var(--_paper-muted);
    --weline-theme-text: var(--_paper-text);
    --weline-theme-text-secondary: var(--_paper-muted);
    --weline-theme-text-muted: var(--_paper-muted);
    --weline-theme-text-subtle: var(--_paper-muted);
    --weline-theme-body-text: var(--_paper-text);
    --weline-theme-body-text-secondary: var(--_paper-muted);
    --weline-theme-body-text-muted: var(--_paper-muted);
    --weline-theme-body-text-heading: var(--_paper-text);
    --weline-layout-text-primary: var(--_paper-text);
    --weline-layout-text-secondary: var(--_paper-muted);
    --bs-heading-color: var(--_paper-text);
    --bs-body-color: var(--_paper-text);
    --color-text: var(--_paper-text);
    --color-text-primary: var(--_paper-text);
    --color-text-secondary: var(--_paper-muted);
    --color-text-muted: var(--_paper-muted);
    --color-text-placeholder: var(--_paper-muted);
    --weline-chrome-text-primary: var(--_paper-text);
    --weline-chrome-text-secondary: var(--_paper-muted);
    --weline-chrome-text-muted: var(--_paper-muted);
    --weline-theme-color-text: var(--_paper-text);
    --weline-theme-color-text-muted: var(--_paper-muted);
    --w-surface-fg: var(--_paper-text);
    --w-surface-fg-muted: var(--_paper-muted);
    --w-surface-fg-subtle: var(--_paper-muted);
    color: var(--_paper-text);
    color-scheme: light;
}

/* frontend/colors/_dark.css */
/**
 * 色系：暗色主题颜色
 * 
 * 暗色主题的颜色覆盖文件
 * 字段
 * @meta.name {default="暗色主题颜色",name="暗色主题颜色",description="暗色主题颜色，用于描述色系的名称"}
 * @meta.description {default="暗色主题的颜色覆盖，提供深色背景和浅色文本",name="暗色主题的颜色覆盖，提供深色背景和浅色文本",description="暗色主题的颜色覆盖，提供深色背景和浅色文本，用于描述色系的用途"}
 * @meta.theme {default="dark",name="主题标识",description="主题标识，用于标识该色系对应的主题名称"}
 * @meta.panel {default="color",name="panel",description="panel"}
 * @meta.disk_kind {default="colors",name="disk_kind",description="disk_kind"}
 * @meta.palette_role {default="mode",name="palette_role",description="palette_role"}
 */

[data-theme="dark"] {
    /* 文本色 - 需要变亮 */
    --color-text-primary: #e5e5e5;
    --color-text-secondary: #a6a6a6;
    --color-text-tertiary: #767676;
    --color-text-disabled: #4a4a4a;
    --color-text-dark: #f1f5f9;
    --color-text-muted: #cbd5e1;
    --color-text-placeholder: #94a3b8;
    --color-text-light: #f1f5f9;
    --color-text-light-secondary: #cbd5e1;

    /* 背景色 - 需要变暗；canvas=页面 body，与菜单 surface(primary) 分离 */
    --color-bg-canvas: #020617;
    --weline-chrome-body-bg: var(--color-bg-canvas);
    --weline-theme-canvas: var(--color-bg-canvas);
    --weline-theme-body-bg: var(--weline-chrome-body-bg, var(--color-bg-canvas));
    --color-bg-primary: #1a1a1a;
    --color-bg-secondary: #2d2d2d;
    --color-bg-tertiary: #3a3a3a;
    --color-bg-dark: #0f1419;
    --color-bg-dark-secondary: #1e293b;
    --color-bg-dark-tertiary: #334155;

    /* 边框色 - 需要调整 */
    --color-border-default: #4a4a4a;
    --color-border-emphasis: #6a6a6a;
    --color-border-focus: #3b82f6;
    /* 暗色下使用蓝色焦点色 */
    --color-border-light: rgba(255, 255, 255, 0.1);

    /* 强调色（蓝色系，用于交互元素） */
    --color-accent: #3b82f6;
    --color-accent-hover: #60a5fa;
    --color-accent-light: rgba(59, 130, 246, 0.15);
    --color-accent-medium: rgba(59, 130, 246, 0.2);
    --color-accent-dark: rgba(59, 130, 246, 0.25);

    /* 功能色 - 可能需要调整 */
    --color-success: #34ce57;
    /* 暗色下更亮的成功色 */
    --color-warning: #ffc107;
    --color-error: #f44336;
    /* 暗色下更亮的错误色 */
    --color-error-hover: #ff5252;
    --color-error-light: rgba(244, 67, 54, 0.15);
    --color-info: #17a2b8;

    /* 品牌色通常保持不变 */
    /* --color-primary: #f0c14b; */
    /* 使用默认值 */

    /* 滚动条色系（暗色主题） */
    --scrollbar-thumb: #8590a5;
    --scrollbar-thumb-hover: #a2adb7;
    --scrollbar-track: transparent;

    /* 商品标签色 */
    --color-product-label-new-bg: #14261a;
    --color-product-label-new-text: #9fd4a8;
    --color-product-label-sale-bg: #3f1d2b;
    --color-product-label-sale-text: #fecdd3;
    --weline-product-label-new-bg: var(--color-product-label-new-bg);
    --weline-product-label-new-text: var(--color-product-label-new-text);
    --weline-product-label-sale-bg: var(--color-product-label-sale-bg);
    --weline-product-label-sale-text: var(--color-product-label-sale-text);
}

/* Complete semantic dark palette; every global component consumes these tokens. */
[data-theme="dark"],
[data-theme="dark"] {
    --color-text: #e5e7eb; --color-text-primary: var(--color-text); --color-text-secondary: #cbd5e1; --color-text-tertiary: #94a3b8; --color-text-muted: #94a3b8; --color-text-disabled: #64748b; --color-text-placeholder: #94a3b8; --color-text-inverse: #0f172a;
    --color-bg-canvas: #020617; --weline-chrome-body-bg: var(--color-bg-canvas); --weline-theme-canvas: var(--color-bg-canvas); --weline-theme-body-bg: var(--weline-chrome-body-bg, var(--color-bg-canvas)); --color-bg-primary: #0f172a; --color-bg-secondary: #172033; --color-bg-tertiary: #1e293b; --color-surface: var(--color-bg-primary); --color-surface-subtle: var(--color-bg-secondary); --color-surface-muted: var(--color-bg-tertiary);
    --color-border-default: #64748b; --color-border-subtle: #475569; --color-border-strong: #94a3b8; --color-border-focus: #93c5fd;
    --color-primary: #60a5fa; --color-primary-rgb: 96, 165, 250; --color-primary-hover: #93c5fd; --color-primary-active: #3b82f6; --color-primary-bg-subtle: rgb(96 165 250 / 0.18); --color-primary-border-subtle: #60a5fa; --color-primary-text-emphasis: #bfdbfe; --color-on-primary: #0f172a;
    --color-link: #93c5fd; --color-link-hover: #bfdbfe;
    --color-secondary: #cbd5e1; --color-secondary-rgb: 203, 213, 225; --color-secondary-hover: #e2e8f0; --color-secondary-active: #94a3b8; --color-on-secondary: #0f172a; --color-secondary-bg-subtle: #1e293b; --color-secondary-border-subtle: #64748b; --color-secondary-text-emphasis: #e2e8f0;
    --color-success: #4ade80; --color-success-hover: #86efac; --color-success-active: #22c55e; --color-on-success: #052e16; --color-success-bg-subtle: rgb(74 222 128 / 0.16); --color-success-border-subtle: #22c55e; --color-success-text-emphasis: #86efac;
    --color-warning: #fcd34d; --color-warning-hover: #fde68a; --color-warning-active: #fbbf24; --color-on-warning: #422006; --color-warning-bg-subtle: rgb(252 211 77 / 0.16); --color-warning-border-subtle: #fbbf24; --color-warning-text-emphasis: #fde68a;
    --color-danger: #fda4af; --color-danger-hover: #fecdd3; --color-danger-active: #fb7185; --color-error: var(--color-danger); --color-on-danger: #4c0519; --color-danger-bg-subtle: rgb(253 164 175 / 0.16); --color-danger-border-subtle: #fb7185; --color-danger-text-emphasis: #fecdd3;
    --color-info: #7dd3fc; --color-info-hover: #bae6fd; --color-info-active: #38bdf8; --color-on-info: #082f49; --color-info-bg-subtle: rgb(125 211 252 / 0.16); --color-info-border-subtle: #38bdf8; --color-info-text-emphasis: #bae6fd;
    --color-text-rgb: 229, 231, 235; --color-bg-canvas-rgb: 2, 6, 23; --color-emphasis-rgb: 229, 231, 235;
    --color-success-rgb: 74, 222, 128; --color-warning-rgb: 252, 211, 77; --color-danger-rgb: 253, 164, 175; --color-info-rgb: 125, 211, 252;
    --color-bg-overlay: rgb(2 6 23 / 0.68);
    --color-success-focus-ring-color: rgba(74, 222, 128, 0.32);
    --color-danger-focus-ring-color: rgba(253, 164, 175, 0.32);
    --color-surface-hover: #2d3b4f;
    --color-surface-disabled: #1e293b;
    --color-on-dark-soft: rgba(255, 255, 255, 0.08);
    --color-text-on-dark: #f8fafc;
    --color-text-on-dark-muted: #cbd5e1;
    --color-text-subtle: #94a3b8;
    --color-text-body: #e5e7eb;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --color-link-visited: #c4b5fd;
    --color-primary-light: #93c5fd;
    --color-primary-dark: #3b82f6;
    --color-primary-border: #60a5fa;
    --color-header-bg: #0f172a;
    --color-header-bg-hover: #1e293b;
    --color-header-border-hover: #475569;
    --color-header-shadow: rgba(2, 6, 23, 0.45);
    --color-header-dropdown-shadow: 0 8px 24px rgba(2, 6, 23, 0.55);
    --color-header-focus-ring: rgba(147, 197, 253, 0.35);
    --scrollbar-width: 4px;
    --weline-chrome-text-primary: var(--color-text-primary);
    --weline-chrome-text-secondary: var(--color-text-secondary);
    --weline-chrome-text-muted: var(--color-text-placeholder);
    --weline-chrome-text-light: var(--color-text-light);
    --weline-chrome-text-light-secondary: var(--color-text-light-secondary);
    --weline-chrome-bg-primary: var(--color-bg-primary);
    --weline-chrome-bg-secondary: var(--color-bg-secondary);
    --weline-chrome-bg-tertiary: var(--color-bg-tertiary);
    --weline-chrome-bg-dark: var(--color-bg-dark-secondary);
    --weline-chrome-bg-dark-secondary: var(--color-bg-dark);
    --weline-chrome-border-default: var(--color-border-default);
    --weline-chrome-border-focus: var(--color-border-focus);
    --weline-chrome-primary: var(--color-primary);
    --weline-chrome-primary-light: var(--color-primary-light);
    --weline-chrome-primary-dark: var(--color-primary-dark);
    --weline-chrome-body-link-hover: var(--color-primary);
    --weline-chrome-menu-panel-text-hover: var(--color-primary);
    --shadow-xs: 0 1px 1px rgb(2 6 23 / 0.28); --shadow-sm: 0 3px 10px rgb(2 6 23 / 0.30); --shadow-md: 0 18px 40px rgb(2 6 23 / 0.42); --shadow-lg: 0 28px 60px rgb(2 6 23 / 0.55);
    --focus-ring-width: 3px; --focus-ring-color: #93c5fd; --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
}

/* JavaScript-free system fallback: explicit user choices always take priority. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme-preference]):not([data-theme="light"]),
    :root[data-theme-preference="system"]:not([data-theme="light"]) {
        color-scheme: dark;
        --color-text-dark: #f1f5f9; --color-text-light: #f1f5f9; --color-text-light-secondary: #cbd5e1;
        --color-text: #e5e7eb; --color-text-primary: var(--color-text); --color-text-secondary: #cbd5e1; --color-text-tertiary: #94a3b8; --color-text-muted: #94a3b8; --color-text-disabled: #64748b; --color-text-placeholder: #94a3b8; --color-text-inverse: #0f172a;
        --color-bg-dark: #0f1419; --color-bg-dark-secondary: #1e293b; --color-bg-dark-tertiary: #334155;
        --color-bg-canvas: #020617; --weline-chrome-body-bg: var(--color-bg-canvas); --weline-theme-canvas: var(--color-bg-canvas); --weline-theme-body-bg: var(--weline-chrome-body-bg, var(--color-bg-canvas)); --color-bg-primary: #0f172a; --color-bg-secondary: #172033; --color-bg-tertiary: #1e293b; --color-surface: var(--color-bg-primary); --color-surface-subtle: var(--color-bg-secondary); --color-surface-muted: var(--color-bg-tertiary);
        --color-border-default: #64748b; --color-border-subtle: #475569; --color-border-strong: #94a3b8; --color-border-focus: #93c5fd; --color-border-emphasis: #6a6a6a; --color-border-light: rgba(255, 255, 255, 0.1);
        --color-accent: #3b82f6; --color-accent-hover: #60a5fa; --color-accent-light: rgba(59, 130, 246, 0.15); --color-accent-medium: rgba(59, 130, 246, 0.2); --color-accent-dark: rgba(59, 130, 246, 0.25);
        --color-primary: #60a5fa; --color-primary-rgb: 96, 165, 250; --color-primary-hover: #93c5fd; --color-primary-active: #3b82f6; --color-primary-bg-subtle: rgb(96 165 250 / 0.18); --color-primary-border-subtle: #60a5fa; --color-primary-text-emphasis: #bfdbfe; --color-on-primary: #0f172a;
        --color-link: #93c5fd; --color-link-hover: #bfdbfe;
        --color-secondary: #cbd5e1; --color-secondary-rgb: 203, 213, 225; --color-secondary-hover: #e2e8f0; --color-secondary-active: #94a3b8; --color-on-secondary: #0f172a; --color-secondary-bg-subtle: #1e293b; --color-secondary-border-subtle: #64748b; --color-secondary-text-emphasis: #e2e8f0;
        --color-success: #4ade80; --color-success-hover: #86efac; --color-success-active: #22c55e; --color-on-success: #052e16; --color-success-bg-subtle: rgb(74 222 128 / 0.16); --color-success-border-subtle: #22c55e; --color-success-text-emphasis: #86efac;
        --color-warning: #fcd34d; --color-warning-hover: #fde68a; --color-warning-active: #fbbf24; --color-on-warning: #422006; --color-warning-bg-subtle: rgb(252 211 77 / 0.16); --color-warning-border-subtle: #fbbf24; --color-warning-text-emphasis: #fde68a;
        --color-danger: #fda4af; --color-danger-hover: #fecdd3; --color-danger-active: #fb7185; --color-error: var(--color-danger); --color-error-hover: #ff5252; --color-error-light: rgba(244, 67, 54, 0.15); --color-on-danger: #4c0519; --color-danger-bg-subtle: rgb(253 164 175 / 0.16); --color-danger-border-subtle: #fb7185; --color-danger-text-emphasis: #fecdd3;
        --color-info: #7dd3fc; --color-info-hover: #bae6fd; --color-info-active: #38bdf8; --color-on-info: #082f49; --color-info-bg-subtle: rgb(125 211 252 / 0.16); --color-info-border-subtle: #38bdf8; --color-info-text-emphasis: #bae6fd;
        --scrollbar-thumb: #8590a5; --scrollbar-thumb-hover: #a2adb7; --scrollbar-track: transparent;
        --color-text-rgb: 229, 231, 235; --color-bg-canvas-rgb: 2, 6, 23; --color-emphasis-rgb: 229, 231, 235;
        --color-success-rgb: 74, 222, 128; --color-warning-rgb: 252, 211, 77; --color-danger-rgb: 253, 164, 175; --color-info-rgb: 125, 211, 252;
        --shadow-xs: 0 1px 1px rgb(2 6 23 / 0.28); --shadow-sm: 0 3px 10px rgb(2 6 23 / 0.30); --shadow-md: 0 18px 40px rgb(2 6 23 / 0.42); --shadow-lg: 0 28px 60px rgb(2 6 23 / 0.55); --focus-ring-width: 3px; --focus-ring-color: #93c5fd; --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
        --color-surface-disabled: #1e293b; --color-text-subtle: #94a3b8; --color-text-body: #e5e7eb; --color-link-visited: #c4b5fd;
        --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem;
        --color-primary-light: #93c5fd; --color-primary-dark: #3b82f6; --color-primary-border: #60a5fa;
        --color-header-bg: #0f172a; --color-header-bg-hover: #1e293b; --color-header-border-hover: #475569;
        --color-header-shadow: rgba(2, 6, 23, 0.45); --color-header-dropdown-shadow: 0 8px 24px rgba(2, 6, 23, 0.55);
        --color-header-focus-ring: rgba(147, 197, 253, 0.35); --scrollbar-width: 4px;
        --weline-chrome-text-primary: var(--color-text-primary); --weline-chrome-text-secondary: var(--color-text-secondary);
        --weline-chrome-text-muted: var(--color-text-placeholder); --weline-chrome-text-light: var(--color-text-light);
        --weline-chrome-text-light-secondary: var(--color-text-light-secondary);
        --weline-chrome-bg-primary: var(--color-bg-primary); --weline-chrome-bg-secondary: var(--color-bg-secondary);
        --weline-chrome-bg-tertiary: var(--color-bg-tertiary); --weline-chrome-bg-dark: var(--color-bg-dark-secondary);
        --weline-chrome-bg-dark-secondary: var(--color-bg-dark); --weline-chrome-border-default: var(--color-border-default);
        --weline-chrome-border-focus: var(--color-border-focus); --weline-chrome-primary: var(--color-primary);
        --weline-chrome-primary-light: var(--color-primary-light); --weline-chrome-primary-dark: var(--color-primary-dark);
        --weline-chrome-body-link-hover: var(--color-primary); --weline-chrome-menu-panel-text-hover: var(--color-primary);
    }
}