/**
 * WEAM Design System — Component Classes
 * Standardized UI components. Uses tokens from weam-tokens.css.
 * Locked: 2026-02-23 (DESIGN-SYSTEM.md §6–8)
 *
 * Load AFTER weam-tokens.css, AFTER weam-ctd.css.
 * CTD button lives in weam-ctd.css — not duplicated here.
 *
 * Components:
 *  1. Text Recipes        — .w-text-*
 *  2. Input               — .w-input, .w-prefix-group
 *  3. Checkbox / Radio    — .w-check, .w-radio
 *  4. Secondary Button    — .w-btn-secondary
 *  5. Text Button         — .w-btn-text
 *  6. Icon Button         — .w-btn-icon
 *  7. Toggle              — .w-toggle, .w-toggle--settings
 *  8. Segmented Control   — .w-segment
 *  9. Filter Pill         — .w-pill
 * 10. Badge               — .w-badge + modifiers
 * 11. Card                — .w-card + anatomy
 */


/* ═══════════════════════════════════════
   1. TEXT RECIPES
   Reusable type combos for high-frequency patterns.
   ═══════════════════════════════════════ */

.w-text-field-label {
    font-size: var(--weam-text-xs);
    font-weight: var(--weam-font-semi);
    text-transform: uppercase;
    letter-spacing: var(--weam-tracking-label);
    color: var(--weam-slate-400);
    line-height: var(--weam-leading-none);
}

.w-text-card-title {
    font-size: var(--weam-text-lg);
    font-weight: var(--weam-font-semi);
    color: var(--weam-text);
    line-height: var(--weam-leading-tight);
}

.w-text-body {
    font-size: var(--weam-text-base);
    font-weight: var(--weam-font-normal);
    color: var(--weam-slate-600);
    line-height: var(--weam-leading-normal);
}

.w-text-hint {
    font-size: var(--weam-text-sm);
    font-weight: var(--weam-font-medium);
    color: var(--weam-slate-400);
    line-height: var(--weam-leading-normal);
}

.w-text-heading {
    font-size: var(--weam-text-xl);
    font-weight: var(--weam-font-bold);
    color: var(--weam-slate-900);
    line-height: var(--weam-leading-tight);
}

.w-text-micro {
    font-size: var(--weam-text-2xs);
    font-weight: var(--weam-font-medium);
    color: var(--weam-slate-400);
    line-height: var(--weam-leading-none);
}


/* ═══════════════════════════════════════
   2. INPUT
   One class for text, number, select, textarea.
   ═══════════════════════════════════════ */

.w-input {
    height: var(--weam-h-input);
    padding: 0 var(--weam-sp-2);
    border: 1px solid var(--weam-slate-300);
    border-radius: var(--weam-r-sm);
    font-family: inherit;
    font-size: var(--weam-text-base);
    color: var(--weam-text);
    background: #fff;
    line-height: var(--weam-leading-none);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.w-input::placeholder {
    color: var(--weam-slate-400);
}

.w-input:focus {
    border-color: var(--weam-focus-ring);
    box-shadow: 0 0 0 2px var(--weam-focus-glow);
    outline: none;
}

.w-input:disabled {
    background: var(--weam-slate-50);
    color: var(--weam-slate-400);
    cursor: not-allowed;
}

/* Error state */
.w-input.has-error,
.w-input--error {
    border-color: var(--weam-error);
}
.w-input.has-error:focus,
.w-input--error:focus {
    border-color: var(--weam-error);
    box-shadow: 0 0 0 2px var(--weam-error-light);
}

/* Select variant — extra right padding for arrow */
select.w-input {
    padding-right: var(--weam-sp-6);
    appearance: auto;
}

/* Textarea variant — auto height */
textarea.w-input {
    height: auto;
    min-height: 60px;
    padding: var(--weam-sp-2);
    line-height: var(--weam-leading-normal);
    resize: vertical;
}

/* Search variant — full width, lighter style */
.w-input--search {
    width: 100%;
    max-width: 320px;
}

/* Prefix group: € input pattern */
.w-prefix-group {
    display: flex;
    align-items: stretch;
}

.w-prefix-group .w-prefix {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    flex-shrink: 0;
    background: var(--weam-slate-50);
    border: 1px solid var(--weam-slate-300);
    border-right: none;
    border-radius: var(--weam-r-sm) 0 0 var(--weam-r-sm);
    font-size: var(--weam-text-base);
    color: var(--weam-muted);
}

.w-prefix-group .w-input {
    border-radius: 0 var(--weam-r-sm) var(--weam-r-sm) 0;
    flex: 1;
    min-width: 0;
}


/* ═══════════════════════════════════════
   3. CHECKBOX / RADIO
   Native styling. Purple accent. No custom hacks.
   ═══════════════════════════════════════ */

.w-check,
.w-radio {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--weam-purple-500);
    flex-shrink: 0;
}


/* ═══════════════════════════════════════
   4. SECONDARY BUTTON
   Border button for non-primary actions.
   ═══════════════════════════════════════ */

.w-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--weam-sp-1);
    height: var(--weam-h-input);
    padding: 0 var(--weam-sp-3);
    font-family: inherit;
    font-size: var(--weam-text-base);
    font-weight: var(--weam-font-medium);
    color: var(--weam-slate-600);
    background: #fff;
    border: 1px solid var(--weam-slate-300);
    border-radius: var(--weam-r-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    line-height: var(--weam-leading-none);
}

.w-btn-secondary:hover {
    background: var(--weam-slate-50);
    border-color: var(--weam-slate-400);
}

/* Active/selected state */
.w-btn-secondary.is-active,
.w-btn-secondary[aria-pressed="true"] {
    color: var(--weam-purple-700);
    background: var(--weam-purple-50);
    border-color: var(--weam-purple-500);
}

.w-btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ═══════════════════════════════════════
   5. TEXT BUTTON
   Minimal button for inline actions.
   ═══════════════════════════════════════ */

.w-btn-text {
    display: inline-flex;
    align-items: center;
    gap: var(--weam-sp-1);
    padding: 0;
    font-family: inherit;
    font-size: var(--weam-text-base);
    font-weight: var(--weam-font-medium);
    color: var(--weam-purple-500);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s;
    line-height: var(--weam-leading-normal);
}

.w-btn-text:hover {
    color: var(--weam-purple-700);
}

/* Muted variant */
.w-btn-text--muted {
    color: var(--weam-slate-400);
}
.w-btn-text--muted:hover {
    color: var(--weam-slate-600);
}

/* Danger variant */
.w-btn-text--danger {
    color: var(--weam-slate-400);
}
.w-btn-text--danger:hover {
    color: var(--weam-error);
}


/* ═══════════════════════════════════════
   6. ICON BUTTON
   Square button for icon-only actions.
   ═══════════════════════════════════════ */

.w-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: var(--weam-slate-800);
    border: none;
    border-radius: var(--weam-r-md);
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.w-btn-icon:hover {
    background: var(--weam-slate-700);
}

.w-btn-icon svg {
    width: 14px;
    height: 14px;
}

/* Ghost variant */
.w-btn-icon--ghost {
    background: transparent;
    color: var(--weam-slate-400);
}
.w-btn-icon--ghost:hover {
    background: var(--weam-slate-100);
    color: var(--weam-slate-600);
}

/* Danger variant */
.w-btn-icon--danger {
    background: var(--weam-slate-800);
}
.w-btn-icon--danger:hover {
    background: var(--weam-error);
}


/* ═══════════════════════════════════════
   7. TOGGLE
   Two context variants, same HTML structure.

   HTML:
   <label class="w-toggle">
       <input type="checkbox">
       <span class="w-toggle-track"></span>
       <span class="w-toggle-label">Label</span>
   </label>

   Settings: add .w-toggle--settings to <label>
   ═══════════════════════════════════════ */

.w-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--weam-sp-2);
    cursor: pointer;
    user-select: none;
}

.w-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Track: 32×18px */
.w-toggle-track {
    position: relative;
    width: 32px;
    height: 18px;
    background: var(--weam-slate-300);
    border-radius: 18px;
    transition: background 0.2s;
    flex-shrink: 0;
}

/* Knob: 12px, 3px inset */
.w-toggle-track::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Product editor ON: slate track, amber knob */
.w-toggle input:checked + .w-toggle-track {
    background: var(--weam-slate-800);
}
.w-toggle input:checked + .w-toggle-track::before {
    transform: translateX(14px);
    background: var(--weam-amber-500);
}

/* Settings variant ON: purple track, white knob */
.w-toggle--settings input:checked + .w-toggle-track {
    background: var(--weam-purple-500);
}
.w-toggle--settings input:checked + .w-toggle-track::before {
    transform: translateX(14px);
    background: #fff;
}

/* Disabled */
.w-toggle input:disabled + .w-toggle-track {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Label */
.w-toggle-label {
    font-size: var(--weam-text-sm);
    font-weight: var(--weam-font-medium);
    color: var(--weam-muted);
    white-space: nowrap;
}


/* ═══════════════════════════════════════
   8. SEGMENTED CONTROL
   For exclusive choices (Set/Increase/Decrease).

   HTML:
   <div class="w-segment">
       <button class="w-segment-btn is-active">Set</button>
       <button class="w-segment-btn">Increase</button>
       <button class="w-segment-btn">Decrease</button>
   </div>
   ═══════════════════════════════════════ */

.w-segment {
    display: inline-flex;
    background: var(--weam-slate-100);
    border-radius: var(--weam-r-sm);
    padding: 2px;
    gap: 1px;
}

.w-segment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 var(--weam-sp-3);
    font-family: inherit;
    font-size: var(--weam-text-sm);
    font-weight: var(--weam-font-medium);
    color: var(--weam-muted);
    background: transparent;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.w-segment-btn:hover {
    color: var(--weam-text);
}

/* Active — purple on settings, slate on product editor */
.w-segment-btn.is-active {
    background: #fff;
    color: var(--weam-purple-700);
    box-shadow: var(--weam-shadow-sm);
}

/* Status color variants */
.w-segment-btn.is-active.success { color: var(--weam-success); }
.w-segment-btn.is-active.warning { color: var(--weam-amber-800); }
.w-segment-btn.is-active.error   { color: var(--weam-error); }


/* ═══════════════════════════════════════
   9. FILTER PILL
   Rounded pill with optional count badge.

   HTML:
   <button class="w-pill is-active">
       Critical <span class="w-pill-count">12</span>
   </button>
   ═══════════════════════════════════════ */

.w-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--weam-sp-1);
    height: 26px;
    padding: 0 var(--weam-sp-3);
    font-family: inherit;
    font-size: var(--weam-text-sm);
    font-weight: var(--weam-font-medium);
    color: var(--weam-muted);
    background: var(--weam-slate-100);
    border: 1px solid transparent;
    border-radius: var(--weam-r-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.w-pill:hover {
    background: var(--weam-slate-200);
}

.w-pill.is-active {
    color: var(--weam-purple-700);
    background: var(--weam-purple-50);
    border-color: var(--weam-purple-200);
}

.w-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--weam-sp-1);
    font-size: var(--weam-text-2xs);
    font-weight: var(--weam-font-semi);
    color: var(--weam-muted);
    background: var(--weam-slate-200);
    border-radius: var(--weam-r-pill);
    line-height: var(--weam-leading-none);
}

.w-pill.is-active .w-pill-count {
    color: var(--weam-purple-600);
    background: var(--weam-purple-100);
}


/* ═══════════════════════════════════════
   10. BADGE
   Compact status/info labels.

   HTML:
   <span class="w-badge">3 values</span>
   <span class="w-badge pro">Pro</span>
   <span class="w-badge success">Synced</span>
   ═══════════════════════════════════════ */

.w-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--weam-sp-1);
    height: 20px;
    padding: 0 var(--weam-sp-2);
    font-size: var(--weam-text-xs);
    font-weight: var(--weam-font-semi);
    color: var(--weam-muted);
    background: var(--weam-slate-100);
    border-radius: var(--weam-r-pill);
    line-height: var(--weam-leading-none);
    white-space: nowrap;
}

/* Pro badge */
.w-badge.pro {
    color: var(--weam-purple-600);
    background: var(--weam-purple-50);
}

/* Success badge */
.w-badge.success {
    color: var(--weam-success);
    background: var(--weam-success-light);
}

/* Warning badge */
.w-badge.warning {
    color: var(--weam-amber-800);
    background: var(--weam-warning-light);
}

/* Error badge */
.w-badge.error {
    color: var(--weam-error);
    background: var(--weam-error-light);
}


/* ═══════════════════════════════════════
   11. CARD
   Universal container with header/body/footer.

   HTML:
   <div class="w-card">
       <div class="w-card-hdr">
           <span class="w-card-title">Color</span>
           <div class="w-card-meta">
               <span class="w-badge">2 / 4</span>
               [CTD button]
           </div>
       </div>
       <div class="w-card-body">
           content
       </div>
       <div class="w-card-foot">
           footer actions
       </div>
   </div>
   ═══════════════════════════════════════ */

.w-card {
    border: 1px solid var(--weam-border);
    border-radius: var(--weam-r-md);
    overflow: hidden;
    background: #fff;
}

/* Card stack gap */
.w-card + .w-card {
    margin-top: var(--weam-sp-2);
}

/* --- Header --- */
.w-card-hdr {
    display: flex;
    align-items: center;
    padding: 0 var(--weam-sp-3);
    height: var(--weam-h-bar-md);
    background: var(--weam-slate-50);
    border-bottom: 1px solid var(--weam-border);
}

.w-card-title {
    font-size: var(--weam-text-md);
    font-weight: var(--weam-font-semi);
    color: var(--weam-text);
    white-space: nowrap;
}

.w-card-meta {
    display: flex;
    align-items: center;
    gap: var(--weam-sp-2);
    margin-left: auto;
    flex-shrink: 0;
}

/* --- Body --- */
.w-card-body {
    padding: var(--weam-sp-3) var(--weam-sp-4);
    background: #fff;
}

/* Flush body — for grids with no inner padding */
.w-card-body.flush {
    padding: 0;
}

/* Grid inside flush body */
.w-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Grid cells */
.w-card-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--weam-sp-2) var(--weam-sp-4);
    border-right: 1px solid var(--weam-slate-100);
    border-bottom: 1px solid var(--weam-slate-100);
    min-width: 0;
}

.w-card-cell:nth-child(2n) {
    border-right: none;
}

/* Remove bottom border from last row */
.w-card-grid > .w-card-cell:nth-last-child(-n+2) {
    border-bottom: none;
}

/* Cell label */
.w-card-cell-label {
    font-size: var(--weam-text-xs);
    font-weight: var(--weam-font-semi);
    text-transform: uppercase;
    letter-spacing: var(--weam-tracking-label);
    color: var(--weam-slate-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Footer --- */
.w-card-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 var(--weam-sp-3);
    height: var(--weam-h-bar-sm);
    background: var(--weam-slate-50);
    border-top: 1px solid var(--weam-border);
}

/* --- Status Variants --- */

/* Success */
.w-card.success {
    border-color: #BBF7D0;
}
.w-card.success > .w-card-hdr {
    background: var(--weam-success-light, #F0FDF4);
}

/* Warning */
.w-card.warning {
    border-color: #FDE68A;
}
.w-card.warning > .w-card-hdr {
    background: var(--weam-warning-light, #FFFBEB);
}

/* Error */
.w-card.error {
    border-color: #FECACA;
}
.w-card.error > .w-card-hdr {
    background: var(--weam-error-light, #FEF2F2);
}

/* Disabled / muted card */
.w-card.off {
    opacity: 0.6;
}

/* ═══════════════════════════════════════
   PROTECTED BACKUP DIALOG + TOAST
   ═══════════════════════════════════════ */
.weam-backup-dialog-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.35); z-index: 99999;
    display: flex; align-items: center; justify-content: center;
}
.weam-backup-dialog {
    background: #fff; border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    width: 420px; overflow: hidden;
}
.weam-bd-hdr {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--weam-slate-100, #f1f5f9);
    display: flex; align-items: center; gap: 10px;
}
.weam-bd-icon {
    width: 36px; height: 36px; border-radius: 8px;
    background: #fef2f2;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--weam-text-2xl); flex-shrink: 0;
}
.weam-bd-title { font-size: var(--weam-text-lg); font-weight: 600; color: var(--weam-slate-800, #1e293b); }
.weam-bd-sub { font-size: var(--weam-text-base); color: var(--weam-slate-500, #64748b); margin-top: 2px; }
.weam-bd-body { padding: 16px 20px; }
.weam-bd-products {
    background: var(--weam-slate-50, #f8fafc);
    border: 1px solid var(--weam-slate-100, #f1f5f9);
    border-radius: 6px; padding: 10px 12px;
    margin-bottom: 14px; max-height: 120px; overflow-y: auto;
}
.weam-bd-prod { font-size: var(--weam-text-base); color: var(--weam-slate-700, #334155); padding: 3px 0; }
.weam-bd-ret-wrap { margin-bottom: 14px; }
.weam-bd-ret-label { font-size: var(--weam-text-base); font-weight: 500; color: var(--weam-slate-600, #475569); margin-bottom: 6px; }
.weam-bd-ret-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.weam-bd-ret {
    padding: 6px 12px; border: 1px solid var(--weam-slate-200, #e2e8f0);
    border-radius: 6px; font-size: var(--weam-text-sm); font-weight: 500;
    color: var(--weam-slate-600, #475569); cursor: pointer;
    background: #fff; font-family: var(--weam-font);
}
.weam-bd-ret.on { border-color: var(--weam-amber); background: #fffbeb; color: var(--weam-amber-800); }
.weam-bd-ret:hover { border-color: var(--weam-slate-300, #cbd5e1); }
.weam-bd-info {
    font-size: var(--weam-text-sm); color: var(--weam-slate-500, #64748b);
    line-height: 1.5; padding: 10px 12px;
    background: #eff6ff; border-radius: 6px; border: 1px solid #dbeafe;
}
.weam-bd-info strong { color: var(--weam-info); font-weight: 600; }
.weam-bd-foot {
    padding: 12px 20px;
    border-top: 1px solid var(--weam-slate-100, #f1f5f9);
    display: flex; justify-content: flex-end; gap: 8px;
}
.weam-bd-cancel {
    padding: 7px 16px; border: 1px solid var(--weam-slate-200, #e2e8f0);
    border-radius: 6px; font-size: var(--weam-text-base); color: var(--weam-slate-600, #475569);
    background: #fff; cursor: pointer; font-family: var(--weam-font);
}
.weam-bd-go {
    padding: 7px 16px; border: none; border-radius: 6px;
    font-size: var(--weam-text-base); font-weight: 600; color: #fff;
    background: #dc2626; cursor: pointer; font-family: var(--weam-font);
}
.weam-bd-go:hover { background: #b91c1c; }
.weam-bd-go:disabled { opacity: 0.5; cursor: not-allowed; }
.weam-bd-progress {
    margin-right: auto;
    font-size: 13px;
    color: var(--weam-slate-500, #64748B);
    align-self: center;
    font-weight: 500;
}

/* Toast notification */
.weam-backup-toast {
    position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
    background: var(--weam-slate-800, #1e293b); color: #fff;
    padding: 10px 20px; border-radius: 8px; font-size: var(--weam-text-base);
    display: flex; align-items: center; gap: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 100000;
    animation: weamToastIn 0.3s ease-out;
}
.weam-backup-toast-icon {
    width: 18px; height: 18px; border-radius: 50%;
    background: #16a34a; display: flex; align-items: center;
    justify-content: center; font-size: var(--weam-text-sm); color: #fff; flex-shrink: 0;
}
@keyframes weamToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Per-page selector (pagination) */
.weam-perpage-wrap { position: relative; display: inline-block; margin-left: 8px; }
.weam-perpage-trigger {
    font-size: var(--weam-text-sm, 13px);
    color: var(--weam-purple-500, #7c3aed);
    cursor: pointer;
    border-bottom: 1px dashed var(--weam-purple-300, #c4b5fd);
    padding-bottom: 1px;
    user-select: none;
}
.weam-perpage-trigger:hover { color: var(--weam-purple-700, #6d28d9); border-bottom-color: var(--weam-purple-500, #7c3aed); }
.weam-perpage-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid var(--weam-slate-200, #e2e8f0);
    border-radius: var(--weam-r-md, 6px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    min-width: 56px;
    overflow: hidden;
}
.weam-perpage-wrap.open .weam-perpage-menu { display: block; }
.weam-perpage-opt {
    display: block;
    padding: 5px 16px;
    font-size: var(--weam-text-sm, 13px);
    color: var(--weam-slate-600, #475569);
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}
.weam-perpage-opt:hover { background: var(--weam-slate-50, #f8fafc); color: var(--weam-slate-800, #1e293b); }
.weam-perpage-opt.current { background: var(--weam-purple-50, #f5f3ff); color: var(--weam-purple-700, #6d28d9); font-weight: 500; }

/* ═══════════════════════════════════════════════════════
   FILTER BAR — Shared horizontal filter component
   Used on: Product Pricing, Product Editor, Store Audit
   ═══════════════════════════════════════════════════════ */
.weam-filter-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--weam-border, #e2e8f0);
    background: #fff;
    flex-wrap: wrap;
    min-height: 40px;
}

/* Dropdown trigger */
.weam-fb-dropdown { position: relative; display: inline-flex; }
.weam-fb-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: var(--weam-text-base, 12px);
    border: 1px solid var(--weam-border-strong, #cbd5e1);
    border-radius: var(--weam-r-sm, 4px);
    background: #fff;
    cursor: pointer;
    color: var(--weam-text, #1e293b);
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
    line-height: 1.4;
    font-family: var(--weam-font);
}
.weam-fb-trigger:hover { border-color: var(--weam-slate-400, #94a3b8); background: #f6f7f7; }
.weam-fb-trigger.has-value { border-color: var(--weam-info, #2271b1); background: var(--weam-info-light, #f0f6fc); color: var(--weam-info, #2271b1); }
.weam-fb-chev { font-size: 9px; color: var(--weam-slate-400, #94a3b8); margin-left: 2px; }
.weam-fb-trigger.has-value .weam-fb-chev { color: var(--weam-info, #2271b1); }

/* Dropdown panel */
.weam-fb-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #fff;
    border: 1px solid var(--weam-border-strong, #cbd5e1);
    border-radius: var(--weam-r-md, 6px);
    box-shadow: var(--weam-shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1));
    padding: 6px;
    z-index: 50;
    min-width: 180px;
    display: none;
}
.weam-fb-panel.open { display: block; }
.weam-fb-panel label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: var(--weam-text-base, 12px);
    color: var(--weam-text, #1e293b);
    font-family: var(--weam-font);
}
.weam-fb-panel label:hover { background: #f6f7f7; }
.weam-fb-panel label input { margin: 0; accent-color: var(--weam-purple-500, #6366f1); }
.weam-fb-cnt { color: var(--weam-slate-400, #94a3b8); font-size: var(--weam-text-sm, 11px); margin-left: auto; }

/* Range input pair */
.weam-fb-range {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--weam-border-strong, #cbd5e1);
    border-radius: var(--weam-r-sm, 4px);
    background: #fff;
    padding: 0 2px;
}
.weam-fb-range input {
    border: none;
    width: 54px;
    font-size: var(--weam-text-sm, 11px);
    padding: 4px 6px;
    outline: none;
    text-align: center;
    background: transparent;
    font-family: var(--weam-font);
    color: var(--weam-text, #1e293b);
}
.weam-fb-range input::placeholder { color: var(--weam-slate-400, #94a3b8); }
.weam-fb-range .weam-fb-dash { color: var(--weam-slate-400, #94a3b8); font-size: 10px; }

/* Date trigger */
.weam-fb-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: var(--weam-text-base, 12px);
    border: 1px solid var(--weam-border-strong, #cbd5e1);
    border-radius: var(--weam-r-sm, 4px);
    background: #fff;
    cursor: pointer;
    color: var(--weam-text, #1e293b);
    white-space: nowrap;
    font-family: var(--weam-font);
    transition: border-color 0.15s, background 0.15s;
}
.weam-fb-date:hover { border-color: var(--weam-slate-400, #94a3b8); background: #f6f7f7; }
.weam-fb-date.has-value { border-color: var(--weam-amber-600, #d97706); background: var(--weam-warning-light, #fffbeb); color: var(--weam-amber-800, #92400e); }
.weam-fb-date svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* Separator */
.weam-fb-sep { width: 1px; height: 20px; background: var(--weam-border, #e2e8f0); margin: 0 2px; }

/* Clear all */
.weam-fb-clear {
    font-size: var(--weam-text-sm, 11px);
    color: var(--weam-error, #dc2626);
    cursor: pointer;
    background: none;
    border: none;
    margin-left: auto;
    white-space: nowrap;
    font-family: var(--weam-font);
    display: none;
}
.weam-fb-clear:hover { text-decoration: underline; }
.weam-fb-clear.visible { display: inline; }