@import '_content/Tailgrape.BlazorComponents/Tailgrape.BlazorComponents.zlpbwe79bt.bundle.scp.css';
@import '_content/Tailgrape.FluentComponents/Tailgrape.FluentComponents.8v14p6edk7.bundle.scp.css';

/* /Components/MetaAds/AdAccountSelector.razor.rz.scp.css */
.ads-account-selector[b-iz1nre9bfd] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ads-select[b-iz1nre9bfd] {
    padding: 0.45rem 0.85rem;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.92rem;
    background: var(--card-bg);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 220px;
}

.ads-select option[b-iz1nre9bfd] {
    background: var(--card-bg);
    color: var(--text-primary);
}

.ads-select:focus[b-iz1nre9bfd] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.15);
}

.ads-selector-loading[b-iz1nre9bfd],
.ads-selector-empty[b-iz1nre9bfd] {
    font-size: 0.88rem;
    color: var(--text-muted);
}
/* /Components/MetaAds/AdObjectiveSelector.razor.rz.scp.css */
.objective-grid[b-e49gr4ma6r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.85rem;
}

.objective-card[b-e49gr4ma6r] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    border: 1.5px solid var(--card-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    background: var(--card-bg);
}

.objective-card:hover[b-e49gr4ma6r] {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 128, 128, 0.15);
}

.objective-card.selected[b-e49gr4ma6r] {
    border-color: var(--color-primary);
    background: rgba(20, 184, 166, 0.1);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

.obj-icon[b-e49gr4ma6r] {
    font-size: 1.6rem;
}

.obj-label[b-e49gr4ma6r] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
}

.obj-sub[b-e49gr4ma6r] {
    font-size: 0.78rem;
    color: var(--text-muted);
}
/* /Components/MetaAds/AdRuleFormPanel.razor.rz.scp.css */
.arf-form[b-jfslhicsqp] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.arf-field[b-jfslhicsqp] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.arf-field > label[b-jfslhicsqp] {
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--text-primary);
}

.arf-req[b-jfslhicsqp] {
    color: #f87171;
}

.arf-field-row[b-jfslhicsqp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.arf-input[b-jfslhicsqp],
.arf-select[b-jfslhicsqp] {
    padding: 0.48rem 0.85rem;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.88rem;
    background: var(--card-bg);
    color: var(--text-primary);
    width: 100%;
    box-sizing: border-box;
}

.arf-select option[b-jfslhicsqp],
.arf-select optgroup[b-jfslhicsqp] {
    background: var(--card-bg);
    color: var(--text-primary);
}

.arf-input:focus[b-jfslhicsqp],
.arf-select:focus[b-jfslhicsqp] {
    outline: none;
    border-color: var(--color-primary);
}

.arf-input.sm[b-jfslhicsqp],
.arf-select.sm[b-jfslhicsqp] {
    font-size: 0.82rem;
    padding: 0.38rem 0.65rem;
}

.arf-section[b-jfslhicsqp] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem;
    background: var(--color-surface-alt);
    border-radius: 12px;
    border: 1px solid var(--card-border);
}

.arf-section-title[b-jfslhicsqp] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.arf-filter-row[b-jfslhicsqp] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.arf-filter-row .arf-select.sm[b-jfslhicsqp] {
    flex: 1.5;
    min-width: 100px;
}

.arf-filter-row .arf-input.sm[b-jfslhicsqp] {
    flex: 1;
    min-width: 60px;
}

.arf-actions[b-jfslhicsqp] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--card-border);
}

.arf-btn-cancel[b-jfslhicsqp] {
    padding: 0.45rem 1rem;
    background: var(--color-surface-alt);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.88rem;
    cursor: pointer;
}

.arf-btn-cancel:hover[b-jfslhicsqp] {
    background: var(--card-bg-hover);
}

.arf-btn-save[b-jfslhicsqp] {
    padding: 0.45rem 1.25rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.arf-btn-save:hover[b-jfslhicsqp] {
    background: var(--color-primary-dark);
}

.arf-error[b-jfslhicsqp] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    font-size: 0.84rem;
}

.qa-pill-group[b-jfslhicsqp] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.qa-pill[b-jfslhicsqp] {
    padding: 0.4rem 1rem;
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    background: var(--card-bg);
    font-size: 0.86rem;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-primary);
}

.qa-pill:hover[b-jfslhicsqp] {
    border-color: var(--color-primary);
}

.qa-pill.active[b-jfslhicsqp] {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.qa-add-btn[b-jfslhicsqp] {
    background: none;
    border: 1.5px dashed var(--border-color);
    border-radius: 10px;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    color: var(--color-primary-light);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.qa-add-btn:hover[b-jfslhicsqp] {
    border-color: var(--color-primary);
    background: rgba(20, 184, 166, 0.1);
}

.qa-remove-btn[b-jfslhicsqp] {
    padding: 0.45rem 0.65rem;
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
}

.qa-remove-btn:hover[b-jfslhicsqp] {
    background: rgba(239, 68, 68, 0.25);
}
/* /Components/MetaAds/AdStatusBadge.razor.rz.scp.css */
.ad-status-badge[b-bo24mpiy2w] {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.badge-active[b-bo24mpiy2w] {
    background: rgba(16, 185, 129, 0.18);
    color: #10b981;
}

.badge-paused[b-bo24mpiy2w] {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
}

.badge-archived[b-bo24mpiy2w] {
    background: rgba(107, 114, 128, 0.18);
    color: var(--text-muted);
}

.badge-deleted[b-bo24mpiy2w] {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
}

.badge-pending[b-bo24mpiy2w] {
    background: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
}

.badge-unknown[b-bo24mpiy2w] {
    background: rgba(107, 114, 128, 0.18);
    color: var(--text-muted);
}
/* /Components/MetaAds/AdTargetingSection.razor.rz.scp.css */
.ats-root[b-uz3o6m6ogr] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.ats-root .form-field[b-uz3o6m6ogr] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ats-root label[b-uz3o6m6ogr] {
    color: var(--text-primary, #111827);
    font-size: 0.875rem;
    font-weight: 600;
}

.ats-root .form-select[b-uz3o6m6ogr] {
    width: 100%;
    min-height: 42px;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color, #dbe4ea);
    border-radius: 8px;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #111827);
    font: inherit;
    color-scheme: light;
}

.ats-root .form-select option[b-uz3o6m6ogr] {
    background: var(--card-bg, #fff);
    color: var(--text-primary, #111827);
}

[data-app-theme="dark"] .ats-root .form-select[b-uz3o6m6ogr] {
    color-scheme: dark;
}

.ats-root .form-select:focus[b-uz3o6m6ogr] {
    outline: none;
    border-color: var(--color-primary, #008080);
    box-shadow: var(--form-input-focus-shadow, 0 0 0 3px rgba(20, 184, 166, 0.1));
}

.field-tip[b-uz3o6m6ogr] {
    color: var(--text-muted, #6b7280);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.ats-tabs[b-uz3o6m6ogr] {
    display: flex;
    gap: 0.375rem;
    padding: 0.25rem;
    border: 1px solid var(--card-border, #dbe4ea);
    border-radius: 8px;
    background: var(--input-bg-light, #f3f6f7);
}

.ats-tab[b-uz3o6m6ogr] {
    flex: 1 1 0;
    min-width: 0;
    min-height: 42px;
    padding: 0.625rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #4b5563);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.ats-tab:hover[b-uz3o6m6ogr] {
    color: var(--text-primary, #111827);
    background: var(--card-bg-hover, rgba(0, 128, 128, 0.06));
}

.ats-tab.active[b-uz3o6m6ogr] {
    border-color: var(--card-border, #dbe4ea);
    background: var(--card-bg, #fff);
    color: var(--color-primary-dark, #0d7773);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.ats-tab:focus-visible[b-uz3o6m6ogr] {
    outline: 2px solid var(--color-primary, #008080);
    outline-offset: 2px;
}

.ats-tab-body[b-uz3o6m6ogr] {
    min-width: 0;
}

@media (max-width: 600px) {
    .ats-tabs[b-uz3o6m6ogr] {
        flex-direction: column;
    }

    .ats-tab[b-uz3o6m6ogr] {
        flex-basis: auto;
        text-align: left;
    }
}
/* /Components/MetaAds/CreateLeadFormModal.razor.rz.scp.css */
.media-modal-overlay[b-d2lesyjtt6] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lead-form-modal-dialog[b-d2lesyjtt6] {
    background: var(--card-bg, #fff);
    padding: 24px;
    border-radius: 12px;
    width: min(90vw, 640px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border: 1px solid var(--card-border);
}

.media-modal-header[b-d2lesyjtt6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.media-modal-title[b-d2lesyjtt6] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.media-modal-close-button[b-d2lesyjtt6] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-primary);
}

.lead-form-modal-body[b-d2lesyjtt6] {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-field[b-d2lesyjtt6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-field label[b-d2lesyjtt6] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-field small[b-d2lesyjtt6] {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.req[b-d2lesyjtt6] {
    color: var(--danger-color);
}

.form-input[b-d2lesyjtt6] {
    padding: 0.625rem 0.875rem;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9375rem;
    background: var(--form-input-bg);
    color: var(--text-primary);
    width: 100%;
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
    transition: all 0.15s;
}

.form-input:focus[b-d2lesyjtt6] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--form-input-focus-shadow);
}

.platform-options[b-d2lesyjtt6] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 0;
}

.platform-option[b-d2lesyjtt6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.platform-option label[b-d2lesyjtt6] {
    margin: 0;
    cursor: pointer;
}

.lead-form-custom-question-header[b-d2lesyjtt6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lead-form-custom-question-row[b-d2lesyjtt6] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.pill[b-d2lesyjtt6] {
    padding: 0.4rem 1rem;
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    background: var(--card-bg);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-primary);
}

.pill:hover[b-d2lesyjtt6] {
    border-color: var(--color-primary-light);
    background: var(--card-bg-hover);
}

.error-message[b-d2lesyjtt6] {
    background: var(--status-rejected-bg);
    border-left: 3px solid var(--danger-color);
    padding: 1rem;
    border-radius: 8px;
    color: var(--status-rejected-text);
    font-size: 0.875rem;
}

.media-modal-footer[b-d2lesyjtt6] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid var(--border-color, #eee);
    padding-top: 16px;
}

.quick-ad-btn-cancel[b-d2lesyjtt6] {
    padding: 0.625rem 1.5rem;
    border: 1.5px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.quick-ad-btn-cancel:hover[b-d2lesyjtt6] {
    background: var(--card-bg-hover);
    border-color: var(--color-primary-light);
}

.btn-primary[b-d2lesyjtt6] {
    border-radius: var(--radius-sm);
    padding: 0.6rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--color-primary);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover:not(:disabled)[b-d2lesyjtt6] {
    background: var(--color-primary-dark);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.18);
    transform: translateY(-1px);
}

.btn-primary:disabled[b-d2lesyjtt6] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
/* /Components/MetaAds/LeadFormDetailsModal.razor.rz.scp.css */
.media-modal-overlay[b-b009dzs14u] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lead-form-details-dialog[b-b009dzs14u] {
    background: var(--card-bg, #fff);
    padding: 24px;
    border-radius: 12px;
    width: min(90vw, 640px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border: 1px solid var(--card-border);
}

.media-modal-header[b-b009dzs14u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.media-modal-title[b-b009dzs14u] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.media-modal-close-button[b-b009dzs14u] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-primary);
}

.lead-form-details-body[b-b009dzs14u] {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lead-form-details-grid[b-b009dzs14u] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
}

.lead-form-details-grid dt[b-b009dzs14u] {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.lead-form-details-grid dd[b-b009dzs14u] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.875rem;
    word-break: break-all;
}

.lead-form-details-snapshot-label[b-b009dzs14u] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.lead-form-details-snapshot[b-b009dzs14u] {
    background: var(--form-input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 0.8125rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-primary);
    max-height: 320px;
    overflow-y: auto;
}

.empty-state[b-b009dzs14u] {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9375rem;
    padding: 1rem 0;
}

.quick-ad-btn-cancel[b-b009dzs14u] {
    padding: 0.625rem 1.5rem;
    border: 1.5px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.quick-ad-btn-cancel:hover[b-b009dzs14u] {
    background: var(--card-bg-hover);
    border-color: var(--color-primary-light);
}

.media-modal-footer[b-b009dzs14u] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid var(--border-color, #eee);
    padding-top: 16px;
}
/* /Components/MetaAds/LeadFormPicker.razor.rz.scp.css */
.lead-form-picker[b-8s0mgr421s] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.lead-form-picker-hint[b-8s0mgr421s],
.lead-form-picker-selected[b-8s0mgr421s] {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.page-selector-row[b-8s0mgr421s] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.page-select[b-8s0mgr421s] {
    padding: 0.45rem 0.85rem;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.92rem;
    background: var(--card-bg);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 220px;
}

.page-select option[b-8s0mgr421s] {
    background: var(--card-bg);
    color: var(--text-primary);
}

.page-select:focus[b-8s0mgr421s] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.15);
}

.page-sync-btn[b-8s0mgr421s] {
    padding: 0.45rem 0.9rem;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.page-sync-btn:hover:not(:disabled)[b-8s0mgr421s] {
    background: rgba(20, 184, 166, 0.1);
    border-color: var(--color-primary);
}

.page-selector-error[b-8s0mgr421s] {
    color: #f87171;
    font-size: 0.82rem;
    margin: 0.25rem 0 0;
}

.page-selector-loading[b-8s0mgr421s] {
    font-size: 0.88rem;
    color: var(--text-muted);
}
/* /Components/MetaAds/PageSelector.razor.rz.scp.css */
.page-selector-row[b-qhtwfug622] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* .page-select {
    min-width: 240px;
} */

.page-select[b-qhtwfug622] {
    padding: 0.45rem 0.85rem;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-size: 0.92rem;
    background: var(--card-bg);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 220px;
}

.page-select option[b-qhtwfug622] {
    background: var(--card-bg);
    color: var(--text-primary);
}

.page-select:focus[b-qhtwfug622] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.15);
}

.page-sync-btn[b-qhtwfug622] {
    padding: 0.45rem 0.9rem;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.page-sync-btn:hover:not(:disabled)[b-qhtwfug622] {
    background: rgba(20, 184, 166, 0.1);
    border-color: var(--color-primary);
}

.page-sync-btn:disabled[b-qhtwfug622] {
    opacity: 0.6;
    cursor: not-allowed;
}

.page-selector-error[b-qhtwfug622] {
    color: #f87171;
    font-size: 0.82rem;
    margin: 0.25rem 0 0;
}

.page-selector-loading[b-qhtwfug622] {
    font-size: 0.88rem;
    color: var(--text-muted);
}
/* /Components/MetaAds/ReachEstimatePanel.razor.rz.scp.css */
.reach-panel[b-2fr5ph2t3o] {
    background: rgba(20, 184, 166, 0.08);
    border: 1.5px solid rgba(20, 184, 166, 0.3);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.reach-panel-header[b-2fr5ph2t3o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reach-icon[b-2fr5ph2t3o] {
    font-size: 1.2rem;
}

.reach-title[b-2fr5ph2t3o] {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--color-primary-light);
}

.reach-spinner[b-2fr5ph2t3o] {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: auto;
}

.reach-numbers[b-2fr5ph2t3o] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.reach-range[b-2fr5ph2t3o] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}

.reach-sub[b-2fr5ph2t3o] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.reach-bar-track[b-2fr5ph2t3o] {
    height: 8px;
    background: var(--border-color);
    border-radius: 99px;
    overflow: hidden;
}

.reach-bar-fill[b-2fr5ph2t3o] {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    border-radius: 99px;
    transition: width 0.4s;
}

.reach-hint[b-2fr5ph2t3o] {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.reach-error[b-2fr5ph2t3o] {
    font-size: 0.82rem;
    color: #f87171;
    margin: 0;
}
/* /Components/MetaAds/TargetingPrimaryTab.razor.rz.scp.css */
.tpt-root[b-ym18tvjdp6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    color: var(--text-primary, #111827);
}

.tpt-root .form-field[b-ym18tvjdp6],
.tpt-root .form-section[b-ym18tvjdp6] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

.tpt-root .form-section[b-ym18tvjdp6] {
    padding: 1rem;
    border: 1px solid var(--card-border, #dbe4ea);
    border-radius: 8px;
    background: var(--card-bg, #fff);
}

.tpt-root .form-field-row[b-ym18tvjdp6] {
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.8fr);
    gap: 1rem;
}

.tpt-root .form-field > label[b-ym18tvjdp6],
.tpt-root .form-section > h2[b-ym18tvjdp6] {
    margin: 0;
    color: var(--text-primary, #111827);
    font-size: 0.875rem;
    font-weight: 600;
}

.tpt-root .form-section > h2[b-ym18tvjdp6] {
    font-size: 0.9375rem;
}

.tpt-root .form-input[b-ym18tvjdp6],
.tpt-root .form-select[b-ym18tvjdp6] {
    width: 100%;
    min-height: 42px;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-color, #dbe4ea);
    border-radius: 6px;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #111827);
    font: inherit;
    box-sizing: border-box;
}

.tpt-root .form-input:focus[b-ym18tvjdp6],
.tpt-root .form-select:focus[b-ym18tvjdp6] {
    outline: none;
    border-color: var(--color-primary, #008080);
    box-shadow: var(--form-input-focus-shadow, 0 0 0 3px rgba(20, 184, 166, 0.1));
}

.tpt-root .form-input[type="range"][b-ym18tvjdp6] {
    min-height: 24px;
    padding: 0;
    border: 0;
    accent-color: var(--color-primary, #008080);
    background: transparent;
    box-shadow: none;
}

.tpt-sac-warning[b-ym18tvjdp6] {
    padding: 0.75rem 0.875rem;
    border: 1px solid rgba(217, 119, 6, 0.35);
    border-left: 3px solid var(--color-warning, #d97706);
    border-radius: 6px;
    background: var(--color-warning-bg, rgba(245, 158, 11, 0.1));
    color: var(--text-primary, #111827);
    font-size: 0.875rem;
    line-height: 1.5;
}

.tpt-age-row[b-ym18tvjdp6] {
    display: grid;
    grid-template-columns: minmax(70px, 1fr) 2.5rem auto minmax(70px, 1fr) 2.5rem;
    align-items: center;
    gap: 0.625rem;
}

.tpt-age-value[b-ym18tvjdp6] {
    min-width: 2.5rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--card-border, #dbe4ea);
    border-radius: 6px;
    background: var(--input-bg-light, #f3f6f7);
    text-align: center;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.tpt-segmented[b-ym18tvjdp6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.tpt-segment[b-ym18tvjdp6] {
    min-height: 38px;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--border-color, #dbe4ea);
    border-radius: 6px;
    background: var(--card-bg, #fff);
    color: var(--text-secondary, #4b5563);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.tpt-segment:hover[b-ym18tvjdp6] {
    border-color: var(--color-primary, #008080);
}

.tpt-segment.active[b-ym18tvjdp6] {
    border-color: var(--color-primary, #008080);
    background: rgba(20, 184, 166, 0.12);
    color: var(--color-primary-dark, #0d7773);
}

.tpt-segment:focus-visible[b-ym18tvjdp6],
.accordion-button:focus-visible[b-ym18tvjdp6] {
    outline: 2px solid var(--color-primary, #008080);
    outline-offset: 2px;
}

.tpt-root .accordion-header[b-ym18tvjdp6] {
    width: 100%;
}

.tpt-root .accordion-button[b-ym18tvjdp6] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.25rem 0;
    border: 0;
    background: transparent;
    color: var(--text-primary, #111827);
    text-align: left;
    cursor: pointer;
}

.tpt-root .accordion-toggle-icon[b-ym18tvjdp6] {
    color: var(--color-primary-dark, #0d7773);
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.tpt-root .accordion-button:not(.collapsed) .accordion-toggle-icon[b-ym18tvjdp6] {
    transform: rotate(90deg);
}

.tpt-root .accordion-title[b-ym18tvjdp6] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.tpt-root .quick-ad-accordion-body[b-ym18tvjdp6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.75rem;
}

.tpt-checkbox-list[b-ym18tvjdp6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 0.5rem;
}

.tpt-checkbox-item[b-ym18tvjdp6],
.tpt-toggle-label[b-ym18tvjdp6] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    color: var(--text-secondary, #4b5563);
    font-size: 0.875rem;
    line-height: 1.45;
    cursor: pointer;
}

.tpt-checkbox-item input[b-ym18tvjdp6],
.tpt-toggle-label input[b-ym18tvjdp6] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0.125rem 0 0;
    accent-color: var(--color-primary, #008080);
}

.tpt-advantage-section[b-ym18tvjdp6] {
    border-color: var(--card-border, #dbe4ea);
}

.tpt-advantage-toggle[b-ym18tvjdp6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.tpt-tooltip[b-ym18tvjdp6] {
    color: var(--text-muted, #6b7280);
    cursor: help;
}

.tpt-root .field-tip[b-ym18tvjdp6] {
    margin: -0.375rem 0 0;
    color: var(--text-muted, #6b7280);
    font-size: 0.8125rem;
    line-height: 1.5;
}

@media (max-width: 680px) {
    .tpt-root .form-field-row[b-ym18tvjdp6] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tpt-age-row[b-ym18tvjdp6] {
        grid-template-columns: minmax(0, 1fr) 2.5rem;
    }

    .tpt-age-row > span:nth-of-type(2)[b-ym18tvjdp6] {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .tpt-age-row > input:nth-of-type(2)[b-ym18tvjdp6] {
        grid-column: 1;
    }

    .tpt-age-row > span:nth-of-type(3)[b-ym18tvjdp6] {
        grid-column: 2;
        grid-row: 3;
    }
}
/* /Components/MetaAds/TargetingSearchBox.razor.rz.scp.css */
.tsb-root[b-2x1ql026p6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tsb-label[b-2x1ql026p6] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}

.tsb-input-row[b-2x1ql026p6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.tsb-input[b-2x1ql026p6] {
    flex: 1;
    padding: 0.5rem 0.85rem;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--card-bg);
    color: var(--text-primary);
    min-height: 42px;
    box-sizing: border-box;
}

.tsb-input:focus[b-2x1ql026p6] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.15);
}

.tsb-spinner[b-2x1ql026p6] {
    font-size: 0.9rem;
}

.tsb-dropdown[b-2x1ql026p6] {
    background: var(--card-bg);
    border: 1.5px solid var(--card-border);
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.tsb-result-item[b-2x1ql026p6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.9rem;
    cursor: pointer;
    transition: background 0.1s;
}

.tsb-result-item:hover[b-2x1ql026p6] {
    background: rgba(20, 184, 166, 0.1);
}

.tsb-result-name[b-2x1ql026p6] {
    font-size: 0.88rem;
    color: var(--text-primary);
}

.tsb-result-size[b-2x1ql026p6] {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.tsb-chips[b-2x1ql026p6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tsb-chip[b-2x1ql026p6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    background: rgba(20, 184, 166, 0.15);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
}

.tsb-chip-remove[b-2x1ql026p6] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1;
    padding: 0;
}

.tsb-chip-remove:hover[b-2x1ql026p6] {
    color: var(--text-primary);
}
/* /Components/MetaAds/TargetingTaxonomyTab.razor.rz.scp.css */
.ttt-root[b-klipgdh091] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    color: var(--text-primary, #111827);
}

.ttt-root .tpt-segmented[b-klipgdh091] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.ttt-root .tpt-segment[b-klipgdh091] {
    min-height: 38px;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--border-color, #dbe4ea);
    border-radius: 6px;
    background: var(--card-bg, #fff);
    color: var(--text-secondary, #4b5563);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.ttt-root .tpt-segment:hover[b-klipgdh091],
.ttt-root .tpt-segment.active[b-klipgdh091] {
    border-color: var(--color-primary, #008080);
}

.ttt-root .tpt-segment.active[b-klipgdh091] {
    background: rgba(20, 184, 166, 0.12);
    color: var(--color-primary-dark, #0d7773);
}

.ttt-mode-indicator[b-klipgdh091] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--card-border, #dbe4ea);
    border-radius: 6px;
    background: var(--input-bg-light, #f3f6f7);
}

.ttt-radio[b-klipgdh091] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary, #4b5563);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.ttt-radio input[b-klipgdh091] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-primary, #008080);
}

.ttt-radio.disabled[b-klipgdh091] {
    color: var(--text-muted, #6b7280);
    cursor: not-allowed;
}

.ttt-tree[b-klipgdh091] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ttt-search[b-klipgdh091],
.ttt-tray[b-klipgdh091] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-width: 0;
}

.ttt-search .form-field-row[b-klipgdh091] {
    display: grid;
    grid-template-columns: minmax(140px, 0.8fr) minmax(160px, 1.5fr) auto;
    align-items: center;
    gap: 0.625rem;
}

.ttt-search .form-select[b-klipgdh091],
.ttt-search .form-input[b-klipgdh091] {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-color, #dbe4ea);
    border-radius: 6px;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #111827);
    font: inherit;
    box-sizing: border-box;
}

.ttt-search .form-select:focus[b-klipgdh091],
.ttt-search .form-input:focus[b-klipgdh091] {
    outline: none;
    border-color: var(--color-primary, #008080);
    box-shadow: var(--form-input-focus-shadow, 0 0 0 3px rgba(20, 184, 166, 0.1));
}

.ttt-search .btn-secondary[b-klipgdh091] {
    min-height: 42px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color, #dbe4ea);
    border-radius: 6px;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #111827);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.ttt-search .btn-secondary:hover:not(:disabled)[b-klipgdh091] {
    border-color: var(--color-primary, #008080);
    background: var(--card-bg-hover, #f8fbfb);
}

.ttt-search .btn-secondary:disabled[b-klipgdh091] {
    opacity: 0.55;
    cursor: not-allowed;
}

.ttt-search-results[b-klipgdh091] {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--card-border, #dbe4ea);
    border-radius: 6px;
    background: var(--card-bg, #fff);
}

.ttt-search-results .tsb-result-item[b-klipgdh091] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--line-soft, rgba(0, 0, 0, 0.05));
    cursor: pointer;
}

.ttt-search-results .tsb-result-item:last-child[b-klipgdh091] {
    border-bottom: 0;
}

.ttt-search-results .tsb-result-item:hover[b-klipgdh091] {
    background: rgba(20, 184, 166, 0.08);
}

.ttt-search-results .tsb-result-name[b-klipgdh091] {
    color: var(--text-primary, #111827);
    font-size: 0.875rem;
}

.ttt-search-results .tsb-result-size[b-klipgdh091] {
    flex: 0 0 auto;
    color: var(--text-muted, #6b7280);
    font-size: 0.75rem;
}

.ttt-suggestions[b-klipgdh091],
.ttt-chips[b-klipgdh091] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ttt-pill[b-klipgdh091] {
    max-width: 100%;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--card-border, #dbe4ea);
    border-radius: 6px;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #111827);
    font: inherit;
    font-size: 0.8125rem;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.ttt-pill:hover[b-klipgdh091] {
    border-color: var(--color-primary, #008080);
    background: rgba(20, 184, 166, 0.08);
}

.ttt-tray[b-klipgdh091] {
    padding-top: 0.875rem;
    border-top: 1px solid var(--card-border, #dbe4ea);
}

.ttt-tray-group[b-klipgdh091] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ttt-tray-group > label[b-klipgdh091] {
    color: var(--text-primary, #111827);
    font-size: 0.8125rem;
    font-weight: 600;
}

.ttt-chip[b-klipgdh091] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    max-width: 100%;
    padding: 0.25rem 0.375rem 0.25rem 0.625rem;
    border: 1px solid var(--card-border, #dbe4ea);
    border-radius: 6px;
    color: var(--text-primary, #111827);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.ttt-chip-include[b-klipgdh091] {
    background: rgba(20, 184, 166, 0.1);
}

.ttt-chip-exclude[b-klipgdh091] {
    background: rgba(239, 68, 68, 0.08);
}

.ttt-chip .tsb-chip-remove[b-klipgdh091] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary, #4b5563);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.ttt-chip .tsb-chip-remove:hover[b-klipgdh091] {
    background: rgba(15, 23, 42, 0.08);
    color: var(--text-primary, #111827);
}

.ttt-root .empty-state[b-klipgdh091] {
    margin: 0;
    color: var(--text-muted, #6b7280);
    font-size: 0.875rem;
}

@media (max-width: 720px) {
    .ttt-search .form-field-row[b-klipgdh091] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ttt-search .btn-secondary[b-klipgdh091] {
        justify-self: start;
    }
}
/* /Components/MetaAds/TaxonomyTreeGroup.razor.rz.scp.css */
.ttg-root[b-oj7dx44g55] {
    overflow: hidden;
    border: 1px solid var(--card-border, #dbe4ea);
    border-radius: 8px;
    background: var(--card-bg, #fff);
}

.ttg-root .accordion-header[b-oj7dx44g55] {
    width: 100%;
}

.ttg-root .accordion-button[b-oj7dx44g55] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    min-height: 46px;
    padding: 0.75rem 0.875rem;
    border: 0;
    background: var(--input-bg-light, #f3f6f7);
    color: var(--text-primary, #111827);
    text-align: left;
    cursor: pointer;
}

.ttg-root .accordion-button:hover[b-oj7dx44g55] {
    background: var(--card-bg-hover, #f8fbfb);
}

.ttg-root .accordion-button:focus-visible[b-oj7dx44g55],
.ttg-root[b-oj7dx44g55]  .ttg-branch-header:focus-visible {
    outline: 2px solid var(--color-primary, #008080);
    outline-offset: -2px;
}

.ttg-root .accordion-toggle-icon[b-oj7dx44g55],
.ttg-branch-icon[b-oj7dx44g55] {
    flex: 0 0 14px;
    color: var(--color-primary-dark, #0d7773);
    font-size: 0.7rem;
    text-align: center;
    transition: transform 0.15s ease;
}

.ttg-root .accordion-button:not(.collapsed) .accordion-toggle-icon[b-oj7dx44g55] {
    transform: rotate(90deg);
}

.ttg-root .accordion-title[b-oj7dx44g55] {
    margin: 0;
    color: var(--text-primary, #111827);
    font-size: 0.9375rem;
    font-weight: 600;
}

.ttg-body[b-oj7dx44g55] {
    padding: 0.5rem 0.75rem 0.75rem;
}

.ttg-root[b-oj7dx44g55]  .ttg-branch-level {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ttg-root[b-oj7dx44g55]  .ttg-branch {
    min-width: 0;
}

.ttg-root[b-oj7dx44g55]  .ttg-branch-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 36px;
    padding: 0.375rem 0.5rem;
    border-radius: 5px;
    color: var(--text-secondary, #4b5563);
    font-size: 0.875rem;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.ttg-root[b-oj7dx44g55]  .ttg-branch-header:hover {
    background: rgba(20, 184, 166, 0.08);
    color: var(--text-primary, #111827);
}

.ttg-root[b-oj7dx44g55]  .ttg-leaf {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-height: 34px;
    padding: 0.375rem 0.5rem 0.375rem 1.75rem;
    border-radius: 5px;
    color: var(--text-secondary, #4b5563);
    font-size: 0.8125rem;
    line-height: 1.4;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.ttg-root[b-oj7dx44g55]  .ttg-leaf:hover {
    background: rgba(20, 184, 166, 0.08);
    color: var(--text-primary, #111827);
}

.ttg-root[b-oj7dx44g55]  .ttg-leaf input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0.05rem 0 0;
    accent-color: var(--color-primary, #008080);
}
/* /Components/Pricing/PricingPlanGrid.razor.rz.scp.css */
.plan-grid[b-c913mtf8ww] {
    display: grid;
    width: min(1180px, 100%);
    margin: 42px auto 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.plan-grid.api-plan-grid[b-c913mtf8ww] {
    max-width: 760px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.api-plan-grid .plan-card.featured .plan-card-header[b-c913mtf8ww] { background: var(--brand-teal); color: var(--white-bg); }
.api-plan-grid .plan-card.featured .plan-index[b-c913mtf8ww] { color: var(--brand-accent); }
.api-plan-grid .plan-card.featured .plan-card-header h2[b-c913mtf8ww],
.api-plan-grid .plan-card.featured .plan-price[b-c913mtf8ww],
.api-plan-grid .plan-card.featured .plan-price strong[b-c913mtf8ww] { color: var(--white-bg); }
.api-plan-grid .plan-card.featured .plan-card-header p[b-c913mtf8ww],
.api-plan-grid .plan-card.featured .plan-price span[b-c913mtf8ww],
.api-plan-grid .plan-card.featured .plan-card-header small[b-c913mtf8ww] { color: var(--topbar-fixed-text-secondary); }

.plan-card[b-c913mtf8ww] {
    position: relative;
    overflow: visible;
    border: 1px solid var(--pricing-border);
    border-radius: 18px;
    background: var(--white-bg);
    box-shadow: var(--pricing-shadow-card);
    text-align: left;
}

.plan-card.featured[b-c913mtf8ww] {
    border: 2px solid var(--color-primary);
    box-shadow: var(--pricing-shadow-featured);
}

.plan-card.featured .plan-card-header[b-c913mtf8ww] {
    border-radius: 16px 16px 0 0;
}

.featured-label[b-c913mtf8ww] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    z-index: 1;
    top: -13px;
    left: 18px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--brand-dark);
    color: var(--white-bg);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
}

.plan-card-header[b-c913mtf8ww] {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 252px;
    padding: 25px 22px 20px;
    border-radius: 18px 18px 0 0;
    background: var(--pricing-surface-soft);
}

.plan-card:nth-child(4n + 1) .plan-card-header[b-c913mtf8ww],
.plan-card:nth-child(4n + 2) .plan-card-header[b-c913mtf8ww] { background: var(--pricing-surface-soft); }
.plan-card:nth-child(4n + 3) .plan-card-header[b-c913mtf8ww],
.plan-card:nth-child(4n) .plan-card-header[b-c913mtf8ww] {
    color: var(--white-bg);
}

.plan-card:nth-child(4n + 3) .plan-card-header[b-c913mtf8ww] { background: var(--brand-teal); }
.plan-card:nth-child(4n) .plan-card-header[b-c913mtf8ww] { background: var(--brand-dark); }

.plan-card:nth-child(4n + 3) .plan-index[b-c913mtf8ww],
.plan-card:nth-child(4n) .plan-index[b-c913mtf8ww] { color: var(--brand-accent); }

.plan-card:nth-child(4n + 3) .plan-card-header h2[b-c913mtf8ww],
.plan-card:nth-child(4n + 3) .plan-price[b-c913mtf8ww],
.plan-card:nth-child(4n + 3) .plan-price strong[b-c913mtf8ww],
.plan-card:nth-child(4n) .plan-card-header h2[b-c913mtf8ww],
.plan-card:nth-child(4n) .plan-price[b-c913mtf8ww],
.plan-card:nth-child(4n) .plan-price strong[b-c913mtf8ww] { color: var(--white-bg); }

.plan-card:nth-child(4n + 3) .plan-card-header p[b-c913mtf8ww],
.plan-card:nth-child(4n + 3) .plan-price span[b-c913mtf8ww],
.plan-card:nth-child(4n + 3) .plan-price del[b-c913mtf8ww],
.plan-card:nth-child(4n + 3) .plan-card-header small[b-c913mtf8ww],
.plan-card:nth-child(4n) .plan-card-header p[b-c913mtf8ww],
.plan-card:nth-child(4n) .plan-price span[b-c913mtf8ww],
.plan-card:nth-child(4n) .plan-price del[b-c913mtf8ww],
.plan-card:nth-child(4n) .plan-card-header small[b-c913mtf8ww] {
    color: var(--topbar-fixed-text-secondary);
}

.plan-card:nth-child(4n + 3) .plan-price .plan-discount-badge[b-c913mtf8ww],
.plan-card:nth-child(4n) .plan-price .plan-discount-badge[b-c913mtf8ww] { color: var(--pricing-success); }

.plan-index[b-c913mtf8ww] {
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
}

.plan-card-header h2[b-c913mtf8ww] {
    margin: 12px 0 5px;
    color: var(--pricing-text);
    font-size: 22px;
    font-weight: 800;
}

.plan-card-header p[b-c913mtf8ww] {
    min-height: 44px;
    margin: 0;
    color: var(--pricing-text-muted);
    font-size: 12px;
    line-height: 1.55;
}

.plan-price[b-c913mtf8ww] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: auto;
    color: var(--pricing-text);
}

.plan-price del[b-c913mtf8ww] { color: var(--pricing-text-soft); font-size: 13px; }
.plan-price strong[b-c913mtf8ww] { font-size: 32px; font-weight: 850; letter-spacing: -.05em; }
.plan-price span[b-c913mtf8ww] { color: var(--pricing-text-muted); font-size: 12px; }
.plan-price.is-discounted[b-c913mtf8ww] {
    min-height: 54px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
}
.plan-discount-original[b-c913mtf8ww],
.plan-discount-current[b-c913mtf8ww] { display: flex; align-items: center; gap: 8px; }
.plan-discount-original[b-c913mtf8ww] { min-height: 16px; }
.plan-discount-original del[b-c913mtf8ww] { color: var(--pricing-text-soft); font-size: 12px; }
.plan-discount-current[b-c913mtf8ww] { align-items: baseline; }
.plan-discount-current strong[b-c913mtf8ww] { font-size: 32px; font-weight: 850; letter-spacing: -.05em; }
.plan-discount-current span[b-c913mtf8ww] { color: var(--pricing-text-muted); font-size: 12px; white-space: nowrap; }
.plan-discount-badge[b-c913mtf8ww],
.comparison-discount-badge[b-c913mtf8ww] {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--pricing-surface-highlight);
    color: var(--pricing-success);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}
.plan-card-header small[b-c913mtf8ww] { display: block; margin-top: 4px; color: var(--pricing-text-muted); font-size: 11px; }

.plan-card-content[b-c913mtf8ww] {
    padding: 20px 22px 24px;
}

.plan-action[b-c913mtf8ww] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 21px;
    padding: 12px 14px;
    border: 1px solid var(--pricing-border-strong);
    border-radius: 9px;
    color: var(--pricing-text);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.plan-card.featured .plan-action[b-c913mtf8ww] {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--white-bg);
}

.plan-action:hover[b-c913mtf8ww] { filter: brightness(.96); }
.plan-action .bi[b-c913mtf8ww] { font-size: 17px; }

.plan-card-content h3[b-c913mtf8ww] {
    margin: 0 0 13px;
    color: var(--pricing-text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.plan-card-content ul[b-c913mtf8ww] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.plan-card-content li[b-c913mtf8ww] {
    position: relative;
    padding-left: 22px;
    color: var(--pricing-text);
    font-size: 12px;
    line-height: 1.45;
}

.channel-section[b-c913mtf8ww] {
    margin: 3px 0 20px;
}

.channel-section h3[b-c913mtf8ww],
.feature-group h3[b-c913mtf8ww] {
    margin: 0 0 12px;
    color: var(--pricing-text-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.channel-list[b-c913mtf8ww] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.channel-chip[b-c913mtf8ww] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 31px;
    padding: 5px 9px;
    border: 1px solid var(--pricing-border);
    border-radius: 999px;
    background: var(--white-bg);
    color: var(--pricing-text);
    font-size: 11px;
    white-space: nowrap;
}

.channel-chip.unavailable[b-c913mtf8ww] { background: var(--pricing-background); color: var(--pricing-text-soft); }
.channel-mark[b-c913mtf8ww] { color: var(--pricing-success); font-size: 15px; font-weight: 800; line-height: 1; }
.channel-chip:nth-child(2) .channel-mark[b-c913mtf8ww] { color: var(--pricing-danger); }
.channel-chip:nth-child(3) .channel-mark[b-c913mtf8ww] { color: var(--color-info); }
.channel-chip:nth-child(4) .channel-mark[b-c913mtf8ww] { color: var(--pricing-accent); }
.channel-lock[b-c913mtf8ww] { font-size: 10px; }

.feature-group[b-c913mtf8ww] { margin-top: 19px; }
.feature-group h3[b-c913mtf8ww] { margin-bottom: 12px; }
.plan-card-content .feature-group ul[b-c913mtf8ww] { gap: 8px; }
.plan-card-content .feature-row[b-c913mtf8ww] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 0;
    color: var(--pricing-text);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}
.plan-card-content .feature-row[b-c913mtf8ww]::before { display: none !important; }
.plan-card-content .feature-row.excluded[b-c913mtf8ww] { color: var(--pricing-text-soft); }
.feature-status[b-c913mtf8ww] { width: 14px; flex: 0 0 14px; color: var(--pricing-success); font-size: 14px; line-height: 15px; }
.plan-card-content .feature-row.excluded .feature-status[b-c913mtf8ww] { color: var(--pricing-danger); }
.feature-row.extra[b-c913mtf8ww] { display: none; }
.plan-card-content.expanded .feature-row.extra[b-c913mtf8ww] { display: flex; }
.show-features[b-c913mtf8ww] { margin-top: 16px; padding: 0; border: 0; background: transparent; color: var(--pricing-success); cursor: pointer; font-size: 11px; font-weight: 700; }

.meta-fee-section strong[b-c913mtf8ww] {
    display: block;
    color: var(--pricing-accent);
    font-size: 13px;
    font-weight: 800;
}

.meta-fee-section p[b-c913mtf8ww] {
    margin: 6px 0 12px;
    color: var(--pricing-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.meta-pricing-link[b-c913mtf8ww] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pricing-accent);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.meta-pricing-link:hover[b-c913mtf8ww] { text-decoration: underline; }

@media (max-width: 1000px) {
    .plan-grid[b-c913mtf8ww] { max-width: 760px; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}

@media (max-width: 560px) {
    .plan-grid[b-c913mtf8ww] { max-width: 420px; grid-template-columns: 1fr; }
    .plan-grid.api-plan-grid[b-c913mtf8ww] { max-width: 420px; grid-template-columns: 1fr; }
    .plan-card-header[b-c913mtf8ww] { height: auto; min-height: 0; }
    .plan-card-header p[b-c913mtf8ww] { min-height: 0; }
}
/* /Components/Settings/SettingsApiKeysPanel.razor.rz.scp.css */
.api-keys-container[b-lnugkxcp5s] {
    padding: 0;
    color: var(--text-primary);
}

.api-keys-header[b-lnugkxcp5s] {
    display: flex;
    max-width: none;
    margin: 0 0 1.5rem;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding: 28px;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.page-title[b-lnugkxcp5s] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.header-content p[b-lnugkxcp5s] {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0 0;
}

.btn-generate-primary[b-lnugkxcp5s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border: none;
    border-radius: 0.75rem;
    color: var(--text-white);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 25px rgba(20, 184, 166, 0.2);
    white-space: nowrap;
}

.btn-generate-primary:hover[b-lnugkxcp5s] {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(20, 184, 166, 0.3);
}

.btn-generate-primary:active[b-lnugkxcp5s] {
    transform: translateY(0);
}

.btn-icon[b-lnugkxcp5s] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.api-keys-main[b-lnugkxcp5s] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: none;
    margin: 0;
}

.api-keys-section[b-lnugkxcp5s] {
    width: 100%;
}

.empty-state[b-lnugkxcp5s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    border-style: dashed;
    text-align: center;
    backdrop-filter: blur(12px);
}

.empty-icon[b-lnugkxcp5s] {
    font-size: 3.5rem;
    opacity: 0.6;
}

.empty-state h3[b-lnugkxcp5s] {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin: 0.5rem 0;
}

.empty-state p[b-lnugkxcp5s] {
    color: var(--text-muted);
    margin: 0;
    max-width: 300px;
}

.btn-generate-secondary[b-lnugkxcp5s] {
    margin-top: 1rem;
    padding: 0.625rem 1.25rem;
    background: var(--color-primary);
    border: none;
    border-radius: 0.5rem;
    color: var(--text-white);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-generate-secondary:hover[b-lnugkxcp5s] {
    background: var(--color-primary-light);
}

/* ===== Loading State ===== */
.loading-state[b-lnugkxcp5s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 4rem 2rem;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    backdrop-filter: blur(12px);
}

.loading-spinner[b-lnugkxcp5s] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(20, 184, 166, 0.2);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-lnugkxcp5s 1s linear infinite;
}

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

.loading-state p[b-lnugkxcp5s] {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ===== Keys Grid ===== */
.keys-grid[b-lnugkxcp5s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* ===== Key Card ===== */
/* FIX: card bg/border were hardcoded white overlays — swapped for the
   themed --card-bg / --card-border pair so cards read correctly on
   both a dark and a light page background. */
.key-card[b-lnugkxcp5s] {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
}

.key-card:hover[b-lnugkxcp5s] {
    border-color: var(--contact-card-hover-border, #14B8A6);
    background: var(--card-bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.key-card.inactive[b-lnugkxcp5s] {
    opacity: 0.65;
}

/* ===== Card Header ===== */
/* FIX: border-bottom/background were fixed white-alpha values;
   now derived from the same card border token so it stays visible
   (but subtle) in both themes. */
.key-card-header[b-lnugkxcp5s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--card-border);
    background: var(--glass-bg);
}

.key-title-section[b-lnugkxcp5s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.key-status-indicator[b-lnugkxcp5s] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse-b-lnugkxcp5s 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.key-status-indicator.active[b-lnugkxcp5s] {
    background: var(--color-primary);
}

.key-status-indicator.inactive[b-lnugkxcp5s] {
    background: var(--text-muted);
    animation: none;
}

@keyframes pulse-b-lnugkxcp5s {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.key-info h3[b-lnugkxcp5s] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-primary);
    word-break: break-word;
}

.key-id[b-lnugkxcp5s] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0 0;
    font-family: 'Quicksand', sans-serif;
}

/* ===== Card Body ===== */
.key-card-body[b-lnugkxcp5s] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
}

.key-stat[b-lnugkxcp5s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.stat-label[b-lnugkxcp5s] {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.stat-value[b-lnugkxcp5s] {
    font-size: 0.9rem;
    color: var(--color-primary-light);
    text-align: right;
}

.badge[b-lnugkxcp5s] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* FIX: swapped to the status-approved / status-disabled tokens, which
   already have correctly-contrasted light/dark values, instead of a
   single fixed teal/grey pairing. */
.badge-active[b-lnugkxcp5s] {
    background: var(--status-approved-bg);
    color: var(--status-approved-text);
    border: 1px solid rgba(20, 184, 166, 0.3);
}

.badge-inactive[b-lnugkxcp5s] {
    background: var(--status-disabled-bg);
    color: var(--status-disabled-text);
    border: 1px solid rgba(156, 163, 175, 0.3);
}

/* ===== Card Footer ===== */
/* FIX: this was the worst offender — a literal
   linear-gradient(#ffffff, #f8fbfb) baked in, so the footer stayed
   pure white even in dark mode. Now built from the theme's card
   tokens so it matches the card body in either theme. */
.key-card-footer[b-lnugkxcp5s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-top: 1px solid var(--card-border);
    background: linear-gradient(180deg, var(--card-bg), var(--card-bg-hover));
}

/* Base Button */
.btn-action[b-lnugkxcp5s] {
    flex: 1;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
}

.btn-action i[b-lnugkxcp5s] {
    font-size: 1rem;
}

/* Regenerate */
.btn-regenerate[b-lnugkxcp5s] {
    background: linear-gradient(135deg, #14B8A6, #0D9488);
    color: #fff;
    box-shadow: 0 8px 18px rgba(20, 184, 166, .25);
}

.btn-regenerate:hover[b-lnugkxcp5s] {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(20, 184, 166, .35);
}

/* Activate / Deactivate */
/* FIX: --brand-teal is a single fixed dark tone with low contrast on
   a dark card background. --color-primary-light reads clearly on
   both themes against the translucent teal chip. */
.btn-toggle[b-lnugkxcp5s] {
    background: rgba(20, 184, 166, .08);
    color: var(--color-primary-light);
    border: 1px solid rgba(20, 184, 166, .2);
}

.btn-toggle:hover[b-lnugkxcp5s] {
    background: rgba(20, 184, 166, .15);
    border-color: rgba(20, 184, 166, .4);
    transform: translateY(-2px);
}

/* Delete */
.btn-delete[b-lnugkxcp5s] {
    background: rgba(239, 68, 68, .08);
    color: var(--danger-color);
    border: 1px solid rgba(239, 68, 68, .18);
}

.btn-delete:hover[b-lnugkxcp5s] {
    background: var(--danger-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(239, 68, 68, .28);
}

/* Ripple Shine */
.btn-action[b-lnugkxcp5s]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        transparent,
        rgba(255, 255, 255, .25),
        transparent);
    transform: translateX(-120%);
    transition: .6s;
}

.btn-action:hover[b-lnugkxcp5s]::before {
    transform: translateX(120%);
}

.btn-action:active[b-lnugkxcp5s] {
    transform: scale(.97);
}

/* Responsive */
@media (max-width: 768px) {
    .key-card-footer[b-lnugkxcp5s] {
        flex-direction: column;
    }

    .btn-action[b-lnugkxcp5s] {
        width: 100%;
    }
}

/* ===== Modal Styles ===== */
.modal-overlay[b-lnugkxcp5s] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 1000;
    animation: fadeIn-b-lnugkxcp5s 0.2s ease-out;
}

@keyframes fadeIn-b-lnugkxcp5s {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-panel[b-lnugkxcp5s] {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    background: var(--color-surface);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: slideUp-b-lnugkxcp5s 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp-b-lnugkxcp5s {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-panel.mac-style[b-lnugkxcp5s] {
    border-radius: 1rem;
}

/* ===== macOS Traffic Lights ===== */
.modal-header-mac[b-lnugkxcp5s] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--mac-header-gradient);
    border-bottom: 1px solid var(--border-color);
}

.traffic-lights[b-lnugkxcp5s] {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.light[b-lnugkxcp5s] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.light.red[b-lnugkxcp5s] {
    background: var(--red-light);
}

.light.yellow[b-lnugkxcp5s] {
    background: var(--yellow-light);
}

.light.green[b-lnugkxcp5s] {
    background: var(--green-light);
}

.modal-header-mac h2[b-lnugkxcp5s] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
    flex: 1;
}

/* ===== Modal Body ===== */
.modal-body[b-lnugkxcp5s] {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.modal-body h3[b-lnugkxcp5s] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.modal-body p[b-lnugkxcp5s] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ===== Form Styles ===== */
.form-group[b-lnugkxcp5s] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label[b-lnugkxcp5s] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-input[b-lnugkxcp5s] {
    padding: 0.75rem 1rem;
    background: var(--input-background);
    border: 1px solid var(--border-color);
    border-radius: 0.625rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: 'Quicksand', sans-serif;
    transition: all 0.2s;
}

.form-input[b-lnugkxcp5s]::placeholder {
    color: var(--text-muted);
}

.form-input:focus[b-lnugkxcp5s] {
    outline: none;
    background: var(--input-background-focus);
    border-color: var(--color-primary);
    box-shadow: var(--input-shadow);
}

.form-hint[b-lnugkxcp5s] {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

.validity-selector[b-lnugkxcp5s] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.validity-option[b-lnugkxcp5s] {
    padding: 0.5rem;
    background: var(--input-background);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.validity-option:hover[b-lnugkxcp5s] {
    border-color: var(--color-primary);
}

.validity-option.selected[b-lnugkxcp5s] {
    background: var(--input-background-focus);
    border-color: var(--color-primary);
    color: var(--color-primary-light);
}

/* ===== Key Display ===== */
/* Kept intentionally dark (terminal-style) in both themes for
   emphasis/contrast against the masked or revealed key text. */
.key-display-box[b-lnugkxcp5s] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    overflow: hidden;
}

.key-content[b-lnugkxcp5s] {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.key-code[b-lnugkxcp5s] {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.85rem;
    color: var(--color-primary-light);
    word-break: break-all;
    margin: 0;
    white-space: pre-wrap;
}

.key-code.masked[b-lnugkxcp5s] {
    letter-spacing: 0.15em;
    color: var(--text-muted);
}

.btn-icon-only[b-lnugkxcp5s] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(20, 184, 166, 0.1);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 0.5rem;
    color: var(--color-primary-light);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-icon-only:hover[b-lnugkxcp5s] {
    background: rgba(20, 184, 166, 0.2);
}

/* ===== Success Icon ===== */
.success-msg[b-lnugkxcp5s] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.success-icon[b-lnugkxcp5s] {
    font-size: 1.5rem;
    margin: 1rem 0;
    color: var(--color-success, var(--color-primary));
}

.reveal-warning[b-lnugkxcp5s] {
    padding: 0.75rem 1rem;
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid var(--color-secondary);
    border-radius: 0.5rem;
    color: var(--color-secondary);
    font-size: 0.9rem;
}

/* ===== Modal Footer ===== */
/* FIX: rgba(255,255,255,0.02) → --glass-bg so the footer strip is
   visible against a light-theme white modal too. */
.modal-footer[b-lnugkxcp5s] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--glass-bg);
    border-top: 1px solid var(--border-color);
}

.btn-primary[b-lnugkxcp5s],
.btn-secondary[b-lnugkxcp5s] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.625rem;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary[b-lnugkxcp5s] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--text-white);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

.btn-primary:hover[b-lnugkxcp5s] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.4);
}

.btn-primary:disabled[b-lnugkxcp5s] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* FIX: rgba(255,255,255,0.08)/0.12 was a "light overlay" trick that
   only works on a dark surface — on the light theme it just
   disappeared into the white modal. --glass-bg / --glass-bg-hover
   are the themed equivalents. */
.btn-secondary[b-lnugkxcp5s] {
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover[b-lnugkxcp5s] {
    background: var(--glass-bg-hover);
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
    .api-keys-container[b-lnugkxcp5s] {
        padding: 1rem;
        gap: 1.5rem;
    }

    .api-keys-header[b-lnugkxcp5s] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1.5rem;
    }

    .header-content h1[b-lnugkxcp5s] {
        font-size: 2rem;
    }

    .keys-grid[b-lnugkxcp5s] {
        grid-template-columns: 1fr;
    }

    .modal-panel[b-lnugkxcp5s] {
        width: 95%;
        max-height: 95vh;
    }

    .validity-selector[b-lnugkxcp5s] {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal-footer[b-lnugkxcp5s] {
        flex-direction: column-reverse;
    }

    .modal-footer button[b-lnugkxcp5s] {
        width: 100%;
    }
}

.modal-body[b-lnugkxcp5s]::-webkit-scrollbar {
    width: 6px;
}

.modal-body[b-lnugkxcp5s]::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body[b-lnugkxcp5s]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.modal-body[b-lnugkxcp5s]::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-light);
}
/* /Components/Settings/SettingsProfilePanel.razor.rz.scp.css */
    .profile-container[b-z7qt48zhlu] {
    padding: 0;
    max-width: none;
    margin: 0;
    min-height: auto;
    padding-bottom: 0;
    /* background: var(--page-bg); */
}

.profile-page[b-z7qt48zhlu] {
    color: var(--text-dark);
}

/* ===== Identity badge ===== */
.profile-identity[b-z7qt48zhlu] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 1.75rem;
}

.profile-avatar[b-z7qt48zhlu] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--text-white);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    box-shadow: 0 6px 16px rgba(0, 128, 128, 0.25);
}

/* ===== Header ===== */
.profile-header[b-z7qt48zhlu] {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    /* margin-bottom: 2rem; */
    flex-wrap: wrap;
}

.profile-header div[b-z7qt48zhlu] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-header h1[b-z7qt48zhlu] {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -0.01em;
}

.profile-header p[b-z7qt48zhlu] {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.92rem;
}

/* ===== Buttons ===== */
.edit-btn[b-z7qt48zhlu],
.add-address-btn[b-z7qt48zhlu],
.save-btn[b-z7qt48zhlu],
.cancel-btn[b-z7qt48zhlu],
.delete-btn[b-z7qt48zhlu],
.edit-address-btn[b-z7qt48zhlu] {
    padding: 11px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.edit-btn[b-z7qt48zhlu],
.add-address-btn[b-z7qt48zhlu],
.save-btn[b-z7qt48zhlu] {
    background: linear-gradient(120deg, var(--color-primary), var(--color-primary-light));
    color: var(--text-white);
    box-shadow: var(--shadow-sm);
}

.edit-btn:hover[b-z7qt48zhlu],
.add-address-btn:hover[b-z7qt48zhlu],
.save-btn:hover:not(:disabled)[b-z7qt48zhlu] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.edit-btn:focus-visible[b-z7qt48zhlu],
.add-address-btn:focus-visible[b-z7qt48zhlu],
.save-btn:focus-visible[b-z7qt48zhlu],
.cancel-btn:focus-visible[b-z7qt48zhlu],
.delete-btn:focus-visible[b-z7qt48zhlu],
.edit-address-btn:focus-visible[b-z7qt48zhlu] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.cancel-btn[b-z7qt48zhlu] {
    background: var(--light-bg);
    color: var(--text-dark);
    border: 1px solid var(--input-border-light);
}

/* .cancel-btn:hover:not(:disabled) {
    background: var(--light-bg);
} */

.delete-btn[b-z7qt48zhlu] {
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger-color);
    padding: 7px 12px;
    font-size: 0.82rem;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.delete-btn:hover:not(:disabled)[b-z7qt48zhlu] {
    background: rgba(239, 68, 68, 0.14);
}

.edit-address-btn[b-z7qt48zhlu] {
    background: transparent;
    color: var(--color-primary);
    padding: 6px 10px;
    font-size: 0.82rem;
    border: 1px solid transparent;
}

.edit-address-btn:hover[b-z7qt48zhlu] {
    background: rgba(0, 128, 128, 0.08);
}

button:disabled[b-z7qt48zhlu] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
}

/* ===== Messages ===== */
.success-message[b-z7qt48zhlu],
.error-message[b-z7qt48zhlu] {
    padding: 0.9rem 1.4rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    animation: slideIn-b-z7qt48zhlu 0.3s ease;
}

@keyframes slideIn-b-z7qt48zhlu {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.success-message[b-z7qt48zhlu] {
    background: rgba(39, 201, 63, 0.1);
    color: #1e7a2e;
    border: 1px solid rgba(39, 201, 63, 0.3);
}

.error-message[b-z7qt48zhlu] {
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger-color);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ===== Cards ===== */
.profile-card[b-z7qt48zhlu] {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 1.75rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s ease;
}

.profile-card:hover[b-z7qt48zhlu] {
    box-shadow: var(--shadow-md);
}

.card-header[b-z7qt48zhlu] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1.5rem;
    background: var(--light-bg);
    border-bottom: 1px solid var(--card-border);
    border-top: 3px solid var(--color-primary);
}

.card-header h2[b-z7qt48zhlu] { 
    margin: 0;
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 600;
}

/* small section marker replacing the old window "traffic lights" */
.card-icon[b-z7qt48zhlu] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18);
}

/* ===== Grid and Form ===== */
.form-grid[b-z7qt48zhlu],
.profile-grid[b-z7qt48zhlu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 2rem;
    padding: 1.75rem;
}

.full-width[b-z7qt48zhlu] {
    grid-column: 1 / -1;
}

.form-group[b-z7qt48zhlu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.form-label[b-z7qt48zhlu] {
    margin-bottom: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
}

.form-label.required[b-z7qt48zhlu]::after {
    content: ' *';
    color: var(--danger-color);
}

.display-value[b-z7qt48zhlu] {
    padding: 11px 14px;
    font-size: 0.92rem;
    color: var(--text-dark);
    background: var(--light-bg);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
}

.read-only-badge[b-z7qt48zhlu] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: rgba(245, 158, 11, 0.14);
    color: var(--color-secondary-dark);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: 4px;
    margin-left: 0.5rem;
    text-transform: uppercase;
}

.form-group input[b-z7qt48zhlu],
.form-input[b-z7qt48zhlu] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--input-border-light);
    background: var(--input-bg-light);
    color: var(--text-dark);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 0.92rem;
}

.form-group input:focus[b-z7qt48zhlu],
.form-input:focus[b-z7qt48zhlu] {
    border-color: var(--color-primary);
    box-shadow: var(--input-shadow-light);
}

.form-group input:disabled[b-z7qt48zhlu],
.form-input-disabled[b-z7qt48zhlu] {
    background: var(--light-bg);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.85;
}

.form-group input[b-z7qt48zhlu]::placeholder {
    color: var(--text-muted);
}

/* ===== Billing Addresses ===== */
.addresses-list[b-z7qt48zhlu] {
    padding: 1.75rem;
}

.address-item[b-z7qt48zhlu] {
    position: relative;
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    background: var(--card-bg);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.address-item:hover[b-z7qt48zhlu] {
    background: var(--card-bg-hover);
}

.address-item.default[b-z7qt48zhlu] {
    border-color: rgba(0, 128, 128, 0.4);
    background: rgba(20, 184, 166, 0.045);
}

.address-content[b-z7qt48zhlu] {
    flex: 1;
}

.address-label[b-z7qt48zhlu] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.4rem;
}

.address-text[b-z7qt48zhlu] {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* "default" reads like a rotated ink stamp rather than a plain pill */
.default-badge[b-z7qt48zhlu] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 4px;
    transform: rotate(-3deg);
}

.address-actions[b-z7qt48zhlu] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.address-form[b-z7qt48zhlu] {
    padding: 1.4rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: var(--light-bg);
    margin-bottom: 1rem;
}

.address-form h3[b-z7qt48zhlu] {
    font-size: 1rem;
}

.address-grid[b-z7qt48zhlu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.address-full-width[b-z7qt48zhlu] {
    grid-column: 1 / -1;
}

.default-address-setting[b-z7qt48zhlu] {
    width: fit-content;
    max-width: 100%;
    flex-direction: row;
    align-items: center;
    gap: .7rem;
}

.default-address-setting input[type="checkbox"][b-z7qt48zhlu] {
    width: 16px;
    min-width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin: 0;
    accent-color: var(--color-primary);
}

.default-address-setting label[b-z7qt48zhlu] {
    margin: 0;
    white-space: nowrap;
    cursor: pointer;
}

.form-actions[b-z7qt48zhlu] {
    display: flex;
    justify-content: flex-end;
    gap: 0.9rem;
    padding: 1.75rem;
    border-top: 1px solid var(--card-border);
    background: var(--light-bg);
}

.empty-addresses[b-z7qt48zhlu] {
    color: var(--text-muted);
    text-align: center;
    padding: 2rem;
    font-size: 0.9rem;
}

/* ===== Loading ===== */
.loading-container[b-z7qt48zhlu] {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .edit-btn[b-z7qt48zhlu], .add-address-btn[b-z7qt48zhlu], .save-btn[b-z7qt48zhlu], .cancel-btn[b-z7qt48zhlu], .delete-btn[b-z7qt48zhlu],
    .edit-address-btn[b-z7qt48zhlu], .profile-card[b-z7qt48zhlu], .address-item[b-z7qt48zhlu] {
        transition: none;
    }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .profile-container[b-z7qt48zhlu] { padding: 0; }

    .profile-header[b-z7qt48zhlu] {
        flex-direction: column;
        align-items: flex-start;
    }

    .edit-btn[b-z7qt48zhlu],
    .add-address-btn[b-z7qt48zhlu] {
        width: 100%;
        justify-content: center;
    }

    .form-grid[b-z7qt48zhlu],
    .profile-grid[b-z7qt48zhlu] {
        grid-template-columns: 1fr;
        padding: 1.25rem;
    }

    .address-item[b-z7qt48zhlu] {
        flex-direction: column;
    }

    .address-actions[b-z7qt48zhlu] {
        justify-content: flex-start;
    }

    .form-actions[b-z7qt48zhlu] {
        flex-direction: column-reverse;
        padding: 1.25rem;
    }

    .form-actions button[b-z7qt48zhlu] {
        width: 100%;
    }

    .address-grid[b-z7qt48zhlu] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Settings/SettingsTeamManagementPanel.razor.rz.scp.css */

.team-management-container[b-sm5pzbr0f1] {
    padding: 0;
    color: var(--text-primary);
}

.page-header[b-sm5pzbr0f1] {
    max-width: none;
    margin: 0 0 1.5rem;
}

.page-header h1[b-sm5pzbr0f1] {
    font-size: 1.8rem;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.3px;
    margin: 0 0 0.5rem 0;
}

.page-subtitle[b-sm5pzbr0f1] {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* Alert Styling */
.alert-box[b-sm5pzbr0f1] {
    margin-bottom: 1.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid;
    overflow: hidden;
}

.alert-content[b-sm5pzbr0f1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
}

.alert-close[b-sm5pzbr0f1] {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.alert-close:hover[b-sm5pzbr0f1] {
    opacity: 1;
}

.success-alert[b-sm5pzbr0f1] {
    background: rgba(39, 201, 63, 0.1);
    border-color: rgba(39, 201, 63, 0.3);
    color: var(--status-approved-text);
}

.error-alert[b-sm5pzbr0f1] {
    background: rgba(255, 95, 86, 0.1);
    border-color: rgba(255, 95, 86, 0.3);
    color: var(--status-rejected-text);
}

/* Tabs */
.tabs-container[b-sm5pzbr0f1] {
    background: transparent;
    max-width: none;
    margin: 0;
}

.tabs-header[b-sm5pzbr0f1] {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2rem;
    padding-bottom: 0;
}

.tab-button[b-sm5pzbr0f1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    bottom: -1px;
}

.tab-button:hover[b-sm5pzbr0f1] {
    color: var(--text-primary);
}

.tab-button.active[b-sm5pzbr0f1] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab-icon[b-sm5pzbr0f1] {
    font-size: 1.1rem;
}

.tab-pane[b-sm5pzbr0f1] {
    animation: fadeIn-b-sm5pzbr0f1 0.3s ease;
}

@keyframes fadeIn-b-sm5pzbr0f1 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Card Styling */
.card[b-sm5pzbr0f1] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    color: var(--text-primary);
}

.card-header[b-sm5pzbr0f1] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg-hover);
}

.card-header h5[b-sm5pzbr0f1] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.card-body[b-sm5pzbr0f1] {
    padding: 1.75rem;
}

/* Form Styling */
.form-grid[b-sm5pzbr0f1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.form-group-full[b-sm5pzbr0f1] {
    grid-column: 1 / -1;
}

.form-group[b-sm5pzbr0f1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label[b-sm5pzbr0f1] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.required[b-sm5pzbr0f1] {
    color: var(--danger-color);
    text-transform: none;
}

.form-input[b-sm5pzbr0f1],
.form-select[b-sm5pzbr0f1] {
    padding: 0.75rem 1rem;
    background: var(--input-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.2s;
    width: 100%;
}

.form-input[b-sm5pzbr0f1]::placeholder {
    color: var(--text-muted);
}

.form-input:focus[b-sm5pzbr0f1],
.form-select:focus[b-sm5pzbr0f1] {
    outline: none;
    background: var(--input-background-focus);
    border-color: var(--color-primary-light);
    box-shadow: var(--input-shadow);
}

.form-select option[b-sm5pzbr0f1],
option[b-sm5pzbr0f1] {
    color: var(--text-primary);
    background: var(--card-bg);
}

.input-with-status[b-sm5pzbr0f1] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-status .form-input[b-sm5pzbr0f1] {
    width: 100%;
    padding-right: 2.5rem;
}

.input-status[b-sm5pzbr0f1] {
    position: absolute;
    right: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.input-status.success[b-sm5pzbr0f1] { color: var(--status-approved-text); }
.input-status.error[b-sm5pzbr0f1] { color: var(--status-rejected-text); }
.input-status.loading[b-sm5pzbr0f1] { color: var(--text-muted); }

.spinner-mini[b-sm5pzbr0f1] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(20, 184, 166, 0.2);
    border-top-color: var(--color-primary-light);
    border-radius: 50%;
    animation: spin-b-sm5pzbr0f1 0.6s linear infinite;
}

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

.validation-message[b-sm5pzbr0f1] {
    font-size: 0.8rem;
    margin-top: 0.1rem;
}

.validation-message.success[b-sm5pzbr0f1] { color: var(--status-approved-text); }
.validation-message.error[b-sm5pzbr0f1] { color: var(--status-rejected-text); }

.validation-error-text[b-sm5pzbr0f1] {
    color: var(--status-rejected-text);
    font-size: 0.8rem;
}

.form-text[b-sm5pzbr0f1] {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Password input actions */
.input-with-actions[b-sm5pzbr0f1] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.input-with-actions .form-input[b-sm5pzbr0f1] {
    width: 100%;
    /* padding-right: 2.5rem; */
    padding-right: 0.75rem;
}

.btn-icon-small[b-sm5pzbr0f1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    background: var(--input-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--color-primary-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon-small:hover[b-sm5pzbr0f1] {
    background: var(--input-background-focus);
    border-color: var(--color-primary-light);
}

.password-input-group[b-sm5pzbr0f1] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.password-input-group .form-input[b-sm5pzbr0f1] {
    flex: 1;
}

.btn-generate[b-sm5pzbr0f1] {
    padding: 0.75rem 1rem;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--radius-sm);
    color: var(--color-secondary-dark);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-generate:hover[b-sm5pzbr0f1] {
    background: rgba(245, 158, 11, 0.22);
    transform: translateY(-1px);
}

.mt-2[b-sm5pzbr0f1] { margin-top: 0.5rem; }
.p-2[b-sm5pzbr0f1] { padding: 0.5rem; }
.mb-0[b-sm5pzbr0f1] { margin-bottom: 0; }
.mt-1[b-sm5pzbr0f1] { margin-top: 0.25rem; }
.small[b-sm5pzbr0f1] { font-size: 0.82rem; }

.border-start[b-sm5pzbr0f1] {
    border-left: 3px solid;
    padding-left: 0.75rem !important;
}

.border-success[b-sm5pzbr0f1] { border-color: var(--green-light); }
.border-warning[b-sm5pzbr0f1] { border-color: var(--color-secondary); }

.text-muted[b-sm5pzbr0f1] { color: var(--text-muted); }

/* Form Actions */
.form-actions[b-sm5pzbr0f1] {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    margin-top: 1.5rem;
}

/* Buttons */
.btn[b-sm5pzbr0f1],
.btn-primary[b-sm5pzbr0f1],
.btn-secondary[b-sm5pzbr0f1],
.btn-outline-secondary[b-sm5pzbr0f1],
.btn-danger[b-sm5pzbr0f1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary[b-sm5pzbr0f1] {
    background: var(--gradient-secondary);
    color: var(--text-inverse);
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.25);
}

.btn-primary:hover:not(:disabled)[b-sm5pzbr0f1] {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(245, 158, 11, 0.4);
}

.btn-primary:disabled[b-sm5pzbr0f1] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-loading[b-sm5pzbr0f1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-secondary[b-sm5pzbr0f1],
.btn-outline-secondary[b-sm5pzbr0f1] {
    background: var(--input-background);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled)[b-sm5pzbr0f1],
.btn-outline-secondary:hover:not(:disabled)[b-sm5pzbr0f1] {
    background: var(--input-background-focus);
    border-color: var(--color-primary-light);
    color: var(--text-primary);
    transform: translateY(-2px);
}

.btn-secondary:disabled[b-sm5pzbr0f1],
.btn-outline-secondary:disabled[b-sm5pzbr0f1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger[b-sm5pzbr0f1] {
    background: linear-gradient(135deg, #ff5f56 0%, #d63b32 100%);
    color: var(--text-white);
    box-shadow: 0 10px 25px rgba(255, 95, 86, 0.25);
}

.btn-danger:hover:not(:disabled)[b-sm5pzbr0f1] {
    box-shadow: 0 15px 35px rgba(255, 95, 86, 0.4);
    transform: translateY(-2px);
}

.btn-danger:disabled[b-sm5pzbr0f1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner-border[b-sm5pzbr0f1] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: currentColor;
    animation: spin-b-sm5pzbr0f1 0.8s linear infinite;
}

.spinner-border-sm[b-sm5pzbr0f1] {
    width: 0.9rem;
    height: 0.9rem;
}

.me-2[b-sm5pzbr0f1] { margin-right: 0.5rem; }

/* Empty / info alert */
.alert-info[b-sm5pzbr0f1],
.empty-state[b-sm5pzbr0f1] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    background: var(--input-background);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
}

.loading-container[b-sm5pzbr0f1],
.text-center[b-sm5pzbr0f1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.visually-hidden[b-sm5pzbr0f1] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* Table */
.table-responsive[b-sm5pzbr0f1],
.users-table-container[b-sm5pzbr0f1] {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.table[b-sm5pzbr0f1],
.users-table[b-sm5pzbr0f1] {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    --bs-table-bg: var(--card-bg);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-hover-bg: var(--card-bg-hover);
    --bs-table-hover-color: var(--text-primary);
}

.table-light[b-sm5pzbr0f1],
.users-table thead[b-sm5pzbr0f1] {
    border-bottom: 2px solid var(--border-color);
    --bs-table-bg: var(--card-bg);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
}

.table th[b-sm5pzbr0f1],
.users-table th[b-sm5pzbr0f1] {
    padding: 1rem;
    text-align: left;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--card-bg);
    white-space: nowrap;
}

tbody td[b-sm5pzbr0f1],
.users-table td[b-sm5pzbr0f1] {
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
}


.table td[b-sm5pzbr0f1],
.users-table td[b-sm5pzbr0f1] {
    padding: 1rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    vertical-align: middle;
}

.badge[b-sm5pzbr0f1] {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.bg-info[b-sm5pzbr0f1],
.role-badge[b-sm5pzbr0f1] {
    background-color: rgba(20, 184, 166, 0.15) !important;
    border: 1px solid rgba(20, 184, 166, 0.3);
    color: var(--text-primary) !important;
}

.bg-success[b-sm5pzbr0f1] {
    background-color: var(--status-approved-bg) !important;
    border: 1px solid rgba(39, 201, 63, 0.35);
    color: var(--status-approved-text) !important;
}

.bg-secondary[b-sm5pzbr0f1] {
    background-color: var(--input-background) !important;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

.actions-column[b-sm5pzbr0f1] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-sm[b-sm5pzbr0f1] {
    padding: 0.5rem 0.85rem;
    font-size: 0.8rem;
}

.btn-warning[b-sm5pzbr0f1] {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: var(--color-secondary-dark);
}

.btn-warning:hover[b-sm5pzbr0f1] {
    background: rgba(245, 158, 11, 0.22);
    border-color: var(--color-secondary);
}

.btn-action[b-sm5pzbr0f1] {
    padding: 0.5rem 0.75rem;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-action:hover[b-sm5pzbr0f1] {
    background: var(--input-background-focus);
    color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

.btn-action.edit[b-sm5pzbr0f1] { color: var(--color-primary-light); }

.btn-action.password[b-sm5pzbr0f1] {
    color: var(--color-secondary);
}

.btn-action.password:hover[b-sm5pzbr0f1] {
    color: var(--color-secondary-dark);
    border-color: var(--color-secondary);
}

.btn-action.delete[b-sm5pzbr0f1] { color: var(--red-light); }

.btn-action.delete:hover[b-sm5pzbr0f1] {
    background: rgba(255, 95, 86, 0.1);
    border-color: var(--red-light);
}

/* ===== Modal ===== */
.modal[b-sm5pzbr0f1],
.modal-overlay[b-sm5pzbr0f1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(2, 6, 23, 0.65) !important;
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-dialog[b-sm5pzbr0f1] {
    background: transparent;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-sm5pzbr0f1 0.3s ease-out;
    margin: 0 auto;
}

.modal-content[b-sm5pzbr0f1] {
    background: linear-gradient(180deg, var(--modal-bg-top) 0%, var(--modal-bg-bottom) 100%);
    border: 1px solid var(--modal-border);
    border-radius: var(--radius-md);
    box-shadow: var(--modal-shadow);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--modal-text);
}

.modal-dialog.modal-danger .modal-content[b-sm5pzbr0f1] {
    border-left: 4px solid var(--red-light);
}

@keyframes slideUp-b-sm5pzbr0f1 {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-header[b-sm5pzbr0f1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid var(--border-color);
    gap: 1rem;
}

.modal-title[b-sm5pzbr0f1] {
    font-size: 1.1rem;
    color: var(--modal-text);
    margin: 0;
    font-weight: 600;
}

.modal-close[b-sm5pzbr0f1],
.btn-close[b-sm5pzbr0f1] {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    opacity: 1;
}

.modal-close:hover[b-sm5pzbr0f1],
.btn-close:hover[b-sm5pzbr0f1] {
    color: var(--modal-text);
}

.btn-close[b-sm5pzbr0f1]::before {
    content: "×";
    line-height: 1;
}

.modal-body[b-sm5pzbr0f1] {
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-sm5pzbr0f1] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem 1.75rem;
    border-top: 1px solid var(--border-color);
    background: transparent;
}

.modal-body .form-group[b-sm5pzbr0f1] { margin-bottom: 1.25rem; }
.modal-body .form-group:last-child[b-sm5pzbr0f1] { margin-bottom: 0; }

.modal-body .form-label[b-sm5pzbr0f1] {
    display: block;
    margin-bottom: 0.5rem;
}

.modal-body .required[b-sm5pzbr0f1] { color: var(--danger-color); }

.modal-body .form-input[b-sm5pzbr0f1],
.modal-body input[type="password"][b-sm5pzbr0f1],
.modal-body input[type="text"][b-sm5pzbr0f1],
.modal-body input[type="email"][b-sm5pzbr0f1] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    color: var(--text-primary);
    background: var(--input-background);
    transition: all 0.2s;
}

.modal-body .form-input:focus[b-sm5pzbr0f1],
.modal-body input:focus[b-sm5pzbr0f1] {
    outline: none;
    border-color: var(--color-primary-light);
    background: var(--input-background-focus);
    box-shadow: var(--input-shadow);
}

.modal-body .validation-error-text[b-sm5pzbr0f1] {
    display: block;
    font-size: 0.82rem;
    color: var(--status-rejected-text);
    margin-top: 0.25rem;
}

.modal-body .validation-helper-text[b-sm5pzbr0f1] {
    display: block;
    font-size: 0.82rem;
    margin-top: 0.25rem;
}

.modal-body .validation-helper-text.error[b-sm5pzbr0f1] { color: var(--status-rejected-text); }
.modal-body .validation-helper-text.success[b-sm5pzbr0f1] { color: var(--status-approved-text); }

.input-group[b-sm5pzbr0f1] {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.input-group .form-control[b-sm5pzbr0f1] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    color: var(--text-primary);
    background: var(--input-background);
}

.input-group .form-control:focus[b-sm5pzbr0f1] {
    outline: none;
    border-color: var(--color-primary-light);
    background: var(--input-background-focus);
    box-shadow: var(--input-shadow);
}

.input-group .btn-outline-secondary[b-sm5pzbr0f1],
.input-group .btn-outline-primary[b-sm5pzbr0f1] {
    background: var(--input-background);
    border: 1px solid var(--border-color);
    color: var(--color-primary-light);
    flex-shrink: 0;
    padding: 0.75rem 1rem;
}

.input-group .btn-outline-secondary:hover[b-sm5pzbr0f1],
.input-group .btn-outline-primary:hover[b-sm5pzbr0f1] {
    background: var(--input-background-focus);
    border-color: var(--color-primary-light);
}

.text-danger[b-sm5pzbr0f1] { color: var(--status-rejected-text) !important; }

.password-toggle[b-sm5pzbr0f1] {
    background: none;
    border: 1px solid var(--border-color);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1rem;
    color: var(--color-primary-light);
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.password-toggle:hover[b-sm5pzbr0f1] {
    background-color: var(--input-background-focus);
}

/* Delete Warning */
.delete-warning[b-sm5pzbr0f1] {
    padding: 1rem;
    background: rgba(255, 95, 86, 0.08);
    border-left: 4px solid var(--red-light);
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
}

.warning-text[b-sm5pzbr0f1] {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-weight: 600;
}

.warning-subtext[b-sm5pzbr0f1] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Checkbox Group */
.checkbox-group[b-sm5pzbr0f1] { margin-bottom: 0; }

.form-checkbox[b-sm5pzbr0f1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-checkbox input[type="checkbox"][b-sm5pzbr0f1] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary-light);
}

.checkbox-label[b-sm5pzbr0f1] {
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.status-icon[b-sm5pzbr0f1] {
    font-size: 1.05rem;
    flex-shrink: 0;
}

.status-icon.checking[b-sm5pzbr0f1] { color: var(--color-secondary); }
.status-icon.available[b-sm5pzbr0f1] { color: var(--green-light); }
.status-icon.unavailable[b-sm5pzbr0f1] { color: var(--red-light); }

.gap-2[b-sm5pzbr0f1] { gap: 0.5rem; }
.d-flex[b-sm5pzbr0f1] { display: flex; }
.mb-3[b-sm5pzbr0f1] { margin-bottom: 1rem; }

/* Responsive */
@media (max-width: 768px) {
    .team-management-container[b-sm5pzbr0f1] {
        padding: 1rem 0.75rem 75px 0.75rem;
    }

    .form-grid[b-sm5pzbr0f1] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-sm5pzbr0f1] {
        flex-direction: column;
    }

    .btn-primary[b-sm5pzbr0f1],
    .btn-secondary[b-sm5pzbr0f1],
    .btn-outline-secondary[b-sm5pzbr0f1] {
        width: 100%;
    }

    .users-table-container[b-sm5pzbr0f1],
    .table-responsive[b-sm5pzbr0f1] {
        border-radius: var(--radius-sm);
    }

    .table[b-sm5pzbr0f1],
    .users-table[b-sm5pzbr0f1] {
        font-size: 0.85rem;
    }

    .table td[b-sm5pzbr0f1],
    .table th[b-sm5pzbr0f1],
    .users-table td[b-sm5pzbr0f1],
    .users-table th[b-sm5pzbr0f1] {
        padding: 0.75rem 0.5rem;
    }

    .actions-column[b-sm5pzbr0f1] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-action[b-sm5pzbr0f1] {
        width: 100%;
    }

    .tabs-header[b-sm5pzbr0f1] {
        gap: 0;
    }

    .tab-button[b-sm5pzbr0f1] {
        flex: 1;
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }

    .tab-icon[b-sm5pzbr0f1] {
        display: none;
    }
}

@media (max-width: 640px) {
    .modal-overlay[b-sm5pzbr0f1],
    .modal[b-sm5pzbr0f1] {
        padding: 0.5rem;
    }

    .modal-content[b-sm5pzbr0f1] {
        max-height: 95vh;
    }

    .modal-header[b-sm5pzbr0f1] {
        padding: 1rem;
    }

    .modal-body[b-sm5pzbr0f1] {
        padding: 1rem;
    }

    .modal-footer[b-sm5pzbr0f1] {
        padding: 1rem;
        flex-direction: column-reverse;
    }

    .modal-footer .btn[b-sm5pzbr0f1] {
        width: 100%;
    }

    .modal-title[b-sm5pzbr0f1] {
        font-size: 1.05rem;
    }

    .password-input-group[b-sm5pzbr0f1] {
        flex-wrap: wrap;
    }

    .password-input-group .form-input[b-sm5pzbr0f1] {
        width: 100%;
    }

    .password-input-group .password-toggle[b-sm5pzbr0f1] {
        width: 48px;
        padding: 0.75rem;
    }

    .password-input-group .btn-generate[b-sm5pzbr0f1] {
        width: 100%;
    }

    .input-group[b-sm5pzbr0f1] {
        flex-wrap: wrap;
    }

    .input-group .form-control[b-sm5pzbr0f1] {
        width: 100%;
    }
}
/* /Components/Shared/BackToTop.razor.rz.scp.css */
.public-back-to-top[b-zcc4ezflxs] {
    position: fixed;
    right: 1.25rem;
    bottom: 6.25rem;
    z-index: 999;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 1px solid rgba(15, 118, 110, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: #0f766e;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.16);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.public-back-to-top:hover[b-zcc4ezflxs],
.public-back-to-top:focus-visible[b-zcc4ezflxs] {
    background: #f0fdfa;
    box-shadow: 0 14px 30px rgba(15, 118, 110, 0.22);
    outline: none;
    transform: translateY(-3px);
}

.public-back-to-top i[b-zcc4ezflxs] {
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .public-back-to-top[b-zcc4ezflxs] {
        right: 1rem;
        bottom: 5.25rem;
        width: 2.5rem;
        height: 2.5rem;
    }
}
/* /Components/Shared/Charts/SimpleBarChart.razor.rz.scp.css */
.simple-bar-chart[b-ocrlfp18g7] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.bar-row[b-ocrlfp18g7] {
    display: grid;
    grid-template-columns: minmax(90px, 160px) 1fr auto;
    align-items: center;
    gap: 0.75rem;
}

.bar-label[b-ocrlfp18g7] {
    font-size: 0.85rem;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-track[b-ocrlfp18g7] {
    background: #f1f3f5;
    border-radius: 6px;
    height: 12px;
    overflow: hidden;
    width: 100%;
}

.bar-fill[b-ocrlfp18g7] {
    height: 100%;
    border-radius: 6px;
    transition: width 0.3s ease;
}

.bar-value[b-ocrlfp18g7] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #111827;
    min-width: 2.5rem;
    text-align: right;
}

.chart-empty[b-ocrlfp18g7] {
    color: #6b7280;
    font-size: 0.85rem;
    font-style: italic;
    margin: 0;
}
/* /Components/Shared/Charts/SimplePieChart.razor.rz.scp.css */
.simple-pie-chart[b-oeoaq2afrc] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.pie-visual[b-oeoaq2afrc] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.pie-legend[b-oeoaq2afrc] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 140px;
}

.legend-row[b-oeoaq2afrc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
}

.legend-swatch[b-oeoaq2afrc] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.legend-label[b-oeoaq2afrc] {
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.legend-value[b-oeoaq2afrc] {
    margin-left: auto;
    font-weight: 600;
    color: #111827;
}

.chart-empty[b-oeoaq2afrc] {
    color: #6b7280;
    font-size: 0.85rem;
    font-style: italic;
    margin: 0;
}
/* /Components/Shared/WhatsAppButton.razor.rz.scp.css */
.public-whatsapp-button[b-cqniw75gtj] {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.9rem;
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 999px;
    background: #25d366;
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.28);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.public-whatsapp-button:hover[b-cqniw75gtj],
.public-whatsapp-button:focus-visible[b-cqniw75gtj] {
    background: #1ebe5d;
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(37, 211, 102, 0.36);
    outline: none;
    transform: translateY(-3px);
}

.public-whatsapp-button i[b-cqniw75gtj] {
    font-size: 1.2rem;
}

.whatsapp-chat-panel[b-cqniw75gtj] {
    position: fixed;
    right: 1.25rem;
    bottom: 5.25rem;
    z-index: 1000;
    display: flex;
    width: min(360px, calc(100vw - 2rem));
    height: min(520px, calc(100vh - 7rem));
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 18px;
    background: #efeae2;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.24);
    animation: whatsappChatIn-b-cqniw75gtj 0.2s ease-out;
}

.whatsapp-chat-header[b-cqniw75gtj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: #075e54;
    color: #ffffff;
}

.whatsapp-chat-identity[b-cqniw75gtj] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.whatsapp-chat-avatar[b-cqniw75gtj] {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 50%;
    background: #25d366;
    color: #ffffff;
}

.whatsapp-chat-identity span:last-child[b-cqniw75gtj] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.whatsapp-chat-identity strong[b-cqniw75gtj] {
    font-size: 0.95rem;
}

.whatsapp-chat-identity small[b-cqniw75gtj] {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.7rem;
}

.whatsapp-chat-close[b-cqniw75gtj] {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
}

.whatsapp-chat-close:hover[b-cqniw75gtj],
.whatsapp-chat-close:focus-visible[b-cqniw75gtj] {
    background: rgba(255, 255, 255, 0.14);
    outline: none;
}

.whatsapp-chat-messages[b-cqniw75gtj] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 1rem 0.8rem;
    background-color: #efeae2;
    background-image: radial-gradient(rgba(7, 94, 84, 0.08) 1px, transparent 1px);
    background-size: 18px 18px;
}

.whatsapp-chat-messages[b-cqniw75gtj]::-webkit-scrollbar {
    display: none;
}

.whatsapp-chat-date[b-cqniw75gtj] {
    align-self: center;
    margin-bottom: 0.2rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #667781;
    font-size: 0.68rem;
}

.whatsapp-message[b-cqniw75gtj] {
    display: flex;
    max-width: 82%;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.55rem 0.7rem 0.35rem;
    border-radius: 9px;
    color: #202c33;
    font-size: 0.82rem;
    line-height: 1.4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.whatsapp-message.received[b-cqniw75gtj] {
    align-self: flex-start;
    border-top-left-radius: 2px;
    background: #ffffff;
}

.whatsapp-message.sent[b-cqniw75gtj] {
    align-self: flex-end;
    border-top-right-radius: 2px;
    background: #d9fdd3;
}

.whatsapp-message small[b-cqniw75gtj] {
    align-self: flex-end;
    color: #667781;
    font-size: 0.62rem;
}

.whatsapp-message small i[b-cqniw75gtj] {
    color: #53bdeb;
    font-size: 0.75rem;
}

.whatsapp-chat-composer[b-cqniw75gtj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem;
    background: #f0f2f5;
}

.whatsapp-chat-composer input[b-cqniw75gtj] {
    min-width: 0;
    flex: 1;
    height: 2.5rem;
    padding: 0 0.85rem;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    color: #202c33;
    outline: none;
}

.whatsapp-chat-composer input:focus[b-cqniw75gtj] {
    box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.3);
}

.whatsapp-chat-composer button[b-cqniw75gtj] {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #25d366;
    color: #ffffff;
    cursor: pointer;
}

.whatsapp-chat-composer button:disabled[b-cqniw75gtj] {
    background: #aeb8b5;
    cursor: not-allowed;
}

@keyframes whatsappChatIn-b-cqniw75gtj {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 768px) {
    .public-whatsapp-button[b-cqniw75gtj] {
        right: 1rem;
        bottom: 1rem;
        width: 2.9rem;
        min-height: 2.9rem;
        justify-content: center;
        padding: 0;
    }

    .whatsapp-chat-panel[b-cqniw75gtj] {
        right: 1rem;
        bottom: 4.75rem;
        width: calc(100vw - 2rem);
        height: min(500px, calc(100vh - 6rem));
    }

    .public-whatsapp-button span[b-cqniw75gtj] {
        display: none;
    }
}
/* /Components/Shared/WhatsAppOnboardingCheck.razor.rz.scp.css */
.whatsapp-onboarding-alert[b-4k6mjc9eb8] {
    position: absolute;
    width: 100%;
    max-width: 1300px;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border: 1px solid #F59E0B;
    border-radius: 12px;
    padding: 20px;
    padding-right: 52px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
    animation: slideDown-b-4k6mjc9eb8 0.3s ease-out;
    z-index: 1000;
}

/* ===== Close Button ===== */
.alert-close-btn[b-4k6mjc9eb8] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #92400E;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.alert-close-btn i[b-4k6mjc9eb8] {
    font-size: 16px;
}

.alert-close-btn:hover[b-4k6mjc9eb8] {
    background: rgba(146, 64, 14, 0.08);
    transform: rotate(90deg);
}

/* ===== Animation ===== */
@keyframes slideDown-b-4k6mjc9eb8 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ===== Content ===== */
.whatsapp-onboarding-alert .alert-icon[b-4k6mjc9eb8] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #F59E0B;
}

.whatsapp-onboarding-alert .alert-content[b-4k6mjc9eb8] {
    flex: 1;
    min-width: 0;
}

.whatsapp-onboarding-alert .alert-content h3[b-4k6mjc9eb8] {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #92400E;
    line-height: 1.4;
}

.whatsapp-onboarding-alert .alert-content p[b-4k6mjc9eb8] {
    margin: 0;
    font-size: 14px;
    color: #78350F;
    line-height: 1.5;
}

/* ===== Actions ===== */
.whatsapp-onboarding-alert .alert-actions[b-4k6mjc9eb8] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.whatsapp-onboarding-alert .btn-primary[b-4k6mjc9eb8] {
    background: #F59E0B;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.whatsapp-onboarding-alert .btn-primary:hover[b-4k6mjc9eb8] {
    background: #D97706;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.whatsapp-onboarding-alert .btn-primary:active[b-4k6mjc9eb8] {
    transform: translateY(0);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {

    .whatsapp-onboarding-alert[b-4k6mjc9eb8] {
        flex-direction: column;
        gap: 12px;
    }

    .whatsapp-onboarding-alert .alert-actions[b-4k6mjc9eb8] {
        width: 100%;
    }

    .whatsapp-onboarding-alert .btn-primary[b-4k6mjc9eb8] {
        width: 100%;
    }
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {

    .whatsapp-onboarding-alert[b-4k6mjc9eb8] {
        background: linear-gradient(135deg, #78350F 0%, #92400E 100%);
        border-color: #F59E0B;
    }

    .whatsapp-onboarding-alert .alert-icon[b-4k6mjc9eb8] {
        color: #FCD34D;
    }

    .whatsapp-onboarding-alert .alert-content h3[b-4k6mjc9eb8] {
        color: #FEF3C7;
    }

    .whatsapp-onboarding-alert .alert-content p[b-4k6mjc9eb8] {
        color: #FDE68A;
    }

    .alert-close-btn[b-4k6mjc9eb8] {
        color: #FEF3C7;
    }

    .alert-close-btn:hover[b-4k6mjc9eb8] {
        background: rgba(255, 255, 255, 0.08);
    }

    .whatsapp-onboarding-alert .btn-primary[b-4k6mjc9eb8] {
        background: #FBBF24;
        color: #78350F;
    }

    .whatsapp-onboarding-alert .btn-primary:hover[b-4k6mjc9eb8] {
        background: #FCD34D;
    }
}
/* /Components/WhatsApp/Bots/Canvas/BotFlowCanvas.razor.rz.scp.css */
.bot-flow-canvas[data-theme="dark"][b-uechd9gi4q] {
    --bg-canvas:        #020617;
    --bg-radial-1:      rgba(20,184,166,.06);
    --bg-radial-2:      rgba(45,212,191,.06);
    --bg-controls:      rgba(11,17,32,.92);
    --border-controls:  rgba(20,184,166,.2);
    --bg-btn:           #0B1120;
    --bg-btn-hover:     var(--brand-teal);
    --text-zoom:        #E5E7EB;
    --grid-dot:         rgba(20,184,166,.18);
    --bg-node:          #0F172A;
    --border-node:      rgba(20,184,166,.2);
    --shadow-node:      0 10px 30px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
    --shadow-node-hover:0 16px 40px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.4);
    --port-input-bg:    #0F172A;
    --port-output-bg:   #0F172A;
    --delete-btn-color: #CBD5E1;
    --node-content-bg: #0F172A;
    --node-header-bg: #111827;
    --node-text: #F8FAFC;
    --node-text-secondary: #94A3B8;
    --node-placeholder: #64748B;
    --node-input-bg: #1E293B;
    --node-input-border: rgba(148,163,184,.18);
    --node-input-focus: #14B8A6;
    --node-item-bg: #172033;
    --node-item-border: rgba(148,163,184,.12);
    --node-divider: rgba(148,163,184,.12);
    --node-btn-bg: #14B8A6;
    --node-btn-hover: #0F766E;
    --node-danger: #EF4444;
    --node-danger-hover: #DC2626;
    --node-shadow-focus: 0 0 0 4px rgba(20,184,166,.18);
    --node-code-bg: #1E293B;
    --node-tag-bg: rgba(20,184,166,.15);
    --node-tag-text: #5EEAD4;
}

.bot-flow-canvas[data-theme="light"][b-uechd9gi4q] {
    --bg-canvas:        #f8fafc;
    --bg-radial-1:      rgba(20,184,166,.08);
    --bg-radial-2:      rgba(45,212,191,.08);
    --bg-controls:      rgba(255,255,255,.92);
    --border-controls:  rgba(16,122,116,.12);
    --bg-btn:           #ffffff;
    --bg-btn-hover:     var(--brand-teal);
    --text-zoom:        var(--brand-dark);
    --grid-dot:         rgba(16,122,116,.18);
    --bg-node:          #ffffff;
    --border-node:      rgba(20,184,166,.15);
    --shadow-node:      0 10px 30px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.04);
    --shadow-node-hover:0 16px 40px rgba(15,23,42,.12), 0 4px 10px rgba(15,23,42,.08);
    --port-input-bg:    #ffffff;
    --port-output-bg:   #ffffff;
    --delete-btn-color: #ffffff;
    --node-content-bg: #FFFFFF;
    --node-header-bg: #F8FAFC;
    --node-text: #0F172A;
    --node-text-secondary: #64748B;
    --node-placeholder: #94A3B8;
    --node-input-bg: #FFFFFF;
    --node-input-border: #DBE5F0;
    --node-input-focus: #14B8A6;
    --node-item-bg: #F8FAFC;
    --node-item-border: #E2E8F0;
    --node-divider: #E5E7EB;
    --node-btn-bg: #14B8A6;
    --node-btn-hover: #0F766E;
    --node-danger: #EF4444;
    --node-danger-hover: #DC2626;
    --node-shadow-focus: 0 0 0 4px rgba(20,184,166,.12);
    --node-code-bg: #F1F5F9;
    --node-tag-bg: #ECFEFF;
    --node-tag-text: #0F766E;
}

.bot-flow-canvas[b-uechd9gi4q] {
    --canvas-grid-size: 20px;
    --canvas-grid-offset-x: 0px;
    --canvas-grid-offset-y: 0px;
    position: relative;
    width: 100%;
    /* The builder supplies the available canvas height through its flex layout. */
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background-color: var(--bg-canvas);
    background-image:
        radial-gradient(circle at top right, var(--bg-radial-1), transparent 30%),
        radial-gradient(circle at bottom left, var(--bg-radial-2), transparent 30%),
        radial-gradient(circle, var(--grid-dot) 1px, transparent 1.25px);
    background-position:
        center,
        center,
        var(--canvas-grid-offset-x) var(--canvas-grid-offset-y);
    background-size:
        auto,
        auto,
        var(--canvas-grid-size) var(--canvas-grid-size);
    background-repeat: no-repeat, no-repeat, repeat;
    transition: background-color .3s ease;
}

@media (max-width: 768px) {
    /* On small screens the builder page has auto height, so preserve a usable canvas. */
    .bot-flow-canvas[b-uechd9gi4q] {
        min-height: calc(100dvh - 180px);
    }
}

.canvas-controls[b-uechd9gi4q] {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
    background: var(--bg-controls);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-controls);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    transition: background .3s ease, border-color .3s ease;
}

.canvas-btn[b-uechd9gi4q] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--bg-btn);
    color: var(--brand-teal);
    font-size: 16px;
    cursor: pointer;
    transition: .25s;
    border: 1px solid var(--border-controls);
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas-btn:hover[b-uechd9gi4q] {
    background: var(--brand-teal);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16,122,116,.25);
}

.zoom-label[b-uechd9gi4q] {
    min-width: 60px;
    text-align: center;
    font-size: 13px;
    color: var(--text-zoom);
    transition: color .3s ease;
}

.canvas-container[b-uechd9gi4q] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: grab;
}

.canvas-container:active[b-uechd9gi4q] {
    cursor: grabbing;
}

.canvas-content[b-uechd9gi4q] {
    position: absolute;
    width: 10000px;
    height: 10000px;
    transform-origin: 0 0;
}

.connections-layer[b-uechd9gi4q] {
    position: absolute;
    /* Keep coordinate 0 aligned to the canvas while also allowing negative path coordinates. */
    left: -10000px;
    top: -10000px;
    width: 20000px;
    height: 20000px;
    overflow: visible;
    pointer-events: none;
}

.connection[b-uechd9gi4q] {
    pointer-events: all;
    cursor: pointer;
}

.connection path[b-uechd9gi4q] {
    transition: .25s;
}

.connection:hover path[b-uechd9gi4q] {
    stroke: var(--brand-teal) !important;
    stroke-width: 4;
    filter: drop-shadow(0 0 6px rgba(20,184,166,.4));
}

.connection-delete-btn[b-uechd9gi4q] {
    cursor: pointer;
    transition: .25s;
}

.connection-delete-btn:hover[b-uechd9gi4q] {
    fill: #ef4444;
    transform: scale(1.2);
}

.nodes-layer[b-uechd9gi4q] {
    position: absolute;
    inset: 0;
}

.node-wrapper[b-uechd9gi4q] {
    position: absolute;
    background: var(--bg-node);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-node);
    border-radius: 14px;
    box-shadow: var(--shadow-node);
    overflow: visible;
    cursor: move;
    transition: border-color .25s, box-shadow .25s;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.node-wrapper:hover[b-uechd9gi4q] {
    /* transform: translateY(-3px); */
    box-shadow: var(--shadow-node-hover);
}

.node-wrapper.selected[b-uechd9gi4q] {
    border-color: #14B8A6;
    box-shadow:
        0 0 0 3px rgba(20,184,166,.15),
        0 12px 28px rgba(20,184,166,.2);
}

.node-wrapper.validation-failed[b-uechd9gi4q] {
    border-color: #FF6B35;
    box-shadow:
        0 0 0 3px rgba(255, 107, 53, .25),
        0 0 20px rgba(255, 107, 53, .5),
        0 0 40px rgba(255, 107, 53, .3),
        var(--shadow-node);
    animation: validation-glow-b-uechd9gi4q 2s ease-in-out infinite;
}

@keyframes validation-glow-b-uechd9gi4q {
    0%, 100% {
        box-shadow:
            0 0 0 3px rgba(255, 107, 53, .25),
            0 0 20px rgba(255, 107, 53, .5),
            0 0 40px rgba(255, 107, 53, .3),
            var(--shadow-node);
    }
    50% {
        box-shadow:
            0 0 0 3px rgba(255, 107, 53, .35),
            0 0 30px rgba(255, 107, 53, .7),
            0 0 60px rgba(255, 107, 53, .4),
            var(--shadow-node);
    }
}

.node-delete-btn[b-uechd9gi4q] {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 10px;
    height: 10px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 89, 29, 0.829);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all .25s ease;
    padding: 0;
}

/* Hide X initially */
.node-delete-btn i[b-uechd9gi4q] {
    font-size: 16px;
    opacity: 0;
    transform: scale(0.4) rotate(-90deg);
    transition: all .25s ease;
    pointer-events: none;
}

/* Hover effect */
.node-delete-btn:hover[b-uechd9gi4q] {
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    /* background: #ef4444; */
    box-shadow: 0 4px 12px rgba(239, 68, 68, .35);
}

/* Show X */
.node-delete-btn:hover i[b-uechd9gi4q] {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Click effect */
.node-delete-btn:active[b-uechd9gi4q] {
    transform: scale(0.92);
}

.node-port[b-uechd9gi4q] {
    position: absolute;
    width: 10px;
    height: 20px;
    z-index: 20;
    cursor: crosshair;
    transform: translate(-50%, -50%);
}

.port-dot[b-uechd9gi4q] {
    width: 100%;
    height: 100%;
}

.port-input .port-dot[b-uechd9gi4q] {
    background: var(--port-input-bg);
    border: 1px solid #22c55e;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.port-output .port-dot[b-uechd9gi4q] {
    background: var(--port-output-bg);
    border: 1px solid var(--brand-teal);
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

[data-theme="dark"] .port-output .port-dot[b-uechd9gi4q] {
    background-color: var(--red-light);
    border: none;
}

[data-theme="dark"] .port-input .port-dot[b-uechd9gi4q] {
    background-color: var(--brand-teal);
    border: none;
}

.node-header-drag-handle[b-uechd9gi4q] {
    cursor: grab;
    user-select: none;
}

.node-header-drag-handle:active[b-uechd9gi4q] {
    cursor: grabbing;
}

.node-header-drag-handle input[b-uechd9gi4q],
.node-header-drag-handle button[b-uechd9gi4q],
.node-header-drag-handle textarea[b-uechd9gi4q] {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    cursor: text;
}

.node-header-drag-handle button[b-uechd9gi4q] {
    cursor: pointer;
}

.node-wrapper > div:not(.node-title-editor-wrapper)[b-uechd9gi4q] {
    pointer-events: auto;
}

.node-wrapper textarea[b-uechd9gi4q],
.node-wrapper input[b-uechd9gi4q],
.node-wrapper select[b-uechd9gi4q],
.node-wrapper button[b-uechd9gi4q] {
    pointer-events: auto;
}

[b-uechd9gi4q] .node-header{
    padding:8px 16px;
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--node-header-bg);
    border-bottom:1px solid var(--node-divider);
    border-radius: 14px 14px 0 0;
    color:var(--node-text);
    font-size:16px;
    letter-spacing: normal;
    /* font-weight:700; */
}

[b-uechd9gi4q] .node-content{
    padding:18px;
    background:var(--node-content-bg);
    border-radius: 0 0 14px 14px;
    color:var(--node-text);
    display:flex;
    flex-direction:column;
    gap:16px;
}

[b-uechd9gi4q] .node-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-uechd9gi4q] .node-label{
    display:block;
    margin-bottom:6px;
    color:var(--node-text-secondary);
    font-size:12px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
}

[b-uechd9gi4q] .node-input,
[b-uechd9gi4q] .node-select,
[b-uechd9gi4q] .node-textarea,
[b-uechd9gi4q] .branch-name-input,
[b-uechd9gi4q] .node-input-small{
    width:100%;
    background:var(--node-input-bg);
    border:1px solid var(--node-input-border);
    color:var(--node-text);
    border-radius:10px;
    font-size:13px;
    transition:.25s;
    box-sizing:border-box;
    font-family: 'Quicksand', sans-serif;
}

[b-uechd9gi4q] .node-select,
[b-uechd9gi4q] .node-textarea {
    overflow: auto;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE/Edge */
}

[b-uechd9gi4q] .node-select::-webkit-scrollbar,
[b-uechd9gi4q] .node-textarea::-webkit-scrollbar {
    display: none;              /* Chrome, Edge, Safari */
}

[b-uechd9gi4q] .node-input,
[b-uechd9gi4q] .node-select,
[b-uechd9gi4q] .branch-name-input,
[b-uechd9gi4q] .node-input-small{
    height:42px;
    padding:0 14px;
}

[b-uechd9gi4q] .node-textarea{
    padding:12px 14px;
    resize:vertical;
    min-height:90px;
}

[b-uechd9gi4q] .node-input::placeholder,
[b-uechd9gi4q] .node-textarea::placeholder{
    color:var(--node-placeholder);
}

[b-uechd9gi4q] .node-input:focus,
[b-uechd9gi4q] .node-select:focus,
[b-uechd9gi4q] .node-textarea:focus,
[b-uechd9gi4q] .branch-name-input:focus,
[b-uechd9gi4q] .node-input-small:focus{
    outline:none;
    border-color:var(--node-input-focus);
    box-shadow:var(--node-shadow-focus);
}

[b-uechd9gi4q] .node-hint{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    background:var(--node-item-bg);
    border:1px solid var(--node-item-border);
    border-radius:10px;
    color:var(--node-text-secondary);
    font-size:12px;
}

[b-uechd9gi4q] .node-hint::before{
    content:"💡";
}

[b-uechd9gi4q] code{
    background:var(--node-code-bg);
    color:var(--node-tag-text);
    padding:3px 8px;
    border-radius:6px;
    font-size:12px;
}

[b-uechd9gi4q] .tag,
[b-uechd9gi4q] .variable-tag{
    background:var(--node-tag-bg);
    color:var(--node-tag-text);
    padding:4px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:600;
}

.node-wrapper.dragging[b-uechd9gi4q] {
    cursor: grabbing;
    transition: none;
    z-index: 1000;
}

.node-wrapper.native-dragging[b-uechd9gi4q] {
    cursor: grabbing;
    transition: none;
    will-change: transform;
}
/* /Components/WhatsApp/Bots/Canvas/BotFlowTreeNode.razor.rz.scp.css */
.org-node[b-v1l5919nw7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-bottom: 1rem;
}

.org-node-box[b-v1l5919nw7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    z-index: 1;
}

.org-node-box:hover[b-v1l5919nw7] {
    border-color: var(--color-primary-light);
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.25);
    transform: translateY(-1px);
}

.org-node-box-active[b-v1l5919nw7] {
    border-color: var(--color-primary-light);
    box-shadow: 0 2px 10px rgba(20, 184, 166, 0.3);
}

.org-node-main[b-v1l5919nw7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.node-icon[b-v1l5919nw7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 6px;
    background-color: rgba(20, 184, 166, 0.15);
    color: var(--color-primary-light);
    font-size: 0.9rem;
}

.node-title[b-v1l5919nw7] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.node-type[b-v1l5919nw7] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    background-color: rgba(107, 114, 128, 0.18);
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
}

.expand-btn[b-v1l5919nw7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: 0.25rem;
    border: none;
    border-radius: 50%;
    background-color: rgba(20, 184, 166, 0.15);
    color: var(--color-primary-light);
    font-size: 0.65rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.expand-btn:hover[b-v1l5919nw7] {
    background-color: rgba(20, 184, 166, 0.3);
}

.org-node-details[b-v1l5919nw7] {
    box-sizing: border-box;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    min-width: 220px;
    max-width: 320px;
    white-space: normal;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-top: 3px solid var(--color-primary-light);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    z-index: 1;
}

.detail-section[b-v1l5919nw7] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.detail-item[b-v1l5919nw7] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.8rem;
    line-height: 1.4;
}

.detail-label[b-v1l5919nw7] {
    flex-shrink: 0;
    min-width: 85px;
    font-weight: 600;
    color: var(--text-secondary);
}

.detail-value[b-v1l5919nw7] {
    color: var(--text-primary);
    word-break: break-word;
}

.conditions-list[b-v1l5919nw7] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.15rem;
    flex: 1;
    min-width: 0;
}

.condition-item[b-v1l5919nw7] {
    font-size: 0.78rem;
    color: var(--text-primary);
    background-color: var(--color-surface-alt);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    overflow-wrap: anywhere;
}

.org-node > .org-children[b-v1l5919nw7] {
    position: relative;
    padding-top: 2rem;
}

.org-node > .org-children[b-v1l5919nw7]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 2rem;
    border-left: 2px dashed var(--border-color);
}

.org-children[b-v1l5919nw7] {
    display: flex;
    justify-content: center;
}

.org-child[b-v1l5919nw7] {
    position: relative;
    padding: 0 1.5rem;
}

.org-child[b-v1l5919nw7]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px dashed var(--border-color);
}

.org-child:only-child[b-v1l5919nw7]::before {
    display: none;
}

.org-child:first-child[b-v1l5919nw7]::before {
    left: 50%;
    border-top-left-radius: 6px;
}

.org-child:last-child[b-v1l5919nw7]::before {
    right: 50%;
    border-top-right-radius: 6px;
}

.org-child[b-v1l5919nw7]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 2rem;
    border-left: 2px dashed var(--border-color);
}

.org-child .org-node[b-v1l5919nw7] {
    padding-top: 1.25rem;
}

@media (max-width: 768px) {
    .org-node-box[b-v1l5919nw7] {
        padding: 0.5rem 0.7rem;
    }

    .node-type[b-v1l5919nw7] {
        display: none;
    }

    .org-child[b-v1l5919nw7] {
        padding: 0 0.9rem;
    }

    .org-node-details[b-v1l5919nw7] {
        min-width: 180px;
    }
}
/* /Components/WhatsApp/Bots/Canvas/BotFlowTreeView.razor.rz.scp.css */
/* ===== FLOW TREE CONTAINER - MODERN THEME SUPPORT ===== */
/* Full dark/light theme with CSS variables */

/* ===== CSS VARIABLES ===== */
:root[b-wi8wk8dn1n] {
    --page-bg: #f4f6f8;
    --card-bg: #ffffff;
    --text-primary: #1d1d1f;
    --text-secondary: #666666;
    --text-muted: #999999;
    --border-color: #e5e5e7;
    --color-primary: #14b8a6;
    --color-primary-light: #14b8a6;
    --color-surface-alt: #f9fafb;
    --hover-overlay: rgba(20, 184, 166, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
}

[data-app-theme="dark"][b-wi8wk8dn1n] {
    --page-bg: #0f172a;
    --card-bg: rgba(20, 25, 40, 0.9);
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #a0a0a0;
    --border-color: rgba(20, 184, 166, 0.2);
    --color-primary: #14b8a6;
    --color-primary-light: #14b8a6;
    --color-surface-alt: rgba(255, 255, 255, 0.03);
    --hover-overlay: rgba(20, 184, 166, 0.1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(20, 184, 166, 0.15);
}

/* ===== ROOT CONTAINER ===== */
.flow-tree-container[b-wi8wk8dn1n] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    padding: 24px;
    background: var(--page-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Quicksand', sans-serif;
    transition: background-color 0.3s ease;
}

.flow-tree-viewport[b-wi8wk8dn1n] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    cursor: grab;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.flow-tree-viewport[b-wi8wk8dn1n]::-webkit-scrollbar {
    width: 8px;
}

.flow-tree-viewport[b-wi8wk8dn1n]::-webkit-scrollbar-track {
    background: transparent;
}

.flow-tree-viewport[b-wi8wk8dn1n]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.flow-tree-viewport[b-wi8wk8dn1n]::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

.flow-tree-viewport.is-panning[b-wi8wk8dn1n] {
    cursor: grabbing;
    user-select: none;
}

.flow-tree-content[b-wi8wk8dn1n] {
    width: max-content;
    min-width: 100%;
}

/* ===== EMPTY STATE ===== */
.tree-empty[b-wi8wk8dn1n] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    color: var(--text-muted);
    font-size: 1rem;
}

.tree-empty p[b-wi8wk8dn1n] {
    margin: 0;
    font-weight: 500;
}

/* ===== TREE ROOT ===== */
.tree-root[b-wi8wk8dn1n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: max-content;
    min-width: 100%;
}

/* ===== TREE NODE ===== */
.tree-node[b-wi8wk8dn1n] {
    margin-bottom: 40px;
    position: relative;
}

/* Vertical connector line from parent to child */
.tree-node:not(:last-child)[b-wi8wk8dn1n]::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    width: 2px;
    height: 40px;
    background: linear-gradient(
        to bottom,
        var(--color-primary),
        transparent
    );
    transform: translateX(-50%);
}

/* ===== NODE HEADER (Main Box) ===== */
.node-header[b-wi8wk8dn1n] {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 2;
}

.node-header:hover[b-wi8wk8dn1n] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    background: var(--color-surface-alt);
}

/* ===== EXPAND/COLLAPSE BUTTON ===== */
.expand-btn[b-wi8wk8dn1n] {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.expand-btn:hover[b-wi8wk8dn1n] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--hover-overlay);
}

.expand-btn.expanded[b-wi8wk8dn1n] {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ===== NODE INFO SECTION ===== */
.node-info[b-wi8wk8dn1n] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.node-icon[b-wi8wk8dn1n] {
    font-size: 1.2rem;
    color: var(--color-primary);
}

.node-title[b-wi8wk8dn1n] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
}

.node-type[b-wi8wk8dn1n] {
    font-size: 0.7rem;
    color: var(--color-primary);
    font-weight: 600;
    background: var(--hover-overlay);
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid var(--border-color);
}

/* ===== NODE DETAILS (Expandable) ===== */
.node-details[b-wi8wk8dn1n] {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--color-surface-alt);
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
    margin-left: 52px;
    animation: slideDown-b-wi8wk8dn1n 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown-b-wi8wk8dn1n {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.detail-section[b-wi8wk8dn1n] {
    margin-bottom: 14px;
}

.detail-section:last-child[b-wi8wk8dn1n] {
    margin-bottom: 0;
}

.detail-item[b-wi8wk8dn1n] {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    align-items: flex-start;
}

.detail-label[b-wi8wk8dn1n] {
    font-weight: 700;
    color: var(--color-primary);
    min-width: 120px;
    flex-shrink: 0;
}

.detail-value[b-wi8wk8dn1n] {
    color: var(--text-primary);
    word-break: break-word;
    line-height: 1.5;
    flex: 1;
}

/* ===== CONDITIONS LIST ===== */
.conditions-list[b-wi8wk8dn1n] {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.condition-item[b-wi8wk8dn1n] {
    padding: 10px 12px;
    background: rgba(20, 184, 166, 0.08);
    border-left: 3px solid var(--color-primary);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--color-primary);
    line-height: 1.5;
    font-weight: 500;
}

/* ===== CONNECTIONS SECTION ===== */
.connections-section[b-wi8wk8dn1n] {
    margin-top: 20px;
    margin-left: 52px;
    padding-left: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Vertical line from details to connected nodes */
.connections-section[b-wi8wk8dn1n]::before {
    content: '';
    position: absolute;
    left: 0;
    top: -20px;
    width: 2px;
    height: 20px;
    background: var(--border-color);
}

.connections-label[b-wi8wk8dn1n] {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.connections-label[b-wi8wk8dn1n]::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

/* ===== NODE ACTIONS ===== */
.node-actions[b-wi8wk8dn1n] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.node-action-btn[b-wi8wk8dn1n] {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.node-action-btn:hover[b-wi8wk8dn1n] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--hover-overlay);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
    .flow-tree-container[b-wi8wk8dn1n] {
        padding: 16px;
    }

    .node-header[b-wi8wk8dn1n] {
        padding: 14px;
    }

    .expand-btn[b-wi8wk8dn1n] {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .node-details[b-wi8wk8dn1n] {
        margin-left: 48px;
        padding: 12px 14px;
    }

    .connections-section[b-wi8wk8dn1n] {
        margin-left: 48px;
    }

    .detail-item[b-wi8wk8dn1n] {
        font-size: 0.8rem;
        gap: 10px;
    }

    .detail-label[b-wi8wk8dn1n] {
        min-width: 100px;
    }
}

@media (max-width: 768px) {
    .flow-tree-container[b-wi8wk8dn1n] {
        padding: 12px;
    }

    .tree-node[b-wi8wk8dn1n] {
        margin-bottom: 32px;
    }

    .node-header[b-wi8wk8dn1n] {
        flex-direction: column;
        padding: 12px;
        gap: 10px;
    }

    .expand-btn[b-wi8wk8dn1n] {
        width: 32px;
        height: 32px;
        align-self: flex-start;
    }

    .node-info[b-wi8wk8dn1n] {
        gap: 6px;
        width: 100%;
    }

    .node-title[b-wi8wk8dn1n] {
        font-size: 0.9rem;
    }

    .node-type[b-wi8wk8dn1n] {
        font-size: 0.65rem;
    }

    .node-details[b-wi8wk8dn1n] {
        margin-left: 0;
        padding: 10px 12px;
        margin-top: 12px;
    }

    .connections-section[b-wi8wk8dn1n] {
        margin-left: 0;
        padding-left: 0;
    }

    .connections-section[b-wi8wk8dn1n]::before {
        display: none;
    }

    .detail-item[b-wi8wk8dn1n] {
        flex-direction: column;
        gap: 4px;
        font-size: 0.75rem;
    }

    .detail-label[b-wi8wk8dn1n] {
        min-width: auto;
        font-weight: 700;
    }

    .condition-item[b-wi8wk8dn1n] {
        font-size: 0.75rem;
        padding: 8px 10px;
    }

    .connections-label[b-wi8wk8dn1n] {
        font-size: 0.7rem;
    }
}

@media (max-width: 640px) {
    .flow-tree-container[b-wi8wk8dn1n] {
        padding: 8px;
        min-height: 0;
    }

    .tree-node[b-wi8wk8dn1n] {
        margin-bottom: 24px;
    }

    .node-header[b-wi8wk8dn1n] {
        padding: 10px;
        gap: 8px;
    }

    .expand-btn[b-wi8wk8dn1n] {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .node-icon[b-wi8wk8dn1n] {
        font-size: 1rem;
    }

    .node-title[b-wi8wk8dn1n] {
        font-size: 0.85rem;
    }

    .node-type[b-wi8wk8dn1n] {
        font-size: 0.6rem;
        padding: 3px 8px;
    }

    .node-details[b-wi8wk8dn1n] {
        padding: 8px 10px;
        margin-top: 10px;
        font-size: 0.75rem;
    }

    .detail-item[b-wi8wk8dn1n] {
        gap: 3px;
        font-size: 0.7rem;
    }

    .detail-label[b-wi8wk8dn1n] {
        font-size: 0.65rem;
    }

    .detail-value[b-wi8wk8dn1n] {
        font-size: 0.7rem;
    }

    .condition-item[b-wi8wk8dn1n] {
        font-size: 0.7rem;
        padding: 6px 8px;
    }

    .connections-label[b-wi8wk8dn1n] {
        font-size: 0.65rem;
        gap: 6px;
    }

    .connections-label[b-wi8wk8dn1n]::before {
        width: 6px;
        height: 6px;
    }
}

/* ===== ACCESSIBILITY ===== */
.node-header:focus-visible[b-wi8wk8dn1n] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.expand-btn:focus-visible[b-wi8wk8dn1n] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ===== PRINT STYLES ===== */
@media print {
    .flow-tree-container[b-wi8wk8dn1n] {
        padding: 0;
        background: white;
    }

    .node-header[b-wi8wk8dn1n] {
        break-inside: avoid;
        box-shadow: none;
    }

    .node-details[b-wi8wk8dn1n] {
        break-inside: avoid;
    }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .tree-node:not(:last-child)[b-wi8wk8dn1n]::after,
    .node-header[b-wi8wk8dn1n],
    .expand-btn[b-wi8wk8dn1n],
    .node-details[b-wi8wk8dn1n] {
        transition: none;
    }

    .node-details[b-wi8wk8dn1n] {
        animation: none;
    }
}
/* /Components/WhatsApp/Bots/Canvas/ConnectionContextMenu.razor.rz.scp.css */
.connection-context-menu-overlay[b-v2k84b6t6m]{
    position:fixed;
    inset:0;
    z-index:999;
}

/* Main Menu */

.connection-context-menu[b-v2k84b6t6m]{
    position:fixed;
    width:290px;
    height:500px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    box-shadow:
        0 15px 45px rgba(0,0,0,.15),
        0 4px 12px rgba(0,0,0,.08);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    z-index:1000;
}

.connection-context-menu[data-theme="dark"][b-v2k84b6t6m]{
    background:#1F2937;
    border-color:#374151;
}

/* Header */

.context-menu-header[b-v2k84b6t6m]{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 18px;
    border-bottom:1px solid #ECECEC;
    flex-shrink:0;
    background:#FAFAFA;
}

.connection-context-menu[data-theme="dark"] .context-menu-header[b-v2k84b6t6m]{
    background:#111827;
    border-color:#374151;
}

.context-menu-header-left[b-v2k84b6t6m]{
    display:flex;
    align-items:center;
    gap:10px;
    /* font-weight:600; */
    font-size:15px;
    color:#222;
}

.connection-context-menu[data-theme="dark"] .context-menu-header-left[b-v2k84b6t6m]{
    color:white;
}

.context-menu-header-left i[b-v2k84b6t6m]{
    color:#2563EB;
    font-size:18px;
}

/* Close Button */

.context-menu-close[b-v2k84b6t6m]{
    width:32px;
    height:32px;
    border:none;
    background:transparent;
    border-radius:8px;
    cursor:pointer;
    transition:.2s;
}

.context-menu-close:hover[b-v2k84b6t6m]{
    background:#EEF2FF;
}

.connection-context-menu[data-theme="dark"] .context-menu-close:hover[b-v2k84b6t6m]{
    background:#374151;
}

.context-menu-close i[b-v2k84b6t6m]{
    font-size:18px;
    color:#666;
}

.connection-context-menu[data-theme="dark"] .context-menu-close i[b-v2k84b6t6m]{
    color:#ddd;
}

/* Content */

.context-menu-content[b-v2k84b6t6m]{
    flex:1;
    overflow-y:auto;
    padding:6px;
}

/* Section */

.context-menu-section[b-v2k84b6t6m]{
    margin-bottom:6px;
}

.context-menu-section:not(:last-child)[b-v2k84b6t6m]{
    border-bottom:1px solid #ECECEC;
    padding-bottom:8px;
}

.connection-context-menu[data-theme="dark"] .context-menu-section:not(:last-child)[b-v2k84b6t6m]{
    border-color:#374151;
}

/* Section Title */

.context-menu-section-title[b-v2k84b6t6m]{
    padding:8px 12px;
    font-size:11px;
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:1px;
    color:#8b8b8b;
}

.context-menu-item[b-v2k84b6t6m]{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 12px;
    margin:2px 0;
    border-radius:10px;
    cursor:pointer;
    transition:.18s;
    color:#222;
}

.connection-context-menu[data-theme="dark"] .context-menu-item[b-v2k84b6t6m]{
    color:white;
}

.context-menu-item:hover[b-v2k84b6t6m]{
    background:#F3F4F6;
}

.connection-context-menu[data-theme="dark"] .context-menu-item:hover[b-v2k84b6t6m]{
    background:#374151;
}

.context-menu-item-icon[b-v2k84b6t6m]{
    width:34px;
    height:34px;
    border-radius:10px;
    background:linear-gradient(135deg,#3B82F6,#06B6D4);
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:16px;
    flex-shrink:0;
}

.context-menu-item-label[b-v2k84b6t6m]{
    flex:1;
    font-size:14px;
    font-weight:500;
}

.context-menu-arrow[b-v2k84b6t6m]{
    font-size:12px;
    color:#9CA3AF;
}

.context-menu-content[b-v2k84b6t6m]::-webkit-scrollbar{
    width:8px;
}

.context-menu-content[b-v2k84b6t6m]::-webkit-scrollbar-track{
    background:transparent;
}

.context-menu-content[b-v2k84b6t6m]::-webkit-scrollbar-thumb{
    background:#c7c7c7;
    border-radius:20px;
}

.context-menu-content[b-v2k84b6t6m]::-webkit-scrollbar-thumb:hover{
    background:#999;
}

.connection-context-menu[data-theme="dark"] .context-menu-content[b-v2k84b6t6m]::-webkit-scrollbar-thumb{
    background:#555;
}
/* /Components/WhatsApp/Bots/Canvas/NodePalette.razor.rz.scp.css */
.node-palette[data-theme="dark"][b-ufxywrcvul] {
    --bg-palette:      #0B1120;
    --bg-header:       rgba(20,184,166,.06);
    --bg-item:         rgba(255,255,255,.03);
    --bg-item-hover:   rgba(20,184,166,.08);
    --border-palette:  rgba(20,184,166,.3);
    --border-item:     rgba(20,184,166,.4);
    --border-header:   rgba(20,184,166,.15);
    --text-title:      #E5E7EB;
    --text-subtitle:   #9CA3AF;
    --text-section:    #6B7280;
    --text-label:      #CBD5E1;
    --scrollbar:       rgba(255,255,255,.1);
    --scrollbar-hover: rgba(255,255,255,.2);
}

.node-palette[data-theme="light"][b-ufxywrcvul] {
    --bg-palette:      #ffffff;
    --bg-header:       rgba(0,128,128,.08);
    --bg-item:         #ffffff;
    --bg-item-hover:   rgba(20,184,166,.04);
    --border-palette:  #e5e7eb;
    --border-item:     #14B8A6;
    --border-header:   #eef2f7;
    --text-title:      #111827;
    --text-subtitle:   #404753;
    --text-section:    #404753;
    --text-label:      #111827;
    --scrollbar:       #d1d5db;
    --scrollbar-hover: #9ca3af;
}

.node-palette[b-ufxywrcvul] {
    width: max-content;
    height: 100%;
    background: var(--bg-palette);
    border-right: 1px solid var(--border-palette);
    display: flex;
    flex-direction: column;
    transition: all .3s ease;
}

.palette-header[b-ufxywrcvul] {
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-header);
    background: var(--bg-header);
    transition: all .3s ease;
}

.palette-title[b-ufxywrcvul] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-title);
    transition: color .3s ease;
}

.palette-subtitle[b-ufxywrcvul] {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--text-subtitle);
    transition: color .3s ease;
}

.palette-content[b-ufxywrcvul] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* SECTION */

.palette-section[b-ufxywrcvul] {
    padding-bottom: 12px;
}

.section-title[b-ufxywrcvul] {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-section);
    text-transform: uppercase;
    letter-spacing: .8px;
    padding-bottom: 8px;
    transition: color .3s ease;
}

/* GRID */

.section-grid[b-ufxywrcvul] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* NODE CARD */

.palette-item[b-ufxywrcvul] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px;
    background: var(--bg-item);
    border: 1px solid var(--border-item);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: all .2s ease;
}

.palette-item:hover[b-ufxywrcvul] {
    background: var(--bg-item-hover);
    transform: translateY(-2px);
    box-shadow:
        0 10px 20px rgba(0,0,0,.08),
        0 0 0 3px rgba(20,184,166,.08);
}

.palette-item:active[b-ufxywrcvul] {
    transform: scale(.98);
}

.palette-item-icon[b-ufxywrcvul] {
    font-size: 20px;
    line-height: 1;
    color: #14B8A6;
}

.palette-item-label[b-ufxywrcvul] {
    font-size: 12px;
    color: var(--text-label);
    text-align: center;
    transition: color .3s ease;
}

/* SCROLLBAR */

.palette-content[b-ufxywrcvul]::-webkit-scrollbar {
    width: 6px;
}

.palette-content[b-ufxywrcvul]::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
    border-radius: 999px;
    transition: background .3s ease;
}

.palette-content[b-ufxywrcvul]::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover);
}
/* /Components/WhatsApp/Bots/NodeViews/NodeTitleEditor.razor.rz.scp.css */
/* ── Dark theme tokens ── */
    .start-node-wrap[data-theme="dark"][b-ghm715t0i3] {
        --bg-card:        #0d1117;
        --border-card:    rgba(20, 184, 166, 0.5);
        --shadow-card:    0 20px 50px rgba(0, 0, 0, 0.25);

        --text-label:     #94a3b8;
        --text-input:     #E5E7EB;
        --text-hint:      #86efac;

        --bg-input:       rgba(255, 255, 255, 0.05);
        --bg-input-focus: rgba(20, 184, 166, 0.05);
        --border-input:   rgba(20, 184, 166, 0.5);
        --focus-shadow:   0 0 0 3px rgba(20, 184, 166, 0.1);

        --bg-hint:        rgba(34, 197, 94, .10);
        --border-hint:    rgba(34, 197, 94, .25);
    }

    /* ── Light theme tokens ── */
    .start-node-wrap[data-theme="light"][b-ghm715t0i3] {
        --bg-card:        #ffffff;
        --border-card:    rgba(20, 184, 166, 0.5);
        --shadow-card:    0 18px 38px -12px rgba(21, 128, 61, .16), 0 2px 6px rgba(15, 23, 42, .05);

        --text-label:     #64748B;
        --text-input:     #1E293B;
        --text-hint:      #15803D;

        --bg-input:       #ffffff;
        --bg-input-focus: #ffffff;
        --border-input:   rgba(20, 184, 166, 0.5);
        --focus-shadow:   0 0 0 3px rgba(20, 184, 166, 0.12);

        --bg-hint:        #F0FDF4;
        --border-hint:    #DCFCE7;
    }


.node-title-editor-wrapper[b-ghm715t0i3] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 90%;
}

/* Display Mode */
.node-title-display[b-ghm715t0i3] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    position: relative;
    cursor: move;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.node-title-display:hover[b-ghm715t0i3] {
    background-color: rgba(20, 184, 166, 0.08);
}

.node-title-display .node-icon[b-ghm715t0i3] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #14B8A6;
    flex-shrink: 0;
}

.node-title-display .node-title[b-ghm715t0i3] {
    /* font-weight: 600; */
    font-size: 20px;
    color: #E5E7EB;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Edit Button (visible on hover) */
.node-title-display[b-ghm715t0i3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title-edit-btn[b-ghm715t0i3] {
    background: none;
    border: none;
    color: #CBD5E1;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.node-title-display:hover .title-edit-btn[b-ghm715t0i3] {
    opacity: 1;
    color: #14B8A6;
    background-color: rgba(20, 184, 166, 0.15);
}

.title-edit-btn:hover[b-ghm715t0i3] {
    background-color: rgba(20, 184, 166, 0.3);
    color: #5EEAD4;
}

.title-edit-btn:active[b-ghm715t0i3] {
    transform: scale(0.95);
}

/* Edit Mode */
.node-title-edit-mode[b-ghm715t0i3] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 8px;
    background-color: rgba(20, 184, 166, 0.1);
    border: 1.5px solid #14B8A6;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.node-title-input[b-ghm715t0i3] {
    flex: 1;
    background-color: rgba(11, 17, 32, 0.6);
    border: 1px solid #14B8A6;
    border-radius: 4px;
    color: #E5E7EB;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 600;
    min-width: 0;
    outline: none;
    transition: all 0.2s ease;
}

.node-title-input:focus[b-ghm715t0i3] {
    border-color: #14B8A6;
    background-color: rgba(11, 17, 32, 0.8);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

.node-title-input[b-ghm715t0i3]::placeholder {
    color: #9CA3AF;
}

/* Edit Buttons Container */
.title-edit-buttons[b-ghm715t0i3] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Save / Cancel buttons ──
   Save = solid teal action button (matches "Generate Key")
   Cancel = neutral outlined button (matches "Cancel") */
.title-btn-save[b-ghm715t0i3],
.title-btn-cancel[b-ghm715t0i3] {
    cursor: pointer;
    padding: 5px 9px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    min-width: 30px;
    min-height: 30px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.title-btn-save[b-ghm715t0i3] {
    background-color: #14B8A6;
    border: 1px solid #14B8A6;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(20, 184, 166, 0.35);
}

.title-btn-save:hover[b-ghm715t0i3] {
    background-color: #0F766E;
    border-color: #0F766E;
}

.title-btn-save:active[b-ghm715t0i3] {
    transform: scale(0.95);
}

.title-btn-cancel[b-ghm715t0i3] {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #CBD5E1;
}

.title-btn-cancel:hover[b-ghm715t0i3] {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(148, 163, 184, 0.55);
    color: #E5E7EB;
}

.title-btn-cancel:active[b-ghm715t0i3] {
    transform: scale(0.95);
}

/* Light theme overrides */
[data-theme="light"] .node-title-display[b-ghm715t0i3] {
    color: #3d3d3d;
}

[data-theme="light"] .node-title-display .node-title[b-ghm715t0i3] {
    color: #1e293b;
}

[data-theme="light"] .node-title-display .node-icon[b-ghm715t0i3] {
    color: #14B8A6;
}

[data-theme="light"] .node-title-display:hover[b-ghm715t0i3] {
    background-color: rgba(20, 184, 166, 0.08);
}

[data-theme="light"] .title-edit-btn[b-ghm715t0i3] {
    color: #64748b;
}

[data-theme="light"] .title-edit-btn:hover[b-ghm715t0i3] {
    color: #0F766E;
    background-color: rgba(20, 184, 166, 0.15);
}

[data-theme="light"] .node-title-edit-mode[b-ghm715t0i3] {
    background-color: rgba(20, 184, 166, 0.08);
    border-color: #14B8A6;
}

[data-theme="light"] .node-title-input[b-ghm715t0i3] {
    background-color: #ffffff;
    border-color: #14B8A6;
    color: #1e293b;
}

[data-theme="light"] .node-title-input:focus[b-ghm715t0i3] {
    border-color: #14B8A6;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

[data-theme="light"] .node-title-input[b-ghm715t0i3]::placeholder {
    color: #94a3b8;
}

[data-theme="light"] .title-btn-save[b-ghm715t0i3] {
    background-color: #14B8A6;
    border-color: #14B8A6;
    color: #ffffff;
}

[data-theme="light"] .title-btn-save:hover[b-ghm715t0i3] {
    background-color: #0F766E;
    border-color: #0F766E;
}

[data-theme="light"] .title-btn-cancel[b-ghm715t0i3] {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}

[data-theme="light"] .title-btn-cancel:hover[b-ghm715t0i3] {
    background-color: #e2e8f0;
    border-color: #94a3b8;
    color: #1e293b;
}
/* /Components/WhatsApp/Bots/NodeViews/SendTemplateNodeView.razor.rz.scp.css */
.section[b-nh23fz7t1z] {
    /* background: #f8fafc; */
    border: 1px solid rgba(16,122,116,.12);
    border-radius: 14px;
    padding: 10px;
}

.section-title[b-nh23fz7t1z] {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Form */

.form-group[b-nh23fz7t1z] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.form-group:last-child[b-nh23fz7t1z] {
    margin-bottom: 0;
}

.form-label[b-nh23fz7t1z] {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

.form-select[b-nh23fz7t1z],
.form-input[b-nh23fz7t1z] {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    color: #111827;
    transition: all .2s ease;
}

.form-input:focus[b-nh23fz7t1z],
.form-select:focus[b-nh23fz7t1z] {
    outline: none;
    border-color: #14b8a6;
    box-shadow: 0 0 0 4px rgba(20,184,166,.12);
}

/* Parameters */

.param-section[b-nh23fz7t1z] {
    margin-top: 14px;
    padding: 12px;
    /* background: #fff; */
    border: 1px solid rgba(16,122,116,.12);
    border-radius: 12px;
}

.param-section:first-child[b-nh23fz7t1z] {
    margin-top: 0;
}

.param-section-label[b-nh23fz7t1z] {
    font-size: 12px;
    font-weight: 700;
    color: #008080;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.param-section-label[b-nh23fz7t1z]::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #14b8a6;
    border-radius: 50%;
}

/* Preview */

.preview-placeholder[b-nh23fz7t1z] {
    min-height: 140px;
    border: 2px dashed #cbd5e1;
    border-radius: 14px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748b;
    text-align: center;
}

.preview-phone-icon[b-nh23fz7t1z] {
    font-size: 42px;
    margin-bottom: 10px;
}

.preview-placeholder p[b-nh23fz7t1z] {
    margin: 0;
    font-size: 13px;
}

/* Loading */

.node-content .loading-state[b-nh23fz7t1z] {
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 20px; */
    color: #008080;

}

/* System Variables */

.system-variables-help[b-nh23fz7t1z] {
    border: 1px solid #dbe4ea;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.system-variables-help summary[b-nh23fz7t1z] {
    cursor: pointer;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    user-select: none;
    list-style: none;
}

.system-variables-help summary[b-nh23fz7t1z]::-webkit-details-marker {
    display: none;
}

.system-variables-help summary:hover[b-nh23fz7t1z] {
    background: #f8fafc;
}

.variables-list[b-nh23fz7t1z] {
    border-top: 1px solid #e5e7eb;
    max-height: 220px;
    overflow-y: auto;
}

.variable-item[b-nh23fz7t1z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
}

.variable-item:last-child[b-nh23fz7t1z] {
    border-bottom: none;
}

.variable-item code[b-nh23fz7t1z] {
    background: rgba(20,184,166,.12);
    color: #0f766e;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.variable-label[b-nh23fz7t1z] {
    font-size: 12px;
    color: #64748b;
    text-align: right;
}

/* Scrollbar */

.variables-list[b-nh23fz7t1z]::-webkit-scrollbar {
    width: 6px;
}

.variables-list[b-nh23fz7t1z]::-webkit-scrollbar-thumb {
    background: rgba(20,184,166,.4);
    border-radius: 20px;
}

/* WhatsApp Preview Container */

.section .whatsapp-preview-container[b-nh23fz7t1z],
.section .whatsapp-preview[b-nh23fz7t1z] {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #dbe4ea;
    /* background: #fff; */
}

/* VARIABLE INSERTION STYLES FOR PARAMETERS */

.param-input-wrapper[b-nh23fz7t1z] {
    position: relative;
    width: 100%;
    display: flex;
}

.param-var-btn[b-nh23fz7t1z] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: #f0fdfa;
    color: #008080;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.param-var-btn:hover[b-nh23fz7t1z] {
    background: #008080;
    color: #fff;
}

.form-input[b-nh23fz7t1z] {
    padding-right: 50px !important;
}

.param-var-dropdown[b-nh23fz7t1z] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 340px;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    z-index: 99999;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.param-var-dropdown[b-nh23fz7t1z]::-webkit-scrollbar {
    width: 6px;
}

.param-var-dropdown[b-nh23fz7t1z]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.dropdown-group[b-nh23fz7t1z] {
    padding: 0;
}

.dropdown-group:first-child .dropdown-group-title[b-nh23fz7t1z] {
    border-top: none;
}

.dropdown-group-title[b-nh23fz7t1z] {
    padding: 10px 14px;
    background: #f8fafc;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.5px;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 2;
}

.dropdown-group:not(:last-child)[b-nh23fz7t1z] {
    border-bottom: 1px solid #f1f5f9;
}

.var-option[b-nh23fz7t1z] {
    width: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.var-option:not(:last-child)[b-nh23fz7t1z] {
    border-bottom: 1px solid #f1f5f9;
}

.var-option:hover[b-nh23fz7t1z] {
    background: #f0f4f8;
}

.var-label[b-nh23fz7t1z] {
    font-size: 13px;
    font-weight: 600;
    color: #008080;
}

.var-key[b-nh23fz7t1z] {
    font-family: 'Quicksand', sans-serif;
    font-size: 11px;
    color: #64748b;
}

.var-desc[b-nh23fz7t1z] {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.4;
}

/* Responsive */

@media (max-width: 768px) {

    .node-content[b-nh23fz7t1z] {
        padding: 12px;
    }

    .section[b-nh23fz7t1z] {
        padding: 12px;
    }
}
/* /Components/WhatsApp/Flows/ApiActionBindingCard.razor.rz.scp.css */
.api-action-card[b-55ju13ajwb] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
    /* margin-top: 12px; */
    /* padding: 16px; */
    /* border: 1px solid var(--card-border, var(--border-color)); */
    /* border-radius: 12px; */
    /* background: var(--glass-bg); */
    color: var(--text-primary);
}

.api-action-card > div:first-child[b-55ju13ajwb] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0 !important;
    color: var(--text-primary);
}

.api-action-card > div:first-child > span[b-55ju13ajwb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(20, 184, 166, .14);
}

.api-action-card .properties-section[b-55ju13ajwb] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
    margin: 0 !important;
}

.api-action-card .properties-section[style][b-55ju13ajwb] {
    margin-top: 0 !important;
}

.api-action-card .section-label[b-55ju13ajwb] {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.api-action-card .prop-select[b-55ju13ajwb],
.api-action-card .prop-input[b-55ju13ajwb] {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    min-height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--input-background, var(--card-bg));
    color: var(--text-primary);
    font: inherit;
    font-size: 12px !important;
    padding: 8px 10px;
}

.api-action-card .prop-select option[b-55ju13ajwb] {
    width: 100%;
    min-width: 0;
    border: 0;
    background: var(--card-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: 12px !important;
}

.api-action-card .prop-select:focus[b-55ju13ajwb],
.api-action-card .prop-input:focus[b-55ju13ajwb] {
    outline: none;
    border-color: var(--color-primary-light, #14b8a6);
    box-shadow: var(--input-shadow);
}

.api-action-card .prop-hint[b-55ju13ajwb] {
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.api-action-card .api-action-mapping[b-55ju13ajwb] {
    min-width: 0;
    padding-top: 16px;
    border-top: 1px solid var(--card-border, var(--border-color));
}

.api-action-card .api-action-mapping-tabs[b-55ju13ajwb] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.api-action-card .mapping-tab[b-55ju13ajwb],
.api-action-card .mapping-tab-active[b-55ju13ajwb] {
    flex: 1;
    min-width: 0;
    padding: 8px;
    border-radius: 7px;
    font-size: 12px;
}

.api-action-card .mapping-tab[b-55ju13ajwb] {
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
    color: var(--text-secondary);
}

.api-action-card .mapping-tab-active[b-55ju13ajwb] {
    border: 1px solid var(--color-primary-light, #14b8a6);
    background: rgba(20, 184, 166, .14);
    color: var(--text-primary);
}

.api-action-card table[b-55ju13ajwb] {
    width: 100% !important;
    table-layout: fixed;
    color: var(--text-primary);
}

.api-action-card th[b-55ju13ajwb],
.api-action-card td[b-55ju13ajwb] {
    overflow-wrap: anywhere;
    border-color: var(--card-border, var(--border-color)) !important;
}

.api-action-card thead tr[b-55ju13ajwb] {
    background: var(--glass-bg) !important;
    border-color: var(--card-border, var(--border-color)) !important;
}

.api-action-card th[b-55ju13ajwb] {
    color: var(--text-secondary);
    font-size: 11px;
}

.api-action-card td[b-55ju13ajwb] {
    color: var(--text-primary);
}

.api-action-card td[colspan][b-55ju13ajwb] {
    color: var(--text-muted) !important;
}

.api-action-card h4[b-55ju13ajwb],
.api-action-card small[b-55ju13ajwb] {
    color: var(--text-secondary) !important;
}

.api-action-card .api-action-add-btn[b-55ju13ajwb],
.api-action-card .api-action-remove-btn[b-55ju13ajwb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    margin-top: 8px;
    border: 0;
    border-radius: 6px;
    padding: 6px 10px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.api-action-card .api-action-add-btn[b-55ju13ajwb] {
    background: var(--color-primary, #008080);
}

.api-action-card .api-action-remove-btn[b-55ju13ajwb] {
    margin-top: 0;
    background: #dc2626;
}

.api-action-card .api-action-add-btn:hover[b-55ju13ajwb] {
    background: var(--color-primary-dark, #0d9488);
}

.api-action-card .api-action-remove-btn:hover[b-55ju13ajwb] {
    background: #b91c1c;
}

.api-action-card > div[style*="e8f5e9"][b-55ju13ajwb] {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(16, 185, 129, .35);
    border-radius: 7px !important;
    background: rgba(16, 185, 129, .12) !important;
    color: var(--text-primary) !important;
}

.api-action-card > div[style*="fff3cd"][b-55ju13ajwb] {
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(245, 158, 11, .35);
    border-left: 3px solid #f59e0b;
    border-radius: 7px !important;
    background: rgba(245, 158, 11, .12) !important;
    color: var(--text-primary) !important;
}

@media (max-width: 480px) {
    .api-action-card[b-55ju13ajwb] {
        padding: 12px;
        border-radius: 10px;
    }

    .api-action-card .api-action-mapping-tabs[b-55ju13ajwb] {
        flex-direction: column;
    }

    .api-action-card th[b-55ju13ajwb],
    .api-action-card td[b-55ju13ajwb] {
        padding: 6px 4px !important;
    }

    .api-action-card .api-action-remove-btn[b-55ju13ajwb] {
        width: 28px;
        min-width: 28px;
        padding: 4px;
        overflow: hidden;
        font-size: 0;
    }

    .api-action-card .api-action-remove-btn[b-55ju13ajwb]::before {
        content: "×";
        font-size: 16px;
        line-height: 1;
    }
}
/* /Components/WhatsApp/Flows/BlockApiActionConfig.razor.rz.scp.css */
[b-rzbmbpzagu] {
    :root {
        --bg-secondary: #f9f9fb;
        --bg-tertiary: #f0f0f3;
        --text-primary: #1d1d1f;
        --text-secondary: #5e5e62;
        --text-tertiary: #a1a1a6;
        --border-light: #d2d2d7;
        --color-primary: #3b82f6;
        --color-danger: #ef4444;
        --color-danger-dark: #dc2626;
        --color-info: #06b6d4;
        --bg-info-light: #ecf8fa;
    }
}

.block-api-action-config[b-rzbmbpzagu] {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background: var(--card-bg, var(--bg-secondary));
    border: 1px solid var(--card-border, var(--border-light));
    border-radius: 12px;
    font-family: 'Quicksand', sans-serif;
}

.config-section[b-rzbmbpzagu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.section-label[b-rzbmbpzagu] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-type-selector[b-rzbmbpzagu] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.action-btn[b-rzbmbpzagu] {
    min-width: 0;
    min-height: 88px;
    padding: 0.75rem;
    border: 1px solid var(--card-border, var(--border-light));
    background: var(--glass-bg, var(--bg-tertiary));
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    overflow-wrap: anywhere;
    transition: all 0.2s ease;
}

.action-btn:hover[b-rzbmbpzagu] {
    background: var(--glass-bg-hover, var(--bg-secondary));
    border-color: var(--color-primary);
}

.action-btn.active[b-rzbmbpzagu] {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.action-btn i[b-rzbmbpzagu] {
    font-size: 1rem;
}

.form-control[b-rzbmbpzagu] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--card-border, var(--border-light));
    border-radius: 7px;
    background: var(--input-background, var(--bg-tertiary));
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: 'Quicksand', sans-serif;
}

.form-control option[b-rzbmbpzagu] {
    width: 100%;
    min-width: 0;
    border: 0;
    background: var(--card-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: 12px !important;
}

.form-control:focus[b-rzbmbpzagu] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.endpoint-details[b-rzbmbpzagu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--glass-bg, var(--bg-tertiary));
    border-radius: 8px;
    margin-top: 0.75rem;
}

.detail-row[b-rzbmbpzagu] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.detail-row .label[b-rzbmbpzagu] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 60px;
}

.detail-row .value[b-rzbmbpzagu] {
    font-size: 0.8rem;
    font-family: 'Quicksand', sans-serif;
    color: var(--text-primary);
    padding: 0.35rem 0.65rem;
    background: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.badge[b-rzbmbpzagu] {
    display: inline-block;
    padding: 0.35rem 0.65rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-method[b-rzbmbpzagu] {
    background: var(--color-primary);
    color: white;
}

.collection-details[b-rzbmbpzagu] {
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin-top: 0.75rem;
}

.collection-details h4[b-rzbmbpzagu] {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.steps-list[b-rzbmbpzagu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.step-item[b-rzbmbpzagu] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 4px;
    border-left: 3px solid var(--color-primary);
}

.step-number[b-rzbmbpzagu] {
    font-weight: 600;
    color: var(--color-primary);
    min-width: 24px;
}

.step-content[b-rzbmbpzagu] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.step-name[b-rzbmbpzagu] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}

.step-endpoint[b-rzbmbpzagu] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-box[b-rzbmbpzagu] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    background: rgba(20, 184, 166, 0.1);
    border-radius: 8px;
    border-left: 3px solid var(--color-info);
    font-size: 0.85rem;
    color: var(--text-primary);
}

.info-box i[b-rzbmbpzagu] {
    font-size: 0.9rem;
    color: var(--color-info);
    flex-shrink: 0;
}

.toggle-label[b-rzbmbpzagu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.toggle-label input[type="checkbox"][b-rzbmbpzagu] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.trigger-config[b-rzbmbpzagu] {
    padding: 1rem;
    background: var(--glass-bg, var(--bg-tertiary));
    border-radius: 8px;
    border-left: 3px solid var(--color-primary);
}

.hint[b-rzbmbpzagu] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

@media (max-width: 768px) {
    .action-type-selector[b-rzbmbpzagu] {
        grid-template-columns: 1fr;
    }

    .action-btn[b-rzbmbpzagu] {
        min-height: 0;
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }
}
/* /Components/WhatsApp/Flows/FlowEndpointConfig.razor.rz.scp.css */
/* Endpoint Configuration Component Styles */

.endpoint-config-section[b-32xbxx3ttw] {
    padding: 1.5rem;
    background: transparent;
}

.endpoint-config-header[b-32xbxx3ttw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.endpoint-config-header i[b-32xbxx3ttw] {
    font-size: 1.25rem;
    opacity: 0.8;
}

.endpoint-config-hint[b-32xbxx3ttw] {
    margin-bottom: 1.5rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Routing Mode Selection Grid */
.endpoint-routing-modes[b-32xbxx3ttw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.routing-mode-card[b-32xbxx3ttw] {
    position: relative;
    display: block;
    padding: 1.25rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.routing-mode-card:hover[b-32xbxx3ttw] {
    background: var(--card-bg-hover);
}

.routing-mode-card.mode-selected[b-32xbxx3ttw] {
    border-color: var(--color-primary-light);
    background: var(--card-bg-hover);
}

.mode-card-header[b-32xbxx3ttw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mode-icon[b-32xbxx3ttw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: color 0.2s ease;
}

.mode-label[b-32xbxx3ttw] {
    font-size: 1rem;
    transition: color 0.2s ease;
}

.routing-mode-card.mode-selected .mode-label[b-32xbxx3ttw],
.routing-mode-card.mode-selected .mode-icon[b-32xbxx3ttw] {
    color: var(--color-primary-light);
}

.mode-description[b-32xbxx3ttw] {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.mode-features[b-32xbxx3ttw] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.routing-mode-card.mode-selected .mode-features[b-32xbxx3ttw] {
    border-top-color: var(--color-primary-light);
    color: var(--color-primary-light);
}

/* Configuration Details Sections */
.endpoint-config-details[b-32xbxx3ttw] {
    padding: 1.5rem;
    margin: 1.5rem 0 0 0;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--border-color);
    animation: slideDown-b-32xbxx3ttw 0.3s ease;
}

@keyframes slideDown-b-32xbxx3ttw {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.config-subsection[b-32xbxx3ttw] {
    margin-bottom: 0;
}

.config-label[b-32xbxx3ttw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.label-optional[b-32xbxx3ttw] {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.required-star[b-32xbxx3ttw] {
    color: #e74c3c;
    font-weight: bold;
}

.config-hint[b-32xbxx3ttw] {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* Emsage Endpoint Configuration */
.emsage-endpoint-config[b-32xbxx3ttw] {
    border-left-color: #2196F3;
}

.endpoint-connector-select[b-32xbxx3ttw] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95rem;
    background-color: white;
    color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.endpoint-connector-select:hover:not(:disabled)[b-32xbxx3ttw] {
    border-color: #999;
}

.endpoint-connector-select:focus[b-32xbxx3ttw] {
    outline: none;
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.endpoint-connector-select:disabled[b-32xbxx3ttw] {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}

.loading-state[b-32xbxx3ttw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    color: var(--text-muted);
    background: var(--card-bg);
    border-radius: 6px;
    font-size: 0.9rem;
}

.loading-state .spinner-border[b-32xbxx3ttw] {
    width: 1.25rem !important;
    height: 1.25rem !important;
    border-width: 0.2em;
}

.empty-connector-state[b-32xbxx3ttw] {
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 6px;
    color: var(--text-primary);
    text-align: center;
}

.empty-connector-state p[b-32xbxx3ttw] {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.empty-connector-state .hint[b-32xbxx3ttw] {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

.connector-info-box[b-32xbxx3ttw] {
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--card-bg);
    border-left: 3px solid #2196F3;
    border-radius: 4px;
}

/* External Endpoint Configuration */
.external-endpoint-config[b-32xbxx3ttw] {
    border-left-color: #ff9800;
}

.endpoint-url-input[b-32xbxx3ttw] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: 'Quicksand', sans-serif;
    background-color: var(--card-bg);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.endpoint-url-input:focus[b-32xbxx3ttw] {
    outline: none;
    border-color: #ff9800;
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1);
}

.endpoint-url-input:disabled[b-32xbxx3ttw] {
    background-color: #f5f5f5;
    color: var(--text-muted);
    cursor: not-allowed;
}

.endpoint-url-requirements[b-32xbxx3ttw] {
    background: var(--card-bg);
    border-radius: 6px;
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.endpoint-url-requirements summary[b-32xbxx3ttw] {
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    padding: 0;
}

.endpoint-url-requirements summary:hover[b-32xbxx3ttw] {
    color: var(--text-success);
}

.requirements-list[b-32xbxx3ttw] {
    margin-top: 0.75rem;
    padding-left: 1.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.requirements-list li[b-32xbxx3ttw] {
    margin-bottom: 0.5rem;
}

/* Static Flow Configuration */
.static-endpoint-config[b-32xbxx3ttw] {
    border-left-color: #9c27b0;
}

.static-flow-info[b-32xbxx3ttw] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.info-icon[b-32xbxx3ttw] {
    font-size: 1.5rem;
    color: #9c27b0;
    flex-shrink: 0;
}

.static-flow-info p[b-32xbxx3ttw] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.static-flow-info p:first-child[b-32xbxx3ttw] {
    font-weight: 600;
}

.static-flow-info p.mt-2[b-32xbxx3ttw] {
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Text Utilities */
.text-muted[b-32xbxx3ttw] {
    color: var(--text-muted) !important;
}

.text-success[b-32xbxx3ttw] {
    color: var(--text-success) !important;
}

.text-danger[b-32xbxx3ttw] {
    color: var(--text-danger) !important;
}

.d-block[b-32xbxx3ttw] {
    display: block;
}

.mt-2[b-32xbxx3ttw] {
    margin-top: 0.5rem;
}

.mt-3[b-32xbxx3ttw] {
    margin-top: 1rem;
}

.cursor-pointer[b-32xbxx3ttw] {
    cursor: pointer;
}

/* Responsive Design */
@media (max-width: 768px) {
    .endpoint-routing-modes[b-32xbxx3ttw] {
        grid-template-columns: 1fr;
    }

    .endpoint-config-section[b-32xbxx3ttw] {
        padding: 1rem;
    }

    .endpoint-config-details[b-32xbxx3ttw] {
        padding: 1rem;
    }

    .routing-mode-card[b-32xbxx3ttw] {
        padding: 1rem;
    }

    .mode-card-header[b-32xbxx3ttw] {
        gap: 0.5rem;
    }

    .mode-icon[b-32xbxx3ttw] {
        font-size: 1.25rem;
    }
}
/* /Components/WhatsApp/Flows/FlowVariableSelector.razor.rz.scp.css */
.flow-variable-selector-wrapper[b-leyxke2xiw] {
    position: relative;
    display: inline-block;
    margin-left: 8px;
}

.variable-insert-btn[b-leyxke2xiw] {
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 3px;
    white-space: nowrap;
}

.btn-outline-secondary[b-leyxke2xiw] {
    border-color: var(--border-color);
    color: var(--text-primary);
}

.btn-outline-secondary:hover:not(:disabled)[b-leyxke2xiw] {
    background: var(--card-bg-hover);
}

.variable-insert-btn:disabled[b-leyxke2xiw] {
    opacity: 0.5;
    cursor: not-allowed;
}

.variable-dropdown-menu[b-leyxke2xiw] {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--card-bg, var(--white-bg, #ffffff));
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 4px;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
    min-width: 300px;
    max-height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 1000;
    margin-top: 6px;
}

/* Scrollbar styling for Chrome, Safari, and Edge */
.variable-dropdown-menu[b-leyxke2xiw]::-webkit-scrollbar {
    width: 8px;
}

.variable-dropdown-menu[b-leyxke2xiw]::-webkit-scrollbar-track {
    background: var(--glass-bg, #f5f5f5);
    border-radius: 4px;
}

.variable-dropdown-menu[b-leyxke2xiw]::-webkit-scrollbar-thumb {
    background: var(--border-color, #ccc);
    border-radius: 4px;
}

.variable-dropdown-menu[b-leyxke2xiw]::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary, #999);
}

.variable-menu-header[b-leyxke2xiw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 12px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    background-color: var(--glass-bg-hover, #fafafa);
    border-radius: 3px 3px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #424242);
}

.variable-menu-close[b-leyxke2xiw] {
    padding: 0;
    filter: var(--close-button-filter, none);
}

[data-app-theme="dark"] .variable-menu-close[b-leyxke2xiw] {
    filter: invert(1);
}

.variable-menu-list[b-leyxke2xiw] {
    padding: 4px 0;
    padding-right: 8px;
}

.variable-group[b-leyxke2xiw] {
    margin: 0;
}

.variable-group-title[b-leyxke2xiw] {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted, #999);
    background-color: var(--glass-bg, #f5f5f5);
    border-bottom: 1px solid var(--border-color, #efefef);
}

.variable-group:first-child .variable-group-title[b-leyxke2xiw] {
    border-top: 0;
}

.variable-menu-item[b-leyxke2xiw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--text-primary, #1d1d1f);
    text-align: left;
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    font-size: 12px;
    transition: background-color 0.15s ease;
    gap: 8px;
}

.variable-menu-item:hover[b-leyxke2xiw] {
    background-color: var(--card-bg-hover, rgba(20, 184, 166, 0.1));
}

.variable-menu-item:active[b-leyxke2xiw] {
    background-color: var(--input-background-focus, rgba(20, 184, 166, 0.12));
}

.variable-name[b-leyxke2xiw] {
    flex: 1;
    color: var(--color-primary-light, #1976d2);
    font-weight: 500;
}

.variable-type[b-leyxke2xiw] {
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary, #666);
    background-color: var(--glass-bg-hover, #e8e8e8);
    border-radius: 2px;
    white-space: nowrap;
    font-family: 'Quicksand', sans-serif;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .variable-dropdown-menu[b-leyxke2xiw] {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        min-width: 90vw;
        max-width: 500px;
        max-height: 60vh;
        overflow-y: scroll;
    }
}
/* /Components/WhatsApp/Flows/RequestMappingPanel.razor.rz.scp.css */
[b-yjzz3e0f79] {
    :root {
        --bg-secondary: #f9f9fb;
        --bg-tertiary: #f0f0f3;
        --text-primary: #1d1d1f;
        --text-secondary: #5e5e62;
        --text-tertiary: #a1a1a6;
        --border-light: #d2d2d7;
        --color-primary: #3b82f6;
        --color-danger: #ef4444;
        --color-danger-dark: #dc2626;
    }
}

.request-mapping-panel[b-yjzz3e0f79] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    font-family: 'Quicksand', sans-serif;
}

.panel-header[b-yjzz3e0f79] {
    margin-bottom: 0.5rem;
}

.panel-header h4[b-yjzz3e0f79] {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.hint-text[b-yjzz3e0f79] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.empty-state-small[b-yjzz3e0f79] {
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.mapping-container[b-yjzz3e0f79] {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 1rem;
    min-height: 200px;
}

.mapping-column[b-yjzz3e0f79] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.column-label[b-yjzz3e0f79] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.flow-variables[b-yjzz3e0f79],
.request-fields[b-yjzz3e0f79] {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 0.75rem;
}

.variables-list[b-yjzz3e0f79],
.fields-list[b-yjzz3e0f79] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.variable-item[b-yjzz3e0f79],
.field-item[b-yjzz3e0f79] {
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.variable-item[b-yjzz3e0f79] {
    cursor: move;
}

.variable-item:hover[b-yjzz3e0f79] {
    background: #eef2ff;
    border-color: var(--color-primary);
}

.field-item[b-yjzz3e0f79] {
    cursor: default;
    justify-content: space-between;
    flex-wrap: wrap;
}

.field-info[b-yjzz3e0f79] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.field-name[b-yjzz3e0f79] {
    font-weight: 500;
    color: var(--text-primary);
}

.field-type[b-yjzz3e0f79] {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.mappings[b-yjzz3e0f79] {
    border: 2px solid var(--border-light);
    border-radius: 6px;
    padding: 0.75rem;
    background: var(--bg-secondary);
}

.mappings-list[b-yjzz3e0f79] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 180px;
}

.mapping-item[b-yjzz3e0f79] {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    border: 1px solid var(--border-light);
}

.mapping-from[b-yjzz3e0f79] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-primary);
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: 3px;
    word-break: break-word;
}

.mapping-arrow[b-yjzz3e0f79] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.mapping-to[b-yjzz3e0f79] {
    display: flex;
}

.flow-input-small[b-yjzz3e0f79] {
    width: 100%;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: 3px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: 'Quicksand', sans-serif;
}

.flow-input-small[b-yjzz3e0f79]::placeholder {
    color: var(--text-tertiary);
}

.btn-remove[b-yjzz3e0f79] {
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
}

.btn-remove:hover[b-yjzz3e0f79] {
    color: var(--color-danger-dark);
}

.mapping-drop-zone[b-yjzz3e0f79] {
    padding: 1rem;
    border: 2px dashed var(--border-light);
    border-radius: 4px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    cursor: default;
    transition: all 0.2s ease;
}

.mapping-drop-zone:hover[b-yjzz3e0f79] {
    border-color: var(--color-primary);
    background: #eef2ff;
}

.empty-note[b-yjzz3e0f79] {
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.schema-section[b-yjzz3e0f79] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.section-label[b-yjzz3e0f79] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.schema-editor[b-yjzz3e0f79] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.schema-placeholder[b-yjzz3e0f79] {
    display: flex;
}

.schema-textarea[b-yjzz3e0f79] {
    padding: 0.75rem;
    font-size: 0.75rem;
    font-family: 'Quicksand', sans-serif;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    resize: vertical;
}

.schema-textarea[b-yjzz3e0f79]::placeholder {
    color: var(--text-tertiary);
}

.schema-list[b-yjzz3e0f79] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 0.75rem;
}

.schema-field[b-yjzz3e0f79] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
}

.field-label[b-yjzz3e0f79] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
}

.field-type[b-yjzz3e0f79] {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 3px;
    color: var(--text-secondary);
}

.btn-remove-field[b-yjzz3e0f79] {
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-remove-field:hover[b-yjzz3e0f79] {
    color: var(--color-danger-dark);
}

.btn-edit-schema[b-yjzz3e0f79] {
    align-self: flex-start;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    border: 1px solid var(--border-light);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit-schema:hover[b-yjzz3e0f79] {
    background: var(--bg-secondary);
    border-color: var(--color-primary);
}

.text-muted[b-yjzz3e0f79] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

@media (max-width: 1024px) {
    .mapping-container[b-yjzz3e0f79] {
        grid-template-columns: 1fr;
    }
}
/* /Components/WhatsApp/Flows/ResponseMappingPanel.razor.rz.scp.css */
[b-ovyghyfckf] {
    :root {
        --bg-secondary: #f9f9fb;
        --bg-tertiary: #f0f0f3;
        --text-primary: #1d1d1f;
        --text-secondary: #5e5e62;
        --text-tertiary: #a1a1a6;
        --border-light: #d2d2d7;
        --color-primary: #3b82f6;
        --color-danger: #ef4444;
        --color-danger-dark: #dc2626;
    }
}

.response-mapping-panel[b-ovyghyfckf] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    font-family: 'Quicksand', sans-serif;
}

.panel-header[b-ovyghyfckf] {
    margin-bottom: 0.5rem;
}

.panel-header h4[b-ovyghyfckf] {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.hint-text[b-ovyghyfckf] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.empty-state-small[b-ovyghyfckf] {
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.mapping-container[b-ovyghyfckf] {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 1rem;
    min-height: 200px;
}

.mapping-column[b-ovyghyfckf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.column-label[b-ovyghyfckf] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.response-fields[b-ovyghyfckf],
.flow-variables[b-ovyghyfckf] {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 0.75rem;
}

.fields-list[b-ovyghyfckf],
.variables-list[b-ovyghyfckf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
}

.field-item[b-ovyghyfckf],
.variable-item[b-ovyghyfckf] {
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: move;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.field-item:hover[b-ovyghyfckf] {
    background: #eef2ff;
    border-color: var(--color-primary);
}

.variable-item[b-ovyghyfckf] {
    cursor: default;
    color: var(--text-secondary);
}

.mappings[b-ovyghyfckf] {
    border: 2px solid var(--border-light);
    border-radius: 6px;
    padding: 0.75rem;
    background: var(--bg-secondary);
}

.mappings-list[b-ovyghyfckf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 180px;
}

.mapping-item[b-ovyghyfckf] {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 4px;
    border: 1px solid var(--border-light);
}

.mapping-from[b-ovyghyfckf] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-primary);
    padding: 0.25rem 0.5rem;
    background: var(--bg-secondary);
    border-radius: 3px;
    word-break: break-word;
}

.mapping-arrow[b-ovyghyfckf] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.mapping-to[b-ovyghyfckf] {
    display: flex;
}

.flow-input-small[b-ovyghyfckf] {
    width: 100%;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: 3px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: 'Quicksand', sans-serif;
}

.flow-input-small[b-ovyghyfckf]::placeholder {
    color: var(--text-tertiary);
}

.btn-remove[b-ovyghyfckf] {
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
}

.btn-remove:hover[b-ovyghyfckf] {
    color: var(--color-danger-dark);
}

.mapping-drop-zone[b-ovyghyfckf] {
    padding: 1rem;
    border: 2px dashed var(--border-light);
    border-radius: 4px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
    cursor: default;
    transition: all 0.2s ease;
}

.mapping-drop-zone:hover[b-ovyghyfckf] {
    border-color: var(--color-primary);
    background: #eef2ff;
}

.empty-note[b-ovyghyfckf] {
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.sample-response-section[b-ovyghyfckf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.section-label[b-ovyghyfckf] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.response-textarea[b-ovyghyfckf] {
    padding: 0.75rem;
    font-size: 0.75rem;
    font-family: 'Quicksand', sans-serif;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    resize: vertical;
}

.response-textarea[b-ovyghyfckf]::placeholder {
    color: var(--text-tertiary);
}

.text-muted[b-ovyghyfckf] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .mapping-container[b-ovyghyfckf] {
        grid-template-columns: 1fr;
    }
}
/* /Components/WhatsApp/Flows/Static/AddBlockPicker.razor.rz.scp.css */
.abp-wrap[b-hkpy2h78s8] {
    position: relative;
    padding: 0 8px;
}

.abp-trigger[b-hkpy2h78s8] {
    width: 100%;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    padding: 8px;
    margin: 4px auto;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.abp-trigger:hover[b-hkpy2h78s8] {
    border-color: var(--color-primary-light);
    color: var(--color-primary-light);
    background: var(--hover-overlay);
}

.abp-picker[b-hkpy2h78s8] {
    /* position: absolute; */
    /* bottom: calc(100% + 6px); */
    /* left: 0; */
    /* right: 0; */
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    /* z-index: 999; */
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 2600px;
    overflow-y: auto;
    scrollbar-width: none;      
    -ms-overflow-style: none;
}

.abp-picker[b-hkpy2h78s8]::-webkit-scrollbar {
    display: none;       
}

.abp-item[b-hkpy2h78s8] {
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    padding: 8px;
    text-align: left;
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    width: 100%;
}

.abp-item:hover[b-hkpy2h78s8] {
    background: var(--hover-overlay);
}

.abp-item i[b-hkpy2h78s8] {
    color: var(--color-success);
    font-size: 1rem;
    flex: 0 0 auto;
}

.abp-item span[b-hkpy2h78s8] {
    display: flex;
    flex-direction: column;
}

.abp-item strong[b-hkpy2h78s8] {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 600;
}

.abp-item small[b-hkpy2h78s8] {
    font-size: 0.65rem;
    color: var(--text-muted);
}
/* /Components/WhatsApp/Flows/Static/BlockPropertiesPanel.razor.rz.scp.css */
.bpp-root[b-um6480dsxl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    color: var(--text-primary);
}

.bpp-heading[b-um6480dsxl] {
    margin: 0 0 6px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
}

.bpp-label[b-um6480dsxl] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 6px;
}

.bpp-input[b-um6480dsxl],
.bpp-textarea[b-um6480dsxl] {
    background: var(--input-background);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 0.8rem;
    width: 100%;
    color: var(--text-primary);
    font-family: 'Quicksand', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.bpp-input[b-um6480dsxl]::placeholder,
.bpp-textarea[b-um6480dsxl]::placeholder {
    color: var(--text-muted);
}

.bpp-input:focus[b-um6480dsxl],
.bpp-textarea:focus[b-um6480dsxl] {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: var(--input-shadow);
    background: var(--input-background-focus);
}

.bpp-input option[b-um6480dsxl] {
    background-color: var(--option-row-bg);
}

.bpp-error[b-um6480dsxl] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: var(--builder-error-bg);
    border: 1px solid var(--builder-error-border);
    border-radius: 4px;
    font-size: 0.7rem;
    color: var(--builder-error-text);
    margin-top: -4px;
}

.bpp-error i[b-um6480dsxl] {
    font-size: 0.75rem;
}

.bpp-checkbox-row[b-um6480dsxl] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    margin-top: 8px;
    color: var(--text-primary);
}

.bpp-hint[b-um6480dsxl] {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.bpp-options-editor[b-um6480dsxl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bpp-option-row[b-um6480dsxl] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--option-row-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px;
    transition: background 0.2s, border-color 0.2s;

}

.bpp-option-remove[b-um6480dsxl] {
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 4px;
    width: 22px;
    height: 22px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.bpp-option-remove:hover[b-um6480dsxl] {
    color: var(--builder-remove-hover-text);
    background: var(--builder-error-bg);
}

.bpp-option-add[b-um6480dsxl] {
    border: 1px dashed var(--border-color);
    background: transparent;
    color: var(--color-success);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.72rem;
    cursor: pointer;
    align-self: flex-start;
    transition: border-color 0.2s, background 0.2s;
}

.bpp-option-add:hover[b-um6480dsxl] {
    border-color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 12%, transparent);
}

.bpp-branch[b-um6480dsxl] {
    border: 1px solid var(--builder-section-border);
    border-radius: 8px;
    padding: 8px;
    margin-top: 8px;
    background: var(--builder-params-bg);
}

.bpp-branch-title[b-um6480dsxl] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bpp-branch-item[b-um6480dsxl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    padding: 4px 0;
    color: var(--text-primary);
}

.bpp-branch-item-label[b-um6480dsxl] {
    cursor: pointer;
    flex: 1;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
}

.bpp-branch-item-label:hover[b-um6480dsxl] {
    background: var(--builder-hover-bg, rgba(255, 255, 255, 0.08));
    color: var(--accent-color, #22c55e);
}

.bpp-add-case[b-um6480dsxl] {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.bpp-orphaned[b-um6480dsxl] {
    border-color: var(--builder-error-border) !important;
    background: var(--builder-error-bg);
}

/* ── Condition groups (If/Else block) ───────────────────────────────── */

.bpp-cond-header[b-um6480dsxl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.bpp-match-toggle[b-um6480dsxl] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bpp-match-caption[b-um6480dsxl] {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-right: 2px;
}

.bpp-match-btn[b-um6480dsxl] {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.bpp-match-btn:hover[b-um6480dsxl] {
    border-color: var(--color-primary-light);
}

.bpp-match-btn.active[b-um6480dsxl] {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
    color: #fff;
}

.bpp-group-joiner[b-um6480dsxl],
.bpp-rule-joiner[b-um6480dsxl] {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--color-primary-light);
    text-align: center;
    padding: 2px 0;
}

.bpp-cond-group[b-um6480dsxl] {
    border: 1px solid var(--builder-section-border);
    border-radius: 8px;
    padding: 8px;
    margin-top: 6px;
    background: var(--builder-params-bg);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bpp-cond-group-header[b-um6480dsxl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
}

.bpp-cond-rule[b-um6480dsxl] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bpp-rule-field[b-um6480dsxl] {
    flex: 1 1 0;
    min-width: 0;
}

.bpp-rule-field-sm[b-um6480dsxl] {
    flex: 0 0 84px;
}

.bpp-add-group[b-um6480dsxl] {
    margin-top: 8px;
}
/* /Components/WhatsApp/Flows/Static/PhoneFrameChrome.razor.rz.scp.css */
.pfc-frame[b-3fupxv0mf4] {
    border: 5px solid #030916;
    border-radius: 24px;
    background: var(--phone-frame-bezel);
    box-shadow: var(--shadow-lg);
}

.pfc-statusbar[b-3fupxv0mf4] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 14px;
    background: var(--phone-frame-bezel);
    color: var(--wa-flow-header-text, #fff);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.pfc-status-time[b-3fupxv0mf4] {
    justify-self: start;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.pfc-notch[b-3fupxv0mf4] {
    justify-self: center;
    height: 14px;
    width: 80px;
    background: #060e1f;
    border-radius: 6px;
    margin: 1px auto;
}

.pfc-status-icons[b-3fupxv0mf4] {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    line-height: 1;
}

.pfc-icon-battery[b-3fupxv0mf4] {
    font-size: 1rem;
}

.pfc-screen[b-3fupxv0mf4] {
    position: relative;
    background: var(--wa-flow-body-bg);
    border-radius: 5px 5px 20px 20px;
    height: 460px;
    overflow: hidden;
    transition: background 0.2s;
}

.pfc-header-bar[b-3fupxv0mf4] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    opacity: 0.1;
    background: var(--card-bg);
    color: var(--text-primary);
    z-index: 2;
    border-bottom: 1px solid color-mix(in srgb, var(--wa-flow-header-text) 10%, transparent);
}

.pfc-header-avatar[b-3fupxv0mf4] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--wa-flow-avatar-bg);
    color: var(--wa-flow-avatar-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    overflow: hidden;
}

.pfc-logo[b-3fupxv0mf4] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

[data-app-theme="light"] .pfc-logo-dark[b-3fupxv0mf4] {
    display: block;
}

[data-app-theme="dark"] .pfc-logo-light[b-3fupxv0mf4] {
    display: block;
}

.pfc-header-name[b-3fupxv0mf4] {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--wa-flow-header-text);
}

.pfc-header-sub[b-3fupxv0mf4] {
    display: block;
    font-size: 0.65rem;
    color: var(--wa-flow-header-sub-text);
}

.pfc-body[b-3fupxv0mf4] {
    position: absolute;
    top: 30px;
    min-height: 430px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    background: var(--phone-frame-bezel);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    color: var(--wa-flow-text);
    z-index: 5;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pfc-body[b-3fupxv0mf4]::-webkit-scrollbar {
    display: none;              /* Chrome, Safari, newer Edge */
}
/* /Components/WhatsApp/Flows/Static/ScreenPropertiesPanel.razor.rz.scp.css */
.spp-root[b-1cyttt4fb5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    color: var(--text-primary);
}

.spp-heading[b-1cyttt4fb5] {
    margin: 0 0 6px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
}

.spp-label[b-1cyttt4fb5] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 6px;
}

.spp-input[b-1cyttt4fb5],
.spp-textarea[b-1cyttt4fb5] {
    background: var(--input-background);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 0.8rem;
    width: 100%;
    color: var(--text-primary);
    font-family: 'Quicksand', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.spp-input[b-1cyttt4fb5]::placeholder,
.spp-textarea[b-1cyttt4fb5]::placeholder {
    color: var(--text-muted);
}

.spp-input:focus[b-1cyttt4fb5],
.spp-textarea:focus[b-1cyttt4fb5] {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: var(--input-shadow);
    background: var(--input-background-focus);
}

.spp-input option[b-1cyttt4fb5] {
    background-color: var(--option-row-bg);
}

select option[b-1cyttt4fb5] {
    background: var(--input-background);
    color: var(--text-primary);
}

.spp-checkbox-row[b-1cyttt4fb5] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    margin-top: 8px;
    color: var(--text-primary);
}

.spp-error[b-1cyttt4fb5] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: var(--builder-error-bg);
    border: 1px solid var(--builder-error-border);
    border-radius: 4px;
    font-size: 0.7rem;
    color: var(--builder-error-text);
    margin-top: -4px;
}

.spp-error i[b-1cyttt4fb5] {
    font-size: 0.75rem;
}

.spp-orphaned[b-1cyttt4fb5] {
    border-color: var(--builder-error-border) !important;
    background: var(--builder-error-bg);
}
/* /Components/WhatsApp/Flows/Static/StaticScreenPhoneNode.razor.rz.scp.css */
.ssn-node[b-ecrh7up1ir] {
    flex: 0 0 auto;
    width: 280px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border-radius: 24px;
    transform: scale(1);
}

.ssn-node-selected[b-ecrh7up1ir] {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
    /* border-radius: 20px; */
    z-index: 2;
}

.ssn-header[b-ecrh7up1ir] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px 8px 0 0;
    background: var(--phone-frame-bezel);
    /* border: 1px solid var(--card-border); */
    border-bottom: none;
    transition: border-color 0.2s;
}

.ssn-order[b-ecrh7up1ir] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--builder-params-bg);
    /* box-shadow: var(--shadow-sm); */
    border: 1px solid var(--border-color);
    color: var(--builder-param-color);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.ssn-title[b-ecrh7up1ir] {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ssn-badges[b-ecrh7up1ir] {
    display: flex;
    gap: 4px;
}

.ssn-badge[b-ecrh7up1ir] {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.ssn-badge-start[b-ecrh7up1ir] {
    background: var(--status-approved-bg);
    color: var(--status-approved-text);
}

.ssn-badge-end[b-ecrh7up1ir] {
    background: var(--status-rejected-bg);
    color: var(--status-rejected-text);
}

.ssn-delete[b-ecrh7up1ir] {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex: 0 0 auto;
    transition: color 0.2s;
}

.ssn-delete:hover[b-ecrh7up1ir] {
    color: var(--builder-remove-hover-text);
}

.ssn-body[b-ecrh7up1ir] {
    /* margin: 0 4px; */
    padding: 4px 0 6px;
    display: flex;
    flex-direction: column;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    gap: 10px;
    background-color: var(--phone-frame-bezel);
    /* border: 1px solid var(--border-color); */
    transition: box-shadow 0.2s, border-color 0.2s;
}

.ssn-empty[b-ecrh7up1ir] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
    padding: 30px 0;
}

.ssn-body-block[b-ecrh7up1ir] {
    padding: 0 6px 6px;

}

.ssn-inline-block[b-ecrh7up1ir] {
    position: relative;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    padding: 6px 8px;
    margin: 4px auto;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* old Edge/IE */
    transition: border-color 0.2s, background 0.2s;
}

.ssn-inline-block[b-ecrh7up1ir]::-webkit-scrollbar {
    display: none;              /* Chrome, Safari, newer Edge */
}

.ssn-inline-block-selected[b-ecrh7up1ir] {
    border-color: var(--color-primary-light) !important;
    background: var(--builder-upload-hover-bg);
}

.ssn-inline-block-delete[b-ecrh7up1ir] {
    position: absolute;
    top: 2px;
    right: 2px;
    border: none;
    background: var(--danger-color);
    color: #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 0.6rem;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ssn-inline-block:hover .ssn-inline-block-delete[b-ecrh7up1ir] {
    display: flex;
}

.ssn-heading-text[b-ecrh7up1ir] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.ssn-subheading-text[b-ecrh7up1ir] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.ssn-field-label[b-ecrh7up1ir] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.ssn-mock-input[b-ecrh7up1ir] {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--input-background);
}

.ssn-mock-radio[b-ecrh7up1ir] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    padding: 4px 0;
    color: var(--text-primary);
}

.ssn-mock-radio-dot[b-ecrh7up1ir] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--color-primary-light);
    flex: 0 0 auto;
}

.ssn-mock-image[b-ecrh7up1ir] {
    max-width: 100%;
    border-radius: 6px;
}

.ssn-mock-image-placeholder[b-ecrh7up1ir] {
    height: 80px;
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.ssn-mock-divider-block[b-ecrh7up1ir] {
    border-top: 1px solid var(--border-color);
    margin: 4px 0;
}

.ssn-mock-footer[b-ecrh7up1ir] {
    margin-top: 6px;
}

.ssn-mock-divider[b-ecrh7up1ir] {
    border-top: 1px solid var(--border-color);
    margin-bottom: 8px;
}

.ssn-mock-cta[b-ecrh7up1ir] {
    width: 100%;
    border: none;
    border-radius: 6px;
    padding: 8px;
    background: var(--color-primary-light);
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
}

.ssn-logic-chip[b-ecrh7up1ir] {
    font-size: 0.72rem;
    color: var(--builder-param-color);
    background: var(--builder-params-bg);
    border-radius: 6px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
/* /Components/WhatsApp/Templates/SearchableLanguageSelect.razor.rz.scp.css */
.searchable-select-wrapper[b-h7kk09p5gu] {
    position: relative;
    width: 100%;
}

.searchable-input[b-h7kk09p5gu] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-family: 'Quicksand', sans-serif;
    font-size: inherit;
    background-color: #fff;
    color: #1f2937;
}

.searchable-input:focus[b-h7kk09p5gu] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.searchable-input[b-h7kk09p5gu]::placeholder {
    color: #9ca3af;
}

.searchable-input:-webkit-autofill[b-h7kk09p5gu] {
    -webkit-box-shadow: none;
    background: none;
}

.form-group[b-h7kk09p5gu] {
    margin-bottom: 16px;
}

.form-label[b-h7kk09p5gu] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.checkbox-label[b-h7kk09p5gu] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-primary);
}
.warning-box[b-h7kk09p5gu] {
    color: var(--text-primary);
}

.form-input[b-h7kk09p5gu],
.form-select[b-h7kk09p5gu] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--color-surface);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-select option[b-h7kk09p5gu] {
    background: var(--color-surface);
    color: var(--text-primary);
}

.form-input:hover[b-h7kk09p5gu],
.form-select:hover[b-h7kk09p5gu] {
    border-color: var(--color-primary-light);
}

.form-input:focus[b-h7kk09p5gu],
.form-select:focus[b-h7kk09p5gu] {
    outline: none;
    border-color: #34C759;
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.1);
}
/* /Components/WhatsApp/Templates/TemplateBuilder.razor.rz.scp.css */
.template-builder[b-xczidbw4jy] {
    background: var(--color-surface);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border-color);
    font-family: 'Quicksand', sans-serif;
}

/* ===== SECTIONS ===== */
.builder-section[b-xczidbw4jy] {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--builder-section-border, var(--border-color));
}

.builder-section:last-child[b-xczidbw4jy] {
    border-bottom: none;
}

.section-head[b-xczidbw4jy] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.section-header[b-xczidbw4jy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-header h3[b-xczidbw4jy] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.required-indicator[b-xczidbw4jy] {
    font-size: 14px;
    color: var(--builder-required-color, #ef4444);
    font-weight: 500;
}

.section-label[b-xczidbw4jy] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 12px 0 8px 0;
}

/* ===== FORM ELEMENTS ===== */
.builder-select[b-xczidbw4jy],
.builder-input[b-xczidbw4jy],
.builder-textarea[b-xczidbw4jy] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--builder-input-border, var(--border-color));
    border-radius: 8px;
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--builder-input-bg, var(--color-surface));
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    text-overflow: ellipsis;
}

.builder-select option[b-xczidbw4jy] {
    background: var(--color-surface);
    color: var(--text-primary);
}

.builder-select:hover[b-xczidbw4jy],
.builder-input:hover[b-xczidbw4jy],
.builder-textarea:hover[b-xczidbw4jy] {
    border-color: var(--builder-input-hover-border, var(--color-primary-light));
}

.builder-select:focus[b-xczidbw4jy],
.builder-input:focus[b-xczidbw4jy],
.builder-textarea:focus[b-xczidbw4jy] {
    outline: none;
    border-color: var(--builder-input-focus-border, var(--color-primary-light));
    box-shadow: var(--builder-input-focus-shadow, 0 0 0 3px rgba(20, 184, 166, 0.1));
}

.builder-select[b-xczidbw4jy]::placeholder,
.builder-input[b-xczidbw4jy]::placeholder,
.builder-textarea[b-xczidbw4jy]::placeholder {
    color: var(--text-muted);
}

.builder-textarea[b-xczidbw4jy] {
    resize: vertical;
    min-height: 80px;
}

.builder-textarea-sm[b-xczidbw4jy] {
    min-height: 50px;
}

.char-count[b-xczidbw4jy] {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    text-align: right;
}

.meta-helper-text[b-xczidbw4jy] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* ===== EMOJI PICKER ===== */
.emoji-picker-panel[b-xczidbw4jy] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--builder-picker-bg, var(--glass-bg));
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.emoji-picker-panel[b-xczidbw4jy]::-webkit-scrollbar {
    display: none;
}

.emoji-btn[b-xczidbw4jy] {
    border: 1px solid var(--border-color);
    background: var(--color-surface);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    color: inherit;
}

.emoji-btn:hover[b-xczidbw4jy] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    background: var(--glass-bg-hover);
}

.btn-emoji[b-xczidbw4jy] {
    min-width: 90px;
}

/* ===== MEDIA UPLOAD ===== */
.media-upload[b-xczidbw4jy] {
    border: 2px dashed var(--builder-upload-border, var(--border-color));
    border-radius: 8px;
    padding: 32px 16px;
    text-align: center;
    background: var(--builder-upload-bg, var(--glass-bg));
    position: relative;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.media-upload:hover[b-xczidbw4jy] {
    border-color: var(--builder-upload-hover-border, var(--color-primary-light));
    background: var(--builder-upload-hover-bg, rgba(20, 184, 166, 0.08));
}

.media-toggle[b-xczidbw4jy] {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
}

.media-toggle-option[b-xczidbw4jy] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.media-toggle-option input[type="radio"][b-xczidbw4jy] {
    cursor: pointer;
}

.file-input[b-xczidbw4jy] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.upload-hint[b-xczidbw4jy] {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    pointer-events: none;
}

.validation-error[b-xczidbw4jy] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--builder-error-bg, rgba(239, 68, 68, 0.1));
    border: 1px solid var(--builder-error-border, rgba(239, 68, 68, 0.3));
    border-radius: 6px;
    color: var(--builder-error-text, #dc2626);
    font-size: 12px;
    margin-top: 8px;
}

/* ===== MEDIA PREVIEW ===== */
.media-preview[b-xczidbw4jy] {
    margin-top: 12px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--glass-bg);
    max-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-image[b-xczidbw4jy] {
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
    display: block;
    border-radius: 8px;
}

.preview-video[b-xczidbw4jy] {
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
    border-radius: 8px;
}

.document-preview[b-xczidbw4jy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    gap: 12px;
}

.document-icon[b-xczidbw4jy] {
    font-size: 48px;
    line-height: 1;
}

.document-name[b-xczidbw4jy] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    word-break: break-word;
    max-width: 200px;
    text-align: center;
}

.empty-header[b-xczidbw4jy] {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    background: var(--glass-bg);
    border-radius: 8px;
}

.media-controls[b-xczidbw4jy] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-remove-media[b-xczidbw4jy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--color-surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-remove-media i[b-xczidbw4jy] {
    font-size: 13px;
}

.btn-remove-media:hover[b-xczidbw4jy] {
    background: var(--glass-bg-hover);
    border-color: var(--builder-remove-hover-border, #ef4444);
    color: var(--builder-remove-hover-text, #ef4444);
}

.btn-remove-media:active[b-xczidbw4jy] {
    transform: scale(0.98);
}

/* ===== PARAMETERS SECTION ===== */
.parameters-section[b-xczidbw4jy] {
    margin-top: 12px;
    padding: 12px;
    background: var(--builder-params-bg, var(--glass-bg));
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.parameter-input[b-xczidbw4jy] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.parameter-input:last-child[b-xczidbw4jy] {
    margin-bottom: 0;
}

.param-label[b-xczidbw4jy] {
    font-size: 13px;
    font-weight: 600;
    color: var(--builder-param-color, var(--color-primary-light));
    min-width: 40px;
}

/* ===== BUTTON CONTROLS ===== */
.section-controls[b-xczidbw4jy] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.button-row[b-xczidbw4jy] {
    margin-bottom: 12px;
    padding: 12px;
    background: var(--builder-button-row-bg, var(--glass-bg));
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.button-controls[b-xczidbw4jy] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: stretch;
}

.button-controls > *[b-xczidbw4jy] {
    flex: 1 1 180px;
    min-width: 0;
}

/* Phone number group styling */
.phone-number-group[b-xczidbw4jy] {
    display: flex;
    gap: 8px;
    min-width: 0;
    flex: 2 1 320px;
}

.phone-country-select[b-xczidbw4jy] {
    flex: 0 0 140px;
    min-width: 120px;
}

.phone-input[b-xczidbw4jy] {
    flex: 1 1 auto;
    min-width: 80px;
}

.btn-remove[b-xczidbw4jy] {
    flex: 0 0 32px;
    min-width: 32px !important;
    width: 32px;
    padding: 8px;
    background: transparent;
    border: none;
    color: var(--builder-delete-color, #ef4444);
    cursor: pointer;
    font-size: 16px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-remove:hover[b-xczidbw4jy] {
    background: rgba(239, 68, 68, 0.1);
}

.btn-add-button[b-xczidbw4jy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--color-primary-light);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-add-button i[b-xczidbw4jy] {
    font-size: 13px;
    line-height: 1;
}

.btn-add-button:hover[b-xczidbw4jy] {
    background: rgba(20, 184, 166, 0.1);
}

/* ===== PRIMARY BUTTON ===== */
.btn-primary[b-xczidbw4jy] {
    flex: 1;
    padding: 10px 16px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover[b-xczidbw4jy] {
    box-shadow: 0 8px 16px rgba(0, 128, 128, 0.3);
    transform: translateY(-1px);
}

.btn-primary:active[b-xczidbw4jy] {
    transform: translateY(0);
}

/* ===== BUILDER ACTIONS ===== */
.builder-actions[b-xczidbw4jy] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

/* ===== CAROUSEL SECTION ===== */
.carousel-mode-notice[b-xczidbw4jy] {
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(33, 150, 243, 0.08);
    border: 1px solid rgba(33, 150, 243, 0.2);
    border-left: 4px solid #2196f3;
    border-radius: 8px;
    color: var(--text-primary);
}

.carousel-mode-notice p[b-xczidbw4jy] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.carousel-card-row[b-xczidbw4jy] {
    margin-bottom: 16px;
    padding: 16px;
    background: var(--builder-carousel-row-bg, var(--glass-bg));
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.carousel-card-heading[b-xczidbw4jy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}

.carousel-card-heading > div[b-xczidbw4jy] {
    flex: 1;
    min-width: 0;
}

.carousel-card-heading h4[b-xczidbw4jy] {
    margin: 0;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 650;
}

.carousel-card-heading p[b-xczidbw4jy] {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

.carousel-card-title[b-xczidbw4jy] {
    flex: 0 1 180px;
    min-width: 120px;
}

.carousel-remove-card[b-xczidbw4jy],
.carousel-remove-component[b-xczidbw4jy] {
    padding: 8px 11px;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 7px;
    color: var(--builder-delete-color, #ef4444);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.carousel-remove-card[b-xczidbw4jy] {
    white-space: nowrap;
}

.carousel-remove-card:hover[b-xczidbw4jy],
.carousel-remove-component:hover[b-xczidbw4jy] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.65);
}

.carousel-card-controls[b-xczidbw4jy] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
}

.carousel-component-editor[b-xczidbw4jy] {
    display: grid;
    gap: 10px;
    padding: 14px;
    background: var(--builder-component-bg, rgba(0, 0, 0, 0.025));
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--color-primary);
    border-radius: 9px;
}

.carousel-component-heading[b-xczidbw4jy] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.carousel-component-heading .section-label[b-xczidbw4jy] {
    margin: 0;
    flex: 1;
}

.carousel-component-heading .builder-select[b-xczidbw4jy] {
    flex: 0 1 200px;
    width: auto;
}

.carousel-component-editor .builder-textarea[b-xczidbw4jy] {
    margin-top: 0;
}

.carousel-component-fields[b-xczidbw4jy] {
    display: grid;
    grid-template-columns: auto minmax(120px, 180px);
    align-items: center;
    gap: 8px 12px;
}

.carousel-component-fields > .section-label[b-xczidbw4jy] {
    margin: 0;
}

.carousel-format-select[b-xczidbw4jy] {
    width: auto;
}

.carousel-media-field[b-xczidbw4jy] {
    grid-column: 1 / -1;
    display: grid;
    gap: 6px;
}

.carousel-media-field .section-label[b-xczidbw4jy] {
    margin: 0;
}

.carousel-header-format[b-xczidbw4jy] {
    display: grid;
    gap: 8px;
}

.carousel-header-format .section-label[b-xczidbw4jy] {
    margin: 0;
}

.carousel-header-format-options[b-xczidbw4jy] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.carousel-format-option[b-xczidbw4jy] {
    padding: 7px 13px;
    background: var(--color-surface);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.carousel-format-option:hover[b-xczidbw4jy] {
    border-color: var(--color-primary);
    background: rgba(20, 184, 166, 0.08);
}

.carousel-buttons-editor[b-xczidbw4jy] {
    display: grid;
    gap: 10px;
}

.carousel-buttons-editor > .section-label[b-xczidbw4jy] {
    margin: 0;
}

.carousel-button-editor[b-xczidbw4jy] {
    display: grid;
    gap: 8px;
    padding: 10px;
    background: var(--color-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.carousel-button-heading[b-xczidbw4jy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.carousel-button-heading .builder-select[b-xczidbw4jy] {
    flex: 1;
    min-width: 0;
}

.carousel-remove-button[b-xczidbw4jy] {
    flex: 0 0 34px;
    min-width: 34px !important;
    width: 34px;
    padding: 6px;
}

.carousel-add-control[b-xczidbw4jy] {
    width: 100%;
    margin-top: 2px;
    padding: 9px 12px;
}

.carousel-remove-component[b-xczidbw4jy] {
    width: 100%;
    justify-self: end;
}

@media (max-width: 600px) {
    .carousel-card-row[b-xczidbw4jy] {
        padding: 12px;
    }

    .carousel-card-heading[b-xczidbw4jy] {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .carousel-card-title[b-xczidbw4jy] {
        flex: 1 1 100%;
        order: 1;
    }

    .carousel-remove-card[b-xczidbw4jy] {
        order: 2;
    }

    .carousel-component-editor[b-xczidbw4jy] {
        padding: 11px;
    }

    .carousel-component-fields[b-xczidbw4jy] {
        grid-template-columns: 1fr;
    }

    .carousel-component-fields > *[b-xczidbw4jy] {
        grid-column: 1;
    }

    .carousel-component-heading[b-xczidbw4jy] {
        align-items: flex-start;
        flex-direction: column;
    }

    .carousel-component-heading .builder-select[b-xczidbw4jy] {
        width: 100%;
        flex: 1 1 auto;
    }
}

.btn-sm[b-xczidbw4jy] {
    padding: 4px 8px;
    font-size: 11px;
    min-width: 80px;
}

.empty-state[b-xczidbw4jy] {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    background: var(--glass-bg);
    border-radius: 8px;
    border: 1px dashed var(--border-color);
}

/* ===== LAYOUT PICKER ===== */
.layout-picker[b-xczidbw4jy] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.layout-tile[b-xczidbw4jy] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1 1 180px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.layout-tile:hover[b-xczidbw4jy] {
    border-color: var(--color-primary, #0a84ff);
}

.layout-tile-selected[b-xczidbw4jy] {
    border-color: var(--color-primary, #0a84ff);
    background: var(--color-primary-soft, rgba(10, 132, 255, 0.1));
}

.layout-tile-title[b-xczidbw4jy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.layout-tile-title i[b-xczidbw4jy] {
    font-size: 13px;
}

.layout-tile-desc[b-xczidbw4jy] {
    font-size: 12px;
    color: var(--text-muted);
}

.checkbox-label[b-xczidbw4jy] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    margin-top: 8px;
}
/* /Components/WhatsApp/Templates/WhatsAppPreview.razor.rz.scp.css */
.wap-preview-container[b-duv2p2jfq8] {
    width: 100%;
    height: 475px;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding: 10px;
    box-sizing: border-box;
}

[data-app-theme="light"] .wap-phone-frame[b-duv2p2jfq8] {
    --wap-header-bg: #075E54;
    --wap-header-text: #ffffff;
    --wap-header-subtext: rgba(255, 255, 255, 0.82);
    --wap-body-bg: #f4f6f8;
    --wap-body-text: #1f2937;
    --wap-muted-text: #667781;
    --wap-panel-bg: #ffffff;
    --wap-panel-border: #e5e7eb;
    --wap-button-text: #0d9488;
    --wap-divider: #e9edef;
    --wap-input-bg: #ffffff;
    --wap-input-placeholder: #8696A0;
    --wap-meta-bg: #f3f4f6;
    --wap-meta-text: #4b5563;
    --wap-wallpaper-image: url('/images/wallpaper-whatsapp.webp');
}

[data-app-theme="dark"] .wap-phone-frame[b-duv2p2jfq8] {
    --wap-header-bg: #0f172a;
    --wap-header-text: #f5f7fa;
    --wap-header-subtext: rgba(255, 255, 255, 0.75);
    --wap-body-bg: #0f172a;
    --wap-body-text: #f3f4f6;
    --wap-muted-text: #cbd5e1;
    --wap-panel-bg: #111827;
    --wap-panel-border: rgba(20, 184, 166, 0.28);
    --wap-button-text: #5eead4;
    --wap-divider: rgba(148, 163, 184, 0.22);
    --wap-input-bg: rgba(255, 255, 255, 0.04);
    --wap-input-placeholder: #9ca3af;
    --wap-meta-bg: rgba(255, 255, 255, 0.04);
    --wap-meta-text: #d1d5db;
    --wap-wallpaper-image: url('/images/wallpaper-dark.webp');
}

.wap-phone-frame[b-duv2p2jfq8] {
    width: 300px;
    height: 100%;

    background: var(--phone-frame-bg);

    border: 10px solid var(--phone-bezel);
    border-radius: 36px;

    overflow: hidden;
    position: relative;

    display: flex;
    flex-direction: column;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.25),
        0 4px 10px rgba(0, 0, 0, 0.15);
}

.wap-phone-frame[b-duv2p2jfq8]::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);

    width: 110px;
    height: 20px;

    background: var(--phone-bezel);
    border-radius: 20px;

    z-index: 10;
}

.wap-status-bar[b-duv2p2jfq8] {
    height: 34px;
    background: var(--card-bg);
    color: var(--text-primary);

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    padding: 0 16px 6px;

    font-size: 12px;
    font-weight: 600;

    flex-shrink: 0;
}

.wap-status-icons[b-duv2p2jfq8] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

.wap-header[b-duv2p2jfq8] {
    background: var(--wap-header-bg);

    padding: 10px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-shrink: 0;
}

.wap-contact-info[b-duv2p2jfq8] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wap-avatar[b-duv2p2jfq8] {
    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: linear-gradient(135deg, #25D366, #128C7E);

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.wap-name[b-duv2p2jfq8] {
    color: var(--wap-header-text);
    font-size: 15px;
    font-weight: 600;
}

.wap-status[b-duv2p2jfq8] {
    color: var(--wap-header-subtext);
    font-size: 11px;
}

.wap-header-icons[b-duv2p2jfq8] {
    color: var(--wap-header-text);
    font-size: 18px;
}

.wap-messages[b-duv2p2jfq8] {
    flex: 1;
    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 10px;

    background-color: var(--wap-body-bg);
    background-image: var(--wap-wallpaper-image);
    background-size: cover;
    background-position: center;
}

.wap-messages[b-duv2p2jfq8]::-webkit-scrollbar {
    width: 5px;
}

.wap-messages[b-duv2p2jfq8]::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.25);
    border-radius: 10px;
}

.wap-message-bubble[b-duv2p2jfq8] {
    width: 100%;
    max-width: 100%;

    background: var(--wap-panel-bg);
    border: 1px solid var(--wap-panel-border);

    border-radius: 10px;

    padding: 10px;

    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.wap-header-text[b-duv2p2jfq8] {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--wap-body-text);
}

.wap-body-text[b-duv2p2jfq8] {
    font-size: 14px;
    line-height: 1.5;
    color: var(--wap-muted-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.wap-limited-offer[b-duv2p2jfq8] {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 168, 132, 0.32);
    border-radius: 9px;
    background: rgba(0, 168, 132, 0.08);
}

.wap-limited-offer-label[b-duv2p2jfq8] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: var(--wap-button-text);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.wap-limited-offer-text[b-duv2p2jfq8] {
    color: var(--wap-body-text);
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.wap-limited-offer-expiry[b-duv2p2jfq8] {
    margin-top: 3px;
    color: var(--wap-muted-text);
    font-size: 11px;
}

.wap-footer-text[b-duv2p2jfq8] {
    margin-top: 8px;

    font-size: 12px;
    color: var(--wap-muted-text);
}

.wap-message-time[b-duv2p2jfq8] {
    text-align: right;
    margin-top: 6px;

    font-size: 11px;
    color: var(--wap-muted-text);
}

.wap-media-content[b-duv2p2jfq8] {
    width: 100%;
    max-height: 180px;

    object-fit: cover;
    border-radius: 8px;

    margin-bottom: 8px;
}

.wap-location-card[b-duv2p2jfq8] {
    margin-bottom: 8px;
    overflow: hidden;
    border: 1px solid var(--wap-panel-border);
    border-radius: 10px;
    background: var(--wap-panel-bg);
}

.wap-location-map[b-duv2p2jfq8] {
    position: relative;
    height: 150px;
    overflow: hidden;
    background: var(--wap-meta-bg);
}

.wap-location-map iframe[b-duv2p2jfq8] {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

.wap-location-map-placeholder[b-duv2p2jfq8] {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--wap-button-text);
    background: linear-gradient(135deg, var(--wap-meta-bg), var(--wap-body-bg));
    font-size: 12px;
}

.wap-location-map-placeholder i[b-duv2p2jfq8] {
    color: #e5484d;
    font-size: 30px;
}

.wap-location-details[b-duv2p2jfq8] {
    padding: 9px 10px 10px;
}

.wap-location-name[b-duv2p2jfq8] {
    overflow: hidden;
    color: var(--wap-body-text);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wap-location-address[b-duv2p2jfq8] {
    margin-top: 2px;
    overflow: hidden;
    color: var(--wap-muted-text);
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.wap-media-placeholder[b-duv2p2jfq8],
.wap-video-placeholder[b-duv2p2jfq8] {
    width: 100%;
    height: 160px;

    border-radius: 8px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    margin-bottom: 8px;
}

.wap-media-placeholder[b-duv2p2jfq8] {
    background: var(--wap-meta-bg);
    color: var(--wap-meta-text);
}

.wap-video-placeholder[b-duv2p2jfq8] {
    background: rgba(15, 23, 42, 0.85);
}

.wap-play-icon[b-duv2p2jfq8] {
    color: #fff;
    font-size: 48px;
}

.wap-button[b-duv2p2jfq8] {
    width: 100%;

    background: var(--wap-panel-bg);

    border: none;
    border-top: 1px solid var(--wap-divider);

    padding: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    color: var(--wap-button-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.wap-button:hover[b-duv2p2jfq8] {
    background: var(--wap-meta-bg);
}

.wap-carousel-track[b-duv2p2jfq8] {
    display: flex;
    gap: 10px;
    max-width: 100%;
    margin: 10px -4px 0;
    padding: 0 4px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 119, 129, 0.55) transparent;
}

.wap-carousel-track[b-duv2p2jfq8]::-webkit-scrollbar {
    height: 5px;
}

.wap-carousel-track[b-duv2p2jfq8]::-webkit-scrollbar-thumb {
    background: rgba(102, 119, 129, 0.45);
    border-radius: 999px;
}

.wap-carousel-card[b-duv2p2jfq8] {
    display: flex;
    flex: 0 0 210px;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--wap-panel-bg);
    border: 1px solid var(--wap-panel-border);
    border-radius: 9px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    scroll-snap-align: start;
}

.wap-carousel-media[b-duv2p2jfq8] {
    display: block;
    width: 100%;
    height: 118px;
    flex: 0 0 118px;
    object-fit: cover;
}

.wap-carousel-media-placeholder[b-duv2p2jfq8] {
    display: flex;
    width: 100%;
    height: 118px;
    flex: 0 0 118px;
    align-items: center;
    justify-content: center;
}

.wap-carousel-media-placeholder[b-duv2p2jfq8],
.wap-carousel-document[b-duv2p2jfq8] {
    flex-direction: column;
    gap: 7px;
    background: var(--wap-meta-bg);
    color: var(--wap-meta-text);
    font-size: 12px;
}

.wap-carousel-media-placeholder i[b-duv2p2jfq8],
.wap-carousel-document i[b-duv2p2jfq8] {
    font-size: 28px;
}

.wap-carousel-document[b-duv2p2jfq8] {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: center;
}

.wap-carousel-header-text[b-duv2p2jfq8] {
    padding: 12px 11px 2px;
    color: var(--wap-body-text);
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.wap-carousel-card-body[b-duv2p2jfq8] {
    padding: 10px 11px 12px;
    color: var(--wap-muted-text);
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.wap-carousel-card-footer[b-duv2p2jfq8] {
    padding: 0 11px 10px;
    color: var(--wap-muted-text);
    font-size: 11px;
}

.wap-carousel-card-buttons[b-duv2p2jfq8] {
    margin-top: auto;
    border-top: 1px solid var(--wap-divider);
}

.wap-carousel-card-button[b-duv2p2jfq8] {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid var(--wap-divider);
    color: var(--wap-button-text);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    overflow-wrap: anywhere;
}

.wap-carousel-card-button:last-child[b-duv2p2jfq8] {
    border-bottom: 0;
}

.wap-input-area[b-duv2p2jfq8] {
    background: var(--wap-body-bg);

    padding: 8px 10px;

    display: flex;
    align-items: center;
    gap: 8px;

    flex-shrink: 0;
}

.wap-input[b-duv2p2jfq8] {
    flex: 1;

    border: none;
    outline: none;

    background: var(--wap-input-bg);
    color: var(--wap-body-text);

    border-radius: 20px;

    padding: 10px 14px;

    font-size: 13px;
}

.wap-input[b-duv2p2jfq8]::placeholder {
    color: var(--wap-input-placeholder);
}

.wap-send-icon[b-duv2p2jfq8] {
    font-size: 18px;
    color: var(--wap-muted-text);
}

@media (max-width: 1024px) {
    .wap-preview-container[b-duv2p2jfq8] {
        height: 450px;
    }
}

@media (max-width: 768px) {
    .wap-phone-frame[b-duv2p2jfq8] {
        width: 320px;
        height: 540px;
    }
}

@media (max-width: 480px) {
    .wap-preview-container[b-duv2p2jfq8] {
        height: 560px;
    }

    .wap-phone-frame[b-duv2p2jfq8] {
        width: 100%;
        max-width: 320px;
        height: 520px;
    }
}

/* Modal presentation: let the phone itself define the preview dimensions. */
.wap-preview-container.wap-preview-compact[b-duv2p2jfq8] {
    width: 100%;
    height: 100%;
    padding: 0;
}

.wap-preview-container.wap-preview-compact .wap-phone-frame[b-duv2p2jfq8] {
    width: 100%;
    max-width: 100%;
    height: 100%;
}
/* /Components/WhatsApp/Webhooks/WebhookActiveView.razor.rz.scp.css */

/* ===== Container ===== */
.webhook-active-view[b-n8yyb75gqv] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    font-family: 'Quicksand', sans-serif;
}

/* ===== Config Card ===== */
.config-card[b-n8yyb75gqv] {
    background: var(--color-surface-alt);
    background-image: var(--gradient-dark);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(20, 184, 166, 0.04) inset;
    overflow: hidden;
    position: relative;
}

.config-card[b-n8yyb75gqv]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brand-accent), transparent);
    opacity: 0.5;
}

.config-card .card-header[b-n8yyb75gqv] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: var(--mac-header-gradient), var(--hero-bg-dark);
    border-bottom: 1px solid var(--border-color);
}

.config-card .card-header h2[b-n8yyb75gqv] {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-white);
    margin: 0;
}

.mac-dots[b-n8yyb75gqv] {
    display: flex;
    gap: 0.5rem;
}

.mac-dots span[b-n8yyb75gqv] {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}

.mac-dots .red[b-n8yyb75gqv] {
    background-color: var(--red-light);
    color: var(--red-light);
}

.mac-dots .yellow[b-n8yyb75gqv] {
    background-color: var(--yellow-light);
    color: var(--yellow-light);
}

.mac-dots .green[b-n8yyb75gqv] {
    background-color: var(--green-light);
    color: var(--green-light);
}

/* ===== Card Content ===== */
.card-content[b-n8yyb75gqv] {
    padding: 2.25rem 2rem;
}

.config-row[b-n8yyb75gqv] {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    align-items: flex-start;
}

.config-row:last-of-type[b-n8yyb75gqv] {
    margin-bottom: 0;
}

.config-item[b-n8yyb75gqv] {
    flex: 1;
}

.config-item.full-width[b-n8yyb75gqv] {
    flex: 1 100%;
}

.config-label[b-n8yyb75gqv] {
    display: block;
    font-family: 'Quicksand', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-accent);
    margin-bottom: 0.75rem;
}

/* ===== URL Display ===== */
.url-display[b-n8yyb75gqv] {
    padding: 1rem;
    background-color: var(--input-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow-x: auto;
}

.url-value[b-n8yyb75gqv] {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.9rem;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-all;
}

/* ===== Status Badge ===== */
.status-badge[b-n8yyb75gqv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.status-badge.active[b-n8yyb75gqv] {
    background-color: rgba(39, 201, 63, 0.1);
    color: var(--green-light);
    border: 1px solid rgba(39, 201, 63, 0.35);
}

.status-badge.inactive[b-n8yyb75gqv] {
    background-color: var(--input-background);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.status-dot[b-n8yyb75gqv] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-badge.active .status-dot[b-n8yyb75gqv] {
    background-color: var(--green-light);
    box-shadow: 0 0 6px rgba(39, 201, 63, 0.8);
}

.status-badge.inactive .status-dot[b-n8yyb75gqv] {
    background-color: var(--text-muted);
}

/* ===== Events Chips ===== */
.events-chips[b-n8yyb75gqv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.event-chip[b-n8yyb75gqv] {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 2rem;
    font-family: 'Quicksand', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-secondary);
    white-space: nowrap;
}

/* ===== Secret Key Section ===== */
.secret-key-section[b-n8yyb75gqv] {
    padding: 2rem;
    background-color: rgba(245, 158, 11, 0.04);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--radius-sm);
    margin: 2rem 0;
}

.secret-key-box[b-n8yyb75gqv] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: rgba(2, 6, 23, 0.4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
    font-family: 'Quicksand', sans-serif;
}

.secret-key-content[b-n8yyb75gqv] {
    flex: 1;
    overflow-x: auto;
    padding: 0.25rem 0;
}

.secret-key-display[b-n8yyb75gqv] {
    display: block;
    font-size: 0.9rem;
    color: var(--text-primary);
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.secret-key-display.revealed[b-n8yyb75gqv] {
    color: var(--brand-accent);
}

.secret-key-display.masked[b-n8yyb75gqv] {
    letter-spacing: 0.3em;
    color: var(--text-muted);
}

.secret-key-actions[b-n8yyb75gqv] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-secret-action[b-n8yyb75gqv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--border-color);
    background-color: var(--input-background);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-secret-action:hover[b-n8yyb75gqv] {
    background-color: var(--input-background-focus);
    border-color: var(--color-primary-light);
}

.btn-secret-action:active[b-n8yyb75gqv] {
    transform: scale(0.95);
}

.action-icon[b-n8yyb75gqv] {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.secret-key-hint[b-n8yyb75gqv] {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.75rem;
}

/* ===== Copy Success Toast ===== */
.copy-success-toast[b-n8yyb75gqv] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem 1.5rem;
    background-color: var(--color-surface-alt);
    color: var(--green-light);
    border: 1px solid rgba(39, 201, 63, 0.4);
    border-radius: var(--radius-sm);
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    box-shadow: var(--shadow-lg), 0 0 20px rgba(39, 201, 63, 0.15);
    animation: slideUp-b-n8yyb75gqv 0.3s ease-out;
    z-index: 9000;
}

@keyframes slideUp-b-n8yyb75gqv {
    from {
        transform: translateY(1rem);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===== Config Actions ===== */
.config-actions[b-n8yyb75gqv] {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.btn-edit[b-n8yyb75gqv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: var(--gradient-secondary);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-inverse);
    font-family: 'Quicksand', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.25);
}

.btn-edit:hover[b-n8yyb75gqv] {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(245, 158, 11, 0.4);
}

.btn-edit:active[b-n8yyb75gqv] {
    transform: translateY(0);
}

.edit-icon[b-n8yyb75gqv] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Danger Zone ===== */
.danger-zone[b-n8yyb75gqv] {
    background-color: rgba(255, 95, 86, 0.04);
    border: 1px solid rgba(255, 95, 86, 0.3);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.danger-header[b-n8yyb75gqv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 2rem;
    background-color: rgba(255, 95, 86, 0.06);
    border-bottom: 1px solid rgba(255, 95, 86, 0.25);
}

.danger-icon[b-n8yyb75gqv] {
    font-size: 1.3rem;
}

.danger-header h3[b-n8yyb75gqv] {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--red-light);
    margin: 0;
}

.danger-content[b-n8yyb75gqv] {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.danger-action[b-n8yyb75gqv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem;
    background-color: var(--input-background);
    border: 1px solid rgba(255, 95, 86, 0.15);
    border-radius: var(--radius-sm);
}

.danger-action-info h4[b-n8yyb75gqv] {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.danger-action-info p[b-n8yyb75gqv] {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.btn-danger-secondary[b-n8yyb75gqv],
.btn-danger-primary[b-n8yyb75gqv] {
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Quicksand', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-danger-secondary[b-n8yyb75gqv] {
    background-color: rgba(255, 95, 86, 0.08);
    color: var(--red-light);
    border: 1px solid rgba(255, 95, 86, 0.35);
}

.btn-danger-secondary:hover:not(:disabled)[b-n8yyb75gqv] {
    background-color: rgba(255, 95, 86, 0.15);
    border-color: rgba(255, 95, 86, 0.55);
}

.btn-danger-primary[b-n8yyb75gqv] {
    background: linear-gradient(135deg, #ff5f56 0%, #d63b32 100%);
    color: var(--text-white);
    box-shadow: 0 10px 25px rgba(255, 95, 86, 0.25);
}

.btn-danger-primary:hover:not(:disabled)[b-n8yyb75gqv] {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(255, 95, 86, 0.4);
}

.btn-danger-primary:active:not(:disabled)[b-n8yyb75gqv] {
    transform: translateY(0);
}

.btn-danger-secondary:disabled[b-n8yyb75gqv],
.btn-danger-primary:disabled[b-n8yyb75gqv] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Confirmation Modal ===== */
.confirmation-content[b-n8yyb75gqv] {
    padding: 1.5rem 0;
}

.confirmation-message[b-n8yyb75gqv] {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.confirmation-detail[b-n8yyb75gqv] {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0 0 2rem 0;
    line-height: 1.5;
}

.confirmation-action[b-n8yyb75gqv] {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 1rem 0 2rem 0;
}

.confirmation-actions[b-n8yyb75gqv] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.btn-confirm[b-n8yyb75gqv],
.btn-confirm-danger[b-n8yyb75gqv],
.btn-cancel-modal[b-n8yyb75gqv] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-confirm[b-n8yyb75gqv] {
    background: var(--gradient-secondary);
    color: var(--text-inverse);
}

.btn-confirm:hover[b-n8yyb75gqv] {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.3);
}

.btn-confirm-danger[b-n8yyb75gqv] {
    background: linear-gradient(135deg, #ff5f56 0%, #d63b32 100%);
    color: var(--text-white);
}

.btn-confirm-danger:hover[b-n8yyb75gqv] {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 95, 86, 0.3);
}

.btn-cancel-modal[b-n8yyb75gqv] {
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-cancel-modal:hover[b-n8yyb75gqv] {
    background-color: var(--input-background);
    border-color: var(--color-primary-light);
    color: var(--text-white);
}

/* ===== Loading Spinner ===== */
.spinner-small[b-n8yyb75gqv] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--text-white);
    animation: spin-b-n8yyb75gqv 0.8s linear infinite;
}

.btn-danger-secondary .spinner-small[b-n8yyb75gqv] {
    border: 2px solid rgba(255, 95, 86, 0.25);
    border-top-color: var(--red-light);
}

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

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
    .card-content[b-n8yyb75gqv] {
        padding: 1.5rem;
    }

    .config-row[b-n8yyb75gqv] {
        flex-direction: column;
        gap: 1rem;
    }

    .status-badge[b-n8yyb75gqv] {
        width: 100%;
        justify-content: flex-start;
    }

    .events-chips[b-n8yyb75gqv] {
        gap: 0.5rem;
    }

    .event-chip[b-n8yyb75gqv] {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }

    .secret-key-section[b-n8yyb75gqv] {
        padding: 1.5rem;
        margin: 1.5rem 0;
    }

    .secret-key-box[b-n8yyb75gqv] {
        flex-direction: column;
        align-items: stretch;
        padding: 0.75rem;
    }

    .secret-key-actions[b-n8yyb75gqv] {
        justify-content: flex-end;
    }

    .danger-action[b-n8yyb75gqv] {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-danger-secondary[b-n8yyb75gqv],
    .btn-danger-primary[b-n8yyb75gqv] {
        width: 100%;
        justify-content: center;
    }

    .config-actions[b-n8yyb75gqv] {
        flex-direction: column;
    }

    .btn-edit[b-n8yyb75gqv] {
        width: 100%;
        justify-content: center;
    }

    .danger-content[b-n8yyb75gqv] {
        padding: 1.5rem;
        gap: 1rem;
    }

    .danger-action[b-n8yyb75gqv] {
        padding: 1rem;
    }

    .copy-success-toast[b-n8yyb75gqv] {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
    }

    .confirmation-actions[b-n8yyb75gqv] {
        flex-direction: column;
    }

    .btn-confirm[b-n8yyb75gqv],
    .btn-confirm-danger[b-n8yyb75gqv],
    .btn-cancel-modal[b-n8yyb75gqv] {
        width: 100%;
    }
}
/* /Components/WhatsApp/Webhooks/WebhookConfigForm.razor.rz.scp.css */

/* ===== Form Container ===== */
.webhook-form-container[b-31qs6vg2de] {
    width: 100%;
}

.form-card[b-31qs6vg2de] {
    background: var(--color-surface-alt);
    background-image: var(--gradient-dark);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(20, 184, 166, 0.04) inset;
    overflow: hidden;
    position: relative;
}

/* faint scanline / signal texture across the top of the card */
.form-card[b-31qs6vg2de]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--brand-accent), transparent);
    opacity: 0.5;
}

.card-header[b-31qs6vg2de] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: var(--mac-header-gradient);
    border-bottom: 1px solid var(--border-color);
}

.mac-dots[b-31qs6vg2de] {
    display: flex;
    gap: 0.5rem;
}

.mac-dots span[b-31qs6vg2de] {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}

.mac-dots .red[b-31qs6vg2de] {
    background-color: var(--red-light);
    color: var(--red-light);
}

.mac-dots .yellow[b-31qs6vg2de] {
    background-color: var(--yellow-light);
    color: var(--yellow-light);
}

.mac-dots .green[b-31qs6vg2de] {
    background-color: var(--green-light);
    color: var(--green-light);
}

.card-header h2[b-31qs6vg2de] {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-white);
    margin: 0;
}

/* ===== Form Content ===== */
.form-content[b-31qs6vg2de] {
    padding: 2.25rem 2rem;
}

.form-group[b-31qs6vg2de] {
    margin-bottom: 2rem;
}

.form-group:last-of-type[b-31qs6vg2de] {
    margin-bottom: 0;
}

.form-label[b-31qs6vg2de] {
    display: block;
    font-family: 'Quicksand', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-accent);
    margin-bottom: 0.75rem;
}

/* ===== Form Controls ===== */
.form-control[b-31qs6vg2de] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: 'Quicksand', sans-serif;
    color: var(--text-primary);
    background-color: var(--input-background);
    transition: all 0.2s ease;
}

.form-control[b-31qs6vg2de]::placeholder {
    color: var(--text-muted);
}

.form-control:focus[b-31qs6vg2de] {
    outline: none;
    border-color: var(--color-primary-light);
    background-color: var(--input-background-focus);
    box-shadow: var(--input-shadow);
}

.form-control.is-invalid[b-31qs6vg2de] {
    border-color: var(--red-light);
    background-color: rgba(255, 95, 86, 0.05);
}

.form-control.is-invalid:focus[b-31qs6vg2de] {
    box-shadow: 0 0 0 3px rgba(255, 95, 86, 0.15);
}

.form-text[b-31qs6vg2de] {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.6rem;
}

/* ===== Toggle Switch ===== */
.form-group-toggle[b-31qs6vg2de] {
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
    background-color: var(--input-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.form-group-toggle .form-label[b-31qs6vg2de] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
}

.toggle-checkbox[b-31qs6vg2de] {
    appearance: none;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 0.625rem;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0;
}

.toggle-checkbox:checked[b-31qs6vg2de] {
    background: var(--gradient-primary);
    /* border-color: var(--color-secondary); */
    box-shadow: var(--shadow-sm);
}

.toggle-checkbox[b-31qs6vg2de]:before {
    content: '';
    position: absolute;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background-color: var(--text-white);
    top: 0.11rem;
    left: 0.11rem;
    transition: all 0.2s ease;
}

.toggle-checkbox:checked[b-31qs6vg2de]:before {
    left: calc(100% - 1.06rem);
}

.toggle-label[b-31qs6vg2de] {
    font-weight: 600;
    color: var(--text-primary);
}

/* ===== Events Checklist ===== */
.events-checklist[b-31qs6vg2de] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.event-checkbox-wrapper[b-31qs6vg2de] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
    background-color: var(--input-background);
    border: 1px solid var(--border-color);
    border-left: 3px solid rgba(20, 184, 166, 0.25);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.event-checkbox-wrapper:hover[b-31qs6vg2de] {
    background-color: var(--input-background-focus);
    border-color: var(--color-primary-light);
}

.event-checkbox-wrapper:has(.event-checkbox:checked)[b-31qs6vg2de] {
    border-left-color: var(--color-primary);
    background-color: rgba(245, 158, 11, 0.05);
}

.event-checkbox-label[b-31qs6vg2de] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
}

.event-checkbox[b-31qs6vg2de] {
    appearance: none;
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid rgba(203, 213, 225, 0.35);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    background-color: rgba(0, 0, 0, 0.2);
}

.event-checkbox:hover[b-31qs6vg2de] {
    border-color: var(--color-primary);
}

.event-checkbox:checked[b-31qs6vg2de] {
    background: var(--gradient-primary);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.checkbox-custom[b-31qs6vg2de] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    position: relative;
    margin-left: -1.15rem;
    pointer-events: none;
}

.event-checkbox:checked ~ .checkbox-custom[b-31qs6vg2de]:after {
    content: '';
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background-color: var(--text-inverse);
}

.event-name[b-31qs6vg2de] {
    flex: 1;
    font-family: 'Quicksand', sans-serif;
    font-size: 0.95rem;
}

.event-description[b-31qs6vg2de] {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 1.9rem;
}

/* ===== Validation ===== */
.validation-error[b-31qs6vg2de] {
    color: var(--red-light);
    font-size: 0.85rem;
    margin-top: 0.6rem;
    display: block;
}

/* ===== Form Actions ===== */
.form-actions[b-31qs6vg2de] {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.btn-save[b-31qs6vg2de],
.btn-cancel[b-31qs6vg2de] {
    flex: 1;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Quicksand', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.btn-save[b-31qs6vg2de] {
    background: var(--color-primary), var(--brand-teal);
    color: var(--text-white);
    box-shadow: var(--shadow-lg);
}

.btn-save:hover:not(:disabled)[b-31qs6vg2de] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.btn-save:active:not(:disabled)[b-31qs6vg2de] {
    transform: translateY(0);
}

.btn-save:disabled[b-31qs6vg2de] {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-cancel[b-31qs6vg2de] {
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-cancel:hover:not(:disabled)[b-31qs6vg2de] {
    background-color: var(--input-background);
    border-color: var(--color-primary-light);
    color: var(--text-white);
}

.btn-cancel:disabled[b-31qs6vg2de] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Loading Spinner ===== */
.spinner-small[b-31qs6vg2de] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(2, 6, 23, 0.25);
    border-radius: 50%;
    border-top-color: var(--text-inverse);
    animation: spin-b-31qs6vg2de 0.8s linear infinite;
}

@keyframes spin-b-31qs6vg2de {
    to { transform: rotate(360deg); }
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
    .form-content[b-31qs6vg2de] {
        padding: 1.5rem;
    }

    .form-group[b-31qs6vg2de] {
        margin-bottom: 1.5rem;
    }

    .form-actions[b-31qs6vg2de] {
        flex-direction: column;
    }

    .btn-save[b-31qs6vg2de],
    .btn-cancel[b-31qs6vg2de] {
        width: 100%;
    }
}
/* /Layout/AuthorizedLayout.razor.rz.scp.css */
.desktop-layout[b-khi7yoe9m3] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* background: var(--gradient-primary); */
    color: var(--text-primary);
    overflow: hidden;
}

.desktop-content[b-khi7yoe9m3] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    margin-top: 34px;
    overflow-y: auto;
}

/* Keep native dropdown controls and their option lists readable in both themes. */
.desktop-layout[b-khi7yoe9m3]  select {
    color-scheme: light;
    color: var(--text-primary);
    background-color: var(--card-bg);
    border-color: var(--border-color);
    border-radius: 10px;
}

.desktop-layout[b-khi7yoe9m3]  select option,
.desktop-layout[b-khi7yoe9m3]  select optgroup {
    color: var(--text-primary);
    background-color: var(--card-bg);
}

.desktop-layout[b-khi7yoe9m3]  select option:checked {
    color: #fff;
    background: #1d67cb linear-gradient(0deg, #1d67cb 0%, #1d67cb 100%);
}

.desktop-layout[b-khi7yoe9m3]  select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.desktop-layout[data-app-theme="dark"][b-khi7yoe9m3]  select {
    color-scheme: dark;
}

.desktop-layout[data-app-theme="light"][b-khi7yoe9m3]  select {
    color-scheme: light;
}

/* Give native file inputs a consistent control and button across authorized pages. */
.desktop-layout[b-khi7yoe9m3]  input[type="file"] {
    max-width: 100%;
    padding: .35rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--card-bg);
    color: var(--text-primary);
    color-scheme: light;
    font: inherit;
    font-size: .9rem;
}

.desktop-layout[b-khi7yoe9m3]  input[type="file"]::file-selector-button {
    margin: 0 .75rem 0 0;
    padding: .5rem .85rem;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--card-bg-hover);
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.desktop-layout[b-khi7yoe9m3]  input[type="file"]:hover::file-selector-button {
    border-color: var(--color-primary);
    background: var(--page-bg);
}

.desktop-layout[b-khi7yoe9m3]  input[type="file"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.desktop-layout[data-app-theme="dark"][b-khi7yoe9m3]  input[type="file"] {
    color-scheme: dark;
}

.desktop-layout[data-app-theme="light"][b-khi7yoe9m3]  input[type="file"] {
    color-scheme: light;
}

[b-khi7yoe9m3]::-webkit-scrollbar {
    width: 6px;
}

[b-khi7yoe9m3]::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 10px;
}
/* /Layout/AuthorizedNavigationBar.razor.rz.scp.css */
.dock-wrapper[b-yyfpp35sbc] {
    position: fixed;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 200;
}

.dock[b-yyfpp35sbc] {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    padding: 7px 10px;
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.dock-item[b-yyfpp35sbc] {
    position: relative;
    font-size: 22px;
    padding: 8px;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.25s ease;
}

.dock-item.active[b-yyfpp35sbc] {
    transform: scale(1.1) translateY(-2px);
}

.dock-label[b-yyfpp35sbc] {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(0,0,0,0.8);
    color: white;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    text-wrap: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease;
}

.dock-item:hover .dock-label[b-yyfpp35sbc] {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.dock-toggle[b-yyfpp35sbc] {
    appearance: none;
    background: none;
    border: none;
    box-shadow: none;
    width: 40px;
    height: 16px;
    margin-top: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, var(--color-primary));
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 1;

    transition: color 0.2s ease;
}

.dock-toggle:hover[b-yyfpp35sbc] {
    color: var(--color-primary-light);
}

.dock-toggle:active i[b-yyfpp35sbc] {
    transform: scale(0.85);
}

.dock-toggle i[b-yyfpp35sbc] {
    transition: transform 0.4s ease;
}

.dock-toggle.is-hidden i[b-yyfpp35sbc] {
    transform: rotate(180deg);
}

.dock-wrapper .dock[b-yyfpp35sbc] {
    max-height: 80px;
    overflow: visible;
    transition:
        max-height 0.4s ease,
        opacity 0.3s ease,
        padding 0.4s ease,
        border-width 0.4s ease,
        margin-bottom 0.4s ease;
}

.dock-wrapper.dock-hidden .dock[b-yyfpp35sbc] {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    margin-bottom: -1px;
    pointer-events: none;
}

@media (max-width: 640px) {
    .dock-wrapper[b-yyfpp35sbc] {
        left: 0;
        width: 100%;
        transform: none;
    }

    .dock-wrapper .dock[b-yyfpp35sbc] {
        width: calc(100% - 16px);
        max-width: none;
        justify-content: flex-start;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .dock-wrapper .dock[b-yyfpp35sbc]::-webkit-scrollbar {
        display: none;
    }

    .dock-item[b-yyfpp35sbc] {
        flex: 0 0 auto;
        font-size: 18px;
        padding: 8px;
    }
}
/* /Layout/AuthorizedToolBar.razor.rz.scp.css */
.topbar[b-wkzwtw2c6h] {
    position: fixed;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 34px;
    padding: 0 14px;
    border-bottom: 1px solid var(--topbar-fixed-border);
    background: var(--topbar-fixed-bg);
    backdrop-filter: blur(16px);
    color: var(--topbar-fixed-text);
    font-size: 13px;
}

/* ==========================================
   HAMBURGER TOGGLE (mobile only)
========================================== */

.hamburger-btn[b-wkzwtw2c6h] {
    display: none; /* hidden on desktop */
    appearance: none;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    background: var(--topbar-fixed-btn-bg);
    border: 1px solid var(--topbar-fixed-btn-border);
    border-radius: 6px;
    color: var(--topbar-fixed-text);
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: all .2s ease;
    order: -1; /* keep it first */
}

.hamburger-btn:hover[b-wkzwtw2c6h] {
    background: var(--topbar-fixed-btn-bg-hover);
    border-color: var(--topbar-fixed-btn-border-hover);
    color: var(--color-primary-light);
}

.hamburger-btn:active[b-wkzwtw2c6h] {
    transform: scale(.96);
}

.mobile-nav-overlay[b-wkzwtw2c6h] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 998;
}

/* ==========================================
   TOPBAR LEFT / RIGHT
========================================== */

.topbar-left[b-wkzwtw2c6h],
.topbar-right[b-wkzwtw2c6h] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.topbar-left[b-wkzwtw2c6h] {
    flex: 1 1 auto;
    overflow: visible;
}

.topbar-right[b-wkzwtw2c6h] {
    justify-content: flex-end;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.logo-image[b-wkzwtw2c6h] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.topbar span[b-wkzwtw2c6h],
.topbar i[b-wkzwtw2c6h],
.topbar button[b-wkzwtw2c6h],
.topbar select[b-wkzwtw2c6h] {
    cursor: pointer;
}

.topbar span:hover[b-wkzwtw2c6h],
.topbar i:hover[b-wkzwtw2c6h],
.topbar button:hover[b-wkzwtw2c6h],
.topbar select:hover[b-wkzwtw2c6h] {
    color: var(--color-primary-light);
}

/* ==========================================
   NAV ITEM
========================================== */

.nav-item[b-wkzwtw2c6h] {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-item > span[b-wkzwtw2c6h],
.nav-item > a[b-wkzwtw2c6h] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    color: var(--topbar-fixed-text);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.nav-item > span:hover[b-wkzwtw2c6h],
.nav-item > a:hover[b-wkzwtw2c6h],
.nav-item > span:focus-visible[b-wkzwtw2c6h],
.nav-item > a:focus-visible[b-wkzwtw2c6h] {
    color: var(--color-primary-light);
    background: var(--topbar-fixed-btn-bg-hover);
    outline: none;
}

/* ==========================================
   DROPDOWN
========================================== */

.dropdown[b-wkzwtw2c6h] {
    position: absolute;
    top: 100%;
    left: 0;

    min-width: 180px;
    padding: 8px 0;

    background: var(--topbar-fixed-bg-solid);
    backdrop-filter: blur(16px);

    border: 1px solid var(--topbar-fixed-border);
    border-radius: 10px;

    box-shadow: var(--shadow-lg);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(10px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;

    z-index: 9999;
}

/* show dropdown */

.nav-item:hover > .dropdown[b-wkzwtw2c6h] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* open left if insufficient right space */

.dropdown.open-left[b-wkzwtw2c6h] {
    left: auto;
    right: 0;
}

/* ==========================================
   DROPDOWN ITEM
========================================== */

.dropdown-item[b-wkzwtw2c6h] {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 4px;

    padding: 10px 14px;

    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;

    color: var(--topbar-fixed-text);

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.nav-item span[b-wkzwtw2c6h] {
    padding: 4px 8px;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.dropdown-item:focus-visible[b-wkzwtw2c6h],
.dropdown-item:hover[b-wkzwtw2c6h] {
    background: var(--topbar-fixed-btn-bg-hover);
    color: var(--color-primary-light);
    outline: none;
}

.notification-bell span[b-wkzwtw2c6h]{
    padding: 0;
}

.dropdown-item span[b-wkzwtw2c6h] {
    padding: 0;
}

/* ==========================================
   SUBMENU
========================================== */

.submenu-wrapper[b-wkzwtw2c6h] {
    position: relative;
}

.submenu-trigger[b-wkzwtw2c6h] {
    cursor: pointer;
}

.submenu[b-wkzwtw2c6h] {
    position: absolute;
    top: -8px;
    left: 100%;

    min-width: 190px;
    padding: 8px 0;

    background: var(--topbar-fixed-bg-solid);
    backdrop-filter: blur(16px);

    border: 1px solid var(--topbar-fixed-border);
    border-radius: 10px;

    box-shadow: var(--shadow-lg);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(10px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;

    z-index: 1000;
}

/* show submenu */

.submenu-wrapper:hover > .submenu[b-wkzwtw2c6h] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

/* open submenu left automatically */

.submenu.open-left[b-wkzwtw2c6h] {
    left: auto;
    right: 100%;
}

/* submenu items */

.submenu .dropdown-item[b-wkzwtw2c6h] {
    display: flex;
}

/* ==========================================
   NOTIFICATION BELL
========================================== */

.notification-bell[b-wkzwtw2c6h] {
    appearance: none;
    position: relative;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--topbar-fixed-btn-bg);
    border: 1px solid var(--topbar-fixed-btn-border);
    border-radius: 6px;
    color: var(--topbar-fixed-text);
    font-size: 16px;
    cursor: pointer;
    transition: all .2s ease;
    padding: 0;
    line-height: 1;
}

.notification-bell:hover[b-wkzwtw2c6h] {
    background: var(--topbar-fixed-btn-bg-hover);
    border-color: var(--topbar-fixed-btn-border-hover);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.notification-bell:focus[b-wkzwtw2c6h] {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, .15), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.notification-bell.active[b-wkzwtw2c6h] {
    background: rgba(20, 184, 166, .15);
    border-color: var(--color-primary-light);
    color: var(--color-primary-light);
}

.notification-bell.has-unread i[b-wkzwtw2c6h] {
    position: relative;
    animation: bellRing-b-wkzwtw2c6h 2s ease-in-out infinite;
    transform-origin: top center;
    color: #FF5252;
}
.notification-bell.has-unread:hover i[b-wkzwtw2c6h]{
    animation-play-state: paused;
}

@keyframes bellRing-b-wkzwtw2c6h {
    0%, 85%, 100% {
        transform: rotate(0deg);
    }

    88% {
        transform: rotate(15deg);
    }

    90% {
        transform: rotate(-15deg);
    }

    92% {
        transform: rotate(12deg);
    }

    94% {
        transform: rotate(-12deg);
    }

    96% {
        transform: rotate(8deg);
    }

    98% {
        transform: rotate(-8deg);
    }
}


/* Notification badge */
.notification-badge[b-wkzwtw2c6h] {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #FF6B6B, #FF5252);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ==========================================
   NOTIFICATION PANEL
========================================== */

.notification-panel-overlay[b-wkzwtw2c6h] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: transparent;
}

.notification-panel[b-wkzwtw2c6h] {
    position: fixed;
    right: 20px;
    top: 50px;
    width: 360px;
    max-height: 500px;
    display: flex;
    flex-direction: column;
    background: var(--topbar-fixed-bg-solid);
    backdrop-filter: blur(16px);
    border: 1px solid var(--topbar-fixed-border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg), 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    animation: panelSlideDown-b-wkzwtw2c6h 0.3s ease-out;
}

@keyframes panelSlideDown-b-wkzwtw2c6h {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Panel header */
.notification-panel-header[b-wkzwtw2c6h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(20, 184, 166, 0.2);
}

.notification-panel-header h4[b-wkzwtw2c6h] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--topbar-fixed-text);
}

.notification-panel-actions[b-wkzwtw2c6h] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mark-all-read-btn[b-wkzwtw2c6h] {
    appearance: none;
    background: none;
    border: none;
    color: var(--color-primary-light);
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    transition: color .2s ease;
    white-space: nowrap;
}

.mark-all-read-btn:hover[b-wkzwtw2c6h] {
    color: #5EEAD4;
}

.close-panel-btn[b-wkzwtw2c6h] {
    appearance: none;
    background: none;
    border: none;
    color: var(--topbar-fixed-text-secondary);
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    flex-shrink: 0;
}

.close-panel-btn:hover[b-wkzwtw2c6h] {
    color: var(--color-primary-light);
    transform: scale(1.1);
}

.close-panel-btn:active[b-wkzwtw2c6h] {
    transform: scale(0.95);
}

/* Panel content */
.notification-panel-content[b-wkzwtw2c6h] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.notification-panel-content[b-wkzwtw2c6h]::-webkit-scrollbar {
    width: 6px;
}

.notification-panel-content[b-wkzwtw2c6h]::-webkit-scrollbar-track {
    background: transparent;
}

.notification-panel-content[b-wkzwtw2c6h]::-webkit-scrollbar-thumb {
    background: rgba(20, 184, 166, 0.3);
    border-radius: 3px;
}

.notification-panel-content[b-wkzwtw2c6h]::-webkit-scrollbar-thumb:hover {
    background: rgba(20, 184, 166, 0.5);
}

/* Empty state */
.notification-empty-state[b-wkzwtw2c6h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--topbar-fixed-text-muted);
    gap: 10px;
}

.notification-empty-state i[b-wkzwtw2c6h] {
    font-size: 32px;
    opacity: 0.5;
}

.notification-empty-state p[b-wkzwtw2c6h] {
    margin: 0;
    font-size: 12px;
}

/* ==========================================
   NOTIFICATION ITEM
========================================== */

.notification-item[b-wkzwtw2c6h] {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(20, 184, 166, 0.1);
    cursor: pointer;
    transition: background-color .2s ease;
    position: relative;
}

.notification-item:hover[b-wkzwtw2c6h] {
    background: rgba(20, 184, 166, 0.08);
}

.notification-item:last-child[b-wkzwtw2c6h] {
    border-bottom: none;
}

/* Unread state */
.notification-item.unread[b-wkzwtw2c6h] {
    background: rgba(20, 184, 166, 0.06);
}

.notification-item.unread:hover[b-wkzwtw2c6h] {
    background: rgba(20, 184, 166, 0.12);
}

/* Unread indicator dot */
.notification-item-unread-indicator[b-wkzwtw2c6h] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--color-primary-light);
    border-radius: 50%;
    animation: indicatorPulse-b-wkzwtw2c6h 2s ease-in-out infinite;
}

@keyframes indicatorPulse-b-wkzwtw2c6h {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Notification icon */
.notification-item-icon[b-wkzwtw2c6h] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 14px;
}

/* Icon colors by notification type */
.notification-message .notification-item-icon[b-wkzwtw2c6h] {
    background: rgba(100, 180, 255, 0.15);
    color: #64B4FF;
}

.notification-subscription .notification-item-icon[b-wkzwtw2c6h] {
    background: rgba(255, 187, 51, 0.15);
    color: #FFBB33;
}

.notification-system .notification-item-icon[b-wkzwtw2c6h] {
    background: rgba(255, 107, 107, 0.15);
    color: #FF6B6B;
}

.notification-update .notification-item-icon[b-wkzwtw2c6h] {
    background: rgba(102, 187, 106, 0.15);
    color: #66BB6A;
}

/* Notification content */
.notification-item-content[b-wkzwtw2c6h] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notification-item-title[b-wkzwtw2c6h] {
    font-size: 13px;
    font-weight: 600;
    color: var(--topbar-fixed-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-item-message[b-wkzwtw2c6h] {
    font-size: 12px;
    color: var(--topbar-fixed-text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-item-source[b-wkzwtw2c6h] {
    font-size: 11px;
    color: var(--topbar-fixed-text-muted);
}

.notification-item-time[b-wkzwtw2c6h] {
    font-size: 11px;
    color: var(--topbar-fixed-text-muted);
    margin-top: 2px;
}

.phone-selector[b-wkzwtw2c6h] {
    position: relative;
    display: flex;
    align-items: center;
}

.phone-dropdown[b-wkzwtw2c6h] {
    appearance: none;

    min-width: 180px;
    max-width: 220px;

    background: var(--topbar-fixed-btn-bg);
    border: 1px solid var(--topbar-fixed-btn-border);
    border-radius: 6px;

    padding: 4px 28px 4px 10px;

    font-size: 12px;
    color: var(--topbar-fixed-text);
    font-family: 'Quicksand', sans-serif;

    cursor: pointer;

    transition: all .2s ease;

    background-image: var(--topbar-fixed-chevron);
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.phone-dropdown:hover[b-wkzwtw2c6h],
.phone-dropdown:focus[b-wkzwtw2c6h],
.phone-dropdown:focus-visible[b-wkzwtw2c6h] {
    background-color: var(--topbar-fixed-btn-bg-hover);
    border-color: var(--topbar-fixed-btn-border-hover);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    outline: none;
}

.phone-dropdown:focus[b-wkzwtw2c6h],
.phone-dropdown:focus-visible[b-wkzwtw2c6h] {
    border-color: var(--color-primary-light);
    box-shadow:
        0 0 0 3px rgba(100,200,255,.15),
        inset 0 1px 0 rgba(255,255,255,.1);
}

.phone-dropdown option[b-wkzwtw2c6h] {
    background: var(--topbar-fixed-bg-solid);
    color: var(--topbar-fixed-text);
}


.logout-btn[b-wkzwtw2c6h],
.help-btn[b-wkzwtw2c6h],
.settings-btn[b-wkzwtw2c6h],
.emate_robot[b-wkzwtw2c6h],
.theme-toggle-btn[b-wkzwtw2c6h] {
    appearance: none;

    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--topbar-fixed-btn-bg);
    border: 1px solid var(--topbar-fixed-btn-border);
    border-radius: 6px;

    color: var(--topbar-fixed-text);
    font-size: 16px;

    cursor: pointer;

    transition: all .2s ease;

    padding: 0;
    line-height: 1;
}

.logout-btn:hover[b-wkzwtw2c6h],
.help-btn:hover[b-wkzwtw2c6h],
.settings-btn:hover[b-wkzwtw2c6h],
.emate_robot:hover[b-wkzwtw2c6h],
.theme-toggle-btn:hover[b-wkzwtw2c6h] {
    background: var(--topbar-fixed-btn-bg-hover);
    border-color: var(--topbar-fixed-btn-border-hover);
    color: var(--color-primary-light);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.1);
}

.logout-btn:hover[b-wkzwtw2c6h] {
    background: rgba(239, 68, 68, .12);
    border-color: rgba(248, 113, 113, .45);
    color: #fca5a5;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .08);
}

.logout-btn:active[b-wkzwtw2c6h],
.help-btn:active[b-wkzwtw2c6h],
.settings-btn:active[b-wkzwtw2c6h],
.theme-toggle-btn:active[b-wkzwtw2c6h] {
    transform: scale(.96);
}

.settings-btn:focus-visible[b-wkzwtw2c6h] {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
}

.logout-btn:focus-visible[b-wkzwtw2c6h] {
    outline: 2px solid rgba(248, 113, 113, .8);
    outline-offset: 2px;
}

@media (max-width: 1024px) {

    .topbar[b-wkzwtw2c6h] {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .topbar-left[b-wkzwtw2c6h] {
        overflow-x: auto;
        overflow-y: visible;
        flex-wrap: nowrap;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;
        padding-bottom: 2px;
    }

    .topbar-left[b-wkzwtw2c6h]::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .topbar-right[b-wkzwtw2c6h] {
        gap: 6px;
    }

    .nav-item[b-wkzwtw2c6h] {
        flex-shrink: 0;
    }

    .nav-item > span[b-wkzwtw2c6h],
    .nav-item > a[b-wkzwtw2c6h] {
        padding-left: 6px;
        padding-right: 6px;
    }

    .phone-dropdown[b-wkzwtw2c6h] {
        min-width: 150px;
        max-width: 180px;
    }
}

@media (max-width: 640px) {

    .topbar[b-wkzwtw2c6h] {
        gap: 8px;
        padding: 6px 10px;
        flex-wrap: nowrap;
    }

    .hamburger-btn[b-wkzwtw2c6h] {
        display: flex;
    }

    .logo-image[b-wkzwtw2c6h] {
        width: 14px;
        height: 14px;
    }

    .topbar-left[b-wkzwtw2c6h] {
        position: fixed;
        top: 46px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        max-height: 0;
        overflow: hidden;
        padding: 0 10px;
        background: var(--topbar-fixed-bg-solid);
        border-bottom: 1px solid var(--topbar-fixed-border);
        box-shadow: var(--shadow-lg);
        transition: max-height .25s ease, padding .25s ease;
        z-index: 999;
        flex: none;
        width: 100%;
    }

    .topbar-left.mobile-open[b-wkzwtw2c6h] {
        max-height: 80vh;
        overflow-y: auto;
        padding: 10px 10px 16px;
    }

    .topbar-left .logo-image[b-wkzwtw2c6h] {
        display: none; /* not needed inside the dropdown panel */
    }

    .topbar-left .nav-item[b-wkzwtw2c6h] {
        width: 100%;
    }

    .topbar-left .nav-item > span[b-wkzwtw2c6h],
    .topbar-left .nav-item > a[b-wkzwtw2c6h] {
        width: 100%;
        justify-content: space-between;
    }

    .topbar-left .dropdown[b-wkzwtw2c6h] {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        display: none; /* collapsed until nav-item is tapped */
        width: 100%;
        margin-left: 10px;
        border-left: 2px solid var(--topbar-fixed-border);
        border-radius: 0;
        box-shadow: none;
    }

    .topbar-left .nav-item:hover > .dropdown[b-wkzwtw2c6h],
    .topbar-left .nav-item:focus-within > .dropdown[b-wkzwtw2c6h] {
        display: block;
    }

    .topbar-left .submenu[b-wkzwtw2c6h] {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        display: none;
        margin-left: 10px;
        border-radius: 0;
        box-shadow: none;
    }

    .topbar-left .submenu-wrapper:hover > .submenu[b-wkzwtw2c6h],
    .topbar-left .submenu-wrapper:focus-within > .submenu[b-wkzwtw2c6h] {
        display: block;
    }

    .topbar-right[b-wkzwtw2c6h] {
        gap: 4px;
        flex-shrink: 0;
    }

    .phone-selector[b-wkzwtw2c6h] {
        display: none; /* hide on very small screens */
    }

    .phone-dropdown[b-wkzwtw2c6h] {
        min-width: 120px;
        max-width: 140px;
    }

    .logout-btn[b-wkzwtw2c6h],
    .help-btn[b-wkzwtw2c6h],
    .settings-btn[b-wkzwtw2c6h],
    .emate_robot[b-wkzwtw2c6h],
    .theme-toggle-btn[b-wkzwtw2c6h],
    .notification-bell[b-wkzwtw2c6h] {
        width: 26px;
        height: 26px;
        font-size: 14px;
    }

    .notification-panel[b-wkzwtw2c6h] {
        right: 10px;
        left: 10px;
        width: auto;
        top: 46px;
    }
}
/* /Layout/EmsageAILayout.razor.rz.scp.css */
.emessage-ai-layout[b-8bsi4xdavi] {
    display:flex;
    flex-direction:column;
    height:100vh;
    background:var(--page-bg);
    color:var(--text-primary);
    overflow:hidden;
}

.emessage-ai-header[b-8bsi4xdavi] {
    height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 1.5rem;
    background:var(--topbar-bg);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--border-color);
}

.emessage-ai-brand[b-8bsi4xdavi] {
    display:flex;
    align-items:center;
    gap:14px;
}

.emessage-ai-logo[b-8bsi4xdavi] {
    width:48px;
    height:48px;
    border-radius:16px;
    background:var(--gradient-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:var(--shadow-sm);
}

.emessage-ai-logo i[b-8bsi4xdavi] {
    font-size:1.5rem;
    color:white;
}

.emessage-ai-brand-text span[b-8bsi4xdavi] {
    font-size:13px;
    color:var(--text-muted);
}

.emessage-ai-title[b-8bsi4xdavi] {
    display:flex;
    align-items:center;
    gap:8px;
}

.emessage-ai-title h4[b-8bsi4xdavi] {
    margin:0;
    font-size:20px;
    font-weight:700;
}

.emessage-ai-badge[b-8bsi4xdavi] {
    padding:3px 8px;
    border-radius:20px;
    font-size:10px;
    font-weight:700;
    color:var(--color-primary-light);
    background:rgba(20,184,166,.15);
    border:1px solid rgba(20,184,166,.3);
}

.emessage-ai-header-actions[b-8bsi4xdavi] {
    display:flex;
    gap:.75rem;
}

.emessage-ai-icon-btn[b-8bsi4xdavi] {
    width:42px;
    height:42px;
    border-radius:12px;
    border:1px solid var(--glass-border);
    background:var(--glass-bg);
    color:var(--text-primary);
    cursor:pointer;
    transition:.25s;
}

.emessage-ai-icon-btn:hover[b-8bsi4xdavi] {
    background:var(--glass-bg-hover);
    border-color:var(--color-primary);
    transform:translateY(-2px);
}

.emessage-ai-body[b-8bsi4xdavi] {
    flex:1;
    display:flex;
    min-width:0;
    min-height:0;
    overflow:hidden;
}

.emessage-ai-sidebar[b-8bsi4xdavi] {
    width:280px;
    padding:1.25rem;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    background:var(--sidebar-surface-alt);
    border-right:1px solid var(--border-color);
    backdrop-filter:blur(20px);
}

.emessage-ai-new-chat[b-8bsi4xdavi] {
    width:100%;
    height:48px;
    border:none;
    border-radius:16px;
    background:var(--gradient-primary);
    color:white;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom:1.5rem;
}

.emessage-ai-new-chat:hover[b-8bsi4xdavi] {
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

.emessage-ai-history-group[b-8bsi4xdavi] {
    margin-bottom:24px;
}

.emessage-ai-history-title[b-8bsi4xdavi] {
    color:var(--text-muted);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:12px;
}

.emessage-ai-history-item[b-8bsi4xdavi] {
    padding:12px 14px;
    border-radius:14px;
    cursor:pointer;
    color:var(--text-secondary);
    margin-bottom:6px;
    transition:.25s;
}

.emessage-ai-history-item:hover[b-8bsi4xdavi] {
    background:var(--hover-overlay);
}

.emessage-ai-history-item.active[b-8bsi4xdavi] {
    background:rgba(20,184,166,.15);
    color:var(--color-primary-light);
    border:1px solid rgba(20,184,166,.3);
}

.emessage-ai-content[b-8bsi4xdavi] {
    flex:1;
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    position:relative;
    background:var(--page-bg);
}

.emessage-ai-content[b-8bsi4xdavi]::before {
    content:"";
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at 20% 20%,
    rgba(20,184,166,.06),
    transparent 250px),
    radial-gradient(circle at 80% 10%,
    rgba(59,130,246,.05),
    transparent 220px);
    pointer-events:none;
}

.emessage-ai-content>*[b-8bsi4xdavi] {
    position:relative;
    z-index:1;
}

.emessage-ai-sidebar[b-8bsi4xdavi]::-webkit-scrollbar {
    width:8px;
}

.emessage-ai-sidebar[b-8bsi4xdavi]::-webkit-scrollbar-thumb {
    background:rgba(20,184,166,.25);
    border-radius:20px;
}

@media(max-width:992px){
    .emessage-ai-sidebar[b-8bsi4xdavi]{
        width:240px;
    }
}



@media(max-width:768px){
    .emessage-ai-header[b-8bsi4xdavi]{
        height:auto;
        min-height:64px;
        padding:10px 16px;
        gap:12px;
    }

    .emessage-ai-logo[b-8bsi4xdavi]{
        width:40px;
        height:40px;
        border-radius:12px;
    }

    .emessage-ai-title h4[b-8bsi4xdavi]{
        font-size:16px;
    }

    .emessage-ai-brand-text > span[b-8bsi4xdavi],
    .emessage-ai-badge[b-8bsi4xdavi]{
        display:none;
    }

    .emessage-ai-header-actions[b-8bsi4xdavi]{
        gap:.4rem;
    }

    .emessage-ai-icon-btn[b-8bsi4xdavi]{
        width:36px;
        height:36px;
        border-radius:10px;
    }

    .emessage-ai-sidebar[b-8bsi4xdavi]{
        display:none;
    }
}
/* /Layout/SolutionHeader.razor.rz.scp.css */
*[b-iwutkktbtf], *[b-iwutkktbtf]::before, *[b-iwutkktbtf]::after {
    box-sizing: border-box;
}

img[b-iwutkktbtf], svg[b-iwutkktbtf] {
    max-width: 100%;
}

.solution-header[b-iwutkktbtf] {
    padding: 0;
    margin: -100px 0 0 0;
    width: 100%;
    background: #fff;
}

/* ============================
   NAVBAR SHELL
============================ */
.hero-nav[b-iwutkktbtf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 2vw, 2rem);
    padding: 0.75rem clamp(1rem, 3vw, 3rem);
    background: var(--white-bg, #ffffff);
    position: relative;
    z-index: 100;
    max-width: 1400px;
    margin: 0 auto;
    min-height: 88px;
}

.logo-area[b-iwutkktbtf] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.logo-area a[b-iwutkktbtf] {
    display: inline-flex;
    align-items: center;
}

.logo-image[b-iwutkktbtf] {
    width: auto;
    height: 56px;
    object-fit: contain;
}

.mobile-menu-toggle[b-iwutkktbtf] {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 13px;
    background: var(--gradient-primary, linear-gradient(65deg, #0F172A, #0D9488));
    cursor: pointer;
}

.mobile-menu-toggle span[b-iwutkktbtf] {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
}

.mobile-menu-toggle:focus-visible[b-iwutkktbtf],
.nav-dropdown-trigger:focus-visible[b-iwutkktbtf],
.nav-links a:focus-visible[b-iwutkktbtf],
.register-btn:focus-visible[b-iwutkktbtf] {
    outline: 3px solid rgba(20, 184, 166, 0.5);
    outline-offset: 3px;
}

.logo-area h2[b-iwutkktbtf] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-dark, #1d1d1f);
    letter-spacing: -0.02em;
}

/* ============================
   NAV LINKS
============================ */
.nav-links[b-iwutkktbtf] {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 0 1 auto;
}

.nav-links li[b-iwutkktbtf] {
    list-style: none;
}

.nav-links > li > a[b-iwutkktbtf] {
    display: inline-flex;
    text-decoration: none;
    color: black;
    font-weight: 600;
    font-family: 'Quicksand', sans-serif;
    font-size: 1rem;
    position: relative;
    white-space: nowrap;
}

.nav-links a:hover[b-iwutkktbtf] {
    color: var(--color-primary-light, #14B8A6);
}

.nav-links > li > a[b-iwutkktbtf]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 3px;
    background: var(--gradient-primary);
    transition: width 0.3s ease;
}


.nav-links > li > a:hover[b-iwutkktbtf]::after {
    width: 100%;
}

/* ---- Solutions dropdown trigger ---- */

.nav-dropdown-item[b-iwutkktbtf] {
    position: relative;
    list-style: none;
}

.nav-dropdown-trigger[b-iwutkktbtf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: black;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.nav-caret[b-iwutkktbtf] {
    font-size: 0.7rem;
    transition: transform 0.25s ease;
}

.nav-dropdown-item.is-open .nav-caret[b-iwutkktbtf] {
    transform: rotate(180deg);
}

.nav-dropdown-item:hover .nav-caret[b-iwutkktbtf],
.nav-dropdown-item:focus-within .nav-caret[b-iwutkktbtf] {
    transform: rotate(180deg);
}

.solutions-dropdown[b-iwutkktbtf] {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);

    width: 360px;
    max-width: calc(100vw - 2rem);
    padding: 10px;

    background: #0B1120;
    backdrop-filter: blur(18px);
    border: 1px solid rgba(20, 184, 166, 0.5);
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.16);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;

    z-index: 1001;
}

.nav-dropdown-item.is-open .solutions-dropdown[b-iwutkktbtf] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item:hover .solutions-dropdown[b-iwutkktbtf],
.nav-dropdown-item:focus-within .solutions-dropdown[b-iwutkktbtf] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.solutions-dropdown-link[b-iwutkktbtf] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 8px 12px;
    margin-bottom: 6px;
    border-radius: 10px;
    text-decoration: none;
    color: #f8fafc;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.solutions-dropdown-link:hover[b-iwutkktbtf],
.solutions-dropdown-link:focus-visible[b-iwutkktbtf] {
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform: translateX(2px);
    outline: none;
}

.nav-links .solutions-dropdown-link:hover[b-iwutkktbtf],
.nav-links .solutions-dropdown-link:focus-visible[b-iwutkktbtf] {
    color: var(--color-primary, #008080);
}

.solutions-icon[b-iwutkktbtf] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 1.1rem;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.solutions-dropdown-link:hover .solutions-icon[b-iwutkktbtf],
.solutions-dropdown-link:focus-visible .solutions-icon[b-iwutkktbtf] {
    color: var(--color-primary, #008080);
    border-color: var(--color-primary, #008080);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 12px rgba(0, 0, 0, 0.18);
}

.solutions-dropdown-link:hover strong[b-iwutkktbtf],
.solutions-dropdown-link:hover small[b-iwutkktbtf],
.solutions-dropdown-link:focus-visible strong[b-iwutkktbtf],
.solutions-dropdown-link:focus-visible small[b-iwutkktbtf] {
    color: var(--color-primary, #008080);
}

.solutions-dropdown-link strong[b-iwutkktbtf] {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 2px;
}

.solutions-dropdown-link small[b-iwutkktbtf] {
    display: block;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #a7b1c2;
}
/* ============================
   NAV ACTIONS (right side)
============================ */
.nav-actions[b-iwutkktbtf] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 0 0 auto;
}

.register-btn[b-iwutkktbtf] {
    height: 44px;
    padding: 0 1.6rem;
    border: none;
    border-radius: 14px;
    background: var(--gradient-primary, linear-gradient(65deg, #0F172A, #0D9488));
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.register-btn:hover[b-iwutkktbtf] {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25), 0 0 18px rgba(20, 184, 166, 0.35);
}

/* ============================
   AUTH DROPDOWN (Login/Register)
============================ */
.auth-dropdown[b-iwutkktbtf] {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 340px;
    max-width: calc(100vw - 2rem);
    padding: 0;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(11, 17, 32, 0.96), rgba(2, 6, 23, 0.98));
    backdrop-filter: blur(24px);
    border: 1px solid rgba(20, 184, 166, 0.5);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.03);
    z-index: 9999;
    animation: dropdownFade-b-iwutkktbtf 0.25s ease;
}

.dropdown-header[b-iwutkktbtf] {
    position: relative;
    padding: 1.4rem 1.4rem 1.2rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}

.dropdown-header h4[b-iwutkktbtf] {
    margin: 18px 0 6px 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-white, #ffffff);
}

.dropdown-header p[b-iwutkktbtf] {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-muted, #9CA3AF);
}

.local-login-form[b-iwutkktbtf],
.auth-dropdown > .dropdown-divider[b-iwutkktbtf],
.auth-dropdown > .dropdown-link[b-iwutkktbtf] {
    margin-left: 1.4rem;
    margin-right: 1.4rem;
}

.local-login-form[b-iwutkktbtf] {
    padding: 1.4rem 1.4rem;
}

.local-login-form[b-iwutkktbtf],
.auth-dropdown > .google-btn[b-iwutkktbtf],
.auth-dropdown > .team-login[b-iwutkktbtf],
.auth-dropdown > .facebook-btn[b-iwutkktbtf] {
    margin: 0 auto;
}

.google-btn[b-iwutkktbtf],
.facebook-btn[b-iwutkktbtf] {
    width: 60%;
    height: 45px;
    margin-top: 1.4rem;
    background-color: transparent;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.google-btn:hover[b-iwutkktbtf],
.facebook-btn:hover[b-iwutkktbtf] {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

.google-logo[b-iwutkktbtf],
.facebook-logo[b-iwutkktbtf] {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    border-radius: 12px;
}

.dropdown-divider[b-iwutkktbtf] {
    position: relative;
    margin-top: 1.4rem;
    text-align: center;
}

.dropdown-divider[b-iwutkktbtf]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-color, rgba(20, 184, 166, 0.3));
}

.dropdown-divider span[b-iwutkktbtf] {
    position: relative;
    padding: 0 14px;
    background: #07101f;
    color: var(--text-muted, #9CA3AF);
    font-size: 0.85rem;
}

.team-login[b-iwutkktbtf] {
    width: 60%;
    margin: 0 auto;
}

.dropdown-link[b-iwutkktbtf] {
    width: 100%;
    margin: 0 auto 1.4rem;
    height: 45px;
    border: none;
    border-radius: 16px;
    background: var(--gradient-primary, linear-gradient(65deg, #0F172A, #0D9488));
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.dropdown-link:hover[b-iwutkktbtf] {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25), 0 0 18px rgba(20, 184, 166, 0.35);
}

.floating-input[b-iwutkktbtf] {
    position: relative;
    margin-bottom: 1.2rem;
}

.floating-input input[b-iwutkktbtf] {
    width: 100%;
    height: 58px;
    padding: 20px 16px 8px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-white, #ffffff);
    outline: none;
    transition: all 0.25s ease;
}

.floating-input input:focus[b-iwutkktbtf] {
    border-color: var(--color-primary, #008080);
    background: rgba(20, 184, 166, 0.05);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.08);
}

.floating-input label[b-iwutkktbtf] {
    position: absolute;
    top: 18px;
    left: 16px;
    color: var(--text-muted, #9CA3AF);
    font-size: 0.92rem;
    pointer-events: none;
    transition: all 0.2s ease;
}

.floating-input input:focus + label[b-iwutkktbtf],
.floating-input input:not(:placeholder-shown) + label[b-iwutkktbtf] {
    top: 8px;
    font-size: 0.72rem;
    color: var(--color-primary-light, #14B8A6);
}

.submit-btn[b-iwutkktbtf],
.back-to-auth-btn[b-iwutkktbtf] {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 16px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.login-btn[b-iwutkktbtf] {
    background: var(--gradient-primary, linear-gradient(65deg, #0F172A, #0D9488));
    color: white;
    margin-top: 0.5rem;
}

.login-btn:hover[b-iwutkktbtf] {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25), 0 0 18px rgba(20, 184, 166, 0.35);
}

.back-to-auth-btn[b-iwutkktbtf] {
    margin-top: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary, #CBD5E1);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.back-to-auth-btn:hover[b-iwutkktbtf] {
    background: rgba(255, 255, 255, 0.08);
}

.form-error-message[b-iwutkktbtf] {
    margin-bottom: 1rem;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    font-size: 0.88rem;
}

@keyframes dropdownFade-b-iwutkktbtf {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================
   RESPONSIVE
============================ */
@media (max-width: 1024px) {
    .hero-nav[b-iwutkktbtf] {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0;
        padding: 0.75rem clamp(1rem, 4vw, 2rem);
    }

    .logo-image[b-iwutkktbtf] {
        height: 48px;
    }

    .mobile-menu-toggle[b-iwutkktbtf] {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .nav-links[b-iwutkktbtf] {
        order: 3;
        width: 100%;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-top: 0.5rem;
        flex-basis: 100%;
    }

    .nav-links.is-open[b-iwutkktbtf] {
        display: flex;
    }

    .nav-links > li > a[b-iwutkktbtf],
    .nav-dropdown-trigger[b-iwutkktbtf] {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 46px;
        padding: 0.75rem 0.5rem;
        font-size: 1rem;
    }

    .nav-links > li > a[b-iwutkktbtf]::after {
        display: none;
    }

    .nav-dropdown-item[b-iwutkktbtf] {
        width: 100%;
    }

    .nav-dropdown-trigger[b-iwutkktbtf] {
        justify-content: space-between;
    }

    .solutions-dropdown[b-iwutkktbtf] {
        position: static;
        display: none;
        width: 100%;
        max-width: none;
        padding: 0.25rem 0 0.5rem 0.5rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: none;
    }

    .nav-dropdown-item.is-open .solutions-dropdown[b-iwutkktbtf] {
        transform: none;
    }

    .nav-dropdown-item.is-open .solutions-dropdown[b-iwutkktbtf] {
        display: block;
    }

    .solutions-dropdown-link[b-iwutkktbtf] {
        padding: 0.75rem 0.5rem;
        border-radius: 10px;
    }

    .solutions-dropdown-link:hover[b-iwutkktbtf] {
        background: linear-gradient(110deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }

    .nav-actions[b-iwutkktbtf] {
        display: none;
        order: 4;
        width: 100%;
        justify-content: center;
        padding-top: 0.75rem;
        flex-basis: 100%;
    }

    .nav-actions.is-open[b-iwutkktbtf] {
        display: flex;
    }

    .auth-dropdown[b-iwutkktbtf] {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
}

@media (max-width: 480px) {
    .hero-nav[b-iwutkktbtf] {
        min-height: 72px;
    }

    .logo-image[b-iwutkktbtf] {
        height: 42px;
        max-width: min(42vw, 160px);
    }

    .auth-dropdown[b-iwutkktbtf] {
        width: calc(100vw - 2rem);
    }

    .solutions-dropdown-link[b-iwutkktbtf] {
        gap: 10px;
    }

    .solutions-icon[b-iwutkktbtf] {
        width: 34px;
        height: 34px;
    }
}
/* /Layout/SolutionHero.razor.rz.scp.css */
*[b-f4kenteo7a] { box-sizing: border-box; }

.solution-flow-hero[b-f4kenteo7a] {
    position: relative;
    padding: clamp(2.75rem, 5vw, 5rem) 5% clamp(2.5rem, 5vw, 4rem);
    overflow: hidden;
    color: var(--text-white);
    background: var(--hero-bg-dark);
}

.solution-flow-hero[b-f4kenteo7a]::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image: linear-gradient(color-mix(in srgb, var(--brand-accent) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--brand-accent) 7%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(90deg, black 0%, transparent 78%);
    pointer-events: none;
}

.solution-flow-hero[b-f4kenteo7a]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(38vw, 480px);
    height: 160px;
    background: linear-gradient(135deg, transparent 0 36%, color-mix(in srgb, var(--brand-accent) 9%, transparent) 36% 37%, transparent 37% 51%, color-mix(in srgb, var(--brand-accent) 6%, transparent) 51% 52%, transparent 52%);
    clip-path: polygon(20% 100%, 100% 0, 100% 100%);
    pointer-events: none;
}

.solution-flow-hero-grid[b-f4kenteo7a] { 
    position: relative; 
    display: grid; 
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr); 
    align-items: center; 
    gap: clamp(2rem, 4vw, 5rem); 
    width: min(100%, 1400px); 
    margin: 0 auto; 
}

.solution-flow-hero-copy[b-f4kenteo7a] { 
    position: relative; 
    z-index: 1; 
}

.solution-flow-kicker[b-f4kenteo7a] {
    display: inline-flex; 
    align-items: center; 
    gap: 0.6rem; 
    color: var(--brand-accent); 
    font-size: 0.72rem; 
    font-weight: 800; 
    letter-spacing: 0.14em; 
    line-height: 1.3; 
    text-transform: uppercase; 
}

.solution-flow-kicker[b-f4kenteo7a]::before { 
    content: ""; 
    width: 24px; 
    height: 2px; 
    background: currentColor; 
}

.solution-flow-hero h1[b-f4kenteo7a] { 
    max-width: 680px; 
    margin: 1rem 0 1.1rem; 
    color: var(--text-white); 
    font-size: 3rem; 
    font-weight: 700; 
    letter-spacing: -0.065em; 
    line-height: 0.96; 
}

.solution-flow-hero-lede[b-f4kenteo7a] { 
    max-width: 560px; 
    margin: 0; 
    color: color-mix(in srgb, var(--text-white) 72%, transparent); 
    font-size: clamp(1rem, 1.5vw, 1.2rem); 
    line-height: 1.7; 
}

.solution-flow-hero-actions[b-f4kenteo7a] { 
    display: flex; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 1.5rem; 
    margin-top: 1.6rem; 
}

.solution-flow-primary-button[b-f4kenteo7a], 
.solution-flow-text-link[b-f4kenteo7a] { 
    text-decoration: none; 
}

.solution-flow-primary-button[b-f4kenteo7a] { 
    display: inline-flex; 
    align-items: center; 
    gap: 0.8rem; 
    padding: 0.95rem 1.25rem 0.95rem 1.4rem; 
    border-radius: 999px; 
    background: var(--brand-accent); 
    color: var(--brand-dark); 
    font-size: 0.9rem; 
    font-weight: 800; 
    transition: transform 180ms ease, box-shadow 180ms ease; 
}

.solution-flow-primary-button span[b-f4kenteo7a] { 
    font-size: 1.2rem; 
    line-height: 0.8; 
}

.solution-flow-primary-button:hover[b-f4kenteo7a] { 
    transform: translateY(-3px); 
    box-shadow: var(--shadow-lg); 
}

.solution-flow-text-link[b-f4kenteo7a] { 
    display: inline-flex; 
    align-items: center; 
    gap: 0.55rem; 
    color: var(--text-white); 
    font-size: 0.9rem; 
    font-weight: 700; 
}

.solution-flow-text-link:hover[b-f4kenteo7a] { 
    text-decoration: underline; 
    text-underline-offset: 4px; 
}

.solution-flow-proof-row[b-f4kenteo7a] { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 1.5rem; 
    margin-top: 2.75rem; 
    padding-top: 1rem; 
    border-top: 1px solid color-mix(in srgb, var(--brand-accent) 20%, transparent); 
}

.solution-flow-proof-row div[b-f4kenteo7a] { 
    display: flex; 
    flex-direction: column; 
    gap: 0.25rem; 
}

.solution-flow-proof-row strong[b-f4kenteo7a] { 
    color: var(--brand-accent); 
    font-size: 1.15rem; 
}

.solution-flow-proof-row span[b-f4kenteo7a] { 
    color: color-mix(in srgb, var(--text-white) 55%, transparent); 
    font-size: 0.72rem; 
}

.solution-flow-hero-art[b-f4kenteo7a] { 
    position: relative; 
    z-index: 1;
    min-height: 420px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.solution-flow-hero-art[b-f4kenteo7a]::before,
.solution-flow-hero-art[b-f4kenteo7a]::after {
    position: absolute;
    z-index: 2;
    content: "";
    pointer-events: none;
}

.solution-flow-hero-art[b-f4kenteo7a]::before {
    top: 9%;
    right: -1%;
    width: 62px;
    height: 62px;
    border-top: 2px solid color-mix(in srgb, var(--brand-accent) 75%, transparent);
    border-right: 2px solid color-mix(in srgb, var(--brand-accent) 75%, transparent);
}

.solution-flow-hero-art[b-f4kenteo7a]::after {
    bottom: 10%;
    left: 2%;
    width: 34px;
    height: 34px;
    background: linear-gradient(90deg, transparent 44%, var(--brand-accent) 45% 55%, transparent 56%), linear-gradient(0deg, transparent 44%, var(--brand-accent) 45% 55%, transparent 56%);
    opacity: 0.8;
    transform: rotate(45deg);
}

.solution-flow-art-glow[b-f4kenteo7a] { 
    position: absolute; 
    width: 74%; 
    aspect-ratio: 1; 
    border-radius: 50%; 
    background: var(--brand-teal); 
    filter: blur(75px); 
    opacity: 0.48; 
}

.solution-flow-art-window[b-f4kenteo7a] { 
    position: relative; 
    z-index: 1; 
    width: min(100%, 570px); 
    overflow: hidden; 
    border: 1px solid color-mix(in srgb, var(--brand-accent) 40%, transparent); 
    border-radius: 18px; 
    box-shadow: var(--shadow-lg); 
    transform: rotate(2deg); 
}

.solution-flow-art-window-bar[b-f4kenteo7a] { 
    display: flex; 
    align-items: center; 
    gap: 0.35rem; 
    height: 32px; 
    padding: 0 0.8rem; 
    background: var(--light-bg); 
}

.solution-flow-art-window-bar span[b-f4kenteo7a] { 
    width: 7px; 
    height: 7px; 
    border-radius: 50%; 
    background: var(--text-muted); 
}

.solution-flow-art-window-bar small[b-f4kenteo7a] { 
    margin-left: auto; 
    color: var(--text-muted); 
    font-size: 0.6rem; 
    letter-spacing: 0.08em; 
    text-transform: uppercase; 
}

.solution-flow-art-window img[b-f4kenteo7a] { 
    display: block; 
    width: 100%; 
    aspect-ratio: 1.5; 
    object-fit: cover; 
}
.solution-flow-art-note[b-f4kenteo7a] { 
    position: absolute; 
    z-index: 2; 
    display: flex; 
    align-items: center; 
    gap: 0.55rem; 
    padding: 0.75rem 1rem; 
    border: 1px solid color-mix(in srgb, var(--brand-accent) 26%, transparent); 
    border-radius: 10px; 
    background: color-mix(in srgb, var(--hero-bg-dark) 86%, transparent); 
    color: var(--text-white); 
    font-size: 0.72rem; 
    font-weight: 700; 
    box-shadow: var(--shadow-md); 
    backdrop-filter: blur(10px); 
}

.solution-flow-art-note span[b-f4kenteo7a] { 
    color: var(--brand-accent); 
}

.solution-flow-art-note-top[b-f4kenteo7a] { 
    top: 10%; 
    left: -3%; 
}

.solution-flow-art-note-bottom[b-f4kenteo7a] { 
    right: -2%; 
    bottom: 12%; 
}

@media (max-width: 1024px) {
    .solution-flow-hero-grid[b-f4kenteo7a] { 
        grid-template-columns: 1fr; 
        gap: 1.75rem; 
    }

    .solution-flow-hero h1[b-f4kenteo7a] {
        max-width: 760px;
        font-size: 3rem;
    }

    .solution-flow-hero-lede[b-f4kenteo7a] {
        max-width: 680px;
        font-size: 1.05rem;
    }

    .solution-flow-hero-art[b-f4kenteo7a] { 
        min-height: 360px; 
        max-width: 760px; 
        margin: 0 auto; 
        width: 100%; 
    }
}

@media (max-width: 600px) {
    .solution-flow-hero[b-f4kenteo7a]::after { width: 58vw; height: 100px; opacity: 0.65; }
    .solution-flow-hero-art[b-f4kenteo7a]::before { top: 3%; right: 0; width: 42px; height: 42px; }
    .solution-flow-hero-art[b-f4kenteo7a]::after { bottom: 5%; left: 0; width: 24px; height: 24px; }
}

@media (max-width: 720px) {
    .solution-flow-hero[b-f4kenteo7a] { 
        padding-top: 2.75rem; 
    }

    .solution-flow-hero h1[b-f4kenteo7a] { 
        font-size: 2rem; 
    }

    .solution-flow-proof-row[b-f4kenteo7a] { 
        gap: 1.2rem; 
        justify-content: space-between; 
    }

    .solution-flow-hero-art[b-f4kenteo7a] { 
        min-height: 270px; 
    }

    .solution-flow-art-note[b-f4kenteo7a] { 
        padding: 0.6rem 0.7rem; 
        font-size: 0.62rem; 
    }

    .solution-flow-art-note-top[b-f4kenteo7a] { 
        left: -2%; 
    }

    .solution-flow-art-note-bottom[b-f4kenteo7a] { 
        right: -2%; 
    }
}

@media (max-width: 480px) {
    .solution-flow-hero-actions[b-f4kenteo7a] { 
        align-items: flex-start; 
        flex-direction: column; 
        gap: 1.1rem; 
    }

    .solution-flow-proof-row strong[b-f4kenteo7a] { 
        font-size: 1rem; 
    }

    .solution-flow-proof-row span[b-f4kenteo7a] { 
        max-width: 80px; 
    }

    .solution-flow-primary-button[b-f4kenteo7a] {
        width: 100%;
        justify-content: center;
    }

    .solution-flow-art-window[b-f4kenteo7a] { 
        width: 92%; 
    }

    .solution-flow-art-note-top[b-f4kenteo7a] { 
        top: 4%; 
        left: 0; 
    }

    .solution-flow-art-note-bottom[b-f4kenteo7a] { 
        right: 0; 
        bottom: 4%; 
    }
}
/* /Layout/WebsiteFooter.razor.rz.scp.css */

.footer[b-hk65d9xfz1] {
    position: relative;
    background: #083b3a;
    padding: 7.5rem 1.5rem 3rem;
    overflow: hidden;
    color: #e6f1f1;
    font-family: 'Quicksand', sans-serif;
}

.footer-curve[b-hk65d9xfz1] {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 120px;
    z-index: 1;
}

.footer-inner[b-hk65d9xfz1] {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: auto;
}

.footer-grid[b-hk65d9xfz1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.8rem;
}

.footer-logo[b-hk65d9xfz1] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.75rem;
    text-transform: lowercase;
}

/* .brand {
    display: flex;
    align-items: center;
}
.app-logo {
    width: auto;
    height: 75px;
    object-fit: contain;
} */

.footer-brand p[b-hk65d9xfz1] {
    color: #cfe6e5;
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 1.4rem;
}

.footer-subscribe[b-hk65d9xfz1] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    padding-bottom: 0.6rem;
}

.footer-subscribe input[b-hk65d9xfz1] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 0.9rem;
    padding: 0.4rem 0;
}

.footer-subscribe input[b-hk65d9xfz1]::placeholder {
    color: rgba(255,255,255,0.6);
}

.footer-subscribe button[b-hk65d9xfz1] {
    background: #0e7b77;
    color: #ffffff;
    border: none;
    padding: 0.45rem 1.2rem;
    border-radius: 999px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
}

.footer-subscribe button:hover[b-hk65d9xfz1] {
    background: #12a29d;
    transform: translateY(-1px);
}

.footer-col h4[b-hk65d9xfz1] {
    font-size: 1.05rem;
    color: #ffffff;
    margin-bottom: 1.3rem;
}

.footer-col ul[b-hk65d9xfz1] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col li[b-hk65d9xfz1] {
    margin-bottom: 0.7rem;
}

.footer-col a[b-hk65d9xfz1] {
    color: #cfe6e5;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.25s ease;
}

.footer-col a:hover[b-hk65d9xfz1] {
    color: #5eead4;
}

.footer-contact .contact-item[b-hk65d9xfz1] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.1rem;
    color: #cfe6e5;
    font-size: 0.95rem;
}

.footer-contact .icon[b-hk65d9xfz1] {
    width: 32px;
    height: 32px;
    background: #0e7b77;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.footer-bottom[b-hk65d9xfz1] {
    margin-top: 3rem;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(255,255,255,0.18);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
}

.footer-bottom p[b-hk65d9xfz1] {
    font-size: 0.85rem;
    color: #e6f1f1;
}

.footer-social a[b-hk65d9xfz1],
.footer-bottom a[b-hk65d9xfz1] {
    margin: 0 0.75rem;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.25s ease;
}

.footer-social a:hover[b-hk65d9xfz1],
.footer-bottom a:hover[b-hk65d9xfz1] {
    color: #5eead4;
}

.footer-bottom p a[b-hk65d9xfz1] {
    margin: 0;
}

@media (min-width: 768px) {
    .footer-grid[b-hk65d9xfz1] {
        grid-template-columns: 1.6fr 1fr;
        gap: 3rem;
    }

    .footer-col.footer-contact[b-hk65d9xfz1] {
        grid-column: span 2;
    }

    .footer-bottom[b-hk65d9xfz1] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
}

@media (min-width: 992px) {
    .footer-grid[b-hk65d9xfz1] {
        grid-template-columns: 2fr 1fr 1.4fr;
    }

    .footer-col.footer-contact[b-hk65d9xfz1] {
        grid-column: auto;
    }
}
/* /Layout/WebsiteLayout.razor.rz.scp.css */
.page-wrapper[b-kpwncm0tsj] {
    height: 100vh;
    overflow-y: auto;
    background-color: #fff;
}

.top-row[b-kpwncm0tsj] {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--white-bg);
    backdrop-filter: blur(14px);
    transform: translateY(0);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.top-row.show[b-kpwncm0tsj] {
    transform: translateY(0);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.top-row-container[b-kpwncm0tsj] {
    max-width: 1300px;
    margin: auto;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand[b-kpwncm0tsj] {
    display: flex;
    align-items: center;
}

.app-logo[b-kpwncm0tsj] {
    width: auto;
    height: 75px;
    object-fit: contain;
}

.auth-dropdown[b-kpwncm0tsj] {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: 340px;
    padding: 0;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(180deg,rgba(11, 17, 32, 0.96),rgba(2, 6, 23, 0.98));
    backdrop-filter: blur(24px);
    border: 1px solid rgba(20, 184, 166, 0.5);
    box-shadow:0 20px 60px rgba(0, 0, 0, 0.45),0 0 0 1px rgba(255,255,255,0.03);
    z-index: 1000;
    animation: dropdownFade-b-kpwncm0tsj 0.25s ease;
}

.dropdown-header[b-kpwncm0tsj] {
    position: relative;
    padding: 1.4rem 1.4rem 1.2rem;
    text-align: center;
    background: linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
}

.dropdown-header h4[b-kpwncm0tsj] {
    margin: 18px 0 6px 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-white);
}

.dropdown-header p[b-kpwncm0tsj] {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-muted);
}


.local-login-form[b-kpwncm0tsj],
.auth-dropdown > .dropdown-divider[b-kpwncm0tsj],
.auth-dropdown > .dropdown-link[b-kpwncm0tsj] {
    margin-left: 1.4rem;
    margin-right: 1.4rem;
}

.local-login-form[b-kpwncm0tsj]{
    padding: 0 1.4rem;
}

.local-login-form[b-kpwncm0tsj],
.auth-dropdown > .google-btn[b-kpwncm0tsj],
.auth-dropdown > .team-login[b-kpwncm0tsj],
.auth-dropdown > .facebook-btn[b-kpwncm0tsj] {
    margin: 0 auto;
}

.google-btn[b-kpwncm0tsj],
.facebook-btn[b-kpwncm0tsj] {
    width: 60%;
    height: 45px;
    margin-top: 1.4rem;
    background-color: transparent;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.google-btn:hover[b-kpwncm0tsj],
.facebook-btn:hover[b-kpwncm0tsj] {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.25);
}

.google-logo[b-kpwncm0tsj], .facebook-logo[b-kpwncm0tsj] {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    border-radius: 12px;
}

.dropdown-divider[b-kpwncm0tsj] {
    position: relative;
    margin-top: 1.4rem;
    text-align: center;
}

.dropdown-divider[b-kpwncm0tsj]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-color);
}

.dropdown-divider span[b-kpwncm0tsj] {
    position: relative;
    padding: 0 14px;
    background: #07101f;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.team-login[b-kpwncm0tsj] {
    width: 60%;
    margin: 0 auto;
}

.dropdown-link[b-kpwncm0tsj] {
    width: 100%;
    margin: 0 auto 1.4rem;
    height: 45px;
    border: none;
    border-radius: 16px;
    background: var(--gradient-primary);
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.dropdown-link:hover[b-kpwncm0tsj] {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.25),0 0 18px rgba(20, 184, 166, 0.35);
}


.local-login-form[b-kpwncm0tsj] {
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
}

.floating-input[b-kpwncm0tsj] {
    position: relative;
    margin-bottom: 1.2rem;
}

.floating-input input[b-kpwncm0tsj] {
    width: 100%;
    height: 58px;
    padding: 20px 16px 8px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: var(--text-white);
    outline: none;
    transition: all 0.25s ease;
}

.floating-input input:focus[b-kpwncm0tsj] {
    border-color: var(--color-primary);
    background: rgba(20, 184, 166, 0.05);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.08);
}

.floating-input label[b-kpwncm0tsj] {
    position: absolute;
    top: 18px;
    left: 16px;
    color: var(--text-muted);
    font-size: 0.92rem;
    pointer-events: none;
    transition: all 0.2s ease;
}

.floating-input input:focus + label[b-kpwncm0tsj],
.floating-input input:not(:placeholder-shown) + label[b-kpwncm0tsj] {
    top: 8px;
    font-size: 0.72rem;
    color: var(--color-primary-light);
}


.submit-btn[b-kpwncm0tsj],
.back-to-auth-btn[b-kpwncm0tsj] {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 16px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.login-btn[b-kpwncm0tsj] {
    background: var(--gradient-primary);
    color: white;
    margin-top: 0.5rem;
}

.login-btn:hover[b-kpwncm0tsj] {
    transform: translateY(-2px);
    box-shadow:0 12px 24px rgba(0,0,0,0.25),0 0 18px rgba(20, 184, 166, 0.35);
}

.back-to-auth-btn[b-kpwncm0tsj] {
    margin-top: 12px;
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.06);
}

.back-to-auth-btn:hover[b-kpwncm0tsj] {
    background: rgba(255,255,255,0.08);
}


.form-error-message[b-kpwncm0tsj] {
    margin-bottom: 1rem;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    font-size: 0.88rem;
}

@keyframes dropdownFade-b-kpwncm0tsj {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.nav-links[b-kpwncm0tsj] {
    display: none;
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
}

.nav-links a[b-kpwncm0tsj] {
    color: black;
    text-decoration: none;
    font-weight: 600;
    font-family: 'Quicksand', sans-serif;
    font-size: 1.0rem;
    position: relative;
}

.nav-links a[b-kpwncm0tsj]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 3px;
    background: var(--gradient-primary);
    transition: width 0.3s ease;
}


.nav-links a:hover[b-kpwncm0tsj]::after {
    width: 100%;
}

.nav-dropdown-item[b-kpwncm0tsj] {
    position: relative;
    list-style: none;
}

.nav-dropdown-trigger[b-kpwncm0tsj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: black;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 1.0rem;
    cursor: pointer;
    user-select: none;
}

.nav-dropdown-trigger:hover[b-kpwncm0tsj],
.nav-dropdown-trigger:focus-visible[b-kpwncm0tsj] {
    color: #111827;
}

.nav-caret[b-kpwncm0tsj] {
    font-size: 0.7rem;
    transition: transform 0.25s ease;
}

.nav-dropdown-item:hover .nav-caret[b-kpwncm0tsj] {
    transform: rotate(180deg);
}

.solutions-dropdown[b-kpwncm0tsj] {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);

    width: 360px;
    max-width: calc(100vw - 2rem);
    padding: 10px;

    background:  #0B1120;
    backdrop-filter: blur(18px);
    border: 1px solid rgba(20, 184, 166, 0.5);
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.16);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;

    z-index: 1001;
}

.nav-dropdown-item:hover .solutions-dropdown[b-kpwncm0tsj] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.solutions-dropdown-link[b-kpwncm0tsj] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 8px 12px;
    margin: 0 0 4px;
    text-decoration: none;
    color: #f8fafc;
    border-radius: 12px;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.solutions-dropdown-link:hover[b-kpwncm0tsj],
.solutions-dropdown-link:focus-visible[b-kpwncm0tsj] {
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform: translateX(2px);
    outline: none;
}

.nav-links .solutions-dropdown-link:hover[b-kpwncm0tsj],
.nav-links .solutions-dropdown-link:focus-visible[b-kpwncm0tsj] {
    color: var(--color-primary, #008080);
}

.solutions-dropdown-link:last-child[b-kpwncm0tsj] {
    margin-bottom: 0;
}

.solutions-icon[b-kpwncm0tsj] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 1.1rem;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.solutions-dropdown-link:hover .solutions-icon[b-kpwncm0tsj],
.solutions-dropdown-link:focus-visible .solutions-icon[b-kpwncm0tsj] {
    color: var(--color-primary, #008080);
    border-color: var(--color-primary, #008080);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 12px rgba(0, 0, 0, 0.18);
}

.solutions-dropdown-link:hover strong[b-kpwncm0tsj],
.solutions-dropdown-link:hover small[b-kpwncm0tsj],
.solutions-dropdown-link:focus-visible strong[b-kpwncm0tsj],
.solutions-dropdown-link:focus-visible small[b-kpwncm0tsj] {
    color: var(--color-primary, #008080);
}

.solutions-dropdown-link strong[b-kpwncm0tsj] {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 2px;
}

.solutions-dropdown-link small[b-kpwncm0tsj] {
    display: block;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #a7b1c2;
}

.cta[b-kpwncm0tsj] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.register-btn[b-kpwncm0tsj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--gradient-primary);
    color: var(--text-white);
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
    box-shadow: var(--shadow-md);
}

.register-btn:hover[b-kpwncm0tsj] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.menu-icon[b-kpwncm0tsj] {
    font-size: 22px;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-menu-btn[b-kpwncm0tsj] {
    display: none;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: all .3s ease;
}

.mobile-menu-btn i[b-kpwncm0tsj] {
    font-size: 1.5rem;
    line-height: 1;
}

.mobile-menu-btn:hover[b-kpwncm0tsj] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.mobile-nav-wrapper[b-kpwncm0tsj] {
    display: none;
}

.mobile-nav-links[b-kpwncm0tsj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-nav-links a[b-kpwncm0tsj] {
    text-decoration: none;
}

.mobile-solutions-group[b-kpwncm0tsj] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mobile-solutions-toggle[b-kpwncm0tsj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 50px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-dark);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all .25s ease;
}

.mobile-solutions-toggle span[b-kpwncm0tsj] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.mobile-solutions-toggle:hover[b-kpwncm0tsj],
.mobile-solutions-toggle[aria-expanded="true"][b-kpwncm0tsj] {
    background: rgba(20,184,166,.08);
    color: var(--color-primary);
}

.mobile-solutions-chevron[b-kpwncm0tsj] {
    transition: transform .25s ease;
}

.mobile-solutions-toggle[aria-expanded="true"] .mobile-solutions-chevron[b-kpwncm0tsj] {
    transform: rotate(180deg);
}

.mobile-solutions-submenu[b-kpwncm0tsj] {
    display: grid;
    gap: 4px;
    margin: 0 8px 4px 16px;
    padding: 6px;
    border-left: 2px solid rgba(20,184,166,.25);
    background: rgba(20,184,166,.04);
    border-radius: 0 12px 12px 0;
}

.mobile-solutions-submenu a[b-kpwncm0tsj] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 7px 10px;
    border-radius: 9px;
    color: var(--text-dark);
    transition: background .2s ease, color .2s ease;
}

.mobile-solutions-submenu a:hover[b-kpwncm0tsj] {
    background: rgba(20,184,166,.1);
    color: var(--color-primary);
}

.mobile-solution-icon[b-kpwncm0tsj] {
    display: grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(20,184,166,.1);
    font-size: .95rem;
}

.mobile-solutions-submenu a > span:last-child[b-kpwncm0tsj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-solutions-submenu strong[b-kpwncm0tsj] {
    font-size: .88rem;
}

.mobile-solutions-submenu small[b-kpwncm0tsj] {
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 400;
}

.mobile-login-btn[b-kpwncm0tsj] {
    border: none;
    cursor: pointer;
}

@media (max-width: 991px) {

    .top-row[b-kpwncm0tsj] {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .top-row-container[b-kpwncm0tsj] {
        padding: .75rem 1rem;
    }

    .app-logo[b-kpwncm0tsj] {
        height: 60px;
    }

    .nav-links[b-kpwncm0tsj] {
        display: none !important;
    }

    .register-btn[b-kpwncm0tsj] {
        display: none;
    }

    .mobile-menu-btn[b-kpwncm0tsj] {
        display: flex;
    }

    .mobile-nav-wrapper[b-kpwncm0tsj] {
        display: block;
        background: var(--white-bg);
        border-top: 1px solid rgba(0,0,0,.08);
        animation: mobileMenuSlide-b-kpwncm0tsj .25s ease;
        box-shadow: 0 10px 30px rgba(0,0,0,.08);
    }

    .mobile-nav-links[b-kpwncm0tsj] {
        padding: 1rem;
    }

    .mobile-nav-links a[b-kpwncm0tsj] {
        display: flex;
        align-items: center;
        min-height: 50px;
        padding: 0 16px;
        color: var(--text-dark);
        font-size: 1rem;
        font-weight: 600;
        border-radius: 12px;
        transition: all .25s ease;
    }

    .mobile-nav-links a:hover[b-kpwncm0tsj] {
        background: rgba(20,184,166,.08);
        color: var(--color-primary);
    }

    .mobile-login-btn[b-kpwncm0tsj] {
        margin-top: 8px;
        height: 50px;
        border-radius: 12px;
        background: var(--gradient-primary);
        color: white;
        font-size: .95rem;
        font-weight: 600;
        transition: all .25s ease;
    }

    .mobile-login-btn:hover[b-kpwncm0tsj] {
        transform: translateY(-2px);
    }

    .auth-dropdown[b-kpwncm0tsj] {
        position: fixed;
        top: 80px;
        left: 16px;
        right: 16px;
        width: auto;
        max-width: 420px;
        margin: auto;
    }
}

@media (min-width: 768px) {
    .register-btn[b-kpwncm0tsj] {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 992px) {
    .top-row[b-kpwncm0tsj] {
        transform: translateY(-100%);
    }

    .nav-links[b-kpwncm0tsj] {
        display: flex;
    }

    .mobile-menu-btn[b-kpwncm0tsj],
    .mobile-nav-wrapper[b-kpwncm0tsj] {
        display: none !important;
    }

    .register-btn[b-kpwncm0tsj] {
        display: flex;
    }

    .nav-links[b-kpwncm0tsj] {
        display: flex;
    }
}

@keyframes mobileMenuSlide-b-kpwncm0tsj {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Pages/Authorized/ApiExplorer.razor.rz.scp.css */
/* Page shell and heading */
.api-explorer[b-eu88lpmawq] {
    --ax-focus-ring: rgba(20, 184, 166, .35);
    min-height: 100%;
    padding: clamp(20px, 3vw, 38px);
    color: var(--text-primary);
    background:
        radial-gradient(ellipse at 92% 0, rgba(20, 184, 166, .08), transparent 30%),
        var(--page-bg);
    background-repeat: no-repeat;
}

.api-explorer[b-eu88lpmawq],
.api-explorer *[b-eu88lpmawq] {
    box-sizing: border-box;
}

.api-explorer img[b-eu88lpmawq],
.api-explorer svg[b-eu88lpmawq],
.api-explorer pre[b-eu88lpmawq],
.api-explorer textarea[b-eu88lpmawq] {
    max-width: 100%;
}

.ax-header[b-eu88lpmawq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 0 24px;
}

.ax-heading-copy[b-eu88lpmawq] {
    display: grid;
    gap: 7px;
}

.ax-eyebrow[b-eu88lpmawq] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--color-primary-light);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.ax-header h1[b-eu88lpmawq] {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    font-weight: 760;
    letter-spacing: -.04em;
    line-height: 1.2;
}

.ax-subtitle[b-eu88lpmawq] {
    margin: 0;
    color: var(--text-muted);
    font-size: .9rem;
    line-height: 1.5;
}

.ax-header-badge[b-eu88lpmawq] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: .76rem;
    font-weight: 650;
    box-shadow: var(--shadow-sm);
}

.ax-live-dot[b-eu88lpmawq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .12);
}

/* Main two-column layout */
.ax-layout[b-eu88lpmawq] {
    display: grid;
    grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.ax-sidebar[b-eu88lpmawq],
.ax-main[b-eu88lpmawq] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.ax-sidebar[b-eu88lpmawq] {
    position: sticky;
    top: 20px;
    align-self: start;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--border-color) transparent;
    scrollbar-width: thin;
}

/* Panels and panel headings */
.ax-panel[b-eu88lpmawq] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--card-border);
    border-radius: 17px;
    background: var(--card-bg);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .055);
}

.ax-panel-body[b-eu88lpmawq] {
    padding: clamp(17px, 2vw, 23px);
}

.ax-panel-title[b-eu88lpmawq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 13px;
    color: var(--text-primary);
    font-size: .82rem;
    font-weight: 700;
}

.ax-panel-title i[b-eu88lpmawq] {
    color: var(--color-primary-light);
    font-size: .95rem;
}

.ax-panel-header[b-eu88lpmawq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 14px 0;
    border-bottom: 1px solid var(--card-border);
}

.ax-base-url[b-eu88lpmawq] {
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--color-surface-alt);
    color: var(--text-secondary);
    font-size: .73rem;
}

.ax-base-url code[b-eu88lpmawq] {
    color: var(--color-primary-light);
}

/* Fields and upload control */
.ax-label[b-eu88lpmawq] {
    display: block;
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-size: .78rem;
    font-weight: 600;
}

.ax-input[b-eu88lpmawq] {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--text-primary);
    font: inherit;
    font-size: .86rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.ax-input[b-eu88lpmawq]::placeholder {
    color: var(--text-muted);
}

.ax-input:focus[b-eu88lpmawq],
.ax-json-editor:focus[b-eu88lpmawq] {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--ax-focus-ring);
}

.ax-hint[b-eu88lpmawq],
.ax-text-muted[b-eu88lpmawq] {
    color: var(--text-muted);
    font-size: .75rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.ax-hint[b-eu88lpmawq] {
    margin-top: 10px;
}

.ax-hint code[b-eu88lpmawq] {
    padding: 2px 6px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--color-surface-alt);
    color: var(--color-primary-light);
    font-family: 'Quicksand', sans-serif;
}

.api-explorer[b-eu88lpmawq]  input[type="file"] {
    width: 100%;
    max-width: 100%;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--input-background);
    color: var(--text-primary);
    font-size: .8rem;
}

.api-explorer[b-eu88lpmawq]  input[type="file"]::file-selector-button {
    margin-right: 8px;
    padding: 6px 9px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg-hover);
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
}

/* Buttons */
.ax-btn[b-eu88lpmawq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 7px 13px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: .8rem;
    font-weight: 650;
    line-height: 1.2;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.ax-btn:disabled[b-eu88lpmawq] {
    opacity: .5;
    cursor: not-allowed;
}

.ax-btn-primary[b-eu88lpmawq] {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 5px 14px rgba(20, 184, 166, .18);
}

.ax-btn-primary:hover:not(:disabled)[b-eu88lpmawq] {
    border-color: var(--color-primary-dark);
    background: var(--color-primary-dark);
}

.ax-btn-success[b-eu88lpmawq] {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.ax-btn-success:hover:not(:disabled)[b-eu88lpmawq] {
    border-color: var(--color-primary-dark);
    background: var(--color-primary-dark);
}

.ax-btn-ghost[b-eu88lpmawq] {
    border-color: var(--border-color);
    background: transparent;
    color: var(--text-secondary);
}

.ax-btn-ghost:hover:not(:disabled)[b-eu88lpmawq] {
    border-color: var(--text-muted);
    background: var(--color-surface-alt);
    color: var(--text-primary);
}

.ax-btn-danger-ghost[b-eu88lpmawq] {
    border-color: var(--border-color);
    background: transparent;
    color: var(--danger-color);
}

.ax-btn-danger-ghost:hover:not(:disabled)[b-eu88lpmawq] {
    border-color: var(--danger-color);
    background: rgba(239, 68, 68, .1);
}

.ax-btn-sm[b-eu88lpmawq] {
    min-height: 32px;
    padding: 5px 10px;
    font-size: .74rem;
}

.ax-btn-row[b-eu88lpmawq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ax-btn-stack[b-eu88lpmawq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ax-btn-stack .ax-btn[b-eu88lpmawq] {
    width: 100%;
}

.ax-btn:focus-visible[b-eu88lpmawq],
.ax-tab:focus-visible[b-eu88lpmawq],
.ax-method-btn:focus-visible[b-eu88lpmawq] {
    outline: 3px solid var(--ax-focus-ring);
    outline-offset: 2px;
}

/* Template list and loading/empty states */
.ax-template-list[b-eu88lpmawq] {
    max-height: 320px;
    overflow: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    scrollbar-color: var(--border-color) transparent;
    scrollbar-width: thin;
}

.ax-template-list li[b-eu88lpmawq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--card-border);
}

.ax-template-list li:last-child[b-eu88lpmawq] {
    border-bottom: 0;
}

.ax-template-name[b-eu88lpmawq] {
    overflow-wrap: anywhere;
    color: var(--text-primary);
    font-size: .84rem;
    font-weight: 650;
}

.ax-template-meta[b-eu88lpmawq] {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: .72rem;
}

.ax-empty[b-eu88lpmawq] {
    padding: 16px 0;
    color: var(--text-muted);
    font-size: .8rem;
    text-align: center;
}

.ax-spinner-row[b-eu88lpmawq] {
    display: flex;
    justify-content: center;
    padding: 18px 0;
}

.ax-spinner[b-eu88lpmawq] {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: ax-spin-b-eu88lpmawq .7s linear infinite;
}

@keyframes ax-spin-b-eu88lpmawq {
    to { transform: rotate(360deg); }
}

/* Documentation and explorer tabs */
.ax-tab-bar[b-eu88lpmawq] {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 0 4px;
    scrollbar-width: none;
}

.ax-tab-bar[b-eu88lpmawq]::-webkit-scrollbar {
    display: none;
}

.ax-tab[b-eu88lpmawq] {
    flex: 0 0 auto;
    padding: 12px 15px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 9px 9px 0 0;
    background: transparent;
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

.ax-tab:hover[b-eu88lpmawq] {
    color: var(--text-primary);
}

.ax-tab.is-active[b-eu88lpmawq] {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary-light);
}

.ax-doc-frame[b-eu88lpmawq] {
    padding: 4px 2px;
    color: var(--text-secondary);
    font-size: .88rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.ax-doc-frame[b-eu88lpmawq]  h1,
.ax-doc-frame[b-eu88lpmawq]  h2,
.ax-doc-frame[b-eu88lpmawq]  h3,
.ax-doc-frame[b-eu88lpmawq]  h4 {
    color: var(--text-primary);
    letter-spacing: -.02em;
}

.ax-doc-frame[b-eu88lpmawq]  p,
.ax-doc-frame[b-eu88lpmawq]  li {
    color: var(--text-secondary);
    line-height: 1.7;
}

.ax-doc-frame[b-eu88lpmawq]  pre,
.ax-doc-frame[b-eu88lpmawq]  code {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Endpoint selector, request editor, and response */
.ax-text-sm[b-eu88lpmawq] {
    color: var(--text-secondary);
    font-size: .84rem;
    line-height: 1.6;
}

.ax-endpoint-row[b-eu88lpmawq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.ax-method-group[b-eu88lpmawq] {
    display: inline-flex;
    flex-wrap: wrap;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.ax-method-btn[b-eu88lpmawq] {
    min-height: 38px;
    padding: 7px 12px;
    border: 0;
    border-right: 1px solid var(--border-color);
    background: var(--color-surface);
    color: var(--text-secondary);
    font-size: .77rem;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

.ax-method-btn:last-child[b-eu88lpmawq] {
    border-right: 0;
}

.ax-method-btn:hover[b-eu88lpmawq] {
    background: var(--color-surface-alt);
    color: var(--text-primary);
}

.ax-method-btn.is-active[b-eu88lpmawq] {
    background: var(--color-primary);
    color: #fff;
}

.ax-endpoint-meta[b-eu88lpmawq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.ax-method-tag[b-eu88lpmawq] {
    padding: 5px 8px;
    border-radius: 6px;
    font-family: 'Quicksand', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
}

.ax-method-tag.get[b-eu88lpmawq] {
    background: var(--status-approved-bg);
    color: var(--status-approved-text);
}

.ax-method-tag.post[b-eu88lpmawq] {
    background: rgba(59, 130, 246, .15);
    color: var(--color-info);
}

.ax-editor-wrap[b-eu88lpmawq] {
    position: relative;
    margin-bottom: 12px;
}

.ax-json-editor[b-eu88lpmawq] {
    display: block;
    width: 100%;
    min-height: 320px;
    padding: 14px 64px 14px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--text-primary);
    font-family: 'Quicksand', sans-serif;
    font-size: .82rem;
    line-height: 1.6;
    resize: vertical;
}

.ax-editor-copy[b-eu88lpmawq] {
    position: absolute;
    top: 10px;
    right: 10px;
}

.ax-response-head[b-eu88lpmawq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 18px 0 6px;
}

.ax-response-box[b-eu88lpmawq] {
    max-height: 320px;
    overflow: auto;
    padding: 15px;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 11px;
    background: #0d1117;
    color: #e6edf3;
    font-family: 'Quicksand', sans-serif;
    font-size: .8rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ax-success-note[b-eu88lpmawq] {
    margin-top: 8px;
    color: var(--color-primary-light);
    font-size: .8rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

/* Footer note */
.ax-footnote[b-eu88lpmawq] {
    padding: 14px 18px;
    color: var(--text-muted);
    font-size: .77rem;
    line-height: 1.65;
}

/* Responsive layout */
@media (max-width: 1000px) {
    .ax-layout[b-eu88lpmawq] {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .ax-sidebar[b-eu88lpmawq] {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        max-height: none;
        overflow: visible;
    }

    .ax-sidebar > .ax-panel:first-child[b-eu88lpmawq] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .api-explorer[b-eu88lpmawq] {
        padding: 20px 14px;
    }

    .ax-header[b-eu88lpmawq] {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        padding-bottom: 18px;
    }

    .ax-header-badge[b-eu88lpmawq] {
        align-self: flex-start;
    }

    .ax-sidebar[b-eu88lpmawq] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ax-sidebar > .ax-panel:first-child[b-eu88lpmawq] {
        grid-column: auto;
    }

    .ax-panel-body[b-eu88lpmawq] {
        padding: 16px;
    }

    .ax-panel-header[b-eu88lpmawq] {
        align-items: stretch;
        flex-direction: column;
        padding: 10px 12px 0;
    }

    .ax-base-url[b-eu88lpmawq] {
        margin-bottom: 10px;
    }

    .ax-endpoint-row[b-eu88lpmawq] {
        align-items: stretch;
        flex-direction: column;
    }

    .ax-method-group[b-eu88lpmawq] {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .ax-method-btn[b-eu88lpmawq] {
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
        text-align: left;
    }

    .ax-method-btn:last-child[b-eu88lpmawq] {
        border-bottom: 0;
    }

    .ax-endpoint-meta[b-eu88lpmawq] {
        justify-content: space-between;
    }

    .ax-btn-row .ax-btn[b-eu88lpmawq] {
        flex: 1 1 auto;
    }
}

@media (max-width: 420px) {
    .ax-btn-row[b-eu88lpmawq] {
        flex-direction: column;
        align-items: stretch;
    }

    .ax-btn-row .ax-btn[b-eu88lpmawq] {
        width: 100%;
    }

    .ax-json-editor[b-eu88lpmawq] {
        min-height: 240px;
        padding-right: 14px;
        font-size: .76rem;
    }

    .ax-editor-copy[b-eu88lpmawq] {
        position: static;
        margin-top: 8px;
    }

    .ax-response-box[b-eu88lpmawq] {
        max-height: 250px;
        padding: 12px;
        font-size: .74rem;
    }

    .ax-footnote[b-eu88lpmawq] {
        padding: 12px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .api-explorer *[b-eu88lpmawq],
    .api-explorer *[b-eu88lpmawq]::before,
    .api-explorer *[b-eu88lpmawq]::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}
/* /Pages/Authorized/ApiKeys.razor.rz.scp.css */
.api-keys-container[b-52plm2qcn9] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

.api-keys-header[b-52plm2qcn9] {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding: 28px;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.page-title[b-52plm2qcn9] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.header-content p[b-52plm2qcn9] {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0 0;
}

.btn-generate-primary[b-52plm2qcn9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border: none;
    border-radius: 0.75rem;
    color: var(--text-white);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 25px rgba(20, 184, 166, 0.2);
    white-space: nowrap;
}

.btn-generate-primary:hover[b-52plm2qcn9] {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(20, 184, 166, 0.3);
}

.btn-generate-primary:active[b-52plm2qcn9] {
    transform: translateY(0);
}

.btn-icon[b-52plm2qcn9] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.api-keys-main[b-52plm2qcn9] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.api-keys-section[b-52plm2qcn9] {
    width: 100%;
}

.empty-state[b-52plm2qcn9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    border-style: dashed;
    text-align: center;
    backdrop-filter: blur(12px);
}

.empty-icon[b-52plm2qcn9] {
    font-size: 3.5rem;
    opacity: 0.6;
}

.empty-state h3[b-52plm2qcn9] {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin: 0.5rem 0;
}

.empty-state p[b-52plm2qcn9] {
    color: var(--text-muted);
    margin: 0;
    max-width: 300px;
}

.btn-generate-secondary[b-52plm2qcn9] {
    margin-top: 1rem;
    padding: 0.625rem 1.25rem;
    background: var(--color-primary);
    border: none;
    border-radius: 0.5rem;
    color: var(--text-white);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-generate-secondary:hover[b-52plm2qcn9] {
    background: var(--color-primary-light);
}

/* ===== Loading State ===== */
.loading-state[b-52plm2qcn9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 4rem 2rem;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    backdrop-filter: blur(12px);
}

.loading-spinner[b-52plm2qcn9] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(20, 184, 166, 0.2);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-52plm2qcn9 1s linear infinite;
}

@keyframes spin-b-52plm2qcn9 {
    to { transform: rotate(360deg); }
}

.loading-state p[b-52plm2qcn9] {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ===== Keys Grid ===== */
.keys-grid[b-52plm2qcn9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* ===== Key Card ===== */
/* FIX: card bg/border were hardcoded white overlays — swapped for the
   themed --card-bg / --card-border pair so cards read correctly on
   both a dark and a light page background. */
.key-card[b-52plm2qcn9] {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
}

.key-card:hover[b-52plm2qcn9] {
    border-color: var(--contact-card-hover-border, #14B8A6);
    background: var(--card-bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.key-card.inactive[b-52plm2qcn9] {
    opacity: 0.65;
}

/* ===== Card Header ===== */
/* FIX: border-bottom/background were fixed white-alpha values;
   now derived from the same card border token so it stays visible
   (but subtle) in both themes. */
.key-card-header[b-52plm2qcn9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid var(--card-border);
    background: var(--glass-bg);
}

.key-title-section[b-52plm2qcn9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.key-status-indicator[b-52plm2qcn9] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse-b-52plm2qcn9 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.key-status-indicator.active[b-52plm2qcn9] {
    background: var(--color-primary);
}

.key-status-indicator.inactive[b-52plm2qcn9] {
    background: var(--text-muted);
    animation: none;
}

@keyframes pulse-b-52plm2qcn9 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.key-info h3[b-52plm2qcn9] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-primary);
    word-break: break-word;
}

.key-id[b-52plm2qcn9] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0 0;
    font-family: 'Quicksand', sans-serif;
}

/* ===== Card Body ===== */
.key-card-body[b-52plm2qcn9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
}

.key-stat[b-52plm2qcn9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.stat-label[b-52plm2qcn9] {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.stat-value[b-52plm2qcn9] {
    font-size: 0.9rem;
    color: var(--color-primary-light);
    text-align: right;
}

.badge[b-52plm2qcn9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* FIX: swapped to the status-approved / status-disabled tokens, which
   already have correctly-contrasted light/dark values, instead of a
   single fixed teal/grey pairing. */
.badge-active[b-52plm2qcn9] {
    background: var(--status-approved-bg);
    color: var(--status-approved-text);
    border: 1px solid rgba(20, 184, 166, 0.3);
}

.badge-inactive[b-52plm2qcn9] {
    background: var(--status-disabled-bg);
    color: var(--status-disabled-text);
    border: 1px solid rgba(156, 163, 175, 0.3);
}

/* ===== Card Footer ===== */
/* FIX: this was the worst offender — a literal
   linear-gradient(#ffffff, #f8fbfb) baked in, so the footer stayed
   pure white even in dark mode. Now built from the theme's card
   tokens so it matches the card body in either theme. */
.key-card-footer[b-52plm2qcn9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-top: 1px solid var(--card-border);
    background: linear-gradient(180deg, var(--card-bg), var(--card-bg-hover));
}

/* Base Button */
.btn-action[b-52plm2qcn9] {
    flex: 1;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
}

.btn-action i[b-52plm2qcn9] {
    font-size: 1rem;
}

/* Regenerate */
.btn-regenerate[b-52plm2qcn9] {
    background: linear-gradient(135deg, #14B8A6, #0D9488);
    color: #fff;
    box-shadow: 0 8px 18px rgba(20, 184, 166, .25);
}

.btn-regenerate:hover[b-52plm2qcn9] {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(20, 184, 166, .35);
}

/* Activate / Deactivate */
/* FIX: --brand-teal is a single fixed dark tone with low contrast on
   a dark card background. --color-primary-light reads clearly on
   both themes against the translucent teal chip. */
.btn-toggle[b-52plm2qcn9] {
    background: rgba(20, 184, 166, .08);
    color: var(--color-primary-light);
    border: 1px solid rgba(20, 184, 166, .2);
}

.btn-toggle:hover[b-52plm2qcn9] {
    background: rgba(20, 184, 166, .15);
    border-color: rgba(20, 184, 166, .4);
    transform: translateY(-2px);
}

/* Delete */
.btn-delete[b-52plm2qcn9] {
    background: rgba(239, 68, 68, .08);
    color: var(--danger-color);
    border: 1px solid rgba(239, 68, 68, .18);
}

.btn-delete:hover[b-52plm2qcn9] {
    background: var(--danger-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(239, 68, 68, .28);
}

/* Ripple Shine */
.btn-action[b-52plm2qcn9]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        transparent,
        rgba(255, 255, 255, .25),
        transparent);
    transform: translateX(-120%);
    transition: .6s;
}

.btn-action:hover[b-52plm2qcn9]::before {
    transform: translateX(120%);
}

.btn-action:active[b-52plm2qcn9] {
    transform: scale(.97);
}

/* Responsive */
@media (max-width: 768px) {
    .key-card-footer[b-52plm2qcn9] {
        flex-direction: column;
    }

    .btn-action[b-52plm2qcn9] {
        width: 100%;
    }
}

/* ===== Modal Styles ===== */
.modal-overlay[b-52plm2qcn9] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 1000;
    animation: fadeIn-b-52plm2qcn9 0.2s ease-out;
}

@keyframes fadeIn-b-52plm2qcn9 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-panel[b-52plm2qcn9] {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    background: var(--color-surface);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: slideUp-b-52plm2qcn9 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp-b-52plm2qcn9 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-panel.mac-style[b-52plm2qcn9] {
    border-radius: 1rem;
}

/* ===== macOS Traffic Lights ===== */
.modal-header-mac[b-52plm2qcn9] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--mac-header-gradient);
    border-bottom: 1px solid var(--border-color);
}

.traffic-lights[b-52plm2qcn9] {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.light[b-52plm2qcn9] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.light.red[b-52plm2qcn9] {
    background: var(--red-light);
}

.light.yellow[b-52plm2qcn9] {
    background: var(--yellow-light);
}

.light.green[b-52plm2qcn9] {
    background: var(--green-light);
}

.modal-header-mac h2[b-52plm2qcn9] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
    flex: 1;
}

/* ===== Modal Body ===== */
.modal-body[b-52plm2qcn9] {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.modal-body h3[b-52plm2qcn9] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.modal-body p[b-52plm2qcn9] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ===== Form Styles ===== */
.form-group[b-52plm2qcn9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label[b-52plm2qcn9] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-input[b-52plm2qcn9] {
    padding: 0.75rem 1rem;
    background: var(--input-background);
    border: 1px solid var(--border-color);
    border-radius: 0.625rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: 'Quicksand', sans-serif;
    transition: all 0.2s;
}

.form-input[b-52plm2qcn9]::placeholder {
    color: var(--text-muted);
}

.form-input:focus[b-52plm2qcn9] {
    outline: none;
    background: var(--input-background-focus);
    border-color: var(--color-primary);
    box-shadow: var(--input-shadow);
}

.form-hint[b-52plm2qcn9] {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

.validity-selector[b-52plm2qcn9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.validity-option[b-52plm2qcn9] {
    padding: 0.5rem;
    background: var(--input-background);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.validity-option:hover[b-52plm2qcn9] {
    border-color: var(--color-primary);
}

.validity-option.selected[b-52plm2qcn9] {
    background: var(--input-background-focus);
    border-color: var(--color-primary);
    color: var(--color-primary-light);
}

/* ===== Key Display ===== */
/* Kept intentionally dark (terminal-style) in both themes for
   emphasis/contrast against the masked or revealed key text. */
.key-display-box[b-52plm2qcn9] {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    overflow: hidden;
}

.key-content[b-52plm2qcn9] {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.key-code[b-52plm2qcn9] {
    font-family: 'Quicksand', sans-serif;
    font-size: 0.85rem;
    color: var(--color-primary-light);
    word-break: break-all;
    margin: 0;
    white-space: pre-wrap;
}

.key-code.masked[b-52plm2qcn9] {
    letter-spacing: 0.15em;
    color: var(--text-muted);
}

.btn-icon-only[b-52plm2qcn9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(20, 184, 166, 0.1);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 0.5rem;
    color: var(--color-primary-light);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-icon-only:hover[b-52plm2qcn9] {
    background: rgba(20, 184, 166, 0.2);
}

/* ===== Success Icon ===== */
.success-msg[b-52plm2qcn9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.success-icon[b-52plm2qcn9] {
    font-size: 1.5rem;
    margin: 1rem 0;
    color: var(--color-success, var(--color-primary));
}

.reveal-warning[b-52plm2qcn9] {
    padding: 0.75rem 1rem;
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid var(--color-secondary);
    border-radius: 0.5rem;
    color: var(--color-secondary);
    font-size: 0.9rem;
}

/* ===== Modal Footer ===== */
/* FIX: rgba(255,255,255,0.02) → --glass-bg so the footer strip is
   visible against a light-theme white modal too. */
.modal-footer[b-52plm2qcn9] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--glass-bg);
    border-top: 1px solid var(--border-color);
}

.btn-primary[b-52plm2qcn9],
.btn-secondary[b-52plm2qcn9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.625rem;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary[b-52plm2qcn9] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--text-white);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

.btn-primary:hover[b-52plm2qcn9] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.4);
}

.btn-primary:disabled[b-52plm2qcn9] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* FIX: rgba(255,255,255,0.08)/0.12 was a "light overlay" trick that
   only works on a dark surface — on the light theme it just
   disappeared into the white modal. --glass-bg / --glass-bg-hover
   are the themed equivalents. */
.btn-secondary[b-52plm2qcn9] {
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover[b-52plm2qcn9] {
    background: var(--glass-bg-hover);
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
    .api-keys-container[b-52plm2qcn9] {
        padding: 1rem;
        gap: 1.5rem;
    }

    .api-keys-header[b-52plm2qcn9] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1.5rem;
    }

    .header-content h1[b-52plm2qcn9] {
        font-size: 2rem;
    }

    .keys-grid[b-52plm2qcn9] {
        grid-template-columns: 1fr;
    }

    .modal-panel[b-52plm2qcn9] {
        width: 95%;
        max-height: 95vh;
    }

    .validity-selector[b-52plm2qcn9] {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal-footer[b-52plm2qcn9] {
        flex-direction: column-reverse;
    }

    .modal-footer button[b-52plm2qcn9] {
        width: 100%;
    }
}

.modal-body[b-52plm2qcn9]::-webkit-scrollbar {
    width: 6px;
}

.modal-body[b-52plm2qcn9]::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body[b-52plm2qcn9]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.modal-body[b-52plm2qcn9]::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-light);
}
/* /Pages/Authorized/Dashboard.razor.rz.scp.css */
.dashboard-shell[b-8trniuyhk2] {
    --dashboard-border: color-mix(in srgb, var(--border-color) 56%, transparent);
    --dashboard-panel: var(--card-bg);
    --dashboard-muted: var(--text-muted);
    --dashboard-text: var(--text-primary);
    min-height: 100%;
    padding: clamp(18px, 2.2vw, 34px) clamp(16px, 2.4vw, 38px) 100px;
    color: var(--dashboard-text);
    background:
        radial-gradient(circle at 10% 0%, rgba(20, 184, 166, .09), transparent 27rem),
        radial-gradient(circle at 94% 8%, rgba(99, 102, 241, .07), transparent 25rem),
        var(--page-bg);
}

.dashboard-hero[b-8trniuyhk2],
.metric-grid[b-8trniuyhk2],
.dashboard-main-grid[b-8trniuyhk2],
.dashboard-secondary-grid[b-8trniuyhk2],
.dashboard-bottom-grid[b-8trniuyhk2] {
    max-width: 1680px;
    margin-right: auto;
    margin-left: auto;
}

.dashboard-hero[b-8trniuyhk2] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 25px;
}

.eyebrow[b-8trniuyhk2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--color-primary-light);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.live-dot[b-8trniuyhk2] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2dd4bf;
    box-shadow: 0 0 0 5px rgba(45, 212, 191, .14);
}

.dashboard-hero h1[b-8trniuyhk2],
.panel-heading h2[b-8trniuyhk2] {
    margin: 0;
    color: var(--dashboard-text);
    letter-spacing: -.045em;
}

.dashboard-hero h1[b-8trniuyhk2] {
    font-size: clamp(28px, 2.4vw, 39px);
    font-weight: 750;
    line-height: 1.08;
}

.dashboard-hero p[b-8trniuyhk2],
.panel-heading p[b-8trniuyhk2] {
    margin: 8px 0 0;
    color: var(--dashboard-muted);
    font-size: 13px;
}

.hero-actions[b-8trniuyhk2] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.last-updated[b-8trniuyhk2] {
    color: var(--dashboard-muted);
    font-size: 12px;
    white-space: nowrap;
}

.last-updated i[b-8trniuyhk2] {
    margin-right: 5px;
}

.range-select[b-8trniuyhk2] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 11px;
    border: 1px solid var(--dashboard-border);
    border-radius: 10px;
    color: var(--dashboard-text);
    background: var(--dashboard-panel);
    cursor: pointer;
}

.range-select i[b-8trniuyhk2] {
    color: var(--color-primary-light);
}

.range-select select[b-8trniuyhk2] {
    width: 112px;
    border: 0;
    outline: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.range-select option[b-8trniuyhk2] {
    background: var(--card-bg);
    color: var(--text-primary);
}

.refresh-dashboard[b-8trniuyhk2] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #0f968c, #0d766e);
    box-shadow: 0 7px 16px rgba(13, 148, 136, .22);
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.refresh-dashboard:hover:not(:disabled)[b-8trniuyhk2] {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(13, 148, 136, .3);
}

.refresh-dashboard:disabled[b-8trniuyhk2] {
    cursor: wait;
    opacity: .75;
}

.is-spinning[b-8trniuyhk2] {
    animation: dashboard-spin-b-8trniuyhk2 .75s linear infinite;
}

.metric-grid[b-8trniuyhk2] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.metric-card[b-8trniuyhk2],
.dashboard-panel[b-8trniuyhk2] {
    border: 1px solid var(--dashboard-border);
    background: color-mix(in srgb, var(--dashboard-panel) 94%, transparent);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .05);
}

.metric-card[b-8trniuyhk2] {
    position: relative;
    min-height: 172px;
    overflow: hidden;
    padding: 18px;
    border-radius: 16px;
    transition: transform .2s ease, border-color .2s ease;
}

.metric-card:hover[b-8trniuyhk2],
.metric-card:focus[b-8trniuyhk2] {
    transform: translateY(-5px);
    border-color: rgba(20, 184, 166, .68);
    box-shadow: 0 18px 38px rgba(13, 148, 136, .14);
    outline: 0;
}

.metric-card-primary[b-8trniuyhk2]::after {
    position: absolute;
    inset: auto -20px -38px auto;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: rgba(20, 184, 166, .11);
    content: "";
}

.metric-card-top[b-8trniuyhk2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
}

.metric-icon[b-8trniuyhk2],
.quick-action-icon[b-8trniuyhk2],
.activity-icon[b-8trniuyhk2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #0f766e;
    background: rgba(20, 184, 166, .13);
}

.metric-icon[b-8trniuyhk2] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 16px;
    transition: transform .2s ease;
}

.metric-card:hover .metric-icon[b-8trniuyhk2],
.metric-card:focus .metric-icon[b-8trniuyhk2] {
    transform: rotate(-8deg) scale(1.08);
}

.metric-icon-blue[b-8trniuyhk2] {
    color: #2563eb;
    background: rgba(59, 130, 246, .13);
}

.metric-icon-violet[b-8trniuyhk2] {
    color: #7c3aed;
    background: rgba(139, 92, 246, .13);
}

.metric-icon-amber[b-8trniuyhk2] {
    color: #b45309;
    background: rgba(245, 158, 11, .16);
}

.metric-icon-rose[b-8trniuyhk2] {
    color: #e11d48;
    background: rgba(244, 63, 94, .13);
}

.metric-trend[b-8trniuyhk2] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border-radius: 20px;
    padding: 4px 7px;
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
}

.positive[b-8trniuyhk2] {
    color: #059669;
    background: rgba(16, 185, 129, .11);
}

.neutral[b-8trniuyhk2] {
    color: #a16207;
    background: rgba(245, 158, 11, .14);
}

.metric-label[b-8trniuyhk2] {
    display: block;
    color: var(--dashboard-muted);
    font-size: 12px;
    font-weight: 600;
}

.metric-card > strong[b-8trniuyhk2] {
    display: block;
    margin: 4px 0;
    color: var(--dashboard-text);
    font-size: 26px;
    font-weight: 760;
    line-height: 1.05;
    letter-spacing: -.04em;
}

.metric-card > small[b-8trniuyhk2] {
    color: var(--dashboard-muted);
    font-size: 10px;
}

.metric-sparkline[b-8trniuyhk2] {
    position: absolute;
    right: 17px;
    bottom: 17px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 28px;
}

.metric-sparkline span[b-8trniuyhk2] {
    width: 4px;
    border-radius: 5px;
    background: #14b8a6;
    opacity: .35;
}

.metric-sparkline span:nth-child(1)[b-8trniuyhk2] {
    height: 28%;
}

.metric-sparkline span:nth-child(2)[b-8trniuyhk2] {
    height: 52%;
}

.metric-sparkline span:nth-child(3)[b-8trniuyhk2] {
    height: 38%;
}

.metric-sparkline span:nth-child(4)[b-8trniuyhk2] {
    height: 67%;
}

.metric-sparkline span:nth-child(5)[b-8trniuyhk2] {
    height: 56%;
}

.metric-sparkline span:nth-child(6)[b-8trniuyhk2] {
    height: 84%;
}

.metric-sparkline span:nth-child(7)[b-8trniuyhk2] {
    height: 72%;
    opacity: 1;
}

.sparkline-violet span[b-8trniuyhk2] {
    background: #8b5cf6;
}

.metric-progress[b-8trniuyhk2],
.quota-bar[b-8trniuyhk2] {
    height: 5px;
    margin-top: 15px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(148, 163, 184, .16);
}

.metric-progress span[b-8trniuyhk2] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #60a5fa, #2563eb);
}

.response-track[b-8trniuyhk2] {
    position: relative;
    width: 94px;
    height: 5px;
    margin-top: 16px;
    border-radius: 5px;
    background: linear-gradient(90deg, #10b981 0 60%, #fbbf24 60% 78%, #e5e7eb 78%);
}

.response-track span[b-8trniuyhk2] {
    position: absolute;
    top: -3px;
    left: 43%;
    width: 11px;
    height: 11px;
    border: 2px solid var(--card-bg);
    border-radius: 50%;
    background: #059669;
}

.response-track i[b-8trniuyhk2] {
    display: none;
}

.conversion-track[b-8trniuyhk2] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
}

.conversion-track span[b-8trniuyhk2],
.conversion-track i[b-8trniuyhk2],
.conversion-track b[b-8trniuyhk2] {
    display: block;
    height: 6px;
    border-radius: 6px;
    background: #fda4af;
}

.conversion-track span[b-8trniuyhk2] {
    width: 33%;
    background: #fb7185;
}

.conversion-track i[b-8trniuyhk2] {
    width: 27%;
    background: #fb7185;
    opacity: .7;
}

.conversion-track b[b-8trniuyhk2] {
    width: 18%;
    background: #fb7185;
    opacity: .35;
}

.metric-hover-detail[b-8trniuyhk2] {
    position: absolute;
    right: 13px;
    bottom: 13px;
    left: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 9px;
    border: 1px solid rgba(20, 184, 166, .18);
    border-radius: 8px;
    color: var(--dashboard-text);
    background: color-mix(in srgb, var(--dashboard-panel) 94%, transparent);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .1);
    font-size: 9px;
    font-weight: 650;
    line-height: 1.25;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease;
}

.metric-hover-detail i[b-8trniuyhk2] {
    color: var(--color-primary-light);
}

.metric-card:hover .metric-hover-detail[b-8trniuyhk2],
.metric-card:focus .metric-hover-detail[b-8trniuyhk2] {
    opacity: 1;
    transform: translateY(0);
}

.dashboard-main-grid[b-8trniuyhk2] {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(292px, .9fr);
    gap: 16px;
    margin-bottom: 16px;
}

.dashboard-secondary-grid[b-8trniuyhk2] {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(292px, .9fr);
    gap: 16px;
    margin-bottom: 16px;
}

.dashboard-bottom-grid[b-8trniuyhk2] {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr);
    gap: 16px;
}

.dashboard-panel[b-8trniuyhk2] {
    min-width: 0;
    padding: 21px;
    border-radius: 17px;
}

.panel-heading[b-8trniuyhk2] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.compact-heading[b-8trniuyhk2] {
    align-items: center;
}

.panel-heading h2[b-8trniuyhk2] {
    font-size: 15px;
    font-weight: 750;
}

.panel-heading p[b-8trniuyhk2] {
    margin-top: 5px;
    font-size: 11px;
}

.panel-title-row[b-8trniuyhk2] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.soft-badge[b-8trniuyhk2] {
    padding: 3px 7px;
    border-radius: 6px;
    color: #0f766e;
    background: rgba(20, 184, 166, .1);
    font-size: 9px;
    font-weight: 800;
}

.chart-toggle[b-8trniuyhk2] {
    display: flex;
    padding: 3px;
    border-radius: 9px;
    background: rgba(148, 163, 184, .11);
}

.chart-toggle button[b-8trniuyhk2] {
    padding: 6px 9px;
    border: 0;
    border-radius: 7px;
    color: var(--dashboard-muted);
    background: transparent;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.chart-toggle button.active[b-8trniuyhk2] {
    color: var(--dashboard-text);
    background: var(--dashboard-panel);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .1);
}

.chart-summary[b-8trniuyhk2] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}

.chart-summary > strong[b-8trniuyhk2] {
    color: var(--dashboard-text);
    font-size: 25px;
    letter-spacing: -.04em;
}

.chart-summary .positive[b-8trniuyhk2] {
    font-size: 10px;
}

.selected-point[b-8trniuyhk2] {
    margin-left: auto;
    color: var(--dashboard-muted);
    font-size: 10px;
}

.selected-point i[b-8trniuyhk2] {
    color: var(--color-primary-light);
}

.selected-day-detail[b-8trniuyhk2] {
    display: grid;
    grid-template-columns: 1.3fr repeat(3, 1fr);
    gap: 8px;
    margin-top: 13px;
    padding: 9px;
    border: 1px solid rgba(20, 184, 166, .13);
    border-radius: 10px;
    background: rgba(20, 184, 166, .035);
}

.selected-day-detail > div[b-8trniuyhk2] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.selected-day-detail span[b-8trniuyhk2] {
    color: var(--dashboard-muted);
    font-size: 9px;
}

.selected-day-detail span i[b-8trniuyhk2] {
    margin-right: 3px;
    color: var(--color-primary-light);
}

.selected-day-detail strong[b-8trniuyhk2] {
    overflow: hidden;
    color: var(--dashboard-text);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-chart-wrap[b-8trniuyhk2] {
    position: relative;
    height: 243px;
    margin-top: 6px;
    padding-bottom: 19px;
}

.line-chart[b-8trniuyhk2] {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chart-grid-line[b-8trniuyhk2] {
    stroke: rgba(148, 163, 184, .19);
    stroke-dasharray: 3 5;
}

.chart-area[b-8trniuyhk2] {
    fill: url(#dashboardChartFill);
}

.chart-line[b-8trniuyhk2] {
    fill: none;
    stroke: #14b8a6;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart-point[b-8trniuyhk2] {
    fill: var(--dashboard-panel);
    stroke: #14b8a6;
    stroke-width: 2.5;
    pointer-events: none;
    transition: r .15s ease;
}

.chart-point.selected[b-8trniuyhk2] {
    fill: #14b8a6;
    stroke: var(--dashboard-panel);
    stroke-width: 3;
}

.chart-hit-area[b-8trniuyhk2] {
    fill: transparent;
    cursor: pointer;
}

.chart-x-labels[b-8trniuyhk2] {
    position: absolute;
    right: 3.8%;
    bottom: 0;
    left: 6%;
    display: flex;
    justify-content: space-between;
    gap: 5px;
    color: var(--dashboard-muted);
    font-size: 10px;
    font-weight: 600;
}

.chart-x-labels span[b-8trniuyhk2] {
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-hint[b-8trniuyhk2] {
    margin: -1px 0 0;
    color: var(--dashboard-muted);
    font-size: 10px;
}

.chart-hint i[b-8trniuyhk2] {
    margin-right: 4px;
    color: var(--color-primary-light);
}

.line-chart.conversations .chart-area[b-8trniuyhk2] {
    fill: url(#conversationChartFill);
}

.line-chart.conversations .chart-line[b-8trniuyhk2] {
    stroke: #8b5cf6;
}

.line-chart.conversations .chart-point[b-8trniuyhk2] {
    stroke: #8b5cf6;
}

.line-chart.conversations .chart-point.selected[b-8trniuyhk2] {
    fill: #8b5cf6;
}

.line-chart.conversions .chart-area[b-8trniuyhk2] {
    fill: url(#conversionChartFill);
}

.line-chart.conversions .chart-line[b-8trniuyhk2] {
    stroke: #f59e0b;
}

.line-chart.conversions .chart-point[b-8trniuyhk2] {
    stroke: #f59e0b;
}

.line-chart.conversions .chart-point.selected[b-8trniuyhk2] {
    fill: #f59e0b;
}

.icon-button[b-8trniuyhk2] {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    color: var(--dashboard-muted);
    background: transparent;
    font-size: 17px;
    cursor: pointer;
}

.icon-button:hover[b-8trniuyhk2] {
    color: var(--color-primary-light);
    background: rgba(20, 184, 166, .1);
}

.quota-panel[b-8trniuyhk2] {
    display: flex;
    flex-direction: column;
}

.quota-visual[b-8trniuyhk2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 23px;
    flex: 1;
    min-height: 180px;
}

.quota-ring[b-8trniuyhk2] {
    display: grid;
    width: 119px;
    height: 119px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(#14b8a6 calc(var(--quota-progress) * 1%), rgba(148, 163, 184, .14) 0);
}

.quota-ring[b-8trniuyhk2]::before {
    grid-area: 1 / 1;
    width: 96px;
    height: 96px;
    border-radius: inherit;
    background: var(--dashboard-panel);
    content: "";
}

.quota-ring div[b-8trniuyhk2] {
    z-index: 1;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quota-ring strong[b-8trniuyhk2] {
    font-size: 23px;
    letter-spacing: -.06em;
}

.quota-ring span[b-8trniuyhk2] {
    margin-top: -2px;
    color: var(--dashboard-muted);
    font-size: 10px;
}

.quota-copy[b-8trniuyhk2] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.quota-copy strong[b-8trniuyhk2] {
    font-size: 18px;
    letter-spacing: -.04em;
}

.quota-copy span[b-8trniuyhk2] {
    max-width: 95px;
    color: var(--dashboard-muted);
    font-size: 11px;
    line-height: 1.4;
}

.quota-status[b-8trniuyhk2] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--dashboard-muted);
    font-size: 10px;
}

.quota-status span[b-8trniuyhk2] {
    color: #059669;
}

.quota-status strong[b-8trniuyhk2] {
    color: var(--dashboard-text);
}

.quota-bar[b-8trniuyhk2] {
    margin: 10px 0 13px;
}

.quota-bar span[b-8trniuyhk2] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #14b8a6;
}

.plan-donut-section[b-8trniuyhk2] {
    display: flex;
    align-items: center;
    gap: 13px;
}

.plan-donut[b-8trniuyhk2] {
    position: relative;
    display: grid;
    width: 130px;
    height: 130px;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: transform .2s ease;
}

.plan-donut:hover[b-8trniuyhk2],
.plan-donut.is-selected[b-8trniuyhk2] {
    transform: scale(1.045);
}

.plan-donut svg[b-8trniuyhk2] {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.donut-track[b-8trniuyhk2],
.donut-used[b-8trniuyhk2] {
    fill: none;
    stroke-width: 15;
}

.donut-track[b-8trniuyhk2] {
    stroke: rgba(148, 163, 184, .18);
}

.donut-used[b-8trniuyhk2] {
    stroke: #14b8a6;
    stroke-linecap: round;
    filter: drop-shadow(0 3px 5px rgba(20, 184, 166, .3));
    transition: stroke-dasharray .35s ease;
}

.donut-center[b-8trniuyhk2] {
    z-index: 1;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.donut-center strong[b-8trniuyhk2] {
    color: var(--dashboard-text);
    font-size: 24px;
    letter-spacing: -.06em;
}

.donut-center small[b-8trniuyhk2] {
    margin-top: -2px;
    color: var(--dashboard-muted);
    font-size: 10px;
}

.donut-legend[b-8trniuyhk2] {
    display: grid;
    gap: 6px;
}

.donut-legend button[b-8trniuyhk2] {
    display: grid;
    grid-template-columns: 8px auto auto;
    align-items: center;
    gap: 6px;
    padding: 4px 5px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--dashboard-muted);
    background: transparent;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
    text-align: left;
}

.donut-legend button:hover[b-8trniuyhk2],
.donut-legend button.active[b-8trniuyhk2] {
    border-color: rgba(20, 184, 166, .2);
    color: var(--dashboard-text);
    background: rgba(20, 184, 166, .06);
}

.donut-legend strong[b-8trniuyhk2] {
    font-size: 10px;
}

.legend-dot[b-8trniuyhk2] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-dot.used[b-8trniuyhk2] {
    background: #14b8a6;
}

.legend-dot.remaining[b-8trniuyhk2] {
    background: rgba(148, 163, 184, .4);
}

.quota-copy strong[b-8trniuyhk2] {
    font-size: 14px;
    line-height: 1.25;
}

.quota-copy span[b-8trniuyhk2] {
    max-width: 126px;
}

.text-action[b-8trniuyhk2],
.text-button[b-8trniuyhk2] {
    color: var(--color-primary-light);
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.text-action:hover[b-8trniuyhk2] {
    color: var(--link-hover);
}

.text-action i[b-8trniuyhk2] {
    margin-left: 3px;
}

.text-button[b-8trniuyhk2] {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.status-chip[b-8trniuyhk2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    border: 1px solid rgba(16, 185, 129, .2);
    border-radius: 12px;
    color: #059669;
    background: rgba(16, 185, 129, .08);
    font-size: 9px;
    font-weight: 750;
}

.status-chip span[b-8trniuyhk2] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #10b981;
}

.campaign-table[b-8trniuyhk2] {
    margin-top: 17px;
}

.campaign-row[b-8trniuyhk2] {
    display: grid;
    grid-template-columns: minmax(190px, 1.6fr) .7fr .9fr .55fr;
    align-items: center;
    gap: 14px;
    min-height: 53px;
    border-top: 1px solid var(--dashboard-border);
}

.campaign-row-header[b-8trniuyhk2] {
    min-height: 29px;
    border-top: 0;
    color: var(--dashboard-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.campaign-name[b-8trniuyhk2] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.campaign-name > span:last-child[b-8trniuyhk2] {
    min-width: 0;
}

.campaign-name strong[b-8trniuyhk2] {
    display: block;
    overflow: hidden;
    color: var(--dashboard-text);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-name small[b-8trniuyhk2] {
    display: block;
    margin-top: 2px;
    color: var(--dashboard-muted);
    font-size: 9px;
}

.campaign-color[b-8trniuyhk2] {
    display: inline-grid;
    width: 29px;
    height: 29px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 8px;
}

.campaign-mint[b-8trniuyhk2] {
    color: #0f766e;
    background: rgba(20, 184, 166, .13);
}

.campaign-blue[b-8trniuyhk2] {
    color: #2563eb;
    background: rgba(59, 130, 246, .13);
}

.campaign-violet[b-8trniuyhk2] {
    color: #7c3aed;
    background: rgba(139, 92, 246, .13);
}

.campaign-number[b-8trniuyhk2] {
    color: var(--dashboard-text);
    font-size: 11px;
    font-weight: 650;
}

.delivery-cell[b-8trniuyhk2] {
    color: var(--dashboard-text);
    font-size: 10px;
}

.delivery-cell strong[b-8trniuyhk2] {
    display: block;
    font-size: 11px;
}

.delivery-cell > span[b-8trniuyhk2] {
    display: block;
    width: 100%;
    height: 4px;
    margin-top: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(148, 163, 184, .15);
}

.delivery-cell i[b-8trniuyhk2] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #14b8a6;
}

.reply-rate[b-8trniuyhk2] {
    color: #059669;
    font-size: 11px;
    font-weight: 750;
}

.growth-total[b-8trniuyhk2] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 27px 0 21px;
}

.growth-total strong[b-8trniuyhk2] {
    font-size: 27px;
    letter-spacing: -.05em;
}

.growth-total span[b-8trniuyhk2] {
    color: var(--dashboard-muted);
    font-size: 10px;
}

.source-list[b-8trniuyhk2] {
    display: grid;
    gap: 16px;
}

.source-row[b-8trniuyhk2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.source-label[b-8trniuyhk2] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--dashboard-text);
    font-size: 11px;
}

.source-dot[b-8trniuyhk2] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.source-teal[b-8trniuyhk2] {
    background: #14b8a6;
}

.source-blue[b-8trniuyhk2] {
    background: #3b82f6;
}

.source-violet[b-8trniuyhk2] {
    background: #8b5cf6;
}

.source-value[b-8trniuyhk2] {
    min-width: 105px;
}

.source-value strong[b-8trniuyhk2] {
    display: block;
    color: var(--dashboard-text);
    font-size: 10px;
    text-align: right;
}

.source-value span[b-8trniuyhk2] {
    display: block;
    width: 100%;
    height: 4px;
    margin-top: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(148, 163, 184, .15);
}

.source-value i[b-8trniuyhk2] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #14b8a6;
}

.source-row:nth-child(2) .source-value i[b-8trniuyhk2] {
    background: #3b82f6;
}

.source-row:nth-child(3) .source-value i[b-8trniuyhk2] {
    background: #8b5cf6;
}

.channel-panel .text-action[b-8trniuyhk2] {
    display: inline-block;
    margin-top: 22px;
}

.insight-charts-grid[b-8trniuyhk2] {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr);
    gap: 16px;
    max-width: 1680px;
    margin: 0 auto 16px;
}

.butterfly-selected[b-8trniuyhk2] {
    color: var(--dashboard-muted);
    font-size: 10px;
    white-space: nowrap;
}

.butterfly-selected i[b-8trniuyhk2] {
    color: var(--color-primary-light);
}

.butterfly-headings[b-8trniuyhk2] {
    display: grid;
    grid-template-columns: 1fr 54px 1fr;
    gap: 8px;
    margin-top: 20px;
    color: var(--dashboard-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.butterfly-headings span:first-child[b-8trniuyhk2] {
    text-align: right;
}

.butterfly-headings span:nth-child(2)[b-8trniuyhk2] {
    text-align: center;
}

.butterfly-chart[b-8trniuyhk2] {
    display: grid;
    gap: 5px;
    margin-top: 9px;
}

.butterfly-row[b-8trniuyhk2] {
    display: grid;
    grid-template-columns: 1fr 54px 1fr;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 30px;
    padding: 2px 4px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
    transition: background .17s ease, border-color .17s ease, transform .17s ease;
}

.butterfly-row:hover[b-8trniuyhk2],
.butterfly-row.active[b-8trniuyhk2] {
    border-color: rgba(20, 184, 166, .18);
    background: rgba(20, 184, 166, .055);
    transform: translateX(2px);
}

.butterfly-left[b-8trniuyhk2],
.butterfly-right[b-8trniuyhk2] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.butterfly-left[b-8trniuyhk2] {
    justify-content: flex-end;
}

.butterfly-left i[b-8trniuyhk2],
.butterfly-right i[b-8trniuyhk2] {
    display: block;
    height: 10px;
    max-width: calc(100% - 28px);
    border-radius: 5px;
    transition: width .25s ease;
}

.butterfly-left i[b-8trniuyhk2] {
    background: linear-gradient(90deg, rgba(139, 92, 246, .38), #8b5cf6);
}

.butterfly-right i[b-8trniuyhk2] {
    background: linear-gradient(90deg, #14b8a6, rgba(20, 184, 166, .38));
}

.butterfly-row small[b-8trniuyhk2] {
    color: var(--dashboard-muted);
    font-size: 9px;
    font-weight: 700;
}

.butterfly-row > strong[b-8trniuyhk2] {
    color: var(--dashboard-text);
    font-size: 10px;
    text-align: center;
}

.butterfly-row.active .butterfly-left i[b-8trniuyhk2],
.butterfly-row.active .butterfly-right i[b-8trniuyhk2] {
    filter: saturate(1.35);
    box-shadow: 0 2px 7px rgba(20, 184, 166, .23);
}

.pie-chart-layout[b-8trniuyhk2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    min-height: 155px;
}

.engagement-pie[b-8trniuyhk2] {
    position: relative;
    display: grid;
    width: 128px;
    height: 128px;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34), 0 8px 22px rgba(15, 23, 42, .1);
    transition: transform .22s ease, box-shadow .22s ease;
}

.engagement-pie:hover[b-8trniuyhk2] {
    transform: rotate(8deg) scale(1.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 13px 28px rgba(15, 23, 42, .16);
}

.engagement-pie span[b-8trniuyhk2] {
    display: flex;
    z-index: 1;
    width: 65px;
    height: 65px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 50%;
    color: var(--dashboard-text);
    background: var(--dashboard-panel);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}

.engagement-pie strong[b-8trniuyhk2] {
    font-size: 16px;
    letter-spacing: -.05em;
}

.engagement-pie small[b-8trniuyhk2] {
    max-width: 55px;
    overflow: hidden;
    color: var(--dashboard-muted);
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pie-insight[b-8trniuyhk2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pie-insight strong[b-8trniuyhk2] {
    font-size: 22px;
    letter-spacing: -.05em;
}

.pie-insight span[b-8trniuyhk2] {
    max-width: 100px;
    color: var(--dashboard-muted);
    font-size: 10px;
    line-height: 1.35;
}

.pie-legend[b-8trniuyhk2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin-top: 8px;
}

.pie-legend button[b-8trniuyhk2] {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--dashboard-muted);
    background: transparent;
    font: inherit;
    font-size: 9px;
    cursor: pointer;
    text-align: left;
}

.pie-legend button:hover[b-8trniuyhk2],
.pie-legend button.active[b-8trniuyhk2] {
    border-color: rgba(20, 184, 166, .18);
    color: var(--dashboard-text);
    background: rgba(20, 184, 166, .055);
}

.pie-legend button strong[b-8trniuyhk2] {
    font-size: 9px;
}

.activity-list[b-8trniuyhk2] {
    margin-top: 12px;
}

.activity-item[b-8trniuyhk2] {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 59px;
    border-top: 1px solid var(--dashboard-border);
}

.activity-icon[b-8trniuyhk2] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 13px;
}

.activity-success[b-8trniuyhk2] {
    color: #059669;
    background: rgba(16, 185, 129, .13);
}

.activity-violet[b-8trniuyhk2] {
    color: #7c3aed;
    background: rgba(139, 92, 246, .13);
}

.activity-blue[b-8trniuyhk2] {
    color: #2563eb;
    background: rgba(59, 130, 246, .13);
}

.activity-amber[b-8trniuyhk2] {
    color: #b45309;
    background: rgba(245, 158, 11, .14);
}

.activity-pink[b-8trniuyhk2] {
    color: #db2777;
    background: rgba(236, 72, 153, .13);
}

.activity-item strong[b-8trniuyhk2] {
    display: block;
    color: var(--dashboard-text);
    font-size: 11px;
}

.activity-item p[b-8trniuyhk2] {
    overflow: hidden;
    margin: 2px 0 0;
    color: var(--dashboard-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-item time[b-8trniuyhk2] {
    color: var(--dashboard-muted);
    font-size: 9px;
    white-space: nowrap;
}

.quick-actions[b-8trniuyhk2] {
    display: grid;
    margin-top: 12px;
}

.quick-actions a[b-8trniuyhk2] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 59px;
    border-top: 1px solid var(--dashboard-border);
    color: inherit;
    text-decoration: none;
    transition: padding .17s ease;
}

.quick-actions a:hover[b-8trniuyhk2] {
    padding-left: 4px;
}

.quick-action-icon[b-8trniuyhk2] {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 14px;
}

.quick-action-teal[b-8trniuyhk2] {
    color: #0f766e;
    background: rgba(20, 184, 166, .13);
}

.quick-action-violet[b-8trniuyhk2] {
    color: #7c3aed;
    background: rgba(139, 92, 246, .13);
}

.quick-action-amber[b-8trniuyhk2] {
    color: #b45309;
    background: rgba(245, 158, 11, .14);
}

.quick-actions strong[b-8trniuyhk2] {
    display: block;
    color: var(--dashboard-text);
    font-size: 11px;
}

.quick-actions small[b-8trniuyhk2] {
    display: block;
    margin-top: 2px;
    color: var(--dashboard-muted);
    font-size: 9px;
}

.quick-actions > a > i[b-8trniuyhk2] {
    color: var(--dashboard-muted);
    font-size: 11px;
}

@keyframes dashboard-spin-b-8trniuyhk2 {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1280px) {
    .metric-grid[b-8trniuyhk2] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1120px) {
    .dashboard-main-grid[b-8trniuyhk2],
    .dashboard-secondary-grid[b-8trniuyhk2] {
        grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    }
}

@media (max-width: 820px) {
    .dashboard-shell[b-8trniuyhk2] {
        padding-bottom: 88px;
    }

    .dashboard-hero[b-8trniuyhk2] {
        align-items: flex-start;
        flex-direction: column;
    }

    .hero-actions[b-8trniuyhk2] {
        justify-content: flex-start;
    }

    .metric-grid[b-8trniuyhk2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-main-grid[b-8trniuyhk2],
    .dashboard-secondary-grid[b-8trniuyhk2],
    .insight-charts-grid[b-8trniuyhk2],
    .dashboard-bottom-grid[b-8trniuyhk2] {
        grid-template-columns: 1fr;
    }

    .quota-visual[b-8trniuyhk2] {
        min-height: 145px;
    }

    .quota-panel[b-8trniuyhk2] {
        min-height: 300px;
    }
}

@media (max-width: 560px) {
    .dashboard-shell[b-8trniuyhk2] {
        padding: 18px 13px 82px;
    }

    .metric-grid[b-8trniuyhk2] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .metric-card[b-8trniuyhk2] {
        min-height: 150px;
    }

    .dashboard-panel[b-8trniuyhk2] {
        padding: 16px;
    }

    .last-updated[b-8trniuyhk2] {
        display: none;
    }

    .chart-summary[b-8trniuyhk2] {
        flex-wrap: wrap;
    }

    .selected-point[b-8trniuyhk2] {
        width: 100%;
        margin-left: 0;
    }

    .selected-day-detail[b-8trniuyhk2] {
        grid-template-columns: repeat(2, 1fr);
    }

    .line-chart-wrap[b-8trniuyhk2] {
        height: 205px;
    }

    .chart-x-labels[b-8trniuyhk2] {
        font-size: 8px;
    }

    .campaign-row[b-8trniuyhk2] {
        grid-template-columns: minmax(130px, 1.6fr) .65fr .85fr;
        gap: 8px;
    }

    .campaign-row > :nth-child(4)[b-8trniuyhk2],
    .campaign-row-header > :nth-child(4)[b-8trniuyhk2] {
        display: none;
    }

    .source-value[b-8trniuyhk2] {
        min-width: 88px;
    }

    .activity-item[b-8trniuyhk2] {
        grid-template-columns: 29px minmax(0, 1fr);
    }

    .activity-item time[b-8trniuyhk2] {
        grid-column: 2;
        margin-top: -10px;
    }

    .activity-item p[b-8trniuyhk2] {
        white-space: normal;
    }

    .panel-heading[b-8trniuyhk2] {
        gap: 10px;
    }

    .panel-title-row[b-8trniuyhk2] {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .range-select[b-8trniuyhk2] {
        flex: 1;
    }

    .range-select select[b-8trniuyhk2] {
        width: 100%;
    }

    .butterfly-selected[b-8trniuyhk2] {
        display: none;
    }

    .butterfly-headings[b-8trniuyhk2],
    .butterfly-row[b-8trniuyhk2] {
        grid-template-columns: 1fr 37px 1fr;
        gap: 4px;
    }

    .butterfly-left[b-8trniuyhk2],
    .butterfly-right[b-8trniuyhk2] {
        gap: 3px;
    }

    .butterfly-chart small[b-8trniuyhk2] {
        font-size: 8px;
    }

    .pie-chart-layout[b-8trniuyhk2] {
        justify-content: flex-start;
    }

    .pie-legend[b-8trniuyhk2] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Authorized/eMate/EmsageAI.razor.rz.scp.css */
.emate-chat-page[b-ifh3q0vyyc] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 40px;
    gap: 30px;
}

.emate-welcome[b-ifh3q0vyyc] {
    text-align: center;
    max-width: 700px;
    margin: auto;
}

.emate-avatar[b-ifh3q0vyyc] {
    width: 90px;
    height: 90px;
    margin: auto;
    border-radius: 24px;
    background: var(--gradient-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 42px;
    box-shadow: var(--shadow-md);
}

.emate-welcome h1[b-ifh3q0vyyc] {
    margin-top: 20px;
    font-size: 42px;
}

.emate-welcome span[b-ifh3q0vyyc] {
    color: var(--color-primary-light);
}

.emate-welcome p[b-ifh3q0vyyc] {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.8;
}

.prompt-grid[b-ifh3q0vyyc] {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 20px;
}

.prompt-card[b-ifh3q0vyyc] {
    display: flex;
    gap: 18px;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 22px;
    cursor: pointer;
    transition: .3s;
}

.prompt-card:hover[b-ifh3q0vyyc] {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.prompt-card span[b-ifh3q0vyyc] {
    font-size: 28px;
}

.prompt-card h5[b-ifh3q0vyyc] {
    margin: 0;
}

.prompt-card small[b-ifh3q0vyyc] {
    color: var(--text-muted);
}

.chat-area[b-ifh3q0vyyc] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 5px;
}

.message[b-ifh3q0vyyc] {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.avatar[b-ifh3q0vyyc] {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    justify-content: center;
    align-items: center;
}

.bubble[b-ifh3q0vyyc] {
    max-width: 700px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 18px;
    border-radius: 18px;
}

.chat-input[b-ifh3q0vyyc] {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 15px;
    box-shadow: var(--shadow-sm);
}

.chat-input input[b-ifh3q0vyyc] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 15px;
}

.input-icon[b-ifh3q0vyyc],
.send-btn[b-ifh3q0vyyc] {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 14px;
    background: var(--glass-bg);
    color: var(--text-primary);
}

.send-btn[b-ifh3q0vyyc] {
    background: var(--gradient-primary);
    color: white;
}

@media (max-width: 768px) {
    .emate-chat-page[b-ifh3q0vyyc] {
        padding: 24px 16px;
        gap: 20px;
        overflow-y: auto;
    }

    .emate-welcome h1[b-ifh3q0vyyc] {
        margin-top: 16px;
        font-size: 32px;
    }

    .emate-welcome p[b-ifh3q0vyyc] {
        font-size: 14px;
        line-height: 1.6;
    }

    .prompt-grid[b-ifh3q0vyyc] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .prompt-card[b-ifh3q0vyyc] {
        padding: 16px;
    }

    .chat-input[b-ifh3q0vyyc] {
        gap: 8px;
        padding: 10px;
        border-radius: 16px;
    }

    .input-icon[b-ifh3q0vyyc],
    .send-btn[b-ifh3q0vyyc] {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 12px;
    }
}

@media (max-width: 380px) {
    .emate-avatar[b-ifh3q0vyyc] {
        width: 72px;
        height: 72px;
        font-size: 34px;
    }

    .emate-welcome h1[b-ifh3q0vyyc] {
        font-size: 27px;
    }
}
/* /Pages/Authorized/MetaAds/Accounts.razor.rz.scp.css */
.accounts-shell[b-mb4gbufxoo] {
    padding: 24px 24px 75px;
    min-height: 100vh;
    background: var(--page-bg);
}

/* Header — CHANGED: hardcoded light colors -> theme vars */
.accounts-header[b-mb4gbufxoo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto 1.5rem;
    padding: 24px;
    background: var(--card-bg);
    border-radius: 18px;
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.accounts-header h1[b-mb4gbufxoo] {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.accounts-header p[b-mb4gbufxoo] {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
}

.accounts-btn-connect[b-mb4gbufxoo] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 10px 16px;
    border: none;
    border-radius: 12px;
    background: #008080;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.accounts-btn-connect:hover[b-mb4gbufxoo] {
    background: var(--color-primary-dark);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.2);
    transform: translateY(-2px);
}

.accounts-btn-connect:active[b-mb4gbufxoo] {
    transform: translateY(0);
}

/* Permissions info bar */
.permissions-bar[b-mb4gbufxoo] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    max-width: 1400px;
    margin: 0 auto 1.5rem;
    padding: 18px 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.permissions-bar-warn[b-mb4gbufxoo] {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.06);
}

.permissions-bar-icon[b-mb4gbufxoo] {
    font-size: 1.4rem;
    line-height: 1;
}

.permissions-bar-body[b-mb4gbufxoo] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}

.permissions-bar-title[b-mb4gbufxoo] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.permissions-bar-business[b-mb4gbufxoo] {
    font-weight: 500;
    color: var(--text-muted);
}

.permissions-bar-scopes[b-mb4gbufxoo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.scope-chip[b-mb4gbufxoo] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.scope-chip-granted[b-mb4gbufxoo] {
    background: rgba(20, 184, 166, 0.12);
    color: var(--color-primary, #008080);
}

.scope-chip-missing[b-mb4gbufxoo] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

.permissions-bar-flags[b-mb4gbufxoo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.flag-chip[b-mb4gbufxoo] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.flag-chip-ok[b-mb4gbufxoo] {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.flag-chip-bad[b-mb4gbufxoo] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

/* Content */
.accounts-content[b-mb4gbufxoo] {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    min-height: 300px;
}

.accounts-section-title[b-mb4gbufxoo] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.accounts-section-header[b-mb4gbufxoo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.accounts-section-header .accounts-section-title[b-mb4gbufxoo] {
    margin: 0;
}

.accounts-btn-refresh[b-mb4gbufxoo] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.accounts-btn-refresh:hover:not(:disabled)[b-mb4gbufxoo] {
    background: rgba(20, 184, 166, 0.1);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.accounts-btn-refresh:disabled[b-mb4gbufxoo] {
    opacity: 0.6;
    cursor: not-allowed;
}

.tos-notice[b-mb4gbufxoo] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0 1.5rem 1rem;
    padding: 0.75rem 0.9rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: var(--radius-sm);
}

.tos-notice-icon[b-mb4gbufxoo] {
    font-size: 1rem;
    line-height: 1.3;
    flex-shrink: 0;
}

.tos-notice-body[b-mb4gbufxoo] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tos-notice-text[b-mb4gbufxoo] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #b45309;
}

.tos-notice-link[b-mb4gbufxoo] {
    align-self: flex-start;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}

.tos-notice-link:hover[b-mb4gbufxoo] {
    text-decoration: underline;
}

.accounts-empty-compact[b-mb4gbufxoo] {
    padding: 2rem;
}

.pages-loading-text[b-mb4gbufxoo] {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Page Card */
.page-card[b-mb4gbufxoo] {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all 0.3s ease;
}

.page-card:hover[b-mb4gbufxoo] {
    background: var(--card-bg-hover);
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(0, 128, 128, 0.12);
    transform: translateY(-4px);
}

.page-card-header[b-mb4gbufxoo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--card-border);
}

.page-card-title[b-mb4gbufxoo] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.page-card-title h3[b-mb4gbufxoo] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.page-card-category[b-mb4gbufxoo] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.page-info-btn[b-mb4gbufxoo] {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.page-info-btn:hover[b-mb4gbufxoo] {
    background: rgba(20, 184, 166, 0.1);
}

.page-card-body[b-mb4gbufxoo] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    flex: 1;
}

.page-asset-row[b-mb4gbufxoo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.asset-icon[b-mb4gbufxoo] {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.asset-info[b-mb4gbufxoo] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.asset-label[b-mb4gbufxoo] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.asset-value[b-mb4gbufxoo] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.asset-link-btn[b-mb4gbufxoo] {
    align-self: flex-start;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: rgba(20, 184, 166, 0.06);
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.asset-link-btn:hover:not(:disabled)[b-mb4gbufxoo] {
    background: rgba(20, 184, 166, 0.14);
}

.asset-link-btn:disabled[b-mb4gbufxoo] {
    opacity: 0.6;
    cursor: not-allowed;
}

.page-card-footer-warn[b-mb4gbufxoo] {
    padding: 0.75rem 1.5rem;
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
    font-size: 0.82rem;
    font-weight: 600;
    border-top: 1px solid rgba(245, 158, 11, 0.25);
}

.dialog-subtext[b-mb4gbufxoo] {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0.25rem 0 1rem;
}

.dialog-input[b-mb4gbufxoo] {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    background: var(--card-bg);
    color: var(--text-primary);
}

.dialog-error[b-mb4gbufxoo] {
    color: var(--danger-color);
    font-size: 0.85rem;
    margin: 0 0 0.75rem;
}

/* Empty State */
.accounts-empty[b-mb4gbufxoo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.06) 0%, rgba(20, 184, 166, 0.02) 100%);
    border-radius: var(--radius-md);
    border: 1px dashed var(--card-border);
}

.empty-icon[b-mb4gbufxoo] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* CHANGED: var(--text-dark) (static) -> var(--text-primary) */
.accounts-empty h2[b-mb4gbufxoo] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

/* CHANGED: #6b7686 (static hex) -> var(--text-muted) */
.accounts-empty p[b-mb4gbufxoo] {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0 0 2rem 0;
    max-width: 500px;
}

.accounts-btn-primary[b-mb4gbufxoo] {
    padding: 0.875rem 2rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
    letter-spacing: -0.3px;
}

.accounts-btn-primary:hover[b-mb4gbufxoo] {
    background: var(--color-primary-dark);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.2);
    transform: translateY(-2px);
}

.accounts-btn-primary:active[b-mb4gbufxoo] {
    transform: translateY(0);
}

/* Grid */
.accounts-grid[b-mb4gbufxoo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* Account Card */
.account-card[b-mb4gbufxoo] {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all 0.3s ease;
}

.account-card:hover[b-mb4gbufxoo] {
    background: var(--card-bg-hover);
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(0, 128, 128, 0.12);
    transform: translateY(-4px);
}

.account-card-header[b-mb4gbufxoo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    border-bottom: 1px solid var(--card-border);
}

.account-card-title[b-mb4gbufxoo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

/* CHANGED: var(--text-dark) (static) -> var(--text-primary) */
.account-card-title h3[b-mb4gbufxoo] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* CHANGED: #8a95a3 (static hex) -> var(--text-muted) */
.account-card-menu[b-mb4gbufxoo] {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.account-card-menu:hover[b-mb4gbufxoo] {
    color: var(--color-primary);
    background: rgba(20, 184, 166, 0.08);
}

.account-card-body[b-mb4gbufxoo] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    flex: 1;
}

.account-detail[b-mb4gbufxoo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* CHANGED: #8a95a3 (static hex) -> var(--text-muted) */
.detail-label[b-mb4gbufxoo] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* CHANGED: var(--text-dark) (static) -> var(--text-primary) */
.detail-value[b-mb4gbufxoo] {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
}

.account-card-footer[b-mb4gbufxoo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid var(--card-border);
}

.account-card-btn-secondary[b-mb4gbufxoo],
.account-card-btn-danger[b-mb4gbufxoo] {
    padding: 0.75rem 1rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.account-card-btn-secondary[b-mb4gbufxoo] {
    background: var(--card-bg);
    color: var(--color-primary);
    border-color: var(--card-border);
}

.account-card-btn-secondary:hover[b-mb4gbufxoo] {
    background: rgba(20, 184, 166, 0.06);
    border-color: var(--color-primary);
}

.account-card-btn-danger[b-mb4gbufxoo] {
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger-color);
    border-color: rgba(239, 68, 68, 0.25);
}

.account-card-btn-danger:hover[b-mb4gbufxoo] {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--danger-color);
}

/* Error Message */
.accounts-error[b-mb4gbufxoo] {
    padding: 1.5rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--danger-color);
}

.accounts-error p[b-mb4gbufxoo] {
    margin: 0;
    font-size: 0.95rem;
}

/* Dialog — dark console treatment, consistent with the app's modal language.
   Kept fixed (uses --modal-* vars which are already deliberately styled as
   an always-dark glass panel elsewhere in your app — matches CreateFlow's
   modal-dialog convention). No changes needed here. */
.dialog-overlay[b-mb4gbufxoo] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(2, 6, 23, 0.65);
    backdrop-filter: blur(3px);
    z-index: 999;
}

.dialog-box[b-mb4gbufxoo] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, var(--modal-bg-top) 0%, var(--modal-bg-bottom) 100%);
    border: 1px solid var(--modal-border);
    border-radius: var(--radius-md);
    box-shadow: var(--modal-shadow), var(--modal-glow);
    z-index: 1000;
    min-width: 300px;
    max-width: 500px;
    overflow: hidden;
    animation: slideIn-b-mb4gbufxoo 0.3s ease;
}

@keyframes slideIn-b-mb4gbufxoo {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.dialog-header[b-mb4gbufxoo] {
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid var(--modal-border);
}

.dialog-header h2[b-mb4gbufxoo] {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--modal-text);
    margin: 0;
}

.dialog-body[b-mb4gbufxoo] {
    padding: 1.5rem 1.75rem;
}

.dialog-body p[b-mb4gbufxoo] {
    font-size: 0.92rem;
    color: var(--modal-text-secondary);
    margin: 0;
    line-height: 1.6;
}

.dialog-body p strong[b-mb4gbufxoo] {
    color: var(--modal-text);
}

.dialog-footer[b-mb4gbufxoo] {
    display: flex;
    gap: 0.75rem;
    padding: 1.5rem 1.75rem;
    border-top: 1px solid var(--modal-border);
}

.dialog-btn-secondary[b-mb4gbufxoo],
.dialog-btn-danger[b-mb4gbufxoo] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dialog-btn-secondary[b-mb4gbufxoo] {
    background: var(--modal-input-bg);
    color: var(--modal-text-secondary);
    border: 1px solid var(--modal-border);
}

.dialog-btn-secondary:hover:not(:disabled)[b-mb4gbufxoo] {
    background: var(--modal-input-bg-focus);
    border-color: var(--color-primary-light);
    color: var(--modal-text);
}

.dialog-btn-danger[b-mb4gbufxoo] {
    background: linear-gradient(135deg, #ff5f56 0%, #d63b32 100%);
    color: white;
    box-shadow: 0 10px 25px rgba(255, 95, 86, 0.25);
}

.dialog-btn-danger:hover:not(:disabled)[b-mb4gbufxoo] {
    box-shadow: 0 12px 30px rgba(255, 95, 86, 0.4);
    transform: translateY(-1px);
}

.dialog-btn-danger:disabled[b-mb4gbufxoo] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.dialog-btn-primary[b-mb4gbufxoo] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--color-primary, #008080);
    color: white;
    box-shadow: 0 10px 25px rgba(0, 128, 128, 0.25);
}

.dialog-btn-primary:hover:not(:disabled)[b-mb4gbufxoo] {
    background: var(--color-primary-dark);
    box-shadow: 0 12px 30px rgba(0, 128, 128, 0.35);
    transform: translateY(-1px);
}

.dialog-btn-primary:disabled[b-mb4gbufxoo] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.dialog-body .dialog-input[b-mb4gbufxoo] {
    margin-top: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .accounts-shell[b-mb4gbufxoo] {
        padding: 1rem;
        gap: 1.5rem;
    }

    .accounts-header[b-mb4gbufxoo] {
        flex-direction: column;
        align-items: stretch;
    }

    .accounts-btn-connect[b-mb4gbufxoo] {
        width: 100%;
    }

    .accounts-grid[b-mb4gbufxoo] {
        grid-template-columns: 1fr;
    }

    .account-detail[b-mb4gbufxoo] {
        flex-direction: column;
        align-items: flex-start;
    }

    .detail-value[b-mb4gbufxoo] {
        text-align: left;
    }

    .dialog-box[b-mb4gbufxoo] {
        max-width: calc(100% - 2rem);
    }
}
/* /Pages/Authorized/MetaAds/AdRuleSets.razor.rz.scp.css */
.rules-page[b-ag8eb60fx5] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

/* ══ Header Block ══════════════════════════════════════════════════════════ */
.rules-header-block[b-ag8eb60fx5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto 1.5rem;
    padding: 24px;
    background: var(--card-bg);
    border-radius: 18px;
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.rules-header-block > div[b-ag8eb60fx5] {
    flex: 1;
}

.rules-title[b-ag8eb60fx5] {
    font-size: 1.875rem;
    font-weight: 700;
    margin: 0 0 0.375rem;
    color: var(--text-primary);
}

.rules-subtitle[b-ag8eb60fx5] {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0;
}

.rules-btn-primary[b-ag8eb60fx5] {
    padding: 0.625rem 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.rules-btn-primary:hover[b-ag8eb60fx5] {
    box-shadow: 0 4px 12px rgba(0, 128, 128, 0.3);
    transform: translateY(-1px);
}

/* ══ Selector Block ════════════════════════════════════════════════════════ */
.rules-selector-block[b-ag8eb60fx5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 1400px;
    margin: 0 auto 1.5rem;
    padding: 24px;
    background: var(--card-bg);
    border-radius: 18px;
    border: 1px solid var(--card-border);
}

.rules-selector-label[b-ag8eb60fx5] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ══ Loading & Empty States ════════════════════════════════════════════════ */
.rules-loading-state[b-ag8eb60fx5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    font-size: 0.9375rem;
    color: var(--text-muted);
    padding: 3rem;
    min-height: 300px;
}

.rules-empty-state[b-ag8eb60fx5] {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1400px;
    margin: 0 auto 1.5rem;
    padding: 24px;
    background: var(--card-bg);
    border-radius: 18px;
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.empty-title[b-ag8eb60fx5] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.empty-subtitle[b-ag8eb60fx5] {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}

.spinner[b-ag8eb60fx5] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-ag8eb60fx5 0.6s linear infinite;
}

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

/* ══ Rules Grid ════════════════════════════════════════════════════════════ */
.rules-grid[b-ag8eb60fx5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.rule-card[b-ag8eb60fx5] {
    background: var(--card-bg);
    border: 1.5px solid var(--card-border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: all 0.2s;
}

.rule-card:hover[b-ag8eb60fx5] {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(0, 128, 128, 0.18);
}

.rule-card-header[b-ag8eb60fx5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.rule-card-title-block[b-ag8eb60fx5] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.rule-card-title[b-ag8eb60fx5] {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.rule-card-meta[b-ag8eb60fx5] {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 500;
}

.rule-card-status[b-ag8eb60fx5] {
    padding: 0.375rem 0.875rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rule-card-status.active[b-ag8eb60fx5] {
    background-color: #10b981;
}

.rule-card-status.inactive[b-ag8eb60fx5] {
    background-color: #6b7280;
}

.rule-card-status.paused[b-ag8eb60fx5] {
    background-color: #f59e0b;
}

.rule-card-body[b-ag8eb60fx5] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.rule-card-row[b-ag8eb60fx5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rule-card-label[b-ag8eb60fx5] {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

.rule-card-value[b-ag8eb60fx5] {
    font-size: 0.9375rem;
    color: var(--text-primary);
    font-weight: 600;
}

.rule-card-footer[b-ag8eb60fx5] {
    display: flex;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1.5px solid var(--card-border);
}

.rule-card-action[b-ag8eb60fx5] {
    flex: 1;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--color-primary-light);
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.rule-card-action:hover[b-ag8eb60fx5] {
    background: rgba(20, 184, 166, 0.1);
    border-color: var(--color-primary);
}

.rule-card-action.delete[b-ag8eb60fx5] {
    color: #f87171;
    border-color: rgba(220, 38, 38, 0.35);
}

.rule-card-action.delete:hover[b-ag8eb60fx5] {
    background: rgba(220, 38, 38, 0.15);
    border-color: #dc2626;
}

/* ══ Modal ═════════════════════════════════════════════════════════════════ */
.modal-overlay[b-ag8eb60fx5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-panel[b-ag8eb60fx5] {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-ag8eb60fx5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1.5px solid var(--card-border);
}

.modal-header h2[b-ag8eb60fx5] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.modal-close-btn[b-ag8eb60fx5] {
    background: transparent;
    border: none;
    font-size: 1.75rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.modal-close-btn:hover[b-ag8eb60fx5] {
    color: var(--text-primary);
    background: var(--color-surface-alt);
    border-radius: 8px;
}

.modal-body[b-ag8eb60fx5] {
    padding: 1.5rem;
}

/* ══ Responsive ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .rules-page[b-ag8eb60fx5] {
        padding: 1rem;
    }

    .rules-header-block[b-ag8eb60fx5] {
        flex-direction: column;
        gap: 1rem;
    }

    .rules-title[b-ag8eb60fx5] {
        font-size: 1.5rem;
    }

    .rules-grid[b-ag8eb60fx5] {
        grid-template-columns: 1fr;
    }

    .modal-panel[b-ag8eb60fx5] {
        width: 95%;
        max-height: 95vh;
    }
}
/* /Pages/Authorized/MetaAds/Audiences/AudienceDetail.razor.rz.scp.css */
.audience-detail-page[b-pyzg4bvn44] {
    padding: 24px 24px 75px;
    min-height: 100vh;
    width: 100%;
    max-width: none;
    margin: 0;
    background: var(--page-bg);
}

.audience-detail-page > *[b-pyzg4bvn44] {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.header-actions[b-pyzg4bvn44] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.not-found[b-pyzg4bvn44] {
    padding: 3rem;
    text-align: center;
    color: var(--text-muted);
}

.detail-header[b-pyzg4bvn44] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.detail-header h1[b-pyzg4bvn44] {
    margin: 0.5rem 0 0;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
}

.subtitle[b-pyzg4bvn44] {
    color: var(--text-muted);
    font-size: 14px;
    margin-top: 0.25rem;
}

.audience-type-badge[b-pyzg4bvn44] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

.type-custom[b-pyzg4bvn44] { background: rgba(0, 128, 128, 0.12); color: #008080; }
.type-lookalike[b-pyzg4bvn44] { background: rgba(99, 102, 241, 0.12); color: #6366f1; }

.btn-ghost[b-pyzg4bvn44] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--text-primary);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.stats-row[b-pyzg4bvn44] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-pyzg4bvn44] {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.stat-label[b-pyzg4bvn44] {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

.stat-value[b-pyzg4bvn44] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.manage-users-section[b-pyzg4bvn44] {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 1.5rem;
}

.manage-users-section h2[b-pyzg4bvn44] {
    margin: 0 0 0.3rem;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.hint-text[b-pyzg4bvn44] {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 1rem;
}

.manage-mode-tabs[b-pyzg4bvn44] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.mode-tab[b-pyzg4bvn44] {
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--text-muted);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.mode-tab.active[b-pyzg4bvn44] {
    background: #008080;
    border-color: #008080;
    color: #fff;
}

.form-group[b-pyzg4bvn44] { margin-bottom: 1rem; }

.field-error[b-pyzg4bvn44] {
    font-size: 12px;
    color: #c0392b;
    margin: 0.3rem 0 0;
}

.form-error-banner[b-pyzg4bvn44] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(192, 57, 43, 0.08);
    color: #c0392b;
    border: 1px solid rgba(192, 57, 43, 0.3);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 1rem;
}

.form-result-banner[b-pyzg4bvn44] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(20, 108, 46, 0.08);
    color: #146c2e;
    border: 1px solid rgba(20, 108, 46, 0.3);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 1rem;
}

.import-summary-banner[b-pyzg4bvn44] {
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 1rem;
    border: 1px solid rgba(0, 128, 128, 0.3);
    background: rgba(0, 128, 128, 0.08);
    color: #0b6e6e;
}

.import-summary-banner.has-warnings[b-pyzg4bvn44] {
    border-color: rgba(230, 162, 60, 0.4);
    background: rgba(230, 162, 60, 0.1);
    color: #8a5a00;
}

.import-summary-banner p[b-pyzg4bvn44] {
    margin: 0 0 4px;
}

.import-summary-banner summary[b-pyzg4bvn44] {
    cursor: pointer;
    font-weight: 600;
}

.skipped-rows-list[b-pyzg4bvn44] {
    max-height: 200px;
    overflow-y: auto;
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 12px;
}


.form-actions[b-pyzg4bvn44] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.btn-primary[b-pyzg4bvn44] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    background: #008080;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary:disabled[b-pyzg4bvn44] { opacity: 0.6; cursor: not-allowed; }

.btn-spinner[b-pyzg4bvn44] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-pyzg4bvn44 0.7s linear infinite;
}

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

.form-label[b-pyzg4bvn44] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.form-input[b-pyzg4bvn44], .form-select[b-pyzg4bvn44] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--page-bg);
    color: var(--text-primary);
    font-size: 14px;
}

.btn-secondary[b-pyzg4bvn44] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--text-primary);
    border-radius: 10px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.option-toggle[b-pyzg4bvn44] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.option-card[b-pyzg4bvn44] {
    text-align: left;
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 16px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.option-card i[b-pyzg4bvn44] {
    font-size: 1.5rem;
    color: #008080;
}

.option-card h3[b-pyzg4bvn44] {
    margin: 0.5rem 0 0.25rem;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.option-card p[b-pyzg4bvn44] {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.option-card.selected[b-pyzg4bvn44] {
    border-color: #008080;
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.15);
}

.mapping-grid[b-pyzg4bvn44] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.mapping-row[b-pyzg4bvn44] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.mapping-field-name[b-pyzg4bvn44] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.selectable-list[b-pyzg4bvn44] {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 8px;
    background: var(--card-bg);
}

.selectable-row[b-pyzg4bvn44] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-bottom: 1px solid var(--card-border);
    cursor: pointer;
    font-size: 14px;
}

.selectable-row:last-child[b-pyzg4bvn44] {
    border-bottom: none;
}

.selectable-row small[b-pyzg4bvn44] {
    color: var(--text-muted);
}

.tag-pill[b-pyzg4bvn44] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: color-mix(in srgb, var(--tag-color, #008080) 15%, transparent);
    color: var(--tag-color, #008080);
}

.api-request-row[b-pyzg4bvn44] {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.api-method-select[b-pyzg4bvn44] {
    flex: 0 0 110px;
}

.api-url-input[b-pyzg4bvn44] {
    flex: 1 1 auto;
    min-width: 0;
}

.api-response-tree[b-pyzg4bvn44] {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 8px;
    background: var(--card-bg);
}

.api-section-toggle[b-pyzg4bvn44] {
    margin: 8px 0 12px;
}

.api-section-toggle .btn-secondary[b-pyzg4bvn44] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.api-header-row[b-pyzg4bvn44] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}

.api-header-row .form-input[b-pyzg4bvn44] {
    flex: 1 1 140px;
}

.api-header-key[b-pyzg4bvn44],
.api-header-value[b-pyzg4bvn44] {
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: 'Quicksand', sans-serif;
    font-size: 12px;
    background: var(--page-bg);
    color: var(--text-primary);
    border-radius: 4px;
    padding: 4px 8px;
}

.btn-icon[b-pyzg4bvn44] {
    flex: 0 0 auto;
    min-height: 38px;
    min-width: 38px;
    padding: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
}

.form-textarea[b-pyzg4bvn44] {
    width: 100%;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    background: var(--card-bg);
    color: var(--text-primary);
    resize: vertical;
}

.modal-overlay[b-pyzg4bvn44] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.modal-content.preview-modal[b-pyzg4bvn44] {
    background: var(--card-bg);
    border-radius: 16px;
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header[b-pyzg4bvn44] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--card-border);
}

.modal-header h2[b-pyzg4bvn44] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-body[b-pyzg4bvn44] {
    padding: 18px 24px 24px;
    overflow-y: auto;
}

.preview-grid-wrapper[b-pyzg4bvn44] {
    overflow: auto;
    max-height: 60vh;
    border: 1px solid var(--card-border);
    border-radius: 8px;
}

.preview-grid[b-pyzg4bvn44] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.preview-grid th[b-pyzg4bvn44],
.preview-grid td[b-pyzg4bvn44] {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--card-border);
    white-space: nowrap;
}

.preview-grid th[b-pyzg4bvn44] {
    background: var(--page-bg);
    font-weight: 600;
    color: var(--text-muted);
    position: sticky;
    top: 0;
}

.preview-grid tbody tr:hover[b-pyzg4bvn44] {
    background: var(--page-bg);
}

.danger-zone[b-pyzg4bvn44] {
    border: 1px solid rgba(192, 57, 43, 0.3);
    border-radius: 16px;
    padding: 20px 24px;
    background: rgba(192, 57, 43, 0.04);
}

.danger-zone h2[b-pyzg4bvn44] {
    margin: 0 0 0.75rem;
    font-size: 16px;
    font-weight: 700;
    color: #c0392b;
}

.btn-danger[b-pyzg4bvn44] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 9px 16px;
    border: 1px solid #c0392b;
    border-radius: 10px;
    background: transparent;
    color: #c0392b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.btn-danger:hover[b-pyzg4bvn44] {
    background: rgba(192, 57, 43, 0.1);
}

@media (max-width: 768px) {
    .audience-detail-page[b-pyzg4bvn44] { padding: 16px 16px 48px; }
    .detail-header[b-pyzg4bvn44] { flex-direction: column; gap: 1rem; padding: 20px; align-items: flex-start; }
    .detail-header h1[b-pyzg4bvn44] { font-size: 1.5rem; }
    .stats-row[b-pyzg4bvn44] { grid-template-columns: 1fr; }
    .manage-users-section[b-pyzg4bvn44] { padding: 20px; }
    .manage-mode-tabs[b-pyzg4bvn44] { flex-wrap: wrap; }
    .form-actions[b-pyzg4bvn44] { align-items: stretch; flex-direction: column; }
}
/* /Pages/Authorized/MetaAds/Audiences/AudienceList.razor.rz.scp.css */
.audiences-page[b-lr7d81bqyw] {
    padding: 24px 24px 75px;
    min-height: 100vh;
    background: var(--page-bg);
    max-width: none;
    margin: 0;
}

.audiences-header[b-lr7d81bqyw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: var(--card-bg);
    border-radius: 18px;
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    max-width: 1400px;
    margin: 0 auto 1.5rem;
}

.audiences-title[b-lr7d81bqyw] {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.audiences-subtitle[b-lr7d81bqyw] {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
}

.audiences-btn-primary[b-lr7d81bqyw] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 10px 16px;
    border: none;
    border-radius: 12px;
    background: #008080;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.audiences-btn-primary:hover[b-lr7d81bqyw] {
    background: var(--color-primary-dark);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.2);
    transform: translateY(-2px);
}

.audiences-toolbar[b-lr7d81bqyw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    max-width: 1400px;
    margin: 0 auto 1.5rem;
}

.audiences-account-picker[b-lr7d81bqyw],
.audiences-search[b-lr7d81bqyw] {
    padding: 20px 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    min-width: min(100%, 320px);
}

.audiences-account-picker label[b-lr7d81bqyw] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.audiences-search[b-lr7d81bqyw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 10px;
    padding: 8px 12px;
    min-width: 260px;
}

.audiences-search input[b-lr7d81bqyw] {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    color: var(--text-primary);
}

.audiences-empty[b-lr7d81bqyw] {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-muted);
    background: var(--card-bg);
    border: 1px dashed var(--card-border);
    border-radius: 18px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.audiences-empty i[b-lr7d81bqyw] {
    font-size: 2.5rem;
    color: var(--text-muted);
}

.audiences-grid[b-lr7d81bqyw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.audience-card[b-lr7d81bqyw] {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.audience-card:hover[b-lr7d81bqyw] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.audience-card-top[b-lr7d81bqyw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.audience-type-badge[b-lr7d81bqyw] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

.type-custom[b-lr7d81bqyw] {
    background: rgba(0, 128, 128, 0.12);
    color: #008080;
}

.type-lookalike[b-lr7d81bqyw] {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.audience-status-badge[b-lr7d81bqyw] {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

.status-ready[b-lr7d81bqyw] { background: #d1f7d6; color: #146c2e; }
.status-processing[b-lr7d81bqyw] { background: #fff3cd; color: #8a6400; }

.audience-card-name[b-lr7d81bqyw] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.audience-card-desc[b-lr7d81bqyw] {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.audience-card-stats[b-lr7d81bqyw] {
    display: flex;
    gap: 1rem;
    font-size: 12px;
    color: var(--text-muted);
}

.audience-card-actions[b-lr7d81bqyw] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.audiences-btn-ghost[b-lr7d81bqyw] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--text-primary);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.audiences-btn-ghost:hover[b-lr7d81bqyw] {
    background: var(--page-bg);
}

.audiences-btn-danger[b-lr7d81bqyw] {
    color: #c0392b;
    border-color: rgba(192, 57, 43, 0.3);
}

@media (max-width: 768px) {
    .audiences-page[b-lr7d81bqyw] { padding: 16px 16px 48px; }
    .audiences-header[b-lr7d81bqyw] { align-items: stretch; flex-direction: column; padding: 20px; }
    .audiences-title[b-lr7d81bqyw] { font-size: 1.6rem; }
    .audiences-header .audiences-btn-primary[b-lr7d81bqyw] { align-self: flex-start; }
    .audiences-toolbar[b-lr7d81bqyw] { align-items: stretch; }
    .audiences-account-picker[b-lr7d81bqyw], .audiences-search[b-lr7d81bqyw] { width: 100%; min-width: 0; }
}
/* /Pages/Authorized/MetaAds/Audiences/CreateAudience.razor.rz.scp.css */
.create-audience-page[b-7ut2zid0s7] {
    min-height: 100vh;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

.create-audience-page > *[b-7ut2zid0s7] {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.create-audience-header[b-7ut2zid0s7] {
    margin-bottom: 1.5rem;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.btn-ghost[b-7ut2zid0s7] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--text-primary);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.create-audience-header h1[b-7ut2zid0s7] {
    margin: 0.5rem 0 0;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
}

.subtitle[b-7ut2zid0s7] {
    color: var(--text-muted);
    margin: 0.25rem 0 0;
    font-size: 14px;
}

.account-picker[b-7ut2zid0s7] {
    margin-bottom: 1.5rem;
    padding: 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.account-picker label[b-7ut2zid0s7] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.option-toggle[b-7ut2zid0s7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.option-card[b-7ut2zid0s7] {
    text-align: left;
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 16px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.option-card i[b-7ut2zid0s7] {
    font-size: 1.5rem;
    color: #008080;
}

.option-card h3[b-7ut2zid0s7] {
    margin: 0.5rem 0 0.25rem;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.option-card p[b-7ut2zid0s7] {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.option-card.selected[b-7ut2zid0s7] {
    border-color: #008080;
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.15);
}

.form-error-banner[b-7ut2zid0s7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(192, 57, 43, 0.08);
    color: #c0392b;
    border: 1px solid rgba(192, 57, 43, 0.3);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 1rem;
}

.import-summary-banner[b-7ut2zid0s7] {
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 1rem;
    border: 1px solid rgba(0, 128, 128, 0.3);
    background: rgba(0, 128, 128, 0.08);
    color: #0b6e6e;
}

.import-summary-banner.has-warnings[b-7ut2zid0s7] {
    border-color: rgba(230, 162, 60, 0.4);
    background: rgba(230, 162, 60, 0.1);
    color: #8a5a00;
}

.import-summary-banner p[b-7ut2zid0s7] {
    margin: 0 0 4px;
}

.import-summary-banner summary[b-7ut2zid0s7] {
    cursor: pointer;
    font-weight: 600;
}

.skipped-rows-list[b-7ut2zid0s7] {
    max-height: 200px;
    overflow-y: auto;
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 12px;
}

.form-section[b-7ut2zid0s7] {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.form-group[b-7ut2zid0s7] {
    margin-bottom: 1.25rem;
}

.form-label[b-7ut2zid0s7] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.required-mark[b-7ut2zid0s7] { color: #c0392b; }

.form-input[b-7ut2zid0s7], .form-select[b-7ut2zid0s7] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--page-bg);
    color: var(--text-primary);
    font-size: 14px;
}

.hint-text[b-7ut2zid0s7] {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0.3rem 0 0;
}

.field-error[b-7ut2zid0s7] {
    font-size: 12px;
    color: #c0392b;
    margin: 0.3rem 0 0;
}

.mapping-grid[b-7ut2zid0s7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.mapping-row[b-7ut2zid0s7] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.mapping-field-name[b-7ut2zid0s7] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.form-actions[b-7ut2zid0s7] {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
}

.btn-primary[b-7ut2zid0s7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    background: #008080;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary:disabled[b-7ut2zid0s7] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-spinner[b-7ut2zid0s7] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-7ut2zid0s7 0.7s linear infinite;
}

@keyframes spin-b-7ut2zid0s7 {
    to { transform: rotate(360deg); }
}

.selectable-list[b-7ut2zid0s7] {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    background: var(--card-bg);
}

.selectable-row[b-7ut2zid0s7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 14px;
}

.selectable-row:last-child[b-7ut2zid0s7] {
    border-bottom: none;
}

.selectable-row small[b-7ut2zid0s7] {
    color: var(--text-muted);
}

.api-request-row[b-7ut2zid0s7] {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.api-method-select[b-7ut2zid0s7] {
    flex: 0 0 110px;
}

.api-url-input[b-7ut2zid0s7] {
    flex: 1 1 auto;
    min-width: 0;
}

.api-response-tree[b-7ut2zid0s7] {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px;
    background: var(--card-bg);
}

.api-section-toggle[b-7ut2zid0s7] {
    margin: 8px 0 12px;
}

.api-section-toggle .btn-secondary[b-7ut2zid0s7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.api-header-row[b-7ut2zid0s7] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}

.api-header-row .form-input[b-7ut2zid0s7] {
    flex: 1 1 140px;
}

.api-header-key[b-7ut2zid0s7],
.api-header-value[b-7ut2zid0s7] {
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: 'Quicksand', sans-serif;
    font-size: 12px;
    background: var(--input-background);
    color: var(--text-primary);
    border-radius: 4px;
    padding: 4px 8px;
}

.btn-icon[b-7ut2zid0s7] {
    flex: 0 0 auto;
    min-height: 38px;
    min-width: 38px;
    padding: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
}

.form-textarea[b-7ut2zid0s7] {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    font: inherit;
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    background: var(--card-bg);
    color: var(--text-primary);
    resize: vertical;
}

.toggle-switch[b-7ut2zid0s7] {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease;
}

.toggle-switch.off[b-7ut2zid0s7] {
    background: var(--border-color, #ccc);
}

.toggle-switch.on[b-7ut2zid0s7] {
    background: #008080;
}

.toggle-knob[b-7ut2zid0s7] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.toggle-switch.on .toggle-knob[b-7ut2zid0s7] {
    left: 20px;
}

@media (max-width: 768px) {
    .create-audience-page[b-7ut2zid0s7] { padding: 16px 16px 48px; }
    .create-audience-header[b-7ut2zid0s7], .account-picker[b-7ut2zid0s7], .create-audience-page > .form-section[b-7ut2zid0s7] { padding: 20px; }
    .create-audience-header h1[b-7ut2zid0s7] { font-size: 1.5rem; }
    .option-toggle[b-7ut2zid0s7] { grid-template-columns: 1fr; }
    .mapping-grid[b-7ut2zid0s7] { grid-template-columns: 1fr; }
}
/* /Pages/Authorized/MetaAds/CampaignDetail.razor.rz.scp.css */
.campaign-detail-container[b-dqwo81ssi7] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

.campaign-detail-header[b-dqwo81ssi7] {
    max-width: 1400px;
    margin: 0 auto 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.back-btn[b-dqwo81ssi7] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
    text-decoration: none;
    white-space: nowrap;
}

.back-btn:hover[b-dqwo81ssi7] {
    background: rgba(20, 184, 166, 0.1);
    border-color: var(--color-primary-light);
    color: var(--color-primary-light);
}

.campaign-detail-header h1[b-dqwo81ssi7] {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.campaign-detail-content[b-dqwo81ssi7] {
    max-width: 1400px;
    margin: 0 auto;
}

.campaign-actions-grid[b-dqwo81ssi7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.campaign-action-card[b-dqwo81ssi7] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.campaign-action-card[b-dqwo81ssi7]::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(20, 184, 166, 0.05) 100%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.campaign-action-card:not(.disabled):hover[b-dqwo81ssi7]::before {
    opacity: 1;
}

.campaign-action-card:not(.disabled):hover[b-dqwo81ssi7] {
    border-color: var(--color-primary-light);
    box-shadow: 0 12px 32px rgba(20, 184, 166, 0.15);
    transform: translateY(-4px);
}

.campaign-action-card.disabled[b-dqwo81ssi7] {
    opacity: 0.6;
    pointer-events: none;
}

.action-icon[b-dqwo81ssi7] {
    font-size: 40px;
    color: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15) 0%, rgba(20, 184, 166, 0.05) 100%);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.campaign-action-card:not(.disabled):hover .action-icon[b-dqwo81ssi7] {
    transform: scale(1.1) rotateZ(-5deg);
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.25) 0%, rgba(20, 184, 166, 0.1) 100%);
}

.campaign-action-card h3[b-dqwo81ssi7] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.campaign-action-card p[b-dqwo81ssi7] {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.action-btn[b-dqwo81ssi7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.action-btn.primary[b-dqwo81ssi7] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
}

.action-btn.primary:hover[b-dqwo81ssi7] {
    box-shadow: 0 4px 12px rgba(0, 128, 128, 0.3);
    transform: translateY(-1px);
}

.badge[b-dqwo81ssi7] {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(156, 163, 175, 0.2);
    color: var(--text-muted);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
    width: 100%;
}

.badge.coming-soon[b-dqwo81ssi7] {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(249, 115, 22, 0.1) 100%);
    color: #f97316;
}



/* ══════════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE DESIGN */
/* ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .campaign-detail-container[b-dqwo81ssi7] {
        padding: 16px 16px 75px;
    }

    .campaign-detail-header[b-dqwo81ssi7] {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 24px;
    }

    .campaign-actions-grid[b-dqwo81ssi7] {
        grid-template-columns: 1fr;
    }

    .campaign-action-card[b-dqwo81ssi7] {
        padding: 20px;
    }

    .action-icon[b-dqwo81ssi7] {
        width: 48px;
        height: 48px;
        font-size: 32px;
    }

    .campaign-action-card h3[b-dqwo81ssi7] {
        font-size: 16px;
    }

    .campaign-action-card p[b-dqwo81ssi7] {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .campaign-detail-header[b-dqwo81ssi7] {
        gap: 12px;
    }

    .campaign-detail-header h1[b-dqwo81ssi7] {
        font-size: 20px;
    }

    .campaign-action-card[b-dqwo81ssi7] {
        padding: 16px;
        gap: 12px;
    }

    .action-icon[b-dqwo81ssi7] {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }

    .campaign-action-card h3[b-dqwo81ssi7] {
        font-size: 14px;
    }

    .campaign-action-card p[b-dqwo81ssi7] {
        font-size: 11px;
    }

    .action-btn[b-dqwo81ssi7] {
        padding: 8px 12px;
        font-size: 12px;
    }
}
[b-dqwo81ssi7](.stat-box label) {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

[b-dqwo81ssi7](.stat-box p) {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
    margin: 0;
}

[b-dqwo81ssi7](.badge) {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

[b-dqwo81ssi7](.campaign-section) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

[b-dqwo81ssi7](.section-header) {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[b-dqwo81ssi7](.section-header h2) {
    font-size: 1.25rem;
    margin: 0;
}

[b-dqwo81ssi7](.empty-state) {
    text-align: center;
    padding: 2rem;
    color: #6b7280;
    background: #f9fafb;
    border-radius: 12px;
}

[b-dqwo81ssi7](.adset-list) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

[b-dqwo81ssi7](.adset-item) {
    background: var(--surface-bg, #fff);
    border: 1.5px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

[b-dqwo81ssi7](.adset-header) {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[b-dqwo81ssi7](.adset-header h3) {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

[b-dqwo81ssi7](.adset-details) {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #6b7280);
}

[b-dqwo81ssi7](.link-btn) {
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
    border: 1.5px solid #bfdbfe;
    background: #f0f7ff;
    color: #0071e3;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
}

[b-dqwo81ssi7](.error-state) {
    text-align: center;
    padding: 2rem;
    color: #dc2626;
}

[b-dqwo81ssi7](.loading-state) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
}

[b-dqwo81ssi7](.spinner) {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #d1d5db;
    border-top-color: #0071e3;
    border-radius: 50%;
    animation: spin-b-dqwo81ssi7 0.6s linear infinite;
}

@keyframes spin-b-dqwo81ssi7 {
    to { transform: rotate(360deg); }
}
/* /Pages/Authorized/MetaAds/CampaignFunnelDashboard.razor.rz.scp.css */
.campaign-funnel-dashboard[b-u2bnq6dlxo] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* HEADER SECTION */
/* ══════════════════════════════════════════════════════════════════════════ */

.dashboard-header[b-u2bnq6dlxo] {
    max-width: 1400px;
    margin: 0 auto 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 24px 28px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    flex-wrap: wrap;
}

.dashboard-header-left[b-u2bnq6dlxo] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 250px;
}

.back-btn[b-u2bnq6dlxo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 18px;
    flex-shrink: 0;
}

.back-btn:hover[b-u2bnq6dlxo] {
    background: rgba(20, 184, 166, 0.1);
    border-color: var(--color-primary-light);
    color: var(--color-primary-light);
}

.header-content[b-u2bnq6dlxo] {
    display: flex;
    flex-direction: column;
}

.dashboard-header h1[b-u2bnq6dlxo] {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.header-subtitle[b-u2bnq6dlxo] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.dashboard-header-actions[b-u2bnq6dlxo] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.date-preset-selector[b-u2bnq6dlxo] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-preset-selector label[b-u2bnq6dlxo] {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.preset-dropdown[b-u2bnq6dlxo] {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Quicksand', sans-serif;
}

.preset-dropdown:hover[b-u2bnq6dlxo] {
    border-color: var(--color-primary-light);
    background: rgba(20, 184, 166, 0.08);
}

.preset-dropdown:focus[b-u2bnq6dlxo] {
    outline: none;
    border-color: var(--color-primary);
    background: rgba(20, 184, 166, 0.12);
}

.refresh-btn[b-u2bnq6dlxo] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.refresh-btn:hover:not(:disabled)[b-u2bnq6dlxo] {
    box-shadow: 0 4px 12px rgba(0, 128, 128, 0.3);
    transform: translateY(-1px);
}

.refresh-btn:disabled[b-u2bnq6dlxo] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* ERROR STATE */
/* ══════════════════════════════════════════════════════════════════════════ */

.error-state[b-u2bnq6dlxo] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 48px 28px;
    background: var(--card-bg);
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.error-icon[b-u2bnq6dlxo] {
    font-size: 48px;
    color: #ef4444;
}

.error-content h3[b-u2bnq6dlxo] {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
    font-weight: 600;
}

.error-content p[b-u2bnq6dlxo] {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--text-muted);
    max-width: 500px;
}

.retry-btn[b-u2bnq6dlxo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.retry-btn:hover[b-u2bnq6dlxo] {
    box-shadow: 0 4px 12px rgba(0, 128, 128, 0.3);
    transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* SKELETON LOADING STATE */
/* ══════════════════════════════════════════════════════════════════════════ */

.skeleton-loading .skeleton-funnel[b-u2bnq6dlxo] {
    max-width: 1400px;
    margin: 0 auto 28px;
    height: 200px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 100%);
    border-radius: 12px;
    animation: pulse-b-u2bnq6dlxo 1.5s ease-in-out infinite;
}

.skeleton-card[b-u2bnq6dlxo] {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    height: 160px;
    animation: pulse-b-u2bnq6dlxo 1.5s ease-in-out infinite;
}

.skeleton-title[b-u2bnq6dlxo] {
    display: block;
    width: 150px;
    height: 24px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 100%);
    border-radius: 6px;
    margin-bottom: 20px;
    animation: pulse-b-u2bnq6dlxo 1.5s ease-in-out infinite;
}

@keyframes pulse-b-u2bnq6dlxo {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* FUNNEL VISUALIZATION (curved SVG funnel + label list) */
/* ══════════════════════════════════════════════════════════════════════════ */

.funnel-section[b-u2bnq6dlxo] {
    max-width: 1400px;
    margin: 0 auto 40px;
}

.funnel-container[b-u2bnq6dlxo] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 40px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    flex-wrap: wrap;
}

/* ── Funnel graphic (curved bowl-shaped bands via SVG) ── */

.funnel-graphic[b-u2bnq6dlxo] {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.funnel-svg[b-u2bnq6dlxo] {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.12));
}

.funnel-svg-band[b-u2bnq6dlxo] {
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 1.5;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.funnel-svg-band:hover[b-u2bnq6dlxo] {
    opacity: 0.9;
}

.funnel-svg-label[b-u2bnq6dlxo] {
    fill: rgba(255, 255, 255, 0.95);
    font-size: 14px;
    font-weight: 600;
    font-family: 'Quicksand', sans-serif;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ── Mouse-following tooltip ── */

.funnel-tooltip[b-u2bnq6dlxo] {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    background: var(--modal-bg-top, #101A2E);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-md, 0 10px 25px rgba(0, 0, 0, 0.25));
    white-space: nowrap;
    animation: fadeIn-b-u2bnq6dlxo 0.12s ease-out forwards;
}

.funnel-tooltip-label[b-u2bnq6dlxo] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}

.funnel-tooltip-value[b-u2bnq6dlxo] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    /* font-family: 'Quicksand', sans-serif; */
}

/* ── Stage label list ── */

.funnel-labels[b-u2bnq6dlxo] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 240px;
}

.funnel-label-row[b-u2bnq6dlxo] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--card-bg-hover, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.funnel-label-row:hover[b-u2bnq6dlxo] {
    transform: translateX(4px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.funnel-label-badge[b-u2bnq6dlxo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 17px;
    flex-shrink: 0;
    color: #fff;
}

.funnel-label-badge-top[b-u2bnq6dlxo]    { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.funnel-label-badge-mid[b-u2bnq6dlxo]    { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.funnel-label-badge-bottom[b-u2bnq6dlxo] { background: linear-gradient(135deg, #34d399, #10b981); }

.funnel-label-text[b-u2bnq6dlxo] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.funnel-label-title[b-u2bnq6dlxo] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.funnel-label-value[b-u2bnq6dlxo] {
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'Quicksand', sans-serif;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* METRICS SECTION */
/* ══════════════════════════════════════════════════════════════════════════ */

.metrics-section[b-u2bnq6dlxo] {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.stage-group[b-u2bnq6dlxo] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stage-header[b-u2bnq6dlxo] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stage-indicator[b-u2bnq6dlxo] {
    width: 4px;
    height: 24px;
    border-radius: 2px;
    flex-shrink: 0;
}

.stage-indicator-top[b-u2bnq6dlxo] {
    background: linear-gradient(180deg, #3b82f6 0%, #1e40af 100%);
}

.stage-indicator-mid[b-u2bnq6dlxo] {
    background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
}

.stage-indicator-bottom[b-u2bnq6dlxo] {
    background: linear-gradient(180deg, #10b981 0%, #047857 100%);
}

.stage-title[b-u2bnq6dlxo] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.stage-description[b-u2bnq6dlxo] {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.metrics-grid[b-u2bnq6dlxo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* METRIC CARD */
/* ══════════════════════════════════════════════════════════════════════════ */

.metric-card[b-u2bnq6dlxo] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.metric-card:hover[b-u2bnq6dlxo] {
    transform: translateY(-4px);
    border-color: var(--color-primary-light);
    box-shadow: 0 8px 24px rgba(20, 184, 166, 0.15);
    background: rgba(20, 184, 166, 0.08);
}

.metric-icon-box[b-u2bnq6dlxo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-size: 20px;
    flex-shrink: 0;
}

.metric-icon-box.top-of-funnel[b-u2bnq6dlxo] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
    color: #3b82f6;
}

.metric-card:hover .metric-icon-box.top-of-funnel[b-u2bnq6dlxo] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0.1) 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.metric-icon-box.mid-funnel[b-u2bnq6dlxo] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
    color: #f59e0b;
}

.metric-card:hover .metric-icon-box.mid-funnel[b-u2bnq6dlxo] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.1) 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.metric-icon-box.bottom-funnel[b-u2bnq6dlxo] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    color: #10b981;
}

.metric-card:hover .metric-icon-box.bottom-funnel[b-u2bnq6dlxo] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.1) 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.metric-label[b-u2bnq6dlxo] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -0.3px;
}

.metric-value[b-u2bnq6dlxo] {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Quicksand', sans-serif;
    letter-spacing: -0.5px;
}

.metric-change[b-u2bnq6dlxo] {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Special styling for ROAS card */
.roas-card[b-u2bnq6dlxo] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 2px solid rgba(16, 185, 129, 0.3);
}

.roas-card:hover[b-u2bnq6dlxo] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.1) 100%);
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.2);
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE DESIGN */
/* ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .campaign-funnel-dashboard[b-u2bnq6dlxo] {
        padding: 16px 16px 75px;
    }

    .dashboard-header[b-u2bnq6dlxo] {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        margin-bottom: 20px;
    }

    .dashboard-header-left[b-u2bnq6dlxo] {
        width: 100%;
    }

    .dashboard-header-actions[b-u2bnq6dlxo] {
        width: 100%;
        flex-direction: column;
    }

    .date-preset-selector[b-u2bnq6dlxo] {
        width: 100%;
    }

    .preset-dropdown[b-u2bnq6dlxo],
    .refresh-btn[b-u2bnq6dlxo] {
        flex: 1;
    }

    .dashboard-header h1[b-u2bnq6dlxo] {
        font-size: 20px;
    }

    .funnel-container[b-u2bnq6dlxo] {
        flex-direction: column;
        gap: 32px;
        padding: 28px 16px;
    }

    .funnel-graphic[b-u2bnq6dlxo] {
        width: 260px;
    }

    .funnel-labels[b-u2bnq6dlxo] {
        width: 100%;
    }

    .stage-title[b-u2bnq6dlxo] {
        font-size: 16px;
    }

    .metrics-grid[b-u2bnq6dlxo] {
        grid-template-columns: 1fr;
    }

    .metric-card[b-u2bnq6dlxo] {
        padding: 16px;
    }

    .metric-value[b-u2bnq6dlxo] {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .dashboard-header[b-u2bnq6dlxo] {
        padding: 12px;
        gap: 12px;
    }

    .dashboard-header h1[b-u2bnq6dlxo] {
        font-size: 18px;
    }

    .header-subtitle[b-u2bnq6dlxo] {
        font-size: 12px;
    }

    .funnel-graphic[b-u2bnq6dlxo] {
        width: 210px;
    }

    .funnel-label-row[b-u2bnq6dlxo] {
        padding: 12px 14px;
        gap: 10px;
    }

    .funnel-label-badge[b-u2bnq6dlxo] {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .funnel-label-title[b-u2bnq6dlxo] {
        font-size: 13px;
    }

    .funnel-label-value[b-u2bnq6dlxo] {
        font-size: 11px;
    }

    .stage-title[b-u2bnq6dlxo] {
        font-size: 14px;
    }

    .stage-description[b-u2bnq6dlxo] {
        font-size: 12px;
    }

    .metric-label[b-u2bnq6dlxo] {
        font-size: 12px;
    }

    .metric-value[b-u2bnq6dlxo] {
        font-size: 18px;
    }

    .metrics-grid[b-u2bnq6dlxo] {
        gap: 12px;
    }

    .metric-card[b-u2bnq6dlxo] {
        padding: 12px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* ANIMATIONS */
/* ══════════════════════════════════════════════════════════════════════════ */

@keyframes fadeIn-b-u2bnq6dlxo {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.metric-card[b-u2bnq6dlxo],
.funnel-label-row[b-u2bnq6dlxo],
.stage-group[b-u2bnq6dlxo] {
    animation: fadeIn-b-u2bnq6dlxo 0.3s ease-out forwards;
}

.stage-group:nth-child(1)[b-u2bnq6dlxo] { animation-delay: 0.1s; }
.stage-group:nth-child(2)[b-u2bnq6dlxo] { animation-delay: 0.15s; }
.stage-group:nth-child(3)[b-u2bnq6dlxo] { animation-delay: 0.2s; }
/* /Pages/Authorized/MetaAds/LeadForms/AllLeadForms.razor.rz.scp.css */
.lead-forms-page[b-6xjyyz1ep5] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 100vh;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

.lead-forms-header[b-6xjyyz1ep5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 1.5rem;
    padding: 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.lead-forms-title[b-6xjyyz1ep5] {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-primary);
}

.lead-forms-subtitle[b-6xjyyz1ep5] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.lead-forms-back-btn[b-6xjyyz1ep5] {
    min-height: 40px;
    padding: 0.625rem 1.25rem;
    border: 1.5px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.lead-forms-back-btn:hover[b-6xjyyz1ep5] {
    background: var(--card-bg-hover);
}

.lead-forms-filter-row[b-6xjyyz1ep5] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 1.5rem;
    padding: 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.lead-forms-filter-row .form-field[b-6xjyyz1ep5] {
    min-width: min(100%, 320px);
}

.form-field[b-6xjyyz1ep5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-field label[b-6xjyyz1ep5] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.req[b-6xjyyz1ep5] {
    color: var(--danger-color);
}

.btn-primary[b-6xjyyz1ep5] {
    border-radius: var(--radius-sm);
    padding: 0.6rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--color-primary);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover:not(:disabled)[b-6xjyyz1ep5] {
    background: var(--color-primary-dark);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.18);
    transform: translateY(-1px);
}

.lead-forms-filter-row .btn-primary[b-6xjyyz1ep5] {
    min-height: 40px;
}

.empty-state[b-6xjyyz1ep5] {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9375rem;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
}

.lead-forms-loading[b-6xjyyz1ep5] {
    color: var(--text-muted);
    font-size: 0.9375rem;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 18px;
}

.error-message[b-6xjyyz1ep5] {
    background: var(--card-bg);
    color: var(--status-rejected-text);
    font-size: 0.875rem;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    border: 1px solid var(--card-border);
    border-radius: 18px;
    text-align: left;
}

.lead-forms-table[b-6xjyyz1ep5] {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    background: var(--card-bg);
    border: 0;
    border-radius: 0;
    overflow: hidden;
}

.lead-forms-table th[b-6xjyyz1ep5],
.lead-forms-table td[b-6xjyyz1ep5] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.lead-forms-table th[b-6xjyyz1ep5] {
    padding: 0.9rem 1rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--card-bg-hover);
}

.lead-forms-table tbody tr:hover[b-6xjyyz1ep5] {
    background: var(--page-bg);
}

.lead-forms-table tbody tr:last-child td[b-6xjyyz1ep5] {
    border-bottom: none;
}

.lead-form-status-badge[b-6xjyyz1ep5] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    background: var(--card-bg-hover);
    border: 1px solid var(--border-color);
    font-size: 0.78rem;
    font-weight: 600;
}

.quick-ad-btn-cancel[b-6xjyyz1ep5] {
    min-height: 40px;
    padding: 0.625rem 1.25rem;
    border: 1.5px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.quick-ad-btn-cancel:hover[b-6xjyyz1ep5] {
    background: var(--card-bg-hover);
    border-color: var(--color-primary-light);
}

.lead-forms-table-wrap[b-6xjyyz1ep5] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    overflow-x: auto;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.04);
}

@media (max-width: 768px) {
    .lead-forms-page[b-6xjyyz1ep5] { padding: 16px 16px 48px; }
    .lead-forms-header[b-6xjyyz1ep5] { align-items: stretch; flex-direction: column; padding: 20px; }
    .lead-forms-title[b-6xjyyz1ep5] { font-size: 1.6rem; }
    .lead-forms-back-btn[b-6xjyyz1ep5] { align-self: flex-start; }
    .lead-forms-filter-row[b-6xjyyz1ep5] { align-items: stretch; padding: 20px; }
    .lead-forms-filter-row .form-field[b-6xjyyz1ep5], .lead-forms-filter-row .btn-primary[b-6xjyyz1ep5] { width: 100%; }
}
/* /Pages/Authorized/MetaAds/MediaLibrary.razor.rz.scp.css */
.media-library-shell[b-eczvl86jcm] {
    padding: 24px 24px 75px;
    min-height: 100vh;
    background: var(--page-bg);
}

/* Header */
.media-library-header[b-eczvl86jcm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto 1.5rem;
    padding: 24px;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.header-content[b-eczvl86jcm] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.media-library-header h1[b-eczvl86jcm] {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.media-library-header p[b-eczvl86jcm] {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
}

.media-library-btn-upload[b-eczvl86jcm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: #008080;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 44px;
}

.media-library-btn-upload span[b-eczvl86jcm] {
    font-size: 18px;
    line-height: 1;
}

.media-library-btn-upload:hover:not(:disabled)[b-eczvl86jcm] {
    background: #006666;
    box-shadow: 0 6px 16px rgba(0, 128, 128, 0.25);
    transform: translateY(-1px);
}

.media-library-btn-upload:active:not(:disabled)[b-eczvl86jcm] {
    transform: translateY(0);
}

.media-library-btn-upload:disabled[b-eczvl86jcm] {
    background: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Content Container */
.media-library-content[b-eczvl86jcm] {
    max-width: 1400px;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--card-border);
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Account Selector */
.media-library-account-selector[b-eczvl86jcm] {
    margin-bottom: 28px;  
    padding-bottom: 0;    
}

.media-library-account-selector label[b-eczvl86jcm] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    min-width: fit-content;
}

.media-library-account-selector .form-control[b-eczvl86jcm] {
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}

.filter-btn:hover:not(:disabled)[b-eczvl86jcm] {
    color: #008080;
    border-color: #008080;
    background: rgba(0, 128, 128, 0.05);
}

.filter-btn.active:not(:disabled)[b-eczvl86jcm] {
    background: #008080;
    color: #fff;
    border-color: #008080;
    box-shadow: 0 2px 8px rgba(0, 128, 128, 0.25);
}

.filter-btn:disabled[b-eczvl86jcm] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Empty State */
.media-library-empty[b-eczvl86jcm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    min-height: 400px;
}

.media-library-empty-prompt[b-eczvl86jcm] {
    min-height: 300px;
}

.empty-icon[b-eczvl86jcm] {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.8;
    display: block;
}

.media-library-empty h2[b-eczvl86jcm] {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

.media-library-empty p[b-eczvl86jcm] {
    margin: 0 0 32px;
    color: var(--text-muted);
    font-size: 14px;
    max-width: 450px;
    line-height: 1.6;
}

.media-library-btn-primary[b-eczvl86jcm] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    background: #008080;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
}

.media-library-btn-primary:hover[b-eczvl86jcm] {
    background: #006666;
    box-shadow: 0 6px 16px rgba(0, 128, 128, 0.25);
    transform: translateY(-1px);
}

.media-library-btn-primary:active[b-eczvl86jcm] {
    transform: translateY(0);
}

/* Media Grid */
.media-grid[b-eczvl86jcm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

@media (max-width: 1024px) {
    .media-grid[b-eczvl86jcm] {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .media-grid[b-eczvl86jcm] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }
}

/* Media Card */
.media-card[b-eczvl86jcm] {
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--card-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
    background: var(--page-bg);
}

.media-card:hover[b-eczvl86jcm] {
    border-color: #008080;
    box-shadow: 0 8px 24px rgba(0, 128, 128, 0.12);
    transform: translateY(-2px);
}

/* Media Thumbnail Container */
.media-thumbnail-container[b-eczvl86jcm] {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background: linear-gradient(135deg, var(--page-bg), var(--card-bg));
    overflow: hidden;
}

.media-thumbnail[b-eczvl86jcm] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-video-placeholder[b-eczvl86jcm] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.video-overlay[b-eczvl86jcm] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.video-play-icon[b-eczvl86jcm] {
    font-size: 48px;
    color: #fff;
    opacity: 0.95;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: all 0.2s ease;
}

.media-card:hover .video-play-icon[b-eczvl86jcm] {
    font-size: 56px;
    opacity: 1;
}

/* Media Card Delete Button */
.media-card-delete-btn[b-eczvl86jcm] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0;
    z-index: 3;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.media-thumbnail-container:hover .media-card-delete-btn[b-eczvl86jcm] {
    opacity: 1;
}

.media-card-delete-btn:hover[b-eczvl86jcm] {
    background: rgba(255, 64, 64, 0.9);
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(255, 64, 64, 0.4);
}

.media-card-delete-btn:active[b-eczvl86jcm] {
    transform: scale(1);
}

/* Media Card Body */
.media-card-body[b-eczvl86jcm] {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--page-bg);
}

.media-info[b-eczvl86jcm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.media-filename[b-eczvl86jcm] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
    flex: 1;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.media-badge-row[b-eczvl86jcm] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.media-type-badge[b-eczvl86jcm] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    background: #008080;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.media-details[b-eczvl86jcm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.detail-item[b-eczvl86jcm] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.detail-label[b-eczvl86jcm] {
    font-weight: 600;
    opacity: 0.8;
}

.detail-value[b-eczvl86jcm] {
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
}

/* Error Message */
.media-library-error[b-eczvl86jcm] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-top: 20px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.1);
    border: 1.5px solid rgba(239, 68, 68, 0.3);
    color: #d32f2f;
}

.error-icon[b-eczvl86jcm] {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.media-library-error p[b-eczvl86jcm] {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

/* Pagination */
.media-library-pagination[b-eczvl86jcm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-top: 24px;
    padding-bottom: 0;
    border-top: 2px solid var(--card-border);
    flex-wrap: wrap;
}

.pagination-btn[b-eczvl86jcm] {
    padding: 10px 16px;
    border: 1.5px solid var(--card-border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}

.pagination-btn:hover:not(:disabled)[b-eczvl86jcm] {
    background: #008080;
    color: #fff;
    border-color: #008080;
    box-shadow: 0 2px 8px rgba(0, 128, 128, 0.25);
}

.pagination-btn:disabled[b-eczvl86jcm] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info[b-eczvl86jcm] {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

.pagination-info strong[b-eczvl86jcm] {
    color: var(--text-primary);
    font-weight: 700;
}

/* Modal Overlay */
.modal-overlay[b-eczvl86jcm] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
    animation: fadeIn-b-eczvl86jcm 0.2s ease-out;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

@keyframes fadeIn-b-eczvl86jcm {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content[b-eczvl86jcm] {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 128, 128, 0.1);
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: slideUp-b-eczvl86jcm 0.3s ease-out;
    border: 1px solid rgba(0, 128, 128, 0.1);
    display: flex;
    flex-direction: column;
}

.modal-content[b-eczvl86jcm]::-webkit-scrollbar {
    width: 6px;
}

.modal-content[b-eczvl86jcm]::-webkit-scrollbar-track {
    background: transparent;
}

.modal-content[b-eczvl86jcm]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 128, 128, 0.3);
    border-radius: 3px;
}

.modal-small[b-eczvl86jcm] {
    max-width: 420px;
}

@keyframes slideUp-b-eczvl86jcm {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-eczvl86jcm] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border-bottom: 1.5px solid var(--card-border);
    background: var(--card-bg);
    flex-shrink: 0;
    z-index: 10;
}

.modal-header-content[b-eczvl86jcm] {
    flex: 1;
}

.modal-header h2[b-eczvl86jcm] {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-subtitle[b-eczvl86jcm] {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.modal-close-btn[b-eczvl86jcm] {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 6px;
    flex-shrink: 0;
}

.modal-close-btn:hover[b-eczvl86jcm] {
    color: var(--text-primary);
    background: var(--page-bg);
}

.modal-body[b-eczvl86jcm] {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 128, 128, 0.3) transparent;
}

/* Hide scrollbar when not needed */
.modal-body[b-eczvl86jcm]::-webkit-scrollbar {
    width: 6px;
}

.modal-body[b-eczvl86jcm]::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body[b-eczvl86jcm]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 128, 128, 0.3);
    border-radius: 3px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.modal-body[b-eczvl86jcm]::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 128, 128, 0.5);
}

/* Hide scrollbar completely when content fits */
.modal-body:not(:has(.form-group:nth-child(n+4)))[b-eczvl86jcm] {
    overflow: visible;
}

/* Form Alert */
.form-alert[b-eczvl86jcm] {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 13px;
    align-items: flex-start;
}

.form-alert span[b-eczvl86jcm] {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.form-alert-error[b-eczvl86jcm] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #d32f2f;
}

.form-alert p[b-eczvl86jcm] {
    margin: 0;
    font-weight: 500;
    line-height: 1.5;
}

/* Upload Form */
.upload-form[b-eczvl86jcm] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.form-group[b-eczvl86jcm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label[b-eczvl86jcm] {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.required-asterisk[b-eczvl86jcm] {
    color: #ef4444;
    font-size: 16px;
}

.optional-label[b-eczvl86jcm] {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: lowercase;
    letter-spacing: 0;
}

.form-group small[b-eczvl86jcm] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: -2px;
    line-height: 1.4;
}

.form-hint[b-eczvl86jcm] {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Form Control */
.form-control[b-eczvl86jcm] {
    padding: 11px 14px;
    border: 1.5px solid var(--card-border);
    border-radius: 8px;
    background: var(--page-bg);
    color: var(--text-primary);
    font-size: 13px;
    font-family: 'Quicksand', sans-serif;
    transition: all 0.2s ease;
    min-height: 40px;
}

.form-control:hover:not(:disabled)[b-eczvl86jcm] {
    border-color: #008080;
}

.form-control:focus[b-eczvl86jcm] {
    outline: none;
    border-color: #008080;
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.1);
    background: var(--card-bg);
}

.form-control:disabled[b-eczvl86jcm] {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-control-select[b-eczvl86jcm] {
    cursor: pointer;
    appearance: none;
    background-image: var(--chevron-icon);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
}

.form-error[b-eczvl86jcm] {
    display: flex;
    gap: 6px;
    font-size: 12px;
    color: #ef4444;
    margin-top: 2px;
    font-weight: 500;
}

/* Radio Group */
.radio-group[b-eczvl86jcm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radio-label[b-eczvl86jcm] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.radio-label input[type="radio"][b-eczvl86jcm] {
    cursor: pointer;
    accent-color: #008080;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.radio-text[b-eczvl86jcm] {
    color: var(--text-primary);
    font-weight: 500;
}

/* File Input */
.file-input-wrapper[b-eczvl86jcm] {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.file-input[b-eczvl86jcm] {
    display: none !important;
    visibility: hidden;
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

.file-input-label[b-eczvl86jcm] {
    display: block;
    padding: 40px 24px;
    border: 2px dashed var(--card-border);
    border-radius: 8px;
    background: var(--page-bg);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-input-label:hover[b-eczvl86jcm] {
    border-color: #008080;
    background: rgba(0, 128, 128, 0.05);
    border-width: 2px;
}

.file-input-label.drag-over[b-eczvl86jcm] {
    border-color: #008080;
    background: rgba(0, 128, 128, 0.1);
    box-shadow: 0 0 0 1px rgba(0, 128, 128, 0.2), inset 0 0 0 1px rgba(0, 128, 128, 0.1);
    border-width: 2px;
}

.file-input-label:focus-visible[b-eczvl86jcm] {
    outline: 2px solid #008080;
    outline-offset: 2px;
}

.file-input-label:active[b-eczvl86jcm] {
    background: rgba(0, 128, 128, 0.08);
}

.file-input-content[b-eczvl86jcm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    pointer-events: none;
}

.file-input-icon[b-eczvl86jcm] {
    font-size: 40px;
    opacity: 0.85;
    display: block;
    line-height: 1;
}

.file-input-text[b-eczvl86jcm] {
    font-size: 14px;
    color: var(--text-muted);
    display: block;
    line-height: 1.6;
    margin: 0;
}

.file-input-text strong[b-eczvl86jcm] {
    color: var(--text-primary);
    font-weight: 700;
    display: block;
}

.file-input-text small[b-eczvl86jcm] {
    display: block;
    font-size: 12px;
    margin-top: 4px;
    opacity: 0.85;
    font-weight: 500;
}

/* Modal Footer */
.modal-footer[b-eczvl86jcm] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px 24px;
    border-top: 1.5px solid var(--card-border);
    background: var(--page-bg);
    flex-shrink: 0;
    z-index: 10;
}

.modal-btn-cancel[b-eczvl86jcm],
.modal-btn-upload[b-eczvl86jcm],
.modal-btn-delete[b-eczvl86jcm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    min-height: 40px;
    white-space: nowrap;
}

.modal-btn-cancel[b-eczvl86jcm] {
    background: transparent;
    color: var(--text-primary);
    border: 1.5px solid var(--card-border);
}

.modal-btn-cancel:hover:not(:disabled)[b-eczvl86jcm] {
    background: var(--card-bg);
    border-color: #008080;
    color: #008080;
}

.modal-btn-upload[b-eczvl86jcm],
.modal-btn-delete[b-eczvl86jcm] {
    background: #008080;
    color: #fff;
}

.modal-btn-upload:hover:not(:disabled)[b-eczvl86jcm],
.modal-btn-delete:hover:not(:disabled)[b-eczvl86jcm] {
    background: #006666;
    box-shadow: 0 4px 12px rgba(0, 128, 128, 0.3);
    transform: translateY(-1px);
}

.modal-btn-upload:active:not(:disabled)[b-eczvl86jcm],
.modal-btn-delete:active:not(:disabled)[b-eczvl86jcm] {
    transform: translateY(0);
}

.modal-btn-upload:disabled[b-eczvl86jcm],
.modal-btn-delete:disabled[b-eczvl86jcm] {
    opacity: 0.6;
    cursor: not-allowed;
}

.modal-btn-delete[b-eczvl86jcm] {
    background: #d32f2f;
}

.modal-btn-delete:hover:not(:disabled)[b-eczvl86jcm] {
    background: #b71c1c;
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
}

/* Button Spinner */
.btn-spinner[b-eczvl86jcm] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-eczvl86jcm 0.8s linear infinite;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .media-library-shell[b-eczvl86jcm] {
        padding: 16px 16px 60px;
    }

    .media-library-header[b-eczvl86jcm] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
    }

    .header-content[b-eczvl86jcm] {
        order: 2;
    }

    .media-library-header h1[b-eczvl86jcm] {
        font-size: 26px;
    }

    .media-library-header p[b-eczvl86jcm] {
        font-size: 13px;
        margin-top: 4px;
    }

    .media-library-btn-upload[b-eczvl86jcm] {
        order: 1;
    }

    .media-library-content[b-eczvl86jcm] {
        padding: 16px;
    }

    .media-library-account-selector[b-eczvl86jcm] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 20px;
    }

    .media-library-account-selector label[b-eczvl86jcm] {
        white-space: normal;
    }

    .media-library-account-selector .form-control[b-eczvl86jcm] {
        max-width: 100%;
    }

    .media-library-filter[b-eczvl86jcm] {
        margin-bottom: 20px;
    }

    .filter-buttons[b-eczvl86jcm] {
        justify-content: flex-start;
    }

    .media-grid[b-eczvl86jcm] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .media-library-empty[b-eczvl86jcm] {
        padding: 60px 16px;
        min-height: 300px;
    }

    .media-library-empty h2[b-eczvl86jcm] {
        font-size: 20px;
    }

    .empty-icon[b-eczvl86jcm] {
        font-size: 48px;
    }

    .modal-content[b-eczvl86jcm] {
        max-width: 90%;
        max-height: 95vh;
    }

    .modal-body[b-eczvl86jcm] {
        max-height: calc(95vh - 200px);
    }

    .modal-header[b-eczvl86jcm] {
        padding: 16px;
    }

    .modal-header h2[b-eczvl86jcm] {
        font-size: 18px;
    }

    .modal-subtitle[b-eczvl86jcm] {
        font-size: 12px;
    }

    .modal-body[b-eczvl86jcm] {
        padding: 16px;
    }

    .modal-footer[b-eczvl86jcm] {
        padding: 16px;
        flex-direction: column-reverse;
    }

    .modal-btn-cancel[b-eczvl86jcm],
    .modal-btn-upload[b-eczvl86jcm],
    .modal-btn-delete[b-eczvl86jcm] {
        width: 100%;
        justify-content: center;
    }

    .radio-group[b-eczvl86jcm] {
        gap: 10px;
    }

    .upload-form[b-eczvl86jcm] {
        gap: 18px;
    }

    .media-library-pagination[b-eczvl86jcm] {
        flex-direction: column;
        gap: 16px;
        padding-top: 16px;
    }
}

@media (max-width: 480px) {
    .media-grid[b-eczvl86jcm] {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }

    .filter-buttons[b-eczvl86jcm] {
        width: 100%;
        gap: 8px;
    }

    .filter-btn[b-eczvl86jcm] {
        flex: 1;
        padding: 8px 12px;
        font-size: 12px;
    }

    .filter-icon[b-eczvl86jcm] {
        display: none;
    }

    .media-card-body[b-eczvl86jcm] {
        padding: 10px;
    }

    .media-filename[b-eczvl86jcm] {
        font-size: 12px;
    }

    .media-details[b-eczvl86jcm] {
        font-size: 10px;
    }
}

/* Print Styles */
@media print {
    .media-library-btn-upload[b-eczvl86jcm],
    .modal-overlay[b-eczvl86jcm],
    .media-library-pagination[b-eczvl86jcm] {
        display: none;
    }
}
/* /Pages/Authorized/MetaAds/MetaAds.razor.rz.scp.css */
.meta-ads-create-page[b-9rto3wzjwb] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

.meta-ads-create-header[b-9rto3wzjwb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto 1.5rem;
    padding: 24px;
    background: var(--card-bg);
    border-radius: 18px;
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.meta-ads-create-back-btn[b-9rto3wzjwb] {
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.15s;
}

.meta-ads-create-back-btn:hover[b-9rto3wzjwb] {
    background: var(--card-bg-hover);
    border-color: var(--color-primary-light);
}

.meta-ads-create-header > div[b-9rto3wzjwb] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.meta-ads-create-title[b-9rto3wzjwb] {
    font-size: 1.875rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}

.meta-ads-create-subtitle[b-9rto3wzjwb] {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0;
}

.meta-ads-create-form[b-9rto3wzjwb] {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* ══ Form Sections ════════════════════════════════════════════════════════ */
.form-section[b-9rto3wzjwb] {
    background: var(--card-bg);
    border: 1.5px solid var(--card-border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-section h2[b-9rto3wzjwb] {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.section-help[b-9rto3wzjwb] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

.form-field[b-9rto3wzjwb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-field label[b-9rto3wzjwb] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.tos-notice[b-9rto3wzjwb] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 10px;
}

.tos-notice-icon[b-9rto3wzjwb] {
    font-size: 1rem;
    line-height: 1.3;
    flex-shrink: 0;
}

.tos-notice-body[b-9rto3wzjwb] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tos-notice-text[b-9rto3wzjwb] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #b45309;
}

.tos-notice-subtext[b-9rto3wzjwb] {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.tos-notice-link[b-9rto3wzjwb] {
    align-self: flex-start;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}

.tos-notice-link:hover[b-9rto3wzjwb] {
    text-decoration: underline;
}

.req[b-9rto3wzjwb] {
    color: var(--danger-color);
}

.form-input[b-9rto3wzjwb],
.form-select[b-9rto3wzjwb] {
    padding: 0.625rem 0.875rem;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9375rem;
    background: var(--form-input-bg);
    color: var(--text-primary);
    width: 100%;
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
    transition: all 0.15s;
}

.form-select[b-9rto3wzjwb],
.variant-type-select[b-9rto3wzjwb] {
    color-scheme: light;
}

.variant-type-select option[b-9rto3wzjwb],
.form-select option[b-9rto3wzjwb] {
    background: var(--card-bg);
    color: var(--text-primary);
}

[data-app-theme="dark"] .form-select[b-9rto3wzjwb],
[data-app-theme="dark"] .variant-type-select[b-9rto3wzjwb] {
    color-scheme: dark;
}

.form-input[b-9rto3wzjwb]::placeholder,
.form-select[b-9rto3wzjwb]::placeholder {
    color: var(--text-muted);
}

.form-input:focus[b-9rto3wzjwb],
.form-select:focus[b-9rto3wzjwb] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--form-input-focus-shadow);
}

.textarea[b-9rto3wzjwb] {
    min-height: 100px;
    resize: vertical;
    font-family: 'Quicksand', sans-serif;
}

.form-field small[b-9rto3wzjwb] {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.field-tip[b-9rto3wzjwb] {
    color: var(--text-muted);
    margin-top: 4px;
    display: block;
}

.form-field-row[b-9rto3wzjwb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ══ Pills ═════════════════════════════════════════════════════════════════ */
.pill-group[b-9rto3wzjwb] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pill[b-9rto3wzjwb] {
    padding: 0.5rem 1.25rem;
    border: 1.5px solid var(--border-color);
    border-radius: 20px;
    background: var(--card-bg);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-primary);
}

.pill:hover[b-9rto3wzjwb] {
    border-color: var(--color-primary-light);
    background: var(--card-bg-hover);
}

.pill.active[b-9rto3wzjwb] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 128, 128, 0.3);
}

/* ══ Info Box ══════════════════════════════════════════════════════════════ */
.info-box[b-9rto3wzjwb] {
    background: var(--status-approved-bg);
    border-left: 3px solid var(--color-success);
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--status-approved-text);
}

/* ══ Error Message ════════════════════════════════════════════════════════ */
.error-message[b-9rto3wzjwb] {
    background: var(--status-rejected-bg);
    border-left: 3px solid var(--danger-color);
    padding: 1rem;
    border-radius: 8px;
    color: var(--status-rejected-text);
    font-size: 0.875rem;
}

/* ══ Dynamic Creative Variant rows (moved out of inline styles) ═══════════ */
.variant-hint[b-9rto3wzjwb] {
    margin-bottom: 16px;
    color: var(--text-muted);
    font-size: 14px;
}

.variant-item[b-9rto3wzjwb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--card-bg-hover);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    margin-bottom: 8px;
}

.variant-text[b-9rto3wzjwb] {
    font-size: 13px;
    color: var(--text-primary);
    word-break: break-all;
}

.variant-remove-btn[b-9rto3wzjwb] {
    padding: 4px 8px;
    font-size: 12px;
}

.variant-type-select[b-9rto3wzjwb] {
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--form-input-bg);
    color: var(--text-primary);
}

.selected-media-preview[b-9rto3wzjwb] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.selected-media-item[b-9rto3wzjwb] {
    position: relative;
    width: 80px;
    height: 80px;
}

.selected-media-image[b-9rto3wzjwb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    display: block;
}

.media-remove-btn[b-9rto3wzjwb] {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--danger-color, #ef4444);
    color: #fff;
    border-radius: 50%;
    border: none;
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.meta-ads-create-media-btn[b-9rto3wzjwb] {
    width: fit-content;
    min-height: 44px;
    padding: 0.7rem 1.2rem;
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

.meta-ads-create-media-btn:hover:not(:disabled)[b-9rto3wzjwb] {
    background: var(--card-bg-hover);
    border-color: var(--color-primary-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

.accordion-header[b-9rto3wzjwb] {
    width: 100%;
}

.accordion-button[b-9rto3wzjwb] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}

.accordion-button.collapsed .accordion-toggle-icon[b-9rto3wzjwb] {
    transform: rotate(0deg);
}

.accordion-toggle-icon[b-9rto3wzjwb] {
    display: inline-block;
    font-size: 12px;
    transition: transform 0.15s ease;
}

.accordion-button:not(.collapsed) .accordion-toggle-icon[b-9rto3wzjwb] {
    transform: rotate(90deg);
}

.accordion-title[b-9rto3wzjwb] {
    display: inline;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.meta-ads-create-accordion-body[b-9rto3wzjwb] {
    margin-top: 16px;
}

.variant-label[b-9rto3wzjwb] {
    margin-bottom: 8px;
    display: block;
}

.variants-list[b-9rto3wzjwb] {
    margin-bottom: 12px;
}

.variant-group[b-9rto3wzjwb] {
    margin-top: 16px;
}

.variant-input-row[b-9rto3wzjwb] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.meta-ads-create-variant-input[b-9rto3wzjwb] {
    flex: 1;
    min-height: 80px;
}

.meta-ads-create-variant-add-btn[b-9rto3wzjwb] {
    padding: 8px 16px;
    align-self: flex-start;
}

.platform-options[b-9rto3wzjwb] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 0;
}

.platform-option[b-9rto3wzjwb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.platform-option label[b-9rto3wzjwb] {
    margin: 0;
    cursor: pointer;
}

.safety-net-intro[b-9rto3wzjwb] {
    color: var(--text-muted);
    margin-bottom: 16px;
    font-size: 0.875rem;
}

.safety-rule-card[b-9rto3wzjwb] {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 16px;
    background: var(--card-bg-hover);
}

.safety-rule-card:last-child[b-9rto3wzjwb] {
    margin-bottom: 0;
}

.safety-rule-header[b-9rto3wzjwb] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.safety-rule-toggle[b-9rto3wzjwb] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.safety-rule-label[b-9rto3wzjwb] {
    margin: 0;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
    color: var(--text-primary);
}

.safety-rule-description[b-9rto3wzjwb] {
    margin: 0 0 12px 30px;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.safety-rule-input-row[b-9rto3wzjwb] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 30px;
    flex-wrap: wrap;
}

.safety-rule-input-label[b-9rto3wzjwb] {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.safety-rule-input[b-9rto3wzjwb] {
    width: 120px;
}

.media-modal-overlay[b-9rto3wzjwb] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.media-modal-dialog[b-9rto3wzjwb] {
    background: var(--card-bg, #fff);
    padding: 24px;
    border-radius: 12px;
    width: min(90vw, 800px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border: 1px solid var(--card-border);
}

.media-modal-header[b-9rto3wzjwb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.media-modal-title[b-9rto3wzjwb] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.media-modal-close-button[b-9rto3wzjwb] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-primary);
}

.upload-section[b-9rto3wzjwb] {
    padding: 16px;
    border: 2px dashed var(--color-primary-light, #5eead4);
    border-radius: 8px;
    text-align: center;
    background: rgba(15, 118, 110, 0.08);
}

.upload-section-label[b-9rto3wzjwb] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
}

.media-upload-input[b-9rto3wzjwb] {
    max-width: 100%;
    width: auto;
    color: var(--text-primary);
    font-family: 'Quicksand', sans-serif;
}

.media-upload-input[b-9rto3wzjwb]::file-selector-button {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.96);
    color: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.7);
    border-radius: 10px;
    padding: 0.7rem 1.1rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin-right: 0.75rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: background 0.2s ease, transform 0.2s ease;
}

.media-upload-input[b-9rto3wzjwb]::file-selector-button:hover {
    background: #e2e8f0;
    transform: translateY(-1px);
}

.btn-secondary[b-9rto3wzjwb],
.btn-primary[b-9rto3wzjwb] {
    border-radius: var(--radius-sm);
    padding: 0.6rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary[b-9rto3wzjwb] {
    background: var(--card-bg);
    color: var(--color-primary);
    border-color: var(--card-border);
}

.btn-secondary:hover:not(:disabled)[b-9rto3wzjwb] {
    background: rgba(20, 184, 166, 0.06);
    border-color: var(--color-primary);
}

.btn-primary[b-9rto3wzjwb] {
    background: var(--color-primary);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover:not(:disabled)[b-9rto3wzjwb] {
    background: var(--color-primary-dark);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.18);
    transform: translateY(-1px);
}

.btn-secondary:disabled[b-9rto3wzjwb],
.btn-primary:disabled[b-9rto3wzjwb] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.media-upload-status[b-9rto3wzjwb] {
    color: var(--color-primary);
    margin-top: 8px;
    font-size: 0.875rem;
}

.gallery-section[b-9rto3wzjwb] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.gallery-section .empty-state[b-9rto3wzjwb] {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 20px;

}

.media-gallery-grid[b-9rto3wzjwb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    padding: 4px;
}

.media-thumb-card[b-9rto3wzjwb] {
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1;
    background: var(--form-input-bg);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.media-thumb-card.selected[b-9rto3wzjwb] {
    border-color: var(--color-primary);
}

.media-thumb-card:hover[b-9rto3wzjwb] {
    transform: translateY(-1px);
}

.media-thumb-image[b-9rto3wzjwb] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-thumb-check[b-9rto3wzjwb] {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.media-modal-footer[b-9rto3wzjwb] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid var(--border-color, #eee);
    padding-top: 16px;
}

.media-modal-done-btn[b-9rto3wzjwb] {
    min-width: 170px;
    background: rgba(255, 255, 255, 0.96);
    color: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.7);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    font-weight: 700;
}

.media-modal-done-btn:hover:not(:disabled)[b-9rto3wzjwb] {
    background: #f1f5f9;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .meta-ads-create-media-btn[b-9rto3wzjwb] {
        width: 100%;
    }

    .variant-input-row[b-9rto3wzjwb] {
        flex-direction: column;
    }

    .meta-ads-create-variant-add-btn[b-9rto3wzjwb] {
        width: 100%;
    }

    .safety-rule-input-row[b-9rto3wzjwb] {
        margin-left: 0;
    }
}

/* ══ Form Actions ══════════════════════════════════════════════════════════ */
.form-actions[b-9rto3wzjwb] {
    display: flex;
    gap: 0.875rem;
    justify-content: flex-end;
    padding-top: 0.5rem;
}

.meta-ads-create-btn-cancel[b-9rto3wzjwb] {
    padding: 0.625rem 1.5rem;
    border: 1.5px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.meta-ads-create-btn-cancel:hover[b-9rto3wzjwb] {
    background: var(--card-bg-hover);
    border-color: var(--color-primary-light);
}

.meta-ads-create-btn-save[b-9rto3wzjwb] {
    padding: 0.625rem 2rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.meta-ads-create-btn-save:hover:not(:disabled)[b-9rto3wzjwb] {
    box-shadow: 0 4px 12px rgba(0, 128, 128, 0.3);
    transform: translateY(-1px);
}

.meta-ads-create-btn-save:disabled[b-9rto3wzjwb] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ══ Responsive ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .meta-ads-create-page[b-9rto3wzjwb] {
        padding: 1rem;
        gap: 1.5rem;
    }

    .meta-ads-create-header[b-9rto3wzjwb] {
        flex-direction: column;
        gap: 1rem;
    }

    .meta-ads-create-title[b-9rto3wzjwb] {
        font-size: 1.5rem;
    }

    .form-field-row[b-9rto3wzjwb] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .form-actions[b-9rto3wzjwb] {
        flex-direction: column-reverse;
    }

    .meta-ads-create-btn-cancel[b-9rto3wzjwb],
    .meta-ads-create-btn-save[b-9rto3wzjwb] {
        width: 100%;
    }
}

.carousel-card-list[b-9rto3wzjwb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.carousel-card-editor[b-9rto3wzjwb] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card-bg);
}

.carousel-card-thumb[b-9rto3wzjwb] {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.carousel-card-fields[b-9rto3wzjwb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
/* /Pages/Authorized/MetaAds/MetaAdsHub.razor.rz.scp.css */
.meta-ads-page[b-jtj1m05m5q] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

.meta-ads-header[b-jtj1m05m5q] {
    display: flex;
    max-width: 1400px;
    margin: 0 auto 20px;
    justify-content: space-between;
    align-items: center;
    padding: 28px;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    gap: 16px;
    flex-wrap: wrap;
}

.meta-ads-header-left[b-jtj1m05m5q] {
    display: flex;
    align-items: flex-start;
}

.meta-ads-header-left > div[b-jtj1m05m5q] {
    display: flex;
    flex-direction: column;
}

.meta-ads-title[b-jtj1m05m5q] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.meta-ads-subtitle[b-jtj1m05m5q] {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--text-muted);
}

.meta-ads-actions[b-jtj1m05m5q] {
    max-width: 1400px;
    margin: 0 auto 20px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.meta-ads-btn[b-jtj1m05m5q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.meta-ads-btn-primary[b-jtj1m05m5q] {
    padding: 0.625rem 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    display: inline-block;
}

.meta-ads-btn-primary:hover:not(:disabled)[b-jtj1m05m5q] {
    box-shadow: 0 4px 12px rgba(0, 128, 128, 0.3);
    transform: translateY(-1px);
}

.meta-ads-btn-secondary[b-jtj1m05m5q] {
    padding: 0.625rem 1.5rem;
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    display: inline-block;
}

.meta-ads-btn-secondary:hover:not(:disabled)[b-jtj1m05m5q] {
    background: var(--card-bg-hover);
    border-color: var(--color-primary-light);
}

.meta-ads-btn:disabled[b-jtj1m05m5q] {
    opacity: 0.5;
    cursor: not-allowed;
}

.meta-ads-cards-grid[b-jtj1m05m5q] {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.meta-ads-card[b-jtj1m05m5q] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.meta-ads-card:hover[b-jtj1m05m5q] {
    border-color: #0071e3;
    box-shadow: 0 8px 24px rgba(0, 113, 227, 0.12);
    transform: translateY(-2px);
}

.meta-ads-card-accent[b-jtj1m05m5q] {
    background: linear-gradient(135deg, rgba(0, 113, 227, 0.08) 0%, rgba(0, 82, 179, 0.04) 100%);
    border-color: rgba(0, 113, 227, 0.2);
}

.card-header[b-jtj1m05m5q] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.card-icon-box[b-jtj1m05m5q] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e0f0ff 0%, #d6e9ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #0071e3;
}

.card-icon-advanced[b-jtj1m05m5q] {
    background: linear-gradient(135deg, #fff4e6 0%, #ffe8cc 100%);
    color: #f59e0b;
}

.card-icon-rules[b-jtj1m05m5q] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    color: #10b981;
}

.card-title[b-jtj1m05m5q] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.card-body[b-jtj1m05m5q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-description[b-jtj1m05m5q] {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
}

.card-features[b-jtj1m05m5q] {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-features li[b-jtj1m05m5q] {
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-features li[b-jtj1m05m5q]::before {
    content: "✓";
    color: #10b981;
    font-weight: 600;
    flex-shrink: 0;
}

.card-footer[b-jtj1m05m5q] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: auto;
}

.meta-ads-btn-card[b-jtj1m05m5q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    color: #0071e3;
    border: 1px solid #0071e3;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.meta-ads-btn-card:hover[b-jtj1m05m5q] {
    background: #f0f7ff;
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.2);
}

.meta-ads-btn-card i[b-jtj1m05m5q] {
    font-size: 12px;
    transition: transform 0.15s;
}

.meta-ads-btn-card:hover i[b-jtj1m05m5q] {
    transform: translateX(2px);
}

.meta-ads-footer[b-jtj1m05m5q] {
    max-width: 1400px;
    margin: 24px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.meta-ads-link[b-jtj1m05m5q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0071e3;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.15s;
}

.meta-ads-link:hover[b-jtj1m05m5q] {
    color: #0052b3;
    gap: 8px;
}

.meta-ads-link i[b-jtj1m05m5q] {
    font-size: 16px;
}

@media (max-width: 768px) {
    .meta-ads-page[b-jtj1m05m5q] {
        padding: 16px 16px 75px;
    }

    .meta-ads-header[b-jtj1m05m5q] {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        margin-bottom: 16px;
    }

    .meta-ads-title[b-jtj1m05m5q] {
        font-size: 24px;
    }

    .meta-ads-actions[b-jtj1m05m5q] {
        width: 100%;
    }

    .meta-ads-btn[b-jtj1m05m5q] {
        flex: 1;
        min-width: 0;
    }

    .meta-ads-cards-grid[b-jtj1m05m5q] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
/* /Pages/Authorized/MetaAds/MetaCampaigns.razor.rz.scp.css */
.meta-ads-page[b-7erw005qdc] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

/* ══ Header Block ══════════════════════════════════════════════════════════ */
.meta-ads-header-block[b-7erw005qdc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto 1.5rem;
    padding: 24px;
    background: var(--card-bg);
    border-radius: 18px;
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.meta-ads-header-block > div:first-child[b-7erw005qdc] {
    flex: 1;
}

.meta-ads-page-title[b-7erw005qdc] {
    font-size: 1.875rem;
    font-weight: 700;
    margin: 0 0 0.375rem;
    color: var(--text-primary);
}

.meta-ads-page-subtitle[b-7erw005qdc] {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0;
}

.meta-ads-header-actions[b-7erw005qdc] {
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.meta-ads-btn-primary[b-7erw005qdc] {
    padding: 0.625rem 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    display: inline-block;
}

.meta-ads-btn-primary:hover[b-7erw005qdc] {
    box-shadow: 0 4px 12px rgba(0, 128, 128, 0.3);
    transform: translateY(-1px);
}

.meta-ads-btn-secondary[b-7erw005qdc] {
    padding: 0.625rem 1.5rem;
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    display: inline-block;
}

.meta-ads-btn-secondary:hover[b-7erw005qdc] {
    background: var(--card-bg-hover);
    border-color: var(--color-primary-light);
}

/* ══ Selector Block ════════════════════════════════════════════════════════ */
.meta-ads-selector-block[b-7erw005qdc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 1400px;
    margin: 0 auto 1.5rem;
    padding: 24px;
    background: var(--card-bg);
    border-radius: 18px;
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.meta-ads-selector-label[b-7erw005qdc] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ══ Loading & Empty States ════════════════════════════════════════════════ */
.meta-ads-loading-state[b-7erw005qdc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    font-size: 0.9375rem;
    color: var(--text-muted);
    padding: 3rem;
    min-height: 300px;
}

.meta-ads-empty-state[b-7erw005qdc] {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-title[b-7erw005qdc] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.empty-subtitle[b-7erw005qdc] {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}

.spinner[b-7erw005qdc] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-7erw005qdc 0.6s linear infinite;
}

@keyframes spin-b-7erw005qdc {
    to { transform: rotate(360deg); }
}

/* ══ Campaigns Grid ════════════════════════════════════════════════════════ */
.meta-ads-campaigns-grid[b-7erw005qdc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.campaign-card[b-7erw005qdc] {
    background: var(--card-bg);
    border: 1.5px solid var(--card-border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: all 0.2s;
}

.campaign-card:hover[b-7erw005qdc] {
    border-color: var(--color-primary-light);
    box-shadow: 0 4px 16px rgba(0, 128, 128, 0.12);
}

.campaign-card-header[b-7erw005qdc] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.campaign-card-title[b-7erw005qdc] {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
    flex: 1;
}

.campaign-card-badge[b-7erw005qdc] {
    padding: 0.375rem 0.875rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.campaign-card-body[b-7erw005qdc] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.campaign-card-row[b-7erw005qdc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.campaign-card-label[b-7erw005qdc] {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

.campaign-card-value[b-7erw005qdc] {
    font-size: 0.9375rem;
    color: var(--text-primary);
    font-weight: 600;
}

.campaign-card-footer[b-7erw005qdc] {
    padding-top: 0.75rem;
    border-top: 1.5px solid var(--card-border);
}

.campaign-card-actions[b-7erw005qdc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.campaign-card-action[b-7erw005qdc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.campaign-card-action:hover[b-7erw005qdc] {
    background: var(--info-box-bg);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.campaign-card-action.insights-btn[b-7erw005qdc] {
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

.campaign-card-action.insights-btn:hover[b-7erw005qdc] {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
    color: #10b981;
}

/* ══ Responsive ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .meta-ads-page[b-7erw005qdc] {
        padding: 1rem;
    }

    .meta-ads-header-block[b-7erw005qdc] {
        flex-direction: column;
        gap: 1rem;
    }

    .meta-ads-header-actions[b-7erw005qdc] {
        width: 100%;
        justify-content: stretch;
    }

    .meta-ads-btn-primary[b-7erw005qdc],
    .meta-ads-btn-secondary[b-7erw005qdc] {
        flex: 1;
        min-width: 100px;
    }

    .meta-ads-campaigns-grid[b-7erw005qdc] {
        grid-template-columns: 1fr;
    }

    .meta-ads-page-title[b-7erw005qdc] {
        font-size: 1.5rem;
    }
}
/* /Pages/Authorized/MetaAds/OnboardingWizard.razor.rz.scp.css */
.onboarding-shell[b-zlmnz523de] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

/* Header */
.onboarding-header[b-zlmnz523de] {
    text-align: center;
    max-width: 1400px;
    margin: 0 auto 1.5rem;
    padding: 24px;
    background: var(--card-bg);
    border-radius: 18px;
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

.onboarding-header h1[b-zlmnz523de] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.3px;
}

.onboarding-header p[b-zlmnz523de] {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0;
}

/* Stepper */
.onboarding-stepper[b-zlmnz523de] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.onboarding-step[b-zlmnz523de] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.onboarding-step--active[b-zlmnz523de] {
    opacity: 1;
}

.onboarding-step--done[b-zlmnz523de] {
    opacity: 1;
}

.onboarding-step-circle[b-zlmnz523de] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-surface-alt);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.onboarding-step--active .onboarding-step-circle[b-zlmnz523de] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.2);
}

.onboarding-step--done .onboarding-step-circle[b-zlmnz523de] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.onboarding-step span[b-zlmnz523de] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.onboarding-step--active span[b-zlmnz523de] {
    color: var(--color-primary);
}

.onboarding-step-line[b-zlmnz523de] {
    width: 3rem;
    height: 2px;
    background: var(--color-surface-alt);
    opacity: 0.3;
    transition: all 0.3s ease;
}

.onboarding-step-line--done[b-zlmnz523de] {
    background: var(--color-primary);
    opacity: 1;
}

/* Content */
.onboarding-content[b-zlmnz523de] {
    max-width: 1400px;
    margin: 0 auto 1.5rem;
    position: relative;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.onboarding-card[b-zlmnz523de] {
    padding: 2rem;
    background: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
    animation: fadeIn-b-zlmnz523de 0.3s ease;
}

@keyframes fadeIn-b-zlmnz523de {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.onboarding-section[b-zlmnz523de] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.onboarding-section h2[b-zlmnz523de] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.onboarding-help[b-zlmnz523de] {
    font-size: 1rem;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.6;
}

/* Benefits Section */
.onboarding-benefits[b-zlmnz523de] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.benefit-item[b-zlmnz523de] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(20, 184, 166, 0.03);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(20, 184, 166, 0.1);
    transition: all 0.3s ease;
}

.benefit-item:hover[b-zlmnz523de] {
    background: rgba(20, 184, 166, 0.08);
    border-color: rgba(20, 184, 166, 0.2);
}

.benefit-icon[b-zlmnz523de] {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.benefit-item h3[b-zlmnz523de] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 0.25rem 0;
}

.benefit-item p[b-zlmnz523de] {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.5;
}

/* Permissions Section */
.onboarding-permissions[b-zlmnz523de] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.permission-item[b-zlmnz523de] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: rgba(20, 184, 166, 0.02);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(20, 184, 166, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

.permission-item:hover[b-zlmnz523de] {
    background: rgba(20, 184, 166, 0.05);
}

.permission-item input[type="checkbox"][b-zlmnz523de] {
    margin-top: 0.25rem;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.permission-item label[b-zlmnz523de] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    cursor: pointer;
    flex: 1;
    margin: 0;
}

.permission-name[b-zlmnz523de] {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 1rem;
}

.permission-desc[b-zlmnz523de] {
    font-size: 0.9rem;
    color: var(--text-dark);
}

/* Notice */
.onboarding-notice[b-zlmnz523de] {
    padding: 1.5rem;
    background: var(--info-box-bg);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-primary);
}

.onboarding-notice p[b-zlmnz523de] {
    font-size: 0.95rem;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.6;
}

/* Summary Section */
.onboarding-summary[b-zlmnz523de] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(20, 184, 166, 0.03);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(20, 184, 166, 0.1);
}

.summary-item[b-zlmnz523de] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-label[b-zlmnz523de] {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 0.95rem;
}

.summary-value[b-zlmnz523de] {
    color: var(--text-dark);
    font-size: 0.95rem;
}

/* Warning */
.onboarding-warning[b-zlmnz523de] {
    padding: 1rem 1.5rem;
    background: rgba(239, 68, 68, 0.08);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.onboarding-warning p[b-zlmnz523de] {
    font-size: 0.95rem;
    color: var(--text-dark);
    margin: 0;
}

/* Error Message */
.onboarding-error[b-zlmnz523de] {
    padding: 1.5rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--danger-color);
}

.onboarding-error p[b-zlmnz523de] {
    margin: 0;
    font-size: 0.95rem;
}

/* Loading Overlay */
.onboarding-loading-overlay[b-zlmnz523de] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 1000;
}

.onboarding-loading-overlay p[b-zlmnz523de] {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0;
}

/* Footer */
.onboarding-footer[b-zlmnz523de] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding-top: 1rem;
}

/* Buttons */
.onboarding-btn-primary[b-zlmnz523de],
.onboarding-btn-secondary[b-zlmnz523de] {
    padding: 0.875rem 2rem;
    border-radius: var(--radius-sm);
    border: none;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: -0.3px;
}

.onboarding-btn-primary[b-zlmnz523de] {
    background: var(--color-primary);
    color: white;
    box-shadow: var(--shadow-sm);
}

.onboarding-btn-primary:hover:not(:disabled)[b-zlmnz523de] {
    background: var(--color-primary-dark);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.2);
    transform: translateY(-2px);
}

.onboarding-btn-primary:active:not(:disabled)[b-zlmnz523de] {
    transform: translateY(0);
}

.onboarding-btn-primary:disabled[b-zlmnz523de] {
    opacity: 0.5;
    cursor: not-allowed;
}

.onboarding-btn-secondary[b-zlmnz523de] {
    background: var(--color-surface-alt);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.onboarding-btn-secondary:hover:not(:disabled)[b-zlmnz523de] {
    background: var(--color-surface);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.onboarding-btn-secondary:active:not(:disabled)[b-zlmnz523de] {
    transform: translateY(0);
}

.onboarding-btn-secondary:disabled[b-zlmnz523de] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
    .onboarding-shell[b-zlmnz523de] {
        padding: 1rem;
        gap: 1.5rem;
    }

    .onboarding-stepper[b-zlmnz523de] {
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1rem;
    }

    .onboarding-step[b-zlmnz523de] {
        flex: 1 1 calc(33.333% - 1rem);
        min-width: 80px;
    }

    .onboarding-step-line[b-zlmnz523de] {
        display: none;
    }

    .onboarding-card[b-zlmnz523de] {
        padding: 1.5rem;
    }

    .onboarding-header h1[b-zlmnz523de] {
        font-size: 1.5rem;
    }

    .onboarding-footer[b-zlmnz523de] {
        flex-direction: column;
    }

    .onboarding-btn-primary[b-zlmnz523de],
    .onboarding-btn-secondary[b-zlmnz523de] {
        width: 100%;
    }
}
/* /Pages/Authorized/SpinnerExamples.razor.rz.scp.css */
.examples-page[b-xmr8b9tl7i] {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.page-header[b-xmr8b9tl7i] {
    margin-bottom: 3rem;
}

.page-header h1[b-xmr8b9tl7i] {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.page-subtitle[b-xmr8b9tl7i] {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.example-section[b-xmr8b9tl7i] {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

.example-section h2[b-xmr8b9tl7i] {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.example-section > p[b-xmr8b9tl7i] {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.spinner-demo-row[b-xmr8b9tl7i] {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.spinner-demo-item[b-xmr8b9tl7i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    min-width: 150px;
}

.spinner-demo-item h4[b-xmr8b9tl7i] {
    color: var(--text-primary);
    margin: 0;
    font-size: 0.875rem;
}

.demo-table[b-xmr8b9tl7i] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.demo-table-wrapper[b-xmr8b9tl7i] {
    width: 100%;
    overflow-x: auto;
}

.demo-table thead[b-xmr8b9tl7i] {
    background: var(--color-surface-alt);
}

.demo-table th[b-xmr8b9tl7i] {
    padding: 1rem;
    text-align: left;
    color: var(--text-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
}

.demo-table td[b-xmr8b9tl7i] {
    padding: 1rem;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(20, 184, 166, 0.1);
}

.demo-table tbody tr:hover[b-xmr8b9tl7i] {
    background: var(--color-surface-alt);
}

.demo-card[b-xmr8b9tl7i] {
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    padding: 2rem;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.demo-card h3[b-xmr8b9tl7i] {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.demo-card p[b-xmr8b9tl7i] {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.demo-section[b-xmr8b9tl7i] {
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    padding: 2rem;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.demo-section p[b-xmr8b9tl7i] {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.btn-primary[b-xmr8b9tl7i], .btn-secondary[b-xmr8b9tl7i] {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}

.btn-primary[b-xmr8b9tl7i] {
    background: var(--gradient-primary);
    color: var(--text-white);
}

.btn-primary:hover:not(:disabled)[b-xmr8b9tl7i] {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(20, 184, 166, 0.3);
}

.btn-secondary[b-xmr8b9tl7i] {
    background: var(--color-surface-alt);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled)[b-xmr8b9tl7i] {
    background: rgba(20, 184, 166, 0.1);
}

.btn-primary:disabled[b-xmr8b9tl7i],
.btn-secondary:disabled[b-xmr8b9tl7i] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .examples-page[b-xmr8b9tl7i] {
        padding: 1rem;
    }

    .page-header[b-xmr8b9tl7i] {
        margin-bottom: 1.75rem;
    }

    .page-header h1[b-xmr8b9tl7i] {
        font-size: 1.7rem;
    }

    .example-section[b-xmr8b9tl7i],
    .demo-card[b-xmr8b9tl7i],
    .demo-section[b-xmr8b9tl7i] {
        padding: 1.25rem;
    }

    .spinner-demo-row[b-xmr8b9tl7i] {
        gap: 1rem;
    }

    .spinner-demo-item[b-xmr8b9tl7i] {
        flex: 1 1 130px;
        min-width: 130px;
        padding: 1rem;
    }

    .demo-table[b-xmr8b9tl7i] {
        min-width: 540px;
    }
}
/* /Pages/Authorized/TeamManagement.razor.rz.scp.css */

.team-management-container[b-z5neb19r88] {
    padding: 2rem 1rem 75px 1rem;
    background: var(--page-bg);
    color: var(--text-primary);
    min-height: 100vh;
}

.page-header[b-z5neb19r88] {
    max-width: 1400px;
    margin: 0 auto 2rem;
}

.page-header h1[b-z5neb19r88] {
    font-size: 1.8rem;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.3px;
    margin: 0 0 0.5rem 0;
}

.page-subtitle[b-z5neb19r88] {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* Alert Styling */
.alert-box[b-z5neb19r88] {
    margin-bottom: 1.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid;
    overflow: hidden;
}

.alert-content[b-z5neb19r88] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
}

.alert-close[b-z5neb19r88] {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.alert-close:hover[b-z5neb19r88] {
    opacity: 1;
}

.success-alert[b-z5neb19r88] {
    background: rgba(39, 201, 63, 0.1);
    border-color: rgba(39, 201, 63, 0.3);
    color: var(--status-approved-text);
}

.error-alert[b-z5neb19r88] {
    background: rgba(255, 95, 86, 0.1);
    border-color: rgba(255, 95, 86, 0.3);
    color: var(--status-rejected-text);
}

/* Tabs */
.tabs-container[b-z5neb19r88] {
    background: transparent;
    max-width: 1400px;
    margin: 1rem auto;
}

.tabs-header[b-z5neb19r88] {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2rem;
    padding-bottom: 0;
}

.tab-button[b-z5neb19r88] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    bottom: -1px;
}

.tab-button:hover[b-z5neb19r88] {
    color: var(--text-primary);
}

.tab-button.active[b-z5neb19r88] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tab-icon[b-z5neb19r88] {
    font-size: 1.1rem;
}

.tab-pane[b-z5neb19r88] {
    animation: fadeIn-b-z5neb19r88 0.3s ease;
}

@keyframes fadeIn-b-z5neb19r88 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Card Styling */
.card[b-z5neb19r88] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    color: var(--text-primary);
}

.card-header[b-z5neb19r88] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg-hover);
}

.card-header h5[b-z5neb19r88] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.card-body[b-z5neb19r88] {
    padding: 1.75rem;
}

/* Form Styling */
.form-grid[b-z5neb19r88] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.form-group-full[b-z5neb19r88] {
    grid-column: 1 / -1;
}

.form-group[b-z5neb19r88] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label[b-z5neb19r88] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.required[b-z5neb19r88] {
    color: var(--danger-color);
    text-transform: none;
}

.form-input[b-z5neb19r88],
.form-select[b-z5neb19r88] {
    padding: 0.75rem 1rem;
    background: var(--input-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.2s;
    width: 100%;
}

.form-input[b-z5neb19r88]::placeholder {
    color: var(--text-muted);
}

.form-input:focus[b-z5neb19r88],
.form-select:focus[b-z5neb19r88] {
    outline: none;
    background: var(--input-background-focus);
    border-color: var(--color-primary-light);
    box-shadow: var(--input-shadow);
}

.form-select option[b-z5neb19r88],
option[b-z5neb19r88] {
    color: var(--text-primary);
    background: var(--card-bg);
}

.input-with-status[b-z5neb19r88] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-status .form-input[b-z5neb19r88] {
    width: 100%;
    padding-right: 2.5rem;
}

.input-status[b-z5neb19r88] {
    position: absolute;
    right: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.input-status.success[b-z5neb19r88] { color: var(--status-approved-text); }
.input-status.error[b-z5neb19r88] { color: var(--status-rejected-text); }
.input-status.loading[b-z5neb19r88] { color: var(--text-muted); }

.spinner-mini[b-z5neb19r88] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(20, 184, 166, 0.2);
    border-top-color: var(--color-primary-light);
    border-radius: 50%;
    animation: spin-b-z5neb19r88 0.6s linear infinite;
}

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

.validation-message[b-z5neb19r88] {
    font-size: 0.8rem;
    margin-top: 0.1rem;
}

.validation-message.success[b-z5neb19r88] { color: var(--status-approved-text); }
.validation-message.error[b-z5neb19r88] { color: var(--status-rejected-text); }

.validation-error-text[b-z5neb19r88] {
    color: var(--status-rejected-text);
    font-size: 0.8rem;
}

.form-text[b-z5neb19r88] {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Password input actions */
.input-with-actions[b-z5neb19r88] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.input-with-actions .form-input[b-z5neb19r88] {
    width: 100%;
    /* padding-right: 2.5rem; */
    padding-right: 0.75rem;
}

.btn-icon-small[b-z5neb19r88] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    background: var(--input-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--color-primary-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon-small:hover[b-z5neb19r88] {
    background: var(--input-background-focus);
    border-color: var(--color-primary-light);
}

.password-input-group[b-z5neb19r88] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.password-input-group .form-input[b-z5neb19r88] {
    flex: 1;
}

.btn-generate[b-z5neb19r88] {
    padding: 0.75rem 1rem;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--radius-sm);
    color: var(--color-secondary-dark);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-generate:hover[b-z5neb19r88] {
    background: rgba(245, 158, 11, 0.22);
    transform: translateY(-1px);
}

.mt-2[b-z5neb19r88] { margin-top: 0.5rem; }
.p-2[b-z5neb19r88] { padding: 0.5rem; }
.mb-0[b-z5neb19r88] { margin-bottom: 0; }
.mt-1[b-z5neb19r88] { margin-top: 0.25rem; }
.small[b-z5neb19r88] { font-size: 0.82rem; }

.border-start[b-z5neb19r88] {
    border-left: 3px solid;
    padding-left: 0.75rem !important;
}

.border-success[b-z5neb19r88] { border-color: var(--green-light); }
.border-warning[b-z5neb19r88] { border-color: var(--color-secondary); }

.text-muted[b-z5neb19r88] { color: var(--text-muted); }

/* Form Actions */
.form-actions[b-z5neb19r88] {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    margin-top: 1.5rem;
}

/* Buttons */
.btn[b-z5neb19r88],
.btn-primary[b-z5neb19r88],
.btn-secondary[b-z5neb19r88],
.btn-outline-secondary[b-z5neb19r88],
.btn-danger[b-z5neb19r88] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary[b-z5neb19r88] {
    background: var(--gradient-secondary);
    color: var(--text-inverse);
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.25);
}

.btn-primary:hover:not(:disabled)[b-z5neb19r88] {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(245, 158, 11, 0.4);
}

.btn-primary:disabled[b-z5neb19r88] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-loading[b-z5neb19r88] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-secondary[b-z5neb19r88],
.btn-outline-secondary[b-z5neb19r88] {
    background: var(--input-background);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled)[b-z5neb19r88],
.btn-outline-secondary:hover:not(:disabled)[b-z5neb19r88] {
    background: var(--input-background-focus);
    border-color: var(--color-primary-light);
    color: var(--text-primary);
    transform: translateY(-2px);
}

.btn-secondary:disabled[b-z5neb19r88],
.btn-outline-secondary:disabled[b-z5neb19r88] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger[b-z5neb19r88] {
    background: linear-gradient(135deg, #ff5f56 0%, #d63b32 100%);
    color: var(--text-white);
    box-shadow: 0 10px 25px rgba(255, 95, 86, 0.25);
}

.btn-danger:hover:not(:disabled)[b-z5neb19r88] {
    box-shadow: 0 15px 35px rgba(255, 95, 86, 0.4);
    transform: translateY(-2px);
}

.btn-danger:disabled[b-z5neb19r88] {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner-border[b-z5neb19r88] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: currentColor;
    animation: spin-b-z5neb19r88 0.8s linear infinite;
}

.spinner-border-sm[b-z5neb19r88] {
    width: 0.9rem;
    height: 0.9rem;
}

.me-2[b-z5neb19r88] { margin-right: 0.5rem; }

/* Empty / info alert */
.alert-info[b-z5neb19r88],
.empty-state[b-z5neb19r88] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    background: var(--input-background);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
}

.loading-container[b-z5neb19r88],
.text-center[b-z5neb19r88] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.visually-hidden[b-z5neb19r88] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* Table */
.table-responsive[b-z5neb19r88],
.users-table-container[b-z5neb19r88] {
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.table[b-z5neb19r88],
.users-table[b-z5neb19r88] {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    --bs-table-bg: var(--card-bg);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-hover-bg: var(--card-bg-hover);
    --bs-table-hover-color: var(--text-primary);
}

.table-light[b-z5neb19r88],
.users-table thead[b-z5neb19r88] {
    border-bottom: 2px solid var(--border-color);
    --bs-table-bg: var(--card-bg);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
}

.table th[b-z5neb19r88],
.users-table th[b-z5neb19r88] {
    padding: 1rem;
    text-align: left;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--card-bg);
    white-space: nowrap;
}

tbody td[b-z5neb19r88],
.users-table td[b-z5neb19r88] {
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
}


.table td[b-z5neb19r88],
.users-table td[b-z5neb19r88] {
    padding: 1rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    vertical-align: middle;
}

.badge[b-z5neb19r88] {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.bg-info[b-z5neb19r88],
.role-badge[b-z5neb19r88] {
    background-color: rgba(20, 184, 166, 0.15) !important;
    border: 1px solid rgba(20, 184, 166, 0.3);
    color: var(--text-primary) !important;
}

.bg-success[b-z5neb19r88] {
    background-color: var(--status-approved-bg) !important;
    border: 1px solid rgba(39, 201, 63, 0.35);
    color: var(--status-approved-text) !important;
}

.bg-secondary[b-z5neb19r88] {
    background-color: var(--input-background) !important;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

.actions-column[b-z5neb19r88] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-sm[b-z5neb19r88] {
    padding: 0.5rem 0.85rem;
    font-size: 0.8rem;
}

.btn-warning[b-z5neb19r88] {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: var(--color-secondary-dark);
}

.btn-warning:hover[b-z5neb19r88] {
    background: rgba(245, 158, 11, 0.22);
    border-color: var(--color-secondary);
}

.btn-action[b-z5neb19r88] {
    padding: 0.5rem 0.75rem;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-action:hover[b-z5neb19r88] {
    background: var(--input-background-focus);
    color: var(--color-primary-light);
    border-color: var(--color-primary-light);
}

.btn-action.edit[b-z5neb19r88] { color: var(--color-primary-light); }

.btn-action.password[b-z5neb19r88] {
    color: var(--color-secondary);
}

.btn-action.password:hover[b-z5neb19r88] {
    color: var(--color-secondary-dark);
    border-color: var(--color-secondary);
}

.btn-action.delete[b-z5neb19r88] { color: var(--red-light); }

.btn-action.delete:hover[b-z5neb19r88] {
    background: rgba(255, 95, 86, 0.1);
    border-color: var(--red-light);
}

/* ===== Modal ===== */
.modal[b-z5neb19r88],
.modal-overlay[b-z5neb19r88] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(2, 6, 23, 0.65) !important;
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-dialog[b-z5neb19r88] {
    background: transparent;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-z5neb19r88 0.3s ease-out;
    margin: 0 auto;
}

.modal-content[b-z5neb19r88] {
    background: linear-gradient(180deg, var(--modal-bg-top) 0%, var(--modal-bg-bottom) 100%);
    border: 1px solid var(--modal-border);
    border-radius: var(--radius-md);
    box-shadow: var(--modal-shadow);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--modal-text);
}

.modal-dialog.modal-danger .modal-content[b-z5neb19r88] {
    border-left: 4px solid var(--red-light);
}

@keyframes slideUp-b-z5neb19r88 {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-header[b-z5neb19r88] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid var(--border-color);
    gap: 1rem;
}

.modal-title[b-z5neb19r88] {
    font-size: 1.1rem;
    color: var(--modal-text);
    margin: 0;
    font-weight: 600;
}

.modal-close[b-z5neb19r88],
.btn-close[b-z5neb19r88] {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    opacity: 1;
}

.modal-close:hover[b-z5neb19r88],
.btn-close:hover[b-z5neb19r88] {
    color: var(--modal-text);
}

.btn-close[b-z5neb19r88]::before {
    content: "×";
    line-height: 1;
}

.modal-body[b-z5neb19r88] {
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-z5neb19r88] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem 1.75rem;
    border-top: 1px solid var(--border-color);
    background: transparent;
}

.modal-body .form-group[b-z5neb19r88] { margin-bottom: 1.25rem; }
.modal-body .form-group:last-child[b-z5neb19r88] { margin-bottom: 0; }

.modal-body .form-label[b-z5neb19r88] {
    display: block;
    margin-bottom: 0.5rem;
}

.modal-body .required[b-z5neb19r88] { color: var(--danger-color); }

.modal-body .form-input[b-z5neb19r88],
.modal-body input[type="password"][b-z5neb19r88],
.modal-body input[type="text"][b-z5neb19r88],
.modal-body input[type="email"][b-z5neb19r88] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    color: var(--text-primary);
    background: var(--input-background);
    transition: all 0.2s;
}

.modal-body .form-input:focus[b-z5neb19r88],
.modal-body input:focus[b-z5neb19r88] {
    outline: none;
    border-color: var(--color-primary-light);
    background: var(--input-background-focus);
    box-shadow: var(--input-shadow);
}

.modal-body .validation-error-text[b-z5neb19r88] {
    display: block;
    font-size: 0.82rem;
    color: var(--status-rejected-text);
    margin-top: 0.25rem;
}

.modal-body .validation-helper-text[b-z5neb19r88] {
    display: block;
    font-size: 0.82rem;
    margin-top: 0.25rem;
}

.modal-body .validation-helper-text.error[b-z5neb19r88] { color: var(--status-rejected-text); }
.modal-body .validation-helper-text.success[b-z5neb19r88] { color: var(--status-approved-text); }

.input-group[b-z5neb19r88] {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.input-group .form-control[b-z5neb19r88] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    color: var(--text-primary);
    background: var(--input-background);
}

.input-group .form-control:focus[b-z5neb19r88] {
    outline: none;
    border-color: var(--color-primary-light);
    background: var(--input-background-focus);
    box-shadow: var(--input-shadow);
}

.input-group .btn-outline-secondary[b-z5neb19r88],
.input-group .btn-outline-primary[b-z5neb19r88] {
    background: var(--input-background);
    border: 1px solid var(--border-color);
    color: var(--color-primary-light);
    flex-shrink: 0;
    padding: 0.75rem 1rem;
}

.input-group .btn-outline-secondary:hover[b-z5neb19r88],
.input-group .btn-outline-primary:hover[b-z5neb19r88] {
    background: var(--input-background-focus);
    border-color: var(--color-primary-light);
}

.text-danger[b-z5neb19r88] { color: var(--status-rejected-text) !important; }

.password-toggle[b-z5neb19r88] {
    background: none;
    border: 1px solid var(--border-color);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 1rem;
    color: var(--color-primary-light);
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.password-toggle:hover[b-z5neb19r88] {
    background-color: var(--input-background-focus);
}

/* Delete Warning */
.delete-warning[b-z5neb19r88] {
    padding: 1rem;
    background: rgba(255, 95, 86, 0.08);
    border-left: 4px solid var(--red-light);
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
}

.warning-text[b-z5neb19r88] {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-weight: 600;
}

.warning-subtext[b-z5neb19r88] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Checkbox Group */
.checkbox-group[b-z5neb19r88] { margin-bottom: 0; }

.form-checkbox[b-z5neb19r88] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-checkbox input[type="checkbox"][b-z5neb19r88] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary-light);
}

.checkbox-label[b-z5neb19r88] {
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.status-icon[b-z5neb19r88] {
    font-size: 1.05rem;
    flex-shrink: 0;
}

.status-icon.checking[b-z5neb19r88] { color: var(--color-secondary); }
.status-icon.available[b-z5neb19r88] { color: var(--green-light); }
.status-icon.unavailable[b-z5neb19r88] { color: var(--red-light); }

.gap-2[b-z5neb19r88] { gap: 0.5rem; }
.d-flex[b-z5neb19r88] { display: flex; }
.mb-3[b-z5neb19r88] { margin-bottom: 1rem; }

/* Responsive */
@media (max-width: 768px) {
    .team-management-container[b-z5neb19r88] {
        padding: 1rem 0.75rem 75px 0.75rem;
    }

    .form-grid[b-z5neb19r88] {
        grid-template-columns: 1fr;
    }

    .form-actions[b-z5neb19r88] {
        flex-direction: column;
    }

    .btn-primary[b-z5neb19r88],
    .btn-secondary[b-z5neb19r88],
    .btn-outline-secondary[b-z5neb19r88] {
        width: 100%;
    }

    .users-table-container[b-z5neb19r88],
    .table-responsive[b-z5neb19r88] {
        border-radius: var(--radius-sm);
    }

    .table[b-z5neb19r88],
    .users-table[b-z5neb19r88] {
        font-size: 0.85rem;
    }

    .table td[b-z5neb19r88],
    .table th[b-z5neb19r88],
    .users-table td[b-z5neb19r88],
    .users-table th[b-z5neb19r88] {
        padding: 0.75rem 0.5rem;
    }

    .actions-column[b-z5neb19r88] {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-action[b-z5neb19r88] {
        width: 100%;
    }

    .tabs-header[b-z5neb19r88] {
        gap: 0;
    }

    .tab-button[b-z5neb19r88] {
        flex: 1;
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }

    .tab-icon[b-z5neb19r88] {
        display: none;
    }
}

@media (max-width: 640px) {
    .modal-overlay[b-z5neb19r88],
    .modal[b-z5neb19r88] {
        padding: 0.5rem;
    }

    .modal-content[b-z5neb19r88] {
        max-height: 95vh;
    }

    .modal-header[b-z5neb19r88] {
        padding: 1rem;
    }

    .modal-body[b-z5neb19r88] {
        padding: 1rem;
    }

    .modal-footer[b-z5neb19r88] {
        padding: 1rem;
        flex-direction: column-reverse;
    }

    .modal-footer .btn[b-z5neb19r88] {
        width: 100%;
    }

    .modal-title[b-z5neb19r88] {
        font-size: 1.05rem;
    }

    .password-input-group[b-z5neb19r88] {
        flex-wrap: wrap;
    }

    .password-input-group .form-input[b-z5neb19r88] {
        width: 100%;
    }

    .password-input-group .password-toggle[b-z5neb19r88] {
        width: 48px;
        padding: 0.75rem;
    }

    .password-input-group .btn-generate[b-z5neb19r88] {
        width: 100%;
    }

    .input-group[b-z5neb19r88] {
        flex-wrap: wrap;
    }

    .input-group .form-control[b-z5neb19r88] {
        width: 100%;
    }
}
/* /Pages/Authorized/UserProfile.razor.rz.scp.css */
    .profile-container[b-yylrehopy5] {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    min-height: 100vh;
    padding-bottom: 4rem;
    /* background: var(--page-bg); */
}

.profile-page[b-yylrehopy5] {
    color: var(--text-dark);
}

/* ===== Identity badge ===== */
.profile-identity[b-yylrehopy5] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 1.75rem;
}

.profile-avatar[b-yylrehopy5] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--text-white);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    box-shadow: 0 6px 16px rgba(0, 128, 128, 0.25);
}

/* ===== Header ===== */
.profile-header[b-yylrehopy5] {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    /* margin-bottom: 2rem; */
    flex-wrap: wrap;
}

.profile-header h1[b-yylrehopy5] {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -0.01em;
}

.profile-header p[b-yylrehopy5] {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.92rem;
}

/* ===== Buttons ===== */
.edit-btn[b-yylrehopy5],
.add-address-btn[b-yylrehopy5],
.save-btn[b-yylrehopy5],
.cancel-btn[b-yylrehopy5],
.delete-btn[b-yylrehopy5],
.edit-address-btn[b-yylrehopy5] {
    padding: 11px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.edit-btn[b-yylrehopy5],
.add-address-btn[b-yylrehopy5],
.save-btn[b-yylrehopy5] {
    background: linear-gradient(120deg, var(--color-primary), var(--color-primary-light));
    color: var(--text-white);
    box-shadow: var(--shadow-sm);
}

.edit-btn:hover[b-yylrehopy5],
.add-address-btn:hover[b-yylrehopy5],
.save-btn:hover:not(:disabled)[b-yylrehopy5] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.edit-btn:focus-visible[b-yylrehopy5],
.add-address-btn:focus-visible[b-yylrehopy5],
.save-btn:focus-visible[b-yylrehopy5],
.cancel-btn:focus-visible[b-yylrehopy5],
.delete-btn:focus-visible[b-yylrehopy5],
.edit-address-btn:focus-visible[b-yylrehopy5] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.cancel-btn[b-yylrehopy5] {
    background: var(--white-bg);
    color: var(--text-dark);
    border: 1px solid var(--input-border-light);
}

.cancel-btn:hover:not(:disabled)[b-yylrehopy5] {
    background: var(--light-bg);
}

.delete-btn[b-yylrehopy5] {
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger-color);
    padding: 7px 12px;
    font-size: 0.82rem;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.delete-btn:hover:not(:disabled)[b-yylrehopy5] {
    background: rgba(239, 68, 68, 0.14);
}

.edit-address-btn[b-yylrehopy5] {
    background: transparent;
    color: var(--color-primary);
    padding: 6px 10px;
    font-size: 0.82rem;
    border: 1px solid transparent;
}

.edit-address-btn:hover[b-yylrehopy5] {
    background: rgba(0, 128, 128, 0.08);
}

button:disabled[b-yylrehopy5] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
}

/* ===== Messages ===== */
.success-message[b-yylrehopy5],
.error-message[b-yylrehopy5] {
    padding: 0.9rem 1.4rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    animation: slideIn-b-yylrehopy5 0.3s ease;
}

@keyframes slideIn-b-yylrehopy5 {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.success-message[b-yylrehopy5] {
    background: rgba(39, 201, 63, 0.1);
    color: #1e7a2e;
    border: 1px solid rgba(39, 201, 63, 0.3);
}

.error-message[b-yylrehopy5] {
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger-color);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ===== Cards ===== */
.profile-card[b-yylrehopy5] {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 1.75rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s ease;
}

.profile-card:hover[b-yylrehopy5] {
    box-shadow: var(--shadow-md);
}

.card-header[b-yylrehopy5] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1.5rem;
    background: var(--light-bg);
    border-bottom: 1px solid var(--card-border);
    border-top: 3px solid var(--color-primary);
}

.card-header h2[b-yylrehopy5] {
    margin: 0;
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 600;
}

/* small section marker replacing the old window "traffic lights" */
.card-icon[b-yylrehopy5] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18);
}

/* ===== Grid and Form ===== */
.form-grid[b-yylrehopy5],
.profile-grid[b-yylrehopy5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem 2rem;
    padding: 1.75rem;
}

.full-width[b-yylrehopy5] {
    grid-column: 1 / -1;
}

.form-group[b-yylrehopy5] {
    display: flex;
    flex-direction: column;
}

.form-label[b-yylrehopy5] {
    margin-bottom: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
}

.form-label.required[b-yylrehopy5]::after {
    content: ' *';
    color: var(--danger-color);
}

.display-value[b-yylrehopy5] {
    padding: 11px 14px;
    font-size: 0.92rem;
    color: var(--text-dark);
    background: var(--light-bg);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
}

.read-only-badge[b-yylrehopy5] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: rgba(245, 158, 11, 0.14);
    color: var(--color-secondary-dark);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: 4px;
    margin-left: 0.5rem;
    text-transform: uppercase;
}

.form-group input[b-yylrehopy5],
.form-input[b-yylrehopy5] {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--input-border-light);
    background: var(--input-bg-light);
    color: var(--text-dark);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 0.92rem;
}

.form-group input:focus[b-yylrehopy5],
.form-input:focus[b-yylrehopy5] {
    border-color: var(--color-primary);
    box-shadow: var(--input-shadow-light);
}

.form-group input:disabled[b-yylrehopy5],
.form-input-disabled[b-yylrehopy5] {
    background: var(--light-bg);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.85;
}

.form-group input[b-yylrehopy5]::placeholder {
    color: var(--text-muted);
}

/* ===== Billing Addresses ===== */
.addresses-list[b-yylrehopy5] {
    padding: 1.75rem;
}

.address-item[b-yylrehopy5] {
    position: relative;
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    background: var(--card-bg);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.address-item:hover[b-yylrehopy5] {
    background: var(--card-bg-hover);
}

.address-item.default[b-yylrehopy5] {
    border-color: rgba(0, 128, 128, 0.4);
    background: rgba(20, 184, 166, 0.045);
}

.address-content[b-yylrehopy5] {
    flex: 1;
}

.address-label[b-yylrehopy5] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.4rem;
}

.address-text[b-yylrehopy5] {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* "default" reads like a rotated ink stamp rather than a plain pill */
.default-badge[b-yylrehopy5] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 4px;
    transform: rotate(-3deg);
}

.address-actions[b-yylrehopy5] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.address-form[b-yylrehopy5] {
    padding: 1.4rem;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: var(--light-bg);
    margin-bottom: 1rem;
}

.address-form h3[b-yylrehopy5] {
    font-size: 1rem;
}

.address-grid[b-yylrehopy5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.address-full-width[b-yylrehopy5] {
    grid-column: 1 / -1;
}

.form-actions[b-yylrehopy5] {
    display: flex;
    justify-content: flex-end;
    gap: 0.9rem;
    padding: 1.75rem;
    border-top: 1px solid var(--card-border);
    background: var(--light-bg);
}

.empty-addresses[b-yylrehopy5] {
    color: var(--text-muted);
    text-align: center;
    padding: 2rem;
    font-size: 0.9rem;
}

/* ===== Loading ===== */
.loading-container[b-yylrehopy5] {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .edit-btn[b-yylrehopy5], .add-address-btn[b-yylrehopy5], .save-btn[b-yylrehopy5], .cancel-btn[b-yylrehopy5], .delete-btn[b-yylrehopy5],
    .edit-address-btn[b-yylrehopy5], .profile-card[b-yylrehopy5], .address-item[b-yylrehopy5] {
        transition: none;
    }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .profile-container[b-yylrehopy5] {
        padding: 1rem;
    }

    .profile-header[b-yylrehopy5] {
        flex-direction: column;
        align-items: flex-start;
    }

    .edit-btn[b-yylrehopy5],
    .add-address-btn[b-yylrehopy5] {
        width: 100%;
        justify-content: center;
    }

    .form-grid[b-yylrehopy5],
    .profile-grid[b-yylrehopy5] {
        grid-template-columns: 1fr;
        padding: 1.25rem;
    }

    .address-item[b-yylrehopy5] {
        flex-direction: column;
    }

    .address-actions[b-yylrehopy5] {
        justify-content: flex-start;
    }

    .form-actions[b-yylrehopy5] {
        flex-direction: column-reverse;
        padding: 1.25rem;
    }

    .form-actions button[b-yylrehopy5] {
        width: 100%;
    }

    .address-grid[b-yylrehopy5] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Authorized/Wallet.razor.rz.scp.css */
.wallet-page[b-zbrbkrs342] {
    --wallet-surface: var(--card-bg, #fff);
    --wallet-border: var(--card-border, #e2e8f0);
    --wallet-text: var(--text-primary, #111827);
    --wallet-muted: var(--text-muted, #64748b);
    --wallet-soft: var(--color-surface-alt, #f8fafc);
    min-height: 100%;
    padding: 34px clamp(16px, 3vw, 40px) 64px;
    color: var(--wallet-text);
    background: var(--color-background, #f4f6f8);
}

.wallet-page-inner[b-zbrbkrs342] {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.wallet-page-header[b-zbrbkrs342] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 36px;
}

.wallet-eyebrow[b-zbrbkrs342],
.wallet-section-kicker[b-zbrbkrs342],
.subscription-type[b-zbrbkrs342] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--color-primary-light, #14b8a6);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.wallet-page-header h1[b-zbrbkrs342] {
    margin: 9px 0 6px;
    color: var(--wallet-text);
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -.04em;
}

.wallet-page-intro[b-zbrbkrs342] {
    margin: 0;
    color: var(--wallet-muted);
    font-size: 14px;
}

.wallet-secondary-action[b-zbrbkrs342],
.wallet-manage-action[b-zbrbkrs342],
.wallet-empty-action[b-zbrbkrs342],
.wallet-alert-action[b-zbrbkrs342] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--wallet-border);
    border-radius: 11px;
    color: var(--wallet-text);
    background: var(--wallet-surface);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.wallet-secondary-action:hover[b-zbrbkrs342],
.wallet-manage-action:hover[b-zbrbkrs342],
.wallet-empty-action:hover[b-zbrbkrs342],
.wallet-alert-action:hover[b-zbrbkrs342] {
    border-color: var(--color-primary-light, #14b8a6);
    transform: translateY(-1px);
}

.wallet-section[b-zbrbkrs342] {
    margin-top: 10px;
}

.wallet-section-heading[b-zbrbkrs342] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.wallet-section-kicker[b-zbrbkrs342] {
    margin-bottom: 5px;
    color: var(--wallet-muted);
    font-size: 10px;
}

.wallet-section-heading h2[b-zbrbkrs342] {
    margin: 0;
    color: var(--wallet-text);
    font-size: 21px;
    font-weight: 750;
}

.wallet-count[b-zbrbkrs342] {
    padding: 6px 10px;
    border: 1px solid var(--wallet-border);
    border-radius: 999px;
    color: var(--wallet-muted);
    background: var(--wallet-surface);
    font-size: 11px;
    font-weight: 700;
}

.subscriptions-grid[b-zbrbkrs342] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
    gap: 16px;
}

.wallet-subscription-card[b-zbrbkrs342] {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--wallet-border);
    border-radius: 18px;
    background: var(--wallet-surface);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .045);
}

.wallet-subscription-card.primary[b-zbrbkrs342] {
    border-color: color-mix(in srgb, var(--color-primary-light, #14b8a6) 55%, var(--wallet-border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-light, #14b8a6) 7%, var(--wallet-surface)), var(--wallet-surface) 62%);
}

.subscription-card-top[b-zbrbkrs342],
.subscription-main[b-zbrbkrs342] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.subscription-card-top[b-zbrbkrs342] {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--wallet-border);
}

.subscription-type[b-zbrbkrs342] {
    color: var(--wallet-muted);
    font-size: 9px;
}

.plan-status[b-zbrbkrs342] {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.plan-status.active[b-zbrbkrs342] { color: #15803d; background: #dcfce7; border-color: #bbf7d0; }
.plan-status.inactive[b-zbrbkrs342],
.plan-status.cancelled[b-zbrbkrs342] { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; }
.plan-status.expired[b-zbrbkrs342] { color: #b91c1c; background: #fee2e2; border-color: #fecaca; }
.plan-status.pending[b-zbrbkrs342] { color: #a16207; background: #fef3c7; border-color: #fde68a; }

.subscription-main[b-zbrbkrs342] {
    align-items: flex-start;
    padding: 20px 0;
}

.subscription-main h3[b-zbrbkrs342] {
    margin: 0;
    color: var(--wallet-text);
    font-size: 21px;
    font-weight: 800;
}

.subscription-main p[b-zbrbkrs342] {
    margin: 5px 0 0;
    color: var(--wallet-muted);
    font-size: 12px;
    line-height: 1.5;
}

.subscription-price[b-zbrbkrs342] {
    flex: 0 0 auto;
    color: var(--color-primary-light, #14b8a6);
    font-size: clamp(18px, 2vw, 23px);
    font-weight: 850;
    letter-spacing: -.04em;
    text-align: right;
}

.subscription-details[b-zbrbkrs342] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 15px 0;
    border-top: 1px solid var(--wallet-border);
    border-bottom: 1px solid var(--wallet-border);
}

.subscription-detail[b-zbrbkrs342] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.subscription-detail span[b-zbrbkrs342] {
    color: var(--wallet-muted);
    font-size: 10px;
}

.subscription-detail strong[b-zbrbkrs342] {
    overflow: hidden;
    color: var(--wallet-text);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-manage-action[b-zbrbkrs342] {
    width: 100%;
    margin-top: 16px;
    border-color: var(--color-primary, #008080);
    color: #fff;
    background: var(--color-primary, #008080);
}

.wallet-manage-action:hover[b-zbrbkrs342] {
    color: #fff;
    background: var(--color-primary-dark, #0d9488);
}

.wallet-empty-card[b-zbrbkrs342] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 25px;
    border: 1px dashed var(--wallet-border);
    border-radius: 18px;
    background: var(--wallet-surface);
}

.wallet-empty-icon[b-zbrbkrs342],
.wallet-alert-icon[b-zbrbkrs342] {
    display: grid;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
    color: var(--color-primary-light, #14b8a6);
    background: color-mix(in srgb, var(--color-primary-light, #14b8a6) 12%, transparent);
    font-size: 20px;
}

.wallet-empty-card h3[b-zbrbkrs342],
.wallet-alert-copy h2[b-zbrbkrs342] {
    margin: 0;
    color: var(--wallet-text);
    font-size: 16px;
    font-weight: 750;
}

.wallet-empty-card p[b-zbrbkrs342],
.wallet-alert-copy p[b-zbrbkrs342] {
    margin: 5px 0 0;
    color: var(--wallet-muted);
    font-size: 12px;
    line-height: 1.55;
}

.wallet-empty-card > div[b-zbrbkrs342] { flex: 1; }
.wallet-empty-action[b-zbrbkrs342] { flex: 0 0 auto; }

.wallet-billing-alert[b-zbrbkrs342] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    padding: 18px;
    border: 1px solid rgba(217, 119, 6, .28);
    border-radius: 16px;
    background: color-mix(in srgb, #f59e0b 7%, var(--wallet-surface));
}

.wallet-alert-icon[b-zbrbkrs342] {
    color: #b45309;
    background: rgba(245, 158, 11, .14);
}

.wallet-alert-copy[b-zbrbkrs342] { flex: 1; }
.wallet-alert-action[b-zbrbkrs342] { border-color: rgba(217, 119, 6, .35); color: #92400e; }
.wallet-pricing-section[b-zbrbkrs342] { margin-top: 26px; }

@media (max-width: 700px) {
    .wallet-page[b-zbrbkrs342] { padding: 24px 14px 40px; }
    .wallet-page-header[b-zbrbkrs342] { align-items: flex-start; flex-direction: column; margin-bottom: 28px; }
    .wallet-secondary-action[b-zbrbkrs342] { width: 100%; }
    .subscription-main[b-zbrbkrs342] { flex-direction: column; }
    .subscription-price[b-zbrbkrs342] { text-align: left; }
    .wallet-billing-alert[b-zbrbkrs342] { align-items: flex-start; flex-wrap: wrap; }
    .wallet-alert-action[b-zbrbkrs342] { width: 100%; }
}

@media (max-width: 480px) {
    .wallet-section-heading[b-zbrbkrs342] { align-items: flex-start; }
    .wallet-subscription-card[b-zbrbkrs342] { padding: 17px; }
    .subscription-card-top[b-zbrbkrs342] { align-items: flex-start; }
    .subscription-details[b-zbrbkrs342] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wallet-empty-card[b-zbrbkrs342] { align-items: flex-start; flex-wrap: wrap; padding: 19px; }
    .wallet-empty-action[b-zbrbkrs342] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .wallet-secondary-action[b-zbrbkrs342],
    .wallet-manage-action[b-zbrbkrs342],
    .wallet-empty-action[b-zbrbkrs342],
    .wallet-alert-action[b-zbrbkrs342] { transition: none; }
}
/* /Pages/Authorized/WebhookSettings.razor.rz.scp.css */
.webhook-settings-container[b-tehmluhv8j] {
    width: 100%;
    max-width: 1600px;
    margin: auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.webhook-header[b-tehmluhv8j] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    border-radius: 24px;
    background:linear-gradient(135deg,rgba(20,184,166,.08),rgba(13,148,136,.04));
    border:1px solid var(--border-color);
    backdrop-filter:blur(20px);
    box-shadow:var(--shadow-md);
    transition:.3s;
}

.webhook-header[b-tehmluhv8j]::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    right:-100px;
    top:-140px;
    background:radial-gradient(circle, rgba(20,184,166,.12),transparent 70%);
    pointer-events:none;
}

.header-content[b-tehmluhv8j]{
    position:relative;
    z-index:2;
}

.page-title[b-tehmluhv8j]{
    margin:0;
    font-size:2rem;
    font-weight:700;
    color:var(--color-primary);
    letter-spacing:.3px;
}

.header-subtitle[b-tehmluhv8j]{
    margin-top:.6rem;
    color:var(--text-muted);
    font-size:1rem;
    line-height:1.6;
}

.webhook-main[b-tehmluhv8j]{
    width:100%;
    min-height:520px;
}

.loading-state[b-tehmluhv8j]{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:500px;
    /* background:var(--color-surface); */
    border-radius:24px;
    border:1px solid var(--border-color);
    box-shadow:var(--shadow-md);
}

.no-config-state[b-tehmluhv8j]{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:520px;
}

.no-config-content[b-tehmluhv8j]{
    position:relative;
    overflow:hidden;
    width:100%;
    max-width:650px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:1rem;
    padding:4rem;
    /* background:var(--color-surface); */
    border:1px solid var(--border-color);
    border-radius:28px;
    backdrop-filter:blur(20px);
    box-shadow:var(--shadow-lg);
    transition:.35s;
}

.no-config-content[b-tehmluhv8j]::before{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    right:-140px;
    top:-180px;
    background:radial-gradient(circle,rgba(20,184,166,.10),transparent 70%);
}

.no-config-content:hover[b-tehmluhv8j]{
    transform:translateY(-4px);
    box-shadow:0 30px 70px rgba(0,0,0,.28);
}

.empty-icon[b-tehmluhv8j]{
    width:110px;
    height:110px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:48px;
    background:linear-gradient(145deg,rgba(20,184,166,.15),rgba(20,184,166,.05));
    border:1px solid rgba(20,184,166,.25);
    box-shadow:inset 0 0 20px rgba(20,184,166,.08),0 15px 30px rgba(0,0,0,.15);
}

.no-config-content h2[b-tehmluhv8j]{
    margin:0;
    color:var(--color-primary);
    font-size:2rem;
    font-weight:700;
}

.no-config-content p[b-tehmluhv8j]{
    max-width:480px;
    margin:0;
    color:var(--text-muted);
    font-size:1rem;
    line-height:1.8;
}

.btn-create-webhook[b-tehmluhv8j]{
    margin-top:1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.8rem;
    padding:.95rem 1.8rem;
    border:none;
    border-radius:16px;
    cursor:pointer;
    color:white;
    font-weight:700;
    font-size:.95rem;
    background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));
    box-shadow:0 15px 30px rgba(20,184,166,.25);
    transition:.3s;
}

.btn-create-webhook:hover[b-tehmluhv8j]{
    transform:translateY(-3px);
    box-shadow:0 25px 40px rgba(20,184,166,.35);
}

.btn-create-webhook:active[b-tehmluhv8j]{
    transform:translateY(0);
}

.btn-icon[b-tehmluhv8j]{
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    font-size:18px;
    font-weight:700;
}

@media (max-width:992px){

    .webhook-settings-container[b-tehmluhv8j]{
        padding:1.5rem;
    }

    .webhook-header[b-tehmluhv8j]{
        padding:1.75rem;
    }

    .page-title[b-tehmluhv8j]{
        font-size:1.7rem;
    }

    .no-config-content[b-tehmluhv8j]{
        padding:3rem 2rem;
    }
}


@media (max-width:768px){
    .webhook-settings-container[b-tehmluhv8j]{
        padding:1rem;
        gap:1.25rem;
    }

    .webhook-header[b-tehmluhv8j]{
        padding:1.5rem;
        border-radius:20px;
    }

    .page-title[b-tehmluhv8j]{
        font-size:1.5rem;
    }

    .header-subtitle[b-tehmluhv8j]{
        font-size:.95rem;
    }

    .no-config-content[b-tehmluhv8j]{
        padding:2.5rem 1.5rem;
        border-radius:20px;
    }

    .empty-icon[b-tehmluhv8j]{
        width:90px;
        height:90px;
        font-size:40px;
    }

    .no-config-content h2[b-tehmluhv8j]{
        font-size:1.5rem;
    }
}
/* /Pages/Authorized/WhatsAppAccountRegistration.razor.rz.scp.css */
.wa-registration-container[b-ui5dkyuik7] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

.wa-progress-overlay[b-ui5dkyuik7] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}

.wa-progress-content[b-ui5dkyuik7] {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 60px 40px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--card-border);
}

.wa-spinner[b-ui5dkyuik7] {
    width: 60px;
    height: 60px;
    margin: 0 auto 24px;
    border: 3px solid var(--border-color);
    border-top-color: #25d366;
    border-radius: 50%;
    animation: spin-b-ui5dkyuik7 0.8s linear infinite;
}

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

.wa-progress-text[b-ui5dkyuik7] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.wa-progress-subtext[b-ui5dkyuik7] {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.wa-card-wrapper[b-ui5dkyuik7] {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--card-border);
    overflow: hidden;
    animation: slideUp-b-ui5dkyuik7 0.3s ease-out;
}

.wa-error-banner[b-ui5dkyuik7] {
    margin: 24px 24px 0 24px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--builder-error-bg);
    border: 1px solid var(--builder-error-border);
    color: var(--builder-error-text);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}

@keyframes slideUp-b-ui5dkyuik7 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wa-header[b-ui5dkyuik7] {
    background: var(--card-bg);
    padding: 60px 40px;
    color: var(--text-primary);
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.wa-header-content[b-ui5dkyuik7] {
    max-width: 600px;
    margin: 0 auto;
}

.wa-title[b-ui5dkyuik7] {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 12px 0;
    letter-spacing: -0.5px;
    color: var(--text-primary);
}

.wa-subtitle[b-ui5dkyuik7] {
    font-size: 16px;
    margin: 0;
    opacity: 0.95;
    line-height: 1.6;
    font-weight: 500;
    color: var(--text-primary);
}

.wa-agreement-section[b-ui5dkyuik7] {
    padding: 40px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--card-border);
}

.wa-agreement-header[b-ui5dkyuik7] {
    margin-bottom: 24px;
}

.wa-agreement-header h2[b-ui5dkyuik7] {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: var(--text-primary);
}

.wa-agreement-content[b-ui5dkyuik7] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 12px;
}

.wa-agreement-content[b-ui5dkyuik7]::-webkit-scrollbar {
    width: 8px;
}

.wa-agreement-content[b-ui5dkyuik7]::-webkit-scrollbar-track {
    background: transparent;
}

.wa-agreement-content[b-ui5dkyuik7]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.wa-agreement-content[b-ui5dkyuik7]::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

.wa-agreement-block[b-ui5dkyuik7] {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-muted);
}

.wa-agreement-block h3[b-ui5dkyuik7] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.wa-agreement-block ul[b-ui5dkyuik7],
.wa-agreement-block ol[b-ui5dkyuik7] {
    margin: 8px 0;
    padding-left: 20px;
}

.wa-agreement-block li[b-ui5dkyuik7] {
    margin: 6px 0;
}

.wa-agreement-block p[b-ui5dkyuik7] {
    margin: 0;
}

.wa-privacy-link a[b-ui5dkyuik7] {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.wa-privacy-link a:hover[b-ui5dkyuik7] {
    color: var(--color-primary-light);
}

.wa-checkbox-group[b-ui5dkyuik7] {
    padding: 24px 40px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--card-border);
}

.wa-checkbox-container[b-ui5dkyuik7] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.wa-checkbox[b-ui5dkyuik7] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.wa-checkbox-label[b-ui5dkyuik7] {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    line-height: 1.5;
}

.wa-coexistence-section[b-ui5dkyuik7] {
    padding: 24px 40px 24px 40px;
    background: var(--card-bg);
    animation: fadeIn-b-ui5dkyuik7 0.2s ease-out;
}

@keyframes fadeIn-b-ui5dkyuik7 {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 200px;
    }
}

.wa-helper-text[b-ui5dkyuik7] {
    font-size: 13px;
    color: var(--text-muted);
    margin: 12px 0 0 32px;
    line-height: 1.5;
}

.wa-button-group[b-ui5dkyuik7] {
    padding: 24px 40px;
    display: flex;
    gap: 12px;
    flex-direction: column;
    background: var(--card-bg);
    border-bottom: 1px solid var(--card-border);
}

.wa-button[b-ui5dkyuik7] {
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    font-family: 'Quicksand', sans-serif;
}

.wa-button-primary[b-ui5dkyuik7] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--text-white);
    box-shadow: 0 4px 12px var(--border-color);
}

.wa-button-primary:hover:not(:disabled)[b-ui5dkyuik7] {
    box-shadow: 0 8px 20px var(--border-color);
    transform: translateY(-2px);
}

.wa-button-primary:active:not(:disabled)[b-ui5dkyuik7] {
    transform: translateY(0);
}

.wa-button-primary:disabled[b-ui5dkyuik7] {
    opacity: 0.5;
    cursor: not-allowed;
}

.wa-button-secondary[b-ui5dkyuik7] {
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.wa-button-secondary:hover[b-ui5dkyuik7] {
    background: var(--glass-bg-hover);
    border-color: var(--color-primary);
}

.wa-button-secondary:active[b-ui5dkyuik7] {
    background: var(--hover-overlay);
}

.wa-button-icon[b-ui5dkyuik7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.wa-button-text[b-ui5dkyuik7] {
    display: inline;
}

.wa-info-message[b-ui5dkyuik7] {
    padding: 24px 40px;
    background: var(--glass-bg);
    border: 1px solid var(--card-border);
    border-top: none;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.wa-info-icon[b-ui5dkyuik7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(20, 184, 166, 0.12);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.wa-info-content[b-ui5dkyuik7] {
    flex: 1;
}

.wa-info-content p[b-ui5dkyuik7] {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .wa-registration-container[b-ui5dkyuik7] {
        padding: 10px;
    }

    .wa-card-wrapper[b-ui5dkyuik7] {
        border-radius: 16px;
    }

    .wa-header[b-ui5dkyuik7] {
        padding: 40px 24px;
    }

    .wa-title[b-ui5dkyuik7] {
        font-size: 24px;
    }

    .wa-subtitle[b-ui5dkyuik7] {
        font-size: 14px;
    }

    .wa-agreement-section[b-ui5dkyuik7],
    .wa-checkbox-group[b-ui5dkyuik7],
    .wa-coexistence-section[b-ui5dkyuik7],
    .wa-button-group[b-ui5dkyuik7],
    .wa-info-message[b-ui5dkyuik7] {
        padding-left: 24px;
        padding-right: 24px;
    }

    .wa-button-group[b-ui5dkyuik7] {
        flex-direction: column;
    }

    .wa-button[b-ui5dkyuik7] {
        padding: 14px 20px;
    }
}

@media (max-width: 480px) {
    .wa-header[b-ui5dkyuik7] {
        padding: 32px 16px;
    }

    .wa-title[b-ui5dkyuik7] {
        font-size: 20px;
    }

    .wa-subtitle[b-ui5dkyuik7] {
        font-size: 13px;
    }

    .wa-agreement-section[b-ui5dkyuik7],
    .wa-checkbox-group[b-ui5dkyuik7],
    .wa-coexistence-section[b-ui5dkyuik7],
    .wa-button-group[b-ui5dkyuik7],
    .wa-info-message[b-ui5dkyuik7] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .wa-button[b-ui5dkyuik7] {
        padding: 12px 16px;
        font-size: 14px;
    }
}

.wa-button:focus[b-ui5dkyuik7],
.wa-checkbox:focus[b-ui5dkyuik7],
.wa-checkbox-label:focus[b-ui5dkyuik7] {
    outline: 2px solid var(--border-color);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .wa-card-wrapper[b-ui5dkyuik7],
    .wa-spinner[b-ui5dkyuik7],
    .wa-button-primary:hover[b-ui5dkyuik7],
    .wa-coexistence-section[b-ui5dkyuik7] {
        animation: none;
    }

    .wa-button-primary:hover[b-ui5dkyuik7] {
        transform: none;
    }

    .wa-button-primary:active[b-ui5dkyuik7] {
        transform: none;
    }
}
/* /Pages/Authorized/WhatsAppSuccess.razor.rz.scp.css */
/* WhatsApp Success Page - macOS Inspired Design */

.wa-success-container[b-w34dsf1em1] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f5f7 0%, #e8e8eb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: 'Quicksand', sans-serif;
}

.wa-success-card[b-w34dsf1em1] {
    width: 100%;
    max-width: 500px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 60px 40px;
    text-align: center;
    animation: slideUp-b-w34dsf1em1 0.3s ease-out;
}

@keyframes slideUp-b-w34dsf1em1 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Success State */
.wa-success-complete[b-w34dsf1em1] {
    animation: slideUp-b-w34dsf1em1 0.3s ease-out;
}

.wa-success-icon[b-w34dsf1em1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: #dcf8c6;
    color: #25d366;
    border-radius: 50%;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 24px;
    animation: popIn-b-w34dsf1em1 0.4s ease-out;
}

@keyframes popIn-b-w34dsf1em1 {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.wa-success-complete h1[b-w34dsf1em1] {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px 0;
}

.wa-success-subtitle[b-w34dsf1em1] {
    font-size: 15px;
    color: #666;
    margin: 0 0 24px 0;
    line-height: 1.6;
}

/* Success Details */
.wa-success-details[b-w34dsf1em1] {
    background: #f9f9fb;
    border-radius: 12px;
    padding: 20px;
    margin: 24px 0;
    text-align: left;
}

.wa-detail-item[b-w34dsf1em1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
}

.wa-detail-item:last-child[b-w34dsf1em1] {
    border-bottom: none;
}

.wa-detail-label[b-w34dsf1em1] {
    font-size: 13px;
    font-weight: 600;
    color: #666;
}

.wa-detail-value[b-w34dsf1em1] {
    font-size: 13px;
    color: #1a1a1a;
    font-family: 'Quicksand', sans-serif;
    word-break: break-all;
}

/* Pending State */
.wa-success-pending[b-w34dsf1em1] {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.05) 0%, rgba(29, 168, 81, 0.05) 100%);
    border: 1px solid rgba(37, 211, 102, 0.1);
}

.wa-pending-spinner[b-w34dsf1em1] {
    width: 60px;
    height: 60px;
    margin: 0 auto 24px;
    border: 3px solid #f0f0f0;
    border-top-color: #25d366;
    border-radius: 50%;
    animation: spin-b-w34dsf1em1 0.8s linear infinite;
}

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

.wa-success-pending h2[b-w34dsf1em1] {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 8px 0;
}

.wa-pending-subtitle[b-w34dsf1em1] {
    font-size: 14px;
    color: #666;
    margin: 0 0 12px 0;
}

.wa-pending-note[b-w34dsf1em1] {
    font-size: 12px;
    color: #25d366;
    font-weight: 600;
    margin: 12px 0 0 0;
}

/* Error State */
.wa-success-error[b-w34dsf1em1] {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.02) 0%, rgba(255, 0, 0, 0.04) 100%);
    border: 1px solid rgba(255, 0, 0, 0.1);
}

.wa-error-icon[b-w34dsf1em1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: #ffe0e0;
    color: #d32f2f;
    border-radius: 50%;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 24px;
    animation: shake-b-w34dsf1em1 0.3s ease-in-out;
}

@keyframes shake-b-w34dsf1em1 {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.wa-success-error h1[b-w34dsf1em1] {
    font-size: 28px;
    font-weight: 700;
    color: #d32f2f;
    margin: 0 0 8px 0;
}

.wa-error-subtitle[b-w34dsf1em1] {
    font-size: 15px;
    color: #666;
    margin: 0 0 24px 0;
    line-height: 1.6;
}

/* Actions */
.wa-success-actions[b-w34dsf1em1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.wa-button[b-w34dsf1em1] {
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Quicksand', sans-serif;
}

.wa-button-primary[b-w34dsf1em1] {
    background: linear-gradient(135deg, #25d366 0%, #1da851 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.wa-button-primary:hover[b-w34dsf1em1] {
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
    transform: translateY(-2px);
}

.wa-button-primary:active[b-w34dsf1em1] {
    transform: translateY(0);
}

.wa-button-secondary[b-w34dsf1em1] {
    background: #f0f0f0;
    color: #1a1a1a;
    border: 1px solid #e0e0e0;
}

.wa-button-secondary:hover[b-w34dsf1em1] {
    background: #e8e8eb;
    border-color: #d0d0d0;
}

.wa-button-secondary:active[b-w34dsf1em1] {
    background: #e0e0e3;
}

/* Loading State */
.wa-success-spinner[b-w34dsf1em1] {
    width: 60px;
    height: 60px;
    margin: 0 auto 24px;
    border: 3px solid #f0f0f0;
    border-top-color: #25d366;
    border-radius: 50%;
    animation: spin-b-w34dsf1em1 0.8s linear infinite;
}

.wa-success-card h2[b-w34dsf1em1] {
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .wa-success-card[b-w34dsf1em1] {
        padding: 40px 24px;
        border-radius: 16px;
    }

    .wa-success-icon[b-w34dsf1em1],
    .wa-error-icon[b-w34dsf1em1] {
        width: 70px;
        height: 70px;
        font-size: 42px;
    }

    .wa-success-complete h1[b-w34dsf1em1],
    .wa-success-error h1[b-w34dsf1em1] {
        font-size: 24px;
    }

    .wa-success-card h2[b-w34dsf1em1] {
        font-size: 20px;
    }

    .wa-success-actions[b-w34dsf1em1] {
        gap: 10px;
    }

    .wa-button[b-w34dsf1em1] {
        padding: 10px 20px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .wa-success-container[b-w34dsf1em1] {
        padding: 10px;
    }

    .wa-success-card[b-w34dsf1em1] {
        padding: 32px 16px;
    }

    .wa-success-icon[b-w34dsf1em1],
    .wa-error-icon[b-w34dsf1em1] {
        width: 60px;
        height: 60px;
        font-size: 36px;
    }

    .wa-success-complete h1[b-w34dsf1em1],
    .wa-success-error h1[b-w34dsf1em1] {
        font-size: 20px;
    }

    .wa-success-card h2[b-w34dsf1em1] {
        font-size: 18px;
    }

    .wa-detail-label[b-w34dsf1em1],
    .wa-detail-value[b-w34dsf1em1] {
        font-size: 12px;
    }
}

/* Accessibility */
.wa-button:focus[b-w34dsf1em1] {
    outline: 2px solid #25d366;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .wa-success-card[b-w34dsf1em1],
    .wa-success-icon[b-w34dsf1em1],
    .wa-error-icon[b-w34dsf1em1],
    .wa-pending-spinner[b-w34dsf1em1],
    .wa-success-spinner[b-w34dsf1em1],
    .wa-button-primary:hover[b-w34dsf1em1] {
        animation: none;
    }

    .wa-button-primary:hover[b-w34dsf1em1],
    .wa-button-primary:active[b-w34dsf1em1] {
        transform: none;
    }
}
/* /Pages/Authorized/WhatsApp/Analytics/FlowAnalytics.razor.rz.scp.css */
.flow-analytics-page[b-zan7i292rv] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

.flow-back-btn[b-zan7i292rv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--glass-bg);
    color: var(--color-primary);
    cursor: pointer;
    transition: background .15s;
}

.flow-back-btn:hover[b-zan7i292rv] {
    background: var(--glass-bg-hover);
}

.page-header[b-zan7i292rv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.page-title[b-zan7i292rv] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.page-header h1[b-zan7i292rv] {
    margin: 0.15rem 0 0.35rem 0;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-primary);
}

/* CHANGED: #6b7686 -> var(--text-muted) */
.page-subtitle[b-zan7i292rv] {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.9rem;
}

.page-actions[b-zan7i292rv] {
    flex-shrink: 0;
}

.btn-secondary[b-zan7i292rv],
.btn-primary[b-zan7i292rv] {
    border-radius: var(--radius-sm);
    padding: 0.6rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary[b-zan7i292rv] {
    background: var(--card-bg);
    color: var(--color-primary);
    border-color: var(--card-border);
}

.btn-secondary:hover:not(:disabled)[b-zan7i292rv] {
    background: rgba(20, 184, 166, 0.06);
    border-color: var(--color-primary);
}

.btn-primary[b-zan7i292rv] {
    background: var(--color-primary);
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover:not(:disabled)[b-zan7i292rv] {
    background: var(--color-primary-dark);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.18);
    transform: translateY(-1px);
}

.btn-secondary:disabled[b-zan7i292rv],
.btn-primary:disabled[b-zan7i292rv] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ===== Stat Cards ===== */
.stat-cards[b-zan7i292rv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.stat-cards.small-cards[b-zan7i292rv] {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    margin-bottom: 1rem;
}

.stat-card[b-zan7i292rv] {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1.1rem;
    transition: all 0.2s ease;
}

.stat-card:hover[b-zan7i292rv] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

/* CHANGED: #8a95a3 -> var(--text-muted) */
.stat-card h3[b-zan7i292rv] {
    margin: 0 0 0.4rem 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.stat-value[b-zan7i292rv] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-primary-dark);
}

/* ===== Charts ===== */
.chart-block[b-zan7i292rv] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--card-border);
}

.chart-block h4[b-zan7i292rv] {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.overview-usage-card[b-zan7i292rv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
}

.usage-ring[b-zan7i292rv] {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: conic-gradient(
        #14b8a6 0deg calc(var(--usage-percent) * 3.6deg),
        #dbeafe calc(var(--usage-percent) * 3.6deg) 360deg
    );
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 12px rgba(255,255,255,0.14);
}

.usage-ring[b-zan7i292rv]::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background: var(--card-bg);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.usage-ring-inner[b-zan7i292rv] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    text-align: center;
    padding: 0.75rem;
}

.usage-detail-label[b-zan7i292rv] {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: none;
    line-height: 1.2;
}

.usage-percent[b-zan7i292rv] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-muted);
}

.usage-detail-value[b-zan7i292rv] {
    font-size: 1.05rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--text-primary);
}

.usage-summary[b-zan7i292rv] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 240px;
}

.usage-row[b-zan7i292rv] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
}

.usage-dot[b-zan7i292rv] {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: #3b82f6;
}

.usage-dot.received[b-zan7i292rv] {
    background: #14b8a6;
}

.usage-dot.sent[b-zan7i292rv] {
    background: #dbeafe;
}

.usage-dot.conversion[b-zan7i292rv] {
    background: #3b82f6;
}

.usage-key[b-zan7i292rv] {
    color: var(--text-muted);
    font-weight: 500;
}

.usage-value[b-zan7i292rv] {
    justify-self: end;
    color: var(--text-primary);
    font-weight: 700;
}

.usage-note[b-zan7i292rv] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* CHANGED: #6b7686 -> var(--text-muted) */
.section-note[b-zan7i292rv] {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

/* ===== Screen / Field Blocks ===== */
.screen-block[b-zan7i292rv] {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--card-border);
}

.screen-block:last-child[b-zan7i292rv] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.screen-block h4[b-zan7i292rv] {
    margin: 0 0 0.85rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* CHANGED: #9aa5b1 -> var(--text-muted) */
.screen-block h4 small[b-zan7i292rv] {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.75rem;
}

.field-block[b-zan7i292rv] {
    background: rgba(20, 184, 166, 0.03);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.75rem;
}

.field-header[b-zan7i292rv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.field-label[b-zan7i292rv] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* CHANGED: #8a95a3 -> var(--text-muted) */
.field-meta[b-zan7i292rv] {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.field-charts[b-zan7i292rv] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.insight-list[b-zan7i292rv] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.insight-list.compact-list[b-zan7i292rv] {
    gap: 0.6rem;
}

.insight-row[b-zan7i292rv] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.insight-head[b-zan7i292rv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.insight-label[b-zan7i292rv] {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.insight-value[b-zan7i292rv] {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.insight-track[b-zan7i292rv] {
    width: 100%;
    height: 9px;
    border-radius: 999px;
    background: #cbd2d8;
    /* border: 1px solid rgba(15, 23, 42, 0.12); */
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.insight-fill[b-zan7i292rv] {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: inherit;
    transition: width 0.25s ease;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.insight-percent[b-zan7i292rv] {
    align-self: flex-end;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

.mini-metric-grid[b-zan7i292rv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}

.mini-metric-card[b-zan7i292rv] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: rgba(20, 184, 166, 0.03);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.85rem;
}

.mini-metric-label[b-zan7i292rv] {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.mini-metric-card strong[b-zan7i292rv] {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
}

/* ===== Filters ===== */
.filters-grid[b-zan7i292rv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
    align-items: end;
}

.filter-actions[b-zan7i292rv] {
    display: flex;
    align-items: flex-end;
}

.form-group[b-zan7i292rv] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* CHANGED: #8a95a3 -> var(--text-muted) */
.form-label[b-zan7i292rv] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.form-input[b-zan7i292rv] {
    border: 1px solid var(--input-border-light);
    background: var(--input-bg-light);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

/* CHANGED: background: white -> var(--card-bg) */
.form-input:focus[b-zan7i292rv] {
    outline: none;
    background: var(--card-bg);
    border-color: var(--color-primary-light);
    box-shadow: var(--input-shadow-light);
}

/* ===== Table ===== */
.table-wrapper[b-zan7i292rv] {
    overflow-x: auto;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
}

.analytics-table[b-zan7i292rv] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

/* CHANGED: #6b7686 -> var(--text-muted) */
.analytics-table th[b-zan7i292rv] {
    text-align: left;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.7rem 0.9rem;
    border-bottom: 2px solid var(--card-border);
    background: rgba(20, 184, 166, 0.04);
    white-space: nowrap;
}

/* CHANGED: border-bottom #eef1f3 -> var(--card-border) */
.analytics-table td[b-zan7i292rv] {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--card-border);
    color: var(--text-primary);
    font-size: 0.82rem;
}

.analytics-table tbody tr:hover[b-zan7i292rv] {
    background: rgba(20, 184, 166, 0.04);
}

/* ===== Pagination ===== */
.pagination-controls[b-zan7i292rv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.page-btn[b-zan7i292rv] {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    padding: 0.45rem 1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.82rem;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled)[b-zan7i292rv] {
    background: rgba(20, 184, 166, 0.06);
    border-color: var(--color-primary);
}

.page-btn:disabled[b-zan7i292rv] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* CHANGED: #6b7686 -> var(--text-muted) */
.page-info[b-zan7i292rv] {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ===== No Data ===== */
/* CHANGED: #8a95a3 -> var(--text-muted) */
.no-data-message[b-zan7i292rv] {
    background: rgba(20, 184, 166, 0.04);
    border: 1px dashed var(--card-border);
    border-radius: var(--radius-md);
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
}

/* ===== Accordion ===== */
.accordion[b-zan7i292rv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 1400px;
    margin: 20px auto;

}

.accordion-item[b-zan7i292rv] {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.accordion-header[b-zan7i292rv] {
    margin: 0;
}

.accordion-button[b-zan7i292rv] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    background: rgba(20, 184, 166, 0.03);
    border: none;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s ease;
}

.accordion-button:hover[b-zan7i292rv] {
    background: rgba(20, 184, 166, 0.07);
}

.accordion-button:not(.collapsed)[b-zan7i292rv] {
    color: var(--color-primary-dark);
    border-bottom: 1px solid var(--card-border);
}

.accordion-button[b-zan7i292rv]::after {
    content: '';
    width: 0.6rem;
    height: 0.6rem;
    border-right: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}

.accordion-button:not(.collapsed)[b-zan7i292rv]::after {
    transform: rotate(-135deg);
}

.accordion-collapse[b-zan7i292rv] {
    overflow: hidden;
}

.accordion-collapse.collapse:not(.show)[b-zan7i292rv] {
    display: none;
}

.accordion-collapse.show[b-zan7i292rv] {
    display: block;
    animation: accordionOpen-b-zan7i292rv 0.25s ease;
}

@keyframes accordionOpen-b-zan7i292rv {
    from { opacity: 0; }
    to { opacity: 1; }
}

.accordion-body[b-zan7i292rv] {
    padding: 1.5rem;
}

.overview-section[b-zan7i292rv] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.overview-section .stat-cards[b-zan7i292rv] {
    flex: 1;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
}

.overview-section .chart-block[b-zan7i292rv] {
    flex: 1;
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .flow-analytics-page[b-zan7i292rv] {
        padding: 1rem 1rem 3rem 1rem;
    }

    .page-header[b-zan7i292rv] {
        flex-direction: column;
        align-items: stretch;
    }

    .page-actions[b-zan7i292rv] {
        display: flex;
    }

    .btn-secondary[b-zan7i292rv],
    .btn-primary[b-zan7i292rv] {
        width: 100%;
    }

    .filters-grid[b-zan7i292rv] {
        grid-template-columns: 1fr;
    }

    .field-header[b-zan7i292rv] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .accordion-button[b-zan7i292rv] {
        padding: 1rem 1.25rem;
        font-size: 0.95rem;
    }

    .accordion-body[b-zan7i292rv] {
        padding: 1.25rem;
    }
}
/* /Pages/Authorized/WhatsApp/Analytics/MetaConversationAnalytics.razor.rz.scp.css */
.meta-analytics-page[b-jpwrdjgdjk] {
    
    padding: 24px 24px 65px;
    min-height: 100vh;
    box-sizing: border-box;
    background: var(--page-bg);
}

.page-header[b-jpwrdjgdjk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    gap: 20px;
    margin-bottom: 24px;
    padding: 28px;
    border-radius: 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-md);
}

.page-header h1[b-jpwrdjgdjk] {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg,#008080,#14B8A6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-subtitle[b-jpwrdjgdjk] {
    margin-top: 6px;
    font-size: 15px;
    color: var(--text-muted);
}

.btn-primary[b-jpwrdjgdjk] {
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg,#008080,#14B8A6);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: .3s;
}

.btn-primary:hover:not(:disabled)[b-jpwrdjgdjk] {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,128,128,.25);
}

.btn-secondary[b-jpwrdjgdjk] {
    border: 1px solid var(--border-color);
    padding: 12px 24px;
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
}

.btn-secondary:hover:not(:disabled)[b-jpwrdjgdjk] {
    background: var(--color-surface-alt);
}

.btn-primary:disabled[b-jpwrdjgdjk],
.btn-secondary:disabled[b-jpwrdjgdjk] {
    opacity: .6;
    cursor: not-allowed;
}

.filters-card[b-jpwrdjgdjk] {
    background: var(--card-bg);
    backdrop-filter: blur(18px);
    border-radius: 24px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px;
    margin-bottom: 24px;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-md);
}

.filters-header[b-jpwrdjgdjk] {
    margin-bottom: 24px;
}

.filters-header h2[b-jpwrdjgdjk] {
    margin: 0;
    font-size: 20px;
    color: var(--text-primary);
}

.filters-header p[b-jpwrdjgdjk] {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 14px;
}

.filters-grid[b-jpwrdjgdjk] {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
    gap: 22px;
}

.form-group[b-jpwrdjgdjk] {
    display: flex;
    flex-direction: column;
}

/* CHANGED: var(--brand-dark) (static) -> var(--text-primary) */
.form-label[b-jpwrdjgdjk] {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.form-input[b-jpwrdjgdjk] {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--color-surface);
    color: var(--text-primary);
    font-size: 14px;
    transition: .2s ease;
}

.form-input option[b-jpwrdjgdjk] {
    background: var(--color-surface);
    color: var(--text-primary);
}

select.form-input[b-jpwrdjgdjk] {
    cursor: pointer;
}

.form-input:focus[b-jpwrdjgdjk] {
    outline: none;
    border-color: #14B8A6;
    box-shadow: 0 0 0 4px rgba(20,184,166,.15);
}

.helper-text[b-jpwrdjgdjk] {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 12px;
}

.error-message[b-jpwrdjgdjk] {
    color: #f87171;
    margin-top: 6px;
    font-size: 12px;
}

.checkbox-group[b-jpwrdjgdjk] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.checkbox-item[b-jpwrdjgdjk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #14B8A6;
    background: rgba(20, 184, 166, 0.1);
    color: var(--color-primary-light);
    cursor: pointer;
    transition: .2s ease;
}

.checkbox-item input[b-jpwrdjgdjk] {
    accent-color: var(--color-primary);
}

.checkbox-item span[b-jpwrdjgdjk] {
    font-size: .88rem;
    font-weight: 600;
}

.filters-actions[b-jpwrdjgdjk] {
    margin-top: 28px;
    display: flex;
    justify-content: flex-end;
}

.results-card[b-jpwrdjgdjk] {
    background: var(--card-bg);
    max-width: 1400px;
    margin: 1rem auto;
    border-radius: 24px;
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 40px rgba(15,23,42,.15);
    overflow: hidden;
}

.results-header[b-jpwrdjgdjk] {
    padding: 24px;
    border-bottom: 1px solid var(--card-border);
}

.results-header h2[b-jpwrdjgdjk] {
    margin: 0;
    color: var(--text-primary);
}

.results-header p[b-jpwrdjgdjk] {
    margin-top: 5px;
    color: var(--text-muted);
}

.table-wrapper[b-jpwrdjgdjk] {
    overflow-x: auto;
}

.analytics-table[b-jpwrdjgdjk] {
    width: 100%;
    border-collapse: collapse;
    border-color: var(--border-color);
}

/* Kept fixed dark header row — same convention as other tables in your app */
.analytics-table thead[b-jpwrdjgdjk] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #083A3B;
}

.analytics-table th[b-jpwrdjgdjk] {
    color: #fff;
    padding: 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-color);
}

.analytics-table td[b-jpwrdjgdjk] {
    padding: 15px 16px;
    border-bottom: 1px solid var(--card-border);
    color: var(--text-secondary);
}

.analytics-table tbody tr[b-jpwrdjgdjk] {
    transition: .2s ease;
}

.analytics-table tbody tr:hover[b-jpwrdjgdjk] {
    background: var(--color-surface-alt);
}

.analytics-table tbody tr:nth-child(even)[b-jpwrdjgdjk] {
    background: var(--glass-bg);
}

.number-cell[b-jpwrdjgdjk],
.currency-cell[b-jpwrdjgdjk] {
    text-align: right;
    font-weight: 700;
}

.currency-cell[b-jpwrdjgdjk] {
    color: #10b981;
}

.badge[b-jpwrdjgdjk] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.18);
    color: #15803d;
}

.badge-secondary[b-jpwrdjgdjk] {
    background: rgba(59, 130, 246, 0.18);
    color: #1d4ed8;
}

.badge-tertiary[b-jpwrdjgdjk] {
    background: rgba(168, 85, 247, 0.18);
    color: #7e22ce;
}

.summary-stats[b-jpwrdjgdjk] {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    gap: 20px;
    padding: 24px;
    border-top: 1px solid var(--card-border);
}

.stat-card[b-jpwrdjgdjk] {
    background: var(--color-surface-alt);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 24px;
    text-align: center;
}

.stat-card h3[b-jpwrdjgdjk] {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-value[b-jpwrdjgdjk] {
    margin-top: 12px;
    font-size: 2rem;
    font-weight: 800;
    color: #008080;
}

.no-data-message[b-jpwrdjgdjk] {
    margin-top: 24px;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--card-border);
    padding: 60px 30px;
    text-align: center;
}

.no-data-message p[b-jpwrdjgdjk] {
    margin: 0;
    color: var(--text-muted);
    font-size: 16px;
}

@media (max-width:768px) {

    .meta-analytics-page[b-jpwrdjgdjk] {
        padding: 16px;
    }

    .page-header[b-jpwrdjgdjk] {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header h1[b-jpwrdjgdjk] {
        font-size: 1.8rem;
    }

    .filters-grid[b-jpwrdjgdjk] {
        grid-template-columns: 1fr;
    }

    .filters-actions[b-jpwrdjgdjk] {
        justify-content: stretch;
    }

    .filters-actions .btn-primary[b-jpwrdjgdjk] {
        width: 100%;
    }

    .summary-stats[b-jpwrdjgdjk] {
        grid-template-columns: 1fr;
    }

    .analytics-table th[b-jpwrdjgdjk],
    .analytics-table td[b-jpwrdjgdjk] {
        padding: 12px;
        font-size: 12px;
    }
}
/* /Pages/Authorized/WhatsApp/Analytics/MetaMessagingAnalytics.razor.rz.scp.css */
.meta-analytics-page[b-nw5zck1iz6] {
    padding: 24px 24px 65px;
    min-height: 100vh;
    background: var(--page-bg);
}

.page-header[b-nw5zck1iz6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    max-width: 1400px;
    margin: 0 auto;
    gap: 20px;
    margin-bottom: 24px;
    padding: 28px;
    border-radius: 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-md);
}

.page-header h1[b-nw5zck1iz6] {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg,#008080,#14B8A6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-subtitle[b-nw5zck1iz6] {
    margin-top: 6px;
    font-size: 15px;
    color: var(--text-muted);
}

.btn-primary[b-nw5zck1iz6] {
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg,#008080,#14B8A6);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: .3s;
}

.btn-primary:hover:not(:disabled)[b-nw5zck1iz6] {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,128,128,.25);
}

.btn-secondary[b-nw5zck1iz6] {
    border: 1px solid var(--border-color);
    padding: 12px 24px;
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
}

.btn-secondary:hover:not(:disabled)[b-nw5zck1iz6] {
    background: var(--color-surface-alt);
}

.btn-primary:disabled[b-nw5zck1iz6],
.btn-secondary:disabled[b-nw5zck1iz6] {
    opacity: .6;
    cursor: not-allowed;
}

.filters-card[b-nw5zck1iz6] {
    background: var(--card-bg);
    backdrop-filter: blur(18px);
    border-radius: 24px;
    padding: 28px;
    margin-bottom: 24px;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-md);
    
    max-width: 1400px;
    margin: 0 auto;
}

.filters-header[b-nw5zck1iz6] {
    margin-bottom: 24px;
}

.filters-header h2[b-nw5zck1iz6] {
    margin: 0;
    font-size: 1.3rem;
    color: var(--text-primary);
}

.filters-header p[b-nw5zck1iz6] {
    margin-top: 5px;
    color: var(--text-muted);
}

.filters-grid[b-nw5zck1iz6] {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 22px;
}

.form-group[b-nw5zck1iz6] {
    display: flex;
    flex-direction: column;
}

.form-label[b-nw5zck1iz6] {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.form-input[b-nw5zck1iz6] {
    height: 46px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0 14px;
    font-size: 14px;
    background: var(--color-surface);
    color: var(--text-primary);
    transition: .25s;
}

.form-input option[b-nw5zck1iz6] {
    background: var(--color-surface);
    color: var(--text-primary);
}

.form-input:focus[b-nw5zck1iz6] {
    outline: none;
    border-color: #14B8A6;
    box-shadow: 0 0 0 4px rgba(20,184,166,.15);
}

.helper-text[b-nw5zck1iz6] {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.error-message[b-nw5zck1iz6] {
    margin-top: 5px;
    color: #f87171;
    font-size: 12px;
    font-weight: 600;
}

.filters-actions[b-nw5zck1iz6] {
    margin-top: 28px;
}

.results-card[b-nw5zck1iz6] {
    background: var(--card-bg);
    max-width: 1400px;
    margin: 1rem auto;
    border-radius: 22px;
    padding: 28px;
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 35px rgba(15,23,42,.15);
}

.results-header[b-nw5zck1iz6] {
    margin-bottom: 20px;
}

.results-header h2[b-nw5zck1iz6] {
    margin: 0;
    color: var(--text-primary);
}

.results-header p[b-nw5zck1iz6] {
    margin-top: 5px;
    color: var(--text-muted);
}

.table-wrapper[b-nw5zck1iz6] {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid var(--card-border);
}

.analytics-table[b-nw5zck1iz6] {
    width: 100%;
    border-collapse: collapse;
    border-color: var(--border-color);
}

/* Kept fixed dark header — same convention as your other analytics tables */
.analytics-table thead[b-nw5zck1iz6] {
    background: #083A3B;
}

.analytics-table th[b-nw5zck1iz6] {
    color: white;
    padding: 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--border-color);
}

.analytics-table td[b-nw5zck1iz6] {
    padding: 15px 16px;
    border-bottom: 1px solid var(--card-border);
    color: var(--text-secondary);
}

.analytics-table tbody tr[b-nw5zck1iz6] {
    transition: .2s;
}

.analytics-table tbody tr:hover[b-nw5zck1iz6] {
    background: var(--color-surface-alt);
}

.analytics-table tbody tr:last-child td[b-nw5zck1iz6] {
    border-bottom: none;
}

.number-cell[b-nw5zck1iz6] {
    text-align: right;
    font-weight: 700;
    color: #14B8A6;
}

.summary-stats[b-nw5zck1iz6] {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 28px;
}

.stat-card[b-nw5zck1iz6] {
    background: var(--card-bg);
    border-radius: 18px;
    padding: 24px;
    text-align: center;
    border: 1px solid var(--card-border);
    position: relative;
    transition: .3s;
    overflow: hidden;
}

.stat-card[b-nw5zck1iz6]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg,#008080,#14B8A6);
}

.stat-card:hover[b-nw5zck1iz6] {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

.stat-card h3[b-nw5zck1iz6] {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .8px;
}

.stat-value[b-nw5zck1iz6] {
    margin-top: 12px;
    font-size: 34px;
    font-weight: 800;
    color: var(--text-primary);
}

.no-data-message[b-nw5zck1iz6] {
    background: var(--card-bg);
    max-width: 1400px;
    margin: 1rem auto;
    border-radius: 20px;
    padding: 50px;
    text-align: center;
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 30px rgba(0,0,0,.1);
}

.no-data-message p[b-nw5zck1iz6] {
    margin: 0;
    font-size: 15px;
    color: var(--text-muted);
}

@media (max-width:1024px) {

    .summary-stats[b-nw5zck1iz6] {
        grid-template-columns: 1fr;
    }
}

@media (max-width:768px) {

    .meta-analytics-page[b-nw5zck1iz6] {
        padding: 16px;
    }

    .page-header[b-nw5zck1iz6] {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header h1[b-nw5zck1iz6] {
        font-size: 1.8rem;
    }

    .filters-grid[b-nw5zck1iz6] {
        grid-template-columns: 1fr;
    }

    .analytics-table th[b-nw5zck1iz6],
    .analytics-table td[b-nw5zck1iz6] {
        padding: 12px;
        font-size: 12px;
    }

    .stat-value[b-nw5zck1iz6] {
        font-size: 28px;
    }
}
/* /Pages/Authorized/WhatsApp/Analytics/MetaPricingAnalytics.razor.rz.scp.css */
.meta-analytics-page[b-mj8461nlww] {
    padding: 24px 24px 65px;
    min-height: 100vh;
    box-sizing: border-box;
    background: var(--page-bg);
}

.page-header[b-mj8461nlww] {
    display: flex;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding: 28px;
    border-radius: 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-md);
}

.page-header h1[b-mj8461nlww] {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg,#008080,#14B8A6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-subtitle[b-mj8461nlww] {
    margin-top: 6px;
    font-size: 15px;
    color: var(--text-muted);
}

.btn-primary[b-mj8461nlww] {
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg,#008080,#14B8A6);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: .3s;
}

.btn-primary:hover:not(:disabled)[b-mj8461nlww] {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,128,128,.25);
}

.btn-secondary[b-mj8461nlww] {
    border: 1px solid var(--border-color);
    padding: 12px 24px;
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
}

.btn-secondary:hover:not(:disabled)[b-mj8461nlww] {
    background: var(--color-surface-alt);
}

.btn-primary:disabled[b-mj8461nlww],
.btn-secondary:disabled[b-mj8461nlww] {
    opacity: .6;
    cursor: not-allowed;
}

.filters-card[b-mj8461nlww],
.results-card[b-mj8461nlww] {
    background: var(--card-bg);
    max-width: 1400px;
    margin: 0 auto;
    backdrop-filter: blur(18px);
    border-radius: 24px;
    padding: 28px;
    margin-bottom: 24px;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-md);
}

.results-card[b-mj8461nlww] {
    margin: 1rem auto;
}

.filters-header[b-mj8461nlww] {
    margin-bottom: 20px;
}

.filters-header h2[b-mj8461nlww],
.results-header h2[b-mj8461nlww] {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.filters-header p[b-mj8461nlww],
.results-header p[b-mj8461nlww] {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 13px;
}

.filters-grid[b-mj8461nlww] {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 20px;
}

.form-group[b-mj8461nlww] {
    display: flex;
    flex-direction: column;
}

.form-label[b-mj8461nlww] {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

.form-input[b-mj8461nlww] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--text-primary);
    font-size: 14px;
    transition: all .2s ease;
}

.form-input option[b-mj8461nlww] {
    background: var(--color-surface);
    color: var(--text-primary);
}

.form-input:focus[b-mj8461nlww] {
    outline: none;
    border-color: #008080;
    box-shadow: 0 0 0 4px rgba(0,128,128,.15);
}

.form-input[b-mj8461nlww]::placeholder {
    color: var(--text-muted);
}

.helper-text[b-mj8461nlww] {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.error-message[b-mj8461nlww] {
    margin-top: 5px;
    color: #f87171;
    font-size: 12px;
}

.filters-actions[b-mj8461nlww] {
    margin-top: 24px;
}

.checkbox-group[b-mj8461nlww] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.checkbox-item[b-mj8461nlww] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #14B8A6;
    background: rgba(20, 184, 166, 0.1);
    color: var(--color-primary-light);
    cursor: pointer;
    transition: .2s ease;
}

.checkbox-item input[b-mj8461nlww] {
    accent-color: var(--color-primary);
}

.checkbox-item span[b-mj8461nlww] {
    font-size: .88rem;
    font-weight: 600;
}

.results-header[b-mj8461nlww] {
    margin-bottom: 20px;
}

.table-wrapper[b-mj8461nlww] {
    overflow: auto;
    max-height: 700px;
    border: 1px solid var(--card-border);
    border-radius: 14px;
}

.analytics-table[b-mj8461nlww] {
    width: 100%;
    border-collapse: collapse;
    border-color: var(--border-color);
    min-width: 1000px;
}

/* Kept fixed dark header — same convention as your other analytics tables */
.analytics-table thead[b-mj8461nlww] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #083A3B;
}

.analytics-table th[b-mj8461nlww] {
    color: white;
    font-size: 13px;
    font-weight: 700;
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.analytics-table td[b-mj8461nlww] {
    padding: 14px 16px;
    border-bottom: 1px solid var(--card-border);
    color: var(--text-primary);
    font-size: 14px;
}

.analytics-table tbody tr[b-mj8461nlww] {
    transition: .15s ease;
}

.analytics-table tbody tr:hover[b-mj8461nlww] {
    background: var(--color-surface-alt);
}

.number-cell[b-mj8461nlww] {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.currency-cell[b-mj8461nlww] {
    text-align: right;
    font-weight: 700;
    color: #10b981;
    font-variant-numeric: tabular-nums;
}

.badge[b-mj8461nlww] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.18);
    color: #1d4ed8;
}

.badge-secondary[b-mj8461nlww] {
    background: rgba(236, 72, 153, 0.18);
    color: #db2777;
}

.badge-tertiary[b-mj8461nlww] {
    background: rgba(34, 197, 94, 0.18);
    color: #15803d;
}

.summary-stats[b-mj8461nlww] {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 20px;
    margin-top: 24px;
}

.stat-card[b-mj8461nlww] {
    background: var(--color-surface-alt);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 22px;
    text-align: center;
    transition: .25s ease;
}

.stat-card:hover[b-mj8461nlww] {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(15,23,42,.2);
}

.stat-card h3[b-mj8461nlww] {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.stat-value[b-mj8461nlww] {
    margin-top: 12px;
    font-size: 32px;
    font-weight: 700;
    color: #14B8A6;
    line-height: 1;
}

.no-data-message[b-mj8461nlww] {
    background: var(--card-bg);
    border: 1px dashed var(--border-color);
    max-width: 1400px;
    margin: 1rem auto;
    border-radius: 18px;
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}

.no-data-message p[b-mj8461nlww] {
    margin: 0;
    font-size: 15px;
}

.table-wrapper[b-mj8461nlww]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-wrapper[b-mj8461nlww]::-webkit-scrollbar-thumb {
    background: rgba(20, 184, 166, 0.3);
    border-radius: 20px;
}

.table-wrapper[b-mj8461nlww]::-webkit-scrollbar-thumb:hover {
    background: rgba(20, 184, 166, 0.5);
}

@media (max-width: 768px) {

    .meta-analytics-page[b-mj8461nlww] {
        padding: 16px;
    }

    .page-header[b-mj8461nlww] {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header h1[b-mj8461nlww] {
        font-size: 1.6rem;
    }

    .filters-grid[b-mj8461nlww] {
        grid-template-columns: 1fr;
    }

    .checkbox-group[b-mj8461nlww] {
        flex-direction: column;
    }

    .summary-stats[b-mj8461nlww] {
        grid-template-columns: 1fr;
    }

    .analytics-table[b-mj8461nlww] {
        min-width: 850px;
    }

    .analytics-table th[b-mj8461nlww],
    .analytics-table td[b-mj8461nlww] {
        padding: 10px;
    }

    .stat-value[b-mj8461nlww] {
        font-size: 26px;
    }
}
/* /Pages/Authorized/WhatsApp/Analytics/MetaTemplateAnalytics.razor.rz.scp.css */
.meta-analytics-page[b-5r447ps7cv] {
    padding: 24px 24px 65px;
    min-height: 100vh;
    background: var(--page-bg);
}

.page-header[b-5r447ps7cv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    gap: 20px;
    margin-bottom: 24px;
    padding: 28px;
    border-radius: 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-md);
}

.page-header h1[b-5r447ps7cv] {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg,#008080,#14B8A6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-subtitle[b-5r447ps7cv] {
    margin-top: 6px;
    font-size: 15px;
    color: var(--text-muted);
}

.btn-primary[b-5r447ps7cv] {
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg,#008080,#14B8A6);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: .3s;
}

.btn-primary:hover:not(:disabled)[b-5r447ps7cv] {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,128,128,.25);
}

.btn-secondary[b-5r447ps7cv] {
    border: 1px solid var(--border-color);
    padding: 12px 24px;
    border-radius: 12px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
}

.btn-secondary:hover:not(:disabled)[b-5r447ps7cv] {
    background: var(--color-surface-alt);
}

.btn-primary:disabled[b-5r447ps7cv],
.btn-secondary:disabled[b-5r447ps7cv] {
    opacity: .6;
    cursor: not-allowed;
}

.filters-card[b-5r447ps7cv] {
    background: var(--card-bg);
    backdrop-filter: blur(18px);
    max-width: 1400px;
    margin: 0 auto;
    border-radius: 24px;
    padding: 28px;
    margin-bottom: 24px;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-md);
}

.filters-header[b-5r447ps7cv] {
    margin-bottom: 24px;
}

.filters-header h2[b-5r447ps7cv] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.filters-header p[b-5r447ps7cv] {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: .85rem;
}

.filters-grid[b-5r447ps7cv] {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 20px;
}

.form-group[b-5r447ps7cv] {
    display: flex;
    flex-direction: column;
}

.form-label[b-5r447ps7cv] {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.form-input[b-5r447ps7cv] {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--color-surface);
    color: var(--text-primary);
    padding: 13px 15px;
    font-size: .9rem;
    transition: .25s;
}

.form-input option[b-5r447ps7cv] {
    background: var(--color-surface);
    color: var(--text-primary);
}

.form-input:focus[b-5r447ps7cv] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(20,184,166,.15);
}

.form-textarea[b-5r447ps7cv] {
    min-height: 140px;
    resize: vertical;
    font-family: 'Quicksand', sans-serif;
}

.helper-text[b-5r447ps7cv] {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: .8rem;
}

.error-message[b-5r447ps7cv] {
    margin-top: 6px;
    color: #f87171;
    font-size: .8rem;
    font-weight: 600;
}

.template-dropdown[b-5r447ps7cv] {
    appearance: none;
    background-image: var(--chevron-icon);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
    cursor: pointer;
}

.template-dropdown:focus[b-5r447ps7cv] {
    outline: none;
}

.template-dropdown option[b-5r447ps7cv] {
    padding: 10px;
    background: var(--color-surface);
    color: var(--text-primary);
}

.template-loading-error[b-5r447ps7cv] {
    padding: 16px 12px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 14px;
    color: #f87171;
    font-size: 0.9rem;
}

.template-loading-error p[b-5r447ps7cv] {
    margin: 0;
}

.checkbox-group[b-5r447ps7cv] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.checkbox-item[b-5r447ps7cv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #14B8A6;
    background: rgba(20, 184, 166, 0.1);
    color: var(--color-primary-light);
    cursor: pointer;
    transition: .2s ease;
}

.checkbox-item input[b-5r447ps7cv] {
    accent-color: var(--color-primary);
}

.checkbox-item span[b-5r447ps7cv] {
    font-size: .88rem;
    font-weight: 600;
}

.filters-actions[b-5r447ps7cv] {
    margin-top: 28px;
}

.results-card[b-5r447ps7cv] {
    background: var(--card-bg);
    max-width: 1400px;
    margin: 1rem auto;
    border-radius: 24px;
    padding: 28px;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-md);
}

.results-header[b-5r447ps7cv] {
    margin-bottom: 24px;
}

.results-header h2[b-5r447ps7cv] {
    margin: 0;
    color: var(--text-primary);
}

.results-header p[b-5r447ps7cv] {
    margin: 6px 0 0;
    color: var(--text-muted);
}

.template-block[b-5r447ps7cv] {
    margin-bottom: 32px;
    padding: 24px;
    border-radius: 20px;
    background: var(--color-surface-alt);
    border: 1px solid var(--card-border);
}

.block-header[b-5r447ps7cv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.block-header h3[b-5r447ps7cv] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.05rem;
}

.block-subtitle[b-5r447ps7cv] {
    margin: 0;
    color: var(--text-muted);
}

.badge[b-5r447ps7cv] {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(20,184,166,.15);
    color: var(--color-primary-light);
    font-weight: 700;
    font-size: .75rem;
}

.table-wrapper[b-5r447ps7cv] {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid var(--card-border);
}

.analytics-table[b-5r447ps7cv] {
    width: 100%;
    border-collapse: collapse;
    border-color: var(--border-color);
}

/* Kept fixed dark header — same convention as your other analytics tables */
.analytics-table thead[b-5r447ps7cv] {
    background: #083A3B;
}

.analytics-table th[b-5r447ps7cv] {
    color: white;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.analytics-table td[b-5r447ps7cv] {
    padding: 15px 16px;
    border-bottom: 1px solid var(--card-border);
    color: var(--text-secondary);
}

.analytics-table tbody tr[b-5r447ps7cv] {
    transition: .2s;
}

.analytics-table tbody tr:hover[b-5r447ps7cv] {
    background: rgba(20,184,166,.08);
}

.number-cell[b-5r447ps7cv] {
    text-align: right;
    font-weight: 700;
    color: var(--color-primary-light);
}

.click-details[b-5r447ps7cv],
.cost-details[b-5r447ps7cv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.click-item[b-5r447ps7cv],
.cost-item[b-5r447ps7cv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(20,184,166,.08);
}

.click-type[b-5r447ps7cv],
.cost-type[b-5r447ps7cv] {
    font-weight: 700;
    color: var(--text-primary);
}

.click-content[b-5r447ps7cv] {
    flex: 1;
    color: var(--text-muted);
}

.click-count[b-5r447ps7cv] {
    font-weight: 700;
    color: var(--color-primary-light);
}

.cost-value[b-5r447ps7cv] {
    font-weight: 700;
    color: #22c55e;
}

.no-data-message[b-5r447ps7cv] {
    padding: 40px;
    max-width: 1400px;
    margin: 1rem auto;
    text-align: center;
    border-radius: 24px;
    background: var(--card-bg);
    border: 1px dashed var(--border-color);
    box-shadow: var(--shadow-sm);
}

.no-data-message p[b-5r447ps7cv] {
    margin: 0;
    color: var(--text-muted);
    font-size: 1rem;
}

@media (max-width: 768px) {

    .meta-analytics-page[b-5r447ps7cv] {
        padding: 16px;
    }

    .page-header[b-5r447ps7cv],
    .block-header[b-5r447ps7cv] {
        flex-direction: column;
        align-items: flex-start;
    }

    .filters-grid[b-5r447ps7cv] {
        grid-template-columns: 1fr;
    }

    .checkbox-group[b-5r447ps7cv] {
        flex-direction: column;
    }

    .analytics-table[b-5r447ps7cv] {
        min-width: 900px;
    }

    .page-header h1[b-5r447ps7cv] {
        font-size: 1.5rem;
    }
}
/* /Pages/Authorized/WhatsApp/Analytics/RunDetails.razor.rz.scp.css */
.run-details-page[b-n1h9x2kz2i] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

.page-header[b-n1h9x2kz2i] {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding: 28px;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.header-content[b-n1h9x2kz2i] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-header h1[b-n1h9x2kz2i] {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.page-subtitle[b-n1h9x2kz2i] {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

.page-actions[b-n1h9x2kz2i] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.back-button[b-n1h9x2kz2i] {
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    padding: 10px 18px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: .3s;
}

.back-button:hover[b-n1h9x2kz2i] {
    background: var(--color-surface-alt);
}

.btn-secondary[b-n1h9x2kz2i] {
    border: none;
    background: #0f172a;
    color: white;
    padding: 10px 18px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: .3s;
}

.btn-secondary:hover:not(:disabled)[b-n1h9x2kz2i] {
    background: #1e293b;
}

/* =========================
   STATUS TEXT (used in summary card)
========================= */

.status-text-processing[b-n1h9x2kz2i] {
    color: #b45309;
}

.status-text-completed[b-n1h9x2kz2i] {
    color: #15803d;
}

.status-text-default[b-n1h9x2kz2i] {
    color: var(--text-primary);
}

.details-container[b-n1h9x2kz2i] {
    max-width: 1400px;
    margin: 0 auto;
}

/* =========================
   SUMMARY CARD
========================= */

.summary-card[b-n1h9x2kz2i] {
    position: relative;
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(45, 212, 191, 0.03) 100%);
    border-radius: 22px;
    padding: 28px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    border: 1px solid var(--card-border);
    overflow: hidden;
}

/* .summary-card::before {
    content: "";
    position: absolute;
    inset: -100px auto auto -90px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.18), transparent 62%);
    pointer-events: none;
} */

.summary-header[b-n1h9x2kz2i] {
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
}

.summary-header h2[b-n1h9x2kz2i] {
    margin: 0;
    font-size: 1.4rem;
    color: var(--text-primary);
}

/* =========================
   INFO GRID
========================= */

.summary-grid[b-n1h9x2kz2i] {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
    margin-bottom: 28px;
}

.summary-item[b-n1h9x2kz2i] {
    background: var(--color-surface-alt);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 16px;
}

.summary-label[b-n1h9x2kz2i] {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.summary-value[b-n1h9x2kz2i] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}

/* =========================
   STATUS SUMMARY
========================= */

.status-summary[b-n1h9x2kz2i] {
    position: relative;
    z-index: 1;
    margin-top: 20px;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(148, 163, 184, 0.03));
    border: 1px solid var(--card-border);
}

.status-summary-header[b-n1h9x2kz2i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.status-summary-kicker[b-n1h9x2kz2i] {
    margin: 0 0 4px;
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}

.status-summary h3[b-n1h9x2kz2i] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.status-summary-total[b-n1h9x2kz2i] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.2);
}

.status-summary-total-label[b-n1h9x2kz2i] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.status-summary-total strong[b-n1h9x2kz2i] {
    font-size: 1.4rem;
    color: var(--text-primary);
}

.status-grid[b-n1h9x2kz2i] {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.status-chart-panel[b-n1h9x2kz2i] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 260px;
}

.status-donut-chart[b-n1h9x2kz2i] {
    position: relative;
    width: min(100%, 260px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}

.status-donut-chart:hover[b-n1h9x2kz2i] {
    transform: scale(1.02);
    filter: saturate(1.12) brightness(1.05);
    box-shadow: 0 18px 32px rgba(59, 130, 246, 0.18), inset 0 1px 0 rgba(255,255,255,0.2);
}

.status-donut-chart[b-n1h9x2kz2i]::before {
    content: "";
    position: absolute;
    inset: 22px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.status-donut-center[b-n1h9x2kz2i] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.status-donut-total[b-n1h9x2kz2i] {
    font-size: clamp(1.8rem, 2vw, 2.2rem);
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
}

.status-donut-label[b-n1h9x2kz2i] {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.status-legend[b-n1h9x2kz2i] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.status-item[b-n1h9x2kz2i] {
    border-radius: 16px;
    padding: 14px 14px 12px;
    border: 1px solid var(--card-border);
    background: rgba(148, 163, 184, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.status-item.status-sent[b-n1h9x2kz2i] {
    --item-color: #60a5fa;
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(96, 165, 250, 0.3);
}

.status-item.status-delivered[b-n1h9x2kz2i] {
    --item-color: #4ade80;
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(74, 222, 128, 0.3);
}

.status-item.status-read[b-n1h9x2kz2i] {
    --item-color: #a78bfa;
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(167, 139, 250, 0.3);
}

.status-item.status-failed[b-n1h9x2kz2i] {
    --item-color: #fca5a5;
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(248, 113, 113, 0.3);
}

.status-item.status-stopped[b-n1h9x2kz2i] {
    --item-color: #fbbf24;
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(251, 191, 36, 0.3);
}

.status-item-left[b-n1h9x2kz2i],
.status-item-right[b-n1h9x2kz2i] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-item-right[b-n1h9x2kz2i] {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.status-dot[b-n1h9x2kz2i] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--item-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--item-color) 22%, transparent);
}

.status-count[b-n1h9x2kz2i] {
    display: block;
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 800;
    color: var(--text-primary);
}

.status-label[b-n1h9x2kz2i] {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.status-meta[b-n1h9x2kz2i] {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 700;
}

/* =========================
   MESSAGE SECTION
========================= */

.messages-section[b-n1h9x2kz2i] {
    margin-top: 24px;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    overflow: hidden;
}

.messages-header[b-n1h9x2kz2i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--card-border);
    flex-wrap: wrap;
}

.header-title[b-n1h9x2kz2i] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-primary);
}

.header-title h2[b-n1h9x2kz2i] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.header-subtitle[b-n1h9x2kz2i] {
    font-size: 13px;
    color: var(--text-muted);
}

.filter-and-search[b-n1h9x2kz2i] {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-box[b-n1h9x2kz2i] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

.filter-label[b-n1h9x2kz2i] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-select[b-n1h9x2kz2i] {
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--color-surface);
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.filter-select option[b-n1h9x2kz2i] {
    background: var(--color-surface);
    color: var(--text-primary);
}

.filter-select:focus[b-n1h9x2kz2i] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.search-box[b-n1h9x2kz2i] {
    position: relative;
    width: 340px;
}

.search-box i[b-n1h9x2kz2i] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 15px;
}

.search-input[b-n1h9x2kz2i] {
    width: 100%;
    height: 44px;
    padding: 0 16px 0 42px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--color-surface);
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.search-input[b-n1h9x2kz2i]::placeholder {
    color: var(--text-muted);
}

.search-input:focus[b-n1h9x2kz2i] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.btn-export[b-n1h9x2kz2i] {
    height: 44px;
    padding: 0 18px;
    border: none;
    background: #10b981;
    color: white;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-export:hover:not(:disabled)[b-n1h9x2kz2i] {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-export:disabled[b-n1h9x2kz2i] {
    background: var(--border-color);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

/* =========================
   TABLE
========================= */

.messages-table-container[b-n1h9x2kz2i] {
    overflow-x: auto;
}

.messages-table[b-n1h9x2kz2i] {
    width: 100%;
    border-collapse: collapse;
}

/* Kept fixed dark header row — same convention as RunHistory table */
.messages-table thead[b-n1h9x2kz2i] {
    background: #0f172a;
    position: sticky;
    top: 0;
}

.messages-table th[b-n1h9x2kz2i] {
    color: white;
    padding: 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
}

.messages-table td[b-n1h9x2kz2i] {
    padding: 16px;
    border-bottom: 1px solid var(--card-border);
    color: var(--text-secondary);
}

.messages-table tbody tr:hover[b-n1h9x2kz2i] {
    background: var(--color-surface-alt);
}

/* =========================
   BADGES
========================= */

.type-badge[b-n1h9x2kz2i] {
    background: rgba(14, 165, 233, 0.18);
    color: #0369a1;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.status-sent[b-n1h9x2kz2i],
.status-delivered[b-n1h9x2kz2i],
.status-read[b-n1h9x2kz2i],
.status-failed[b-n1h9x2kz2i],
.status-stopped[b-n1h9x2kz2i] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.status-sent[b-n1h9x2kz2i] {
    background: rgba(59, 130, 246, 0.18);
    color: #1d4ed8;
}

.status-delivered[b-n1h9x2kz2i] {
    background: rgba(34, 197, 94, 0.18);
    color: #15803d;
}

.status-read[b-n1h9x2kz2i] {
    background: rgba(139, 92, 246, 0.18);
    color: #7c3aed;
}

.status-failed[b-n1h9x2kz2i] {
    background: rgba(239, 68, 68, 0.18);
    color: #dc2626;
}

.status-stopped[b-n1h9x2kz2i] {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
}

/* =========================
   CONTENT
========================= */

.content-cell[b-n1h9x2kz2i] {
    max-width: 350px;
}

.content-preview[b-n1h9x2kz2i] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.error-text[b-n1h9x2kz2i] {
    color: #dc2626;
    font-size: 13px;
}

.messages-info[b-n1h9x2kz2i] {
    padding: 16px 24px;
    background: var(--color-surface-alt);
    color: var(--text-muted);
    font-size: 13px;
    border-top: 1px solid var(--card-border);
}

/* =========================
   EMPTY / ERROR
========================= */

.error-state[b-n1h9x2kz2i],
.spinner-center[b-n1h9x2kz2i],
.empty-messages[b-n1h9x2kz2i] {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 60px 30px;
    text-align: center;
    border: 1px solid var(--card-border);
    color: var(--text-primary);
}

.error-icon[b-n1h9x2kz2i] {
    font-size: 60px;
    margin-bottom: 15px;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:1200px) {
    .summary-grid[b-n1h9x2kz2i] {
        grid-template-columns: repeat(2,1fr);
    }

    .status-grid[b-n1h9x2kz2i] {
        grid-template-columns: repeat(3,1fr);
    }
}

@media (max-width:768px) {

    .run-details-page[b-n1h9x2kz2i] {
        padding: 15px;
    }

    .summary-grid[b-n1h9x2kz2i] {
        grid-template-columns: 1fr;
    }

    .status-grid[b-n1h9x2kz2i] {
        grid-template-columns: repeat(2,1fr);
    }

    .messages-header[b-n1h9x2kz2i] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-and-search[b-n1h9x2kz2i] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-n1h9x2kz2i],
    .filter-box[b-n1h9x2kz2i] {
        width: 100%;
    }

    .messages-table[b-n1h9x2kz2i] {
        min-width: 900px;
    }

    .page-header[b-n1h9x2kz2i] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-content[b-n1h9x2kz2i] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/Authorized/WhatsApp/Analytics/RunHistory.razor.rz.scp.css */
.run-history-page[b-yzuszfaa85] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

.page-header[b-yzuszfaa85] {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding: 28px;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.page-header h1[b-yzuszfaa85] {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.page-subtitle[b-yzuszfaa85] {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 14px;
}

.filters-card[b-yzuszfaa85] {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto 24px;
    border: 1px solid var(--card-border);
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.filters-header h2[b-yzuszfaa85] {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.filters-header p[b-yzuszfaa85] {
    margin: 8px 0 20px;
    color: var(--text-muted);
}

.filters-grid[b-yzuszfaa85] {
    display: grid;
    grid-template-columns: repeat(2, minmax(250px, 1fr));
    gap: 20px;
}

.form-label[b-yzuszfaa85] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 14px;
}

.form-input[b-yzuszfaa85] {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 14px;
    background: var(--color-surface);
    color: var(--text-primary);
    transition: all .25s ease;
}

.form-input option[b-yzuszfaa85] {
    background: var(--color-surface);
    color: var(--text-primary);
}

.form-input:focus[b-yzuszfaa85] {
    outline: none;
    border-color: #0f766e;
    box-shadow: 0 0 0 4px rgba(15,118,110,.15);
}

.filters-actions[b-yzuszfaa85] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.btn-secondary[b-yzuszfaa85],
.btn-secondary-outline[b-yzuszfaa85],
.page-btn[b-yzuszfaa85] {
    height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: .25s;
}

.btn-secondary[b-yzuszfaa85] {
    background: #0f766e;
    color: white;
    border: none;
}

.btn-secondary:hover[b-yzuszfaa85] {
    background: #115e59;
}

.btn-secondary-outline[b-yzuszfaa85] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-secondary-outline:hover[b-yzuszfaa85] {
    background: var(--color-surface-alt);
}

.btn-secondary:disabled[b-yzuszfaa85],
.btn-secondary-outline:disabled[b-yzuszfaa85] {
    opacity: .5;
    cursor: not-allowed;
}

.history-table-container[b-yzuszfaa85] {
    max-width: 1400px;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 35px rgba(0,0,0,.08);
}

.history-table[b-yzuszfaa85] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.history-table thead[b-yzuszfaa85] {
    background: #111827;
}

.history-table th[b-yzuszfaa85],
.history-table td[b-yzuszfaa85] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-table th[b-yzuszfaa85] {
    padding: 18px 16px;
    color: white;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
}

.history-table td[b-yzuszfaa85] {
    padding: 10px 16px;
    border-bottom: 1px solid var(--card-border);
    color: var(--text-secondary);
    font-size: 14px;
}

.history-table th:nth-child(1)[b-yzuszfaa85],
.history-table td:nth-child(1)[b-yzuszfaa85] {
    max-width: 22%;
}

.history-table th:nth-child(1)[b-yzuszfaa85],
.history-table td:nth-child(1)[b-yzuszfaa85] {
    max-width: 15%;
}

.history-table th:nth-child(3)[b-yzuszfaa85],
.history-table td:nth-child(3)[b-yzuszfaa85] {
    max-width: 12%;
}

.history-table th:nth-child(4)[b-yzuszfaa85],
.history-table td:nth-child(4)[b-yzuszfaa85] {
    max-width: 18%;
    text-overflow: clip;
}

.history-table th:nth-child(5)[b-yzuszfaa85],
.history-table td:nth-child(5)[b-yzuszfaa85] {
    max-width: 10%;
}

.history-table th:nth-child(6)[b-yzuszfaa85],
.history-table td:nth-child(6)[b-yzuszfaa85] {
    max-width: 17%;
    text-overflow: clip;
}

.history-table th:nth-child(7)[b-yzuszfaa85],
.history-table td:nth-child(7)[b-yzuszfaa85],
.history-table th:nth-child(8)[b-yzuszfaa85],
.history-table td:nth-child(8)[b-yzuszfaa85],
.history-table th:nth-child(9)[b-yzuszfaa85],
.history-table td:nth-child(9)[b-yzuszfaa85],
.history-table th:nth-child(10)[b-yzuszfaa85],
.history-table td:nth-child(10)[b-yzuszfaa85] {
    max-width: 7%;
}

.history-table th:nth-child(11)[b-yzuszfaa85],
.history-table td:nth-child(11)[b-yzuszfaa85] {
    max-width: 6%;
}

.history-table tbody tr[b-yzuszfaa85] {
    transition: all .2s ease;
}

.history-table tbody tr:hover[b-yzuszfaa85] {
    background: var(--color-surface-alt);
}

.history-table tbody tr:last-child td[b-yzuszfaa85] {
    border-bottom: none;
}

.text-center[b-yzuszfaa85] {
    text-align: center;
}

.status-badge-processing[b-yzuszfaa85],
.status-badge-completed[b-yzuszfaa85],
.status-badge-initiated[b-yzuszfaa85],
.status-badge-in-progress[b-yzuszfaa85],
.status-badge-sent[b-yzuszfaa85],
.status-badge-partially-sent[b-yzuszfaa85],
.status-badge-delivered[b-yzuszfaa85],
.status-badge-failed[b-yzuszfaa85],
.status-badge-stopped[b-yzuszfaa85],
.status-badge-uploaded[b-yzuszfaa85],
.status-badge-unknown[b-yzuszfaa85] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.status-badge-processing[b-yzuszfaa85],
.status-badge-initiated[b-yzuszfaa85],
.status-badge-in-progress[b-yzuszfaa85] {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
}

.status-badge-completed[b-yzuszfaa85],
.status-badge-delivered[b-yzuszfaa85] {
    background: rgba(34, 197, 94, 0.18);
    color: #15803d;
}

.status-badge-sent[b-yzuszfaa85] {
    background: rgba(59, 130, 246, 0.18);
    color: #1d4ed8;
}

.status-badge-partially-sent[b-yzuszfaa85] {
    background: rgba(251, 146, 60, 0.2);
    color: #9a3412;
}

.status-badge-failed[b-yzuszfaa85],
.status-badge-stopped[b-yzuszfaa85] {
    background: rgba(239, 68, 68, 0.18);
    color: #b91c1c;
}

.status-badge-uploaded[b-yzuszfaa85] {
    background: rgba(139, 92, 246, 0.18);
    color: #6d28d9;
}

.status-badge-unknown[b-yzuszfaa85] {
    background: rgba(107, 114, 128, 0.18);
    color: var(--text-muted);
}

.check-icon[b-yzuszfaa85] {
    font-size: 14px;
}

.btn-link[b-yzuszfaa85] {
    border: none;
    background: rgba(15, 118, 110, 0.12);
    color: #0f766e;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
    text-decoration: none;
}

.btn-link:hover[b-yzuszfaa85] {
    background: rgba(15, 118, 110, 0.2);
}

.pagination-bar[b-yzuszfaa85] {
    background: var(--card-bg);
    border-radius: 18px;
    padding: 18px;
    width: max-content;
    margin: 24px auto 0;
    border: 1px solid var(--card-border);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.page-btn[b-yzuszfaa85] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.page-btn:hover:not(:disabled)[b-yzuszfaa85] {
    background: var(--color-surface-alt);
}

.page-btn:disabled[b-yzuszfaa85] {
    opacity: .5;
    cursor: not-allowed;
}

.page-info[b-yzuszfaa85] {
    font-weight: 600;
    color: var(--text-secondary);
}

.empty-state[b-yzuszfaa85] {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 70px 30px;
    text-align: center;
    border: 1px solid var(--card-border);
}

.empty-icon[b-yzuszfaa85] {
    font-size: 70px;
    margin-bottom: 20px;
}

.empty-state h2[b-yzuszfaa85] {
    margin-bottom: 10px;
    color: var(--text-primary);
}

.empty-state p[b-yzuszfaa85] {
    color: var(--text-muted);
}

.spinner-center[b-yzuszfaa85] {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 80px;
    border: 1px solid var(--card-border);
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {

    .run-history-page[b-yzuszfaa85] {
        padding: 16px;
    }

    .page-header[b-yzuszfaa85] {
        flex-direction: column;
        align-items: stretch;
    }

    .filters-grid[b-yzuszfaa85] {
        grid-template-columns: 1fr;
    }

    .filters-actions[b-yzuszfaa85] {
        flex-direction: column;
    }

    .filters-actions button[b-yzuszfaa85] {
        width: 100%;
    }

    .history-table-container[b-yzuszfaa85] {
        overflow-x: auto;
    }

    .history-table[b-yzuszfaa85] {
        min-width: 1100px;
    }

    .pagination-bar[b-yzuszfaa85] {
        flex-direction: column;
    }

    .page-btn[b-yzuszfaa85] {
        width: 100%;
    }
}
/* /Pages/Authorized/WhatsApp/Bots/BotBuilder.razor.rz.scp.css */
.builder-page[b-x4dteehly2] {
    height: calc(100vh - 34px);
    display: flex;
    flex-direction: column;
    background: var(--bg-page);
    overflow: hidden;
}

.builder-toolbar[b-x4dteehly2] {
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    background: var(--bg-toolbar);
    backdrop-filter: blur(20px);

    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(15,23,42,.05);

    z-index: 20;
}

.toolbar-left[b-x4dteehly2] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.toolbar-right[b-x4dteehly2] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.toolbar-btn-back[b-x4dteehly2] {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 6px;

    background: rgba(0,128,128,.08);
    color: var(--color-primary);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: .25s ease;
}

.toolbar-btn-back:hover[b-x4dteehly2] {
    background: var(--color-primary);
    color: #fff;
    transform: translateY(-2px);
}

.toolbar-title-group[b-x4dteehly2] {
    min-width: 220px;
    max-width: 350px;
}

.toolbar-title[b-x4dteehly2] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;

    max-width: 350px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.toolbar-badge[b-x4dteehly2] {
    display: inline-flex;
    align-items: center;
    margin-top: 6px;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-primary);
}

.toolbar-badge-active[b-x4dteehly2] {
    color: #0f766e;
    background: rgba(16,185,129,.12);
    border: 1px solid rgba(16,185,129,.25);
}

.toolbar-badge-inactive[b-x4dteehly2] {
    color: #6b7280;
    background: rgba(107,114,128,.1);
    border: 1px solid rgba(107,114,128,.15);
}

.property-section[b-x4dteehly2] {
    display: flex;
    gap: 10px;
    flex: 1;
    min-width: 350px;
    max-width: 700px;
}

.property-input[b-x4dteehly2],
.property-textarea[b-x4dteehly2] {
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 14px;
    transition: .25s ease;
}

.property-input[b-x4dteehly2] {
    width: 260px;
    height: 44px;
    padding: 0 14px;
}

.property-input[b-x4dteehly2]::placeholder,
.property-textarea[b-x4dteehly2]::placeholder {
    color: var(--text-secondary);
    opacity: 0.5;
}

.property-textarea[b-x4dteehly2] {
    flex: 1;
    resize: none;
    padding: 11px 14px;
    min-height: 44px;
    max-height: 44px;
}

.property-input:focus[b-x4dteehly2],
.property-textarea:focus[b-x4dteehly2] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(0,128,128,.1);
}

.toolbar-btn[b-x4dteehly2] {
    height: 42px;
    padding: 0 16px;

    border-radius: 6px;
    border: 1px solid var(--border-color);
    background:var(--bg-btn);
    color:var(--text-secondary);

    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
    transition: .25s ease;
}

.toolbar-btn:hover[b-x4dteehly2] {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15,23,42,.08);
}

.toolbar-btn-primary[b-x4dteehly2] {
    border: none;
    color: #fff;

    background: linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-primary-light)
    );
}

.toolbar-btn-primary:hover[b-x4dteehly2] {
    box-shadow: 0 10px 24px rgba(0,128,128,.25);
}

.toolbar-btn-secondary[b-x4dteehly2] {
    background: rgba(0,128,128,.08);
    color: var(--color-primary);
    border-color: rgba(0,128,128,.12);
}

.toolbar-btn-secondary:hover[b-x4dteehly2] {
    background: rgba(0,128,128,.15);
}

.toolbar-btn-danger[b-x4dteehly2] {
    color: #dc2626;
    background: rgba(239,68,68,.08);
    border-color: rgba(239,68,68,.12);
}

.toolbar-btn-danger:hover[b-x4dteehly2] {
    background: rgba(239,68,68,.15);
}

.builder-container[b-x4dteehly2] {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.canvas-wrapper[b-x4dteehly2] {
    flex: 1;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(var(--dot-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--dot-color) 1px, transparent 1px),
        var(--canvas-bg);
    background-size: 28px 28px;
}

.properties-panel-container[b-x4dteehly2] {
    width: 340px;
    flex-shrink: 0;

    background: var(--card-bg);
    backdrop-filter: blur(20px);

    border-left: 1px solid rgba(0,128,128,.1);
    box-shadow: -8px 0 24px rgba(15,23,42,.04);

    overflow-y: auto;
}

.properties-panel[b-x4dteehly2] {
    padding: 24px;
}

.canvas-toolbar-btn[b-x4dteehly2] {
    width: 42px;
    height: 42px;

    border-radius: 6px;
    border: 1px solid var(--border-color);

    background: var(--bg-btn);
    color: var(--text-secondary);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: .25s ease;
}

.canvas-toolbar-btn:hover[b-x4dteehly2] {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

[b-x4dteehly2]::-webkit-scrollbar {
    width: 4px;
    height: 8px;
}

[b-x4dteehly2]::-webkit-scrollbar-thumb {
    background: rgba(0,128,128,.25);
    border-radius: 4px;
}

[b-x4dteehly2]::-webkit-scrollbar-thumb:hover {
    background: rgba(0,128,128,.45);
}

@media (max-width: 1200px) {

    .builder-toolbar[b-x4dteehly2] {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-left[b-x4dteehly2] {
        flex-wrap: wrap;
    }

    .property-section[b-x4dteehly2] {
        min-width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {

    .builder-page[b-x4dteehly2] {
        height: auto;
    }

    .builder-toolbar[b-x4dteehly2] {
        padding: 14px;
    }

    .toolbar-title[b-x4dteehly2] {
        font-size: 18px;
    }

    .toolbar-btn span[b-x4dteehly2] {
        display: none;
    }

    .property-section[b-x4dteehly2] {
        flex-direction: column;
    }

    .property-input[b-x4dteehly2],
    .property-textarea[b-x4dteehly2] {
        width: 100%;
    }

    .properties-panel-container[b-x4dteehly2] {
        width: 280px;
    }
}
/* /Pages/Authorized/WhatsApp/Bots/BotList.razor.rz.scp.css */
.bots-page[b-3uljuwisar] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

.bots-header[b-3uljuwisar] {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 28px;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    gap: 16px;
    flex-wrap: wrap;
}

.bots-title[b-3uljuwisar] {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
}

.bots-subtitle[b-3uljuwisar] {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 15px;
}

.header-right[b-3uljuwisar] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bots-search-box[b-3uljuwisar] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--page-bg);
    min-width: 260px;
    transition: all 0.15s;
}

.bots-search-box:focus-within[b-3uljuwisar] {
    border-color: #008080;
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.15);
}

.bots-search-box i.bi-search[b-3uljuwisar] {
    color: var(--text-muted);
    font-size: 14px;
    flex-shrink: 0;
}

.bots-search-input[b-3uljuwisar] {
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    width: 100%;
}

.bots-search-input[b-3uljuwisar]::placeholder {
    color: var(--text-muted);
}

.bots-search-clear[b-3uljuwisar] {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
    flex-shrink: 0;
}

.bots-search-clear:hover[b-3uljuwisar] {
    color: #dc2626;
}

@media (max-width: 640px) {
    .bots-search-box[b-3uljuwisar] {
        min-width: 0;
        flex: 1;
    }

    .header-right[b-3uljuwisar] {
        width: 100%;
    }
}

.btn-create[b-3uljuwisar] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg,#008080,#0ea5a4);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: .25s;
    white-space: nowrap;
}

.btn-create:hover[b-3uljuwisar] {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,128,128,.25);
}

.bots-tour-button[b-3uljuwisar] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.bots-tour-button i[b-3uljuwisar] {
    color: var(--color-primary);
}

.bots-tabs-wrapper[b-3uljuwisar] {
    max-width: 1400px;
    margin: 0 auto;
}

.bots-tabs[b-3uljuwisar] {
    display: inline-flex;
    gap: 4px;
    padding: 6px;
    margin-bottom: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.bots-tab[b-3uljuwisar] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.bots-tab:hover[b-3uljuwisar] {
    color: var(--text-primary);
    background: rgba(0, 128, 128, 0.08);
}

.bots-tab-active[b-3uljuwisar] {
    background: linear-gradient(135deg,#008080,#0ea5a4);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 128, 128, 0.25);
}

.bots-tab-active:hover[b-3uljuwisar] {
    color: white;
    background: linear-gradient(135deg,#008080,#0ea5a4);
}

@media (max-width: 640px) {
    .bots-tabs[b-3uljuwisar] {
        display: flex;
        width: 100%;
    }

    .bots-tab[b-3uljuwisar] {
        flex: 1;
        justify-content: center;
        padding: 10px 8px;
        font-size: 13px;
    }
}

.bots-container[b-3uljuwisar] {
    max-width: 1400px;
    margin: 0 auto;
}

.bots-grid[b-3uljuwisar] {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
    gap: 24px;
}

.bot-card[b-3uljuwisar] {
    position: relative;
    background: var(--card-bg);
    border-radius: 18px;
    border: 1px solid #008080;
    cursor: pointer;
    transition: .25s ease;
    border-top: 5px solid #008080;
}

.bot-card:hover[b-3uljuwisar] {
    transform: translateY(-6px);
    box-shadow: 0 16px 35px rgba(0,0,0,.08);
}

.card-header[b-3uljuwisar] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 22px 14px;
}

.card-title[b-3uljuwisar] {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-menu-btn[b-3uljuwisar] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: #157e7e;
    color: #fff;
    cursor: pointer;
    transition: all ease .2s;
}

.card-menu-btn:hover[b-3uljuwisar] {
    background: #008080;
    color: #fff;
}

.status-badge[b-3uljuwisar] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.status-published[b-3uljuwisar] {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
}

.status-draft[b-3uljuwisar] {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}

.status-inactive[b-3uljuwisar] {
    background: rgba(107, 114, 128, 0.18);
    color: var(--text-muted);
}

.card-body[b-3uljuwisar] {
    padding: 0 22px 20px;
}

.card-description[b-3uljuwisar],
.card-description-empty[b-3uljuwisar] {
    min-height: 44px;
    line-height: 1.6;
    font-size: 14px;
}

.card-description[b-3uljuwisar] {
    color: var(--text-secondary);
}

.card-description-empty[b-3uljuwisar] {
    color: var(--text-muted);
    font-style: italic;
}

.card-meta[b-3uljuwisar] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.meta-item[b-3uljuwisar] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 13px;
}

.meta-item i[b-3uljuwisar] {
    color: #008080;
    font-size: 15px;
    width: 18px;
}

.card-footer[b-3uljuwisar] {
    display: flex;
    gap: 10px;
    padding: 18px 22px;
    border-top: 1px solid var(--border-color);
    background: var(--color-surface-alt);
}

.card-action-btn[b-3uljuwisar] {
    flex: 1;
    border: none;
    border-radius: 10px;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
}

.card-action-btn:first-child[b-3uljuwisar] {
    background: rgba(37, 99, 235, 0.12);
    color: #60a5fa;
}

.card-action-btn:first-child:hover[b-3uljuwisar] {
    background: rgba(37, 99, 235, 0.2);
}

.btn-publish[b-3uljuwisar] {
    background: rgba(5, 150, 105, 0.12);
    color: #34d399;
}

.btn-publish:hover[b-3uljuwisar] {
    background: rgba(5, 150, 105, 0.2);
}

.btn-danger[b-3uljuwisar] {
    background: rgba(220, 38, 38, 0.12);
    color: #f87171;
}

.btn-danger:hover[b-3uljuwisar] {
    background: rgba(220, 38, 38, 0.2);
}

.context-menu[b-3uljuwisar] {
    position: absolute;
    right: 20px;
    top: 60px;
    width: fit-content;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 16px 40px rgba(0,0,0,.25);
    overflow: hidden;
    z-index: 1000;
}

.context-menu-item[b-3uljuwisar] {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-primary);
    padding: 5px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-align: left;
    font-size: 12px;
    transition: all .2s ease;
}

.context-menu-item:hover[b-3uljuwisar] {
    background: rgba(20, 184, 166, 0.1);
}

.context-menu-item.danger[b-3uljuwisar] {
    color: #f87171;
}
.context-menu-item.danger:hover[b-3uljuwisar] {
    background: rgba(220, 38, 38, 0.15);
}

.context-menu-divider[b-3uljuwisar] {
    height: 1px;
    background: var(--border-color);
}

.bots-empty[b-3uljuwisar] {
    background: var(--card-bg);
    border-radius: 20px;
    border: 2px dashed var(--border-color);
    padding: 90px 30px;
    text-align: center;
}

.empty-icon[b-3uljuwisar] {
    font-size: 70px;
    margin-bottom: 20px;
}

.bots-empty h3[b-3uljuwisar] {
    margin-bottom: 10px;
    font-size: 24px;
    color: var(--text-primary);
}

.bots-empty p[b-3uljuwisar] {
    color: var(--text-muted);
    margin-bottom: 24px;
}

.btn-create-large[b-3uljuwisar] {
    background: linear-gradient(135deg,#008080,#14b8a6);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px 28px;
    font-weight: 600;
    cursor: pointer;
}

.pagination[b-3uljuwisar] {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.pagination-btn[b-3uljuwisar] {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    border-radius: 10px;
    cursor: pointer;
}

.pagination-btn:hover:not(:disabled)[b-3uljuwisar] {
    background: var(--color-surface-alt);
}

.pagination-text[b-3uljuwisar] {
    font-weight: 600;
    color: var(--text-secondary);
}

.templates-banner[b-3uljuwisar] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px 18px;
    background: var(--card-bg);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
}

.templates-banner i[b-3uljuwisar] {
    color: var(--color-primary);
    font-size: 16px;
    flex-shrink: 0;
}

.templates-banner p[b-3uljuwisar] {
    margin: 0;
}

.templates-toolbar[b-3uljuwisar] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.templates-filter-label[b-3uljuwisar] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.templates-filter-select[b-3uljuwisar] {
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 14px;
    min-width: 200px;
    cursor: pointer;
}

.templates-filter-select:focus[b-3uljuwisar] {
    outline: none;
    border-color: #008080;
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.15);
}

.templates-grid[b-3uljuwisar] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding-bottom: 20px;
}

@media (min-width: 1600px) {
    .templates-grid[b-3uljuwisar] {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    }
}

@media (max-width: 780px) {
    .templates-grid[b-3uljuwisar] {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media (max-width: 560px) {
    .templates-grid[b-3uljuwisar] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.template-card[b-3uljuwisar] {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.25s ease;
}

.template-card:hover[b-3uljuwisar] {
    border-color: #008080;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.template-card-header[b-3uljuwisar] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 0;
}

.template-tag[b-3uljuwisar] {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.template-percentage[b-3uljuwisar] {
    font-size: 18px;
    font-weight: 700;
    color: #16a34a;
}

.template-card-body[b-3uljuwisar] {
    flex: 1;
    padding: 14px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.template-title[b-3uljuwisar] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.template-description[b-3uljuwisar] {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

.template-features[b-3uljuwisar] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.template-features li[b-3uljuwisar] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-secondary);
}

.template-feature-icon[b-3uljuwisar] {
    font-size: 15px;
    line-height: 1;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.template-categories[b-3uljuwisar] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.template-category-chip[b-3uljuwisar] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(0, 128, 128, 0.12);
    color: #0d7a7a;
    border: 1px solid rgba(0, 128, 128, 0.2);
}

.template-card-actions[b-3uljuwisar] {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--border-color);
}

.template-btn[b-3uljuwisar] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.template-btn-preview[b-3uljuwisar] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.template-btn-preview:hover[b-3uljuwisar] {
    border-color: #008080;
    color: #0d7a7a;
}

.template-btn-use[b-3uljuwisar] {
    border: none;
    background: linear-gradient(135deg,#008080,#0ea5a4);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 128, 128, 0.2);
}

.template-btn-use:hover[b-3uljuwisar] {
    background: linear-gradient(135deg,#0d7a7a,#0f766e);
    box-shadow: 0 6px 16px rgba(0, 128, 128, 0.3);
    transform: translateY(-1px);
}

@media (max-width:768px) {

    .bots-page[b-3uljuwisar] {
        padding: 16px;
    }

    .bots-header[b-3uljuwisar] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .bots-grid[b-3uljuwisar] {
        grid-template-columns: 1fr;
    }

    .card-footer[b-3uljuwisar] {
        flex-wrap: wrap;
    }

    .card-action-btn[b-3uljuwisar] {
        min-width: 100px;
    }

    .btn-create[b-3uljuwisar] {
        width: 100%;
        justify-content: center;
    }

    .template-card-actions[b-3uljuwisar] {
        grid-template-columns: 1fr;
    }
}

/* WhatsApp bot starter library */
.templates-banner[b-3uljuwisar] {
    align-items: flex-start;
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--border-color));
    background: linear-gradient(120deg, color-mix(in srgb, var(--color-primary) 8%, var(--card-bg)), var(--card-bg) 64%);
}

.templates-banner-icon[b-3uljuwisar] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
}

.templates-banner > div[b-3uljuwisar] { color: var(--text-primary); }
.templates-banner strong[b-3uljuwisar] { font-weight: 700; }
.templates-banner p[b-3uljuwisar] { margin: 3px 0 0; color: var(--text-muted); }

.template-tag[b-3uljuwisar] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--border-color));
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 9%, var(--card-bg));
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 700;
}

.template-step-count[b-3uljuwisar] { color: var(--text-muted); font-size: 12px; font-weight: 600; }
.template-feature-icon[b-3uljuwisar] { color: var(--color-primary); }
.template-category-chip[b-3uljuwisar] {
    background: color-mix(in srgb, var(--color-primary) 9%, var(--card-bg));
    color: var(--text-secondary);
    border-color: color-mix(in srgb, var(--color-primary) 18%, var(--border-color));
}
.template-card[b-3uljuwisar] { border-color: var(--border-color); box-shadow: 0 8px 24px rgba(15, 23, 42, .04); }
.template-card:hover[b-3uljuwisar] { border-color: var(--color-primary-light); box-shadow: 0 14px 32px rgba(15, 23, 42, .10); }
.template-btn-preview[b-3uljuwisar] { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.template-btn-preview:hover[b-3uljuwisar] { color: var(--color-primary); }
.template-btn-use[b-3uljuwisar] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.bots-library-pagination[b-3uljuwisar] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 24px;
    min-height: 64px;
    padding: 10px 15px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 38%, var(--border-color));
    border-radius: 13px;
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: 13px;
}
.bots-library-pagination > span strong[b-3uljuwisar] { color: var(--text-primary); font-weight: 600; }
.library-pagination-controls[b-3uljuwisar] { display: flex; align-items: center; gap: 10px; }
.library-pagination-page[b-3uljuwisar] { color: var(--text-secondary); white-space: nowrap; }
.library-pagination-page strong[b-3uljuwisar] { color: var(--text-primary); }
.library-pagination-button[b-3uljuwisar] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
}
.library-pagination-next[b-3uljuwisar] { color: var(--text-primary); }
.library-pagination-button:hover:not(:disabled)[b-3uljuwisar] { border-color: var(--color-primary-light); color: var(--color-primary); }
.library-pagination-button:disabled[b-3uljuwisar] { opacity: .48; cursor: not-allowed; }

.bot-template-overlay[b-3uljuwisar] {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow-y: auto;
    background: rgba(15, 23, 42, .62);
    backdrop-filter: blur(7px);
}
.bot-template-preview[b-3uljuwisar] {
    display: flex;
    flex-direction: column;
    width: min(100%, 620px);
    max-height: min(88vh, 780px);
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--card-bg);
    box-shadow: 0 24px 70px rgba(2, 6, 23, .28);
}
.bot-template-preview-header[b-3uljuwisar],
.bot-template-preview-footer[b-3uljuwisar] { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; }
.bot-template-preview-header[b-3uljuwisar] { border-bottom: 1px solid var(--border-color); }
.bot-template-preview-header > div[b-3uljuwisar] { display: grid; gap: 10px; }
.bot-template-preview-header h2[b-3uljuwisar] { margin: 0; color: var(--text-primary); font-size: 21px; }
.bot-template-preview-close[b-3uljuwisar] { width: 36px; height: 36px; border: 1px solid var(--border-color); border-radius: 10px; background: transparent; color: var(--text-muted); cursor: pointer; }
.bot-template-preview-body[b-3uljuwisar] { display: grid; gap: 16px; padding: 22px; overflow-y: auto; }
.bot-template-preview-body > p[b-3uljuwisar] { margin: 0; color: var(--text-secondary); line-height: 1.6; }
.bot-template-preview-steps[b-3uljuwisar] { display: grid; gap: 9px; }
.bot-template-preview-step[b-3uljuwisar] { display: grid; grid-template-columns: 28px 32px minmax(0, 1fr); align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--border-color); border-radius: 13px; background: color-mix(in srgb, var(--color-primary) 3%, var(--card-bg)); }
.preview-step-number[b-3uljuwisar] { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); font-size: 12px; font-weight: 700; }
.preview-step-icon[b-3uljuwisar] { color: var(--color-primary); font-size: 17px; text-align: center; }
.bot-template-preview-step strong[b-3uljuwisar], .bot-template-preview-step small[b-3uljuwisar] { display: block; }
.bot-template-preview-step strong[b-3uljuwisar] { color: var(--text-primary); font-size: 13px; }
.bot-template-preview-step small[b-3uljuwisar] { margin-top: 3px; color: var(--text-muted); font-size: 12px; }
.bot-template-preview-note[b-3uljuwisar] { display: flex; gap: 8px; align-items: flex-start; color: var(--text-muted) !important; font-size: 12px; }
.bot-template-preview-note i[b-3uljuwisar] { color: var(--color-primary); }
.bot-template-preview-footer[b-3uljuwisar] { border-top: 1px solid var(--border-color); }

@media (max-width: 640px) {
    .templates-toolbar[b-3uljuwisar] { align-items: stretch; flex-direction: column; gap: 8px; }
    .templates-filter-select[b-3uljuwisar] { width: 100%; min-width: 0; }
    .bots-library-pagination[b-3uljuwisar] { align-items: flex-start; flex-direction: column; }
    .library-pagination-controls[b-3uljuwisar] { width: 100%; justify-content: space-between; }
    .bot-template-preview-header[b-3uljuwisar], .bot-template-preview-footer[b-3uljuwisar] { padding: 16px; }
    .bot-template-preview-body[b-3uljuwisar] { padding: 16px; }
    .bot-template-preview-footer .template-btn[b-3uljuwisar] { flex: 1; }
}

/* Bot activation control alongside each card's creation date */
.meta-date-row[b-3uljuwisar] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bot-active-switch[b-3uljuwisar] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 4px 0 4px 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.bot-active-switch:focus-visible[b-3uljuwisar] {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 3px;
}

.bot-switch-track[b-3uljuwisar] {
    position: relative;
    width: 36px;
    height: 21px;
    flex: 0 0 36px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--color-surface-alt);
    transition: background .18s ease, border-color .18s ease;
}

.bot-switch-thumb[b-3uljuwisar] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .18s ease;
}

.bot-active-switch.is-on[b-3uljuwisar] { color: var(--color-primary-light, #14b8a6); }
.bot-active-switch.is-on .bot-switch-track[b-3uljuwisar] { border-color: var(--color-primary, #0d9488); background: var(--color-primary, #0d9488); }
.bot-active-switch.is-on .bot-switch-thumb[b-3uljuwisar] { transform: translateX(15px); }
.bot-active-switch:hover .bot-switch-track[b-3uljuwisar] { border-color: var(--color-primary-light, #14b8a6); }

@media (max-width: 380px) {
    .meta-date-row[b-3uljuwisar] { align-items: flex-start; flex-direction: column; gap: 8px; }
    .bot-active-switch[b-3uljuwisar] { padding-left: 0; }
}
/* /Pages/Authorized/WhatsApp/Bots/BotViewer.razor.rz.scp.css */
/* ===== WHATSAPP BOT VIEWER PAGE - THEME-AWARE ===== */
/* Full dark/light theme support with CSS variables */

/* ===== CSS VARIABLES ===== */
:root[b-rnszqiess8] {
    --page-bg: #f4f6f8;
    --card-bg: #ffffff;
    --text-primary: #1d1d1f;
    --text-secondary: #666666;
    --text-muted: #999999;
    --border-color: #e5e5e7;
    --color-primary: #14b8a6;
    --color-primary-light: #14b8a6;
    --color-surface-alt: #f9fafb;
    --hover-overlay: rgba(20, 184, 166, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #3b82f6;
}

[data-app-theme="dark"][b-rnszqiess8] {
    --page-bg: #0f172a;
    --card-bg: rgba(20, 25, 40, 0.9);
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #a0a0a0;
    --border-color: rgba(20, 184, 166, 0.2);
    --color-primary: #14b8a6;
    --color-primary-light: #14b8a6;
    --color-surface-alt: rgba(255, 255, 255, 0.03);
    --hover-overlay: rgba(20, 184, 166, 0.1);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(20, 184, 166, 0.15);
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #60a5fa;
}

/* ===== PAGE CONTAINER ===== */
.viewer-page[b-rnszqiess8] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 34px);
    background: var(--page-bg);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== TOOLBAR ===== */
.viewer-toolbar[b-rnszqiess8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    gap: 16px;
    flex-wrap: wrap;
    min-height: 56px;
}

.toolbar-left[b-rnszqiess8] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.toolbar-right[b-rnszqiess8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Back Button */
.toolbar-btn-back[b-rnszqiess8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px;
    font-size: 1.25rem;
    transition: all 0.2s ease;
    padding: 0;
}

.toolbar-btn-back:hover[b-rnszqiess8] {
    background: var(--hover-overlay);
    color: var(--color-primary);
}

/* Title Group */
.toolbar-title-group[b-rnszqiess8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.toolbar-title[b-rnszqiess8] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badges */
.toolbar-badges[b-rnszqiess8] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.toolbar-badge[b-rnszqiess8] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border: 1px solid;
}

.toolbar-badge-active[b-rnszqiess8] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
    border-color: var(--success-color);
}

.toolbar-badge-inactive[b-rnszqiess8] {
    background: rgba(160, 160, 160, 0.1);
    color: var(--text-muted);
    border-color: var(--text-muted);
}

.toolbar-badge-published[b-rnszqiess8] {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info-color);
    border-color: var(--info-color);
}

.toolbar-badge-stopped[b-rnszqiess8] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.toolbar-badge-draft[b-rnszqiess8] {
    background: rgba(168, 85, 247, 0.1);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Toolbar Buttons */
.toolbar-btn[b-rnszqiess8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px;
    font-size: 1.1rem;
    transition: all 0.2s ease;
}

.toolbar-btn:hover[b-rnszqiess8] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--hover-overlay);
}

/* ===== VIEWER CONTAINER ===== */
.viewer-container[b-rnszqiess8] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px;
    gap: 24px;
}

/* Scrollbar */
.viewer-container[b-rnszqiess8]::-webkit-scrollbar {
    width: 8px;
}

.viewer-container[b-rnszqiess8]::-webkit-scrollbar-track {
    background: transparent;
}

.viewer-container[b-rnszqiess8]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.viewer-container[b-rnszqiess8]::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* Loading State */
.viewer-loading[b-rnszqiess8] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* Empty State */
.viewer-empty[b-rnszqiess8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
    color: var(--text-muted);
    text-align: center;
}

.viewer-empty i[b-rnszqiess8] {
    font-size: 3rem;
    opacity: 0.5;
}

.viewer-empty p[b-rnszqiess8] {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}

/* ===== BOT INFO SECTION ===== */
.bot-info-section[b-rnszqiess8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
    background: var(--color-surface-alt);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.info-item[b-rnszqiess8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-label[b-rnszqiess8] {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value[b-rnszqiess8] {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.5;
    word-break: break-word;
}

/* ===== CANVAS WRAPPER ===== */
.canvas-wrapper[b-rnszqiess8] {
    flex: 1;
    display: flex;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    min-height: 500px;
    box-shadow: var(--shadow-sm);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
    .viewer-container[b-rnszqiess8] {
        padding: 16px;
        gap: 16px;
    }

    .bot-info-section[b-rnszqiess8] {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .toolbar-title[b-rnszqiess8] {
        font-size: 1rem;
    }

    .toolbar-badges[b-rnszqiess8] {
        gap: 6px;
    }
}

@media (max-width: 768px) {
    .viewer-page[b-rnszqiess8] {
        height: calc(100dvh - 34px);
        min-height: 0;
    }

    .viewer-toolbar[b-rnszqiess8] {
        padding: 12px;
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
    }

    .toolbar-left[b-rnszqiess8] {
        width: 100%;
    }

    .toolbar-right[b-rnszqiess8] {
        width: 100%;
        justify-content: flex-start;
    }

    .toolbar-title[b-rnszqiess8] {
        font-size: 1rem;
    }

    .toolbar-badges[b-rnszqiess8] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .toolbar-badge[b-rnszqiess8] {
        font-size: 0.65rem;
        padding: 3px 8px;
    }

    .viewer-container[b-rnszqiess8] {
        padding: 12px;
        gap: 12px;
        min-height: 0;
    }

    .bot-info-section[b-rnszqiess8] {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 12px;
    }

    .info-label[b-rnszqiess8] {
        font-size: 0.75rem;
    }

    .info-value[b-rnszqiess8] {
        font-size: 0.9rem;
    }

    .canvas-wrapper[b-rnszqiess8] {
        min-height: 400px;
    }
}

@media (max-width: 640px) {
    .viewer-toolbar[b-rnszqiess8] {
        padding: 10px;
        gap: 8px;
    }

    .toolbar-btn-back[b-rnszqiess8] {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }

    .toolbar-title-group[b-rnszqiess8] {
        gap: 4px;
    }

    .toolbar-title[b-rnszqiess8] {
        font-size: 0.95rem;
    }

    .toolbar-badge[b-rnszqiess8] {
        font-size: 0.6rem;
        padding: 2px 6px;
    }

    .viewer-container[b-rnszqiess8] {
        padding: 8px;
        gap: 8px;
    }

    .bot-info-section[b-rnszqiess8] {
        padding: 10px;
        gap: 10px;
        border-radius: 8px;
    }

    .info-item[b-rnszqiess8] {
        gap: 4px;
    }

    .info-label[b-rnszqiess8] {
        font-size: 0.7rem;
    }

    .info-value[b-rnszqiess8] {
        font-size: 0.85rem;
    }

    .canvas-wrapper[b-rnszqiess8] {
        min-height: 300px;
        border-radius: 8px;
    }

    .viewer-loading[b-rnszqiess8] {
        min-height: 300px;
    }

    .viewer-empty[b-rnszqiess8] {
        min-height: 250px;
    }

    .viewer-empty i[b-rnszqiess8] {
        font-size: 2rem;
    }
}

/* ===== ACCESSIBILITY ===== */
.toolbar-btn-back:focus-visible[b-rnszqiess8],
.toolbar-btn:focus-visible[b-rnszqiess8] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ===== UTILITIES ===== */
.hidden[b-rnszqiess8] {
    display: none !important;
}

.visible[b-rnszqiess8] {
    display: block !important;
}

/* ===== PRINT STYLES ===== */
@media print {
    .viewer-toolbar[b-rnszqiess8] {
        break-inside: avoid;
    }

    .bot-info-section[b-rnszqiess8] {
        break-inside: avoid;
    }

    .canvas-wrapper[b-rnszqiess8] {
        break-inside: avoid;
    }

    .viewer-container[b-rnszqiess8] {
        padding: 0;
    }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .toolbar-btn-back[b-rnszqiess8],
    .toolbar-btn[b-rnszqiess8],
    .viewer-toolbar[b-rnszqiess8],
    .bot-info-section[b-rnszqiess8] {
        transition: none;
    }
}
/* /Pages/Authorized/WhatsApp/Campaigns/Campaigns.razor.rz.scp.css */
.campaigns-page[b-1e2lwzn58y] {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 24px 24px;
    font-family: 'Quicksand', sans-serif;
    min-height: 100vh;
    box-sizing: border-box;
}

.page-header[b-1e2lwzn58y] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin: 24px 0 20px;
}

.page-header h1[b-1e2lwzn58y] {
    margin: 0 0 8px 0;
    font-size: 32px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.5px;
}

.page-subtitle[b-1e2lwzn58y] {
    margin: 0;
    font-size: 16px;
    color: #86868b;
}

.page-actions[b-1e2lwzn58y] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.info-banner[b-1e2lwzn58y] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: 20px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #eff6ff;
    color: #1e3a8a;
}

.info-banner-icon[b-1e2lwzn58y] {
    flex-shrink: 0;
    font-size: 18px;
}

.info-banner-body[b-1e2lwzn58y] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.filters-card[b-1e2lwzn58y] {
    background: #fff;
    border: 1px solid #e5e5e7;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.filters-header h2[b-1e2lwzn58y] {
    margin: 0 0 6px 0;
    font-size: 18px;
    color: #1d1d1f;
}

.filters-header p[b-1e2lwzn58y] {
    margin: 0 0 16px 0;
    color: #86868b;
    font-size: 14px;
}

.filters-grid[b-1e2lwzn58y] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.filters-actions[b-1e2lwzn58y] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.form-group[b-1e2lwzn58y] {
    margin: 0;
}

.form-label[b-1e2lwzn58y] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.required-mark[b-1e2lwzn58y] {
    color: #d92d20;
}

.form-input[b-1e2lwzn58y],
.form-textarea[b-1e2lwzn58y] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e5e5e7;
    border-radius: 10px;
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    color: #1d1d1f;
    background: #fff;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.form-textarea[b-1e2lwzn58y] {
    resize: vertical;
    min-height: 88px;
}

.form-input:focus[b-1e2lwzn58y],
.form-textarea:focus[b-1e2lwzn58y] {
    outline: none;
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}

.btn-primary[b-1e2lwzn58y],
.btn-secondary[b-1e2lwzn58y],
.btn-danger[b-1e2lwzn58y],
.btn-link[b-1e2lwzn58y] {
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-primary[b-1e2lwzn58y] {
    background: linear-gradient(135deg, #34C759 0%, #00D084 100%);
    color: #fff;
}

.btn-primary:hover:not(:disabled)[b-1e2lwzn58y] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.24);
}

.btn-secondary[b-1e2lwzn58y] {
    background: #f5f5f7;
    color: #1d1d1f;
    border: 1px solid #e5e5e7;
}

.btn-secondary:hover:not(:disabled)[b-1e2lwzn58y] {
    background: #efefef;
}

.btn-danger[b-1e2lwzn58y] {
    background: #d92d20;
    color: #fff;
}

.btn-link[b-1e2lwzn58y] {
    background: transparent;
    color: #0071e3;
    padding: 0;
}

.btn-link.danger[b-1e2lwzn58y] {
    color: #d92d20;
}

.btn-primary:disabled[b-1e2lwzn58y],
.btn-secondary:disabled[b-1e2lwzn58y],
.btn-danger:disabled[b-1e2lwzn58y],
.btn-link:disabled[b-1e2lwzn58y] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.campaigns-grid[b-1e2lwzn58y] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.campaign-card[b-1e2lwzn58y] {
    background: #fff;
    border: 1px solid #e5e5e7;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.campaign-card-header[b-1e2lwzn58y] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.campaign-card-header h3[b-1e2lwzn58y] {
    margin: 0 0 6px 0;
    font-size: 18px;
    color: #1d1d1f;
}

.campaign-card-header p[b-1e2lwzn58y],
.campaign-event-description p[b-1e2lwzn58y] {
    margin: 0;
    font-size: 14px;
    color: #636366;
    line-height: 1.5;
}

.platform-badge[b-1e2lwzn58y] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f5f5f7;
    color: #1d1d1f;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.campaign-meta[b-1e2lwzn58y] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.meta-item[b-1e2lwzn58y] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meta-label[b-1e2lwzn58y] {
    font-size: 12px;
    color: #86868b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.meta-value[b-1e2lwzn58y] {
    font-size: 13px;
    color: #1d1d1f;
    word-break: break-word;
}

.campaign-event-description[b-1e2lwzn58y] {
    border-top: 1px solid #f0f0f2;
    padding-top: 12px;
}

.campaign-card-actions[b-1e2lwzn58y] {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

.empty-state[b-1e2lwzn58y] {
    background: #fff;
    border: 1px solid #e5e5e7;
    border-radius: 16px;
    padding: 48px 24px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.empty-icon[b-1e2lwzn58y] {
    font-size: 56px;
    margin-bottom: 16px;
}

.empty-state h2[b-1e2lwzn58y] {
    margin: 0 0 8px 0;
    font-size: 24px;
    color: #1d1d1f;
}

.empty-state p[b-1e2lwzn58y] {
    margin: 0;
    color: #86868b;
    font-size: 15px;
}

.empty-actions[b-1e2lwzn58y] {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.campaign-modal[b-1e2lwzn58y],
.delete-modal[b-1e2lwzn58y] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.modal-form-grid[b-1e2lwzn58y] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.full-width[b-1e2lwzn58y] {
    grid-column: 1 / -1;
}

.modal-footer[b-1e2lwzn58y] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.delete-note[b-1e2lwzn58y] {
    color: #86868b;
    margin: 0;
}

.spinner-center[b-1e2lwzn58y] {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}

.btn-spinner[b-1e2lwzn58y] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: spin-b-1e2lwzn58y 0.8s linear infinite;
    vertical-align: middle;
}

@keyframes spin-b-1e2lwzn58y {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1200px) {
    .filters-grid[b-1e2lwzn58y] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .page-header[b-1e2lwzn58y] {
        flex-direction: column;
    }

    .campaign-meta[b-1e2lwzn58y],
    .modal-form-grid[b-1e2lwzn58y] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .campaigns-page[b-1e2lwzn58y] {
        padding: 0 16px 16px;
    }

    .filters-grid[b-1e2lwzn58y] {
        grid-template-columns: 1fr;
    }

    .page-actions[b-1e2lwzn58y],
    .filters-actions[b-1e2lwzn58y],
    .modal-footer[b-1e2lwzn58y],
    .campaign-card-actions[b-1e2lwzn58y],
    .empty-actions[b-1e2lwzn58y] {
        width: 100%;
        justify-content: stretch;
    }

    .page-actions > *[b-1e2lwzn58y],
    .filters-actions > *[b-1e2lwzn58y],
    .modal-footer > *[b-1e2lwzn58y],
    .empty-actions > *[b-1e2lwzn58y] {
        flex: 1;
    }
}
/* /Pages/Authorized/WhatsApp/Chat/ChatWindow.razor.rz.scp.css */

.chat-window-shell[b-7uz2xeui59] {
    display: flex;
    height: calc(100vh - 34px);
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-surface-alt) 0%, var(--page-bg) 100%);
    border: 1px solid var(--border-color);
    box-shadow: var(--modal-shadow);
    margin: 0 auto;
    width: 100%;
}

.chat-inbox-panel[b-7uz2xeui59] {
    width: 320px;
    min-width: 260px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-right: 1px solid var(--border-color);
    flex-shrink: 0;
    backdrop-filter: blur(6px);
}

.inbox-header[b-7uz2xeui59] {
    padding: 1.1rem 1rem 0.8rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--glass-bg);
}

.inbox-title[b-7uz2xeui59] {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.15rem;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.inbox-search[b-7uz2xeui59] {
    position: relative;
    padding: 0.75rem 0.8rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--glass-bg);
}

.inbox-search .search-icon[b-7uz2xeui59] {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.inbox-search .search-input[b-7uz2xeui59] {
    padding-left: 2rem;
    font-size: 0.85rem;
    background: var(--input-background);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    width: 100%;
    border-radius: 12px;
    padding: 0.6rem 0.75rem 0.6rem 2rem;
    transition: 0.2s ease;
}

.inbox-search .search-input:focus[b-7uz2xeui59] {
    outline: none;
    border-color: var(--input-border-light);
    box-shadow: var(--input-shadow-light);
}

.inbox-list[b-7uz2xeui59] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.inbox-list[b-7uz2xeui59] {
    scrollbar-color: var(--wa-scrollbar-thumb) var(--wa-scrollbar-track);
}

.inbox-list[b-7uz2xeui59]::-webkit-scrollbar {
    width: 6px;
}

.inbox-list[b-7uz2xeui59]::-webkit-scrollbar-track {
    background: var(--wa-scrollbar-track);
}

.inbox-list[b-7uz2xeui59]::-webkit-scrollbar-thumb {
    background: var(--wa-scrollbar-thumb);
    border-radius: 10px;
}

.inbox-item[b-7uz2xeui59] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.9rem;
    margin: 0.15rem 0.45rem;
    cursor: pointer;
    border-radius: 16px;
    border: 1px solid transparent;
    transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.inbox-item:hover[b-7uz2xeui59] {
    background: var(--wa-list-hover-bg);
    border-color: rgba(20, 184, 166, 0.25);
}

.inbox-item.active[b-7uz2xeui59] {
    background: var(--wa-list-active-bg);
    border-color: rgba(20, 184, 166, 0.45);
    box-shadow: 0 8px 18px rgba(20, 184, 166, 0.08);
}

.inbox-avatar[b-7uz2xeui59] {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00a884 0%, #128c7e 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 6px 16px rgba(18, 140, 126, 0.2);
}

.window-dot[b-7uz2xeui59] {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid var(--color-surface);
}

.inbox-item-body[b-7uz2xeui59] {
    flex: 1;
    min-width: 0;
}

.inbox-item-top[b-7uz2xeui59] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem;
}

.inbox-name[b-7uz2xeui59] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-time[b-7uz2xeui59] {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.inbox-item-bottom[b-7uz2xeui59] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.2rem;
}

.inbox-preview[b-7uz2xeui59] {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.inbox-preview.unread-preview[b-7uz2xeui59] {
    color: var(--text-primary);
    font-weight: 600;
}

.inbox-unread-dot[b-7uz2xeui59] {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--color-primary);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18);
}

.inbox-unread-count[b-7uz2xeui59] {
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.unread-badge[b-7uz2xeui59] {
    background: var(--color-primary);
    color: #fff;
    border-radius: 10px;
    padding: 0.1rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.inbox-empty[b-7uz2xeui59] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    gap: 0.5rem;
    font-size: 0.9rem;
}

.inbox-empty i[b-7uz2xeui59] {
    font-size: 2.5rem;
}

.inbox-load-more[b-7uz2xeui59] {
    display: flex;
    justify-content: center;
    padding: 0.75rem;
}

/* ── Right main panel ─────────────────────────────────────── */
.chat-main-panel[b-7uz2xeui59] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--wa-bg);
    background-image: url('/images/whatsapp_light_background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

[data-app-theme="dark"] .chat-main-panel[b-7uz2xeui59] {
    background-image: url('/images/whatsapp_dark_background.webp');
}

.chat-empty-state[b-7uz2xeui59] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    gap: 0.75rem;
}

.chat-empty-state i[b-7uz2xeui59] {
    font-size: 4rem;
    color: var(--border-color);
}

.chat-empty-state h3[b-7uz2xeui59] {
    color: var(--text-primary);
    margin: 0;
}

/* ── Chat header ──────────────────────────────────────────── */
.chat-header[b-7uz2xeui59] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--color-surface);
    backdrop-filter: blur(8px);
    flex-shrink: 0;
}

.chat-header-avatar[b-7uz2xeui59] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00a884 0%, #128c7e 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(18, 140, 126, 0.18);
}

.chat-header-info[b-7uz2xeui59] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-header-name[b-7uz2xeui59] {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.chat-header-phone[b-7uz2xeui59] {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.chat-header-badges[b-7uz2xeui59] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.window-badge[b-7uz2xeui59] {
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    padding: 0.15rem 0.6rem;
}

.window-badge.open[b-7uz2xeui59] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.window-badge.closed[b-7uz2xeui59] {
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-muted);
}

/* ── Feed (messages) ──────────────────────────────────────── */
.chat-feed[b-7uz2xeui59] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    scroll-behavior: smooth;
    background: transparent;
}

.chat-feed[b-7uz2xeui59] {
    scrollbar-color: var(--wa-scrollbar-thumb) var(--wa-scrollbar-track);
}

.chat-feed[b-7uz2xeui59]::-webkit-scrollbar {
    width: 8px;
}

.chat-feed[b-7uz2xeui59]::-webkit-scrollbar-track {
    background: var(--wa-scrollbar-track);
}

.chat-feed[b-7uz2xeui59]::-webkit-scrollbar-thumb {
    background: var(--wa-scrollbar-thumb);
    border-radius: 4px;
}

.older-loading[b-7uz2xeui59] {
    display: flex;
    justify-content: center;
    padding: 0.5rem;
}

/* ── Compose bar ──────────────────────────────────────────── */
.chat-compose[b-7uz2xeui59] {
    border-top: 1px solid var(--wa-composer-glass-border);
    background: linear-gradient(180deg, var(--wa-composer-glass-bg), var(--wa-composer-glass-bg));
    backdrop-filter: blur(10px);
    padding: 0.75rem 1rem;
    flex-shrink: 0;
}

.compose-row[b-7uz2xeui59] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding-bottom: 18px;
}

.compose-input[b-7uz2xeui59] {
    flex: 1;
    resize: none;
    min-height: 46px;
    max-height: 120px;
    overflow-y: auto;
    background: var(--input-background);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0.7rem 0.85rem;
    border-radius: 18px;
    font-family: 'Quicksand', sans-serif;
    font-size: 0.9rem;
    box-shadow: inset 0 1px 2px rgba(17, 27, 33, 0.03);
}

.compose-input[b-7uz2xeui59]::placeholder {
    color: var(--text-muted);
}

.compose-input:focus[b-7uz2xeui59],
.compose-input:focus-visible[b-7uz2xeui59] {
    outline: none;
    border-color: var(--input-border-light);
    box-shadow: var(--input-shadow-light);
}

.send-btn[b-7uz2xeui59] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    padding: 0;
    flex-shrink: 0;
    background: linear-gradient(135deg, #00a884 0%, #128c7e 100%);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 8px 18px rgba(18, 140, 126, 0.18);
}

.send-btn:hover:not(:disabled)[b-7uz2xeui59] {
    box-shadow: 0 10px 20px rgba(18, 140, 126, 0.24);
    transform: translateY(-1px);
}

.send-btn:focus-visible[b-7uz2xeui59],
.media-toggle-btn:focus-visible[b-7uz2xeui59],
.media-option-btn:focus-visible[b-7uz2xeui59],
.icon-btn:focus-visible[b-7uz2xeui59],
.inbox-search .search-input:focus-visible[b-7uz2xeui59] {
    outline: 2px solid rgba(20, 184, 166, 0.75);
    outline-offset: 2px;
}

.send-btn:disabled[b-7uz2xeui59] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.media-toggle-btn[b-7uz2xeui59] {
    font-size: 1.6rem;
    color: var(--color-primary);
    transition: transform 0.2s ease, color 0.2s ease;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.media-toggle-btn:hover[b-7uz2xeui59] {
    transform: scale(1.08);
    color: var(--color-primary-dark);
}

.compose-disabled .compose-row[b-7uz2xeui59] {
    opacity: 0.5;
}

.window-closed-notice[b-7uz2xeui59] {
    font-size: 0.8rem;
    color: var(--text-primary);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.5rem;
}

/* ── Media options bar ────────────────────────────────────── */
.media-options-bar[b-7uz2xeui59] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    background: rgba(20, 184, 166, 0.05);
}

.media-option-btn[b-7uz2xeui59] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.75rem;
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
}

.media-option-btn:hover[b-7uz2xeui59] {
    background: var(--color-primary-light);
    color: #fff;
    border-color: var(--color-primary-light);
}

.media-option-btn i[b-7uz2xeui59] {
    font-size: 1.25rem;
}

/* ===== MEDIA COMPOSER PANEL ===== */

.media-composer-panel[b-7uz2xeui59] {
    background: var(--color-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    max-height: 65vh;
    min-height: 250px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.media-composer-header[b-7uz2xeui59] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    background: rgba(20, 184, 166, 0.08);
    border-bottom: 1px solid var(--border-color);
}

.media-composer-header h4[b-7uz2xeui59] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.media-composer-body[b-7uz2xeui59] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.media-composer-body[b-7uz2xeui59]::-webkit-scrollbar {
    width: 6px;
}

.media-composer-body[b-7uz2xeui59]::-webkit-scrollbar-thumb {
    background: rgba(20, 184, 166, 0.35);
    border-radius: 999px;
}

/* ===== LIST ROW EDITOR ===== */

.list-row-editor[b-7uz2xeui59] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.list-row-editor .form-control[b-7uz2xeui59] {
    flex: 1;
}

/* ===== FILE LIMIT INFO ===== */

.file-limit-info[b-7uz2xeui59] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.file-limit-info i[b-7uz2xeui59] {
    color: #3b82f6;
    font-size: 1rem;
    flex-shrink: 0;
}

.file-limit-info span[b-7uz2xeui59] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ===== PREVIEW CONTAINER ===== */

.file-preview[b-7uz2xeui59] {
    width: 100%;
    max-width: 500px;
    min-height: 180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
}

.file-preview img[b-7uz2xeui59] {
    display: block;
    width: 100%;
    max-height: 350px;
    object-fit: contain;
}

.file-preview video[b-7uz2xeui59] {
    display: block;
    width: 100%;
    max-height: 350px;
    object-fit: contain;
}

.file-preview.sticker-preview[b-7uz2xeui59] {
    min-height: 220px;
    background: transparent;
}

.file-preview.sticker-preview img[b-7uz2xeui59] {
    width: 180px;
    height: 180px;
    object-fit: contain;
}

/* ===== DOCUMENT / AUDIO CARD ===== */

.file-info[b-7uz2xeui59] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    background: rgba(20, 184, 166, 0.08);
    border: 1px solid var(--border-color);
}

.file-info i[b-7uz2xeui59] {
    font-size: 2rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

.file-info > div[b-7uz2xeui59] {
    flex: 1;
    min-width: 0;
}

.file-name[b-7uz2xeui59] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.file-size[b-7uz2xeui59] {
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ===== FORM CONTROLS ===== */

.form-control[b-7uz2xeui59] {
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    transition: 0.2s;
    font-family: 'Quicksand', sans-serif;
    font-size: 0.9rem;
}

.form-control:focus[b-7uz2xeui59] {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1);
}

.form-control[b-7uz2xeui59]::placeholder {
    color: var(--text-muted);
}

/* ===== BUTTONS ===== */

.media-composer-body .btn-primary-mac[b-7uz2xeui59] {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.25rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s ease;
}

.media-composer-body .btn-primary-mac:hover[b-7uz2xeui59] {
    background: var(--color-primary-light);
}

/* ===== CLOSE BUTTON ===== */

.icon-btn[b-7uz2xeui59] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
    transition: 0.2s;
    padding: 0;
}

.icon-btn:hover[b-7uz2xeui59] {
    background: rgba(20, 184, 166, 0.1);
    color: var(--color-primary-light);
}

/* ── New-message anchor ───────────────────────────────────── */
.new-msg-anchor[b-7uz2xeui59] {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0.35rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    z-index: 10;
    transition: transform 0.2s, opacity 0.2s;
}

.new-msg-anchor:hover[b-7uz2xeui59] {
    transform: translateX(-50%) translateY(-2px);
}

/* ── Chat bubble styles ───────────────────────────────────── */
.chat-bubble-row[b-7uz2xeui59] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    animation: fadeIn-b-7uz2xeui59 0.3s ease-in-out;
}

@keyframes fadeIn-b-7uz2xeui59 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-bubble-row.incoming[b-7uz2xeui59] {
    justify-content: flex-start;
}

.chat-bubble-row.outgoing[b-7uz2xeui59] {
    justify-content: flex-end;
}

.chat-bubble[b-7uz2xeui59] {
    max-width: 65%;
    padding: 0.75rem 1rem;
    border-radius: 18px;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.chat-bubble.bubble-in[b-7uz2xeui59] {
    background: var(--glass-bg);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.chat-bubble.bubble-out[b-7uz2xeui59] {
    background: #0084ff;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.bubble-footer[b-7uz2xeui59] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-size: 0.72rem;
}

.bubble-time[b-7uz2xeui59] {
    color: inherit;
    opacity: 0.7;
}

.chat-bubble.bubble-in .bubble-time[b-7uz2xeui59] {
    color: var(--text-muted);
}

.chat-bubble.bubble-out .bubble-time[b-7uz2xeui59] {
    color: rgba(255, 255, 255, 0.8);
}

/* ── Message body ─────────────────────────────────────────── */
.message-text[b-7uz2xeui59] {
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.message-media[b-7uz2xeui59] {
    border-radius: 12px;
    overflow: hidden;
    max-height: 300px;
}

.message-media img[b-7uz2xeui59] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.message-media video[b-7uz2xeui59] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Quoted reply ──────────────────────────────────────────── */
.quoted-reply[b-7uz2xeui59] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.05);
    border-left: 3px solid var(--color-primary);
}

.chat-bubble.bubble-out .quoted-reply[b-7uz2xeui59] {
    background: rgba(255, 255, 255, 0.2);
    border-left-color: rgba(255, 255, 255, 0.6);
}

.quoted-bar[b-7uz2xeui59] {
    width: 3px;
    background: var(--color-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.quoted-content[b-7uz2xeui59] {
    flex: 1;
}

.quoted-author[b-7uz2xeui59] {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    opacity: 0.7;
}

.quoted-text[b-7uz2xeui59] {
    display: block;
    font-size: 0.85rem;
    opacity: 0.85;
    line-height: 1.3;
}

/* ── Interactive buttons ───────────────────────────────────── */
.message-buttons[b-7uz2xeui59] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.interactive-btn[b-7uz2xeui59] {
    background: var(--color-primary-light);
    border: 1px solid var(--color-primary);
    color: #fff;
    padding: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
    text-align: left;
    white-space: normal;
}

.interactive-btn:hover[b-7uz2xeui59] {
    background: var(--color-primary);
    opacity: 0.9;
}

/* ── List message modal ───────────────────────────────────── */
.chat-list-modal-overlay[b-7uz2xeui59] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.chat-list-modal[b-7uz2xeui59] {
    background: var(--color-surface);
    border-radius: 12px;
    max-width: 90%;
    width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.list-modal-header[b-7uz2xeui59] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--color-surface);
}

.list-modal-header h5[b-7uz2xeui59] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
}

.list-modal-body[b-7uz2xeui59] {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    background: var(--page-bg);
}

.list-section-title[b-7uz2xeui59] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 0.75rem 0.75rem 0.35rem;
    margin-top: 0.5rem;
}

.list-row-btn[b-7uz2xeui59] {
    width: 100%;
    text-align: left;
    background: var(--color-surface);
    border: none;
    padding: 0.75rem;
    margin-bottom: 0.35rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-primary);
}

.list-row-btn:hover[b-7uz2xeui59] {
    background: var(--color-primary-light);
    color: #fff;
}

.list-row-main[b-7uz2xeui59] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.list-row-desc[b-7uz2xeui59] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ── Status icons ─────────────────────────────────────────── */
.status-icon[b-7uz2xeui59] {
    width: 16px;
    height: 16px;
    display: inline-block;
}

.status-icon.sent[b-7uz2xeui59] {
    color: rgba(255, 255, 255, 0.8);
}

.status-icon.delivered[b-7uz2xeui59] {
    color: rgba(255, 255, 255, 0.9);
}

.status-icon.read[b-7uz2xeui59] {
    color: rgba(100, 200, 255, 1);
}

/* ── Event banner ──────────────────────────────────────────── */
.chat-event-banner[b-7uz2xeui59] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-surface);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    width: max-content;
    margin: 0 auto;
    text-align: center;
    border: 1px solid var(--border-color);
}

.event-note[b-7uz2xeui59] {
    font-style: italic;
    opacity: 0.8;
}

.event-time[b-7uz2xeui59] {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: 0.5rem;
}

/* ── Media loading spinner ─────────────────────────────── */
.media-loading-spinner[b-7uz2xeui59] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    border-radius: 8px;
    min-height: 200px;
    width: 100%;
}

.spinner-content[b-7uz2xeui59] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
}

.spinner-icon[b-7uz2xeui59] {
    font-size: 2rem;
    animation: spin-b-7uz2xeui59 2s linear infinite;
    color: var(--color-primary);
}

@keyframes spin-b-7uz2xeui59 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.spinner-text[b-7uz2xeui59] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
    .chat-window-shell[b-7uz2xeui59] {
        height: 100vh;
    }

    .media-composer-panel[b-7uz2xeui59] {
        max-height: 70vh;
        min-height: 220px;
    }

    .media-composer-body[b-7uz2xeui59] {
        padding: 0.85rem;
    }

    .file-preview[b-7uz2xeui59] {
        max-width: 100%;
        min-height: 150px;
    }

    .file-preview img[b-7uz2xeui59],
    .file-preview video[b-7uz2xeui59] {
        max-height: 240px;
    }

    .file-preview.sticker-preview img[b-7uz2xeui59] {
        width: 120px;
        height: 120px;
    }

    .file-info[b-7uz2xeui59] {
        padding: 0.85rem;
        gap: 0.75rem;
    }

    .file-info i[b-7uz2xeui59] {
        font-size: 1.6rem;
    }

    .file-name[b-7uz2xeui59] {
        font-size: 0.9rem;
    }

    .chat-bubble[b-7uz2xeui59] {
        max-width: 85%;
    }

    .chat-inbox-panel[b-7uz2xeui59] {
        width: 280px;
        max-width: 300px;
    }
}

@media (max-width: 640px) {
    .chat-window-shell[b-7uz2xeui59] {
        position: relative;
        flex-direction: row;
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .chat-inbox-panel[b-7uz2xeui59] {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: 100%;
        max-height: none;
        border-right: none;
        border-bottom: 0;
    }

    .chat-main-panel[b-7uz2xeui59] {
        width: 100%;
        height: 100%;
        max-height: none;
        min-width: 0;
    }

    .chat-window-shell.inbox-view .chat-main-panel[b-7uz2xeui59],
    .chat-window-shell.conversation-view .chat-inbox-panel[b-7uz2xeui59] {
        display: none;
    }

    .chat-window-shell.conversation-view .chat-main-panel[b-7uz2xeui59] {
        display: flex;
    }

    .inbox-header[b-7uz2xeui59] {
        padding: 1rem 1rem .85rem;
    }

    .inbox-title[b-7uz2xeui59] {
        color: #fff;
        font-size: 1.25rem;
        letter-spacing: 0;
    }

    .inbox-search[b-7uz2xeui59] {
        padding: .7rem .85rem;
        background: var(--color-surface-alt);
        border-bottom: 1px solid var(--glass-border);
    }

    .inbox-search .search-input[b-7uz2xeui59] {
        min-height: 42px;
        border: 1px solid var(--glass-border);
        border-radius: 10px;
        background: var(--input-background);
        color: var(--text-primary);
        box-shadow: none;
    }

    .inbox-search .search-input[b-7uz2xeui59]::placeholder { color: var(--text-muted); }
    .inbox-search .search-input:focus[b-7uz2xeui59] { border-color: var(--input-border-light); }
    .inbox-search .search-icon[b-7uz2xeui59] { left: 1.55rem; color: var(--text-muted); }

    .inbox-list[b-7uz2xeui59] { background: var(--color-surface); }

    .inbox-item[b-7uz2xeui59] {
        gap: .8rem;
        min-height: 72px;
        padding: .7rem .9rem;
        margin: 0;
        border: 0;
        border-radius: 0;
        border-bottom: 1px solid rgba(128, 145, 151, .16);
    }

    .inbox-item:hover[b-7uz2xeui59],
    .inbox-item.active[b-7uz2xeui59] {
        border-color: rgba(128, 145, 151, .16);
        border-radius: 0;
        box-shadow: none;
    }

    .inbox-avatar[b-7uz2xeui59] {
        width: 50px;
        height: 50px;
        box-shadow: none;
    }

    .inbox-name[b-7uz2xeui59] { font-size: .95rem; }
    .inbox-preview[b-7uz2xeui59] { max-width: none; }

    .chat-header[b-7uz2xeui59] {
        min-height: 62px;
        gap: .55rem;
        padding: .55rem .7rem;
        background: #075e54;
        border-bottom: 0;
        color: #fff;
    }

    .chat-window-shell .mobile-inbox-back[b-7uz2xeui59] {
        display: inline-grid;
        width: 34px;
        height: 38px;
        flex: 0 0 auto;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #fff;
        font-size: 1.35rem;
    }

    .mobile-inbox-back:active[b-7uz2xeui59] { background: rgba(255,255,255,.14); }

    .chat-header-avatar[b-7uz2xeui59] {
        width: 40px;
        height: 40px;
        box-shadow: none;
    }

    .chat-header-name[b-7uz2xeui59] { color: #fff; font-size: .92rem; }
    .chat-header-phone[b-7uz2xeui59] { color: rgba(255,255,255,.76); font-size: .72rem; }

    .chat-header-badges[b-7uz2xeui59] { gap: .35rem !important; }

    .window-badge[b-7uz2xeui59] {
        padding: .2rem .4rem;
        background: rgba(255,255,255,.12) !important;
        color: #e8fff7 !important;
        font-size: .62rem;
    }

    .unread-badge[b-7uz2xeui59] { font-size: .62rem; }

    .chat-feed[b-7uz2xeui59] {
        padding: .75rem .7rem;
        overscroll-behavior: contain;
    }

    .chat-compose[b-7uz2xeui59] {
        padding: .55rem .6rem;
        padding-bottom: max(.55rem, env(safe-area-inset-bottom));
    }

    .compose-row[b-7uz2xeui59] { gap: .4rem; padding-bottom: .1rem; }

    .chat-empty-state[b-7uz2xeui59] { display: none; }

    .chat-window-shell .mobile-inbox-back[b-7uz2xeui59] { display: inline-grid; }

    .chat-bubble[b-7uz2xeui59] {
        max-width: 90%;
    }

    .compose-row[b-7uz2xeui59] {
        padding-bottom: .1rem;
    }
}

.mobile-inbox-back[b-7uz2xeui59] { display: none; }
/* /Pages/Authorized/WhatsApp/Contacts/Contacts.razor.rz.scp.css */
.contacts-page[b-chhqd3tn5d] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

/* ── Header ── */
.contacts-header[b-chhqd3tn5d] {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding: 28px;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.page-title[b-chhqd3tn5d] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.page-subtitle[b-chhqd3tn5d] {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}

.header-actions[b-chhqd3tn5d] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.btn-primary-mac[b-chhqd3tn5d] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.55rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.3);
    font-family: 'Quicksand', sans-serif;
}

.btn-primary-mac:hover:not(:disabled)[b-chhqd3tn5d] {
    background: var(--color-primary-dark);
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.4);
    transform: translateY(-1px);
}

.btn-primary-mac:disabled[b-chhqd3tn5d] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-secondary-mac[b-chhqd3tn5d] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--glass-bg);
    color: var(--color-primary-light);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.55rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Quicksand', sans-serif;
    backdrop-filter: blur(4px);
}

.btn-secondary-mac:hover:not(:disabled)[b-chhqd3tn5d] {
    color: var(--color-primary);
    background: rgba(20,184,166,0.12);
    transform: translateY(-1px);
}

.btn-ghost-mac[b-chhqd3tn5d] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: transparent;
    color: var(--color-primary-light);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.55rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Quicksand', sans-serif;
}

.btn-ghost-mac:hover[b-chhqd3tn5d] { color: var(--color-primary);}

.btn-danger-mac[b-chhqd3tn5d] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--red-light);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.55rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    font-family: 'Quicksand', sans-serif;
}


.btn-sm[b-chhqd3tn5d] { padding: 0.4rem 0.75rem; font-size: 0.8rem; }

.btn-link-mac[b-chhqd3tn5d] {
    background: none;
    border: none;
    color: var(--link-color);
    font-size: 0.875rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    font-family: 'Quicksand', sans-serif;
    text-decoration: underline;
}

.btn-link-mac:hover[b-chhqd3tn5d] { color: var(--link-hover); }

/* ── Toolbar ── */
.contacts-toolbar[b-chhqd3tn5d] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 auto 1.5rem;
    max-width: 1400px;
}

.search-box[b-chhqd3tn5d] {
    position: relative;
    max-width: 420px;
}

.search-icon[b-chhqd3tn5d] {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.875rem;
    pointer-events: none;
}

.search-input[b-chhqd3tn5d] {
    padding-left: 2.25rem !important;
    width: 100%;
}

.tag-filter-row[b-chhqd3tn5d] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-label[b-chhqd3tn5d] {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-right: 0.25rem;
}

.btn-tag-manage[b-chhqd3tn5d] {
    background: none;
    border: 1px dashed var(--border-color);
    color: var(--text-muted);
    border-radius: 20px;
    padding: 0.25rem 0.75rem;
    font-size: 0.78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: color 0.2s, border-color 0.2s;
    font-family: 'Quicksand', sans-serif;
}

.btn-tag-manage:hover[b-chhqd3tn5d] { color: var(--color-primary-light); border-color: var(--color-primary-light); }

/* ── Input ── */
.mac-input[b-chhqd3tn5d] {
    background: var(--input-background);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    padding: 0.55rem 0.9rem;
    font-size: 0.875rem;
    font-family: 'Quicksand', sans-serif;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    width: 100%;
}

.mac-input:focus[b-chhqd3tn5d] {
    border-color: var(--color-primary-light);
    box-shadow: var(--input-shadow);
    background: var(--input-background-focus);
}

.mac-input[b-chhqd3tn5d]::placeholder { color: var(--text-muted); }

.mac-textarea[b-chhqd3tn5d] {
    min-height: 80px;
    resize: vertical;
}

.mac-select[b-chhqd3tn5d] {
    background: var(--input-background);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    padding: 0.5rem 0.85rem;
    font-size: 0.875rem;
    font-family: 'Quicksand', sans-serif;
    outline: none;
    cursor: pointer;
    min-width: 160px;
}

.mac-label[b-chhqd3tn5d] {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* ── Contacts Grid ── */
.contacts-grid[b-chhqd3tn5d] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.contact-card[b-chhqd3tn5d] {
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
    backdrop-filter: blur(6px);
}

.contact-card:hover[b-chhqd3tn5d] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.contact-card-header[b-chhqd3tn5d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.contact-avatar[b-chhqd3tn5d] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: 'Quicksand', sans-serif;
}

.contact-info[b-chhqd3tn5d] { flex: 1; min-width: 0; }

.contact-name[b-chhqd3tn5d] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-phone[b-chhqd3tn5d] {
    font-size: 0.78rem;
    color: var(--brand-teal);
    font-family: 'Quicksand', sans-serif;
    margin-top: 0.1rem;
}

.contact-company[b-chhqd3tn5d] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}

.contact-actions[b-chhqd3tn5d] {
    display: flex;
    gap: 0.25rem;
}

.icon-btn[b-chhqd3tn5d] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.3rem 0.4rem;
    border-radius: 8px;
    font-size: 0.85rem;
    transition: color 0.2s, background 0.2s;
    line-height: 1;
}

.icon-btn:hover[b-chhqd3tn5d] { color: var(--brand-teal); background: rgba(20,184,166,0.12); }
.icon-btn.danger:hover[b-chhqd3tn5d] { color: var(--red-light); background: rgba(255,95,86,0.1); }

.contact-tags-row[b-chhqd3tn5d] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.5rem;
}

.btn-add-tag[b-chhqd3tn5d] {
    background: none;
    border: 1px dashed var(--text-muted);
    color: var(--text-muted);
    border-radius: 20px;
    padding: 0.18rem 0.6rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    line-height: 1.4;
}

.btn-add-tag:hover[b-chhqd3tn5d] { border-color: var(--color-primary-light); color: var(--color-primary-light); }

/* ── Pagination ── */
.pagination-bar[b-chhqd3tn5d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-bottom: 2rem;
    margin-top: 2rem;
}

.page-btn[b-chhqd3tn5d] {
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.85rem;
}

.page-btn:hover:not(:disabled)[b-chhqd3tn5d] { background: rgba(20,184,166,0.15); }
.page-btn:disabled[b-chhqd3tn5d] { opacity: 0.3; cursor: not-allowed; }

.page-info[b-chhqd3tn5d] { font-size: 0.85rem; color: var(--text-secondary); }

/* ── Empty State ── */
.empty-state[b-chhqd3tn5d] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.empty-icon[b-chhqd3tn5d] { font-size: 3rem; margin-bottom: 1rem; }
.empty-state h2[b-chhqd3tn5d] { color: var(--color-primary); margin-bottom: 0.5rem; }
.empty-state p[b-chhqd3tn5d] { margin-bottom: 1.5rem; }



.modal-overlay[b-chhqd3tn5d] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    animation: modalFadeIn-b-chhqd3tn5d .25s ease;
}

@keyframes modalFadeIn-b-chhqd3tn5d {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================
   MODAL PANEL
========================================== */

.modal-panel[b-chhqd3tn5d] {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    background: var(--color-surface);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: slideUp-b-chhqd3tn5d 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp-b-chhqd3tn5d {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.phone-input-row[b-chhqd3tn5d] {
    display: flex;
    gap: .75rem;
    align-items: center;
}

.country-code-select[b-chhqd3tn5d] {
    flex: 0 0 120px;
    cursor: pointer;
}

.phone-input-row .form-input:last-child[b-chhqd3tn5d] {
    flex: 1;
}

.country-code-select option[b-chhqd3tn5d],
.mapping-select option[b-chhqd3tn5d] {
    color: #111827;
}

.modal-panel.mac-style[b-chhqd3tn5d] {
    border-radius: 1rem;
}

.modal-header-mac[b-chhqd3tn5d] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--mac-header-gradient);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* traffic lights */

.traffic-lights[b-chhqd3tn5d] {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.light[b-chhqd3tn5d] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.light:hover[b-chhqd3tn5d] {
    transform: scale(1.12);
}

.light.red[b-chhqd3tn5d] {
    background: var(--red-light);
}

.light.yellow[b-chhqd3tn5d] {
    background: var(--yellow-light);
}

.light.green[b-chhqd3tn5d] {
    background: var(--green-light);
}

.modal-header-mac h2[b-chhqd3tn5d] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
}

.modal-body[b-chhqd3tn5d] {
    flex: 1;
    overflow-y: auto;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.modal-body[b-chhqd3tn5d]::-webkit-scrollbar {
    display: none;
}

.modal-body[b-chhqd3tn5d] {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.form-grid[b-chhqd3tn5d] {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1.2rem;
}

.full-width[b-chhqd3tn5d] {
    grid-column: 1 / -1;
}


.form-group[b-chhqd3tn5d] {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.form-label[b-chhqd3tn5d] {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-secondary);

    text-transform: uppercase;
    letter-spacing: .4px;
}

.form-hint[b-chhqd3tn5d] {
    margin: 0;
    font-size: .82rem;
    color: var(--text-muted);
}


.form-input[b-chhqd3tn5d] {
    width: 100%;
    padding: .95rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background: var(--input-background);
    color: var(--text-primary);
    font-size: .95rem;
    outline: none;
    transition: all .2s ease;
}

.form-input[b-chhqd3tn5d]::placeholder {
    color: var(--text-muted);
}

.form-input:focus[b-chhqd3tn5d] {
    background: var(--input-background-focus);
    border-color: var(--color-primary-light);
    box-shadow: var(--input-shadow);
}

.form-input:disabled[b-chhqd3tn5d] {
    opacity: .55;
    cursor: not-allowed;
}

.contact-textarea[b-chhqd3tn5d] {
    resize: vertical;
    min-height: 120px;
}

.tag-picker-panel[b-chhqd3tn5d] {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    padding: 1rem;
    border-radius: 22px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
}

/* tag item */

.tag-check-item[b-chhqd3tn5d] {
    cursor: pointer;
}

.tag-check-item input[b-chhqd3tn5d] {
    display: none;
}


.no-tags-hint[b-chhqd3tn5d] {
    width: 100%;
    text-align: center;
    color: var(--text-muted);
    margin: .25rem 0;
}


.validation-error[b-chhqd3tn5d] {
    padding: 1rem 1.1rem;
    border-radius: 20px;
    background: rgba(255,95,86,.08);
    border: 1px solid rgba(255,95,86,.25);
    color: var(--red-light);
    font-size: .9rem;
}

.modal-footer[b-chhqd3tn5d] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--glass-bg);
    flex-shrink: 0;
}


.btn-primary[b-chhqd3tn5d],
.btn-secondary[b-chhqd3tn5d] {
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-size: .92rem;
    font-weight: 700;
    border-radius: 18px;
    padding: .9rem 1.4rem;
    transition: all .2s ease;
}

.btn-primary[b-chhqd3tn5d] {
    background: var(--color-primary);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-chhqd3tn5d] {
    background: var(--color-primary-dark);

    transform: translateY(-2px);
}

.btn-primary:disabled[b-chhqd3tn5d] {
    opacity: .55;
    cursor: not-allowed;
}

.btn-secondary[b-chhqd3tn5d] {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
}

.btn-secondary:hover[b-chhqd3tn5d] {
    background: var(--glass-bg-hover);
}


.confirm-body[b-chhqd3tn5d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
}

.confirm-icon[b-chhqd3tn5d] {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 1.2rem;
    background: rgba(255,95,86,.12);
    border: 1px solid rgba(255,95,86,.18);
}

.confirm-icon i[b-chhqd3tn5d] {
    font-size: 2.5rem;
    color: var(--red-light);
}

.confirm-title[b-chhqd3tn5d] {
    margin: 0 0 .75rem;
    color: var(--text-primary);
    font-size: 1.35rem;
    font-weight: 700;
}

.confirm-message[b-chhqd3tn5d] {
    margin: 0;
    color: var(--text-secondary);
    font-size: .95rem;
    line-height: 1.7;
    max-width: 420px;
}

.confirm-message strong[b-chhqd3tn5d] {
    color: var(--text-primary);
}

.confirm-sub[b-chhqd3tn5d] {
    margin-top: .75rem;
    color: var(--text-muted);
    font-size: .85rem;
}

.btn-danger[b-chhqd3tn5d] {
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .9rem 1.4rem;
    border-radius: 18px;
    background: var(--red-light);
    color: white;
    font-size: .92rem;
    font-weight: 700;
    transition: .2s ease;
}

.btn-danger:hover:not(:disabled)[b-chhqd3tn5d] {
    transform: translateY(-2px);
    filter: brightness(.92);
}

.btn-danger:disabled[b-chhqd3tn5d] {
    opacity: .55;
    cursor: not-allowed;
}

.tag-assign-body[b-chhqd3tn5d] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tag-assign-hint[b-chhqd3tn5d] {
    margin: 0;
    color: var(--text-secondary);
    font-size: .95rem;
}

.tag-check-list[b-chhqd3tn5d] {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    padding: 1.25rem;
    border-radius: 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    min-height: 120px;
}

.quick-tag-create[b-chhqd3tn5d] {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.quick-tag-create .form-input[b-chhqd3tn5d] {
    flex: 1;
}

.quick-tag-create .btn-primary[b-chhqd3tn5d] {
    min-width: 58px;
    height: 58px;
    padding: 0;
}

.modal-lg[b-chhqd3tn5d] {
    max-width: 720px;
}

.tag-manager[b-chhqd3tn5d] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tag-manager-list[b-chhqd3tn5d] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 420px;
    overflow-y: auto;
    padding-right: .4rem;
}

.tag-edit-row .tag-edit-row-actions[b-chhqd3tn5d],
.tag-row .tag-row-actions[b-chhqd3tn5d] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.tag-row[b-chhqd3tn5d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border-radius: 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    transition: .2s ease;
}

.tag-row:hover[b-chhqd3tn5d] {
    transform: translateY(-2px);
    border-color: rgba(20,184,166,.25);
}

.tag-row-left[b-chhqd3tn5d] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.tag-usage[b-chhqd3tn5d] {
    color: var(--text-muted);
    font-size: .88rem;
}

.tag-actions[b-chhqd3tn5d] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.tag-edit-row[b-chhqd3tn5d] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
    border-radius: 22px;
    background: rgba(20,184,166,.05);
    border: 1px solid rgba(20,184,166,.15);
}

.tag-edit-input[b-chhqd3tn5d] {
    flex: 1;
}

.tag-create-row[b-chhqd3tn5d] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.color-picker[b-chhqd3tn5d] {
    width: 58px;
    height: 58px;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.icon-btn[b-chhqd3tn5d] {
    width: 42px;
    height: 42px;
    border: none;
    cursor: pointer;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    color: var(--text-secondary);
    transition: .2s ease;
}

.icon-btn:hover[b-chhqd3tn5d] {
    transform: translateY(-2px);
    color: white;
    background: var(--color-primary-light);
}

.icon-btn.success:hover[b-chhqd3tn5d] {
    background: rgba(39,201,63,.15);
    color: var(--green-light);
}

.icon-btn.danger:hover[b-chhqd3tn5d] {
    background: rgba(255,95,86,.15);
    color: var(--red-light);
}

.modal-xl[b-chhqd3tn5d] {
    max-width: 900px;
}

/* body */

.import-body[b-chhqd3tn5d] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.import-step[b-chhqd3tn5d] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* intro */

.import-instructions h3[b-chhqd3tn5d],
.import-step-title[b-chhqd3tn5d] {
    margin: 0;
    color: var(--text-primary);
}

.import-subtitle[b-chhqd3tn5d],
.import-instructions p[b-chhqd3tn5d] {
    color: var(--text-muted);
    margin: 0;
}

/* drop zone — CHANGED: rgba(255,255,255,.03) -> var(--glass-bg) */
.file-drop-zone[b-chhqd3tn5d] {
    border: 2px dashed rgba(20,184,166,.25);
    border-radius: 30px;
    padding: 3rem;
    text-align: center;
    background: var(--glass-bg);
    transition: .25s ease;
}

.file-drop-zone:hover[b-chhqd3tn5d] {
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.upload-icon[b-chhqd3tn5d] {
    font-size: 4rem;
    color: var(--color-primary-light);
    margin-bottom: 1rem;
}

.file-drop-zone h4[b-chhqd3tn5d] {
    margin: 0;
    color: var(--text-primary);
}

.file-drop-zone p[b-chhqd3tn5d] {
    color: var(--text-muted);
}

/* selected — kept teal-tinted (accent) */
.selected-file-card[b-chhqd3tn5d] {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: 20px;
    background: rgba(20,184,166,.08);
    border: 1px solid rgba(20,184,166,.2);
    color: var(--text-primary);
}

.mapping-grid[b-chhqd3tn5d] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mapping-row[b-chhqd3tn5d] {
    display: grid;
    grid-template-columns: 220px 60px 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 22px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
}

.mapping-field[b-chhqd3tn5d] {
    font-weight: 600;
    color: var(--text-primary);
}

.required[b-chhqd3tn5d] {
    color: var(--red-light);
}

.mapping-arrow[b-chhqd3tn5d] {
    text-align: center;
    color: var(--text-muted);
}

.mapping-select[b-chhqd3tn5d] {
    width: 100%;
}

.import-preview-card[b-chhqd3tn5d] {
    padding: 1rem 1.2rem;
    border-radius: 20px;
    background: rgba(20,184,166,.08);
    border: 1px solid rgba(20,184,166,.15);
    color: var(--text-secondary);
}

/* result */

.import-result[b-chhqd3tn5d] {
    align-items: center;
}

.result-stats[b-chhqd3tn5d] {
    display: flex;
    gap: 2rem;
}

.result-stat[b-chhqd3tn5d] {
    min-width: 180px;
    padding: 2rem;
    border-radius: 28px;
    text-align: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
}

.result-stat.created[b-chhqd3tn5d] {
    border-color: rgba(39,201,63,.2);
}

.result-stat.updated[b-chhqd3tn5d] {
    border-color: rgba(245,158,11,.2);
}

.stat-number[b-chhqd3tn5d] {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-label[b-chhqd3tn5d] {
    color: var(--text-muted);
}

@media (max-width: 768px) {

    .modal-overlay[b-chhqd3tn5d] {
        padding: 1rem;
    }

    .modal-panel[b-chhqd3tn5d] {
        max-height: 95vh;
        border-radius: 24px;
    }

    .form-grid[b-chhqd3tn5d] {
        grid-template-columns: 1fr;
    }

    .modal-header-mac[b-chhqd3tn5d] {
        padding: 1rem;
    }

    .modal-body[b-chhqd3tn5d] {
        padding: 1rem;
    }

    .modal-footer[b-chhqd3tn5d] {
        flex-direction: column;
    }

    .btn-primary[b-chhqd3tn5d],
    .btn-secondary[b-chhqd3tn5d] {
        width: 100%;
    }

    .quick-tag-create[b-chhqd3tn5d] {
        flex-direction: column;
    }

    .quick-tag-create .btn-primary[b-chhqd3tn5d] {
        width: 100%;
        height: 54px;
    }

    .tag-row[b-chhqd3tn5d] {
        flex-direction: column;
        align-items: flex-start;
    }

    .tag-actions[b-chhqd3tn5d] {
        width: 100%;
        justify-content: flex-end;
    }

    .tag-create-row[b-chhqd3tn5d] {
        flex-direction: column;
        align-items: stretch;
    }

    .color-picker[b-chhqd3tn5d] {
        width: 100%;
    }

    .mapping-row[b-chhqd3tn5d] {
        grid-template-columns: 1fr;
    }

    .result-stats[b-chhqd3tn5d] {
        flex-direction: column;
        width: 100%;
    }

    .result-stat[b-chhqd3tn5d] {
        width: 100%;
    }

    .file-drop-zone[b-chhqd3tn5d] {
        padding: 2rem 1rem;
    }
}

@media (max-width: 640px) {
    .contacts-page[b-chhqd3tn5d] { padding: 1rem; }
    .form-grid[b-chhqd3tn5d] { grid-template-columns: 1fr; }
    .contacts-header[b-chhqd3tn5d] { flex-direction: column; }
    .mapping-row[b-chhqd3tn5d] { grid-template-columns: 1fr 20px 1fr; }
}
/* /Pages/Authorized/WhatsApp/ExternalApis/ExternalApis.razor.rz.scp.css */
/* ==================== EXTERNAL APIS - ENHANCED UI ==================== */

.external-apis-page[b-ymas043frw] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

/* ==================== PAGE HEADER ==================== */
.apis-header[b-ymas043frw] {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 28px;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    gap: 16px;
    flex-wrap: wrap;
}

.header-content[b-ymas043frw] {
    flex: 1;
}

.page-title[b-ymas043frw] {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
}

.page-description[b-ymas043frw] {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 15px;
}

.header-actions[b-ymas043frw] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-primary[b-ymas043frw],
.btn-secondary[b-ymas043frw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-primary[b-ymas043frw] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--text-white);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25);
}

.btn-primary:hover[b-ymas043frw] {
    box-shadow: 0 6px 24px rgba(20, 184, 166, 0.35);
    transform: translateY(-2px);
}

.btn-secondary[b-ymas043frw] {
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--card-border);
}

.btn-secondary:hover[b-ymas043frw] {
    background: var(--glass-bg-hover);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-danger[b-ymas043frw] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: var(--text-white);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.btn-danger:hover[b-ymas043frw] {
    box-shadow: 0 6px 24px rgba(239, 68, 68, 0.35);
    transform: translateY(-2px);
}

.btn-sm[b-ymas043frw] {
    padding: 8px 16px;
    font-size: 13px;
}

/* ==================== COLLECTIONS SECTION ==================== */
.collections-section[b-ymas043frw] {
    animation: fadeIn-b-ymas043frw 0.3s ease-out;
    max-width: 1400px;
    margin: 0 auto;
}

@keyframes fadeIn-b-ymas043frw {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.collections-grid[b-ymas043frw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

/* COLLECTION CARD */
.collection-card[b-ymas043frw] {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
}

.collection-card:hover[b-ymas043frw] {
    border-color: rgba(20, 184, 166, 0.5);
    box-shadow: var(--shadow-md);
    transform: translateY(-6px);
}

.card-header-section[b-ymas043frw] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border-bottom: 1px solid var(--card-border);
    background: var(--glass-bg);
}

.collection-badge[b-ymas043frw] {
    font-size: 32px;
    flex-shrink: 0;
}

.collection-header-content[b-ymas043frw] {
    flex: 1;
    min-width: 0;
}

.collection-title[b-ymas043frw] {
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collection-desc[b-ymas043frw] {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-stats[b-ymas043frw] {
    display: flex;
    gap: 24px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--card-border);
    background: rgba(20, 184, 166, 0.02);
}

.stat[b-ymas043frw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.stat-icon[b-ymas043frw] {
    font-size: 16px;
}

.endpoints-preview[b-ymas043frw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--card-border);
}

.endpoint-chip[b-ymas043frw] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--glass-bg);
    border-radius: 8px;
    border: 1px solid var(--card-border);
    font-size: 13px;
}

.method-badge[b-ymas043frw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 45px;
    text-align: center;
}

.method-get[b-ymas043frw] { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.method-post[b-ymas043frw] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.method-put[b-ymas043frw] { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.method-patch[b-ymas043frw] { background: rgba(249, 115, 22, 0.15); color: #f97316; }
.method-delete[b-ymas043frw] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.chip-text[b-ymas043frw] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.chip-more[b-ymas043frw] {
    padding: 8px 12px;
    background: var(--glass-bg);
    border-radius: 8px;
    border: 1px dashed var(--card-border);
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

.card-actions[b-ymas043frw] {
    display: flex;
    gap: 8px;
    padding: 16px 24px;
    background: var(--glass-bg);
}

.action-btn[b-ymas043frw] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--card-border);
    background: transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover[b-ymas043frw] {
    background: var(--hover-overlay);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.action-btn.danger[b-ymas043frw] {
    color: #ef4444;
}

.action-btn.danger:hover[b-ymas043frw] {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

/* ==================== COLLECTION DETAIL ==================== */
.collection-detail-section[b-ymas043frw] {
    animation: fadeIn-b-ymas043frw 0.3s ease-out;
    max-width: 1400px;
    margin: 0 auto;
}

.detail-header[b-ymas043frw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 40px;
    padding: 32px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
}

.detail-info h2[b-ymas043frw] {
    margin: 0 0 12px 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

.detail-info p[b-ymas043frw] {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

.variables-section[b-ymas043frw] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--card-border);
}

.variables-section strong[b-ymas043frw] {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.variables-list[b-ymas043frw] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.variable-badge[b-ymas043frw] {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(20, 184, 166, 0.1);
    color: var(--color-primary);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Quicksand', sans-serif;
}

/* ==================== ENDPOINTS SECTION ==================== */
.endpoints-section[b-ymas043frw] {
    margin-bottom: 40px;
}

.section-header[b-ymas043frw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--card-border);
}

.section-header h3[b-ymas043frw] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.endpoints-table[b-ymas043frw] {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table-header[b-ymas043frw] {
    display: grid;
    grid-template-columns: 200px 100px 1fr 120px 150px;
    gap: 16px;
    padding: 16px 20px;
    background: var(--glass-bg);
    border-bottom: 1px solid var(--card-border);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-row[b-ymas043frw] {
    display: grid;
    grid-template-columns: 200px 100px 1fr 120px 150px;
    gap: 16px;
    padding: 16px 20px;
    align-items: center;
    border-bottom: 1px solid var(--card-border);
    transition: background 0.2s;
}

.table-row:hover[b-ymas043frw] {
    background: var(--hover-overlay);
}

.table-row:last-child[b-ymas043frw] {
    border-bottom: none;
}

.col-name[b-ymas043frw] {
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-method[b-ymas043frw] {
    display: flex;
    justify-content: flex-start;
}

.col-url[b-ymas043frw] {
    min-width: 0;
}

.col-url code[b-ymas043frw] {
    display: block;
    padding: 6px 8px;
    background: var(--glass-bg);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid var(--card-border);
}

.col-scripts[b-ymas043frw] {
    display: flex;
    gap: 6px;
}

.script-badge[b-ymas043frw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.script-badge.pre[b-ymas043frw] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.script-badge.post[b-ymas043frw] {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.col-actions[b-ymas043frw] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.icon-btn[b-ymas043frw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--card-border);
    background: var(--glass-bg);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.icon-btn:hover[b-ymas043frw] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(20, 184, 166, 0.1);
}

.icon-btn.danger[b-ymas043frw] {
    color: #ef4444;
}

.icon-btn.danger:hover[b-ymas043frw] {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* ==================== EMPTY STATES ==================== */
.empty-state-full[b-ymas043frw] {
    text-align: center;
    padding: 80px 40px;
    background: var(--card-bg);
    border: 1px dashed var(--card-border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-graphic[b-ymas043frw] {
    font-size: 64px;
    margin-bottom: 24px;
}

.empty-state-full h3[b-ymas043frw] {
    margin: 0 0 12px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.empty-state-full p[b-ymas043frw] {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: var(--text-muted);
    max-width: 400px;
}

.empty-state-inline[b-ymas043frw] {
    text-align: center;
    padding: 40px;
    background: var(--glass-bg);
    border: 1px dashed var(--card-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.empty-state-inline p[b-ymas043frw] {
    margin: 0;
    color: var(--text-muted);
}

/* ==================== ONBOARDING ==================== */
.onboarding-container[b-ymas043frw] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 100px);
    padding: 40px 20px;
}

.onboarding-card[b-ymas043frw] {
    max-width: 420px;
    text-align: center;
    padding: 60px 40px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
}

.onboarding-icon[b-ymas043frw] {
    font-size: 64px;
    margin-bottom: 24px;
}

.onboarding-card h2[b-ymas043frw] {
    margin: 0 0 12px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.onboarding-card p[b-ymas043frw] {
    margin: 0 0 32px 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ==================== TEST RESULT PANEL ==================== */
.test-result-panel[b-ymas043frw] {
    margin-top: 40px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    overflow: hidden;
}

.result-header[b-ymas043frw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--glass-bg);
    border-bottom: 1px solid var(--card-border);
}

.result-header h4[b-ymas043frw] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.result-content[b-ymas043frw] {
    padding: 20px;
}

.result-json[b-ymas043frw] {
    margin: 0;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid var(--card-border);
    color: #10b981;
    font-family: 'Quicksand', sans-serif;
    font-size: 12px;
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.5;
}

/* ==================== MODALS ==================== */
.modal-backdrop[b-ymas043frw] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    animation: fadeIn-b-ymas043frw 0.2s ease-out;
}

.modal-dialog[b-ymas043frw] {
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    pointer-events: auto;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: slideUp-b-ymas043frw 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-dialog.modal-lg[b-ymas043frw] {
    max-width: 700px;
}

.modal-dialog.modal-xl[b-ymas043frw] {
    max-width: 900px;
}

@keyframes slideUp-b-ymas043frw {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-ymas043frw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid var(--card-border);
    background: var(--glass-bg);
}

.modal-header h3[b-ymas043frw] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-close[b-ymas043frw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s;
    border-radius: 8px;
}

.modal-close:hover[b-ymas043frw] {
    background: var(--hover-overlay);
    color: var(--text-primary);
}

.modal-body[b-ymas043frw] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;
}

.modal-body[b-ymas043frw]::-webkit-scrollbar {
    width: 8px;
}

.modal-body[b-ymas043frw]::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body[b-ymas043frw]::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 999px;
}

.modal-body[b-ymas043frw]::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark, var(--color-primary));
}

.modal-footer[b-ymas043frw] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid var(--card-border);
    background: var(--glass-bg);
}

.modal-footer button[b-ymas043frw] {
    min-width: 100px;
}

/* ==================== FORMS ==================== */
.form-section[b-ymas043frw] {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--glass-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
}

.form-section h4[b-ymas043frw] {
    margin: 0 0 16px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group[b-ymas043frw] {
    margin-bottom: 16px;
}

.form-group:last-child[b-ymas043frw] {
    margin-bottom: 0;
}

.form-group label[b-ymas043frw] {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.form-group small[b-ymas043frw] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.form-control[b-ymas043frw] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    background: var(--input-background);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    font-family: 'Quicksand', sans-serif;
    transition: all 0.2s;
}

.form-control[b-ymas043frw]::placeholder {
    color: var(--text-muted);
}

.form-control:focus[b-ymas043frw] {
    outline: none;
    border-color: var(--color-primary);
    background: var(--input-background-focus);
    box-shadow: var(--input-shadow);
}

.form-control.code-input[b-ymas043frw] {
    font-family: 'Quicksand', sans-serif;
    font-size: 12px;
}

.form-row[b-ymas043frw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.detail-section[b-ymas043frw] {
    margin-bottom: 24px;
}

.detail-section h4[b-ymas043frw] {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--card-border);
}

.detail-grid[b-ymas043frw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.detail-item[b-ymas043frw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.detail-item .label[b-ymas043frw] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-item code[b-ymas043frw] {
    padding: 8px 12px;
    background: var(--glass-bg);
    border-radius: 6px;
    border: 1px solid var(--card-border);
    font-size: 12px;
    color: var(--text-primary);
    word-break: break-all;
    font-family: 'Quicksand', sans-serif;
}

.headers-display[b-ymas043frw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.header-row[b-ymas043frw] {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 12px;
    padding: 10px 12px;
    background: var(--glass-bg);
    border-radius: 6px;
    border: 1px solid var(--card-border);
}

.header-key[b-ymas043frw] {
    font-weight: 600;
    color: var(--color-primary);
    font-family: 'Quicksand', sans-serif;
    font-size: 12px;
}

.header-value[b-ymas043frw] {
    color: var(--text-muted);
    font-family: 'Quicksand', sans-serif;
    font-size: 12px;
    word-break: break-all;
}

.code-block[b-ymas043frw] {
    margin: 0;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid var(--card-border);
    color: #10b981;
    font-family: 'Quicksand', sans-serif;
    font-size: 12px;
    max-height: 300px;
    overflow-y: auto;
    line-height: 1.5;
}

/* ==================== ALERTS ==================== */
.alert[b-ymas043frw] {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid;
    margin-bottom: 16px;
}

.alert i[b-ymas043frw] {
    flex-shrink: 0;
    font-size: 18px;
}

.alert-error[b-ymas043frw] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.alert-success[b-ymas043frw] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

/* ==================== LOADING ==================== */
.loading-container[b-ymas043frw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 40px;
    color: var(--text-muted);
}

.spinner[b-ymas043frw] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--card-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-ymas043frw 0.8s linear infinite;
}

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

.spinner-center[b-ymas043frw] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 500px;
}

.text-muted[b-ymas043frw] {
    color: var(--text-muted) !important;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
    .apis-header[b-ymas043frw] {
        flex-direction: column;
        gap: 24px;
    }

    .header-actions[b-ymas043frw] {
        width: 100%;
        justify-content: flex-start;
    }

    .collections-grid[b-ymas043frw] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .detail-header[b-ymas043frw] {
        flex-direction: column;
    }

    .table-header[b-ymas043frw],
    .table-row[b-ymas043frw] {
        grid-template-columns: 150px 80px 1fr 100px 100px;
    }
}

@media (max-width: 768px) {
    .external-apis-page[b-ymas043frw] {
        padding: 20px 16px;
    }

    .page-title[b-ymas043frw] {
        font-size: 2rem;
    }

    .collections-grid[b-ymas043frw] {
        grid-template-columns: 1fr;
    }

    .modal-dialog[b-ymas043frw] {
        max-width: 95vw;
        max-height: 95vh;
    }

    .modal-dialog.modal-lg[b-ymas043frw],
    .modal-dialog.modal-xl[b-ymas043frw] {
        max-width: 95vw;
    }

    .modal-footer[b-ymas043frw] {
        flex-direction: column-reverse;
    }

    .modal-footer button[b-ymas043frw] {
        width: 100%;
    }

    .table-header[b-ymas043frw],
    .table-row[b-ymas043frw] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .form-row[b-ymas043frw] {
        grid-template-columns: 1fr;
    }

    .card-stats[b-ymas043frw] {
        flex-direction: column;
        gap: 12px;
    }

    .detail-grid[b-ymas043frw] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .page-title[b-ymas043frw] {
        font-size: 1.5rem;
    }

    .btn-primary[b-ymas043frw],
    .btn-secondary[b-ymas043frw] {
        padding: 10px 16px;
        font-size: 13px;
    }

    .modal-header[b-ymas043frw],
    .modal-body[b-ymas043frw],
    .modal-footer[b-ymas043frw] {
        padding: 16px;
    }

    .form-section[b-ymas043frw] {
        padding: 16px;
    }

    .onboarding-card[b-ymas043frw] {
        padding: 40px 24px;
    }
}
/* /Pages/Authorized/WhatsApp/Flows/AllFlows.razor.rz.scp.css */
.flows-page[b-kie258kab1] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

.flows-header[b-kie258kab1] {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 28px;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    gap: 16px;
    flex-wrap: wrap;
}

.flows-header-left[b-kie258kab1] {
    display: flex;
    align-items: flex-start;
}

.flows-header-left > div[b-kie258kab1] {
    display: flex;
    flex-direction: column;
}

.flows-title[b-kie258kab1] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.flows-subtitle[b-kie258kab1] {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--text-muted);
}

.flows-header-actions[b-kie258kab1] {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    align-items: center;
}

.flows-search-box[b-kie258kab1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--page-bg);
    min-width: 260px;
    transition: all 0.15s;
}

.flows-search-box:focus-within[b-kie258kab1] {
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

.flows-search-box i.bi-search[b-kie258kab1] {
    color: var(--text-muted);
    font-size: 14px;
    flex-shrink: 0;
}

.flows-search-input[b-kie258kab1] {
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    width: 100%;
}

.flows-search-input[b-kie258kab1]::placeholder {
    color: var(--text-muted);
}

.flows-search-clear[b-kie258kab1] {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
    flex-shrink: 0;
}

.flows-search-clear:hover[b-kie258kab1] {
    color: #dc2626;
}

@media (max-width: 640px) {
    .flows-search-box[b-kie258kab1] {
        min-width: 0;
        flex: 1;
    }

    .flows-header-actions[b-kie258kab1] {
        width: 100%;
    }
}

.flows-btn[b-kie258kab1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.flows-btn-primary[b-kie258kab1] {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2);
}

.flows-btn-primary:hover:not(:disabled)[b-kie258kab1] {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.3);
    transform: translateY(-1px);
}

.flows-btn-primary:disabled[b-kie258kab1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.flows-btn-secondary[b-kie258kab1] {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.flows-btn-secondary:hover:not(:disabled)[b-kie258kab1] {
    border-color: #14b8a6;
    color: #0d9488;
}

.flows-tabs-wrapper[b-kie258kab1] {
    max-width: 1400px;
    margin: 0 auto;
}

.flows-tabs[b-kie258kab1] {
    display: inline-flex;
    gap: 4px;
    padding: 6px;
    margin-bottom: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.flows-tab[b-kie258kab1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.flows-tab:hover[b-kie258kab1] {
    color: var(--text-primary);
    background: rgba(20, 184, 166, 0.08);
}

.flows-tab-active[b-kie258kab1] {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25);
}

.flows-tab-active:hover[b-kie258kab1] {
    color: white;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}

@media (max-width: 640px) {
    .flows-tabs[b-kie258kab1] {
        display: flex;
        width: 100%;
    }

    .flows-tab[b-kie258kab1] {
        flex: 1;
        justify-content: center;
        padding: 10px 8px;
        font-size: 13px;
    }
}

.flows-container[b-kie258kab1] {
    max-width: 1400px;
    margin: 0 auto;
}

.flows-container[b-kie258kab1]::-webkit-scrollbar {
    display: none;            
}

.flows-empty-state[b-kie258kab1],
.flows-loading[b-kie258kab1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 40px;
    text-align: center;
    flex: 1;
}

.empty-icon[b-kie258kab1],
.spinner-border[b-kie258kab1] {
    font-size: 64px;
    line-height: 1;
}

.spinner-border[b-kie258kab1] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(20, 184, 166, 0.2);
    border-top-color: #14b8a6;
    border-radius: 50%;
    animation: spin-b-kie258kab1 0.8s linear infinite;
}

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

.flows-empty-state h3[b-kie258kab1] {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

.flows-empty-state p[b-kie258kab1] {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
    max-width: 380px;
}

.flows-grid[b-kie258kab1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
    padding-bottom: 20px;
    margin-top: 10px;
}

@media (min-width: 1600px) {
    .flows-grid[b-kie258kab1] {
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        gap: 24px;
    }
}

@media (max-width: 1024px) {
    .flows-grid[b-kie258kab1] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 780px) {
    .flows-grid[b-kie258kab1] {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media (max-width: 560px) {
    .flows-grid[b-kie258kab1] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.flow-card[b-kie258kab1] {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.flow-card:hover[b-kie258kab1] {
    border-color: var(--color-primary-light);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.card-header[b-kie258kab1] {
    padding: 20px;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.card-header-left[b-kie258kab1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.card-title[b-kie258kab1] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
    display: flex;
    gap: 8px;
    align-items: center;
}

.flow-status-badge[b-kie258kab1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
}

.flow-status-badge.status-draft[b-kie258kab1] {
    background: rgba(248, 113, 113, 0.15);
    color: #dc2626;
}

.flow-status-badge.status-published[b-kie258kab1] {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.flow-status-badge.status-deprecated[b-kie258kab1] {
    background: rgba(100, 116, 139, 0.2);
    color: var(--text-secondary);
}

.flow-status-badge.status-unknown[b-kie258kab1] {
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-muted);
}

.card-badges[b-kie258kab1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.flow-error-badge[b-kie258kab1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.flow-error-badge i[b-kie258kab1] {
    font-size: 12px;
}

/* ── Endpoint Mode Badge ──────────────────────────────────────────────────────────────────── */

.flow-endpoint-badge[b-kie258kab1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: fit-content;
}

.flow-endpoint-badge.endpoint-static[b-kie258kab1] {
    background: rgba(156, 39, 176, 0.15);
    color: #7b1fa2;
}

.flow-endpoint-badge.endpoint-emsage[b-kie258kab1] {
    background: rgba(33, 150, 243, 0.15);
    color: #1565c0;
}

.flow-endpoint-badge.endpoint-external[b-kie258kab1] {
    background: rgba(255, 152, 0, 0.15);
    color: #e65100;
}

.flow-endpoint-badge.endpoint-unknown[b-kie258kab1] {
    background: rgba(156, 156, 156, 0.15);
    color: #616161;
}

.card-header-right[b-kie258kab1] {
    display: flex;
    gap: 8px;
}

.card-menu-btn[b-kie258kab1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.card-menu-btn:hover[b-kie258kab1] {
    background: rgba(20, 184, 166, 0.1);
    color: #14b8a6;
}

.card-body[b-kie258kab1] {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-description[b-kie258kab1] {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-categories[b-kie258kab1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-badge[b-kie258kab1] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(20, 184, 166, 0.15);
    color: #0d9488;
    border: 1px solid rgba(20, 184, 166, 0.2);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-badge.category-more[b-kie258kab1] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.2);
}

.card-metadata[b-kie258kab1] {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: var(--text-muted);
}

.metadata-item[b-kie258kab1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metadata-label[b-kie258kab1] {
    font-weight: 500;
    color: var(--text-muted);
    display: block;
}

.metadata-value[b-kie258kab1] {
    color: var(--text-secondary);
    display: block;
}

.card-actions[b-kie258kab1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--card-border);
}

@media (max-width: 480px) {
    .card-actions[b-kie258kab1] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.action-btn[b-kie258kab1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    background: transparent;
    color: var(--text-secondary);
}

.action-btn:hover:not(:disabled)[b-kie258kab1] {
    transform: scale(1.05);
}

.action-btn:disabled[b-kie258kab1] {
    opacity: 0.4;
    cursor: not-allowed;
}

.action-preview[b-kie258kab1] {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.action-preview:hover:not(:disabled)[b-kie258kab1] {
    background: rgba(34, 197, 94, 0.25);
}

.action-edit-canvas[b-kie258kab1] {
    background: rgba(59, 130, 246, 0.15);
    text-wrap: nowrap;
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.action-edit-canvas:hover:not(:disabled)[b-kie258kab1] {
    background: rgba(59, 130, 246, 0.25);
}

.action-analytics[b-kie258kab1] {
    background: rgba(245, 158, 11, 0.15);
    text-wrap: nowrap;
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.action-analytics:hover:not(:disabled)[b-kie258kab1] {
    background: rgba(245, 158, 11, 0.25);
}

.action-details[b-kie258kab1] {
    background: rgba(168, 85, 247, 0.15);
    color: #9333ea;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.action-details:hover:not(:disabled)[b-kie258kab1] {
    background: rgba(168, 85, 247, 0.25);
}

.action-delete[b-kie258kab1] {
    background: rgba(248, 113, 113, 0.15);
    color: #dc2626;
    border: 1px solid rgba(248, 113, 113, 0.2);
}

.action-delete:hover:not(:disabled)[b-kie258kab1] {
    background: rgba(248, 113, 113, 0.25);
}

.templates-banner[b-kie258kab1] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px 18px;
    background: var(--card-bg);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
}

.templates-banner i[b-kie258kab1] {
    color: var(--color-primary);
    font-size: 16px;
    flex-shrink: 0;
}

.templates-banner p[b-kie258kab1] {
    margin: 0;
}

.templates-toolbar[b-kie258kab1] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.templates-filter-label[b-kie258kab1] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.templates-filter-select[b-kie258kab1] {
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 14px;
    min-width: 200px;
    cursor: pointer;
}

.templates-filter-select:focus[b-kie258kab1] {
    outline: none;
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

.templates-grid[b-kie258kab1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding-bottom: 20px;
}

@media (min-width: 1600px) {
    .templates-grid[b-kie258kab1] {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    }
}

@media (max-width: 780px) {
    .templates-grid[b-kie258kab1] {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media (max-width: 560px) {
    .templates-grid[b-kie258kab1] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.template-card[b-kie258kab1] {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.25s ease;
}

.template-card:hover[b-kie258kab1] {
    border-color: var(--color-primary-light);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.template-card-header[b-kie258kab1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 0;
}

.template-tag[b-kie258kab1] {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-secondary);
    border: 1px solid var(--card-border);
}

.template-percentage[b-kie258kab1] {
    font-size: 18px;
    font-weight: 700;
    color: #16a34a;
}

.template-card-body[b-kie258kab1] {
    flex: 1;
    padding: 14px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.template-title[b-kie258kab1] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.template-description[b-kie258kab1] {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

.template-features[b-kie258kab1] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.template-features li[b-kie258kab1] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-secondary);
}

.template-feature-icon[b-kie258kab1] {
    font-size: 15px;
    line-height: 1;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.template-categories[b-kie258kab1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.template-category-chip[b-kie258kab1] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    background: rgba(20, 184, 166, 0.12);
    color: #0d9488;
    border: 1px solid rgba(20, 184, 166, 0.2);
}

.template-card-actions[b-kie258kab1] {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--card-border);
}

.template-btn[b-kie258kab1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.template-btn-preview[b-kie258kab1] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.template-btn-preview:hover[b-kie258kab1] {
    border-color: var(--color-primary-light);
    color: #0d9488;
}

.template-btn-use[b-kie258kab1] {
    border: none;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2);
}

.template-btn-use:hover[b-kie258kab1] {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.3);
    transform: translateY(-1px);
}

/* Flow starter library */
.templates-banner[b-kie258kab1] {
    align-items: flex-start;
    border-color: color-mix(in srgb, var(--color-primary) 24%, var(--card-border));
    background: linear-gradient(120deg, color-mix(in srgb, var(--color-primary) 8%, var(--card-bg)), var(--card-bg) 58%);
}

.templates-banner-icon[b-kie258kab1] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.templates-banner strong[b-kie258kab1] { color: var(--text-primary); }
.templates-banner p[b-kie258kab1] { margin-top: 3px; color: var(--text-muted); }

.template-tag[b-kie258kab1] {
    gap: 6px;
    text-transform: none;
    letter-spacing: .01em;
    background: color-mix(in srgb, var(--color-primary) 10%, var(--card-bg));
    color: var(--color-primary);
}

.template-step-count[b-kie258kab1] {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.template-feature-icon[b-kie258kab1] { color: var(--color-primary); }
.template-category-chip[b-kie258kab1] {
    background: color-mix(in srgb, var(--color-primary) 9%, var(--card-bg));
    color: var(--text-secondary);
    border-color: color-mix(in srgb, var(--color-primary) 17%, var(--card-border));
}

.flow-template-preview[b-kie258kab1] { max-width: 620px; }
.flow-template-preview .modal-header[b-kie258kab1] { align-items: flex-start; }
.flow-template-preview .modal-header > div[b-kie258kab1] { display: grid; gap: 12px; }
.flow-template-preview .modal-title[b-kie258kab1] { font-size: 22px; }
.template-preview-description[b-kie258kab1] { margin: 0; color: var(--text-secondary); line-height: 1.6; }
.template-preview-steps[b-kie258kab1] { display: grid; gap: 10px; }
.template-preview-step[b-kie258kab1] {
    display: grid;
    grid-template-columns: 30px 38px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--card-bg) 90%, var(--color-primary) 10%);
}
.template-preview-step-number[b-kie258kab1] {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
}
.template-preview-step-icon[b-kie258kab1] { color: var(--color-primary); font-size: 18px; text-align: center; }
.template-preview-step strong[b-kie258kab1], .template-preview-step small[b-kie258kab1] { display: block; }
.template-preview-step strong[b-kie258kab1] { color: var(--text-primary); font-size: 14px; }
.template-preview-step small[b-kie258kab1] { margin-top: 3px; color: var(--text-muted); font-size: 12px; }
.template-preview-note[b-kie258kab1] { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.template-preview-note i[b-kie258kab1] { margin-right: 6px; color: var(--color-primary); }
.flow-template-preview .modal-footer[b-kie258kab1] { flex-wrap: wrap; }

@media (max-width: 560px) {
    .templates-banner[b-kie258kab1] { padding: 12px; }
    .templates-toolbar[b-kie258kab1] { align-items: stretch; flex-direction: column; gap: 8px; }
    .templates-filter-select[b-kie258kab1] { width: 100%; min-width: 0; }
    .flow-template-preview .modal-body[b-kie258kab1] { padding: 18px; }
    .flow-template-preview .modal-footer[b-kie258kab1] { padding: 16px 18px; }
    .flow-template-preview .modal-footer .template-btn[b-kie258kab1] { flex: 1 1 100%; }
}

.flows-pagination[b-kie258kab1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1400px;
    margin: 4px auto 24px;
    min-height: 64px;
    padding: 10px 15px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 38%, var(--card-border));
    border-radius: 13px;
    background: var(--card-bg);
}

.pagination-summary[b-kie258kab1] { color: var(--text-muted); font-size: 13px; }
.pagination-summary strong[b-kie258kab1] { color: var(--text-primary); font-weight: 600; }
.pagination-controls[b-kie258kab1] { display: flex; align-items: center; gap: 10px; }
.pagination-page-label[b-kie258kab1] { color: var(--text-secondary); font-size: 13px; white-space: nowrap; }
.pagination-page-label strong[b-kie258kab1] { color: var(--text-primary); font-weight: 600; }
.pagination-button[b-kie258kab1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.pagination-button.pagination-next[b-kie258kab1] { color: var(--text-primary); }
.pagination-button:hover:not(:disabled)[b-kie258kab1] {
    border-color: var(--color-primary-light);
    color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 5%, var(--card-bg));
}
.pagination-button:disabled[b-kie258kab1] { opacity: .48; cursor: not-allowed; }

@media (max-width: 640px) {
    .flows-pagination[b-kie258kab1] { align-items: flex-start; flex-direction: column; }
    .pagination-controls[b-kie258kab1] { width: 100%; justify-content: space-between; gap: 8px; }
    .pagination-button[b-kie258kab1] { padding: 0 10px; }
}
.modal-overlay[b-kie258kab1] {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background: rgba(2, 6, 23, 0.75);
    backdrop-filter: blur(8px);

    overflow-y: auto;
    overflow-x: hidden;

    animation: modalFade-b-kie258kab1 .25s ease;
}

@keyframes modalFade-b-kie258kab1 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-dialog[b-kie258kab1] {
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--modal-bg-top, var(--card-bg));
    border: 1px solid var(--modal-border);
    border-radius: 24px;
    box-shadow:
        0 20px 60px rgba(0,0,0,.45),
        0 0 0 1px rgba(255,255,255,.02);
    pointer-events: auto;
    animation: modalSlide-b-kie258kab1 .25s ease;
}

@keyframes modalSlide-b-kie258kab1 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-kie258kab1] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--modal-border);
    background: rgba(20,184,166,.03);
}

.modal-title[b-kie258kab1] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--modal-text, var(--text-primary));
}

.modal-close-btn[b-kie258kab1] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: .25s ease;
}

.modal-close-btn:hover[b-kie258kab1] {
    background: rgba(20,184,166,.12);
    color: var(--color-primary-light);
}

.modal-body[b-kie258kab1] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(20,184,166,.35) transparent;
}

.modal-body[b-kie258kab1]::-webkit-scrollbar {
    width: 7px;
}

.modal-body[b-kie258kab1]::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body[b-kie258kab1]::-webkit-scrollbar-thumb {
    background: rgba(20,184,166,.35);
    border-radius: 999px;
}

.modal-body[b-kie258kab1]::-webkit-scrollbar-thumb:hover {
    background: rgba(20,184,166,.6);
}

.modal-form-group[b-kie258kab1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modal-label[b-kie258kab1] {
    font-size: 14px;
    font-weight: 600;
    color: var(--modal-text-secondary, var(--text-secondary));
}

.modal-input[b-kie258kab1],
.modal-textarea[b-kie258kab1] {
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--modal-input-border);
    background: var(--modal-input-bg);
    color: var(--modal-text, var(--text-primary));
    padding: 14px 16px;
    font-size: 14px;
    transition: .25s ease;
}

.modal-input[b-kie258kab1]::placeholder,
.modal-textarea[b-kie258kab1]::placeholder {
    color: var(--modal-text-muted, var(--text-muted));
}

.modal-input:focus[b-kie258kab1],
.modal-textarea:focus[b-kie258kab1] {
    outline: none;
    border-color: var(--color-primary-light);
    background: var(--modal-input-bg-focus);
    box-shadow: var(--modal-input-shadow);
}

.modal-textarea[b-kie258kab1] {
    resize: vertical;
    min-height: 120px;
    max-height: 250px;
}

.modal-categories-grid[b-kie258kab1] {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(180px,1fr));
    gap: 12px;
}

.modal-cat-chip[b-kie258kab1] {
    border: 1px solid var(--modal-input-border);
    background: var(--modal-input-bg);
    color: var(--modal-text-secondary, var(--text-secondary));
    border-radius: 14px;
    padding: 12px 14px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: .25s ease;
}

.modal-cat-chip:hover[b-kie258kab1] {
    border-color: var(--color-primary-light);
    background: rgba(20,184,166,.08);
    transform: translateY(-2px);
}

.modal-cat-chip.chip-selected[b-kie258kab1] {
    background: rgba(20,184,166,.15);
    border-color: var(--color-primary-light);
    color: var(--brand-accent);
    box-shadow: 0 0 18px rgba(20,184,166,.18);
}

.modal-cat-chip i[b-kie258kab1] {
    font-size: 15px;
}

.modal-footer[b-kie258kab1] {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--modal-border);
    background: rgba(20,184,166,.03);
}

.modal-btn[b-kie258kab1] {
    min-width: 140px;
    height: 46px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .25s ease;
}

.modal-btn-secondary[b-kie258kab1] {
    border: 1px solid var(--modal-border);
    background: transparent;
    color: var(--modal-text-secondary, var(--text-secondary));
}

.modal-btn-secondary:hover[b-kie258kab1] {
    background: rgba(20,184,166,.08);
    border-color: var(--color-primary-light);
    color: var(--brand-accent);
}

.modal-btn-primary[b-kie258kab1] {
    border: none;
    background: linear-gradient(
        135deg,
        var(--color-primary-light),
        var(--color-primary-dark)
    );
    color: #fff;
    box-shadow: 0 10px 25px rgba(20,184,166,.25);
}

.modal-btn-primary:hover:not(:disabled)[b-kie258kab1] {
    transform: translateY(-2px);
    box-shadow: 0 14px 35px rgba(20,184,166,.35);
}

.modal-btn-primary:disabled[b-kie258kab1] {
    opacity: .5;
    cursor: not-allowed;
}

@media (max-width: 768px) {

    .modal-overlay[b-kie258kab1] {
        padding: 10px;
        align-items: flex-end;
    }

    .modal-dialog[b-kie258kab1] {
        width: 100%;
        max-height: 95vh;
        border-radius: 20px 20px 0 0;
    }

    .modal-header[b-kie258kab1],
    .modal-body[b-kie258kab1],
    .modal-footer[b-kie258kab1] {
        padding: 16px;
    }

    .modal-categories-grid[b-kie258kab1] {
        grid-template-columns: 1fr;
    }

    .modal-footer[b-kie258kab1] {
        flex-direction: column;
    }

    .modal-btn[b-kie258kab1] {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .flows-page[b-kie258kab1] {
        padding: 1rem;
    }

    .flows-header[b-kie258kab1] {
        margin-bottom: 1rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .flows-title[b-kie258kab1] {
        font-size: 24px;
    }

    .card-actions[b-kie258kab1] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .flows-page[b-kie258kab1] {
        height: auto;
        min-height: 100vh;
    }

    .flows-container[b-kie258kab1] {
        height: auto;
    }

    .flows-title[b-kie258kab1] {
        font-size: 20px;
    }

    .flows-subtitle[b-kie258kab1] {
        font-size: 12px;
    }

    .flows-header-actions[b-kie258kab1] {
        width: 100%;
    }

    .flows-btn[b-kie258kab1] {
        flex: 1;
    }

    .flows-grid[b-kie258kab1] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .flow-card[b-kie258kab1] {
        border-radius: 10px;
    }

    .card-title[b-kie258kab1] {
        font-size: 16px;
    }

    .modal-dialog[b-kie258kab1] {
        border-radius: 12px;
    }

    .card-actions[b-kie258kab1] {
        grid-template-columns: repeat(2, 1fr);
    }

    .action-btn[b-kie258kab1] {
        font-size: 11px;
        padding: 6px 10px;
    }

    .action-btn i[b-kie258kab1] {
        font-size: 13px;
    }

    .template-card-actions[b-kie258kab1] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Authorized/WhatsApp/Flows/CreateFlow.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   CreateFlow.razor.css  — macOS-inspired WhatsApp Flow Builder
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────────────────── */

.flow-page[b-tq9m7hhqus] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

/* ── Header bar ─────────────────────────────────────────────────────────── */

.flow-page-header[b-tq9m7hhqus] {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding: 28px;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.flow-tour-btn[b-tq9m7hhqus] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    background: var(--card-bg);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.flow-tour-btn i[b-tq9m7hhqus] {
    color: var(--color-primary);
}

.flow-header-left[b-tq9m7hhqus] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.flow-back-btn[b-tq9m7hhqus] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--glass-bg);
    color: var(--color-primary);
    cursor: pointer;
    transition: background .15s;
}

.flow-back-btn:hover[b-tq9m7hhqus] {
    background: var(--glass-bg-hover);
}

/* CHANGED: var(--brand-dark) (static) -> var(--text-primary) */
.flow-page-title[b-tq9m7hhqus] {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Quicksand', sans-serif;
}

/* REMOVED the old global `span { color: var(--brand-teal); }` rule —
   it was overriding unrelated spans (char counters, badges, hints) across
   the whole component. Replaced with a scoped class below. */
.flow-page-subtitle-label[b-tq9m7hhqus] {
    color: var(--text-secondary);
}

/* CHANGED: #64748b -> var(--text-muted) */
.flow-page-subtitle[b-tq9m7hhqus] {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* ── Body layout ─────────────────────────────────────────────────────────── */

.flow-body[b-tq9m7hhqus] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 20px;
    min-height: 0;
    overflow: hidden;
    max-width: 1400px;
    margin: 0 auto;
}

/* Left column — scrollable form */
.flow-form-col[b-tq9m7hhqus] {
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(20,184,166,0.3) transparent;
    padding-bottom: 20px;
}

.flow-form-col[b-tq9m7hhqus]::-webkit-scrollbar { width: 5px; }
.flow-form-col[b-tq9m7hhqus]::-webkit-scrollbar-thumb { background: rgba(20,184,166,0.3); border-radius: 10px; }

/* Right column — sticky preview */
.flow-preview-col[b-tq9m7hhqus] {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(20,184,166,0.2) transparent;
}

.flow-preview-col[b-tq9m7hhqus]::-webkit-scrollbar { width: 0; }

.flow-preview-sticky[b-tq9m7hhqus] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 20px;
    position: sticky;
    top: 24px;
}

/* ── Form cards ─────────────────────────────────────────────────────────── */

/* CHANGED: rgba(255,255,255,0.0x) -> var(--glass-bg)/var(--glass-border) */
.flow-card[b-tq9m7hhqus] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    backdrop-filter: blur(10px);
}

/* CHANGED: #e2e8f0 -> var(--text-primary) */
.flow-card-header[b-tq9m7hhqus] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 14px;
}

.flow-card-header i[b-tq9m7hhqus] {
    color: var(--color-primary-light);
}

.flow-card-hint[b-tq9m7hhqus] {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: -8px 0 14px;
}

/* ── Form elements ──────────────────────────────────────────────────────── */

.flow-form-group[b-tq9m7hhqus] {
    margin-bottom: 16px;
}

.flow-label[b-tq9m7hhqus] {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-primary-light);
    margin-bottom: 6px;
}

.required-star[b-tq9m7hhqus] { color: #f87171; margin-left: 2px; }

/* CHANGED: #94a3b8 -> var(--text-muted) */
.flow-optional-badge[b-tq9m7hhqus] {
    font-size: 11px;
    background: var(--glass-bg-hover);
    color: var(--text-muted);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 6px;
    font-weight: 400;
}

.flow-input-wrap[b-tq9m7hhqus] {
    position: relative;
}

/* CHANGED: input surface + text -> theme vars */
.flow-input[b-tq9m7hhqus] {
    width: 100%;
    padding: 9px 50px 9px 12px;
    background: var(--glass-bg-hover);
    border: 1px solid var(--glass-border);
    border-radius: 9px;
    color: var(--text-primary);
    font-size: 13.5px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

.flow-input:focus[b-tq9m7hhqus] {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(20,184,166,0.12);
}

/* CHANGED: #475569 -> var(--text-muted) */
.flow-input[b-tq9m7hhqus]::placeholder { color: var(--text-muted); }

.flow-char-counter[b-tq9m7hhqus] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--text-muted);
    pointer-events: none;
    white-space: nowrap;
}

.counter-warn[b-tq9m7hhqus] { color: #f59e0b !important; }

.flow-validation[b-tq9m7hhqus] {
    display: block;
    font-size: 11.5px;
    color: #f87171;
    margin-top: 4px;
}

/* ── Category chips ─────────────────────────────────────────────────────── */

.flow-category-grid[b-tq9m7hhqus] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* CHANGED: #94a3b8 -> var(--text-muted) */
.flow-cat-chip[b-tq9m7hhqus] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 30px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-muted);
    font-size: 12.5px;
    cursor: pointer;
    transition: all .18s;
    user-select: none;
}

.flow-cat-chip:hover[b-tq9m7hhqus] {
    border-color: var(--color-primary-light);
    color: var(--color-primary-light);
}

.chip-selected[b-tq9m7hhqus] {
    background: rgba(20,184,166,0.18) !important;
    border-color: var(--color-primary-light) !important;
    color: var(--color-primary-light) !important;
    font-weight: 600;
}

.chip-check[b-tq9m7hhqus] {
    font-size: 12px;
    color: var(--color-primary-light);
}

/* ── Routing tabs ───────────────────────────────────────────────────────── */

.flow-routing-tabs[b-tq9m7hhqus] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

/* CHANGED: #94a3b8 -> var(--text-muted) */
.flow-route-tab[b-tq9m7hhqus] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-muted);
    text-align: left;
    cursor: pointer;
    transition: all .18s;
}

.flow-route-tab i[b-tq9m7hhqus] {
    font-size: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}

.flow-route-tab div[b-tq9m7hhqus] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.flow-route-tab strong[b-tq9m7hhqus] {
    font-size: 13px;
    color: var(--color-primary-light);
    display: block;
}

/* CHANGED: #475569 -> var(--text-muted) */
.flow-route-tab small[b-tq9m7hhqus] {
    font-size: 11.5px;
    color: var(--text-muted);
}

.flow-route-tab:hover[b-tq9m7hhqus] {
    border-color: var(--color-primary-light);
}

.tab-active[b-tq9m7hhqus] {
    border-color: var(--color-primary-light) !important;
    background: rgba(20,184,166,0.1) !important;
    color: var(--color-primary-light) !important;
}

.tab-active strong[b-tq9m7hhqus] { color: var(--color-primary-light) !important; }
.tab-active small[b-tq9m7hhqus]  { color: var(--text-secondary) !important; }
.tab-active i[b-tq9m7hhqus]      { color: var(--color-primary-light) !important; }

/* Endpoint URL input */
.flow-endpoint-wrap[b-tq9m7hhqus] {
    background: rgba(20,184,166,0.05);
    border: 1px dashed rgba(20,184,166,0.25);
    border-radius: 10px;
    padding: 12px 14px;
    animation: fadeSlideDown-b-tq9m7hhqus .22s ease;
}

@keyframes fadeSlideDown-b-tq9m7hhqus {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.flow-input-icon-wrap[b-tq9m7hhqus] {
    position: relative;
}

/* CHANGED: #475569 -> var(--text-muted) */
.flow-input-icon[b-tq9m7hhqus] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 15px;
    pointer-events: none;
}

.flow-input-indented[b-tq9m7hhqus] { padding-left: 34px !important; }

/* CHANGED: #475569 -> var(--text-muted) */
.flow-hint-text[b-tq9m7hhqus] {
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 6px 0 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.flow-hint-text i[b-tq9m7hhqus] { color: #14B8A6; }

/* ── Starter template cards ─────────────────────────────────────────────── */

.flow-template-grid[b-tq9m7hhqus] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* CHANGED: rgba white overlays -> glass vars */
.flow-template-card[b-tq9m7hhqus] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    border-radius: 11px;
    border: 1.5px solid var(--glass-border);
    background: var(--glass-bg);
    text-align: left;
    cursor: pointer;
    transition: all .18s;
    position: relative;
}

.flow-template-card:hover[b-tq9m7hhqus] {
    border-color: var(--color-primary-light);
    background: rgba(20,184,166,0.08);
}

.tpl-selected[b-tq9m7hhqus] {
    border-color: var(--color-primary-light) !important;
    background: rgba(20,184,166,0.12) !important;
}

.tpl-card-icon[b-tq9m7hhqus] {
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--color-primary-light);
}

.tpl-card-body[b-tq9m7hhqus] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tpl-card-body strong[b-tq9m7hhqus] {
    font-size: 13px;
    color: var(--color-primary-light);
    display: block;
}

/* CHANGED: #64748b -> var(--text-muted) */
.tpl-card-body small[b-tq9m7hhqus] {
    font-size: 11px;
    color: var(--text-muted);
}

/* CHANGED: #94a3b8 -> var(--text-muted) */
.tpl-screen-badge[b-tq9m7hhqus] {
    display: inline-block;
    margin-top: 4px;
    font-size: 10.5px;
    background: var(--glass-bg-hover);
    color: var(--text-muted);
    border-radius: 20px;
    padding: 1px 8px;
}

.tpl-check[b-tq9m7hhqus] {
    position: absolute;
    top: 9px;
    right: 9px;
    color: var(--color-primary-light);
    font-size: 14px;
}

/* ── Advanced options ───────────────────────────────────────────────────── */

.flow-usp-badge[b-tq9m7hhqus] {
    margin-left: auto;
    font-size: 11px;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    color: #fff;
    border-radius: 20px;
    padding: 2px 9px;
    font-weight: 600;
}

.flow-advanced-grid[b-tq9m7hhqus] {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 16px 24px;
    align-items: start;
}

/* Colour picker */
.flow-color-wrap[b-tq9m7hhqus] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.flow-color-picker[b-tq9m7hhqus] {
    width: 44px;
    height: 36px;
    border: none;
    border-radius: 8px;
    padding: 2px;
    cursor: pointer;
    background: transparent;
}

/* CHANGED: #94a3b8 -> var(--text-muted) */
.flow-color-hex[b-tq9m7hhqus] {
    font-size: 12.5px;
    color: var(--text-muted);
    font-family: 'Quicksand', sans-serif;
}

.flow-color-preview[b-tq9m7hhqus] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--glass-border);
    flex-shrink: 0;
}

/* Toggles */
.flow-toggle-row[b-tq9m7hhqus] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.flow-toggle[b-tq9m7hhqus] {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s;
    padding: 0;
}

.toggle-on[b-tq9m7hhqus]  { background: #14B8A6; }
.toggle-off[b-tq9m7hhqus] { background: var(--glass-border); }

.toggle-thumb[b-tq9m7hhqus] {
    position: absolute;
    top: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: left .18s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.toggle-on  .toggle-thumb[b-tq9m7hhqus] { left: 23px; }
.toggle-off .toggle-thumb[b-tq9m7hhqus] { left: 3px; }

/* CHANGED: #94a3b8 -> var(--text-muted) */
.flow-toggle-label[b-tq9m7hhqus] {
    font-size: 12px;
    color: var(--text-muted);
}

/* ── Footer actions ─────────────────────────────────────────────────────── */

.flow-footer-actions[b-tq9m7hhqus] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 4px 0 8px;
}

/* CHANGED: #94a3b8 -> var(--text-muted) */
.flow-btn-discard[b-tq9m7hhqus] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-muted);
    font-size: 13.5px;
    cursor: pointer;
    transition: all .15s;
}

.flow-btn-discard:hover[b-tq9m7hhqus] {
    background: rgba(248,113,113,0.1);
    border-color: #f87171;
    color: #f87171;
}

.flow-btn-secondary[b-tq9m7hhqus] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: 10px;
    border: 1px solid rgba(20,184,166,0.3);
    background: transparent;
    color: #14B8A6;
    font-size: 13.5px;
    cursor: pointer;
    transition: all .15s;
}

.flow-btn-secondary:hover:not(:disabled)[b-tq9m7hhqus] {
    background: rgba(20,184,166,0.12);
    border-color: #14B8A6;
}

.flow-btn-secondary:disabled[b-tq9m7hhqus] {
    opacity: 0.35;
    cursor: not-allowed;
}

.flow-btn-create[b-tq9m7hhqus] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 24px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
}
.flow-btn-create span[b-tq9m7hhqus] {
    color: #fff;
}

.flow-btn-create:hover:not(:disabled)[b-tq9m7hhqus] {
    opacity: 0.88;
    transform: translateY(-1px);
}

.flow-btn-create:disabled[b-tq9m7hhqus] {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   PREVIEW PANEL
   The mock phone preview now follows the app's theme tokens so it can
   adapt cleanly between dark and light mode.
══════════════════════════════════════════════════════════════════════════ */

.flow-preview-header-label[b-tq9m7hhqus] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.flow-complexity-badge[b-tq9m7hhqus] {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    padding: 2px 9px;
}

.complexity-low[b-tq9m7hhqus]    { background: rgba(39,201,63,.15);  color: #27c93f; }
.complexity-medium[b-tq9m7hhqus] { background: rgba(255,189,46,.15); color: #ffbd2e; }
.complexity-high[b-tq9m7hhqus]   { background: rgba(255,95,86,.15);  color: #ff5f56; }

.flow-phone-frame[b-tq9m7hhqus] {
    margin: 0 auto;
    width: 300px;
    background: var(--phone-bezel);
    border-radius: 38px;
    padding: 10px;
    border: 5px solid var(--phone-statusbar-text);
    box-shadow: var(--modal-shadow, 0 20px 60px rgba(0,0,0,0.6)), inset 0 0 0 1px rgba(255,255,255,0.06);
    position: relative;
}

.phone-notch[b-tq9m7hhqus] {
    width: 90px;
    height: 16px;
    background: var(--phone-statusbar-text);
    border-radius: 0 0 16px 16px;
    margin: -10px auto 12px;
    position: relative;
}

.phone-screen[b-tq9m7hhqus] {
    border-radius: 26px;
    overflow: hidden;
    background-image: var(--wa-wallpaper-pattern);
    background-color: var(--color-surface);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    min-height: 440px;
    border: 1px solid rgba(255,255,255,0.08);
}

.phone-home-bar[b-tq9m7hhqus] {
    width: 80px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    margin: 8px auto 0;
}

.wa-header-bar[b-tq9m7hhqus] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--wa-bubble-out-bg);
    padding: 8px 10px;
    flex-shrink: 0;
}

.wa-header-avatar[b-tq9m7hhqus] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
}

.wa-header-info[b-tq9m7hhqus] {
    display: flex;
    flex-direction: column;
}

.wa-header-name[b-tq9m7hhqus] {
    font-size: 13px;
    font-weight: 600;
    color: var(--wa-bubble-out-text);
    line-height: 1.2;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-header-sub[b-tq9m7hhqus] {
    font-size: 10.5px;
    color: rgba(255,255,255,0.72);
}

.wa-chat-area[b-tq9m7hhqus] {
    flex: 0;
    padding: 10px 8px 4px;
    background: transparent;
}

.wa-bubble[b-tq9m7hhqus] {
    background: var(--wa-bubble-in-bg);
    border-radius: 0 12px 12px 12px;
    padding: 10px 10px 0;
    max-width: 86%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

.wa-bubble-title[b-tq9m7hhqus] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--wa-bubble-in-text);
    margin: 0 0 4px;
}

.wa-bubble-text[b-tq9m7hhqus] {
    font-size: 11.5px;
    color: var(--wa-bubble-in-text);
    line-height: 1.4;
    margin: 0 0 8px;
    opacity: 0.85;
}

.wa-bubble-footer[b-tq9m7hhqus] {
    border-top: 1px solid var(--glass-border);
}

.wa-divider[b-tq9m7hhqus] {
    height: 1px;
    background: var(--glass-border);
}

.wa-cta-btn[b-tq9m7hhqus] {
    width: 100%;
    background: transparent;
    border: none;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 0;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--color-primary-light) !important;
}

.wa-flow-screen[b-tq9m7hhqus] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    margin: 4px 0 0;
}

.wa-flow-screen-header[b-tq9m7hhqus] {
    padding: 10px 12px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card-bg);
}

.wa-flow-screen-title[b-tq9m7hhqus] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.wa-flow-back[b-tq9m7hhqus] {
    font-size: 14px;
    color: var(--text-muted);
}

.wa-flow-screen-body[b-tq9m7hhqus] {
    flex: 1;
    padding: 6px 12px 10px;
    overflow: hidden;
    background: var(--card-bg);
}

.wa-flow-desc[b-tq9m7hhqus] {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 0 0 10px;
}

.wa-mock-field[b-tq9m7hhqus] {
    margin-bottom: 8px;
}

.wa-mock-field label[b-tq9m7hhqus] {
    display: block;
    font-size: 10.5px;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.wa-mock-input[b-tq9m7hhqus],
.wa-mock-textarea[b-tq9m7hhqus] {
    background: var(--glass-bg-hover);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.wa-mock-textarea[b-tq9m7hhqus] {
    min-height: 40px;
}

.wa-mock-stars[b-tq9m7hhqus] {
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--text-primary);
}

.wa-flow-screen-footer[b-tq9m7hhqus] {
    padding: 8px 12px 10px;
    border-top: 1px solid var(--glass-border);
    background: var(--card-bg);
}

.wa-flow-complete-btn[b-tq9m7hhqus] {
    width: 100%;
    padding: 9px;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: default;
    opacity: 0.9;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark));
}

/* ── JSON preview ───────────────────────────────────────────────────────── */
/* Kept fixed dark (code-editor style) — common convention regardless of app theme */

.flow-json-preview[b-tq9m7hhqus] {
    background: #0d1117;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
}

.flow-json-header[b-tq9m7hhqus] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: rgba(255,255,255,0.04);
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.flow-json-copy-btn[b-tq9m7hhqus] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: all .15s;
}

.flow-json-copy-btn:hover[b-tq9m7hhqus] {
    background: rgba(20,184,166,0.12);
    border-color: #14B8A6;
    color: #14B8A6;
}

.flow-json-body[b-tq9m7hhqus] {
    margin: 0;
    padding: 12px 14px;
    font-size: 10.5px;
    color: #8be9fd;
    font-family: 'Quicksand', sans-serif;
    white-space: pre;
    overflow-x: auto;
    line-height: 1.5;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(20,184,166,0.2) transparent;
}

/* ── Responsive fallback (narrow screens) ───────────────────────────────── */

@media (max-width: 960px) {
    .flow-body[b-tq9m7hhqus] {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    .flow-preview-col[b-tq9m7hhqus] {
        display: none;
    }

    .flow-template-grid[b-tq9m7hhqus],
    .flow-routing-tabs[b-tq9m7hhqus] {
        grid-template-columns: 1fr;
    }

    .flow-advanced-grid[b-tq9m7hhqus] {
        grid-template-columns: 1fr;
    }
}

/* ── Endpoint Configuration Integration ──────────────────────────────────────────────────────── */

.flow-card[b-tq9m7hhqus] {
    padding: 28px;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    margin-bottom: 20px;
}
/* /Pages/Authorized/WhatsApp/Flows/EditStaticFlow.razor.rz.scp.css */
.sf-page[b-n14f1zexge] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 34px);
    background: var(--page-bg);
}

.sf-toolbar[b-n14f1zexge] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 20px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--card-border);
}

.sf-toolbar-left[b-n14f1zexge] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sf-btn-back[b-n14f1zexge] {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
}

.sf-btn-back:hover[b-n14f1zexge] {
    color: var(--text-primary);
}

.sf-title[b-n14f1zexge] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sf-subtitle[b-n14f1zexge] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.sf-toolbar-right[b-n14f1zexge] {
    display: flex;
    gap: 8px;
}

.sf-btn[b-n14f1zexge] {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 14px;
    background: var(--card-bg);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all .15s ease;
}

.sf-btn:hover:not(:disabled)[b-n14f1zexge] {
    background: var(--color-surface-alt);
}

.sf-btn:disabled[b-n14f1zexge] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sf-btn-save[b-n14f1zexge] {
    border-color: #25D366;
    color: #25D366;
}

.sf-btn-save:hover:not(:disabled)[b-n14f1zexge] {
    background: rgba(37, 211, 102, 0.1);
}

.sf-btn-publish[b-n14f1zexge] {
    background: #128C4A;
    color: #fff;
    border-color: #128C4A;
}

.sf-btn-publish:hover:not(:disabled)[b-n14f1zexge] {
    background: #0f7a40;
}

.sf-error-banner[b-n14f1zexge] {
    background: rgba(239, 68, 68, 0.1);
    border-bottom: 1px solid rgba(239, 68, 68, 0.3);
    padding: 10px 20px;
}

.sf-error-banner-header[b-n14f1zexge] {
    color: #f87171;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sf-error-list[b-n14f1zexge] {
    margin: 6px 0 0;
    padding-left: 20px;
    font-size: 0.8rem;
    color: #f87171;
}

.sf-body[b-n14f1zexge] {
    display: flex;
    flex: 1;
    min-height: 0;
}

.sf-canvas[b-n14f1zexge] {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 24px;
    background: var(--page-bg);
    cursor: grab;
    user-select: none;          /* avoid text-selection while dragging */
    scrollbar-width: none;      /* Firefox */
}

.sf-canvas[b-n14f1zexge]::-webkit-scrollbar {
    display: none;              /* Chrome / Edge / Safari */
}

.sf-canvas.sf-dragging[b-n14f1zexge] {
    cursor: grabbing;
}

.sf-loading[b-n14f1zexge] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.sf-canvas-track[b-n14f1zexge] {
    display: flex;
    gap: 24px;
    height: 100%;
    align-items: center;
    /* justify-content: center; */
}

.sf-phone-node-ghost[b-n14f1zexge] {
    flex: 0 0 auto;
    width: 300px;
    height: 484px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sf-ghost-inner[b-n14f1zexge] {
    width: 100%;
    height: 100%;
    border: 2px dashed var(--border-color);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.85rem;
    transition: border-color .15s, color .15s;
}

.sf-phone-node-ghost:hover .sf-ghost-inner[b-n14f1zexge] {
    border-color: var(--color-primary-light);
    color: var(--color-primary-light);
}

.sf-props-panel[b-n14f1zexge] {
    flex: 0 0 auto;
    width: 350px;
    background: var(--card-bg);
    border-left: 1px solid var(--card-border);
    transition: width 0.2s ease;
    overflow-y: auto;
}

.sf-props-panel.collapsed[b-n14f1zexge] {
    width: 40px;
    overflow: hidden;
}

.sf-props-header[b-n14f1zexge] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--card-border);
}

.sf-props-header h3[b-n14f1zexge] {
    color: var(--text-primary);
}

.sf-props-toggle[b-n14f1zexge] {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.sf-props-toggle:hover[b-n14f1zexge] {
    color: var(--color-primary-light);
}

.sf-props-empty[b-n14f1zexge] {
    padding: 40px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* JSON drawer — kept as a fixed dark code panel by design,
   same convention as your other JSON/code viewers */

.sf-json-backdrop[b-n14f1zexge] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 40;
    height: calc(100vh - 34px);
}

.sf-json-drawer[b-n14f1zexge] {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 420px;
    background: #1e1e2e;
    color: #e2e2e2;
    z-index: 999;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 24px rgba(0,0,0,.4);
}

.sf-json-drawer-header[b-n14f1zexge] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    border-bottom: 1px solid #333;
}

.sf-json-drawer-actions[b-n14f1zexge] {
    display: flex;
    gap: 8px;
}

.sf-btn-copy[b-n14f1zexge] {
    background: #25D366;
    color: #fff;
    border: none;
}

.sf-json-close[b-n14f1zexge] {
    border: none;
    background: transparent;
    color: #e2e2e2;
    cursor: pointer;
}

.sf-json-content[b-n14f1zexge] {
    flex: 1;
    overflow: auto;
    padding: 14px;
    font-size: 0.75rem;
    white-space: pre-wrap;
}

.sf-json-hint[b-n14f1zexge] {
    padding: 0 14px 14px;
    font-size: 0.7rem;
    color: #9ca3af;
}
/* /Pages/Authorized/WhatsApp/Flows/FlowCanvasEditor.razor.rz.scp.css */
.flow-canvas-page[b-wed6vf1yef] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 34px);
    overflow: hidden;
    font-family: 'Quicksand', sans-serif;
    background: var(--page-bg);
}


.canvas-header[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--glass-bg);
    flex-shrink: 0;
    gap: 20px;
}

.canvas-header-left[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.canvas-back-btn[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--glass-bg-hover);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .15s;
}

.canvas-back-btn:hover[b-wed6vf1yef] {
    background: rgba(20,184,166,0.15);
}

.canvas-title[b-wed6vf1yef] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Quicksand', sans-serif;
}

.canvas-subtitle[b-wed6vf1yef] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.canvas-header-actions[b-wed6vf1yef] {
    display: flex;
    gap: 10px;
}

.canvas-btn[b-wed6vf1yef] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.canvas-btn:hover:not(:disabled)[b-wed6vf1yef] {
    background: var(--glass-bg-hover);
    border-color: var(--border-color);
}

.canvas-btn:disabled[b-wed6vf1yef] {
    opacity: 0.35;
    cursor: not-allowed;
}

.canvas-btn-test[b-wed6vf1yef] {
    border-color: rgba(255,189,46,0.3);
    color: #d97706;
}

.canvas-btn-test:hover:not(:disabled)[b-wed6vf1yef] {
    background: rgba(255,189,46,0.1);
}

.canvas-btn-save[b-wed6vf1yef] {
    background: linear-gradient(135deg, #14B8A6, #0D9488);
    border: none;
    color: #fff;
}

.canvas-btn-save:hover:not(:disabled)[b-wed6vf1yef] {
    opacity: 0.88;
}

.canvas-btn-mobile-toggle[b-wed6vf1yef] {
    display: none;
    border: none;
    color: #14B8A6;
}

.canvas-btn-mobile-toggle:hover:not(:disabled)[b-wed6vf1yef] {
    background: rgba(20,184,166,0.15);
}

@media (min-width: 769px) {
    .canvas-btn-mobile-toggle[b-wed6vf1yef] {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .canvas-btn-mobile-toggle[b-wed6vf1yef] {
        display: inline-flex !important;
    }
}

.canvas-body[b-wed6vf1yef] {
    --left-pane-width: 280px;
    --right-pane-width: 360px;
    flex: 1;
    display: grid;
    grid-template-columns: var(--left-pane-width) 8px minmax(360px, 1fr) 8px var(--right-pane-width);
    gap: 0;
    min-width: 0;
    overflow: hidden;
    background: var(--border-color);
}

.canvas-sidebar[b-wed6vf1yef],
.canvas-main[b-wed6vf1yef] {
    min-width: 0;
}

.canvas-pane-resizer[b-wed6vf1yef] {
    position: relative;
    z-index: 10;
    background: var(--border-color);
    cursor: col-resize;
    touch-action: none;
    outline: none;
}

.canvas-pane-resizer[b-wed6vf1yef]::after {
    content: "";
    position: absolute;
    inset: 0 2px;
    background: transparent;
    transition: background .15s ease;
}

.canvas-pane-resizer:hover[b-wed6vf1yef]::after,
.canvas-pane-resizer:focus-visible[b-wed6vf1yef]::after,
.canvas-body.is-resizing .canvas-pane-resizer[b-wed6vf1yef]::after {
    background: var(--color-primary-light, #14b8a6);
}

.canvas-sidebar-right[b-wed6vf1yef] {
    display: flex;
    flex-direction: column;
    background: var(--sidebar-surface-alt);
    border-left: 1px solid var(--border-color);
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.canvas-sidebar-right.collapsed[b-wed6vf1yef] {
    width: 40px;
    position: fixed;
    right: 0;
    top: 60px;
    bottom: 0;
    z-index: 900;
    border-left: 1px solid rgba(20,184,166,0.3);
}

.right-panel-header[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    gap: 8px;
    flex-shrink: 0;
}

.right-panel-tabs[b-wed6vf1yef] {
    display: flex;
    gap: 0;
    flex: 1;
}

.tab-btn[b-wed6vf1yef] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.tab-btn:hover[b-wed6vf1yef] {
    color: var(--text-secondary);
}

.tab-btn.active[b-wed6vf1yef] {
    color: #14B8A6;
    border-bottom-color: #14B8A6;
}

.right-panel-collapse-btn[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: none;
    background: var(--glass-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}

.right-panel-collapse-btn:hover[b-wed6vf1yef] {
    background: var(--glass-bg-hover);
    color: var(--text-secondary);
}

.right-panel-content[b-wed6vf1yef] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.right-panel-content.json-content[b-wed6vf1yef] {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.json-header[b-wed6vf1yef] {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: #0f1419;
    flex-shrink: 0;
}

.json-body[b-wed6vf1yef] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    color: #a1a1a1;
    background: #0d1117;
    font-family: 'Quicksand', sans-serif;
}

.mobile-preview-frame[b-wed6vf1yef] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.mobile-preview-screen[b-wed6vf1yef] {
    width: 280px;
    height: 420px;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mobile-preview-body[b-wed6vf1yef] {
    flex: 1;
    height: calc(100% - 62px); 

    overflow: hidden;
    overflow-x: hidden;

    padding: 14px;

    background-image: url('/images/wallpaper-whatsapp.jpg');
    background-size: cover;
    background-position: center;

    display: flex;
    flex-direction: column;
    gap: 10px;

    scrollbar-width: thin;
}

.wap-messages[b-wed6vf1yef] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
}

.wap-messages[b-wed6vf1yef]::-webkit-scrollbar {
    width: 6px;
}

.wap-messages[b-wed6vf1yef]::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-preview-body[b-wed6vf1yef]::-webkit-scrollbar {
    width: 6px;
}

.mobile-preview-body[b-wed6vf1yef]::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-preview-body[b-wed6vf1yef]::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.2);
    border-radius: 999px;
}

.mobile-preview-body[b-wed6vf1yef]::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.35);
}

.mobile-preview-body h4[b-wed6vf1yef] {
    display: inline-block;
    max-width: 85%;

    margin: 0;
    padding: 10px 12px;

    background: #ffffff;
    color: #111b21;

    border-radius: 12px;
    border-top-left-radius: 4px;

    font-size: 15px;
    font-weight: 600;
}

.mobile-preview-body > p[b-wed6vf1yef] {
    display: inline-block;
    max-width: 85%;

    margin: 0;

    background: #ffffff;
    color: #111b21;

    padding: 10px 12px;

    border-radius: 12px;
    border-top-left-radius: 4px;

    font-size: 13px;
}

.preview-block[b-wed6vf1yef] {
    max-width: 85%;
    background: #ffffff;

    padding: 10px 12px;

    border-radius: 12px;
    border-top-left-radius: 4px;

    color: #111b21;

    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.preview-block h5[b-wed6vf1yef] {
    margin: 0;
    font-size: 14px;
}

.preview-block p[b-wed6vf1yef] {
    margin: 0;
    font-size: 13px;
}

.preview-block img[b-wed6vf1yef] {
    width: 100%;
    max-width: 240px;
    border-radius: 10px;
    display: block;
}

.preview-input[b-wed6vf1yef],
.preview-textarea[b-wed6vf1yef] {
    width: 100%;
    background: #f8fafc;
    border: 1px solid #dbe3ea;
    border-radius: 8px;
    padding: 10px;
    color: #111827;
}

.preview-textarea[b-wed6vf1yef] {
    min-height: 80px;
}

.preview-options[b-wed6vf1yef] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.preview-option[b-wed6vf1yef] {
    padding: 8px 10px;
    background: #f0f2f5;
    border-radius: 8px;
}

.preview-cta[b-wed6vf1yef] {
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 10px;
    background: #00a884;
    color: #fff;
    font-weight: 600;
}

.mobile-preview-controls[b-wed6vf1yef] {
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 360px;
}

.mobile-preview-controls .canvas-btn[b-wed6vf1yef] {
    min-width: 110px;
}

/* Mobile */
@media (max-width: 768px) {

    .mobile-preview-screen[b-wed6vf1yef] {
        width: 100%;
        max-width: 360px;
        height: 650px;
    }

    .mobile-preview-controls[b-wed6vf1yef] {
        width: 100%;
    }
}

@media (max-width: 1200px) {
    .canvas-body[b-wed6vf1yef] {
        --left-pane-width: 240px;
        --right-pane-width: 280px;
    }
}

@media (max-width: 768px) {
    .flow-canvas-page[b-wed6vf1yef] {
        height: 100vh;
        overflow: hidden;
    }

    .canvas-body[b-wed6vf1yef] {
        grid-template-columns: 1fr;
        position: relative;
    }

    .canvas-sidebar-left[b-wed6vf1yef] {
        position: fixed;
        left: 0;
        top: 60px;
        bottom: 0;
        z-index: 999;
        width: 80vw;
        max-width: 280px;
        transform: translateX(-100%);
        transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
        border-right: 1px solid rgba(20,184,166,0.3);
        box-shadow: 2px 0 16px rgba(0,0,0,0.4);
        background: var(--sidebar-surface-alt);
        backdrop-filter: blur(10px);
        overflow-y: auto;
    }

    .canvas-sidebar-left.open[b-wed6vf1yef] {
        transform: translateX(0);
    }

    .canvas-sidebar-right[b-wed6vf1yef] {
        position: fixed;
        right: 0;
        top: 60px;
        bottom: 0;
        z-index: 999;
        width: 80vw;
        max-width: 360px;
        transform: translateX(100%);
        transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
        border-left: 1px solid rgba(20,184,166,0.3);
        box-shadow: -2px 0 16px rgba(0,0,0,0.4);
        background: var(--sidebar-surface-alt);
        backdrop-filter: blur(10px);
        overflow-y: auto;
    }

    .canvas-sidebar-right:not(.collapsed)[b-wed6vf1yef] {
        transform: translateX(0);
    }

    .canvas-sidebar-right.collapsed[b-wed6vf1yef] {
        width: 40px;
        position: fixed;
        right: 0;
        top: 60px;
        bottom: 0;
        z-index: 900;
        transform: translateX(0);
        background: var(--sidebar-surface-alt);
    }

    .canvas-main[b-wed6vf1yef] {
        width: 100%;
        overflow: auto;
    }

    .canvas-btn[b-wed6vf1yef] {
        padding: 7px 14px;
        font-size: 12px;
    }

    .canvas-title[b-wed6vf1yef] {
        font-size: 16px;
    }

    .canvas-header[b-wed6vf1yef] {
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 8px;
    }

    .canvas-header-left[b-wed6vf1yef] {
        width: 100%;
    }

    .canvas-header-actions[b-wed6vf1yef] {
        width: 100%;
        justify-content: flex-end;
        gap: 6px;
    }

    .screen-item[b-wed6vf1yef] {
        margin-bottom: 12px;
    }

    .block-item[b-wed6vf1yef] {
        padding: 8px 10px;
        font-size: 12px;
    }

    .right-panel-tabs[b-wed6vf1yef] {
        display: none;
    }

    .right-panel-collapse-btn[b-wed6vf1yef] {
        display: flex;
    }
}

.canvas-sidebar[b-wed6vf1yef] {
    background: var(--page-bg);
    border-right: 1px solid var(--border-color);
    padding: 16px 12px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(20,184,166,0.2) transparent;
}

.canvas-sidebar[b-wed6vf1yef]::-webkit-scrollbar { width: 5px; }
.canvas-sidebar[b-wed6vf1yef]::-webkit-scrollbar-thumb { background: rgba(20,184,166,0.2); border-radius: 10px; }

.canvas-sidebar-left[b-wed6vf1yef] { border-left: none; }
.canvas-sidebar-right[b-wed6vf1yef] { border-right: none; border-left: 1px solid var(--border-color); }

.sidebar-header[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-header h3[b-wed6vf1yef] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.sidebar-header i[b-wed6vf1yef] { color: #14B8A6; }

.sidebar-close-btn[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s;
}

.sidebar-close-btn:hover[b-wed6vf1yef] { color: var(--text-secondary); }

.sidebar-empty-state[b-wed6vf1yef] {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.empty-icon i[b-wed6vf1yef] {
    font-size: 48px;
    margin-bottom: 12px;
    color: var(--text-primary);
}


.block-library[b-wed6vf1yef] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.block-lib-item[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 9px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    cursor: grab;
    transition: all .15s;
    user-select: none;
}

.block-lib-item:hover[b-wed6vf1yef] {
    border-color: var(--color-primary-light, #14B8A6);
    background: rgba(20,184,166,0.08);
}

.block-lib-item:active[b-wed6vf1yef] {
    cursor: grabbing;
    opacity: 0.7;
}

.block-lib-icon[b-wed6vf1yef] {
    font-size: 18px;
    flex-shrink: 0;
}

.block-lib-info[b-wed6vf1yef] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.block-lib-info strong[b-wed6vf1yef] {
    font-size: 12px;
    color: var(--text-primary);
    display: block;
}

.block-lib-info small[b-wed6vf1yef] {
    font-size: 10.5px;
    color: var(--text-muted);
}

.canvas-main[b-wed6vf1yef] {
    flex: 1;
    overflow: hidden;
    background: var(--page-bg);
    display: flex;
    flex-direction: column;
    /* padding-bottom: 65px; */
}

.canvas-container[b-wed6vf1yef] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(20,184,166,0.2) transparent;
}

.canvas-container[b-wed6vf1yef]::-webkit-scrollbar { width: 6px; }
.canvas-container[b-wed6vf1yef]::-webkit-scrollbar-thumb { background: rgba(20,184,166,0.2); border-radius: 10px; }

.canvas-error-banner[b-wed6vf1yef] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    color: #dc2626;
}

.error-banner-header[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 14px;
}

.error-banner-header i[b-wed6vf1yef] {
    font-size: 16px;
}

.error-banner-content p[b-wed6vf1yef] {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: rgba(220, 38, 38, 0.8);
}

.error-list[b-wed6vf1yef] {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
}

.error-list li[b-wed6vf1yef] {
    font-size: 13px;
    color: #dc2626;
    margin-bottom: 6px;
}

.error-list li:last-child[b-wed6vf1yef] {
    margin-bottom: 0;
}

.canvas-empty-state[b-wed6vf1yef] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--text-muted);
}

.canvas-empty-state .empty-icon[b-wed6vf1yef] {
    font-size: 64px;
    margin-bottom: 16px;
}

.canvas-empty-state h3[b-wed6vf1yef] {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
}

.canvas-empty-state p[b-wed6vf1yef] {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--text-muted);
    max-width: 300px;
}

.canvas-btn-primary[b-wed6vf1yef] {
    background: linear-gradient(135deg, #14B8A6, #0D9488);
    border: none;
    color: #fff;
}

.canvas-btn-primary:hover:not(:disabled)[b-wed6vf1yef] {
    opacity: 0.88;
}

.screens-stack[b-wed6vf1yef] {
    display: flex;
    flex-direction: column;
    gap: var(--screen-gap);
}

.screen-item[b-wed6vf1yef] {
    border-radius: 12px;
    border: 2px solid var(--glass-border);
    background: var(--glass-bg-hover);
    overflow: hidden;
    transition: all .2s;
    cursor: pointer;
    margin-bottom: 20px;
}

.screen-item:hover[b-wed6vf1yef] {
    border-color: rgba(20,184,166,0.3);
    background: rgba(20,184,166,0.06);
}

.screen-selected[b-wed6vf1yef] {
    border-color: var(--color-primary-light, #14B8A6) !important;
    background: rgba(20,184,166,0.12) !important;
    box-shadow: 0 0 0 3px rgba(20,184,166,0.1);
}

.screen-header[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--glass-bg-hover);
    border-bottom: 1px solid var(--border-color);
}

.screen-header-left[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.screen-badge[b-wed6vf1yef] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #14B8A6, #0D9488);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.screen-titles[b-wed6vf1yef] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.screen-name[b-wed6vf1yef] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.screen-desc[b-wed6vf1yef] {
    margin: 0;
    font-size: 11.5px;
    color: var(--text-muted);
}

.screen-header-right[b-wed6vf1yef] {
    display: flex;
    gap: 8px;
}

.screen-badge-badge[b-wed6vf1yef] {
    font-size: 10px;
    font-weight: 700;
    border-radius: 20px;
    padding: 2px 8px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.badge-start[b-wed6vf1yef] {
    background: rgba(39,201,63,0.2);
    color: #16a34a;
}

.badge-end[b-wed6vf1yef] {
    background: rgba(255,95,86,0.2);
    color: #dc2626;
}

.screen-blocks-area[b-wed6vf1yef] {
    padding: 16px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    gap: var(--block-gap);
    background: var(--glass-bg);
    border-radius: 8px;
    border: 2px dashed transparent;
    transition: all .2s;
}

.screen-blocks-area:hover[b-wed6vf1yef] {
    border-color: rgba(20,184,166,0.3);
    background: rgba(20,184,166,0.05);
}

.screen-blocks-area.dragover[b-wed6vf1yef] {
    border-color: #14B8A6;
    background: rgba(20,184,166,0.15);
    box-shadow: inset 0 0 8px rgba(20,184,166,0.2);
}

.screen-blocks-empty[b-wed6vf1yef] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    gap: 6px;
}

.block-item[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-hover);
    cursor: grab;
    transition: all .15s;
}

.block-item:hover[b-wed6vf1yef] {
    border-color: var(--border-color);
    background: var(--glass-bg-hover);
    filter: brightness(1.1);
}

.block-item:active[b-wed6vf1yef] {
    cursor: grabbing;
}

.block-selected[b-wed6vf1yef] {
    border-color: var(--color-primary-light, #14B8A6) !important;
    background: rgba(20,184,166,0.15) !important;
}

.block-drag-handle[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    cursor: grab;
    flex-shrink: 0;
}

.block-drag-handle:active[b-wed6vf1yef] {
    cursor: grabbing;
}

.block-content[b-wed6vf1yef] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.block-type-badge[b-wed6vf1yef] {
    font-size: 10px;
    background: rgba(20,184,166,0.2);
    color: #0f766e;
    border-radius: 4px;
    padding: 2px 6px;
    font-weight: 600;
    text-transform: capitalize;
    flex-shrink: 0;
    letter-spacing: .02em;
}

.block-label[b-wed6vf1yef] {
    font-size: 12.5px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.block-required[b-wed6vf1yef] {
    color: #dc2626;
    font-weight: 700;
}

.block-delete-btn[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}

.block-delete-btn:hover[b-wed6vf1yef] {
    color: #f87171;
    background: rgba(248,113,113,0.1);
    border-radius: 4px;
}

.block-children-tree[b-wed6vf1yef] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: -4px 0 12px 20px;
    padding: 10px 10px 10px 16px;
    border-left: 2px dashed rgba(20,184,166,0.35);
    cursor: default;
}

.block-branch[b-wed6vf1yef] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.block-branch-label[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.block-branch-true .block-branch-label[b-wed6vf1yef] {
    color: #059669;
}

.block-branch-false .block-branch-label[b-wed6vf1yef] {
    color: #dc2626;
}

.block-branch-case .block-branch-label[b-wed6vf1yef] {
    color: #2563eb;
}

.block-branch-empty[b-wed6vf1yef] {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    padding: 6px 10px;
    border: 1px dashed var(--glass-border);
    border-radius: 6px;
}

.block-item-nested[b-wed6vf1yef] {
    margin-bottom: 0;
    margin-left: 6px;
    padding: 8px 10px;
    background: var(--glass-bg);
    cursor: pointer;
}

.block-item-nested:hover[b-wed6vf1yef] {
    background: var(--glass-bg-hover);
}

.prop-block-breadcrumb[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 4px;
}

.screen-footer[b-wed6vf1yef] {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    background: var(--glass-bg);
    border-top: 1px solid var(--border-color);
}

.screen-action-btn[b-wed6vf1yef] {
    flex: 1;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.screen-action-btn:hover[b-wed6vf1yef] {
    border-color: var(--border-color);
    background: var(--glass-bg-hover);
    color: var(--text-secondary);
}

.screen-action-delete:hover[b-wed6vf1yef] {
    border-color: rgba(248,113,113,0.3);
    background: rgba(248,113,113,0.1);
    color: #dc2626;
}

.screen-connector[b-wed6vf1yef] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    margin: 0;
}

.connector-line[b-wed6vf1yef] {
    font-size: 14px;
    color: rgba(20,184,166,0.4);
    animation: pulse-b-wed6vf1yef 1.5s infinite linear;
    animation-fill-mode: both;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: opacity;
}

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

.add-screen-cta[b-wed6vf1yef] {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.canvas-btn-secondary[b-wed6vf1yef] {
    border-color: rgba(20,184,166,0.3);
    color: #0f766e;
}

.canvas-btn-secondary:hover:not(:disabled)[b-wed6vf1yef] {
    background: rgba(20,184,166,0.1);
    border-color: var(--color-primary-light, #14B8A6);
}

.properties-section[b-wed6vf1yef] {
    margin-bottom: 16px;
}

.content-field-header[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.content-field-label[b-wed6vf1yef] {
    margin: 0;
}

.prop-label[b-wed6vf1yef] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.prop-input[b-wed6vf1yef],
.prop-textarea[b-wed6vf1yef],
.prop-select[b-wed6vf1yef] {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-hover);
    color: var(--text-primary);
    font-size: 12px;
    outline: none;
    transition: border-color .15s, background .15s;
    box-sizing: border-box;
}

.prop-input:focus[b-wed6vf1yef],
.prop-textarea:focus[b-wed6vf1yef],
.prop-select:focus[b-wed6vf1yef] {
    border-color: var(--color-primary-light, #14B8A6);
    background: rgba(20,184,166,0.08);
}

.prop-select option[b-wed6vf1yef] {
    color: var(--text-primary);
    background: var(--card-bg);
}

.prop-textarea[b-wed6vf1yef] {
    resize: vertical;
    min-height: 80px;
    font-family: 'Quicksand', sans-serif;
}

.prop-color-wrap[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-hover);
    min-height: 42px;
    box-sizing: border-box;
}

.prop-color-picker[b-wed6vf1yef] {
    width: 42px;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    background: #ffffff;
    overflow: hidden;
    flex-shrink: 0;
}

.prop-color-picker[b-wed6vf1yef]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.prop-color-picker[b-wed6vf1yef]::-webkit-color-swatch {
    border: none;
    border-radius: 5px;
}

.prop-color-picker[b-wed6vf1yef]::-moz-color-swatch {
    border: none;
    border-radius: 5px;
}

.prop-color-picker:focus-visible[b-wed6vf1yef] {
    outline: 2px solid var(--color-primary-light, #14B8A6);
    outline-offset: 2px;
}

.prop-color-hex[b-wed6vf1yef] {
    flex: 1;
    font-size: 12px;
    color: var(--text-primary);
    font-family: 'Quicksand', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.prop-checkbox[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.prop-checkbox input[b-wed6vf1yef] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary-light, #14B8A6);
}

.properties-divider[b-wed6vf1yef] {
    height: 1px;
    background: var(--border-color);
    margin: 14px 0;
}

.prop-block-title[b-wed6vf1yef] {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.prop-block-type[b-wed6vf1yef] {
    display: inline-block;
    font-size: 10px;
    background: rgba(20,184,166,0.2);
    color: #0f766e;
    border-radius: 4px;
    padding: 2px 6px;
    font-weight: 700;
    text-transform: capitalize;
}

@media (max-width: 960px) {
    .canvas-body[b-wed6vf1yef] {
        grid-template-columns: 1fr;
    }

    .canvas-sidebar-left[b-wed6vf1yef],
    .canvas-sidebar-right[b-wed6vf1yef] {
        display: none;
    }

    .canvas-footer[b-wed6vf1yef] {
        height: 200px;
    }
}

.prop-hint[b-wed6vf1yef] {
    display: block;
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 4px;
}

.prop-subheading[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 8px;
}

/* Switch Block Editor */

.switch-case-section[b-wed6vf1yef] {
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    background: var(--glass-bg);
}

.switch-case-header[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.switch-case-header .prop-input[b-wed6vf1yef] {
    flex: 1;
    margin-bottom: 0;
}

.switch-case-header strong[b-wed6vf1yef] {
    color: var(--text-secondary);
    font-size: 12px;
}

.switch-case-delete-btn[b-wed6vf1yef] {
    background: transparent;
    border: none;
    color: #dc2626;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    line-height: 1;
}

.switch-case-delete-btn:hover[b-wed6vf1yef] {
    color: #ef4444;
}

/* Nested Block Editor */

.nested-block-list[b-wed6vf1yef] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nested-block-card[b-wed6vf1yef] {
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 12px;
    background: var(--glass-bg);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nested-block-card-header[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.nested-block-card .properties-section[b-wed6vf1yef] {
    margin-bottom: 8px;
}

.nested-block-card .properties-section:last-of-type[b-wed6vf1yef] {
    margin-bottom: 0;
}

.nested-block-add-select option[b-wed6vf1yef] {
    color: var(--text-primary);
}

.nested-block-add-select[b-wed6vf1yef] {
    margin-top: 4px;
    width: 100%;
}

/* Variables Tab */

.variables-content[b-wed6vf1yef] {
    padding: 16px;
    overflow-y: auto;
}

.variables-screen-group[b-wed6vf1yef] {
    margin-bottom: 18px;
}

.variables-screen-title[b-wed6vf1yef] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.variable-chip-row[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--glass-bg);
    margin-bottom: 6px;
}

.variable-ref-code[b-wed6vf1yef] {
    font-size: 11.5px;
    color: #0f766e;
    background: rgba(20,184,166,0.12);
    padding: 2px 6px;
    border-radius: 4px;
    word-break: break-all;
}

/* ─── Mapping Tab Styles ─────────────────────────────────────────────── */

.mapping-tab[b-wed6vf1yef] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    background: var(--glass-bg);
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.mapping-tab:hover[b-wed6vf1yef] {
    background: var(--glass-bg-hover);
    color: var(--text-primary);
}

.mapping-tab-active[b-wed6vf1yef] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #14b8a6;
    background: rgba(20,184,166,0.15);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    transition: all .15s;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

@media (min-width: 961px) {
    .canvas-body.right-panel-collapsed[b-wed6vf1yef] {
        --right-pane-width: 0px;
    }

    .canvas-body.right-panel-collapsed .canvas-pane-resizer-right[b-wed6vf1yef] {
        display: none;
    }
}

@media (max-width: 960px) {
    .canvas-btn-mobile-toggle[b-wed6vf1yef] {
        display: inline-flex !important;
    }

    .canvas-body[b-wed6vf1yef] {
        display: block;
        position: relative;
        background: var(--page-bg);
    }

    .canvas-pane-resizer[b-wed6vf1yef] {
        display: none;
    }

    .canvas-sidebar-left[b-wed6vf1yef],
    .canvas-sidebar-right[b-wed6vf1yef] {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 94px;
        bottom: 0;
        z-index: 999;
        width: min(88vw, 380px);
        max-width: none;
        background: var(--sidebar-surface-alt);
        backdrop-filter: blur(12px);
        overflow-y: auto;
        transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    }

    .canvas-sidebar-left[b-wed6vf1yef] {
        left: 0;
        transform: translateX(-100%);
        border-right: 1px solid rgba(20,184,166,.3);
        box-shadow: 2px 0 16px rgba(0,0,0,.35);
    }

    .canvas-sidebar-left.open[b-wed6vf1yef] {
        transform: translateX(0);
    }

    .canvas-sidebar-right[b-wed6vf1yef] {
        right: 0;
        transform: translateX(100%);
        border-left: 1px solid rgba(20,184,166,.3);
        box-shadow: -2px 0 16px rgba(0,0,0,.35);
    }

    .canvas-sidebar-right:not(.collapsed)[b-wed6vf1yef] {
        transform: translateX(0);
    }

    .canvas-sidebar-right.collapsed[b-wed6vf1yef] {
        width: 40px;
        transform: translateX(0);
        box-shadow: -2px 0 16px rgba(0,0,0,.2);
    }

    .canvas-main[b-wed6vf1yef] {
        min-width: 0;
        width: 100%;
        /* padding-bottom: 72px; */
    }
}

@media (max-width: 600px) {
    .canvas-header[b-wed6vf1yef] {
        padding: 10px 12px;
        gap: 8px;
    }

    .canvas-header-left[b-wed6vf1yef] {
        min-width: 0;
        gap: 8px;
    }

    .canvas-title[b-wed6vf1yef] {
        font-size: 16px;
    }

    .canvas-subtitle[b-wed6vf1yef] {
        display: none;
    }

    .canvas-header-actions[b-wed6vf1yef] {
        gap: 2px;
    }

    .canvas-btn[b-wed6vf1yef] {
        min-width: 36px;
        padding: 8px;
        justify-content: center;
    }

    .canvas-btn-test[b-wed6vf1yef],
    .canvas-btn-save[b-wed6vf1yef],
    .canvas-btn-publish[b-wed6vf1yef] {
        font-size: 0;
    }

    .canvas-btn-test i[b-wed6vf1yef],
    .canvas-btn-save i[b-wed6vf1yef],
    .canvas-btn-publish i[b-wed6vf1yef] {
        font-size: 14px;
    }

    .canvas-container[b-wed6vf1yef] {
        padding: 12px;
    }
}

/* Compact canvas panels: overlay the canvas body, retain all tabs, and keep
   the active panel content independently scrollable. */
.canvas-panel-backdrop[b-wed6vf1yef],
.right-panel-close-btn[b-wed6vf1yef],
.sidebar-mobile-close-btn[b-wed6vf1yef] {
    display: none;
}

@media (max-width: 960px) {
    .flow-canvas-page[b-wed6vf1yef] {
        height: calc(100dvh - 34px);
    }

    .canvas-body[b-wed6vf1yef] {
        position: relative;
        isolation: isolate;
    }

    .canvas-panel-backdrop[b-wed6vf1yef] {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1000;
        border: 0;
        padding: 0;
        background: rgba(5, 10, 18, .42);
        cursor: pointer;
    }

    .canvas-sidebar-left[b-wed6vf1yef],
    .canvas-sidebar-right[b-wed6vf1yef],
    .canvas-sidebar-right.collapsed[b-wed6vf1yef] {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 1001;
        width: min(90vw, 420px);
        max-width: none;
        box-sizing: border-box;
    }

    .canvas-sidebar-left[b-wed6vf1yef] {
        left: 0;
        transform: translateX(calc(-100% - 12px));
        pointer-events: none;
    }

    .canvas-sidebar-left.open[b-wed6vf1yef] {
        transform: translateX(0);
        pointer-events: auto;
    }

    .canvas-sidebar-right[b-wed6vf1yef],
    .canvas-sidebar-right.collapsed[b-wed6vf1yef] {
        right: 0;
        padding: 0;
        overflow: hidden;
        transform: translateX(calc(100% + 12px));
        pointer-events: none;
        box-shadow: -8px 0 24px rgba(0, 0, 0, .28);
    }

    .canvas-sidebar-right:not(.collapsed)[b-wed6vf1yef] {
        transform: translateX(0);
        pointer-events: auto;
    }

    .canvas-main[b-wed6vf1yef] {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        padding-bottom: 0;
    }

    .canvas-container[b-wed6vf1yef] {
        min-height: 0;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        overscroll-behavior: contain;
    }

    .sidebar-mobile-close-btn[b-wed6vf1yef] {
        display: inline-flex;
        width: 36px;
        height: 36px;
        border: 1px solid var(--glass-border);
        border-radius: 8px;
        background: var(--glass-bg);
    }

    .right-panel-header[b-wed6vf1yef] {
        min-width: 0;
        padding: 0;
        gap: 0;
        align-items: stretch;
    }

    .right-panel-tabs[b-wed6vf1yef] {
        display: flex !important;
        flex: 1 1 auto;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scroll-snap-type: x proximity;
    }

    .right-panel-tabs[b-wed6vf1yef]::-webkit-scrollbar {
        height: 3px;
    }

    .right-panel-tabs[b-wed6vf1yef]::-webkit-scrollbar-thumb {
        background: rgba(20, 184, 166, .35);
        border-radius: 999px;
    }

    .right-panel-tabs .tab-btn[b-wed6vf1yef] {
        flex: 0 0 auto;
        min-height: 48px;
        padding: 0 13px;
        scroll-snap-align: start;
    }

    .right-panel-close-btn[b-wed6vf1yef] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        flex: 0 0 auto;
        min-height: 48px;
        padding: 0 12px;
        border: 0;
        border-left: 1px solid var(--border-color);
        background: var(--sidebar-surface-alt);
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }

    .right-panel-close-btn:hover[b-wed6vf1yef],
    .right-panel-close-btn:focus-visible[b-wed6vf1yef] {
        color: #14b8a6;
        background: var(--glass-bg-hover);
        outline: none;
    }

    .right-panel-content[b-wed6vf1yef] {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 420px) {
    .right-panel-close-btn span[b-wed6vf1yef] {
        display: none;
    }

    .right-panel-close-btn[b-wed6vf1yef] {
        width: 48px;
        padding: 0;
    }

    .right-panel-tabs .tab-btn[b-wed6vf1yef] {
        padding: 0 11px;
    }
}

/* ──── Global Variables Styles ────────────────────────────────────── */

.variables-section[b-wed6vf1yef] {
    margin-bottom: 20px;
}

.variables-section-title[b-wed6vf1yef] {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.global-variables-list[b-wed6vf1yef] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.global-variable-item[b-wed6vf1yef] {
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
}

.gvar-header[b-wed6vf1yef] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.gvar-key[b-wed6vf1yef] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(20,184,166,0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.gvar-type-badge[b-wed6vf1yef] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(99,102,241,0.15);
    color: #4f46e5;
    text-transform: uppercase;
}

.gvar-source-badge[b-wed6vf1yef] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}

.gvar-source-badge.source-input[b-wed6vf1yef] {
    background: rgba(34,197,94,0.15);
    color: #22c55e;
}

.gvar-source-badge.source-api[b-wed6vf1yef] {
    background: rgba(168,85,247,0.15);
    color: #a855f7;
}

.gvar-source-badge.source-system[b-wed6vf1yef] {
    background: rgba(229,231,235,0.15);
    color: #6b7280;
}

.gvar-meta[b-wed6vf1yef] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gvar-meta small[b-wed6vf1yef] {
    font-size: 11px;
    color: var(--text-muted);
}

.gvar-meta code[b-wed6vf1yef] {
    font-size: 10px;
    color: #0f766e;
    background: rgba(20,184,166,0.1);
    padding: 1px 4px;
    border-radius: 3px;
    word-break: break-all;
}
/* /Pages/Authorized/WhatsApp/Send/SendMessage.razor.rz.scp.css */
.send-page[b-3iul3ar0l1] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

.page-header[b-3iul3ar0l1] {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding: 28px;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.page-header h1[b-3iul3ar0l1] {
    margin: 0 0 6px 0;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.page-subtitle[b-3iul3ar0l1] {
    margin: 0;
    font-size: 15px;
    color: var(--text-muted);
}

.templates-tour-button[b-3iul3ar0l1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 15px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    background: var(--card-bg);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.templates-tour-button:hover[b-3iul3ar0l1] {
    border-color: var(--color-primary);
    background: var(--input-background-focus);
}

.templates-tour-button i[b-3iul3ar0l1] {
    color: var(--color-primary);
}

.tab-bar[b-3iul3ar0l1] {
    display: flex;
    /* max-width: 1400px; */
    margin: 0 auto;
    gap: 4px;
    background: var(--glass-bg);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 24px;
    width: fit-content;
    border: 1px solid var(--border-color);
}

.tab-btn[b-3iul3ar0l1] {
    padding: 8px 20px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-btn:hover[b-3iul3ar0l1] {
    color: var(--text-primary);
    background: var(--hover-overlay);
}

.tab-btn:hover .tab-icon[b-3iul3ar0l1] {
    color: var(--color-primary);
    transform: translateY(-1px);
}

.tab-active[b-3iul3ar0l1] {
    background: var(--card-bg) !important;
    color: var(--color-primary) !important;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--card-border);
}

.tab-icon[b-3iul3ar0l1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-muted);
    transition: color 0.2s ease, transform 0.2s ease;
}

.tab-active .tab-icon[b-3iul3ar0l1] {
    color: var(--color-primary);
}

.send-content[b-3iul3ar0l1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
}

.config-column[b-3iul3ar0l1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 65px;
    min-width: 0;
}

.form-card[b-3iul3ar0l1] {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
}

.section-title[b-3iul3ar0l1] {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.1px;
}

.carousel-inputs[b-3iul3ar0l1] {
    min-width: 0;
}

.carousel-card[b-3iul3ar0l1] {
    padding: 16px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--input-background);
}

.carousel-card + .carousel-card[b-3iul3ar0l1] {
    margin-top: 12px;
}

.carousel-card-title[b-3iul3ar0l1] {
    margin: 0 0 14px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}

.form-group[b-3iul3ar0l1] {
    margin-bottom: 14px;
}

.form-row[b-3iul3ar0l1] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.location-picker[b-3iul3ar0l1] {
    min-width: 0;
}

.location-picker .location-search-row[b-3iul3ar0l1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 10px;
}

.location-picker .location-search-container[b-3iul3ar0l1] {
    min-width: 0;
}

.location-picker .location-current-btn[b-3iul3ar0l1] {
    min-height: 46px;
    white-space: nowrap;
}

.location-picker .form-hint[b-3iul3ar0l1] {
    display: block;
    margin-top: 7px;
    line-height: 1.4;
}

.location-picker .location-map-preview[b-3iul3ar0l1] {
    width: 100%;
    height: clamp(220px, 30vw, 320px);
    margin: 12px 0 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.location-picker .form-row[b-3iul3ar0l1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.location-picker .form-row .form-group[b-3iul3ar0l1] {
    min-width: 0;
    margin-bottom: 14px;
}

.form-label[b-3iul3ar0l1] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.form-input[b-3iul3ar0l1],
.form-textarea[b-3iul3ar0l1] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--input-background);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.form-select[b-3iul3ar0l1] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    background: var(--input-background);
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    background-image: var(--chevron-icon);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
}

.form-input:focus[b-3iul3ar0l1],
.form-textarea:focus[b-3iul3ar0l1] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--input-shadow);
    background: var(--input-background-focus);
}

.form-select:focus[b-3iul3ar0l1] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--input-shadow);
    background-color: var(--input-background-focus);
}

.form-select:disabled[b-3iul3ar0l1] {
    opacity: 0.6;
    cursor: not-allowed;
}

.tag-multiselect[b-3iul3ar0l1] {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tag-multiselect[b-3iul3ar0l1]::-webkit-scrollbar {
    display: none;
}

.form-select option[b-3iul3ar0l1] {
    background-color: #ffffff;
    color: #1d1d1f;
    padding: 8px 4px;
    font-size: 14px;
}
 
[data-app-theme="dark"] .form-select option[b-3iul3ar0l1] {
    background-color: #0B1120;
    color: #E5E7EB;
}
 
[data-app-theme="dark"] .form-select option:checked[b-3iul3ar0l1] {
    background: linear-gradient(rgba(20, 184, 166, 0.3), rgba(20, 184, 166, 0.3));
    background-color: #0B1120 !important;
    color: #E5E7EB;
}
 
[data-app-theme="light"] .form-select option:checked[b-3iul3ar0l1] {
    background: linear-gradient(rgba(20, 184, 166, 0.2), rgba(20, 184, 166, 0.2));
    background-color: #ffffff !important;
    color: #0071e3;
}
 
.form-select optgroup[b-3iul3ar0l1] {
    font-weight: 600;
    color: #86868b;
}

.template-picker[b-3iul3ar0l1] {
    position: relative;
    width: 100%;
}

.template-picker-trigger[b-3iul3ar0l1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    background-image: none;
}

.template-picker-trigger i[b-3iul3ar0l1] {
    flex: 0 0 auto;
    font-size: 12px;
    transition: transform 0.15s ease;
}

.template-picker-trigger[aria-expanded="true"] i[b-3iul3ar0l1] {
    transform: rotate(180deg);
}

.template-picker-placeholder[b-3iul3ar0l1] {
    color: var(--text-muted);
}

.template-picker-menu[b-3iul3ar0l1] {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

.template-picker-search[b-3iul3ar0l1] {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

.template-picker-search > i[b-3iul3ar0l1] {
    position: absolute;
    top: 50%;
    left: 22px;
    z-index: 1;
    color: var(--text-muted);
    transform: translateY(-50%);
}

.template-picker-search .form-input[b-3iul3ar0l1] {
    padding-left: 36px;
}

.template-picker-options[b-3iul3ar0l1] {
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.template-picker-options[b-3iul3ar0l1]::-webkit-scrollbar {
    display: none;
}

.template-picker-group + .template-picker-group[b-3iul3ar0l1] {
    border-top: 1px solid var(--border-color);
}

.template-picker-group-label[b-3iul3ar0l1] {
    padding: 9px 12px 5px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.template-picker-option[b-3iul3ar0l1] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.template-picker-option:hover[b-3iul3ar0l1],
.template-picker-option:focus-visible[b-3iul3ar0l1],
.template-picker-option.selected[b-3iul3ar0l1] {
    outline: none;
    background: var(--hover-overlay);
}

.template-picker-option.selected[b-3iul3ar0l1] {
    color: var(--color-primary);
}

.template-picker-option small[b-3iul3ar0l1] {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 11px;
}

.template-picker-empty[b-3iul3ar0l1] {
    padding: 18px 12px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}
 
[data-app-theme="dark"] .form-select optgroup[b-3iul3ar0l1] {
    color: #9CA3AF;
}
 
[data-app-theme="light"] .form-select optgroup[b-3iul3ar0l1] {
    color: #6B7280;
}

.custom-select-wrapper[b-3iul3ar0l1] {
    position: relative;
    display: inline-block;
    width: 100%;
}
 
.custom-select-wrapper select[b-3iul3ar0l1] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    background-color: var(--input-background);
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    padding-right: 36px;
    transition: all 0.2s;
}
 
.custom-select-wrapper select:focus[b-3iul3ar0l1] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--input-shadow);
    background-color: var(--input-background-focus);
}
 
/* Chevron icon positioned on the right */
.custom-select-wrapper[b-3iul3ar0l1]::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 8px;
    background-image: var(--chevron-icon);
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}
 
/* Disable default select appearance for custom styling */
.custom-select-wrapper select[b-3iul3ar0l1] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    background-color: var(--input-background);
}

.form-textarea[b-3iul3ar0l1] {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.country-group[b-3iul3ar0l1] {
    flex: 0 0 150px;
}

.mobile-group[b-3iul3ar0l1] {
    flex: 1;
}



.param-section-label[b-3iul3ar0l1] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 14px 0 8px;
}

.hint-text[b-3iul3ar0l1] {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.required-mark[b-3iul3ar0l1] {
    color: var(--danger-color);
    margin-left: 2px;
}

.optional-tag[b-3iul3ar0l1] {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 6px;
}

.csv-badge[b-3iul3ar0l1] {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 12px;
    background: var(--status-approved-bg);
    color: var(--status-approved-text);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.send-page[b-3iul3ar0l1]  input[type="file"].file-input {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--input-background);
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.send-page[b-3iul3ar0l1]  input[type="file"].file-input::file-selector-button {
    min-height: 30px;
    margin-right: 10px;
    padding: 5px 12px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--card-bg);
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.send-page[b-3iul3ar0l1]  input[type="file"].file-input:hover::file-selector-button {
    border-color: var(--color-primary);
    background: var(--input-background-focus);
}

.send-page[b-3iul3ar0l1]  input[type="file"].file-input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.send-page[b-3iul3ar0l1]  input[type="file"].file-input:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.bulk-checkbox-row[b-3iul3ar0l1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
}

.multi-pick-list[b-3iul3ar0l1] {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--input-background);
    padding: 8px;
    max-height: 210px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.multi-pick-list-contacts[b-3iul3ar0l1] {
    max-height: 280px;
}

.multi-pick-item[b-3iul3ar0l1] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--text-primary);
    padding: 6px 4px;
    border-radius: 8px;
}

.multi-pick-item:hover[b-3iul3ar0l1] {
    background: var(--hover-overlay);
}

.multi-pick-item input[type="checkbox"][b-3iul3ar0l1] {
    margin-top: 2px;
}

.action-bar[b-3iul3ar0l1] {
    display: flex;
    justify-content: flex-end;
}

.btn-send[b-3iul3ar0l1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 28px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: var(--text-white);
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.25);
}

.btn-send:hover:not(:disabled)[b-3iul3ar0l1] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
}

.btn-send:active:not(:disabled)[b-3iul3ar0l1] {
    transform: translateY(0);
}

.btn-send:disabled[b-3iul3ar0l1] {
    background: var(--text-muted);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-spinner[b-3iul3ar0l1] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin-b-3iul3ar0l1 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-3iul3ar0l1 {
    to { transform: rotate(360deg); }
}

.preview-column[b-3iul3ar0l1] {
    position: sticky;
    top: 20px;
}

.preview-sticky[b-3iul3ar0l1] {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.preview-placeholder[b-3iul3ar0l1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    color: var(--text-muted);
    gap: 12px;
}

.preview-phone-icon[b-3iul3ar0l1] {
    font-size: 56px;
    opacity: 0.5;
}

.preview-phone-icon img[b-3iul3ar0l1] {
    width: 200px;
    height: 300px;
    object-fit: cover;
    background-repeat: no-repeat;
    opacity: 0.5;
}

.preview-placeholder p[b-3iul3ar0l1] {
    font-size: 14px;
    margin: 0;
}

.media-toggle[b-3iul3ar0l1] {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.media-toggle-option[b-3iul3ar0l1] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}

.media-toggle-option:has(input:checked)[b-3iul3ar0l1] {
    border-color: var(--color-primary);
    background: rgba(20, 184, 166, 0.08);
    color: var(--color-primary);
}

.media-toggle-option input[type="radio"][b-3iul3ar0l1] {
    accent-color: var(--color-primary);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.link-button[b-3iul3ar0l1] {
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 10px 0;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.link-button:hover[b-3iul3ar0l1] {
    text-decoration: underline;
}

.media-upload-summary[b-3iul3ar0l1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.media-upload-actions[b-3iul3ar0l1] {
    display: flex;
    gap: 12px;
}

.campaign-modal-body[b-3iul3ar0l1] {
    min-width: 420px;
}

.spinner-overlay[b-3iul3ar0l1] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    z-index: 2000;
}

.spinner-container[b-3iul3ar0l1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.spinner[b-3iul3ar0l1] {
    position: relative;
    width: 50px;
    height: 50px;
}

.spinner-large[b-3iul3ar0l1] {
    width: 60px;
    height: 60px;
}

.spinner-ring[b-3iul3ar0l1] {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(20, 184, 166, 0.2);
    border-radius: 50%;
    top: 0;
    left: 0;
}

.spinner-ring:nth-child(1)[b-3iul3ar0l1] {
    animation: spin-ring1-b-3iul3ar0l1 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: var(--color-primary);
    border-right-color: transparent;
}

.spinner-ring:nth-child(2)[b-3iul3ar0l1] {
    animation: spin-ring2-b-3iul3ar0l1 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: transparent;
    border-bottom-color: var(--color-primary);
}

.spinner-ring:nth-child(3)[b-3iul3ar0l1] {
    animation: spin-ring3-b-3iul3ar0l1 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: var(--color-primary);
    border-top-color: transparent;
}

@keyframes spin-ring1-b-3iul3ar0l1 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin-ring2-b-3iul3ar0l1 {
    0% { transform: rotate(-45deg); }
    100% { transform: rotate(315deg); }
}

@keyframes spin-ring3-b-3iul3ar0l1 {
    0% { transform: rotate(-90deg); }
    100% { transform: rotate(270deg); }
}

.spinner-text[b-3iul3ar0l1] {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .send-content[b-3iul3ar0l1] {
        grid-template-columns: 1fr;
    }

    .config-column[b-3iul3ar0l1],
    .preview-column[b-3iul3ar0l1] {
        min-width: 0;
    }

    .preview-column[b-3iul3ar0l1] {
        position: static;
    }

    .tab-bar[b-3iul3ar0l1] {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* ===== Responsive Mobile ===== */
@media (max-width: 600px) {
    .send-page[b-3iul3ar0l1] {
        padding: 0.5rem;
    }

    .page-header h1[b-3iul3ar0l1] {
        font-size: 24px;
    }

    .form-row[b-3iul3ar0l1] {
        flex-direction: column;
        gap: 0;
    }

    .location-picker .location-search-row[b-3iul3ar0l1] {
        grid-template-columns: minmax(0, 1fr);
    }

    .location-picker .location-current-btn[b-3iul3ar0l1] {
        width: 100%;
    }

    .country-group[b-3iul3ar0l1],
    .mobile-group[b-3iul3ar0l1] {
        flex: 1 !important;
        width: 100%;
    }

    .form-card[b-3iul3ar0l1] {
        padding: 16px 12px;
    }

    .tab-bar[b-3iul3ar0l1] {
        width: 100%;
        margin-bottom: 16px;
    }

    .tab-btn[b-3iul3ar0l1] {
        padding: 6px 12px;
        font-size: 12px;
    }

    .campaign-modal-body[b-3iul3ar0l1] {
        min-width: 100%;
        max-width: 90vw;
    }

    .form-select[b-3iul3ar0l1] {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px 12px;
    }
}

@media (max-width: 420px) {
    .location-picker .form-row[b-3iul3ar0l1] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}
/* /Pages/Authorized/WhatsApp/Tags/CustomerTags.razor.rz.scp.css */
.customer-tags-page[b-gfwf5t7h7y] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

.page-header[b-gfwf5t7h7y] {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding: 28px;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.page-title[b-gfwf5t7h7y] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.empty-state h3[b-gfwf5t7h7y] {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin: 0.5rem 0;
}

.tag-grid[b-gfwf5t7h7y] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    max-width: 1400px;
    margin-bottom: 1.5rem;
    margin: 0 auto;
}

.tag-card[b-gfwf5t7h7y] {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 1.4rem;
    backdrop-filter: blur(10px);
    transition: all .25s ease;
    box-shadow: var(--shadow-sm);
}

.tag-card:hover[b-gfwf5t7h7y] {
    transform: translateY(-4px);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

.tag-card-top[b-gfwf5t7h7y] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.tag-actions[b-gfwf5t7h7y] {
    display: flex;
    gap: .45rem;
}

.tag-description[b-gfwf5t7h7y] {
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: .95rem;
    line-height: 1.7;
}

.tag-meta[b-gfwf5t7h7y] {
    margin-top: 1.2rem;
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: .8rem;
}

.modal-overlay[b-gfwf5t7h7y] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    animation: modalFadeIn .25s ease;
}

@keyframes overlayFade-b-gfwf5t7h7y {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-panel[b-gfwf5t7h7y] {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    background: var(--color-surface);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-sm[b-gfwf5t7h7y] {
    max-width: 460px;
}

@keyframes modalEnter-b-gfwf5t7h7y {

    from {
        opacity: 0;
        transform: translateY(25px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header-mac[b-gfwf5t7h7y] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--mac-header-gradient);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.traffic-lights[b-gfwf5t7h7y] {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.light[b-gfwf5t7h7y] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: pointer;
    transition: .2s ease;
}

.light:hover[b-gfwf5t7h7y] {
    transform: scale(1.12);
}

.light.red[b-gfwf5t7h7y] {
    background: var(--red-light);
}

.light.yellow[b-gfwf5t7h7y] {
    background: var(--yellow-light);
}

.light.green[b-gfwf5t7h7y] {
    background: var(--green-light);
}

.modal-header-mac h2[b-gfwf5t7h7y] {
    margin: 0;
    color: var(--text-white);
    font-size: 1.65rem;
    font-weight: 600;
}

.modal-body[b-gfwf5t7h7y] {
    flex: 1;
    overflow-y: auto;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.modal-body[b-gfwf5t7h7y]::-webkit-scrollbar {
    width: 8px;
}

.modal-body[b-gfwf5t7h7y]::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.15);
    border-radius: 999px;
}

.tag-editor-layout[b-gfwf5t7h7y] {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}

.form-group[b-gfwf5t7h7y] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.form-label[b-gfwf5t7h7y] {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-input[b-gfwf5t7h7y] {
    width: 100%;
    height: 60px;
    padding: 0 1.2rem;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background: rgba(12,17,40,.80);
    color: var(--text-primary);
    font-size: 1rem;
    transition: .25s ease;
}

.form-input[b-gfwf5t7h7y]::placeholder {
    color: var(--text-muted);
}

.form-input:focus[b-gfwf5t7h7y] {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 4px rgba(20,184,166,.12);
    background: rgba(12,17,40,1);
}

.textarea-lg[b-gfwf5t7h7y] {
    height: 140px;
    resize: vertical;
    padding-top: 1rem;
}

.tag-color-card[b-gfwf5t7h7y] {
    padding: 1rem;
    border-radius: 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

.tag-color-preview[b-gfwf5t7h7y] {
    height: 70px;
    width: 100%;
    border-radius: 20px;
    margin: 1rem 0;
    border: 1px solid rgba(255,255,255,.15);
}

.color-picker-large[b-gfwf5t7h7y] {
    width: 100%;
    height: 55px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.validation-error[b-gfwf5t7h7y] {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 16px;
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.25);
    color: #ffb3b3;
}

.modal-footer[b-gfwf5t7h7y] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
    flex-shrink: 0;
}

.btn-secondary[b-gfwf5t7h7y],
.btn-primary[b-gfwf5t7h7y],
.btn-danger[b-gfwf5t7h7y] {
    height: 54px;
    border: none;
    border-radius: 18px;
    padding: 0 1.6rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
}

.btn-secondary[b-gfwf5t7h7y] {
    background:rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    color: var(--text-primary);
}

.btn-secondary:hover[b-gfwf5t7h7y] {
    background: rgba(255,255,255,.12);
}

.btn-primary[b-gfwf5t7h7y] {
    background: linear-gradient(135deg, #0ea5a4, #14b8a6);
    color: white;
    box-shadow:0 10px 25px rgba(20,184,166,.28);
}

.btn-primary:hover[b-gfwf5t7h7y] {
    transform: translateY(-2px);
}

.btn-danger[b-gfwf5t7h7y] {
    background: linear-gradient( 135deg, #dc2626, #ef4444);
    color: white;
}

.delete-tag-body[b-gfwf5t7h7y] {
    text-align: center;
    padding: 1rem .5rem;
}

.delete-tag-icon[b-gfwf5t7h7y] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.delete-tag-body h3[b-gfwf5t7h7y] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.4rem;
}

.delete-tag-body span[b-gfwf5t7h7y] {
    color: var(--color-primary-light);
}

.delete-tag-body p[b-gfwf5t7h7y] {
    margin-top: .8rem;
    color: var(--text-muted);
    line-height: 1.7;
}

@media (max-width:768px) {

    .modal-overlay[b-gfwf5t7h7y] {
        padding: 1rem;
    }

    .modal-panel[b-gfwf5t7h7y] {
        max-height: 95vh;
        border-radius: 24px;
    }

    .form-grid[b-gfwf5t7h7y] {
        grid-template-columns: 1fr;
    }

    .modal-header-mac[b-gfwf5t7h7y] {
        padding: 1rem;
    }

    .modal-body[b-gfwf5t7h7y] {
        padding: 1rem;
    }

    .modal-footer[b-gfwf5t7h7y] {
        flex-direction: column;
    }

    .btn-primary[b-gfwf5t7h7y],
    .btn-secondary[b-gfwf5t7h7y],
    .btn-danger[b-gfwf5t7h7y] {
        width: 100%;
    }
}
/* /Pages/Authorized/WhatsApp/Tags/TagContacts.razor.rz.scp.css */
/* ===== TAG CONTACTS PAGE - FULL THEME SUPPORT ===== */
/* Use this if you add contact page styling variables to app.css */

.tag-contacts-page[b-4xzdgkmoan] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

.page-header[b-4xzdgkmoan] {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding: 28px;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* ===== PAGE HEADER ===== */
.page-title[b-4xzdgkmoan] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* ===== TOOLBAR ===== */
.mapping-toolbar[b-4xzdgkmoan] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
    gap: 12px;
}

.mapping-toolbar button[b-4xzdgkmoan] {
    padding: 10px 20px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mapping-toolbar button:hover[b-4xzdgkmoan] {
    box-shadow: 0 4px 12px rgba(0, 128, 128, 0.3);
    transform: translateY(-2px);
}

.mapping-toolbar button:active[b-4xzdgkmoan] {
    transform: translateY(0);
}

/* ===== GRID LAYOUT ===== */
.mapping-grid[b-4xzdgkmoan] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    max-width: 1400px;
    margin-bottom: 1.5rem;
    margin: 0 auto;
}

/* ===== CARDS ===== */
.mapping-card[b-4xzdgkmoan] {
    background: var(--contact-card-bg, var(--color-surface));
    border: 1px solid var(--contact-card-border, var(--border-color));
    border-radius: 14px;
    padding: 1.4rem;
    transition: all 0.25s ease;
    box-shadow: var(--shadow-sm);
}

.mapping-card:hover[b-4xzdgkmoan] {
    transform: translateY(-4px);
    border-color: var(--contact-card-hover-border, var(--color-primary-light));
    box-shadow: var(--contact-card-hover-shadow, var(--shadow-md));
}

/* ===== CARD HEADER ===== */
.mapping-card-header[b-4xzdgkmoan] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.mapping-card-header h3[b-4xzdgkmoan] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--contact-card-title, var(--text-primary));
}

.mapping-count[b-4xzdgkmoan] {
    color: var(--contact-card-count, var(--text-muted));
    font-size: 0.8rem;
}

/* ===== CONTACT LIST ===== */
.mapping-contact-list[b-4xzdgkmoan] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mapping-contact-row[b-4xzdgkmoan] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem;
    border-radius: 10px;
    background: var(--contact-row-bg, var(--glass-bg));
    border: 1px solid var(--contact-row-border, var(--border-color));
    transition: all 0.2s ease;
}

.mapping-contact-row:hover[b-4xzdgkmoan] {
    background: var(--contact-row-hover-bg, var(--glass-bg-hover));
}

.mapping-contact-row strong[b-4xzdgkmoan] {
    color: var(--contact-row-text, var(--text-primary));
    font-weight: 600;
    margin-bottom: 4px;
    display: block;
}

.mapping-contact-row .contact-sub[b-4xzdgkmoan] {
    color: var(--contact-row-subtext, var(--text-muted));
    font-size: 0.8rem;
}

/* ===== EMPTY STATE ===== */
.empty-state[b-4xzdgkmoan] {
    text-align: center;
    padding: 2rem;
    background: var(--contact-empty-bg, transparent);
    border-radius: 12px;
}

.empty-state-icon[b-4xzdgkmoan] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.empty-state h3[b-4xzdgkmoan] {
    font-size: 1.5rem;
    color: var(--contact-empty-title, var(--text-primary));
    margin: 0.5rem 0;
}

.empty-state p[b-4xzdgkmoan] {
    color: var(--contact-empty-text, var(--text-muted));
    margin: 0.5rem 0;
}

/* ===== HINTS ===== */
.no-tags-hint[b-4xzdgkmoan] {
    color: var(--contact-hint-text, var(--text-secondary));
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .tag-contacts-page[b-4xzdgkmoan] {
        padding: 1.5rem;
    }

    .mapping-grid[b-4xzdgkmoan] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .tag-contacts-page[b-4xzdgkmoan] {
        padding: 1rem;
    }

    .page-title[b-4xzdgkmoan] {
        font-size: 1.5rem;
    }

    .mapping-contact-row[b-4xzdgkmoan] {
        flex-direction: column;
        align-items: flex-start;
    }

    .mapping-toolbar[b-4xzdgkmoan] {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}
/* /Pages/Authorized/WhatsApp/Templates/CreateAuthenticationTemplate.razor.rz.scp.css */
.template-page[b-3nrt4u4pxm] {
    height: calc(100vh - 34px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--page-bg);
    box-sizing: border-box;
    padding: 1rem;
}

/* ===== Header ===== */
.authentication-header[b-3nrt4u4pxm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    background: var(--card-bg);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.authentication-header h1[b-3nrt4u4pxm] {
    margin: 0 0 5px 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.page-subtitle[b-3nrt4u4pxm] {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

/* ===== Main Layout ===== */
.template-content[b-3nrt4u4pxm] {
    flex: 1;
    display: grid;
    grid-template-columns: 360px  1fr 360px;
    gap: 24px;
    min-height: 0;
    overflow: hidden;
}

/* ===== Scrollable Columns ===== */
.template-column[b-3nrt4u4pxm] {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.template-column.template-builder[b-3nrt4u4pxm] {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.template-column.template-builder[b-3nrt4u4pxm]::-webkit-scrollbar {
    display: none;
}

.template-builder[b-3nrt4u4pxm] {
    padding-bottom: 30px;
}

.template-column[b-3nrt4u4pxm]::-webkit-scrollbar {
    display: none;
}

/* ===== Sticky Preview ===== */
.template-column:last-child[b-3nrt4u4pxm] {
    overflow: hidden;
}

.preview-section[b-3nrt4u4pxm] {
    position: sticky;
    top: 0;
    height: fit-content;
}

.preview-heading[b-3nrt4u4pxm] {
    margin-bottom: 16px;
}

.preview-heading h2[b-3nrt4u4pxm] {
    margin-bottom: 6px;
}

/* ===== Cards ===== */
.form-section[b-3nrt4u4pxm],
.preview-section[b-3nrt4u4pxm] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}

.form-section h2[b-3nrt4u4pxm],
.preview-section h2[b-3nrt4u4pxm] {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.required-indicator[b-3nrt4u4pxm] {
    margin-left: 6px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ===== Form ===== */
.form-group[b-3nrt4u4pxm] {
    margin-bottom: 16px;
}

.form-label[b-3nrt4u4pxm] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.field-hint[b-3nrt4u4pxm] {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.checkbox-label[b-3nrt4u4pxm] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-primary);
}
.warning-box[b-3nrt4u4pxm] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.08);
    margin-bottom: 16px;
    color: var(--text-primary);
}

.warning-box strong[b-3nrt4u4pxm] {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
}

.warning-box p[b-3nrt4u4pxm] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

.warning-box code[b-3nrt4u4pxm] {
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--glass-bg-hover);
    color: var(--color-primary-light);
    font-weight: 700;
}

.warning-icon[b-3nrt4u4pxm] {
    flex: 0 0 auto;
    line-height: 1.3;
    color: #d97706;
    font-size: 16px;
}

.form-section.warning-box[b-3nrt4u4pxm] {
    padding: 16px;
}

.constraint-list[b-3nrt4u4pxm] {
    display: grid;
    gap: 6px;
    margin: 8px 0 0;
    padding-left: 18px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.security-section[b-3nrt4u4pxm] {
    margin: 22px 0;
    padding: 18px 16px 2px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--glass-bg);
}

.security-section h2[b-3nrt4u4pxm] {
    margin-bottom: 6px;
    font-size: 16px;
}

.form-input[b-3nrt4u4pxm],
.form-select[b-3nrt4u4pxm] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--color-surface);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-select option[b-3nrt4u4pxm] {
    background: var(--color-surface);
    color: var(--text-primary);
}

.form-input:hover[b-3nrt4u4pxm],
.form-select:hover[b-3nrt4u4pxm] {
    border-color: var(--color-primary-light);
}

.form-input:focus[b-3nrt4u4pxm],
.form-select:focus[b-3nrt4u4pxm] {
    outline: none;
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14);
}

/* ===== Empty Preview ===== */
.empty-preview[b-3nrt4u4pxm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    color: var(--text-muted);
}

.empty-icon[b-3nrt4u4pxm] {
    font-size: 40px;
    margin-bottom: 16px;
    color: var(--color-primary-light);
}

.empty-preview p[b-3nrt4u4pxm] {
    margin: 0;
    font-size: 14px;
}

/* ===== Actions ===== */
.page-actions[b-3nrt4u4pxm] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-save[b-3nrt4u4pxm] {
    padding: 10px 24px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn-save:hover:not(:disabled)[b-3nrt4u4pxm] {
    transform: translateY(-2px);
    background: var(--color-primary-dark);
    box-shadow: 0 6px 16px rgba(13, 148, 136, 0.32);
}

.btn-save:disabled[b-3nrt4u4pxm] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-3nrt4u4pxm] {
    padding: 10px 24px;
    background: var(--color-surface-alt);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover:not(:disabled)[b-3nrt4u4pxm] {
    background: var(--glass-bg-hover);
    border-color: var(--color-primary-light);
}

.btn-cancel:disabled[b-3nrt4u4pxm] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .template-content[b-3nrt4u4pxm] {
        grid-template-columns: 320px 1fr 360px;
    }
}

@media (max-width: 992px) {
    .template-page[b-3nrt4u4pxm] {
        height: auto;
        overflow: auto;
        padding-bottom: 50px;
    }

    .template-content[b-3nrt4u4pxm] {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .template-column[b-3nrt4u4pxm] {
        overflow: visible;
    }

    .preview-section[b-3nrt4u4pxm] {
        position: relative;
    }
}

@media (max-width: 768px) {
    .authentication-header[b-3nrt4u4pxm] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .page-actions[b-3nrt4u4pxm] {
        width: 100%;
    }

    .btn-save[b-3nrt4u4pxm],
    .btn-cancel[b-3nrt4u4pxm] {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .template-page[b-3nrt4u4pxm] {
        padding: 12px;
    }

    .authentication-header[b-3nrt4u4pxm],
    .form-section[b-3nrt4u4pxm],
    .preview-section[b-3nrt4u4pxm] {
        padding: 16px;
    }

    .page-actions[b-3nrt4u4pxm] {
        flex-wrap: wrap;
    }
}
/* /Pages/Authorized/WhatsApp/Templates/CreateMarketingTemplate.razor.rz.scp.css */
.template-page[b-7wqd5jv6xc] {
    height: calc(100vh - 34px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--page-bg);
    box-sizing: border-box;
    padding: 1rem;
}

/* ===== Header ===== */
.marketing-header[b-7wqd5jv6xc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    background: var(--card-bg);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.marketing-header h1[b-7wqd5jv6xc] {
    margin: 0 0 5px 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

.page-subtitle[b-7wqd5jv6xc] {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

/* ===== Main Layout ===== */
.template-content[b-7wqd5jv6xc] {
    flex: 1;
    display: grid;
    grid-template-columns: 360px 1fr 360px;
    gap: 24px;
    min-height: 0;
    overflow: hidden;
}

/* ===== Scrollable Columns ===== */
.template-column[b-7wqd5jv6xc] {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.template-column.template-builder[b-7wqd5jv6xc] {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.template-column.template-builder[b-7wqd5jv6xc]::-webkit-scrollbar {
    display: none;
}

.template-builder[b-7wqd5jv6xc] {
    padding-bottom: 30px;
}

/* Optional scrollbar style */
.template-column[b-7wqd5jv6xc]::-webkit-scrollbar {
    display: none;
}

/* ===== Sticky Preview ===== */
.template-column:last-child[b-7wqd5jv6xc] {
    overflow: hidden;
}

.preview-section[b-7wqd5jv6xc] {
    position: sticky;
    top: 0;
    height: fit-content;
}

/* ===== Cards ===== */
.form-section[b-7wqd5jv6xc],
.preview-section[b-7wqd5jv6xc] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--card-border);
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}

.form-section h2[b-7wqd5jv6xc],
.preview-section h2[b-7wqd5jv6xc] {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ===== Form ===== */
.form-group[b-7wqd5jv6xc] {
    margin-bottom: 16px;
}

.form-label[b-7wqd5jv6xc] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}
.checkbox-label[b-7wqd5jv6xc] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-primary);
}
.warning-box[b-7wqd5jv6xc] {
    color: var(--text-primary);
}

.form-input[b-7wqd5jv6xc],
.form-select[b-7wqd5jv6xc] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--color-surface);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-select option[b-7wqd5jv6xc] {
    background: var(--color-surface);
    color: var(--text-primary);
}

.form-input:hover[b-7wqd5jv6xc],
.form-select:hover[b-7wqd5jv6xc] {
    border-color: var(--color-primary-light);
}

.form-input:focus[b-7wqd5jv6xc],
.form-select:focus[b-7wqd5jv6xc] {
    outline: none;
    border-color: #34C759;
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.1);
}

/* ===== Empty Preview ===== */
.empty-preview[b-7wqd5jv6xc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    color: var(--text-muted);
}

.empty-icon[b-7wqd5jv6xc] {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-preview p[b-7wqd5jv6xc] {
    margin: 0;
    font-size: 14px;
}

/* ===== Actions ===== */
.page-actions[b-7wqd5jv6xc] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-save[b-7wqd5jv6xc] {
    padding: 10px 24px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save:hover:not(:disabled)[b-7wqd5jv6xc] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
}

.btn-save:disabled[b-7wqd5jv6xc] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-7wqd5jv6xc] {
    padding: 10px 24px;
    background: var(--color-surface-alt);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover:not(:disabled)[b-7wqd5jv6xc] {
    background: var(--card-bg-hover);
    border-color: var(--color-primary-light);
}

.btn-cancel:disabled[b-7wqd5jv6xc] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .template-content[b-7wqd5jv6xc] {
        grid-template-columns: 320px 1fr 360px;
    }
}

@media (max-width: 992px) {
    .template-page[b-7wqd5jv6xc] {
        height: auto;
        overflow: auto;
        padding-bottom: 50px;
    }

    .template-content[b-7wqd5jv6xc] {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .template-column[b-7wqd5jv6xc] {
        overflow: visible;
    }

    .preview-section[b-7wqd5jv6xc] {
        position: relative;
    }
}

@media (max-width: 768px) {
    .marketing-header[b-7wqd5jv6xc] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .page-actions[b-7wqd5jv6xc] {
        width: 100%;
    }

    .btn-save[b-7wqd5jv6xc],
    .btn-cancel[b-7wqd5jv6xc] {
        flex: 1;
    }
}
/* /Pages/Authorized/WhatsApp/Templates/CreateUtilityTemplate.razor.rz.scp.css */
.template-page[b-o2jfmnmyyk] {
    height: calc(100vh - 34px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--page-bg);
    box-sizing: border-box;
    padding: 1rem;
}

/* ===== HEADER ===== */
.utility-header[b-o2jfmnmyyk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 20px;
    background: var(--card-bg);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.utility-header h1[b-o2jfmnmyyk] {
    margin: 0 0 5px 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

.page-subtitle[b-o2jfmnmyyk] {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

/* ===== MAIN LAYOUT ===== */
.template-content[b-o2jfmnmyyk] {
    flex: 1;
    display: grid;
    grid-template-columns: 360px 1fr 360px;
    gap: 24px;
    min-height: 0;
    overflow: hidden;
}

/* ===== SCROLLABLE COLUMNS ===== */
.template-column[b-o2jfmnmyyk] {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.template-column.template-builder[b-o2jfmnmyyk] {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.template-column.template-builder[b-o2jfmnmyyk]::-webkit-scrollbar {
    display: none;
}

.template-builder[b-o2jfmnmyyk] {
    padding-bottom: 30px;
}

/* Scrollbar styling */
.template-column[b-o2jfmnmyyk]::-webkit-scrollbar {
    display: none;
}

.template-column[b-o2jfmnmyyk]::-webkit-scrollbar-track {
    background: transparent;
}

/* ===== STICKY PREVIEW ===== */
.template-column:last-child[b-o2jfmnmyyk] {
    overflow: hidden;
}

.preview-section[b-o2jfmnmyyk] {
    position: sticky;
    top: 0;
    height: fit-content;
}

/* ===== CARDS ===== */
.form-section[b-o2jfmnmyyk],
.preview-section[b-o2jfmnmyyk] {
    background: var(--color-surface);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.form-section h2[b-o2jfmnmyyk],
.preview-section h2[b-o2jfmnmyyk] {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ===== FORM ELEMENTS ===== */
.form-group[b-o2jfmnmyyk] {
    margin-bottom: 16px;
}

.form-label[b-o2jfmnmyyk] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.checkbox-label[b-o2jfmnmyyk] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-primary);
}

.form-input[b-o2jfmnmyyk],
.form-select[b-o2jfmnmyyk] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--form-input-border, var(--border-color));
    border-radius: 10px;
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--form-input-bg, var(--color-surface));
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-input:hover[b-o2jfmnmyyk],
.form-select:hover[b-o2jfmnmyyk] {
    border-color: var(--color-primary-light);
}

.form-input:focus[b-o2jfmnmyyk],
.form-select:focus[b-o2jfmnmyyk] {
    outline: none;
    border-color: var(--form-input-focus-border, var(--color-primary-light));
    box-shadow: var(--form-input-focus-shadow, 0 0 0 3px rgba(20, 184, 166, 0.1));
    background: var(--form-input-focus-bg, var(--color-surface));
}

.form-input[b-o2jfmnmyyk]::placeholder {
    color: var(--text-muted);
}

/* ===== INFO BOX ===== */
.info-box[b-o2jfmnmyyk] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--info-box-bg, rgba(20, 184, 166, 0.08));
    border: 1px solid var(--info-box-border, rgba(20, 184, 166, 0.3));
    border-radius: 8px;
    margin-bottom: 16px;
}

.info-icon[b-o2jfmnmyyk] {
    font-size: 16px;
    flex-shrink: 0;
}

.info-box strong[b-o2jfmnmyyk] {
    color: var(--text-primary);
    font-size: 13px;
    display: block;
    margin-bottom: 4px;
}

.info-box p[b-o2jfmnmyyk] {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ===== WARNING BOX ===== */
.warning-box[b-o2jfmnmyyk] {
    color: var(--text-primary);
}

/* ===== EMPTY PREVIEW ===== */
.empty-preview[b-o2jfmnmyyk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    color: var(--text-muted);
}

.empty-icon[b-o2jfmnmyyk] {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-preview p[b-o2jfmnmyyk] {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

/* ===== ACTION BUTTONS ===== */
.page-actions[b-o2jfmnmyyk] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-save[b-o2jfmnmyyk] {
    padding: 10px 24px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save:hover:not(:disabled)[b-o2jfmnmyyk] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 128, 128, 0.3);
    opacity: 0.9;
}

.btn-save:disabled[b-o2jfmnmyyk] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-cancel[b-o2jfmnmyyk] {
    padding: 10px 24px;
    background: var(--glass-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover:not(:disabled)[b-o2jfmnmyyk] {
    background: var(--glass-bg-hover);
    border-color: var(--color-primary-light);
    color: var(--text-primary);
}

.btn-cancel:disabled[b-o2jfmnmyyk] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .template-content[b-o2jfmnmyyk] {
        grid-template-columns: 320px 1fr 360px;
    }
}

@media (max-width: 992px) {
    .template-page[b-o2jfmnmyyk] {
        height: auto;
        overflow: auto;
        padding-bottom: 50px;
    }

    .template-content[b-o2jfmnmyyk] {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .template-column[b-o2jfmnmyyk] {
        overflow: visible;
    }

    .preview-section[b-o2jfmnmyyk] {
        position: relative;
    }
}

@media (max-width: 768px) {
    .utility-header[b-o2jfmnmyyk] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .page-actions[b-o2jfmnmyyk] {
        width: 100%;
    }

    .btn-save[b-o2jfmnmyyk],
    .btn-cancel[b-o2jfmnmyyk] {
        flex: 1;
    }
}
/* /Pages/Authorized/WhatsApp/Templates/TemplateDetail.razor.rz.scp.css */
.template-detail-page[b-tfq0zpdqby] {
    min-height: 100vh;
    padding: 24px 24px 75px;
    background: var(--page-bg);
}

/* ===== DETAIL HEADER ===== */
.detail-header[b-tfq0zpdqby] {
    max-width: 1600px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto;
    margin-bottom: 28px;
    padding: 28px;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.btn-back[b-tfq0zpdqby] {
    padding: 8px 16px;
    background: transparent;
    color: var(--link-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 12px;
    display: inline-block;
}

.btn-back:hover[b-tfq0zpdqby] {
    background: var(--hover-overlay);
    color: var(--link-hover);
}

.detail-header h1[b-tfq0zpdqby] {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

/* ===== LOADING & ERROR STATES ===== */
.loading-container[b-tfq0zpdqby],
.error-container[b-tfq0zpdqby] {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: var(--text-muted);
}

.spinner[b-tfq0zpdqby] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--color-primary-light);
    border-radius: 50%;
    animation: spin-b-tfq0zpdqby 0.8s linear infinite;
    margin-bottom: 16px;
}

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

.loading-container p[b-tfq0zpdqby],
.error-container p[b-tfq0zpdqby] {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

.error-icon[b-tfq0zpdqby] {
    font-size: 48px;
    margin-bottom: 16px;
}

.error-container h2[b-tfq0zpdqby] {
    margin: 0 0 12px 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

.error-container p[b-tfq0zpdqby] {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: var(--text-muted);
}

/* ===== DETAIL CONTENT LAYOUT ===== */
.detail-content[b-tfq0zpdqby] {
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
}

.detail-main[b-tfq0zpdqby] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.detail-section[b-tfq0zpdqby] {
    background: var(--color-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.2s ease;
}

.detail-section:hover[b-tfq0zpdqby] {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-sm);
}

.detail-section-header[b-tfq0zpdqby] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.detail-section h2[b-tfq0zpdqby] {
    /* margin: 0 0 20px 0; */
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ===== INFO GRID ===== */
.info-grid[b-tfq0zpdqby] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-row[b-tfq0zpdqby] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.info-row:last-child[b-tfq0zpdqby] {
    border-bottom: none;
    padding-bottom: 0;
}

.info-label[b-tfq0zpdqby] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 120px;
}

.template-body-row[b-tfq0zpdqby] {
    flex-direction: column;
    align-items: stretch;
}

.template-body-row .info-label[b-tfq0zpdqby] {
    min-width: 0;
}

.template-body-editor[b-tfq0zpdqby] {
    width: 100%;
    min-height: 140px;
    padding: 12px 14px;
    background-color: var(--input-bg-light);
    color: var(--text-primary);
    border: 1px solid var(--input-border-light);
    border-radius: 8px;
    resize: vertical;
    scrollbar-width: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.template-body-editor[b-tfq0zpdqby]::-webkit-scrollbar {
    display: none;
}

.template-body-editor[b-tfq0zpdqby]::placeholder {
    color: var(--text-muted);
}

.template-body-editor:focus[b-tfq0zpdqby] {
    background-color: var(--color-surface);
    color: var(--text-primary);
    border-color: var(--color-primary-light);
    box-shadow: var(--input-shadow-light);
    outline: none;
}

.info-value[b-tfq0zpdqby] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: right;
    word-break: break-word;
}

.info-mono[b-tfq0zpdqby] {
    font-family: 'Quicksand', sans-serif;
    font-size: 12px;
    background: var(--glass-bg);
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.status-badge[b-tfq0zpdqby] {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Status badge color variants using theme variables */
.status-badge.approved[b-tfq0zpdqby] {
    background: var(--status-approved-bg, rgba(34, 197, 94, 0.15));
    color: var(--status-approved-text, #16a34a);
}

.status-badge.pending[b-tfq0zpdqby] {
    background: var(--status-pending-bg, rgba(245, 158, 11, 0.15));
    color: var(--status-pending-text, #d97706);
}

.status-badge.rejected[b-tfq0zpdqby] {
    background: var(--status-rejected-bg, rgba(239, 68, 68, 0.15));
    color: var(--status-rejected-text, #dc2626);
}

.status-badge.disabled[b-tfq0zpdqby] {
    background: var(--status-disabled-bg, var(--glass-bg));
    color: var(--status-disabled-text, var(--text-muted));
}

/* ===== COMPONENTS SECTION ===== */
.components-list[b-tfq0zpdqby] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.component-card[b-tfq0zpdqby] {
    background: var(--glass-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.component-header[b-tfq0zpdqby] {
    background: var(--glass-bg-hover);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.component-header h3[b-tfq0zpdqby] {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.component-content[b-tfq0zpdqby] {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.component-item[b-tfq0zpdqby] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.item-label[b-tfq0zpdqby] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.item-value[b-tfq0zpdqby] {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 400;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.buttons-list[b-tfq0zpdqby] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.button-item[b-tfq0zpdqby] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--color-surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.button-type[b-tfq0zpdqby] {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: var(--link-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(45, 212, 191, 0.15);
    padding: 2px 6px;
    border-radius: 3px;
    min-width: 50px;
    text-align: center;
}

.button-text[b-tfq0zpdqby] {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ===== PREVIEW SECTION ===== */
.detail-preview[b-tfq0zpdqby] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.preview-section[b-tfq0zpdqby] {
    background: var(--color-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.2s ease;
    position: sticky;
    top: 24px;
}

.preview-section:hover[b-tfq0zpdqby] {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-sm);
}

.preview-section h2[b-tfq0zpdqby] {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ===== BUTTONS ===== */
.btn-secondary[b-tfq0zpdqby] {
    padding: 10px 24px;
    background: var(--glass-bg);
    color: var(--link-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 16px;
}

.btn-secondary:hover[b-tfq0zpdqby] {
    background: var(--glass-bg-hover);
    border-color: var(--color-primary-light);
    color: var(--link-hover);
}

.btn-primary[b-tfq0zpdqby] {
    padding: 10px 24px;
    background: var(--color-primary);
    color: var(--color-on-primary);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 16px;
}

.btn-primary:hover[b-tfq0zpdqby] {
    background: var(--color-primary-dark);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
    .detail-content[b-tfq0zpdqby] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .preview-section[b-tfq0zpdqby] {
        position: static;
    }
}

@media (max-width: 768px) {
    .template-detail-page[b-tfq0zpdqby] {
        padding: 0 16px;
    }

    .detail-header[b-tfq0zpdqby] {
        padding: 16px 0;
    }

    .detail-header h1[b-tfq0zpdqby] {
        font-size: 24px;
    }

    .detail-section[b-tfq0zpdqby],
    .preview-section[b-tfq0zpdqby] {
        padding: 16px;
    }

    .detail-section h2[b-tfq0zpdqby],
    .preview-section h2[b-tfq0zpdqby] {
        font-size: 16px;
    }

    .info-row[b-tfq0zpdqby] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .info-value[b-tfq0zpdqby] {
        text-align: left;
    }

    .info-label[b-tfq0zpdqby] {
        min-width: auto;
    }

    .component-card[b-tfq0zpdqby] {
        border-radius: 6px;
    }

    .component-header[b-tfq0zpdqby] {
        padding: 10px 12px;
    }

    .component-content[b-tfq0zpdqby] {
        padding: 10px 12px;
    }
}

@media (max-width: 480px) {
    .detail-header h1[b-tfq0zpdqby] {
        font-size: 20px;
    }

    .btn-back[b-tfq0zpdqby] {
        font-size: 13px;
        padding: 6px 12px;
    }

    .error-icon[b-tfq0zpdqby] {
        font-size: 40px;
    }

    .detail-section h2[b-tfq0zpdqby],
    .preview-section h2[b-tfq0zpdqby] {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .info-label[b-tfq0zpdqby] {
        font-size: 11px;
    }

    .info-value[b-tfq0zpdqby] {
        font-size: 13px;
    }

    .component-header h3[b-tfq0zpdqby] {
        font-size: 12px;
    }

    .item-value[b-tfq0zpdqby] {
        font-size: 12px;
    }

    .button-text[b-tfq0zpdqby] {
        font-size: 12px;
    }
}
/* /Pages/Authorized/WhatsApp/Templates/Templates.razor.rz.scp.css */
.templates-page[b-thi2gvicls] {
    padding: 24px 24px 75px;
    background: var(--page-bg);
    min-height: 100vh;
}

.page-header[b-thi2gvicls] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto 20px;
    padding: 28px;
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    flex-wrap: wrap;
}

.page-header-left[b-thi2gvicls] {
    display: flex;
    flex-direction: column;
}

.page-header h1[b-thi2gvicls] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.page-subtitle[b-thi2gvicls] {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 14px;
}

.templates-controls[b-thi2gvicls] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}

.templates-tour-button[b-thi2gvicls] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 15px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    background: var(--card-bg);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.templates-tour-button:hover[b-thi2gvicls] {
    border-color: var(--color-primary);
    background: var(--input-background-focus);
}

.templates-tour-button i[b-thi2gvicls] {
    color: var(--color-primary);
}

.search-container[b-thi2gvicls] {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 260px;
}

.search-input[b-thi2gvicls] {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 42px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    background: var(--input-background);
    color: var(--text-primary);
    transition: all 0.2s;
}

.search-input[b-thi2gvicls]::placeholder {
    color: var(--text-muted);
}

.search-input:focus[b-thi2gvicls] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--input-shadow);
    background: var(--input-background-focus);
}

.search-icon[b-thi2gvicls] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.search-clear[b-thi2gvicls] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
    font-size: 15px;
}

.search-clear:hover[b-thi2gvicls] {
    color: #dc2626;
}

.create-template-menu[b-thi2gvicls] {
    position: relative;
}

.create-template-button[b-thi2gvicls] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    height: 44px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--text-white);
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2);
    white-space: nowrap;
}

.create-template-button:hover[b-thi2gvicls] {
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.3);
    transform: translateY(-1px);
}

.create-template-button:active[b-thi2gvicls] {
    transform: translateY(0);
}

.create-template-caret[b-thi2gvicls] {
    margin-left: 4px;
    font-size: 12px;
}

.create-template-dropdown[b-thi2gvicls] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
    z-index: 100;
    min-width: 300px;
    overflow: hidden;
    animation: slideDown-b-thi2gvicls 0.18s ease-out;
}

@keyframes slideDown-b-thi2gvicls {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.create-template-option[b-thi2gvicls] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--card-border);
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
}

.create-template-option:last-child[b-thi2gvicls] {
    border-bottom: none;
}

.create-template-option:hover[b-thi2gvicls] {
    background: rgba(20, 184, 166, 0.08);
}

.option-icon[b-thi2gvicls] {
    width: 24px;
    color: var(--color-primary);
    font-size: 22px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1.2;
}

.create-template-option strong[b-thi2gvicls] {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 3px;
    font-size: 14px;
}

.create-template-option small[b-thi2gvicls] {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.templates-tabs-wrapper[b-thi2gvicls] {
    max-width: 1400px;
    margin: 0 auto;
}

.templates-tabs[b-thi2gvicls] {
    display: inline-flex;
    gap: 4px;
    padding: 6px;
    margin-bottom: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.tab-btn[b-thi2gvicls] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.tab-btn:hover[b-thi2gvicls] {
    color: var(--text-primary);
    background: rgba(20, 184, 166, 0.08);
}

.tab-btn.tab-active[b-thi2gvicls] {
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25);
}

.tab-btn.tab-active:hover[b-thi2gvicls] {
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

.tab-icon[b-thi2gvicls] {
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 640px) {
    .templates-tabs[b-thi2gvicls] {
        display: flex;
        width: 100%;
    }

    .tab-btn[b-thi2gvicls] {
        flex: 1;
        justify-content: center;
        padding: 10px 8px;
        font-size: 13px;
    }
}

.templates-library[b-thi2gvicls] {
    animation: fadeIn-b-thi2gvicls 0.3s ease-out;
    
    max-width: 1400px;
    margin: 0 auto;
}

@keyframes fadeIn-b-thi2gvicls {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.library-intro[b-thi2gvicls] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
    padding: 17px 20px;
    background: linear-gradient(135deg, rgba(20,184,166,.1), var(--card-bg) 70%);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    color: var(--text-primary);
    line-height: 1.5;
}

.library-intro-icon[b-thi2gvicls] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    background: rgba(20,184,166,.14);
    color: var(--color-primary-light);
    font-size: 1rem;
}

.library-intro strong[b-thi2gvicls] {
    display: block;
    margin-bottom: 3px;
    font-size: .9rem;
    font-weight: 700;
}

.library-intro p[b-thi2gvicls] {
    margin: 0;
    color: var(--text-muted);
    font-size: .8rem;
}

.library-filters[b-thi2gvicls] {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.library-template-count[b-thi2gvicls] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 600;
}

.filter-group[b-thi2gvicls] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label[b-thi2gvicls] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.filter-select[b-thi2gvicls] {
    padding: 9px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-background);
    color: var(--text-primary);
    font-size: 14px;
    min-width: 200px;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-select:hover[b-thi2gvicls],
.filter-select:focus[b-thi2gvicls] {
    outline: none;
    background: var(--input-background-focus);
    border-color: var(--color-primary-light);
    box-shadow: var(--input-shadow);
}

.filter-select option[b-thi2gvicls] {
    color: var(--text-primary);
    background: var(--card-bg);
}

.templates-grid[b-thi2gvicls] {
    display: grid;
    max-width: 1400px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 16px;
    padding-bottom: 20px;
}

/* @media (min-width: 1600px) {
    .templates-grid {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 24px;
    }
} */

@media (max-width: 780px) {
    .templates-grid[b-thi2gvicls] {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

@media (max-width: 560px) {
    .templates-grid[b-thi2gvicls] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.library-template-card[b-thi2gvicls] {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .055);
}

.library-template-card:hover[b-thi2gvicls] {
    border-color: rgba(20, 184, 166, 0.5);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .11);
    transform: translateY(-3px);
}

.library-template-card .card-header[b-thi2gvicls] {
    padding: 14px 17px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--card-border);
}

.library-badge[b-thi2gvicls] {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border: 1px solid transparent;
}

.library-badge.category-marketing[b-thi2gvicls] {
    background: rgba(20, 184, 166, .12);
    color: var(--color-primary-light);
    border-color: rgba(20, 184, 166, .24);
}

.library-badge.category-utility[b-thi2gvicls] {
    background: var(--status-approved-bg);
    color: var(--status-approved-text);
    border-color: rgba(34, 197, 94, .24);
}

.library-badge.category-authentication[b-thi2gvicls] {
    background: rgba(99, 102, 241, .12);
    color: var(--color-info);
    border-color: rgba(99, 102, 241, .25);
}

.library-badge.category-default[b-thi2gvicls] {
    background: var(--color-surface-alt);
    color: var(--text-secondary);
    border-color: var(--card-border);
}

.library-card-hint[b-thi2gvicls] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 600;
}

.library-template-card .card-body[b-thi2gvicls] {
    padding: 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.template-name[b-thi2gvicls] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
    color: var(--text-primary);
}

.template-description[b-thi2gvicls] {
    margin: 0;
    font-size: .78rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.template-message[b-thi2gvicls] {
    padding: 12px;
    border: 1px solid var(--card-border);
    border-radius: 11px;
    background: var(--color-surface-alt);
}

.template-message-label[b-thi2gvicls] {
    display: block;
    margin-bottom: 6px;
    color: var(--color-primary-light);
    font-size: .65rem;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.template-message p[b-thi2gvicls] {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--text-secondary);
    font-size: .76rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.template-features[b-thi2gvicls] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature-item[b-thi2gvicls] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .76rem;
    color: var(--text-muted);
}

.feature-icon[b-thi2gvicls] {
    color: var(--color-primary);
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.feature-text[b-thi2gvicls] {
    color: var(--text-secondary);
    font-weight: 500;
}

.template-tags[b-thi2gvicls] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag[b-thi2gvicls] {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(20, 184, 166, 0.1);
    color: var(--color-primary-light);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.library-template-card .card-footer[b-thi2gvicls] {
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--card-border);
}

.templates-pagination[b-thi2gvicls] {
    max-width: 1400px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin: 0 auto;
    padding: 13px 15px;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    background: var(--card-bg);
    box-shadow: 0 5px 18px rgba(15, 23, 42, .045);
}

.pagination-summary[b-thi2gvicls] {
    color: var(--text-muted);
    font-size: .77rem;
}

.pagination-summary strong[b-thi2gvicls] {
    color: var(--text-primary);
    font-weight: 700;
}

.pagination-controls[b-thi2gvicls] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.pagination-button[b-thi2gvicls] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: .75rem;
    font-weight: 650;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease;
}

.pagination-button:hover:not(:disabled)[b-thi2gvicls] {
    border-color: var(--color-primary-light);
    background: rgba(20, 184, 166, .08);
    color: var(--color-primary-light);
}

.pagination-button:focus-visible[b-thi2gvicls] {
    outline: 3px solid rgba(20, 184, 166, .35);
    outline-offset: 2px;
}

.pagination-button:disabled[b-thi2gvicls] {
    opacity: .45;
    cursor: not-allowed;
}

.pagination-current[b-thi2gvicls] {
    min-width: 74px;
    color: var(--text-secondary);
    font-size: .74rem;
    font-weight: 650;
    text-align: center;
}

.btn-preview[b-thi2gvicls],
.btn-use[b-thi2gvicls] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 1;
    min-height: 40px;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.btn-preview[b-thi2gvicls] {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-preview:hover[b-thi2gvicls] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-use[b-thi2gvicls] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--text-white);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2);
}

.btn-preview:focus-visible[b-thi2gvicls],
.btn-use:focus-visible[b-thi2gvicls],
.btn-use-modal:focus-visible[b-thi2gvicls] {
    outline: 3px solid rgba(20,184,166,.4);
    outline-offset: 2px;
}

.btn-use:hover[b-thi2gvicls] {
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.3);
    transform: translateY(-1px);
}

.template-card[b-thi2gvicls] {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.template-card:hover[b-thi2gvicls] {
    border-color: rgba(20, 184, 166, 0.5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

.template-card .card-header[b-thi2gvicls] {
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--card-border);
}

.status-badge[b-thi2gvicls] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.btn-health[b-thi2gvicls] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-primary);
}

.btn-health:hover:not(:disabled)[b-thi2gvicls] {
    border-color: var(--color-primary);
    background: rgba(20, 184, 166, 0.08);
}

.btn-health:disabled[b-thi2gvicls] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-health.quality-high[b-thi2gvicls] {
    border-color: #10b981;
    color: #10b981;
}

.btn-health.quality-high:hover[b-thi2gvicls] {
    background: rgba(16, 185, 129, 0.08);
}

.btn-health.quality-medium[b-thi2gvicls] {
    border-color: #f59e0b;
    color: #f59e0b;
}

.btn-health.quality-medium:hover[b-thi2gvicls] {
    background: rgba(245, 158, 11, 0.08);
}

.btn-health.quality-low[b-thi2gvicls] {
    border-color: #ef4444;
    color: #ef4444;
}

.btn-health.quality-low:hover[b-thi2gvicls] {
    background: rgba(239, 68, 68, 0.08);
}

.health-spinner[b-thi2gvicls] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(20, 184, 166, 0.2);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-thi2gvicls 0.8s linear infinite;
}

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

.template-card .card-body[b-thi2gvicls] {
    padding: 16px 18px;
    flex: 1;
}

.category-claim-warning[b-thi2gvicls] {
    min-width: 0;
    margin-bottom: 10px;
}

.category-claim-warning .badge[b-thi2gvicls] {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
    text-align: left;
}

.template-info-item[b-thi2gvicls] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 13px;
}

.template-info-item:last-child[b-thi2gvicls] {
    margin-bottom: 0;
}

.info-label[b-thi2gvicls] {
    color: var(--text-muted);
    font-weight: 600;
}

.info-value[b-thi2gvicls] {
    color: var(--text-primary);
    font-weight: 500;
    text-align: right;
}

.info-mono[b-thi2gvicls] {
    font-family: 'Quicksand', sans-serif;
    font-size: 11px;
    background: var(--color-surface-alt, rgba(148,163,184,0.12));
    padding: 4px 8px;
    border-radius: 4px;
}

.template-card .card-footer[b-thi2gvicls] {
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--card-border);
}

.btn-view[b-thi2gvicls],
.btn-boost[b-thi2gvicls] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-view[b-thi2gvicls] {
    background: transparent;
    color: var(--text-secondary);
}

.btn-view:hover[b-thi2gvicls] {
    background: rgba(20, 184, 166, 0.08);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-boost[b-thi2gvicls] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2);
}

.btn-use:hover[b-thi2gvicls] {
    box-shadow: 0 6px 16px rgba(20, 184, 166, 0.3);
    transform: translateY(-1px);
}

.empty-state[b-thi2gvicls] {
    text-align: center;
    padding: 60px 30px;
    background: var(--card-bg);
    border: 2px dashed var(--border-color);
    border-radius: 16px;
    max-width: 1400px;
    margin: 0 auto;
}

.empty-icon[b-thi2gvicls] {
    display: block;
    color: var(--color-primary);
    font-size: 60px;
    margin-bottom: 16px;
    line-height: 1;
}

.empty-state h2[b-thi2gvicls] {
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.empty-state p[b-thi2gvicls] {
    margin: 0 0 20px 0;
    color: var(--text-muted);
    font-size: 14px;
}

.btn-secondary[b-thi2gvicls] {
    display: inline-block;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--text-white);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover[b-thi2gvicls] {
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
    transform: translateY(-2px);
}

.spinner-center[b-thi2gvicls] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 30px;
    background: var(--card-bg);
    border-radius: 16px;
    max-width: 1400px;
    margin: 0 auto;
}

.library-preview[b-thi2gvicls] {
    padding: 24px;
}

.library-preview h3[b-thi2gvicls] {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.library-preview p[b-thi2gvicls] {
    margin: 0 0 16px 0;
    color: var(--text-muted);
    line-height: 1.6;
}

.preview-message[b-thi2gvicls] {
    background: var(--color-surface-alt, rgba(148,163,184,0.08));
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 16px;
    margin: 20px 0;
}

.preview-message strong[b-thi2gvicls] {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.btn-use-modal[b-thi2gvicls] {
    width: 100%;
    padding: 12px 20px;
    margin-top: 20px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--text-white);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-use-modal:hover[b-thi2gvicls] {
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
    transform: translateY(-2px);
}

.phone-preview-overlay[b-thi2gvicls] {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(2, 8, 20, .72);
    backdrop-filter: blur(7px);
}

.phone-preview-stage[b-thi2gvicls] {
    position: relative;
    width: min(320px, calc((100dvh - 48px) * .66));
    height: min(485px, calc(100dvh - 48px));
}

@media (max-width: 1024px) {
    .page-header[b-thi2gvicls] {
        flex-direction: column;
        align-items: stretch;
    }

    .templates-controls[b-thi2gvicls] {
        justify-content: stretch;
        flex-direction: column-reverse;
    }

    .search-container[b-thi2gvicls] {
        min-width: 0;
    }

    /* .templates-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    } */
}

@media (max-width: 768px) {
    .templates-page[b-thi2gvicls] {
        padding: 16px;
    }

    .page-header[b-thi2gvicls] {
        padding: 20px;
    }

    .page-header h1[b-thi2gvicls] {
        font-size: 22px;
    }

    .templates-controls[b-thi2gvicls] {
        flex-direction: column;
        width: 100%;
    }

    .search-container[b-thi2gvicls] {
        width: 100%;
    }

    .create-template-button[b-thi2gvicls] {
        width: 100%;
        justify-content: center;
    }

    .templates-grid[b-thi2gvicls] {
        grid-template-columns: 1fr;
    }

    .template-card .card-footer[b-thi2gvicls],
    .library-template-card .card-footer[b-thi2gvicls] {
        flex-direction: column;
    }

    .library-template-card .card-footer[b-thi2gvicls] {
        display: flex;
    }

    .btn-view[b-thi2gvicls],
    .btn-boost[b-thi2gvicls],
    .btn-preview[b-thi2gvicls],
    .btn-use[b-thi2gvicls] {
        width: 100%;
    }

    .create-template-dropdown[b-thi2gvicls] {
        min-width: calc(100vw - 64px);
        left: 0;
        right: 0;
    }

    .library-filters[b-thi2gvicls] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 560px) {
    .templates-pagination[b-thi2gvicls] {
        align-items: stretch;
        flex-direction: column;
        padding: 12px;
    }

    .pagination-controls[b-thi2gvicls] {
        justify-content: space-between;
        gap: 6px;
    }

    .pagination-button[b-thi2gvicls] {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .templates-page[b-thi2gvicls] {
        padding: 12px;
    }

    .page-header h1[b-thi2gvicls] {
        font-size: 20px;
    }

    .templates-grid[b-thi2gvicls] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .library-template-card[b-thi2gvicls],
    .template-card[b-thi2gvicls] {
        border-radius: 12px;
    }

    .template-card .card-body[b-thi2gvicls],
    .library-template-card .card-body[b-thi2gvicls] {
        padding: 12px;
    }

    .template-card .card-footer[b-thi2gvicls],
    .library-template-card .card-footer[b-thi2gvicls] {
        padding: 10px;
    }

    .tab-btn[b-thi2gvicls] {
        padding: 8px 12px;
        font-size: 12px;
    }

    .filter-select[b-thi2gvicls] {
        width: 100%;
    }
}
/* /Pages/Public/About.razor.rz.scp.css */
.about-page[b-w0amdkufwj] {
    position: relative;
    padding: 48px 20px 96px;
    background:
        radial-gradient(circle at top left, rgba(20, 184, 166, 0.18), transparent 32%),
        radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.12), transparent 28%),
        linear-gradient(#f5fbff 0%, #f9fbff 18%, #f3f8ff 46%, #fff 100%);
    color: #0f172a;
    overflow: hidden;
}

.about-page[b-w0amdkufwj]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.015), rgba(20, 184, 166, 0.03));
    pointer-events: none;
}

.about-shell[b-w0amdkufwj] {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
}

.about-hero[b-w0amdkufwj] {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 32px;
    align-items: center;
    padding: 32px 0 24px;
}

.about-tag[b-w0amdkufwj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(13, 148, 136, 0.22);
    background: rgba(13, 148, 136, 0.08);
    color: #0d9488;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.about-copy h1[b-w0amdkufwj] {
    margin: 1rem 0 0;
    font-size: clamp(2rem, 3.2vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -0.06em;
    color: #0f172a;
    text-shadow: 0 8px 26px rgba(15, 23, 42, 0.05);
}

.about-copy p[b-w0amdkufwj] {
    margin: 1rem 0 0;
    max-width: 700px;
    font-size: 1.06rem;
    line-height: 1.8;
    color: #475569;
}

.about-actions[b-w0amdkufwj] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 1.75rem;
}

.primary-btn[b-w0amdkufwj],
.secondary-btn[b-w0amdkufwj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    min-height: 48px;
    padding: 0.9rem 1.45rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.primary-btn[b-w0amdkufwj] {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
    color: #ffffff;
    box-shadow: 0 16px 32px rgba(13, 148, 136, 0.18);
}

.secondary-btn[b-w0amdkufwj] {
    background: rgba(255, 255, 255, 0.72);
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(6px);
}

.primary-btn:hover[b-w0amdkufwj],
.secondary-btn:hover[b-w0amdkufwj] {
    transform: translateY(-2px);
}

.primary-btn:hover[b-w0amdkufwj] {
    box-shadow: 0 22px 38px rgba(13, 148, 136, 0.24);
}

.secondary-btn:hover[b-w0amdkufwj] {
    background: #ffffff;
    border-color: rgba(13, 148, 136, 0.22);
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.05);
}

.mini-stats[b-w0amdkufwj] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 2rem;
}

.mini-stat[b-w0amdkufwj] {
    border-radius: 20px;
    padding: 18px 16px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.03);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.mini-stat:hover[b-w0amdkufwj] {
    transform: translateY(-4px);
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.06);
    border-color: rgba(13, 148, 136, 0.18);
}

.mini-stat strong[b-w0amdkufwj] {
    display: block;
    font-size: 1.05rem;
    color: #0f172a;
}

.mini-stat span[b-w0amdkufwj] {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    color: #64748b;
}

.about-visual[b-w0amdkufwj] {
    display: flex;
    justify-content: center;
}

.visual-card[b-w0amdkufwj] {
    position: relative;
    width: 100%;
    max-width: 450px;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 255, 252, 0.96) 100%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.08);
    padding: 26px;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.visual-card:hover[b-w0amdkufwj] {
    transform: translateY(-4px);
    box-shadow: 0 34px 72px rgba(15, 23, 42, 0.11);
}

.visual-card-header[b-w0amdkufwj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.visual-badge[b-w0amdkufwj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(13, 148, 136, 0.08);
    border: 1px solid rgba(13, 148, 136, 0.12);
    color: #0d9488;
    border-radius: 999px;
    padding: 0.5rem 0.8rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pulse-dot[b-w0amdkufwj] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    animation: pulse-b-w0amdkufwj 2s infinite;
}

@keyframes pulse-b-w0amdkufwj {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.visual-stack[b-w0amdkufwj] {
    display: grid;
    gap: 15px;
    margin-top: 20px;
}

.mini-card[b-w0amdkufwj] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fffd 0%, #edfdf9 100%);
    border: 1px solid rgba(13, 148, 136, 0.1);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.mini-card:hover[b-w0amdkufwj] {
    transform: translateX(4px);
    box-shadow: 0 16px 28px rgba(13, 148, 136, 0.08);
    border-color: rgba(13, 148, 136, 0.18);
}

.mini-icon[b-w0amdkufwj] {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #dffaf5 0%, #b9f3e5 100%);
    color: #0d9488;
    font-size: 1.1rem;
    transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}

.mini-card:hover .mini-icon[b-w0amdkufwj] {
    transform: scale(1.08) rotate(-4deg);
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
    box-shadow: 0 12px 22px rgba(13, 148, 136, 0.2);
    color: #ffffff;
}

.mini-card strong[b-w0amdkufwj] {
    display: block;
    font-size: 0.94rem;
    color: #0f172a;
}

.mini-card span[b-w0amdkufwj] {
    display: block;
    margin-top: 3px;
    font-size: 0.77rem;
    color: #64748b;
}

.section[b-w0amdkufwj] {
    margin-top: 72px;
}

.section-header[b-w0amdkufwj] {
    max-width: 760px;
    margin: 0 auto 30px;
    text-align: center;
}

.section-header span[b-w0amdkufwj] {
    display: inline-block;
    margin-bottom: 10px;
    color: #0d9488;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.section-header h2[b-w0amdkufwj] {
    margin: 0;
    font-size: clamp(1.8rem, 2.5vw, 2.8rem);
    line-height: 1.2;
    letter-spacing: -0.05em;
    color: #0f172a;
}

.stats-grid[b-w0amdkufwj] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.stat-card[b-w0amdkufwj] {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.04);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.stat-card:hover[b-w0amdkufwj] {
    transform: translateY(-6px);
    box-shadow: 0 24px 44px rgba(15, 23, 42, 0.08);
    border-color: rgba(13, 148, 136, 0.18);
}

.stat-card .counter[b-w0amdkufwj] {
    display: block;
    margin-bottom: 8px;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: #0f172a;
    transition: color 0.22s ease;
}

.stat-card:hover .counter[b-w0amdkufwj] {
    color: #0d9488;
}

.stat-card h3[b-w0amdkufwj] {
    margin: 0;
    font-size: 1.05rem;
    color: #0f172a;
}

.stat-card p[b-w0amdkufwj] {
    margin: 0.7rem 0 0;
    font-size: 0.92rem;
    line-height: 1.7;
    color: #475569;
}

.story-grid[b-w0amdkufwj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}

.story-copy[b-w0amdkufwj],
.story-panel[b-w0amdkufwj] {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 28px;
    padding: clamp(24px, 3vw, 34px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.story-copy:hover[b-w0amdkufwj],
.story-panel:hover[b-w0amdkufwj] {
    transform: translateY(-4px);
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.07);
    border-color: rgba(13, 148, 136, 0.16);
}

.story-copy h3[b-w0amdkufwj],
.story-panel h3[b-w0amdkufwj] {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    color: #0f172a;
}

.story-copy p[b-w0amdkufwj],
.story-panel p[b-w0amdkufwj],
.story-panel li[b-w0amdkufwj] {
    font-size: 0.98rem;
    line-height: 1.8;
    color: #475569;
}

.story-panel ul[b-w0amdkufwj] {
    margin: 0;
    padding-left: 1.1rem;
}

.feature-grid[b-w0amdkufwj] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.feature-card[b-w0amdkufwj] {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.04);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.feature-card:hover[b-w0amdkufwj] {
    transform: translateY(-6px);
    box-shadow: 0 24px 44px rgba(15, 23, 42, 0.08);
    border-color: rgba(13, 148, 136, 0.18);
}

.feature-icon[b-w0amdkufwj] {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    background: linear-gradient(135deg, #dffaf5 0%, #b9f3e5 100%);
    color: #0d9488;
    margin-bottom: 18px;
    transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}

.feature-card:hover .feature-icon[b-w0amdkufwj] {
    transform: scale(1.08) rotate(-6deg);
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
    box-shadow: 0 12px 24px rgba(13, 148, 136, 0.2);
    color: #ffffff;
}

.feature-card h3[b-w0amdkufwj] {
    margin: 0 0 0.75rem;
    font-size: 1.08rem;
    color: #0f172a;
}

.feature-card p[b-w0amdkufwj] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.75;
    color: #475569;
}

.process-grid[b-w0amdkufwj] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.process-step[b-w0amdkufwj] {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 26px 24px;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.04);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.process-step:hover[b-w0amdkufwj] {
    transform: translateY(-5px);
    box-shadow: 0 24px 42px rgba(15, 23, 42, 0.07);
    border-color: rgba(13, 148, 136, 0.18);
}

.step-index[b-w0amdkufwj] {
    position: absolute;
    top: 20px;
    right: 22px;
    color: rgba(13, 148, 136, 0.2);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.process-step h3[b-w0amdkufwj] {
    margin: 0 0 0.7rem;
    padding-right: 44px;
    font-size: 1.08rem;
    color: #0f172a;
}

.process-step p[b-w0amdkufwj] {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.75;
    color: #475569;
}

.why-layout[b-w0amdkufwj] {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 24px;
    align-items: stretch;
}

.why-panel[b-w0amdkufwj],
.why-list[b-w0amdkufwj] {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 28px;
    padding: clamp(24px, 3vw, 32px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.why-panel:hover[b-w0amdkufwj],
.why-list:hover[b-w0amdkufwj] {
    transform: translateY(-4px);
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.07);
    border-color: rgba(13, 148, 136, 0.16);
}

.why-panel h3[b-w0amdkufwj],
.why-list h3[b-w0amdkufwj] {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    color: #0f172a;
}

.why-panel p[b-w0amdkufwj],
.why-list p[b-w0amdkufwj] {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.8;
    color: #475569;
}

.why-points[b-w0amdkufwj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.why-point[b-w0amdkufwj] {
    border-radius: 18px;
    padding: 18px;
    background: linear-gradient(180deg, #f8fffd 0%, #f1faf8 100%);
    border: 1px solid rgba(13, 148, 136, 0.12);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.why-point:hover[b-w0amdkufwj] {
    transform: translateY(-3px);
    box-shadow: 0 16px 28px rgba(13, 148, 136, 0.08);
    border-color: rgba(13, 148, 136, 0.2);
}

.why-point strong[b-w0amdkufwj] {
    display: block;
    font-size: 0.98rem;
    color: #0f172a;
}

.why-point span[b-w0amdkufwj] {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #64748b;
}

.principles-grid[b-w0amdkufwj] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.principle-card[b-w0amdkufwj] {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.04);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.principle-card:hover[b-w0amdkufwj] {
    transform: translateY(-6px);
    box-shadow: 0 24px 40px rgba(15, 23, 42, 0.08);
    border-color: rgba(13, 148, 136, 0.18);
}

.principle-card .principle-icon[b-w0amdkufwj] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #dffaf5 0%, #b9f3e5 100%);
    color: #0d9488;
    font-size: 1.2rem;
    transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, color 0.22s ease;
}

.principle-card:hover .principle-icon[b-w0amdkufwj] {
    transform: scale(1.06) rotate(-5deg);
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
    box-shadow: 0 12px 22px rgba(13, 148, 136, 0.2);
    color: #ffffff;
}

.principle-card h3[b-w0amdkufwj] {
    margin: 0 0 0.6rem;
    font-size: 1.08rem;
    color: #0f172a;
}

.principle-card p[b-w0amdkufwj] {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.75;
    color: #475569;
}

.cta-banner[b-w0amdkufwj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 72px;
    padding: clamp(24px, 3vw, 40px);
    border-radius: 30px;
    background: linear-gradient(135deg, #0f172a 0%, #0d9488 52%, #14b8a6 100%);
    color: #ffffff;
    box-shadow: 0 24px 50px rgba(20, 184, 166, 0.2);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.cta-banner:hover[b-w0amdkufwj] {
    transform: translateY(-2px);
    box-shadow: 0 28px 56px rgba(20, 184, 166, 0.25);
}

.cta-banner h2[b-w0amdkufwj] {
    margin: 0.5rem 0 0;
    font-size: clamp(1.6rem, 2.5vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.05em;
}

.cta-banner span[b-w0amdkufwj] {
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.cta-banner .primary-btn[b-w0amdkufwj] {
    background: #ffffff;
    color: #0d9488;
    box-shadow: none;
    min-width: 180px;
}

.cta-banner .primary-btn:hover[b-w0amdkufwj] {
    background: #f8fffe;
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.14);
}

@media (max-width: 1024px) {
    .stats-grid[b-w0amdkufwj],
    .feature-grid[b-w0amdkufwj],
    .principles-grid[b-w0amdkufwj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-grid[b-w0amdkufwj] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .about-hero[b-w0amdkufwj],
    .story-grid[b-w0amdkufwj],
    .why-layout[b-w0amdkufwj] {
        grid-template-columns: 1fr;
    }

    .mini-stats[b-w0amdkufwj] {
        grid-template-columns: 1fr;
    }

    .cta-banner[b-w0amdkufwj] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .about-page[b-w0amdkufwj] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .stats-grid[b-w0amdkufwj],
    .feature-grid[b-w0amdkufwj],
    .principles-grid[b-w0amdkufwj],
    .why-points[b-w0amdkufwj] {
        grid-template-columns: 1fr;
    }

    .about-actions[b-w0amdkufwj] {
        flex-direction: column;
        align-items: stretch;
    }

    .primary-btn[b-w0amdkufwj],
    .secondary-btn[b-w0amdkufwj] {
        width: 100%;
    }

    .visual-card[b-w0amdkufwj],
    .story-copy[b-w0amdkufwj],
    .story-panel[b-w0amdkufwj],
    .why-panel[b-w0amdkufwj],
    .why-list[b-w0amdkufwj] {
        padding: 20px;
    }

    .cta-banner[b-w0amdkufwj] {
        padding: 22px 20px;
    }
}

/* Distinct responsive accents for the About page */
.about-page[b-w0amdkufwj] { isolation: isolate; }
.about-page[b-w0amdkufwj]::after {
    content: "";
    position: absolute;
    top: 18rem;
    right: -3rem;
    width: min(28vw, 360px);
    height: 220px;
    background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(13, 148, 136, .08) 12px 13px, transparent 13px 25px);
    clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%);
    pointer-events: none;
}

.about-hero[b-w0amdkufwj] {
    position: relative;
    isolation: isolate;
}

.about-hero[b-w0amdkufwj]::before,
.about-hero[b-w0amdkufwj]::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.about-hero[b-w0amdkufwj]::before {
    top: -1rem; left: -1rem; width: 76px; height: 76px;
    border-top: 2px solid rgba(13, 148, 136, .35);
    border-left: 2px solid rgba(13, 148, 136, .35);
    box-shadow: -10px -10px 0 -8px rgba(59, 130, 246, .24);
}

.about-hero[b-w0amdkufwj]::after {
    right: 2%; bottom: 4%; width: 46px; height: 46px;
    background: linear-gradient(90deg, transparent 46%, rgba(13, 148, 136, .42) 47% 53%, transparent 54%), linear-gradient(0deg, transparent 46%, rgba(13, 148, 136, .42) 47% 53%, transparent 54%);
    transform: rotate(45deg);
}

.about-hero > *[b-w0amdkufwj],
.section > *[b-w0amdkufwj] { position: relative; z-index: 1; }

.section[b-w0amdkufwj] {
    position: relative;
    isolation: isolate;
}

.section[b-w0amdkufwj]::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -1rem; right: 1%; width: 58px; height: 58px;
    border-top: 2px solid rgba(13, 148, 136, .18);
    border-right: 2px solid rgba(13, 148, 136, .18);
    pointer-events: none;
}

.section:nth-of-type(even)[b-w0amdkufwj]::before {
    right: auto; left: 1%; border-right: 0;
    border-left: 2px solid rgba(59, 130, 246, .2);
}

.section-header h2[b-w0amdkufwj]::after {
    content: "";
    display: block;
    width: 48px; height: 4px; margin: 14px auto 0;
    border-radius: 99px;
    background: linear-gradient(90deg, #0d9488, #60a5fa);
    box-shadow: 10px 0 0 -1px rgba(13, 148, 136, .2), 20px 0 0 -2px rgba(59, 130, 246, .15);
}

.stat-card[b-w0amdkufwj] { position: relative; overflow: hidden; }
.stat-card[b-w0amdkufwj]::after {
    content: "";
    position: absolute;
    top: 0; right: 0; width: 34px; height: 34px;
    border-top: 2px solid rgba(13, 148, 136, .22);
    border-right: 2px solid rgba(13, 148, 136, .22);
    transition: transform .2s ease;
}
.stat-card:hover[b-w0amdkufwj]::after { transform: translate(-4px, 4px); }

@media (max-width: 760px) {
    .about-page[b-w0amdkufwj]::after { top: 22rem; right: -5rem; width: 180px; height: 150px; }
    .about-hero[b-w0amdkufwj]::before { top: 0; left: 0; width: 46px; height: 46px; }
    .about-hero[b-w0amdkufwj]::after { right: 0; bottom: 0; width: 30px; height: 30px; }
    .section[b-w0amdkufwj]::before { top: -.5rem; width: 36px; height: 36px; }
}

@media (max-width: 460px) {
    .about-page[b-w0amdkufwj]::after { width: 120px; height: 110px; opacity: .7; }
    .about-hero[b-w0amdkufwj]::before { width: 34px; height: 34px; }
    .about-hero[b-w0amdkufwj]::after { width: 22px; height: 22px; }
    .section[b-w0amdkufwj]::before { width: 26px; height: 26px; }
}
/* /Pages/Public/Blog.razor.rz.scp.css */
/* Shared page styles and design tokens */
.blog-page[b-4abtd0n33q],.article-page[b-4abtd0n33q] {
    --blog-ink: #102b30;
    --blog-muted: #647b7b;
    --blog-teal: #0c8a7d;
    --blog-mint: #dff4ee;
    --blog-paper: #f6faf8;
    color: var(--blog-ink);
    font-family: 'Quicksand', sans-serif;
}

.content-width[b-4abtd0n33q] {
    width: min(1400px,calc(100% - 48px));
    margin-inline: auto;
}

/* Blog landing page */
.blog-hero[b-4abtd0n33q] {
    padding: 38px 24px 0;
    background: #fff;
}

.blog-hero-inner[b-4abtd0n33q] {
    min-height: 410px;
    max-width: 1400px;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background:
        radial-gradient(ellipse at 80% 30%,rgba(158,229,208,.72),transparent 28%),
        radial-gradient(ellipse at 18% 100%,rgba(192,235,222,.7),transparent 34%),
        linear-gradient(120deg,#eef8f5 0%,#f7fbf9 50%,#e8f5f0 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 68px 24px 74px;
}

.blog-kicker[b-4abtd0n33q],.section-eyebrow[b-4abtd0n33q] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #268578;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.blog-kicker[b-4abtd0n33q] {
    padding: 10px 15px;
    border: 1px solid rgba(12,138,125,.18);
    border-radius: 99px;
    background: rgba(255,255,255,.68);
    letter-spacing: .06em;
    text-transform: none;
}

.blog-hero h1[b-4abtd0n33q] {
    position: relative;
    z-index: 1;
    margin: 24px 0 14px;
    font-size: clamp(2.8rem,6vw,5.1rem);
    line-height: 1.02;
    letter-spacing: -.065em;
    font-weight: 700;
    color: #10363a;
}

.blog-hero p[b-4abtd0n33q] {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin: 0;
    color: #637978;
    font-size: 1.05rem;
    line-height: 1.75;
}

.blog-hero-link[b-4abtd0n33q] {
    position: relative;
    z-index: 1;
    margin-top: 26px;
    color: #187a70;
    font-weight: 800;
    text-decoration: none;
}

.blog-hero-link i[b-4abtd0n33q] {
    margin-left: 8px;
}

.blog-hero-orbit[b-4abtd0n33q] {
    position: absolute;
    border: 1px solid rgba(12,138,125,.12);
    border-radius: 50%;
    pointer-events: none;
}

.orbit-one[b-4abtd0n33q] {
    width: 440px;
    height: 440px;
    right: -125px;
    top: -220px;
}

.orbit-two[b-4abtd0n33q] {
    width: 570px;
    height: 570px;
    right: -190px;
    top: -285px;
}

.blog-hero-note[b-4abtd0n33q] {
    position: absolute;
    bottom: 28px;
    right: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    color: #55847c;
    font-size: .75rem;
    font-weight: 700;
}

.blog-hero-note i[b-4abtd0n33q] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #169384;
}

.blog-featured[b-4abtd0n33q] {
    padding-top: 86px;
    padding-bottom: 86px;
}

.section-eyebrow[b-4abtd0n33q] {
    font-size: .7rem;
    letter-spacing: .14em;
}

.section-eyebrow>span[b-4abtd0n33q] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #35b29d;
    box-shadow: 0 0 0 4px #e2f5ef;
}

.blog-section-heading[b-4abtd0n33q],.library-heading[b-4abtd0n33q] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin: 18px 0 32px;
}

.blog-section-heading h2[b-4abtd0n33q],.library-heading h2[b-4abtd0n33q],.article-next h2[b-4abtd0n33q] {
    margin: 0;
    font-size: clamp(2.1rem,4vw,3.3rem);
    line-height: 1.08;
    letter-spacing: -.055em;
    font-weight: 700;
}

.blog-section-heading h2 span[b-4abtd0n33q],.library-heading h2 span[b-4abtd0n33q],.article-next h2 span[b-4abtd0n33q] {
    color: #90b3ac;
}

.blog-section-heading p[b-4abtd0n33q] {
    margin: 13px 0 0;
    color: var(--blog-muted);
    font-size: .98rem;
}

.article-count[b-4abtd0n33q] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #62847d;
}

.article-count span[b-4abtd0n33q] {
    color: #b8c9c4;
    font-weight: 500;
    margin: 0 7px;
}

.featured-story[b-4abtd0n33q] {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    min-height: 400px;
    border: 1px solid #e5eeea;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: #fff;
    transition: transform .25s ease,box-shadow .25s ease;
}

.featured-story:hover[b-4abtd0n33q],.blog-card:hover[b-4abtd0n33q] {
    transform: translateY(-5px);
    box-shadow: 0 22px 50px rgba(20,69,62,.11);
}

.featured-image[b-4abtd0n33q],.card-image[b-4abtd0n33q],.article-cover[b-4abtd0n33q] {
    background-size: cover;
    background-position: center;
}

.featured-image[b-4abtd0n33q] {
    min-height: 400px;
    position: relative;
    background-color: #d8e9e1;
}

.featured-image[b-4abtd0n33q]::after,.card-image[b-4abtd0n33q]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,rgba(7,34,29,.25),transparent 45%);
}

.image-label[b-4abtd0n33q] {
    position: absolute;
    z-index: 1;
    left: 22px;
    top: 22px;
    padding: 9px 13px;
    background: rgba(255,255,255,.92);
    border-radius: 99px;
    color: #276f66;
    font-size: .74rem;
    font-weight: 800;
}

.featured-copy[b-4abtd0n33q] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 42px 40px 28px;
}

.post-category[b-4abtd0n33q] {
    color: #27877b;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.post-category span[b-4abtd0n33q] {
    padding: 0 6px;
    color: #a8bcb6;
}

.featured-copy h3[b-4abtd0n33q] {
    margin: 18px 0 12px;
    font-size: clamp(1.65rem,2.6vw,2.35rem);
    line-height: 1.18;
    letter-spacing: -.045em;
}

.featured-copy>p[b-4abtd0n33q],.card-body>p[b-4abtd0n33q] {
    margin: 0;
    color: var(--blog-muted);
    font-size: .94rem;
    line-height: 1.75;
}

.read-link[b-4abtd0n33q] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 23px;
    color: #148477;
    font-weight: 800;
    font-size: .86rem;
}

.post-byline[b-4abtd0n33q],.article-author[b-4abtd0n33q] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: auto;
    padding-top: 26px;
}

.author-avatar[b-4abtd0n33q] {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #dff4ec;
    color: #187d70;
    font-weight: 800;
}

.post-byline>span:last-child[b-4abtd0n33q],.article-author>span:last-child[b-4abtd0n33q] {
    display: grid;
    gap: 3px;
}

.post-byline strong[b-4abtd0n33q],.article-author strong[b-4abtd0n33q] {
    font-size: .79rem;
}

.post-byline small[b-4abtd0n33q],.article-author small[b-4abtd0n33q] {
    font-size: .73rem;
    color: #849692;
}

.blog-library[b-4abtd0n33q] {
    padding: 5px 0 100px;
}

.library-heading[b-4abtd0n33q] {
    align-items: end;
    margin-bottom: 30px;
}

.library-heading h2[b-4abtd0n33q] {
    margin-top: 17px;
}

.library-aside[b-4abtd0n33q] {
    padding-bottom: 5px;
    color: #788b87;
    font-size: .83rem;
    line-height: 1.7;
    text-align: right;
}

.blog-grid[b-4abtd0n33q] {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 22px;
}

.blog-card[b-4abtd0n33q] {
    overflow: hidden;
    border: 1px solid #e5eeea;
    border-radius: 17px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: transform .25s ease,box-shadow .25s ease;
}

.card-image[b-4abtd0n33q] {
    position: relative;
    height: 215px;
    background-color: #d8e9e1;
}

.card-image>span[b-4abtd0n33q] {
    position: absolute;
    z-index: 1;
    left: 15px;
    top: 15px;
    padding: 7px 10px;
    border-radius: 99px;
    background: rgba(255,255,255,.92);
    font-size: .68rem;
    font-weight: 800;
    color: #287b71;
}

.card-body[b-4abtd0n33q] {
    padding: 20px 20px 22px;
}

.card-meta[b-4abtd0n33q] {
    color: #8b9c97;
    font-size: .72rem;
    font-weight: 700;
}

.card-meta span[b-4abtd0n33q] {
    padding: 0 5px;
    color: #bdcbc6;
}

.card-body h3[b-4abtd0n33q] {
    min-height: 54px;
    margin: 12px 0 9px;
    font-size: 1.16rem;
    line-height: 1.32;
    letter-spacing: -.025em;
}

.card-body>p[b-4abtd0n33q] {
    font-size: .84rem;
    line-height: 1.65;
}

.card-body .read-link[b-4abtd0n33q] {
    margin-top: 17px;
    font-size: .79rem;
}

.blog-cta[b-4abtd0n33q] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    /* margin-bottom: 90px; */
    padding: 48px 58px;
    border-radius: 22px;
    background: #113a3b;
    color: #fff;
}

.blog-cta[b-4abtd0n33q]::after {
    content: "";
    position: absolute;
    width: 390px;
    height: 390px;
    right: 80px;
    top: -220px;
    border: 1px solid rgba(134,226,196,.18);
    border-radius: 50%;
    box-shadow: 0 0 0 45px rgba(134,226,196,.03),0 0 0 90px rgba(134,226,196,.03);
}

.blog-cta .section-eyebrow[b-4abtd0n33q] {
    color: #9ce3cd;
}

.blog-cta .section-eyebrow>span[b-4abtd0n33q] {
    background: #83d7b8;
    box-shadow: 0 0 0 4px rgba(131,215,184,.15);
}

.blog-cta h2[b-4abtd0n33q] {
    margin: 17px 0 10px;
    font-size: clamp(2rem,4vw,3rem);
    line-height: 1.05;
    letter-spacing: -.05em;
}

.blog-cta p[b-4abtd0n33q] {
    max-width: 470px;
    margin: 0;
    color: #b7d0ca;
    line-height: 1.7;
    font-size: .92rem;
}

.blog-cta-button[b-4abtd0n33q] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding: 12px 17px;
    border-radius: 99px;
    background: #b6edda;
    color: #113a3b;
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
}

.cta-mark[b-4abtd0n33q] {
    position: relative;
    z-index: 1;
    width: 155px;
    height: 155px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(161,227,205,.4);
    border-radius: 50%;
    color: #9ce3cd;
}

.cta-mark span[b-4abtd0n33q] {
    font-size: 7rem;
    font-weight: 700;
    line-height: 1;
}

.cta-mark i[b-4abtd0n33q] {
    position: absolute;
    right: 2px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #b6edda;
    color: #113a3b;
}

/* Article page and reading sidebar */
.article-page[b-4abtd0n33q] {
    padding-bottom: 90px;
}

.article-top[b-4abtd0n33q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
    color: #849692;
    font-size: .77rem;
    font-weight: 700;
}

.article-top a[b-4abtd0n33q] {
    color: #37867b;
    text-decoration: none;
}

.article-top a i[b-4abtd0n33q] {
    margin-right: 7px;
}

.article-shell[b-4abtd0n33q] {
    width: min(840px,calc(100% - 48px));
    margin: 76px auto 0;
}

.article-header[b-4abtd0n33q] {
    text-align: center;
}

.article-header h1[b-4abtd0n33q] {
    margin: 20px 0 16px;
    font-size: clamp(2.4rem,5vw,4.3rem);
    line-height: 1.06;
    letter-spacing: -.065em;
}

.article-deck[b-4abtd0n33q] {
    max-width: 680px;
    margin: 0 auto;
    color: var(--blog-muted);
    font-size: 1.08rem;
    line-height: 1.75;
}

.article-author[b-4abtd0n33q] {
    justify-content: center;
    margin-top: 25px;
    padding: 0;
}

.article-author>span:last-child[b-4abtd0n33q] {
    text-align: left;
}

.article-cover[b-4abtd0n33q] {
    position: relative;
    height: 430px;
    margin-top: 38px;
    border-radius: 20px;
    background-color: #d8e9e1;
}

.article-cover>span[b-4abtd0n33q] {
    position: absolute;
    left: 18px;
    bottom: 18px;
    padding: 9px 13px;
    border-radius: 99px;
    background: rgba(255,255,255,.92);
    color: #287b71;
    font-size: .73rem;
    font-weight: 800;
}

.article-content[b-4abtd0n33q] {
    max-width: 700px;
    margin: 48px auto 0;
    color: #405b58;
    font-size: 1rem;
    line-height: 1.9;
}

.article-content p[b-4abtd0n33q] {
    margin: 0 0 22px;
}

.article-content .article-intro[b-4abtd0n33q] {
    font-size: 1.16rem;
    line-height: 1.85;
    color: #234440;
}

.article-content h2[b-4abtd0n33q] {
    margin: 42px 0 13px;
    color: #143b39;
    font-size: 1.7rem;
    line-height: 1.2;
    letter-spacing: -.04em;
}

.article-callout[b-4abtd0n33q] {
    display: flex;
    gap: 18px;
    margin: 34px 0;
    padding: 24px 26px;
    border-left: 3px solid #35b29d;
    border-radius: 0 14px 14px 0;
    background: #eff8f4;
}

.article-callout i[b-4abtd0n33q] {
    color: #28a18f;
    font-size: 1.4rem;
}

.article-callout p[b-4abtd0n33q] {
    margin: 0;
    color: #28534c;
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.6;
}

.article-tags[b-4abtd0n33q] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 38px;
    padding-top: 22px;
    border-top: 1px solid #e5eeea;
}

.article-tags>span[b-4abtd0n33q] {
    width: 100%;
    margin-bottom: 3px;
    color: #68817b;
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.article-tags a[b-4abtd0n33q] {
    padding: 8px 12px;
    border: 1px solid #dcebe5;
    border-radius: 99px;
    color: #3b7269;
    text-decoration: none;
    font-size: .76rem;
    font-weight: 700;
}

.article-next[b-4abtd0n33q] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-top: 85px;
    padding: 34px 0;
    border-top: 1px solid #e4ece8;
}

.mobile-break[b-4abtd0n33q] {
    display: none;
}

.article-shell[b-4abtd0n33q] {
    width: min(1080px,calc(100% - 48px));
}

.article-page[b-4abtd0n33q] {
    scroll-behavior: smooth;
}

.article-section[b-4abtd0n33q] {
    scroll-margin-top: 110px;
}

.article-body-layout[b-4abtd0n33q] {
    display: grid;
    grid-template-columns: minmax(0,700px) 260px;
    gap: 58px;
    align-items: start;
    margin: 48px auto 0;
    max-width: 1018px;
}

.article-content[b-4abtd0n33q] {
    max-width: none;
    margin: 0;
}

.article-sidebar[b-4abtd0n33q] {
    position: sticky;
    top: 110px;
    align-self: start;
    display: grid;
    gap: 16px;
    padding-top: 5px;
}

.sidebar-card[b-4abtd0n33q] {
    padding: 21px;
    border: 1px solid #e4e9df;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(30,69,54,.04);
}

.sidebar-eyebrow[b-4abtd0n33q] {
    display: block;
    margin-bottom: 13px;
    color: #77887e;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.article-toc[b-4abtd0n33q] {
    display: grid;
    gap: 12px;
}

.article-toc a[b-4abtd0n33q] {
    padding-left: 12px;
    border-left: 2px solid #dce8d9;
    color: #577469;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.5;
    transition: color .2s ease,border-color .2s ease;
}

.article-toc a:hover[b-4abtd0n33q] {
    border-color: #d2a33f;
    color: #17745f;
}

.sidebar-cta[b-4abtd0n33q] {
    border-color: #e0ebdc;
    background: #eaf3e8;
}

.sidebar-icon[b-4abtd0n33q] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: #d6e9d2;
    color: #167b66;
}

.sidebar-cta h3[b-4abtd0n33q] {
    margin: 15px 0 8px;
    color: #20463a;
    font-size: 1.1rem;
    line-height: 1.28;
    letter-spacing: -.025em;
}

.sidebar-cta p[b-4abtd0n33q] {
    margin: 0;
    color: #6b8075;
    font-size: .78rem;
    line-height: 1.65;
}

.sidebar-cta>a[b-4abtd0n33q] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    color: #167b66;
    text-decoration: none;
    font-size: .76rem;
    font-weight: 800;
}

/* Base responsive layout */
@media(max-width:850px) {
    .blog-hero-inner[b-4abtd0n33q] {
        min-height: 365px;
    }
    .featured-story[b-4abtd0n33q] {
        grid-template-columns: 1fr;
    }
    .featured-image[b-4abtd0n33q] {
        min-height: 330px;
    }
    .featured-copy[b-4abtd0n33q] {
        min-height: 320px;
    }
    .blog-grid[b-4abtd0n33q] {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .blog-cta[b-4abtd0n33q] {
        padding: 40px;
    }
    .cta-mark[b-4abtd0n33q] {
        width: 125px;
        height: 125px;
    }
    .cta-mark span[b-4abtd0n33q] {
        font-size: 5.5rem;
    }
    .article-body-layout[b-4abtd0n33q] {
        grid-template-columns: minmax(0,1fr) 225px;
        gap: 28px;
    }
}

@media(max-width:600px) {
    .content-width[b-4abtd0n33q] {
        width: calc(100% - 36px);
    }
    .blog-hero[b-4abtd0n33q] {
        padding: 18px 12px 0;
    }
    .blog-hero-inner[b-4abtd0n33q] {
        min-height: 355px;
        border-radius: 21px;
        padding: 58px 20px;
    }
    .blog-hero h1[b-4abtd0n33q] {
        font-size: clamp(2.55rem,12vw,3.6rem);
    }
    .blog-hero p[b-4abtd0n33q] {
        font-size: .92rem;
    }
    .blog-hero-note[b-4abtd0n33q] {
        right: 17px;
        bottom: 15px;
    }
    .blog-featured[b-4abtd0n33q] {
        padding-top: 62px;
        padding-bottom: 65px;
    }
    .blog-section-heading[b-4abtd0n33q],.library-heading[b-4abtd0n33q] {
        align-items: flex-start;
        margin-bottom: 23px;
    }
    .blog-section-heading h2[b-4abtd0n33q],.library-heading h2[b-4abtd0n33q],.article-next h2[b-4abtd0n33q] {
        font-size: 2.2rem;
    }
    .blog-section-heading p[b-4abtd0n33q] {
        font-size: .85rem;
        line-height: 1.6;
    }
    .article-count[b-4abtd0n33q] {
        font-size: .95rem;
        white-space: nowrap;
        padding-top: 5px;
    }
    .featured-image[b-4abtd0n33q] {
        min-height: 245px;
    }
    .featured-copy[b-4abtd0n33q] {
        min-height: 330px;
        padding: 27px 23px 23px;
    }
    .featured-copy h3[b-4abtd0n33q] {
        font-size: 1.8rem;
    }
    .featured-copy>p[b-4abtd0n33q] {
        font-size: .88rem;
    }
    .blog-library[b-4abtd0n33q] {
        padding-bottom: 68px;
    }
    .library-heading[b-4abtd0n33q] {
        display: block;
    }
    .library-aside[b-4abtd0n33q] {
        display: block;
        text-align: left;
        margin-top: 12px;
    }
    .mobile-break[b-4abtd0n33q] {
        display: block;
    }
    .blog-grid[b-4abtd0n33q] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .card-image[b-4abtd0n33q] {
        height: 225px;
    }
    .card-body h3[b-4abtd0n33q] {
        min-height: 0;
        font-size: 1.22rem;
    }
    .blog-cta[b-4abtd0n33q] {
        width: calc(100% - 36px);
        margin-bottom: 58px;
        padding: 32px 25px;
    }
    .blog-cta h2[b-4abtd0n33q] {
        font-size: 2.3rem;
    }
    .blog-cta p[b-4abtd0n33q] {
        font-size: .86rem;
    }
    .cta-mark[b-4abtd0n33q] {
        position: absolute;
        right: -25px;
        top: -15px;
        width: 110px;
        height: 110px;
        opacity: .35;
    }
    .cta-mark span[b-4abtd0n33q] {
        font-size: 5rem;
    }
    .article-page[b-4abtd0n33q] {
        padding-bottom: 55px;
    }
    .article-top[b-4abtd0n33q] {
        width: calc(100% - 36px);
        padding-top: 17px;
    }
    .article-top>span[b-4abtd0n33q] {
        display: none;
    }
    .article-shell[b-4abtd0n33q] {
        width: calc(100% - 36px);
        margin-top: 53px;
    }
    .article-header h1[b-4abtd0n33q] {
        font-size: 2.55rem;
    }
    .article-deck[b-4abtd0n33q] {
        font-size: .94rem;
        line-height: 1.7;
    }
    .article-cover[b-4abtd0n33q] {
        height: 260px;
        margin-top: 27px;
        border-radius: 15px;
    }
    .article-body-layout[b-4abtd0n33q] {
        display: flex;
        flex-direction: column;
        gap: 28px;
        margin-top: 34px;
    }
    .article-content[b-4abtd0n33q] {
        font-size: .94rem;
        line-height: 1.85;
    }
    .article-content .article-intro[b-4abtd0n33q] {
        font-size: 1.05rem;
    }
    .article-content h2[b-4abtd0n33q] {
        font-size: 1.5rem;
        margin-top: 34px;
    }
    .article-callout[b-4abtd0n33q] {
        padding: 19px;
    }
    .article-callout p[b-4abtd0n33q] {
        font-size: 1rem;
    }
    .article-sidebar[b-4abtd0n33q] {
        position: static;
        width: 100%;
        grid-template-columns: 1fr;
    }
    .article-next[b-4abtd0n33q] {
        margin-top: 55px;
        align-items: flex-start;
        gap: 16px;
    }
    .article-next .read-link[b-4abtd0n33q] {
        white-space: nowrap;
        margin-top: 5px;
        font-size: .75rem;
    }
}

/* Single-theme editorial refresh */

.blog-page[b-4abtd0n33q] {
    background: #f8f8f2;
    color: #173b35;
}

.blog-hero[b-4abtd0n33q] {
    padding: 30px 24px 0;
    background: #f8f8f2;
}

.blog-hero-inner[b-4abtd0n33q] {
    width: min(1320px,100%);
    min-height: 535px;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    align-items: center;
    gap: 26px;
    padding: 58px clamp(34px,6vw,86px);
    border-radius: 30px;
    background: #eaf3e8;
    text-align: left;
}

.blog-hero-copy[b-4abtd0n33q] {
    position: relative;
    z-index: 2;
    max-width: 590px;
}

.blog-kicker[b-4abtd0n33q] {
    color: #fff;
    background: #187e69;
    border: 0;
    padding: 10px 15px;
    font-size: .74rem;
    letter-spacing: .03em;
    box-shadow: 0 8px 18px rgba(16,95,76,.15);
}

.blog-kicker i[b-4abtd0n33q] {
    font-size: .9rem;
}

.blog-hero h1[b-4abtd0n33q] {
    margin: 25px 0 17px;
    color: #153b34;
    font-size: clamp(3.1rem,5.6vw,5.35rem);
    line-height: .99;
    letter-spacing: -.075em;
}

.blog-hero h1 span[b-4abtd0n33q] {
    color: #18836d;
}

.blog-hero p[b-4abtd0n33q] {
    max-width: 450px;
    color: #57726a;
    font-size: 1.05rem;
    line-height: 1.75;
}

.blog-hero-link[b-4abtd0n33q] {
    display: inline-flex;
    align-items: center;
    margin-top: 23px;
    padding: 13px 18px;
    border-radius: 9px;
    background: #173e36;
    color: white;
    font-size: .84rem;
    transition: transform .2s ease,background .2s ease;
}

.blog-hero-link:hover[b-4abtd0n33q] {
    transform: translateY(-2px);
    background: #0f6657;
    color: #fff;
}

.blog-hero-link i[b-4abtd0n33q] {
    margin-left: 12px;
}

.hero-proof[b-4abtd0n33q] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 39px;
    color: #668078;
    font-size: .73rem;
    font-weight: 700;
    line-height: 1.4;
}

.proof-avatars[b-4abtd0n33q] {
    display: flex;
    padding-left: 4px;
}

.proof-avatars i[b-4abtd0n33q] {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-left: -4px;
    border: 2px solid #eaf3e8;
    border-radius: 50%;
    background: #f4bd85;
    color: #3e5149;
    font-size: .68rem;
    font-style: normal;
    font-weight: 800;
}

.proof-avatars i:nth-child(2)[b-4abtd0n33q] {
    background: #b8d9c2;
}

.proof-avatars i:nth-child(3)[b-4abtd0n33q] {
    background: #f1d782;
}

.blog-hero-art[b-4abtd0n33q] {
    position: relative;
    justify-self: end;
    width: min(100%,485px);
    height: 410px;
}

.hero-art-glow[b-4abtd0n33q] {
    position: absolute;
    inset: 2% 3% 7% 2%;
    border-radius: 48% 52% 44% 56%;
    background: #c8e2c8;
    transform: rotate(-7deg);
}

.hero-art-frame[b-4abtd0n33q] {
    position: absolute;
    inset: 0 8% 4% 8%;
    overflow: hidden;
    border: 7px solid rgba(255,255,255,.7);
    border-radius: 170px 170px 24px 24px;
    background: linear-gradient(180deg,rgba(17,50,38,.08),rgba(12,45,35,.68)),var(--hero-image) center/cover,#b7d3bc;
    box-shadow: 0 24px 55px rgba(33,79,60,.19);
    transform: rotate(2deg);
}

.hero-art-top[b-4abtd0n33q],.hero-art-bottom[b-4abtd0n33q] {
    position: absolute;
    left: 24px;
    right: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.hero-art-top[b-4abtd0n33q] {
    top: 25px;
}

.hero-art-top span:first-child[b-4abtd0n33q] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-art-top i[b-4abtd0n33q] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #b7ef74;
    box-shadow: 0 0 0 4px rgba(183,239,116,.2);
}

.hero-art-bottom[b-4abtd0n33q] {
    bottom: 26px;
    font-size: 1rem;
    line-height: 1.12;
    letter-spacing: .06em;
}

.hero-art-bottom i[b-4abtd0n33q] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 50%;
    font-size: 1rem;
}

.hero-float-card[b-4abtd0n33q] {
    position: absolute;
    right: -1%;
    bottom: 11%;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px 14px 14px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 16px 35px rgba(29,67,52,.17);
    transform: rotate(-2deg);
}

.float-icon[b-4abtd0n33q] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #d9f1dc;
    color: #167b66;
}

.hero-float-card strong[b-4abtd0n33q],.hero-float-card small[b-4abtd0n33q] {
    display: block;
}

.hero-float-card strong[b-4abtd0n33q] {
    color: #21473d;
    font-size: .77rem;
    line-height: 1.25;
}

.hero-float-card small[b-4abtd0n33q] {
    margin-top: 4px;
    color: #7b9088;
    font-size: .63rem;
}

.hero-art-sparkle[b-4abtd0n33q] {
    position: absolute;
    color: #f0b453;
    font-size: 2rem;
}

.sparkle-one[b-4abtd0n33q] {
    top: 4%;
    right: 8%;
}

.sparkle-two[b-4abtd0n33q] {
    bottom: 10%;
    left: 1%;
    font-size: 1.3rem;
    color: #18836d;
}

.blog-featured[b-4abtd0n33q] {
    padding-top: 90px;
    padding-bottom: 75px;
}

.section-eyebrow[b-4abtd0n33q] {
    color: #438172;
}

.section-eyebrow>span[b-4abtd0n33q] {
    background: #d2a33f;
    box-shadow: 0 0 0 4px #f7ecd0;
}

.blog-section-heading[b-4abtd0n33q],.library-heading[b-4abtd0n33q] {
    margin-top: 17px;
    margin-bottom: 30px;
}

.blog-section-heading h2[b-4abtd0n33q],.library-heading h2[b-4abtd0n33q],.article-next h2[b-4abtd0n33q] {
    color: #183c35;
}

.blog-section-heading h2 span[b-4abtd0n33q],.library-heading h2 span[b-4abtd0n33q],.article-next h2 span[b-4abtd0n33q] {
    color: #19836f;
}

.blog-section-heading p[b-4abtd0n33q] {
    color: #71847b;
}

.article-count[b-4abtd0n33q] {
    color: #1b7766;
}

.article-count span[b-4abtd0n33q] {
    color: #c3cfc5;
}

.featured-story[b-4abtd0n33q] {
    grid-template-columns: 1.06fr .94fr;
    min-height: 395px;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 9px 30px rgba(30,69,54,.055);
}

.featured-image[b-4abtd0n33q] {
    min-height: 395px;
    background-color: #d4e2d5;
}

.featured-image[b-4abtd0n33q]::after {
    background: linear-gradient(0deg,rgba(11,42,32,.25),transparent 48%);
}

.image-label[b-4abtd0n33q] {
    top: 20px;
    left: 20px;
    border: 1px solid rgba(24,131,111,.08);
    color: #176f5f;
}

.featured-copy[b-4abtd0n33q] {
    padding: 38px 40px 28px;
}

.post-category[b-4abtd0n33q] {
    color: #16806c;
}

.featured-copy h3[b-4abtd0n33q] {
    color: #183d35;
}

.featured-copy>p[b-4abtd0n33q],.card-body>p[b-4abtd0n33q] {
    color: #70817a;
}

.read-link[b-4abtd0n33q] {
    color: #157a67;
}

.post-byline[b-4abtd0n33q] {
    border-top: 1px solid #edf0e9;
    width: 100%;
}

.author-avatar[b-4abtd0n33q] {
    background: #e0f0df;
    color: #187b65;
}

.blog-library[b-4abtd0n33q] {
    padding: 16px 0 95px;
}

.library-heading h2[b-4abtd0n33q] {
    margin-top: 17px;
}

.library-aside[b-4abtd0n33q] {
    color: #7c8980;
}

.blog-grid[b-4abtd0n33q] {
    gap: 20px;
}

.blog-card[b-4abtd0n33q] {
    border: 1px solid #e9ece4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(30,69,54,.035);
}

.blog-card:hover[b-4abtd0n33q] {
    box-shadow: 0 18px 38px rgba(30,69,54,.12);
}

.card-image[b-4abtd0n33q] {
    height: 205px;
    background-color: #d9e5d7;
}

.card-image[b-4abtd0n33q]::after {
    background: linear-gradient(0deg,rgba(13,41,31,.15),transparent 45%);
}

.card-image>span[b-4abtd0n33q] {
    color: #226d5e;
}

.card-body[b-4abtd0n33q] {
    padding: 20px 20px 22px;
}

.card-meta[b-4abtd0n33q] {
    color: #89978c;
}

.card-body h3[b-4abtd0n33q] {
    color: #1b3e36;
}

.card-body>p[b-4abtd0n33q] {
    min-height: 68px;
}

.blog-cta[b-4abtd0n33q] {
    margin-bottom: 88px;
    border-radius: 20px;
    background: #dcebd8;
    color: #173e36;
}

.blog-cta[b-4abtd0n33q]::after {
    border-color: rgba(24,131,111,.15);
    box-shadow: 0 0 0 45px rgba(24,131,111,.035),0 0 0 90px rgba(24,131,111,.035);
}

.blog-cta .section-eyebrow[b-4abtd0n33q] {
    color: #367a69;
}

.blog-cta .section-eyebrow>span[b-4abtd0n33q] {
    background: #d2a33f;
    box-shadow: 0 0 0 4px rgba(210,163,63,.14);
}

.blog-cta h2[b-4abtd0n33q] {
    color: #173e36;
}

.blog-cta p[b-4abtd0n33q] {
    color: #647b70;
}

.blog-cta-button[b-4abtd0n33q] {
    background: #173e36;
    color: #fff;
}

.blog-cta-button:hover[b-4abtd0n33q] {
    background: #0e6656;
    color: #fff;
}

.cta-mark[b-4abtd0n33q] {
    border-color: rgba(24,131,111,.34);
    color: #18836d;
}

.cta-mark i[b-4abtd0n33q] {
    background: #f0c96d;
    color: #173e36;
}

.article-page[b-4abtd0n33q] {
    background: #f8f8f2;
    color: #173b35;
}

.article-top a[b-4abtd0n33q] {
    color: #187d69;
}

.article-shell[b-4abtd0n33q] {
    color: #173b35;
}

.article-header h1[b-4abtd0n33q] {
    color: #173b35;
}

.article-deck[b-4abtd0n33q] {
    color: #6b7f76;
}

.article-cover[b-4abtd0n33q] {
    box-shadow: 0 18px 44px rgba(31,72,54,.12);
}

.article-content[b-4abtd0n33q] {
    color: #506b61;
}

.article-content .article-intro[b-4abtd0n33q] {
    color: #244a3f;
}

.article-content h2[b-4abtd0n33q] {
    color: #173e36;
}

.article-callout[b-4abtd0n33q] {
    border-color: #1a8b73;
    background: #eaf3e8;
}

.article-callout i[b-4abtd0n33q] {
    color: #1b8b72;
}

.article-callout p[b-4abtd0n33q] {
    color: #285447;
}

.article-tags[b-4abtd0n33q] {
    border-color: #e1e8db;
}

.article-tags>span[b-4abtd0n33q] {
    color: #648075;
}

.article-tags a[b-4abtd0n33q] {
    border-color: #dbe7d8;
    color: #377565;
}

.article-tags a:hover[b-4abtd0n33q] {
    background: #e5f1e3;
}

.article-top[b-4abtd0n33q] {
    color: #74867d;
}

.article-next[b-4abtd0n33q] {
    border-color: #e1e8dc;
}

@media(max-width:900px) {
    .blog-hero-inner[b-4abtd0n33q] {
        min-height: 490px;
        padding: 48px 42px;
        grid-template-columns: 1fr .85fr;
        gap: 8px;
    }
    .blog-hero h1[b-4abtd0n33q] {
        font-size: clamp(3rem,6.4vw,4.4rem);
    }
    .blog-hero-art[b-4abtd0n33q] {
        height: 350px;
    }
    .hero-art-frame[b-4abtd0n33q] {
        inset-inline: 4%;
    }
    .hero-float-card[b-4abtd0n33q] {
        right: -5%;
        bottom: 8%;
    }
    .featured-story[b-4abtd0n33q] {
        grid-template-columns: 1fr .95fr;
    }
    .featured-copy[b-4abtd0n33q] {
        padding: 30px 27px 25px;
    }
    .featured-copy h3[b-4abtd0n33q] {
        font-size: 1.85rem;
    }
    .card-image[b-4abtd0n33q] {
        height: 175px;
    }
}

@media(max-width:650px) {
    .blog-hero[b-4abtd0n33q] {
        padding: 16px 12px 0;
    }
    .blog-hero-inner[b-4abtd0n33q] {
        display: flex;
        align-items: stretch;
        gap: 28px;
        min-height: 0;
        padding: 36px 24px 26px;
        border-radius: 21px;
    }
    .blog-hero-copy[b-4abtd0n33q] {
        max-width: none;
    }
    .blog-kicker[b-4abtd0n33q] {
        font-size: .68rem;
        padding: 9px 12px;
    }
    .blog-hero h1[b-4abtd0n33q] {
        margin: 22px 0 13px;
        font-size: clamp(2.65rem,12vw,3.65rem);
    }
    .blog-hero p[b-4abtd0n33q] {
        font-size: .91rem;
        line-height: 1.65;
    }
    .blog-hero-link[b-4abtd0n33q] {
        margin-top: 18px;
        padding: 12px 15px;
    }
    .hero-proof[b-4abtd0n33q] {
        margin-top: 24px;
    }
    .blog-hero-art[b-4abtd0n33q] {
        width: 100%;
        height: 265px;
        margin: 0 auto;
        max-width: 390px;
    }
    .hero-art-frame[b-4abtd0n33q] {
        inset: 0 8% 2%;
        border-width: 5px;
        border-radius: 130px 130px 18px 18px;
    }
    .hero-art-top[b-4abtd0n33q] {
        left: 17px;
        right: 17px;
        top: 20px;
        font-size: .57rem;
    }
    .hero-art-bottom[b-4abtd0n33q] {
        left: 18px;
        right: 18px;
        bottom: 18px;
        font-size: .82rem;
    }
    .hero-float-card[b-4abtd0n33q] {
        right: 0;
        bottom: 9%;
        padding: 10px 12px 10px 10px;
    }
    .float-icon[b-4abtd0n33q] {
        width: 32px;
        height: 32px;
    }
    .hero-float-card strong[b-4abtd0n33q] {
        font-size: .68rem;
    }
    .hero-float-card small[b-4abtd0n33q] {
        font-size: .56rem;
    }
    .blog-featured[b-4abtd0n33q] {
        padding-top: 62px;
        padding-bottom: 55px;
    }
    .blog-section-heading[b-4abtd0n33q] {
        align-items: flex-start;
        gap: 8px;
    }
    .blog-section-heading h2[b-4abtd0n33q],.library-heading h2[b-4abtd0n33q],.article-next h2[b-4abtd0n33q] {
        font-size: 2.15rem;
    }
    .blog-section-heading p[b-4abtd0n33q] {
        max-width: 300px;
        font-size: .84rem;
    }
    .article-count[b-4abtd0n33q] {
        font-size: .85rem;
    }
    .featured-story[b-4abtd0n33q] {
        grid-template-columns: 1fr;
    }
    .featured-image[b-4abtd0n33q] {
        min-height: 255px;
    }
    .featured-copy[b-4abtd0n33q] {
        min-height: 300px;
        padding: 26px 23px 22px;
    }
    .featured-copy h3[b-4abtd0n33q] {
        font-size: 1.8rem;
    }
    .blog-library[b-4abtd0n33q] {
        padding: 8px 0 64px;
    }
    .library-heading[b-4abtd0n33q] {
        margin-bottom: 22px;
    }
    .library-heading h2[b-4abtd0n33q] {
        margin-top: 13px;
    }
    .library-aside[b-4abtd0n33q] {
        font-size: .78rem;
    }
    .blog-grid[b-4abtd0n33q] {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .card-image[b-4abtd0n33q] {
        height: 220px;
    }
    .card-body>p[b-4abtd0n33q] {
        min-height: 0;
    }
    .blog-card[b-4abtd0n33q] {
        display: grid;
        grid-template-columns: 38% 1fr;
    }
    .card-image[b-4abtd0n33q] {
        height: 100%;
        min-height: 205px;
    }
    .card-body[b-4abtd0n33q] {
        padding: 17px 15px;
    }
    .card-body h3[b-4abtd0n33q] {
        font-size: 1rem;
        min-height: 0;
        margin: 9px 0;
    }
    .card-body>p[b-4abtd0n33q] {
        font-size: .77rem;
        line-height: 1.55;
    }
    .card-body .read-link[b-4abtd0n33q] {
        margin-top: 13px;
    }
    .blog-cta[b-4abtd0n33q] {
        padding: 30px 24px;
        margin-bottom: 55px;
    }
    .blog-cta h2[b-4abtd0n33q] {
        font-size: 2.15rem;
    }
    .cta-mark[b-4abtd0n33q] {
        right: -30px;
        top: -22px;
        width: 105px;
        height: 105px;
        opacity: .35;
    }
    .article-page[b-4abtd0n33q] {
        padding-bottom: 55px;
    }
    .article-top[b-4abtd0n33q] {
        width: calc(100% - 36px);
        padding-top: 17px;
    }
    .article-top>span[b-4abtd0n33q] {
        display: none;
    }
    .article-shell[b-4abtd0n33q] {
        width: calc(100% - 36px);
        margin-top: 48px;
    }
    .article-header h1[b-4abtd0n33q] {
        font-size: 2.45rem;
    }
    .article-deck[b-4abtd0n33q] {
        font-size: .92rem;
    }
    .article-cover[b-4abtd0n33q] {
        height: 245px;
    }
    .article-body-layout[b-4abtd0n33q] {
        margin-top: 30px;
    }
    .article-sidebar[b-4abtd0n33q] {
        gap: 12px;
    }
    .article-next[b-4abtd0n33q] {
        margin-top: 48px;
    }
}

@media(max-width:390px) {
    .blog-hero-inner[b-4abtd0n33q] {
        padding-inline: 19px;
    }
    .blog-hero-art[b-4abtd0n33q] {
        height: 230px;
    }
    .blog-card[b-4abtd0n33q] {
        grid-template-columns: 1fr;
    }
    .card-image[b-4abtd0n33q] {
        height: 190px;
        min-height: 0;
    }
    .card-body[b-4abtd0n33q] {
        padding: 18px;
    }
    .card-body h3[b-4abtd0n33q] {
        font-size: 1.1rem;
    }
    .card-body>p[b-4abtd0n33q] {
        font-size: .82rem;
    }
}

/* Refined page surfaces and editorial accents */

.blog-page[b-4abtd0n33q] {
    background: linear-gradient(180deg, #f4f5f0 0%, #ffffff 100%);
}

.blog-hero[b-4abtd0n33q] {
    padding: 24px 24px 0;
    background: transparent;
}

.blog-hero-inner[b-4abtd0n33q] {
    width: min(1160px,100%);
    min-height: 510px;
    padding: 54px clamp(32px,5.3vw,72px);
    border: 1px solid #e3e8dc;
    border-radius: 26px;
    background: linear-gradient(115deg,#f1f0e7 0%,#eff3e8 54%,#e4eee1 100%);
    box-shadow: 0 14px 38px rgba(38,67,49,.045);
}

.blog-hero h1[b-4abtd0n33q] {
    color: #183b32;
}

.blog-hero h1 span[b-4abtd0n33q] {
    color: #177961;
}

.blog-hero-art[b-4abtd0n33q] {
    height: 390px;
}

.hero-art-glow[b-4abtd0n33q] {
    background: #d8e4c4;
    opacity: .82;
}

.hero-art-frame[b-4abtd0n33q] {
    border-color: rgba(255,255,255,.82);
    box-shadow: 0 25px 55px rgba(28,62,45,.16);
}

.hero-float-card[b-4abtd0n33q] {
    border-color: #edf0e7;
    box-shadow: 0 15px 38px rgba(28,62,45,.13);
}

.blog-featured[b-4abtd0n33q] {
    padding-top: 78px;
}

.blog-cta[b-4abtd0n33q] {
    position: relative;
    isolation: isolate;
    min-height: 300px;
    margin-top: 5px;
    padding: 52px 58px;
    border: 1px solid #1e5b4b;
    border-radius: 20px;
    background: linear-gradient(115deg,#175544 0%,#1c6551 58%,#34765a 100%);
    box-shadow: 0 20px 45px rgba(26,76,59,.14);
    color: #fff;
}

.blog-cta[b-4abtd0n33q]::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 290px;
    height: 290px;
    right: 160px;
    bottom: -210px;
    border: 1px solid rgba(221,244,192,.25);
    border-radius: 50%;
    box-shadow: 0 0 0 30px rgba(221,244,192,.055),0 0 0 62px rgba(221,244,192,.04);
}

.blog-cta[b-4abtd0n33q]::after {
    right: 35px;
    top: -170px;
    width: 360px;
    height: 360px;
    border-color: rgba(221,244,192,.18);
    box-shadow: 0 0 0 42px rgba(221,244,192,.035),0 0 0 85px rgba(221,244,192,.025);
}

.blog-cta .section-eyebrow[b-4abtd0n33q] {
    color: #d4eab8;
}

.blog-cta .section-eyebrow>span[b-4abtd0n33q] {
    background: #e1bd67;
    box-shadow: 0 0 0 4px rgba(225,189,103,.14);
}

.blog-cta h2[b-4abtd0n33q] {
    position: relative;
    color: #fff;
    font-size: clamp(2.5rem,4.5vw,3.55rem);
    letter-spacing: -.06em;
}

.blog-cta p[b-4abtd0n33q] {
    position: relative;
    max-width: 490px;
    color: #d3e3d8;
    font-size: .96rem;
}

.blog-cta-button[b-4abtd0n33q] {
    position: relative;
    margin-top: 25px;
    padding: 13px 19px;
    background: #e1bd67;
    color: #173e36;
    transition: transform .2s ease,background .2s ease;
}

.blog-cta-button:hover[b-4abtd0n33q] {
    transform: translateY(-2px);
    background: #f0d583;
    color: #173e36;
}

.cta-mark[b-4abtd0n33q] {
    width: 162px;
    height: 162px;
    border-color: rgba(220,242,200,.48);
    color: #d4eab8;
}

.cta-mark span[b-4abtd0n33q] {
    font-size: 7.5rem;
}

.cta-mark i[b-4abtd0n33q] {
    right: -3px;
    bottom: 8px;
    width: 47px;
    height: 47px;
    background: #e1bd67;
    color: #173e36;
}

.article-page[b-4abtd0n33q] {
    background: linear-gradient(180deg, #f4f5f0 0%, #ffffff 100%);
}

.article-callout[b-4abtd0n33q] {
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 15px;
    margin: 38px 0;
    padding: 25px 28px;
    border: 1px solid #e8dfc3;
    border-left: 0;
    border-radius: 12px;
    background: linear-gradient(110deg,#f4f0e2,#f8f6ec);
    box-shadow: 0 8px 20px rgba(77,65,36,.045);
}

.article-callout[b-4abtd0n33q]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    bottom: 15px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: #c9a74f;
}

.article-callout i[b-4abtd0n33q] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e8ddb8;
    color: #77612d;
    font-size: 1.1rem;
}

.article-callout p[b-4abtd0n33q] {
    margin: 0;
    color: #485b46;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.65;
}

@media(max-width:650px) {
    .blog-hero[b-4abtd0n33q] {
        padding: 14px 12px 0;
    }
    .blog-hero-inner[b-4abtd0n33q] {
        width: 100%;
        min-height: 0;
        padding: 31px 22px 24px;
        border-radius: 20px;
    }
    .blog-hero-art[b-4abtd0n33q] {
        height: 250px;
    }
    .blog-featured[b-4abtd0n33q] {
        padding-top: 60px;
    }
    .blog-cta[b-4abtd0n33q] {
        min-height: 0;
        padding: 34px 25px;
        border-radius: 17px;
    }
    .blog-cta h2[b-4abtd0n33q] {
        font-size: 2.35rem;
    }
    .blog-cta p[b-4abtd0n33q] {
        font-size: .87rem;
    }
    .cta-mark[b-4abtd0n33q] {
        right: -20px;
        top: -19px;
        width: 112px;
        height: 112px;
        opacity: .4;
    }
    .cta-mark span[b-4abtd0n33q] {
        font-size: 5.2rem;
    }
    .cta-mark i[b-4abtd0n33q] {
        width: 38px;
        height: 38px;
    }
    .article-callout[b-4abtd0n33q] {
        grid-template-columns: 34px 1fr;
        gap: 12px;
        margin: 28px 0;
        padding: 20px 18px;
    }
    .article-callout i[b-4abtd0n33q] {
        width: 34px;
        height: 34px;
        font-size: .95rem;
    }
    .article-callout p[b-4abtd0n33q] {
        font-size: .97rem;
    }
}

.blog-hero[b-4abtd0n33q] {
    padding: 55px 24px 12px;
    background: #f4f5f0;
}

.blog-hero-inner[b-4abtd0n33q] {
    width: min(1160px,100%);
    min-height: 500px;
    padding: 18px 0 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.blog-hero-copy[b-4abtd0n33q] {
    padding-left: 18px;
}

.blog-hero h1[b-4abtd0n33q] {
    font-size: clamp(3.3rem,6vw,5.7rem);
    line-height: .97;
}

.blog-hero p[b-4abtd0n33q] {
    max-width: 430px;
}

.blog-hero-art[b-4abtd0n33q] {
    height: 430px;
    width: min(100%,470px);
    margin-right: 22px;
}

.hero-art-glow[b-4abtd0n33q] {
    inset: 9% -3% 0 10%;
    border-radius: 28px;
    background: #d7e69e;
    transform: rotate(5deg);
    opacity: .75;
}

.hero-art-frame[b-4abtd0n33q] {
    inset: 0 9% 7% 2%;
    border: 0;
    border-radius: 23px;
    background: linear-gradient(180deg,rgba(18,54,37,.03),rgba(13,44,34,.52)),var(--hero-image) center/cover,#b7d3bc;
    box-shadow: 0 22px 48px rgba(28,62,45,.18);
    transform: rotate(-2deg);
}

.hero-art-top[b-4abtd0n33q] {
    top: 22px;
}

.hero-art-bottom[b-4abtd0n33q] {
    bottom: 23px;
}

.hero-float-card[b-4abtd0n33q] {
    right: -4%;
    bottom: 10%;
    transform: rotate(0);
}

.cta-mark span[b-4abtd0n33q] {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 0;
}

.cta-mark span img[b-4abtd0n33q] {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.cta-mark i[b-4abtd0n33q] {
    z-index: 1;
}

.article-content h2[b-4abtd0n33q] {
    scroll-margin-top: 125px;
}

.article-toc a[b-4abtd0n33q] {
    scroll-behavior: smooth;
}

@media(max-width:900px) {
    .blog-hero[b-4abtd0n33q] {
        padding-top: 42px;
    }
    .blog-hero-inner[b-4abtd0n33q] {
        min-height: 460px;
        padding: 10px 0 20px;
    }
    .blog-hero-copy[b-4abtd0n33q] {
        padding-left: 4px;
    }
    .blog-hero-art[b-4abtd0n33q] {
        height: 360px;
        margin-right: 8px;
    }
    .hero-art-frame[b-4abtd0n33q] {
        inset-inline: 0;
    }
    .hero-float-card[b-4abtd0n33q] {
        right: -5%;
    }
}

@media(max-width:650px) {
    .blog-hero[b-4abtd0n33q] {
        padding: 22px 18px 0;
    }
    .blog-hero-inner[b-4abtd0n33q] {
        gap: 22px;
        padding: 12px 0 4px;
    }
    .blog-hero-copy[b-4abtd0n33q] {
        padding-left: 0;
    }
    .blog-hero h1[b-4abtd0n33q] {
        font-size: clamp(2.8rem,12vw,3.75rem);
    }
    .blog-hero-art[b-4abtd0n33q] {
        height: 260px;
        margin-right: 0;
    }
    .hero-art-frame[b-4abtd0n33q] {
        inset: 0 5% 4%;
        border-radius: 17px;
        transform: none;
    }
    .hero-art-glow[b-4abtd0n33q] {
        inset: 7% 1% 0 9%;
        border-radius: 19px;
    }
    .hero-float-card[b-4abtd0n33q] {
        right: 0;
        bottom: 8%;
    }
    .cta-mark span img[b-4abtd0n33q] {
        width: 65px;
        height: 65px;
    }
}

/* Wider editorial canvas for large displays */
.content-width[b-4abtd0n33q] {
    width: min(1400px, calc(100% - 48px));
}

.blog-hero-inner[b-4abtd0n33q] {
    width: min(1400px, 100%);
}

.article-shell[b-4abtd0n33q] {
    width: min(1400px, calc(100% - 48px));
}

.article-body-layout[b-4abtd0n33q] {
    max-width: 1320px;
}

@media (min-width: 901px) {
    .article-body-layout[b-4abtd0n33q] {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 64px;
    }

    .article-content[b-4abtd0n33q] {
        max-width: 820px;
    }
}

@media (max-width: 600px) {
    .content-width[b-4abtd0n33q],
    .article-shell[b-4abtd0n33q] {
        width: calc(100% - 36px);
    }
}

/* Tighten the hero composition and headline on wide screens. */
.blog-hero-inner[b-4abtd0n33q] {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 14px;
}

.blog-hero-copy[b-4abtd0n33q] {
    max-width: 760px;
}

.blog-hero h1[b-4abtd0n33q] {
    max-width: none;
    font-size: clamp(3rem, 4.1vw, 4.3rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.06em;
}

.blog-hero-art[b-4abtd0n33q] {
    justify-self: center;
    width: min(100%, 500px);
    margin-right: 0;
}

@media (min-width: 1200px) {
    .blog-hero h1[b-4abtd0n33q] {
        white-space: nowrap;
    }
}

@media (max-width: 900px) {
    .blog-hero-inner[b-4abtd0n33q] {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        gap: 12px;
    }

    .blog-hero h1[b-4abtd0n33q] {
        white-space: normal;
        font-size: clamp(2.8rem, 5.2vw, 3.8rem);
    }
}

@media (max-width: 650px) {
    .blog-hero-inner[b-4abtd0n33q] {
        display: flex;
        gap: 22px;
    }

    .blog-hero h1[b-4abtd0n33q] {
        font-size: clamp(2.8rem, 12vw, 3.75rem);
        line-height: 1;
    }
}

/* Editorial geometry for the journal and article pages */
.blog-page[b-4abtd0n33q],
.article-page[b-4abtd0n33q] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.blog-page[b-4abtd0n33q]::before,
.article-page[b-4abtd0n33q]::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 24rem;
    right: -5rem;
    width: 240px;
    height: 180px;
    background: repeating-linear-gradient(135deg, transparent 0 11px, rgba(24, 131, 109, .08) 11px 12px, transparent 12px 24px);
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
    pointer-events: none;
}

.blog-hero-inner[b-4abtd0n33q] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.blog-hero-inner[b-4abtd0n33q]::before,
.blog-hero-inner[b-4abtd0n33q]::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.blog-hero-inner[b-4abtd0n33q]::before {
    top: 0;
    left: 0;
    width: 28%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,.45), transparent);
    clip-path: polygon(0 0, 100% 0, 64% 100%, 0 100%);
}

.blog-hero-inner[b-4abtd0n33q]::after {
    right: 43%;
    bottom: 8%;
    width: 60px;
    height: 60px;
    background: linear-gradient(90deg, transparent 46%, rgba(24, 131, 109, .28) 47% 53%, transparent 54%), linear-gradient(0deg, transparent 46%, rgba(24, 131, 109, .28) 47% 53%, transparent 54%);
    transform: rotate(45deg);
}

.blog-hero-copy[b-4abtd0n33q],
.blog-hero-art[b-4abtd0n33q] { position: relative; z-index: 1; }

.blog-featured[b-4abtd0n33q],
.blog-library[b-4abtd0n33q] { position: relative; }

.blog-featured[b-4abtd0n33q]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 68px;
    height: 4px;
    border-radius: 99px;
    background: linear-gradient(90deg, #72bd83, #dfbd6f);
    box-shadow: -12px 9px 0 -1px rgba(23, 121, 97, .22), -24px 18px 0 -2px rgba(23, 121, 97, .14);
}

.blog-library[b-4abtd0n33q]::after {
    content: "\2733";
    position: absolute;
    top: 0;
    right: 0;
    color: rgba(23, 121, 97, .25);
    font-size: 2.2rem;
    line-height: 1;
}

.blog-cta[b-4abtd0n33q]::before {
    top: auto;
    right: 8%;
    bottom: 0;
    width: 34%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: repeating-linear-gradient(135deg, transparent 0 13px, rgba(221,244,192,.11) 13px 14px, transparent 14px 27px);
    clip-path: polygon(42% 0, 100% 0, 100% 100%, 0 100%);
    box-shadow: none;
}

.blog-cta[b-4abtd0n33q]::after {
    top: 14%;
    right: 4%;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, transparent 45%, rgba(221,244,192,.48) 46% 54%, transparent 55%), linear-gradient(0deg, transparent 45%, rgba(221,244,192,.48) 46% 54%, transparent 55%);
    box-shadow: 9px 9px 0 -7px rgba(221,244,192,.5), -9px -9px 0 -7px rgba(221,244,192,.35);
    transform: rotate(45deg);
}

.article-header[b-4abtd0n33q] { position: relative; }
.article-header[b-4abtd0n33q]::after {
    content: "";
    position: absolute;
    top: 1rem;
    right: 0;
    width: 42px;
    height: 42px;
    border-top: 2px solid rgba(24, 131, 109, .28);
    border-right: 2px solid rgba(24, 131, 109, .28);
}

@media (max-width: 760px) {
    .blog-page[b-4abtd0n33q]::before, .article-page[b-4abtd0n33q]::before { top: 20rem; right: -6rem; width: 160px; height: 130px; }
    .blog-hero-inner[b-4abtd0n33q]::after { right: 3%; bottom: 38%; width: 32px; height: 32px; }
    .blog-featured[b-4abtd0n33q]::before { width: 44px; }
    .blog-library[b-4abtd0n33q]::after { right: .25rem; font-size: 1.6rem; }
    .blog-cta[b-4abtd0n33q]::before { right: 0; width: 54%; }
    .blog-cta[b-4abtd0n33q]::after { top: auto; right: 1rem; bottom: 1rem; width: 30px; height: 30px; }
    .article-header[b-4abtd0n33q]::after { top: 0; width: 28px; height: 28px; }
}

@media (max-width: 420px) {
    .blog-page[b-4abtd0n33q]::before, .article-page[b-4abtd0n33q]::before { width: 110px; height: 100px; }
    .blog-hero-inner[b-4abtd0n33q]::after { width: 24px; height: 24px; }
    .blog-cta[b-4abtd0n33q]::before { width: 70%; }
    .blog-cta[b-4abtd0n33q]::after { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-hero-art[b-4abtd0n33q], .hero-art-frame[b-4abtd0n33q], .hero-float-card[b-4abtd0n33q] { transition: none; }
}
/* /Pages/Public/Checkout.razor.rz.scp.css */
.pricing-checkout[b-z9pgmo0gt0] {
    display: grid;
    width: min(1240px, calc(100% - 48px));
    align-items: start;
    margin: 38px auto 76px;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
    gap: 24px;
    overflow: visible;
    color: var(--pricing-text);
    font-family: 'Quicksand', sans-serif;
}

.pricing-checkout h1[b-z9pgmo0gt0],
.pricing-checkout h2[b-z9pgmo0gt0],
.pricing-checkout h3[b-z9pgmo0gt0] { font-family: 'Quicksand', sans-serif; }

.checkout-main[b-z9pgmo0gt0] {
    position: sticky;
    bottom: 24px;
    min-width: 0;
    align-self: end;
    padding: 32px clamp(24px, 5vw, 66px) 42px;
    border: 1px solid var(--pricing-border);
    border-radius: 24px;
    background: var(--pricing-surface);
    box-shadow: var(--pricing-shadow-card);
}
.checkout-brand-row[b-z9pgmo0gt0] { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 34px; }
.checkout-brand[b-z9pgmo0gt0] { display: inline-flex; align-items: center; text-decoration: none; }
.checkout-brand img[b-z9pgmo0gt0] { display: block; width: 150px; max-height: 42px; object-fit: contain; object-position: left center; }
.checkout-secure[b-z9pgmo0gt0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid var(--pricing-border);
    border-radius: 999px;
    background: var(--pricing-surface-highlight);
    color: var(--pricing-text);
    font-size: 12px;
    font-weight: 700;
}
.checkout-secure .bi[b-z9pgmo0gt0] { color: var(--color-primary); }

.checkout-progress[b-z9pgmo0gt0] { display: grid; margin-bottom: 48px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.checkout-progress-step[b-z9pgmo0gt0] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 2px 12px;
    border: 0;
    border-top: 3px solid var(--pricing-border);
    background: transparent;
    color: var(--pricing-text-soft);
    font: inherit;
    font-size: 13px;
    text-align: left;
}
.checkout-progress-step span[b-z9pgmo0gt0] { font-size: 12px; font-weight: 800; }
.checkout-progress-step.active[b-z9pgmo0gt0],
.checkout-progress-step.complete[b-z9pgmo0gt0] { border-top-color: var(--color-primary); color: var(--pricing-text); }
.checkout-progress-step:disabled[b-z9pgmo0gt0] { cursor: default; }

.checkout-step-content[b-z9pgmo0gt0] { max-width: 680px; margin: 0 auto; animation: checkout-enter-b-z9pgmo0gt0 .24s ease both; }
.checkout-title[b-z9pgmo0gt0] { margin-bottom: 26px; }
.checkout-title .pricing-eyebrow[b-z9pgmo0gt0] { margin-bottom: 8px; }
.checkout-title h1[b-z9pgmo0gt0] { margin: 0; color: var(--pricing-text); font-size: clamp(27px, 3vw, 34px); font-weight: 800; letter-spacing: -.04em; }
.checkout-title p[b-z9pgmo0gt0] { margin: 8px 0 0; color: var(--pricing-text-muted); font-size: 14px; line-height: 1.6; }

.checkout-billing[b-z9pgmo0gt0] {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 20px;
    padding: 4px;
    border: 1px solid var(--pricing-border);
    border-radius: 999px;
    background: var(--pricing-surface-soft);
}
.checkout-billing button[b-z9pgmo0gt0] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--pricing-text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}
.checkout-billing button.selected[b-z9pgmo0gt0] { background: var(--pricing-surface); color: var(--pricing-text); box-shadow: var(--pricing-shadow-card); }
.checkout-billing button span[b-z9pgmo0gt0] { padding: 3px 6px; border-radius: 999px; background: var(--pricing-surface-highlight); color: var(--color-primary); font-size: 10px; }

.checkout-plan-grid[b-z9pgmo0gt0] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.checkout-plan-option[b-z9pgmo0gt0] {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 220px;
    flex-direction: column;
    align-items: flex-start;
    padding: 19px 17px;
    border: 1px solid var(--pricing-border-strong);
    border-radius: 16px;
    background: var(--pricing-surface);
    color: var(--pricing-text);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.checkout-plan-option:hover[b-z9pgmo0gt0] { transform: translateY(-2px); border-color: var(--color-primary-light); }
.checkout-plan-option.selected[b-z9pgmo0gt0] { border: 2px solid var(--color-primary); padding: 18px 16px; background: var(--pricing-surface-soft); box-shadow: var(--pricing-shadow-featured); }
.checkout-plan-check[b-z9pgmo0gt0] { position: absolute; top: 15px; right: 15px; color: var(--pricing-text-soft); font-size: 19px; }
.checkout-plan-option.selected .checkout-plan-check[b-z9pgmo0gt0] { color: var(--color-primary); }
.checkout-plan-name[b-z9pgmo0gt0] { padding-right: 26px; font-size: 16px; font-weight: 800; }
.checkout-plan-description[b-z9pgmo0gt0] { min-height: 34px; margin-top: 5px; color: var(--pricing-text-muted); font-size: 11px; line-height: 1.5; }
.checkout-plan-price[b-z9pgmo0gt0] { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.checkout-plan-price del[b-z9pgmo0gt0] { color: var(--pricing-text-soft); font-size: 12px; }
.checkout-plan-price strong[b-z9pgmo0gt0] { color: var(--pricing-text); font-size: 23px; font-weight: 800; letter-spacing: -.04em; }
.checkout-plan-price small[b-z9pgmo0gt0] { color: var(--pricing-text-muted); font-size: 11px; }
.checkout-discount[b-z9pgmo0gt0] { padding: 4px 7px; border-radius: 999px; background: var(--pricing-surface-highlight); color: var(--color-primary); font-size: 10px; font-weight: 800; }
.checkout-plan-bullets[b-z9pgmo0gt0] { display: grid; gap: 7px; margin-top: auto; padding-top: 14px; color: var(--pricing-text-muted); font-size: 11px; line-height: 1.4; }
.checkout-plan-bullets > span[b-z9pgmo0gt0] { display: flex; align-items: flex-start; gap: 6px; }
.checkout-plan-bullets .bi[b-z9pgmo0gt0] { flex: 0 0 auto; color: var(--pricing-success); }

.checkout-primary[b-z9pgmo0gt0] {
    display: flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
    padding: 13px 20px;
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    background: var(--color-primary);
    box-shadow: var(--pricing-shadow-featured);
    color: var(--pricing-surface);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.checkout-primary:hover[b-z9pgmo0gt0] { transform: translateY(-1px); background: var(--color-primary-dark); box-shadow: var(--pricing-shadow-featured); }
.checkout-reassurance[b-z9pgmo0gt0] { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 15px 0 0; color: var(--pricing-text-muted); font-size: 12px; }
.checkout-reassurance .bi[b-z9pgmo0gt0] { color: var(--color-primary); }

.checkout-form-grid[b-z9pgmo0gt0],
.checkout-invoice-fields[b-z9pgmo0gt0] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 14px; }
.checkout-form-grid label[b-z9pgmo0gt0],
.checkout-invoice-fields label[b-z9pgmo0gt0] { display: grid; min-width: 0; gap: 7px; color: var(--pricing-text); font-size: 12px; font-weight: 700; }
.checkout-form-grid input[b-z9pgmo0gt0],
.checkout-invoice-fields input[b-z9pgmo0gt0] {
    width: 100%;
    min-height: 47px;
    padding: 11px 13px;
    border: 1px solid var(--pricing-border-strong);
    border-radius: 10px;
    outline: none;
    background: var(--pricing-surface);
    color: var(--pricing-text);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.checkout-form-grid input:focus[b-z9pgmo0gt0],
.checkout-invoice-fields input:focus[b-z9pgmo0gt0] { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--pricing-page-tint); }
.checkout-form-grid input[b-z9pgmo0gt0]::placeholder { color: var(--pricing-text-soft); }
.full-width[b-z9pgmo0gt0] { grid-column: 1 / -1; }
.checkout-invoice-toggle[b-z9pgmo0gt0] { display: flex; align-items: center; gap: 9px; margin-top: 22px; color: var(--pricing-text-muted); cursor: pointer; font-size: 12px; }
.checkout-invoice-toggle input[b-z9pgmo0gt0] { width: 17px; height: 17px; accent-color: var(--color-primary); }
.checkout-invoice-fields[b-z9pgmo0gt0] { margin-top: 16px; padding: 17px; border: 1px solid var(--pricing-border); border-radius: 14px; background: var(--pricing-surface-soft); }
.checkout-invoice-fields label span[b-z9pgmo0gt0] { color: var(--pricing-text-muted); font-weight: 500; }
.checkout-validation[b-z9pgmo0gt0] { margin: -8px 0 16px; padding: 11px 13px; border: 1px solid var(--pricing-border); border-radius: 10px; background: var(--pricing-surface-warm); color: var(--pricing-text); font-size: 12px; }
.checkout-back[b-z9pgmo0gt0] { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px auto 0; padding: 8px 12px; border: 0; background: transparent; color: var(--pricing-text-muted); cursor: pointer; font: inherit; font-size: 12px; }
.checkout-back:hover[b-z9pgmo0gt0] { color: var(--color-primary); }

.payment-security-card[b-z9pgmo0gt0] { display: flex; align-items: flex-start; gap: 14px; padding: 19px; border: 1px solid var(--pricing-border); border-radius: 14px; background: var(--pricing-surface-soft); }
.payment-security-icon[b-z9pgmo0gt0] { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: var(--pricing-surface-highlight); color: var(--color-primary); font-size: 19px; }
.payment-security-card strong[b-z9pgmo0gt0] { display: block; color: var(--pricing-text); font-size: 13px; }
.payment-security-card p[b-z9pgmo0gt0] { margin: 5px 0 0; color: var(--pricing-text-muted); font-size: 12px; line-height: 1.6; }
.payment-method-row[b-z9pgmo0gt0] { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 15px; border: 1px solid var(--pricing-border); border-radius: 12px; color: var(--pricing-text); font-size: 12px; }
.payment-method-row > .bi:first-child[b-z9pgmo0gt0] { color: var(--color-primary); font-size: 18px; }
.payment-method-row > .bi:last-child[b-z9pgmo0gt0] { margin-left: auto; color: var(--pricing-text-muted); font-size: 13px; }
.checkout-terms[b-z9pgmo0gt0] { margin: 14px 0 0; color: var(--pricing-text-muted); font-size: 11px; line-height: 1.6; text-align: center; }

.checkout-summary[b-z9pgmo0gt0] { position: sticky; bottom: 24px; min-width: 0; align-self: end; padding: 0; }
.summary-card[b-z9pgmo0gt0] { padding: 23px; border: 1px solid var(--pricing-border); border-radius: 18px; background: var(--pricing-surface); box-shadow: var(--pricing-shadow-card); }
.summary-eyebrow[b-z9pgmo0gt0],
.summary-includes h2[b-z9pgmo0gt0] { color: var(--pricing-text-muted); font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.summary-plan[b-z9pgmo0gt0] { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.summary-plan-icon[b-z9pgmo0gt0] { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border: 1px solid var(--pricing-border); border-radius: 12px; background: var(--pricing-surface-soft); color: var(--color-primary); font-size: 19px; }
.summary-plan > div[b-z9pgmo0gt0] { display: grid; gap: 3px; min-width: 0; }
.summary-plan > div strong[b-z9pgmo0gt0] { color: var(--pricing-text); font-size: 14px; }
.summary-plan > div span[b-z9pgmo0gt0] { color: var(--pricing-text-muted); font-size: 11px; }
.summary-plan-price[b-z9pgmo0gt0] { margin-left: auto; color: var(--pricing-text); font-size: 14px; white-space: nowrap; }
.summary-discount[b-z9pgmo0gt0] { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; color: var(--color-primary); font-size: 12px; }
.summary-discount span[b-z9pgmo0gt0] { display: inline-flex; align-items: center; gap: 6px; }
.summary-discount-note[b-z9pgmo0gt0] { margin: 6px 0 0; color: var(--pricing-text-muted); font-size: 11px; }
.summary-total[b-z9pgmo0gt0] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--pricing-border); }
.summary-total > div[b-z9pgmo0gt0] { display: flex; align-items: center; gap: 8px; }
.summary-total > div strong[b-z9pgmo0gt0] { color: var(--pricing-text); font-size: 14px; }
.summary-total > div span[b-z9pgmo0gt0] { color: var(--pricing-text-muted); font-size: 10px; }
.summary-total-price[b-z9pgmo0gt0] { color: var(--pricing-text); font-size: clamp(25px, 3vw, 34px); font-weight: 800; letter-spacing: -.04em; white-space: nowrap; }
.summary-renewal[b-z9pgmo0gt0] { margin: 8px 0 0; color: var(--pricing-text-muted); font-size: 11px; line-height: 1.6; }
.summary-includes[b-z9pgmo0gt0] { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--pricing-border); }
.summary-includes h2[b-z9pgmo0gt0] { margin: 0 0 14px; }
.summary-feature[b-z9pgmo0gt0] { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0; }
.summary-feature-check[b-z9pgmo0gt0] { display: grid; flex: 0 0 18px; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: var(--pricing-surface-highlight); color: var(--color-primary); font-size: 11px; }
.summary-feature > div[b-z9pgmo0gt0] { min-width: 0; }
.summary-feature strong[b-z9pgmo0gt0] { display: block; color: var(--pricing-text); font-size: 11px; line-height: 1.4; }
.summary-feature p[b-z9pgmo0gt0] { margin: 3px 0 0; color: var(--pricing-text-muted); font-size: 10px; line-height: 1.5; }
.summary-view-more[b-z9pgmo0gt0] { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; padding: 5px 0; border: 0; background: transparent; color: var(--color-primary); cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.summary-view-more:hover[b-z9pgmo0gt0] { text-decoration: underline; }
.checkout-trust-row[b-z9pgmo0gt0] { display: grid; margin-top: 15px; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--pricing-border); border-radius: 15px; background: var(--pricing-surface); }
.checkout-trust-row > div[b-z9pgmo0gt0] { display: grid; justify-items: center; gap: 4px; padding: 14px 7px; text-align: center; }
.checkout-trust-row > div + div[b-z9pgmo0gt0] { border-left: 1px solid var(--pricing-border); }
.checkout-trust-row .bi[b-z9pgmo0gt0] { color: var(--color-primary); font-size: 17px; }
.checkout-trust-row strong[b-z9pgmo0gt0] { color: var(--pricing-text); font-size: 10px; }
.checkout-trust-row span[b-z9pgmo0gt0] { color: var(--pricing-text-muted); font-size: 9px; line-height: 1.4; }

@keyframes checkout-enter-b-z9pgmo0gt0 { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1000px) {
    .pricing-checkout[b-z9pgmo0gt0] { width: min(900px, calc(100% - 32px)); grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); }
    .checkout-main[b-z9pgmo0gt0] { padding-right: 28px; padding-left: 28px; }
    .summary-card[b-z9pgmo0gt0] { padding: 18px; }
}

@media (max-width: 740px) {
    .pricing-checkout[b-z9pgmo0gt0] { width: min(600px, calc(100% - 24px)); margin: 20px auto 48px; grid-template-columns: 1fr; gap: 18px; }
    .checkout-main[b-z9pgmo0gt0] { position: static; padding: 24px 20px 30px; border-radius: 20px; }
    .checkout-brand-row[b-z9pgmo0gt0] { margin-bottom: 28px; }
    .checkout-brand img[b-z9pgmo0gt0] { width: 128px; }
    .checkout-progress[b-z9pgmo0gt0] { margin-bottom: 34px; }
    .checkout-summary[b-z9pgmo0gt0] { position: static; padding: 0; }
}

@media (max-width: 480px) {
    .checkout-secure[b-z9pgmo0gt0] { padding: 8px 10px; font-size: 10px; }
    .checkout-plan-grid[b-z9pgmo0gt0] { grid-template-columns: 1fr; }
    .checkout-plan-option[b-z9pgmo0gt0] { min-height: 0; }
    .checkout-plan-description[b-z9pgmo0gt0] { min-height: 0; }
    .checkout-form-grid[b-z9pgmo0gt0], .checkout-invoice-fields[b-z9pgmo0gt0] { grid-template-columns: 1fr; }
    .checkout-form-grid .full-width[b-z9pgmo0gt0], .checkout-invoice-fields .full-width[b-z9pgmo0gt0] { grid-column: auto; }
    .checkout-trust-row span[b-z9pgmo0gt0] { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .checkout-step-content[b-z9pgmo0gt0], .checkout-plan-option[b-z9pgmo0gt0], .checkout-primary[b-z9pgmo0gt0], .checkout-form-grid input[b-z9pgmo0gt0], .checkout-invoice-fields input[b-z9pgmo0gt0] { animation: none; transition: none; }
}
/* /Pages/Public/CompleteExternalRegistration.razor.rz.scp.css */
.complete-registration[b-bqcfdxo8mn] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;

    background: var(--color-bg-light);
}

.complete-box[b-bqcfdxo8mn] {
    width: 100%;
    max-width: 420px;
    border: var(--border-color);

    background: var(--third-color);
    border-radius: 16px;

    padding: 36px 28px;

    box-shadow: var(--shadow-md);

    animation: fadeInUp-b-bqcfdxo8mn .45s ease;
}

.complete-title[b-bqcfdxo8mn] {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 8px;
    text-align: center;
}

.complete-subtitle[b-bqcfdxo8mn] {
    font-size: 14px;
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: 26px;
}

.complete-field[b-bqcfdxo8mn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.complete-label[b-bqcfdxo8mn] {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-dark);
}


.complete-phone[b-bqcfdxo8mn] {
    display: flex;
    gap: 8px;
}


.complete-country[b-bqcfdxo8mn] {
    width: 110px;
    padding: 12px;

    border-radius: 10px;
    border: 1px solid var(--border-color);

    /* background: var(--color-surface); */

    font-size: 14px;
    outline: none;
    cursor: pointer;

    transition: all 0.2s ease;
}

.complete-country:focus[b-bqcfdxo8mn] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}


.complete-input[b-bqcfdxo8mn] {
    flex: 1;
    padding: 12px 14px;

    border-radius: 10px;
    border: 1px solid var(--border-color);

    font-size: 14px;

    outline: none;
    transition: all 0.2s ease;
}

.complete-input:focus[b-bqcfdxo8mn] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.complete-btn[b-bqcfdxo8mn] {
    width: 100%;
    padding: 13px;

    border: none;
    border-radius: 12px;

    font-weight: 600;
    font-size: 14px;

    color: var(--text-white);
    background: var(--gradient-primary);

    cursor: pointer;

    box-shadow: var(--shadow-sm);

    transition: all 0.2s ease;
}

.complete-btn:hover[b-bqcfdxo8mn] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.complete-btn:active[b-bqcfdxo8mn] {
    transform: scale(0.98);
}

.complete-error[b-bqcfdxo8mn] {
    font-size: 13px;
    color: #d93025;
    margin-top: 4px;
}

@keyframes fadeInUp-b-bqcfdxo8mn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 768px) {
    .complete-box[b-bqcfdxo8mn] {
        padding: 42px 34px;
    }
}
/* /Pages/Public/CookiePolicy.razor.rz.scp.css */
.cookie-hero[b-53fcwhtwp1] {
    background: linear-gradient(180deg, #f8fffe 0%, #ffffff 100%);
    padding: 40px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.cookie-hero-content[b-53fcwhtwp1] {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.cookie-hero h1[b-53fcwhtwp1] {
    margin: 0 0 16px;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: #008080;
    line-height: 1.2;
}

.cookie-hero p[b-53fcwhtwp1] {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.05rem;
    color: #6b7280;
    line-height: 1.8;
}

.breadcrumb[b-53fcwhtwp1] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.breadcrumb a[b-53fcwhtwp1] {
    color: #008080;
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
}

.breadcrumb a:hover[b-53fcwhtwp1] {
    color: #14B8A6;
}

.breadcrumb span[b-53fcwhtwp1] {
    color: #94a3b8;
}

.breadcrumb .current[b-53fcwhtwp1] {
    color: #475569;
    font-weight: 600;
}

.cookie-content[b-53fcwhtwp1] {
    padding: 70px 20px;
    background: #ffffff;
}

.cookie-container[b-53fcwhtwp1] {
    max-width: 1000px;
    margin: 0 auto;
}

.cookie-section[b-53fcwhtwp1] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.cookie-section h2[b-53fcwhtwp1] {
    margin: 0 0 24px;
    font-size: 1.6rem;
    font-weight: 700;
    color: #008080;
    padding-bottom: 12px;
    border-bottom: 2px solid #e6fffb;
}

.cookie-section p[b-53fcwhtwp1] {
    margin-bottom: 24px;
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.9;
}

.cookie-section ul[b-53fcwhtwp1] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cookie-section li[b-53fcwhtwp1] {
    position: relative;
    margin-bottom: 18px;
    padding: 18px 20px 18px 60px;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    background: #fafcfc;
    color: #4b5563;
    line-height: 1.8;
    transition: 0.3s;
}

.cookie-section li:hover[b-53fcwhtwp1] {
    border-color: rgba(20, 184, 166, 0.25);
    background: #f8fffe;
}

.cookie-section li[b-53fcwhtwp1]::before {
    content: "✓";
    position: absolute;
    left: 20px;
    top: 18px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(20, 184, 166, 0.12);
    color: #008080;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cookie-section strong[b-53fcwhtwp1] {
    color: #111827;
    font-weight: 600;
}

@media (max-width: 991px) {

    .cookie-content[b-53fcwhtwp1] {
        padding: 50px 20px;
    }

    .cookie-section[b-53fcwhtwp1] {
        padding: 30px;
    }
}

@media (max-width: 768px) {

    .cookie-hero[b-53fcwhtwp1] {
        padding: 60px 15px;
    }

    .cookie-content[b-53fcwhtwp1] {
        padding: 40px 15px;
    }

    .cookie-section[b-53fcwhtwp1] {
        padding: 24px;
        border-radius: 12px;
    }

    .cookie-section h2[b-53fcwhtwp1] {
        font-size: 1.3rem;
    }

    .cookie-section li[b-53fcwhtwp1] {
        padding: 16px 16px 16px 52px;
        font-size: 0.95rem;
    }

    .cookie-section li[b-53fcwhtwp1]::before {
        left: 16px;
    }
}

@media (max-width: 480px) {

    .cookie-hero h1[b-53fcwhtwp1] {
        font-size: 2rem;
    }

    .cookie-section[b-53fcwhtwp1] {
        padding: 20px;
    }

    .cookie-section p[b-53fcwhtwp1],
    .cookie-section li[b-53fcwhtwp1] {
        font-size: 0.92rem;
    }
}
/* /Pages/Public/Home.razor.rz.scp.css */
*[b-48eifoiq90], *[b-48eifoiq90]::before, *[b-48eifoiq90]::after {
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
}

img[b-48eifoiq90], svg[b-48eifoiq90] {
    max-width: 100%;
}

.auth-dropdown[b-48eifoiq90] {
    position: absolute;
    top: calc(100%);
    right: 0;
    width: 340px;
    max-width: calc(100vw - 2rem); 
    padding: 0;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(180deg,rgba(11, 17, 32, 0.96),rgba(2, 6, 23, 0.98));
    backdrop-filter: blur(24px);
    border: 1px solid rgba(20, 184, 166, 0.5);
    box-shadow:0 20px 60px rgba(0, 0, 0, 0.45),0 0 0 1px rgba(255,255,255,0.03);
    z-index: 9999;
    animation: dropdownFade-b-48eifoiq90 0.25s ease;
}

.nav-dropdown-trigger[b-48eifoiq90] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 1.0rem;
    cursor: pointer;
    user-select: none;
}

.nav-dropdown-trigger:hover[b-48eifoiq90],
.nav-dropdown-trigger:focus-visible[b-48eifoiq90] {
    color: #111827;
}

.nav-links a:hover[b-48eifoiq90] {
    color: var(--color-primary);
}

.dropdown-header[b-48eifoiq90] {
    position: relative;
    padding: 1.4rem 1.4rem 1.2rem;
    text-align: center;
    background: linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
}


.dropdown-header h4[b-48eifoiq90] {
    margin: 18px 0 6px 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-white);
}

.dropdown-header p[b-48eifoiq90] {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-muted);
}


.local-login-form[b-48eifoiq90],
.auth-dropdown > .dropdown-divider[b-48eifoiq90],
.auth-dropdown > .dropdown-link[b-48eifoiq90] {
    margin-left: 1.4rem;
    margin-right: 1.4rem;
}

.local-login-form[b-48eifoiq90]{
    padding: 0 1.4rem;
}

.local-login-form[b-48eifoiq90],
.auth-dropdown > .google-btn[b-48eifoiq90],
.auth-dropdown > .team-login[b-48eifoiq90],
.auth-dropdown > .facebook-btn[b-48eifoiq90] {
    margin: 0 auto;
}

.google-btn[b-48eifoiq90],
.facebook-btn[b-48eifoiq90] {
    width: 60%;
    height: 45px;
    margin-top: 1.4rem;
    background-color: transparent;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
}

.facebook-btn:hover[b-48eifoiq90],
.google-btn:hover[b-48eifoiq90] {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.25);
}

.google-logo[b-48eifoiq90],
.facebook-logo[b-48eifoiq90] {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    border-radius: 12px;
}

.dropdown-divider[b-48eifoiq90] {
    position: relative;
    margin-top: 1.4rem;
    text-align: center;
}

.dropdown-divider[b-48eifoiq90]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-color);
}

.dropdown-divider span[b-48eifoiq90] {
    position: relative;
    padding: 0 14px;
    background: #07101f;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.team-login[b-48eifoiq90] {
    width: 60%;
    margin: 0 auto;
}

.dropdown-link[b-48eifoiq90] {
    width: 100%;
    margin: 0 auto 1.4rem;
    height: 45px;
    border: none;
    border-radius: 16px;
    background: var(--gradient-primary);
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.dropdown-link:hover[b-48eifoiq90] {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.25),0 0 18px rgba(20, 184, 166, 0.35);
}


.local-login-form[b-48eifoiq90] {
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
}

.floating-input[b-48eifoiq90] {
    position: relative;
    margin-bottom: 1.2rem;
}

.floating-input input[b-48eifoiq90] {
    width: 100%;
    height: 58px;
    padding: 20px 16px 8px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: var(--text-white);
    outline: none;
    transition: all 0.25s ease;
}

.floating-input input:focus[b-48eifoiq90] {
    border-color: var(--color-primary);
    background: rgba(20, 184, 166, 0.05);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.08);
}

.floating-input label[b-48eifoiq90] {
    position: absolute;
    top: 18px;
    left: 16px;
    color: var(--text-muted);
    font-size: 0.92rem;
    pointer-events: none;
    transition: all 0.2s ease;
}

.floating-input input:focus + label[b-48eifoiq90],
.floating-input input:not(:placeholder-shown) + label[b-48eifoiq90] {
    top: 8px;
    font-size: 0.72rem;
    color: var(--color-primary-light);
}


.submit-btn[b-48eifoiq90],
.back-to-auth-btn[b-48eifoiq90] {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 16px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.login-btn[b-48eifoiq90] {
    background: var(--gradient-primary);
    color: white;
    margin-top: 0.5rem;
}

.login-btn:hover[b-48eifoiq90] {
    transform: translateY(-2px);
    box-shadow:0 12px 24px rgba(0,0,0,0.25),0 0 18px rgba(20, 184, 166, 0.35);
}

.back-to-auth-btn[b-48eifoiq90] {
    margin-top: 12px;
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.06);
}

.back-to-auth-btn:hover[b-48eifoiq90] {
    background: rgba(255,255,255,0.08);
}


.form-error-message[b-48eifoiq90] {
    margin-bottom: 1rem;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    font-size: 0.88rem;
}

@keyframes dropdownFade-b-48eifoiq90 {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hero-wrapper[b-48eifoiq90] {
    background: linear-gradient( 65deg, #0F172A 60%, #0D9488 100% );
    /* border-radius: 40px; */
    color: var(--brand-white);
    padding: 20px;
    font-family: 'Quicksand', sans-serif;
    position: relative;
    
}

.hero-nav[b-48eifoiq90] {
    display: none;
}

.hero-body[b-48eifoiq90] {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.hero-text h1[b-48eifoiq90] {
    font-size: 1.7rem;
    line-height: 1.2;
    margin-bottom: 20px;
    color: white;
}

.hero-text p[b-48eifoiq90] {
    color: white;
    font-size: 1rem;
    margin-bottom: 30px;
    font-family: 'Quicksand', sans-serif;
}

.hero-bottom[b-48eifoiq90] {
    display: flex;
    gap: 10px;
    color: white;
    align-items: center;
    justify-content: flex-start;
    padding: 30px 0 0 0;
    width: 100%;
}

.hero-bottom img[b-48eifoiq90] {
    width: 80px;
    height: auto;
    border-radius: 8px;
}

.hero-bottom p[b-48eifoiq90] {
    margin: auto 0;
    font-size: x-large;
    font-family: 'Quicksand', sans-serif;
}

.btn-get-started[b-48eifoiq90] {
    background-color: var(--brand-teal);
    color: white;
    padding: 14px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
}

.hero-image-container[b-48eifoiq90] {
    position: relative;
    width: 100%;
}


.hero-image-area[b-48eifoiq90] {
    position: relative;
}

.video-trigger[b-48eifoiq90] {
    position: relative;
    display: block;
    text-decoration: none;
}

.play-button[b-48eifoiq90] {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 70px;
    height: 70px;
    background-color: var(--brand-light-teal);
    border-radius: 50%;
    display: grid;
    place-items: center;
    z-index: 5;
}

.play-icon[b-48eifoiq90] {
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 14px solid white;
    margin-left: 4px;
}

.hero-carousel-img[b-48eifoiq90] {
    width: 100%;
    max-width: 100%;
    max-height: 500px;
    height: auto;
    object-fit: contain;
    display: block;

    position: absolute;
    top: 0;
    left: 0;

    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}

.hero-carousel-img.active[b-48eifoiq90] {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}

.hero-carousel-dots[b-48eifoiq90] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.hero-dot[b-48eifoiq90] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.25s ease;
}

.hero-dot.active[b-48eifoiq90] {
    background: var(--brand-teal);
    width: 22px;
    border-radius: 4px;
}

.services[b-48eifoiq90] {
    background: #f6fbf8;
    padding: 5rem 1.5rem;
}

.services-header[b-48eifoiq90] {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 4rem;
}

.eyebrow[b-48eifoiq90] {
    display: inline-block;
    color: #0d9488;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.services-header h2[b-48eifoiq90] {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.3;
    color: #0f2e2b;
}

.services-grid[b-48eifoiq90] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    max-width: 1600px;
    margin: 0 auto;
}

.service-card[b-48eifoiq90] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(240,250,248,0.96));
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 26px;
    padding: 1.5rem;
    min-height: 310px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(15, 46, 43, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.service-card[b-48eifoiq90]::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #14b8a6, #2dd4bf, #a3ffef);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.service-card[b-48eifoiq90]::after {
    content: "";
    position: absolute;
    inset: auto -25% -45% auto;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.15), rgba(20, 184, 166, 0));
    transition: transform 0.3s ease;
}

.service-card:hover[b-48eifoiq90] {
    transform: translateY(-8px);
    border-color: rgba(20, 184, 166, 0.45);
    box-shadow: 0 24px 55px rgba(15, 46, 43, 0.12);
}

.service-card:hover[b-48eifoiq90]::before {
    opacity: 1;
}

.service-card:hover[b-48eifoiq90]::after {
    transform: scale(1.2);
}

.service-card-top[b-48eifoiq90] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.service-icon-wrap[b-48eifoiq90] {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
    transition: transform 0.25s ease;
}

.service-card:hover .service-icon-wrap[b-48eifoiq90] {
    transform: scale(1.06) rotate(-4deg);
}

.icon-checkout[b-48eifoiq90] {
    background: linear-gradient(135deg, #dffaf5, #b7f0e5);
}

.icon-qualify[b-48eifoiq90] {
    background: linear-gradient(135deg, #e0f2fe, #bfdbfe);
}

.icon-reengage[b-48eifoiq90] {
    background: linear-gradient(135deg, #fef3c7, #fed7aa);
}

.icon-endpoints[b-48eifoiq90] {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
}

.service-icon[b-48eifoiq90] {
    font-size: 1.7rem;
    line-height: 1;
}

.service-tag[b-48eifoiq90] {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.7rem;
    border-radius: 999px;
    background: rgba(20, 184, 166, 0.08);
    color: #0d9488;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.service-card h3[b-48eifoiq90] {
    position: relative;
    z-index: 1;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f2e2b;
    margin: 0 0 0.8rem;
}

.service-card p[b-48eifoiq90] {
    position: relative;
    z-index: 1;
    color: #5d6f6d;
    line-height: 1.7;
    margin: 0;
    font-size: 0.96rem;
}

.service-card-footer[b-48eifoiq90] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(15, 46, 43, 0.08);
}

.service-learn[b-48eifoiq90] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #0f2e2b;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.service-arrow[b-48eifoiq90] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(20, 184, 166, 0.08);
    color: #0d9488;
    font-size: 1.05rem;
    font-weight: 700;
    transition: transform 0.25s ease, background 0.25s ease;
}

.service-card:hover .service-arrow[b-48eifoiq90] {
    background: rgba(20, 184, 166, 0.16);
    transform: translateX(4px);
}

.card-index[b-48eifoiq90] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    background: rgba(15, 46, 43, 0.04);
    border: 1px solid rgba(15, 46, 43, 0.08);
    font-size: 0.72rem;
    font-weight: 800;
    color: #0d9488;
    z-index: 2;
}

.about-section[b-48eifoiq90] {
    /* background: #f6faf8; */
    padding: 3rem 1.25rem;
}

.about-container[b-48eifoiq90] {
    max-width: 1400px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.about-image-wrapper[b-48eifoiq90] {
    position: relative;
}

.about-main-img[b-48eifoiq90] {
    width: auto;
    /* border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md); */
    object-fit: cover;
    height: 500px;
}

/* .about-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--brand-teal);
    color: var(--text-white);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    text-align: center;
    font-size: 0.9rem;
} */

.about-content[b-48eifoiq90] {
    color: var(--text-inverse);
}

.about-tag[b-48eifoiq90] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--brand-teal);
}

.about-content h2[b-48eifoiq90] {
    margin: 0.75rem 0 1rem;
    color: var(--brand-dark);
    font-size: 1.6rem;
    line-height: 1.3;
}

.about-highlight[b-48eifoiq90] {
    /* font-weight: 600; */
    margin-bottom: 0.75rem;
    color: var(--brand-teal);
}

.about-desc[b-48eifoiq90] {
    color: #5f6f6b;
    margin-bottom: 1.25rem;
}

.about-list[b-48eifoiq90] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.about-list li[b-48eifoiq90] {
    padding-left: 1.75rem;
    position: relative;
    margin-bottom: 0.6rem;
    color: var(--color-primary);
}

.about-list strong[b-48eifoiq90] {
    color: var(--brand-dark);
}

.about-list li[b-48eifoiq90]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--brand-teal);
    font-weight: bold;
}

.about-actions[b-48eifoiq90] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-primary[b-48eifoiq90] {
    background: var(--brand-teal);
    color: var(--text-white);
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    width: fit-content;
}

.btn-primary:hover[b-48eifoiq90] {
    background: var(--color-primary-dark);
}

.about-email[b-48eifoiq90] {
    color: var(--brand-teal);
    font-weight: 500;
    text-decoration: none;
    overflow-wrap: anywhere; 
    word-break: break-word;
}

.stats-cta-section[b-48eifoiq90] {
    padding: 2.5rem 1rem;
    background: #f6fbf8;
}

.stats-cta-card[b-48eifoiq90] {
    max-width: 1600px;
    margin: 0 auto;
    background: linear-gradient( 45deg, #0F172A, #0D9488 );
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 2vw, 2rem);
    color: var(--text-white);
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 5rem);
    align-items: center;
}

.stats-api-media[b-48eifoiq90] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.stats-api-media img[b-48eifoiq90] {
    display: block;
    width: 100%;
    max-width: 620px;
    height: auto;
    border-radius: 18px;
    object-fit: cover;
}

.stats-api-content[b-48eifoiq90] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stats-api-kicker[b-48eifoiq90] {
    margin-bottom: 0.75rem;
    color: #99f6e4;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.stats-api-content h2[b-48eifoiq90] {
    font-size: clamp(1.4rem, 2vw, 2.4rem);
    line-height: 1.3;
    margin: 0;
}

.stats-api-content p[b-48eifoiq90] {
    text-align: left;
    margin: 1rem 0 0;
    max-width: 50ch;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.7;
}

.stats-api-points[b-48eifoiq90] {
    list-style: none;
    display: grid;
    gap: 0.75rem;
    width: 100%;
    margin: 1.5rem 0 0;
    padding: 0;
}

.stats-api-points li[b-48eifoiq90] {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
}

.stats-api-points i[b-48eifoiq90] {
    flex: 0 0 auto;
    color: #99f6e4;
    font-size: 1.1rem;
    margin-top: 0.1rem;
}

.stats-grid[b-48eifoiq90],
.stats-header[b-48eifoiq90],
.stats-divider[b-48eifoiq90],
.cta-btn[b-48eifoiq90] {
    display: none;
}

@media (min-width: 768px) {
    .stats-cta-card[b-48eifoiq90] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* SignalSection.razor.css — scoped automatically to SignalSection.razor by Blazor's build.
   Add the Google Fonts <link> below to your host page's <head> (wwwroot/index.html for
   Blazor WASM, or Components/App.razor for Blazor Server / .NET 8+):

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
*/

.signal-section[b-48eifoiq90]{
    padding:5.5rem 1.5rem;
    background: linear-gradient(180deg, #f4fbf7 0%, #edf9ff 100%);
}

.signal-container[b-48eifoiq90]{
    max-width:1400px;
    margin:0 auto;
}

/* ---------- Header ---------- */

.signal-head[b-48eifoiq90]{
    max-width:660px;
    margin-bottom:2.75rem;
}

.signal-pill[b-48eifoiq90]{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.4rem 0.85rem 0.4rem 0.6rem;
    border-radius:999px;
    background:var(--paper-card);
    border:1px solid var(--line);
    font-size:0.82rem;
    color:var(--border-dark);
    font-weight:500;
}

.signal-pill .dot[b-48eifoiq90]{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent-bright);
    box-shadow:0 0 0 3px var(--accent-wash);
}

.signal-head h2[b-48eifoiq90]{
    font-weight:600;
    font-size:clamp(2.1rem, 3.4vw, 3.1rem);
    line-height:1.08;
    letter-spacing:-0.01em;
    color:var(--brand-dark);
    margin:1.1rem 0 0;
}

/* ---------- Grid ---------- */

.signal-grid[b-48eifoiq90]{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:2.5rem;
    align-items:center;
}

/* ---------- Left copy ---------- */

.signal-copy[b-48eifoiq90] {
    
}

.signal-points[b-48eifoiq90]{
    list-style:none;
    margin:0;
    display:grid;
    gap:0.85rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 28px;
    box-shadow: 0 18px 45px rgba(15, 118, 110, 0.08);
    padding: 0.5rem;
}

.signal-points li[b-48eifoiq90]{
    display:grid;
    grid-template-columns:3rem 1fr;
    gap:0.9rem;
    padding:1rem 1rem 1rem 0.85rem;
    border-radius:22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,250,255,0.9));
    border:1px solid rgba(148, 163, 184, 0.15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.point-num[b-48eifoiq90]{
    width:2.25rem;
    height:2.25rem;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:0.85rem;
    color:#0f172a;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border:1px solid rgba(52, 211, 153, 0.3);
    box-shadow: 0 10px 18px rgba(16, 185, 129, 0.10);
    font-weight:700;
}

.point-copy strong[b-48eifoiq90]{
    display:block;
    font-size:1.02rem;
    color:var(--brand-dark);
    font-weight:700;
    margin-bottom:0.35rem;
}

.point-copy span[b-48eifoiq90]{
    display:block;
    font-size:0.94rem;
    line-height:1.6;
    color:var(--color-primary);
    max-width:36ch;
}

/* ---------- Right: phone mock ---------- */

.signal-visual[b-48eifoiq90]{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.phone[b-48eifoiq90]{
    position:relative;
    max-width:340px;
    margin:0 auto;
    background:var(--gradient-primary, linear-gradient(65deg, #0F172A, #0D9488));
    border-radius:var(--radius-lg, 40px);
    padding:0.85rem;
    box-shadow:var(--shadow-lg, 0 20px 50px rgba(0,0,0,0.25));
}

.phone-screen[b-48eifoiq90]{
    background:var(--paper-card);
    border-radius:calc(var(--radius-lg, 40px) - 8px);
    overflow:hidden;
    min-height:500px;
    display:flex;
    flex-direction:column;
}

.phone-topbar[b-48eifoiq90]{
    display:flex;
    align-items:center;
    gap:0.7rem;
    padding:0.95rem 1.1rem;
    border-bottom:1px solid var(--line-soft);
}

.phone-avatar[b-48eifoiq90]{
    width:2.1rem;
    height:2.1rem;
    border-radius:50%;
    background:var(--gradient-primary, linear-gradient(65deg, #0F172A, #0D9488));
    flex-shrink:0;
}

.phone-topbar-copy[b-48eifoiq90]{
    display:flex;
    flex-direction:column;
    line-height:1.25;
}

.phone-topbar-copy strong[b-48eifoiq90]{
    font-size:0.9rem;
    color:var(--ink);
}

.phone-topbar-copy span[b-48eifoiq90]{
    font-size:0.75rem;
    color:var(--ink);
}

.phone-body[b-48eifoiq90] {
    flex: 1;
    padding: 1.1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;

    background:
        linear-gradient(rgba(241, 247, 242, 0.24), rgba(241, 247, 242, 0.24)),
        url("/images/wallpaper-whatsapp.webp") center / cover no-repeat;
}

.bubble-row[b-48eifoiq90]{
    display:flex;
    flex-direction:column;
    gap:0.3rem;
    opacity:0;
    animation:bubbleIn-b-48eifoiq90 11s ease infinite;
}

.bubble-row.row-1[b-48eifoiq90]{ animation-delay:0s; align-items:flex-start; }
.bubble-row.row-2[b-48eifoiq90]{ animation-delay:1.6s; align-items:flex-start; }
.bubble-row.row-3[b-48eifoiq90]{ animation-delay:3.4s; align-items:flex-end; }
.bubble-row.row-4[b-48eifoiq90]{ animation-delay:5.2s; align-items:flex-start; }

.bubble[b-48eifoiq90]{
    max-width:82%;
    padding:0.6rem 0.85rem;
    border-radius:var(--radius-sm, 15px);
    font-size:0.87rem;
    line-height:1.45;
}

.bubble.in[b-48eifoiq90]{
    background:#ffffff;
    border:1px solid var(--line);
    color:var(--primary-color);
    border-top-left-radius:4px;
}

.bubble.out[b-48eifoiq90]{
    background:#ffffff;
    color:var(--primary-color);
    border-top-right-radius:4px;
}

.row-1 .bubble[b-48eifoiq90]{
    opacity:0.55;
    text-decoration:line-through;
    text-decoration-color:rgba(16,35,28,0.3);
}

.tag[b-48eifoiq90]{
    display:inline-flex;
    align-items:center;
    gap:0.35rem;
    font-size:0.68rem;
    font-weight:600;
    padding:0.2rem 0.55rem;
    border-radius:999px;
}

.tag.low[b-48eifoiq90]{
    background:var(--flag-wash);
    color:var(--brand-dark);
}

.tag.high[b-48eifoiq90]{
    background:var(--accent-wash);
    color:var(--accent);
}

.metric-float[b-48eifoiq90]{
    position:absolute;
    top:-1.1rem;
    right:-0.5rem;
    background:var(--brand-dark, #052c24);
    color:#f2f5f2;
    padding:0.7rem 1rem;
    border-radius:var(--radius-sm, 15px);
    box-shadow:var(--shadow-md, 0 10px 25px rgba(0,0,0,0.20));
    display:flex;
    flex-direction:column;
    gap:0.1rem;
}

.metric-float span[b-48eifoiq90]{
    font-size:0.65rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--slate-soft);
}

.metric-float strong[b-48eifoiq90]{
    font-family: 'Quicksand', sans-serif;
    font-size:1.15rem;
    color:var(--accent-bright);
}

@keyframes bubbleIn-b-48eifoiq90{
    0%{ opacity:0; transform:translateY(8px); }
    8%{ opacity:1; transform:translateY(0); }
    82%{ opacity:1; transform:translateY(0); }
    92%{ opacity:0; transform:translateY(0); }
    100%{ opacity:0; }
}

/* ---------- Step rail ---------- */

.step-rail[b-48eifoiq90]{
    margin-top:2.1rem;
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    position:relative;
    padding:1rem 0.75rem 0;
    background: rgba(255,255,255,0.28);
    border:1px solid rgba(148,163,184,0.16);
    border-radius:22px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.step-rail[b-48eifoiq90]::before{
    content:"";
    position:absolute;
    top: 1.3rem;
    left:12%;
    right:12%;
    height:2px;
    border-radius:999px;
    background: linear-gradient(90deg, rgba(20,184,166,0.25), rgba(59,130,246,0.20));
}

.rail-step[b-48eifoiq90]{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:0.55rem;
    padding:0 0.4rem 0.75rem;
}

.rail-num[b-48eifoiq90]{
    position:relative;
    z-index:1;
    width:0.95rem;
    height:0.95rem;
    border-radius:50%;
    background:var(--paper);
    border:2px solid rgba(148, 163, 184, 0.8);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.16);
}

.rail-step.done .rail-num[b-48eifoiq90]{
    background:linear-gradient(135deg, #34d399 0%, #22c55e 100%);
    border-color:rgba(52,211,153,0.9);
    box-shadow: 0 0 0 4px rgba(52,211,153,0.18);
}

.rail-step span[b-48eifoiq90]{
    font-size:0.78rem;
    color:var(--slate);
    line-height:1.35;
    max-width:12ch;
}

.rail-step.done span[b-48eifoiq90] {
    color:#0f172a;
    font-weight:600;
}

/* ---------- Responsive ---------- */

@media (max-width:900px){
    .signal-grid[b-48eifoiq90]{
        grid-template-columns:1fr;
    }
    .signal-visual[b-48eifoiq90]{
        margin-top:0.5rem;
    }
}

@media (max-width:520px){
    .signal-section[b-48eifoiq90]{ 
        padding:3.5rem 1.1rem; 
    }
    .step-rail[b-48eifoiq90]{ 
        grid-template-columns:repeat(2,1fr); 
        row-gap:1.6rem; 
    }
    .step-rail[b-48eifoiq90]::before{ 
        display:none; 
    }
}

.adapter-section[b-48eifoiq90] {
    background: linear-gradient(180deg, #f5fbff 0%, #edf7f4 100%);
    padding: 4rem 1rem;
}

.adapter-container[b-48eifoiq90] {
    max-width: 1240px;
    margin: 0 auto;
}

.adapter-header[b-48eifoiq90] {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 2.5rem;
}

.adapter-kicker[b-48eifoiq90] {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #0f766e;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.adapter-header h2[b-48eifoiq90] {
    margin: 1rem 0 0;
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 1.15;
    color: #071b2a;
}

.adapter-grid[b-48eifoiq90] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}

.adapter-copy[b-48eifoiq90] {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(15, 118, 110, 0.12);
    border-radius: 28px;
    padding: clamp(1.5rem, 2vw, 2.5rem);
    box-shadow: 0 18px 45px rgba(15, 118, 110, 0.08);
    backdrop-filter: blur(8px);
}

.adapter-copy p[b-48eifoiq90] {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.8;
    color: #334155;
}

.adapter-points[b-48eifoiq90] {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.adapter-points li[b-48eifoiq90] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #1f2937;
}

.adapter-points i[b-48eifoiq90] {
    font-size: 1.15rem;
    color: #14b8a6;
    margin-top: 0.1rem;
}

.adapter-points span[b-48eifoiq90] {
    line-height: 1.6;
}

.adapter-cta-row[b-48eifoiq90] {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.adapter-primary-btn[b-48eifoiq90],
.adapter-secondary-btn[b-48eifoiq90] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.85rem 1.5rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.adapter-primary-btn[b-48eifoiq90] {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
    color: #ffffff;
    box-shadow: 0 16px 32px rgba(20, 184, 166, 0.25);
}

.adapter-secondary-btn[b-48eifoiq90] {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(15, 118, 110, 0.18);
    color: #0f172a;
}

.adapter-primary-btn:hover[b-48eifoiq90],
.adapter-secondary-btn:hover[b-48eifoiq90] {
    transform: translateY(-2px);
}

.adapter-panel[b-48eifoiq90] {
    display: flex;
    justify-content: center;
}

.panel-visual[b-48eifoiq90] {
    width: min(100%, 620px);
    background: linear-gradient(180deg, #0f172a 0%, #0f1e33 100%);
    border-radius: 30px;
    padding: clamp(1.25rem, 2vw, 2rem);
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-top[b-48eifoiq90] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.status-pill[b-48eifoiq90] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    background: rgba(94, 234, 212, 0.12);
    border: 1px solid rgba(94, 234, 212, 0.25);
    color: #d7fff7;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-dot[b-48eifoiq90] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
}

.integration-flow[b-48eifoiq90] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(0.35rem, 1.2vw, 0.75rem);
    padding: 1rem 0;
}

.integration-step[b-48eifoiq90] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-width: 0;
    min-height: 96px;
    padding: 0.85rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
    color: #edf2ff;
    text-align: center;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.integration-step:hover[b-48eifoiq90] {
    transform: translateY(-2px);
    border-color: rgba(94, 234, 212, 0.35);
    background: linear-gradient(145deg, rgba(20, 184, 166, 0.16), rgba(255, 255, 255, 0.04));
}

.integration-step-adapter[b-48eifoiq90] {
    border-color: rgba(94, 234, 212, 0.4);
    background: linear-gradient(145deg, rgba(20, 184, 166, 0.2), rgba(59, 130, 246, 0.12));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.12);
}

.integration-step-adapter:hover[b-48eifoiq90] {
    border-color: rgba(94, 234, 212, 0.6);
    background: linear-gradient(145deg, rgba(20, 184, 166, 0.28), rgba(59, 130, 246, 0.17));
}

.integration-step-icon[b-48eifoiq90] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #a8e9dc;
    font-size: 1.1rem;
}

.integration-step-adapter .integration-step-icon[b-48eifoiq90] {
    border-color: rgba(94, 234, 212, 0.25);
    background: rgba(94, 234, 212, 0.12);
    color: #72e1ce;
}

.integration-step-label[b-48eifoiq90] {
    color: #edf2ff;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.flow-arrow[b-48eifoiq90] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8bd5c8;
    font-size: 1rem;
}

.info-stack[b-48eifoiq90] {
    margin-top: 1.5rem;
    display: grid;
    gap: 1rem;
}

.info-item[b-48eifoiq90] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.info-icon[b-48eifoiq90] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.28), rgba(45, 212, 191, 0.1));
    color: #9ae6d7;
    font-size: 1.2rem;
}

.info-copy[b-48eifoiq90] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.info-copy strong[b-48eifoiq90] {
    color: #f8fafc;
    font-size: 0.95rem;
}

.info-copy small[b-48eifoiq90] {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.8rem;
}

@media (min-width: 768px) {
    .adapter-section[b-48eifoiq90] {
        padding: 5rem 1.25rem;
    }

    .adapter-grid[b-48eifoiq90] {
        grid-template-columns: 1.08fr 0.92fr;
    }
}

@media (max-width: 767px) {
    .adapter-section[b-48eifoiq90] {
        padding: 3rem 0.85rem;
    }

    .adapter-copy[b-48eifoiq90],
    .panel-visual[b-48eifoiq90] {
        border-radius: 22px;
    }

    .adapter-cta-row[b-48eifoiq90] {
        flex-direction: column;
    }

    .adapter-primary-btn[b-48eifoiq90],
    .adapter-secondary-btn[b-48eifoiq90] {
        width: 100%;
    }

    .integration-flow[b-48eifoiq90] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.55rem;
        padding: 0.25rem 0;
    }

    .flow-arrow[b-48eifoiq90] {
        transform: rotate(90deg);
    }

    .panel-top[b-48eifoiq90] {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 420px) {
    .adapter-header h2[b-48eifoiq90] {
        font-size: 1.5rem;
    }

    .adapter-copy p[b-48eifoiq90] {
        font-size: 0.95rem;
    }

    .adapter-points li[b-48eifoiq90] {
        padding: 0.8rem 0.75rem;
    }
}

.steps-section[b-48eifoiq90] {
    background: var(--color-primary);
    padding: 4rem 1.25rem;
}

.steps-container[b-48eifoiq90] {
    max-width: 1600px;
    margin: auto;
}

.steps-header[b-48eifoiq90] {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 3.5rem;
}

.steps-tag[b-48eifoiq90] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-white);
}

.steps-header h2[b-48eifoiq90] {
    font-size: 1.8rem;
    margin: 0.75rem 0;
    color: var(--text-white);
    line-height: 1.25;
}

.steps-header p[b-48eifoiq90] {
    font-size: 0.95rem;
    color: var(--text-white);
    line-height: 1.6;
}

.steps-grid[b-48eifoiq90] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

.step-card[b-48eifoiq90] {
    position: relative;
    background: var(--text-white);
    padding: 2.6rem 1.75rem 2rem;
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.35s ease;
}

.step-card[b-48eifoiq90]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: var(--brand-dark);
    transform: translate(100%, -100%);
    transition: all 0.6s ease;
    transition-delay: 0.2s;
    z-index: 0;
}

.step-card[b-48eifoiq90]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
    background: var(--brand-dark);
    border-bottom-left-radius: 100%;
    box-shadow: var(--shadow-sm);
    transition: all 0.6s ease;
    overflow: hidden;
    z-index: 1;
}

.step-card:hover[b-48eifoiq90]::after {
    transform: translate(0, 0);
}

.step-card:hover[b-48eifoiq90]::before {
    background: var(--text-white);
}

.step-number[b-48eifoiq90] {
    position: absolute;
    top: 1.2rem;
    right: 1.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-white);
    z-index: 2;
    transition: all 0.4 ease-in;
}

.step-card:hover .step-number[b-48eifoiq90] {
    color: var(--brand-dark);
}

.step-icon[b-48eifoiq90] {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--brand-dark);
    color: #9ae6d7;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 2;
    transition: all 0.4s ease-out;
    transition-delay: 0.3s;
}

.step-card:hover .step-icon[b-48eifoiq90] {
    background: var(--text-white);
    color: var(--brand-dark);
}

.step-card h3[b-48eifoiq90] {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    color: var(--brand-dark);
    position: relative;
    z-index: 2;
    transition: all 0.4s ease-out;
    transition-delay: 0.3s;
}

.step-card:hover h3[b-48eifoiq90] {
    color: var(--text-white);
}

.step-card p[b-48eifoiq90] {
    font-size: 0.9rem;
    color: #5f6f6b;
    line-height: 1.6;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease-out;
    transition-delay: 0.5s;
}

.step-card:hover p[b-48eifoiq90] {
    color: var(--text-white);
}

.steps-footer[b-48eifoiq90] {
    text-align: center;
    margin-top: 3rem;
    font-size: 0.9rem;
    color: var(--text-white);
}

.pricing-section[b-48eifoiq90] {
    padding: 2rem 1rem;
    background: #f7faf9;
}

.pricing-container[b-48eifoiq90] {
    max-width: 1200px;
    margin: auto;
}

.pricing-header[b-48eifoiq90] {
    text-align: center;
    margin-bottom: 3rem;
}

.pricing-tag[b-48eifoiq90] {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: rgba(0, 128, 128, 0.12);
    color: #008080;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}

.pricing-header h2[b-48eifoiq90] {
    font-size: 1.9rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #052659;
}

.pricing-header p[b-48eifoiq90] {
    color: #6b7280;
    max-width: 520px;
    margin: auto;
    font-size: 0.95rem;
}

.pricing-toggle[b-48eifoiq90] {
    margin-top: 1.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #ffffff;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.pricing-toggle span[b-48eifoiq90] {
    font-size: 0.85rem;
    color: #9ca3af;
}

.pricing-toggle span.active[b-48eifoiq90] {
    color: #008080;
    font-weight: 600;
}

.switch[b-48eifoiq90] {
    position: relative;
    width: 46px;
    height: 26px;
}

.switch input[b-48eifoiq90] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-48eifoiq90] {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    transition: 0.3s;
}

.slider[b-48eifoiq90]::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: #ffffff;
    border-radius: 50%;
    transition: 0.3s;
}

.switch input:checked + .slider[b-48eifoiq90] {
    background: #008080;
}

.switch input:checked + .slider[b-48eifoiq90]::before {
    transform: translateX(20px);
}

.pricing-grid[b-48eifoiq90] {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 1.5rem;
}

.pricing-card[b-48eifoiq90] {
    background: #ffffff;
    border-radius: 20px;
    padding: 2.2rem 1.6rem;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
    transition: 0.35s ease;
}

.pricing-card h3[b-48eifoiq90] {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #052659;
}

.price[b-48eifoiq90] {
    font-size: 2.1rem;
    font-weight: 800;
    color: #052659;
    margin-bottom: 1.4rem;
}

.price small[b-48eifoiq90] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #9ca3af;
}

.pricing-card ul[b-48eifoiq90] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
}

.pricing-card li[b-48eifoiq90] {
    padding: 0.55rem 0;
    font-size: 0.95rem;
    color: #374151;
}

.pricing-btn[b-48eifoiq90] {
    width: 100%;
    padding: 0.85rem;
    border-radius: 999px;
    border: 1px solid #008080;
    background: transparent;
    color: #008080;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.pricing-btn:hover[b-48eifoiq90] {
    background: #008080;
    color: #ffffff;
}

.pricing-btn.primary[b-48eifoiq90] {
    background: #008080;
    color: #ffffff;
    border-color: #008080;
}

.final-cta.brand-bg[b-48eifoiq90] {
    background: var(--brand-teal);
}

.final-cta-container[b-48eifoiq90] {
    max-width: 840px;
    margin: auto;
    text-align: center;
    padding: 2rem;
}

.final-cta h2[b-48eifoiq90] {
    font-size: 2.2rem;
    color: var(--text-white);
    margin-bottom: 1rem;
}

.final-cta p[b-48eifoiq90] {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 640px;
    margin: 0 auto 2.75rem;
    line-height: 1.6;
}

.cta-button[b-48eifoiq90] {
    display: inline-block;
    padding: 0.95rem 2.4rem;
    border-radius: 999px;
    background: #ffffff;
    color: var(--brand-teal);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.cta-button:hover[b-48eifoiq90] {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

.api-showcase-section[b-48eifoiq90] {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 7vw, 6rem) 1.25rem;
    background:
        radial-gradient(ellipse at 8% 5%, rgba(27, 176, 143, 0.09), transparent 34rem),
        linear-gradient(180deg, #f8fbfa 0%, #eef5f3 100%);
}

.api-showcase-container[b-48eifoiq90] {
    max-width: 1120px;
    margin: 0 auto;
}

.api-showcase-header[b-48eifoiq90] {
    max-width: 720px;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.api-showcase-tag[b-48eifoiq90],
.api-code-label[b-48eifoiq90] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #087e70;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.api-showcase-tag[b-48eifoiq90]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #19b891;
    box-shadow: 0 0 0 4px rgba(25, 184, 145, 0.13);
}

.api-showcase-header h2[b-48eifoiq90] {
    margin: 0.65rem 0;
    color: var(--brand-dark);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.2;
}

.api-showcase-header p[b-48eifoiq90] {
    margin: 0;
    color: #60716e;
    font-size: 1rem;
    line-height: 1.7;
}

.api-flow-card[b-48eifoiq90] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
    padding: clamp(1.15rem, 3vw, 2rem);
    border: 1px solid rgba(21, 94, 82, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 50px rgba(10, 48, 43, 0.08), 0 2px 8px rgba(10, 48, 43, 0.03);
    backdrop-filter: blur(10px);
}

.api-flow-node[b-48eifoiq90] {
    min-height: 156px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 1.25rem 0.8rem;
    border: 1px solid #e2ece8;
    border-radius: 18px;
    background: linear-gradient(145deg, #fff, #f5faf8);
    text-align: center;
    box-shadow: 0 8px 24px rgba(20, 58, 52, 0.045);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.api-flow-node:hover[b-48eifoiq90] {
    transform: translateY(-3px);
    box-shadow: 0 13px 30px rgba(20, 58, 52, 0.1);
}

.api-flow-node-em[b-48eifoiq90] {
    border-color: rgba(0, 128, 128, 0.25);
    background: linear-gradient(145deg, #f1fbf7, #e6f6f0);
}

.api-flow-icon[b-48eifoiq90] {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
    background: rgba(11, 143, 119, 0.1);
    color: #087e70;
    font-size: 1.35rem;
}

.api-flow-node strong[b-48eifoiq90] {
    color: var(--brand-dark);
    font-size: 1rem;
}

.api-flow-node > span:last-child[b-48eifoiq90] {
    color: #6b7c78;
    font-size: 0.8rem;
}

.api-flow-routes[b-48eifoiq90] {
    display: grid;
    gap: 0.75rem;
}

.api-flow-routes > span[b-48eifoiq90] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #14937c;
}

.api-flow-routes code[b-48eifoiq90] {
    padding: 0.48rem 0.62rem;
    border: 1px solid #d9ebe5;
    border-radius: 9px;
    background: #f2faf7;
    color: #145d54;
    font-size: clamp(0.68rem, 1vw, 0.78rem);
    font-weight: 600;
    white-space: nowrap;
}

.api-flow-routes i[b-48eifoiq90] {
    flex: 1;
    overflow: hidden;
    font-size: 1.1rem;
}

.api-code-card[b-48eifoiq90] {
    overflow: hidden;
    margin-top: clamp(1rem, 2.5vw, 1.5rem);
    border: 1px solid #292d3c;
    border-radius: 24px;
    background: #151722;
    box-shadow: 0 24px 60px rgba(13, 21, 35, 0.2), 0 4px 12px rgba(13, 21, 35, 0.08);
}

.api-code-topbar[b-48eifoiq90] {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, #202230, #1b1d29);
}

.api-code-topbar > span[b-48eifoiq90] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ff625c;
}

.api-code-topbar > span:nth-child(2)[b-48eifoiq90] { background: #ffbd44; }
.api-code-topbar > span:nth-child(3)[b-48eifoiq90] { background: #00ca4e; }

.api-code-topbar small[b-48eifoiq90] {
    margin-left: auto;
    color: #a7adbf;
    font-size: 0.75rem;
}

.api-code-content[b-48eifoiq90] {
    display: grid;
    grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr);
    align-items: center;
    gap: 2rem;
    padding: clamp(1.25rem, 3.5vw, 2.5rem);
}

.api-code-copy h3[b-48eifoiq90] {
    margin: 0.65rem 0;
    color: #f4f6fb;
    font-size: 1.4rem;
    line-height: 1.3;
}

.api-code-copy p[b-48eifoiq90] {
    margin: 0 0 1.1rem;
    color: #b5bdcf;
    font-size: 0.9rem;
    line-height: 1.65;
}

.api-docs-link[b-48eifoiq90] {
    color: #65dfc4;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.api-docs-link:hover[b-48eifoiq90] { color: #a1f2df; }

.api-code[b-48eifoiq90] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: auto;
    margin: 0;
    padding: clamp(0.9rem, 2vw, 1.35rem);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: #10111a;
    color: #d7def2;
    font: 0.76rem/1.85 Consolas, "SFMono-Regular", monospace;
    white-space: pre;
    tab-size: 4;
    scrollbar-color: #45495a #10111a;
    scrollbar-width: thin;
}

.api-code-sample[b-48eifoiq90] {
    display: block;
    width: max-content;
    min-width: 100%;
    white-space: inherit;
}

.api-code-sample.is-typing[b-48eifoiq90]::after {
    display: inline-block;
    width: 7px;
    height: 1em;
    margin-left: 2px;
    background: #65dfc4;
    content: "";
    vertical-align: -0.15em;
    animation: api-code-cursor-b-48eifoiq90 0.8s steps(1, end) infinite;
}

@keyframes api-code-cursor-b-48eifoiq90 {
    50% { opacity: 0; }
}

.code-keyword[b-48eifoiq90] { color: #c49aff; }
.code-string[b-48eifoiq90] { color: #a8d978; }

@media (max-width: 960px) {
    .api-code-content[b-48eifoiq90] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .api-code-copy[b-48eifoiq90] { max-width: 620px; }
}

@media (max-width: 760px) {
    .api-showcase-section[b-48eifoiq90] { padding: 3.5rem 1rem; }

    .api-showcase-header[b-48eifoiq90] { margin-bottom: 1.75rem; }

    .api-flow-card[b-48eifoiq90] {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.25rem;
    }

    .api-flow-node[b-48eifoiq90] { min-height: 112px; }

    .api-flow-routes[b-48eifoiq90] {
        width: min(100%, 320px);
        justify-self: center;
    }

    .api-flow-routes > span[b-48eifoiq90] { justify-content: center; }

    .api-flow-routes i[b-48eifoiq90] { flex: 0 0 auto; transform: rotate(90deg); }

    .api-code-content[b-48eifoiq90] { padding: 1.25rem; }

    .api-code[b-48eifoiq90] { font-size: 0.68rem; }
}

@media (max-width: 420px) {
    .api-showcase-section[b-48eifoiq90] { padding-right: 0.75rem; padding-left: 0.75rem; }
    .api-flow-card[b-48eifoiq90] { padding: 0.85rem; border-radius: 18px; }
    .api-code-card[b-48eifoiq90] { border-radius: 18px; }
    .api-code-content[b-48eifoiq90] { padding: 1rem; }
    .api-code[b-48eifoiq90] { font-size: 0.62rem; }
}


.testimonial-section[b-48eifoiq90] {
    background: #ffffff;
    padding: 3rem 1.25rem; 
}

.testimonial-container[b-48eifoiq90] {
    max-width: 900px;
    margin: auto;
}

.testimonial-header h2[b-48eifoiq90] {
    font-size: 2rem;
    color: var(--brand-dark);
    margin-bottom: 0.4rem;
}

.testimonial-header .tag[b-48eifoiq90] {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--color-primary);
}

.testimonial-header p[b-48eifoiq90] {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.testimonial-wrapper[b-48eifoiq90] {
    margin-top: 2.75rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.testimonial-wrapper.fade[b-48eifoiq90] {
    opacity: 0;
    transform: translateY(10px);
}

.testimonial-card[b-48eifoiq90] {
    background: #ffffff;
    border-radius: 20px;
    padding: 3rem;
    border-left: 4px solid var(--brand-dark);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
}

.testimonial-text[b-48eifoiq90] {
    font-size: 1.15rem;
    line-height: 1.75;
    color: #1f2937;
    margin-bottom: 2.25rem;
}

.testimonial-footer[b-48eifoiq90] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.author-badge[b-48eifoiq90] {
    width: 46px;
    height: 46px;
    background: var(--brand-teal);
    color: var(--text-white);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
}

.author-meta strong[b-48eifoiq90] {
    display: block;
    font-size: 0.95rem;
    color: var(--brand-dark);
}

.author-meta span[b-48eifoiq90] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.testimonial-dots[b-48eifoiq90] {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.75rem;
}

.dot[b-48eifoiq90] {
    width: 20px;
    height: 4px;
    background: #d1d5db;
    border-radius: 6px;
}

.dot.active[b-48eifoiq90] {
    background: var(--brand-teal);
}

@media (max-width: 767px) {
    .services-grid[b-48eifoiq90] {
        grid-template-columns: 1fr;
    }

    .service-card[b-48eifoiq90] {
        min-height: auto;
        padding: 1.2rem;
    }

    .service-card-top[b-48eifoiq90] {
        align-items: flex-start;
    }

    .service-icon-wrap[b-48eifoiq90] {
        width: 50px;
        height: 50px;
        border-radius: 14px;
    }

    .service-card h3[b-48eifoiq90] {
        font-size: 1.05rem;
    }

    .service-card p[b-48eifoiq90] {
        font-size: 0.9rem;
    }
}

@media (max-width: 767px) {
    .stats-cta-section[b-48eifoiq90] {
        padding: 0;
    }

    .stats-cta-card[b-48eifoiq90] {
        padding: 1.35rem 1rem;
        border-radius: 0;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .stats-api-content[b-48eifoiq90] {
        align-items: flex-start;
    }
}

@media (max-width: 426px) {
    .hero-wrapper[b-48eifoiq90] {
        padding: 16px;
        border-radius: 0;
    }

    .hero-text h1[b-48eifoiq90] {
        font-size: 1.45rem;
    }

    .hero-text p[b-48eifoiq90] {
        font-size: 0.92rem;
        margin-bottom: 22px;
    }

    .btn-get-started[b-48eifoiq90] {
        padding: 12px 22px;
        font-size: 0.92rem;
    }

    .services[b-48eifoiq90] {
        padding: 3.5rem 1rem;
    }

    .services-header h2[b-48eifoiq90] {
        font-size: 1.6rem;
    }

    .service-card[b-48eifoiq90] {
        padding: 2rem 1.25rem 3rem;
        width: 100%; 
    }

    .content-container h2[b-48eifoiq90] {
        font-size: 1.7rem;
    }

    .solution-card[b-48eifoiq90] {
        padding: 22px;
    }

    .about-main-img[b-48eifoiq90] {
        height: 280px;
        width: 380px;
        object-fit: cover;
    }

    /* .about-badge {
        width: 64px;
        height: 64px;
        font-size: 0.78rem;
    } */

    .about-content h2[b-48eifoiq90] {
        font-size: 1.35rem;
    }

    .stats-cta-card[b-48eifoiq90] {
        padding: 1.5rem 1.1rem;
        border-radius: 0;
    }

    .stats-header h2[b-48eifoiq90] {
        font-size: 1.35rem;
    }

    .stat-value[b-48eifoiq90] {
        font-size: 1.5rem;
    }

    .steps-section[b-48eifoiq90] {
        padding: 3rem 1rem;
    }

    .steps-header h2[b-48eifoiq90] {
        font-size: 1.5rem;
    }

    .step-card[b-48eifoiq90] {
        padding: 2.2rem 1.4rem 1.6rem;
    }

    .pricing-header h2[b-48eifoiq90] {
        font-size: 1.55rem;
    }

    .pricing-card[b-48eifoiq90] {
        padding: 1.8rem 1.3rem;
    }

    .final-cta h2[b-48eifoiq90] {
        font-size: 1.7rem;
    }

    .final-cta p[b-48eifoiq90] {
        font-size: 0.95rem;
    }

    .final-cta-container[b-48eifoiq90] {
        padding: 1.5rem;
    }

    .testimonial-section[b-48eifoiq90] {
        padding: 2.5rem 0.9rem;
    }

    .testimonial-card[b-48eifoiq90] {
        padding: 1.75rem 1.4rem;
    }

    .testimonial-text[b-48eifoiq90] {
        font-size: 1.02rem;
    }

    .auth-dropdown[b-48eifoiq90] {
        right: -10px; 
    }
}


@media (min-width: 768px) {
    
    .hero-wrapper[b-48eifoiq90] {
        margin: 0; 
        padding: 40px; 
    }
    .hero-text h1[b-48eifoiq90] { 
        font-size: 2.8rem; 
    }

    .services-grid[b-48eifoiq90] {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-header h2[b-48eifoiq90] {
        font-size: 2.4rem;
    }

    .solution-grid[b-48eifoiq90] {
        grid-template-columns: repeat(2, 1fr);
    }

    .image-wrapper img[b-48eifoiq90] {
        width: 300px;
    }

    .about-content h2[b-48eifoiq90] {
        font-size: 2rem;
    }

    .about-actions[b-48eifoiq90] {
        flex-direction: row;
        align-items: center;
    }

    .about-image-wrapper[b-48eifoiq90] {
        position: relative;
        width: 70%;
        margin: 0 auto;
    }

    .about-main-img[b-48eifoiq90] {
        height: 500px;
        width: auto;
    }

    .steps-header h2[b-48eifoiq90] {
        font-size: 2.2rem;
    }

    .steps-grid[b-48eifoiq90] {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-section[b-48eifoiq90] {
        padding: 5rem 1.25rem;
    }

    .pricing-header h2[b-48eifoiq90] {
        font-size: 2.1rem;
    }

    .pricing-grid[b-48eifoiq90] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem;
    }

    .pricing-card[b-48eifoiq90] {
        padding: 2.4rem 1.8rem;
    }

    .final-cta h2[b-48eifoiq90] {
        font-size: 2.6rem;
    }

    .final-cta-container[b-48eifoiq90] {
        padding: 3rem 4rem;
    }

    .testimonial-section[b-48eifoiq90] {
        padding: 5rem 2rem; 
    }

    .testimonial-header h2[b-48eifoiq90] {
        font-size: 2.4rem;
    }
}

@media (min-width: 992px) {

    .hero-nav[b-48eifoiq90] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        position: relative;
        z-index: 50;
    }

    .hero-wrapper[b-48eifoiq90] {
        transform: translateY(-40px);
        max-width: 1400px;
        margin: auto;
        border-radius: 40px;
    }

    .nav-links[b-48eifoiq90] {
        display: flex;
        list-style: none;
        gap: 25px;
        background-color: white;
        /* color: black; */
        width: 60%;
        padding: 0 40px;
        height: 60px;
        align-items: center;
        justify-content: center;
        border-radius: 0 0 25px 25px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -40px; 
        flex-wrap: wrap; 
        row-gap: 6px;
    }

        .nav-links[b-48eifoiq90]::before {
            content: "";
            position: absolute;
            top: 0;
            left: -25px;
            width: 25px;
            height: 25px;
            background: transparent;
            border-top-right-radius: 20px;
            box-shadow: 5px -5px 0 5px transparent;
        }

        .nav-links[b-48eifoiq90]::after {
            content: "";
            position: absolute;
            top: 0;
            right: -25px;
            width: 25px;
            height: 25px;
            background: transparent;
            border-top-left-radius: 20px;
            box-shadow: -5px -5px 0 5px transparent;
        }

    .nav-links a[b-48eifoiq90] {
        color: var(--primary-color);
        font-family: 'Quicksand', sans-serif;
        text-decoration: none;
        font-weight: 600;
        font-size: 1.0rem;
        position: relative;
    }

    .nav-links a[b-48eifoiq90]::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 0;
        height: 3px;
        background: var(--gradient-primary);
        transition: width 0.3s ease;
    }


    .nav-links a:hover[b-48eifoiq90]::after {
        width: 100%;
    }

    /* ── Solutions Nav Dropdown ─────────────────────────────────────── */

    .nav-dropdown-item[b-48eifoiq90] {
        position: relative;
        list-style: none;
    }

    

    .nav-caret[b-48eifoiq90] {
        font-size: 0.7rem;
        transition: transform 0.25s ease;
    }

    .nav-dropdown-item:hover .nav-caret[b-48eifoiq90] {
        transform: rotate(180deg);
    }

    .solutions-dropdown[b-48eifoiq90] {
        position: absolute;
        top: 100%  ;
        left: 50%;
        transform: translateX(-50%) translateY(10px);

        width: 360px;
        max-width: calc(100vw - 2rem);

        padding: 10px;

        background:  #0B1120;
        backdrop-filter: blur(18px);
        border: 1px solid rgba(20, 184, 166, 0.5);
        border-radius: 16px;
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.16);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;

        z-index: 9999;
    }

    .nav-dropdown-item:hover .solutions-dropdown[b-48eifoiq90] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
        border-color: rgba(255, 255, 255, 0.28);
        box-shadow: 0 24px 54px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    .solutions-dropdown-link[b-48eifoiq90] {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 8px 12px;
        text-decoration: none;
        color: #f8fafc;
        margin: 0 0 4px;
        border-radius: 12px;
        transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .solutions-dropdown-link:hover[b-48eifoiq90],
    .solutions-dropdown-link:focus-visible[b-48eifoiq90] {
        background: linear-gradient(110deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
        transform: translateX(2px);
        outline: none;
    }

    .nav-links .solutions-dropdown-link:hover[b-48eifoiq90],
    .nav-links .solutions-dropdown-link:focus-visible[b-48eifoiq90] {
        color: var(--color-primary, #008080);
    }

    .solutions-dropdown-link:last-child[b-48eifoiq90] {
        margin-bottom: 0;
    }

    .solutions-icon[b-48eifoiq90] {
        width: 38px;
        height: 38px;
        flex-shrink: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 1.1rem;
        border-radius: 10px;

        color: #cbd5e1;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    .solutions-dropdown-link:hover .solutions-icon[b-48eifoiq90],
    .solutions-dropdown-link:focus-visible .solutions-icon[b-48eifoiq90] {
        color: var(--color-primary, #008080);
        border-color: var(--color-primary, #008080);
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 12px rgba(0, 0, 0, 0.18);
    }

    .solutions-dropdown-link:hover strong[b-48eifoiq90],
    .solutions-dropdown-link:hover small[b-48eifoiq90],
    .solutions-dropdown-link:focus-visible strong[b-48eifoiq90],
    .solutions-dropdown-link:focus-visible small[b-48eifoiq90] {
        color: var(--color-primary, #008080);
    }

    .solutions-dropdown-link strong[b-48eifoiq90] {
        display: block;
        font-size: 0.92rem;
        font-weight: 700;
        color: #f8fafc;
        margin-bottom: 2px;
    }

    .solutions-dropdown-link small[b-48eifoiq90] {
        display: block;
        font-size: 0.78rem;
        line-height: 1.4;
        color: #a7b1c2;
    }

    .register-btn[b-48eifoiq90] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 22px;
        border: none;
        border-radius: var(--radius-sm);
        border: 2px solid rgba(20, 184, 166, 0.5);
        background: transparent;
        color: var(--text-white);
        font-weight: 600;
        cursor: pointer;
        transition: 0.3s ease;
        box-shadow: var(--shadow-sm);
        transform: translateY(-20px);
    }

    .register-btn:hover[b-48eifoiq90] {
        transform: translateY(-22px);
        box-shadow: var(--shadow-md);
    }

    .logo-area[b-48eifoiq90] {
        display: flex;
        align-items: center;
        gap: 4px;
        transform: translateY(-20px);
    }

    .logo-area h2[b-48eifoiq90] {
        font-size: 2rem; 
        font-weight: 600; 
        letter-spacing: 1px;
        color: var(--text-white);
        
    }

    .hero-body[b-48eifoiq90] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        display: grid;
        align-items: center;
        position: relative;
    }

    .hero-image-area[b-48eifoiq90],
    .hero-image-container[b-48eifoiq90] {
        min-width: 0;
    }

    .hero-text[b-48eifoiq90] {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-bottom[b-48eifoiq90] {
        /* margin-top: 5rem; */
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .hero-image-container[b-48eifoiq90] {
        -webkit-mask-image: radial-gradient(
            circle at 0% 50%,
            transparent 55px,
            black 56px
        );
        mask-image: radial-gradient(
            circle at 0% 50%,
            transparent 55px,
            black 56px
        );
    }

    .play-button[b-48eifoiq90] {
        inset: auto;
        left: -35px;
        top: 50%;
        transform: translateY(-50%);
        border: 10px solid var(--brand-dark);
        background-color: var(--brand-light-teal);
    }

    .services-grid[b-48eifoiq90] {
        grid-template-columns: repeat(4, 1fr);
    }

    .services-header h2[b-48eifoiq90] {
        font-size: 2.8rem;
    }

    .solution-grid[b-48eifoiq90] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .content-container h2[b-48eifoiq90] { font-size: 2.8rem; }

    .about-section[b-48eifoiq90] {
        padding: 0 1.25rem;
    }

    .about-container[b-48eifoiq90] {
        flex-direction: row-reverse;
        align-items: center;
        /* gap: 4rem; */
    }

    .about-content[b-48eifoiq90] {
        flex: 0.90;
    }

    .about-image-wrapper[b-48eifoiq90] {
        flex: 1.10;
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .about-content h2[b-48eifoiq90] {
        font-size: 2.3rem;
    }

    .stats-cta-card[b-48eifoiq90] {
        padding: 3rem 3.5rem;
    }

    .stats-header h2[b-48eifoiq90] {
        font-size: 2.4rem;
        max-width: 60%;
    }

    .stats-header p[b-48eifoiq90] {
        max-width: 50%;
    }

    .stat-item[b-48eifoiq90] {
        gap: 20px;
    }

    .steps-header h2[b-48eifoiq90] {
        font-size: 2.5rem;
    }

    .steps-grid[b-48eifoiq90] {
        grid-template-columns: repeat(4, 1fr);
    }

    .pricing-section[b-48eifoiq90] {
        padding: 6rem 1.5rem;
    }

    .pricing-header h2[b-48eifoiq90] {
        font-size: 2.4rem;
    }

    .pricing-grid[b-48eifoiq90] {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .pricing-card:hover[b-48eifoiq90] {
        transform: translateY(-8px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    }

    .final-cta.brand-bg[b-48eifoiq90] {
        padding: 7.5rem 2rem;
    }

    .testimonial-section[b-48eifoiq90] {
        padding: 7rem 2rem;
    }
}
/* Meta Ads workspace overview */
.meta-workspace-section[b-48eifoiq90] {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 7rem) 1.25rem;
    background: #f4f8f8;
}

.meta-workspace-section[b-48eifoiq90]::before {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    top: -280px;
    right: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20, 184, 166, .13), transparent 70%);
    pointer-events: none;
}

.meta-workspace-container[b-48eifoiq90] {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
}

.meta-workspace-heading[b-48eifoiq90] {
    max-width: 720px;
    margin: 0 auto 2.7rem;
    text-align: center;
}

.meta-workspace-heading h2[b-48eifoiq90] {
    margin: 0 auto .9rem;
    color: #102e3a;
    font-size: clamp(2rem, 4vw, 3.15rem);
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.12;
}

.meta-workspace-heading p[b-48eifoiq90] {
    max-width: 620px;
    margin: 0 auto;
    color: #61747b;
    font-size: 1.02rem;
    line-height: 1.75;
}

.meta-workspace-grid[b-48eifoiq90] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.meta-workspace-card[b-48eifoiq90] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 255px;
    padding: 1.55rem;
    border: 1px solid #e4ecec;
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff 0%, #f5fbfa 100%);
    box-shadow: 0 10px 30px rgba(18, 54, 65, .045);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.meta-workspace-card[b-48eifoiq90]::before,
.meta-workspace-card[b-48eifoiq90]::after {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
}

.meta-workspace-card[b-48eifoiq90]::before {
    width: 190px;
    height: 190px;
    top: -92px;
    right: -65px;
    border: 1px solid rgba(15, 118, 110, .09);
    border-radius: 50%;
    box-shadow: 0 0 0 16px rgba(15, 118, 110, .025), 0 0 0 34px rgba(15, 118, 110, .02);
    transition: transform .35s ease, border-color .35s ease;
}

.meta-workspace-card[b-48eifoiq90]::after {
    right: -20px;
    bottom: -42px;
    left: -20px;
    height: 100px;
    opacity: .55;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 100' preserveAspectRatio='none'%3E%3Cpath d='M0 48C75 88 131 16 223 45s139 48 257 2v53H0Z' fill='%23dff3ef'/%3E%3Cpath d='M0 68c83 31 152-25 232-7s150 30 248-9' fill='none' stroke='%2399d8ce' stroke-width='1.5'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
    transition: transform .35s ease, opacity .35s ease;
}

.meta-workspace-card:hover[b-48eifoiq90] {
    transform: translateY(-4px);
    border-color: #b9e3df;
    box-shadow: 0 18px 38px rgba(18, 54, 65, .09);
}

.meta-workspace-card:hover[b-48eifoiq90]::before { transform: scale(1.08); border-color: rgba(15, 118, 110, .16); }
.meta-workspace-card:hover[b-48eifoiq90]::after { transform: translateY(-5px); opacity: .8; }

.meta-workspace-card-featured[b-48eifoiq90] {
    background: linear-gradient(145deg, #0d897d 0%, #0f766e 48%, #0b5360 100%);
    border-color: transparent;
    color: white;
}

.meta-workspace-card-featured[b-48eifoiq90]::before {
    width: 230px;
    height: 230px;
    top: -104px;
    right: -74px;
    border-color: rgba(255,255,255,.19);
    box-shadow: 0 0 0 18px rgba(255,255,255,.055), 0 0 0 40px rgba(255,255,255,.035), 0 0 0 64px rgba(255,255,255,.02);
}

.meta-workspace-card-featured[b-48eifoiq90]::after {
    opacity: .85;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 100' preserveAspectRatio='none'%3E%3Cpath d='M0 48C75 88 131 16 223 45s139 48 257 2v53H0Z' fill='%23109b8d' fill-opacity='.55'/%3E%3Cpath d='M0 68c83 31 152-25 232-7s150 30 248-9' fill='none' stroke='%23a7f3e7' stroke-opacity='.42' stroke-width='1.5'/%3E%3C/svg%3E");
}

.meta-workspace-icon[b-48eifoiq90] {
    position: relative;
    z-index: 1;
    display: grid;
    width: 44px;
    height: 44px;
    margin-bottom: 1.05rem;
    place-items: center;
    border: 1px solid rgba(15, 118, 110, .09);
    border-radius: 15px;
    background: linear-gradient(145deg, #edfaf7, #d8f1ec);
    color: #087f78;
    font-size: 1.15rem;
    box-shadow: 0 6px 14px rgba(15, 118, 110, .08);
}

.meta-workspace-card-featured .meta-workspace-icon[b-48eifoiq90] {
    background: rgba(255,255,255,.16);
    color: white;
}

.meta-workspace-label[b-48eifoiq90] {
    display: block;
    margin-bottom: .4rem;
    color: #0f8f85;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.meta-workspace-card-featured .meta-workspace-label[b-48eifoiq90] { color: #a7f3e7; }

.meta-workspace-card h3[b-48eifoiq90] {
    margin: 0 0 .55rem;
    color: #163541;
    font-size: 1.18rem;
    font-weight: 720;
    letter-spacing: -.02em;
}

.meta-workspace-card-featured h3[b-48eifoiq90] { color: white; }

.meta-workspace-card p[b-48eifoiq90] {
    margin: 0;
    color: #667981;
    font-size: .9rem;
    line-height: 1.65;
}

.meta-workspace-card-featured p[b-48eifoiq90] { color: rgba(255,255,255,.82); }

.meta-workspace-card a[b-48eifoiq90] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1.1rem;
    color: #b4fff1;
    font-size: .86rem;
    font-weight: 700;
    text-decoration: none;
}

.meta-workspace-card a:hover[b-48eifoiq90] { color: white; }

.meta-workspace-bottom[b-48eifoiq90] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.1rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid #dce9e8;
    border-radius: 18px;
    background: white;
}

.meta-workspace-bottom-icon[b-48eifoiq90] {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    background: #e5f5f3;
    color: #087f78;
    font-size: 1.3rem;
}

.meta-workspace-bottom p[b-48eifoiq90] {
    flex: 1;
    margin: 0;
    color: #61747b;
    font-size: .91rem;
    line-height: 1.55;
}

.meta-workspace-bottom p strong[b-48eifoiq90] { color: #183944; }

.meta-workspace-cta[b-48eifoiq90] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1.05rem;
    border-radius: 999px;
    background: #0f766e;
    color: white;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.meta-workspace-cta:hover[b-48eifoiq90] { background: #0b5e58; transform: translateY(-1px); color: white; }

@media (max-width: 900px) {
    .meta-workspace-grid[b-48eifoiq90] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .meta-workspace-section[b-48eifoiq90] { padding: 3.75rem 1rem; }
    .meta-workspace-heading[b-48eifoiq90] { margin-bottom: 2rem; text-align: left; }
    .meta-workspace-grid[b-48eifoiq90] { grid-template-columns: 1fr; gap: .75rem; }
    .meta-workspace-card[b-48eifoiq90] { min-height: auto; padding: 1.35rem; }
    .meta-workspace-bottom[b-48eifoiq90] { align-items: flex-start; flex-wrap: wrap; }
    .meta-workspace-bottom p[b-48eifoiq90] { flex-basis: calc(100% - 60px); }
    .meta-workspace-cta[b-48eifoiq90] { margin-left: 58px; }
}

@media (prefers-reduced-motion: reduce) {
    .meta-workspace-card[b-48eifoiq90], .meta-workspace-card[b-48eifoiq90]::before, .meta-workspace-card[b-48eifoiq90]::after, .meta-workspace-cta[b-48eifoiq90] { transition: none; }
}

/* Final signup callout */
.final-cta.brand-bg[b-48eifoiq90] {
    position: relative;
    overflow: hidden;
    padding: 0;
    background:
        radial-gradient(ellipse at 82% 48%, rgba(72, 217, 183, 0.2), transparent 30rem),
        linear-gradient(118deg, #073d3b 0%, #087b70 56%, #0b8e78 100%);
}

.final-cta.brand-bg[b-48eifoiq90]::before,
.final-cta.brand-bg[b-48eifoiq90]::after {
    position: absolute;
    content: "";
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;
}

.final-cta.brand-bg[b-48eifoiq90]::before {
    width: 520px;
    height: 520px;
    top: -330px;
    left: -180px;
}

.final-cta.brand-bg[b-48eifoiq90]::after {
    width: 660px;
    height: 660px;
    right: -280px;
    bottom: -480px;
}

.final-cta-container[b-48eifoiq90] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.8fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    width: min(100%, 1320px);
    max-width: 1320px;
    padding: clamp(2.5rem, 4vw, 4rem) clamp(1.25rem, 3vw, 2.5rem);
    text-align: left;
}

.final-cta-eyebrow[b-48eifoiq90] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    color: #d6fff2;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.final-cta-eyebrow i[b-48eifoiq90] { font-size: 1rem; }

.final-cta-copy h2[b-48eifoiq90] {
    max-width: 700px;
    margin: 1.2rem 0 0.9rem;
    color: #fff;
    font-size: clamp(2.2rem, 4vw, 3.25rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1.08;
}

.final-cta-copy p[b-48eifoiq90] {
    max-width: 550px;
    margin: 0;
    color: rgba(240, 255, 250, 0.82);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.7;
}

.final-cta-actions[b-48eifoiq90] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.15rem 1.5rem;
    margin-top: 1.75rem;
}

.final-cta .cta-button[b-48eifoiq90] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-height: 52px;
    padding: 0.85rem 1.35rem;
    border: 1px solid #fff;
    background: #fff;
    color: #075e54;
    font-size: 0.92rem;
    box-shadow: 0 12px 28px rgba(0, 28, 25, 0.22);
}

.final-cta .cta-button:hover[b-48eifoiq90] {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0, 28, 25, 0.3);
}

.final-cta-secondary[b-48eifoiq90] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #e3fff7;
    font-size: 0.9rem;
    font-weight: 650;
    text-decoration: none;
}

.final-cta-secondary:hover[b-48eifoiq90] { color: #fff; text-decoration: underline; }

.final-cta-note[b-48eifoiq90] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    color: rgba(236, 255, 249, 0.75);
    font-size: 0.8rem;
}

.final-cta-note i[b-48eifoiq90] { color: #85ebc8; }

.final-cta-visual[b-48eifoiq90] {
    width: 100%;
    max-width: 420px;
    justify-self: end;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 24px;
    background: rgba(240, 255, 250, 0.12);
    box-shadow: 0 28px 65px rgba(0, 30, 26, 0.25), inset 0 1px rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
}

.final-cta-visual-head[b-48eifoiq90] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.25rem 1rem;
    color: #fff;
}

.final-cta-visual-icon[b-48eifoiq90] {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 14px;
    background: #c9f6e8;
    color: #087b68;
    font-size: 1.2rem;
}

.final-cta-visual-head > span:nth-child(2)[b-48eifoiq90] { display: grid; gap: 0.15rem; }
.final-cta-visual-head strong[b-48eifoiq90] { font-size: 0.92rem; }
.final-cta-visual-head small[b-48eifoiq90] { color: rgba(255, 255, 255, 0.68); font-size: 0.75rem; }
.final-cta-visual-head > i:last-child[b-48eifoiq90] { margin-left: auto; color: rgba(255, 255, 255, 0.7); }

.final-cta-message[b-48eifoiq90] {
    padding: 1rem;
    border: 1px solid rgba(10, 80, 68, 0.08);
    border-radius: 16px 16px 5px 16px;
    background: #f3fff9;
    color: #193c35;
    box-shadow: 0 8px 22px rgba(0, 37, 32, 0.1);
}

.final-cta-message > span[b-48eifoiq90] {
    color: #0d806c;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.final-cta-message p[b-48eifoiq90] {
    margin: 0.55rem 0 0.65rem;
    color: #193c35;
    font-size: 0.88rem;
    line-height: 1.55;
}

.final-cta-template-button[b-48eifoiq90] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.75rem -0.2rem 0;
    padding: 0.7rem 0.5rem 0.25rem;
    border-top: 1px solid rgba(19, 105, 86, 0.12);
    color: #087f6e;
    font-size: 0.8rem;
    font-weight: 700;
}

.final-cta-message small[b-48eifoiq90] {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
    color: #71847e;
    font-size: 0.68rem;
}

.final-cta-message small i[b-48eifoiq90] { color: #08a987; font-size: 0.85rem; }

.final-cta-visual-footer[b-48eifoiq90] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding-top: 0.95rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.73rem;
}

.final-cta-visual-footer > span[b-48eifoiq90] {
    width: 4px;
    height: 4px;
    margin: 0 0.25rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
}

@media (max-width: 800px) {
    .final-cta-container[b-48eifoiq90] {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 3.75rem 1.5rem;
    }

    .final-cta-copy[b-48eifoiq90] { text-align: center; }
    .final-cta-copy h2[b-48eifoiq90], .final-cta-copy p[b-48eifoiq90] { margin-right: auto; margin-left: auto; }
    .final-cta-actions[b-48eifoiq90], .final-cta-note[b-48eifoiq90] { justify-content: center; }
    .final-cta-visual[b-48eifoiq90] { justify-self: center; max-width: 460px; }
}

@media (max-width: 480px) {
    .final-cta-container[b-48eifoiq90] { gap: 2rem; padding: 3.25rem 1rem; }
    .final-cta-copy h2[b-48eifoiq90] { font-size: clamp(2rem, 10vw, 2.65rem); }
    .final-cta-actions[b-48eifoiq90] { flex-direction: column; gap: 1rem; }
    .final-cta .cta-button[b-48eifoiq90] { width: 100%; }
    .final-cta-visual[b-48eifoiq90] { padding: 0.75rem; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .final-cta .cta-button[b-48eifoiq90] { transition: none; }
}

/* Light decorative details carried through the homepage */
.hero-wrapper[b-48eifoiq90] {
    isolation: isolate;
}

.hero-wrapper[b-48eifoiq90]::before,
.hero-wrapper[b-48eifoiq90]::after {
    position: absolute;
    z-index: 0;
    content: "";
    pointer-events: none;
}

.hero-wrapper[b-48eifoiq90]::before {
    top: 0;
    right: 0;
    width: min(52vw, 760px);
    height: 100%;
    background: radial-gradient(ellipse at 70% 35%, rgba(94, 234, 212, 0.2), transparent 58%);
}

.hero-wrapper[b-48eifoiq90]::after {
    right: 4%;
    bottom: 10%;
    width: 140px;
    height: 110px;
    background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(190, 255, 239, 0.11) 10px 11px, transparent 11px 21px);
    mask-image: linear-gradient(90deg, transparent, #000 35%, #000 75%, transparent);
}

.hero-wrapper > .hero-nav[b-48eifoiq90],
.hero-wrapper > .hero-clip[b-48eifoiq90] {
    position: relative;
    z-index: 1;
}

.about-section[b-48eifoiq90],
.services[b-48eifoiq90],
.stats-cta-section[b-48eifoiq90],
.signal-section[b-48eifoiq90],
.adapter-section[b-48eifoiq90],
.steps-section[b-48eifoiq90],
.api-showcase-section[b-48eifoiq90],
.testimonial-section[b-48eifoiq90] {
    position: relative;
    isolation: isolate;
    overflow: clip;
}

.about-section[b-48eifoiq90]::before,
.services[b-48eifoiq90]::before,
.stats-cta-section[b-48eifoiq90]::before,
.signal-section[b-48eifoiq90]::before,
.adapter-section[b-48eifoiq90]::before,
.steps-section[b-48eifoiq90]::before,
.api-showcase-section[b-48eifoiq90]::before,
.testimonial-section[b-48eifoiq90]::before,
.about-section[b-48eifoiq90]::after,
.services[b-48eifoiq90]::after,
.stats-cta-section[b-48eifoiq90]::after,
.signal-section[b-48eifoiq90]::after,
.adapter-section[b-48eifoiq90]::after,
.steps-section[b-48eifoiq90]::after,
.api-showcase-section[b-48eifoiq90]::after,
.testimonial-section[b-48eifoiq90]::after {
    position: absolute;
    z-index: 0;
    content: "";
    pointer-events: none;
}

.about-container[b-48eifoiq90],
.services-grid[b-48eifoiq90],
.stats-cta-card[b-48eifoiq90],
.signal-container[b-48eifoiq90],
.meta-workspace-container[b-48eifoiq90],
.adapter-container[b-48eifoiq90],
.steps-container[b-48eifoiq90],
.api-showcase-container[b-48eifoiq90],
.final-cta-container[b-48eifoiq90],
.testimonial-container[b-48eifoiq90] {
    position: relative;
    z-index: 1;
}

.about-image-wrapper[b-48eifoiq90] {
    isolation: isolate;
}

.about-image-wrapper[b-48eifoiq90]::before {
    position: absolute;
    z-index: -1;
    inset: 1rem -1rem -1rem 1rem;
    border: 1px solid rgba(13, 148, 136, 0.3);
    border-radius: 28px 8px 28px 8px;
    content: "";
    box-shadow: 12px 12px 0 -6px rgba(13, 148, 136, 0.12), 22px 22px 0 -11px rgba(13, 148, 136, 0.09);
}

/* About: cropped corner brackets and a soft color wash. */
.about-section[b-48eifoiq90]::before {
    top: 12%; right: 2%; width: 92px; height: 92px;
    border-top: 3px solid rgba(13, 148, 136, 0.4);
    border-right: 3px solid rgba(13, 148, 136, 0.4);
    box-shadow: 10px -10px 0 -8px rgba(13, 148, 136, 0.28), -10px 10px 0 -8px rgba(13, 148, 136, 0.24);
}
.about-section[b-48eifoiq90]::after {
    bottom: 4%; left: -7rem; width: 280px; height: 180px;
    background: radial-gradient(ellipse, rgba(45, 212, 191, 0.13), transparent 70%);
}

/* Services: a fine technical grid behind the cards. */
.services[b-48eifoiq90]::before {
    inset: 0 0 auto auto; width: 230px; height: 190px;
    background-image: linear-gradient(rgba(13, 148, 136, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 148, 136, 0.07) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(135deg, #000, transparent 78%);
    opacity: 0.9;
}
.services[b-48eifoiq90]::after {
    right: 9%; bottom: 2rem; left: auto; width: 42px; height: 42px;
    border: 0;
    background: linear-gradient(45deg, transparent 43%, rgba(20, 184, 166, 0.36) 44% 56%, transparent 57%), linear-gradient(-45deg, transparent 43%, rgba(20, 184, 166, 0.36) 44% 56%, transparent 57%);
    transform: rotate(8deg);
}

/* API feature panel: angled color wash and a small highlight marker. */
.stats-cta-section[b-48eifoiq90]::before {
    top: 0; right: 0; width: 35%; height: 100%;
    background: linear-gradient(135deg, transparent 45%, rgba(45, 212, 191, 0.08));
    clip-path: polygon(48% 0, 100% 0, 100% 100%, 0 100%);
}
.stats-cta-section[b-48eifoiq90]::after {
    top: 1rem; right: max(4%, calc((100vw - 1600px) / 2)); bottom: auto; left: auto;
    width: 34px; height: 34px; border: 2px solid rgba(153, 246, 228, 0.45);
    transform: rotate(45deg);
    box-shadow: 9px 9px 0 -7px rgba(153, 246, 228, 0.55), -9px -9px 0 -7px rgba(153, 246, 228, 0.4);
}

/* Signal section: abstract waveform marks. */
.signal-section[b-48eifoiq90]::before {
    top: 15%; right: -2rem; width: 260px; height: 110px;
    background: repeating-linear-gradient(0deg, transparent 0 13px, rgba(14, 165, 154, 0.12) 13px 14px, transparent 14px 27px);
    clip-path: polygon(0 44%, 12% 44%, 19% 8%, 28% 85%, 37% 36%, 48% 36%, 57% 0, 67% 72%, 76% 44%, 100% 44%, 100% 57%, 79% 57%, 68% 88%, 57% 19%, 50% 50%, 39% 50%, 29% 100%, 19% 28%, 15% 57%, 0 57%);
}
.signal-section[b-48eifoiq90]::after {
    bottom: 2rem; left: 4%; width: 90px; height: 6px;
    background: linear-gradient(90deg, #0d9488 0 28%, transparent 28% 38%, #0d9488 38% 58%, transparent 58% 68%, #0d9488 68%);
    opacity: 0.55;
    box-shadow: 0 8px 0 -2px rgba(13, 148, 136, 0.18), 0 16px 0 -2px rgba(13, 148, 136, 0.12);
}

/* Adapter section: angled color bands. */
.adapter-section[b-48eifoiq90]::before {
    top: 0; right: 5%; width: 180px; height: 100%;
    background: linear-gradient(145deg, transparent 32%, rgba(13, 148, 136, 0.055) 32% 48%, transparent 48% 58%, rgba(13, 148, 136, 0.04) 58% 74%, transparent 74%);
}
.adapter-section[b-48eifoiq90]::after {
    bottom: 1.5rem; left: 4%; width: 50px; height: 50px;
    border-left: 3px solid rgba(13, 148, 136, 0.35); border-bottom: 3px solid rgba(13, 148, 136, 0.35);
    box-shadow: -9px -9px 0 -7px rgba(13, 148, 136, 0.25), 9px 9px 0 -7px rgba(13, 148, 136, 0.2);
    transform: skew(-18deg);
}

/* Steps: progress rail and a small square marker. */
.steps-section[b-48eifoiq90]::before {
    top: 3.2rem; right: 8%; width: 140px; height: 2px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 9px, transparent 9px 16px);
}
.steps-section[b-48eifoiq90]::after {
    right: 8%; bottom: 3rem; left: auto; width: 22px; height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.48); border-radius: 5px; transform: rotate(12deg);
    box-shadow: 9px 0 0 -6px rgba(255, 255, 255, 0.48), 18px 0 0 -6px rgba(255, 255, 255, 0.3);
}

/* API showcase: soft glow with code brackets. */
.api-showcase-section[b-48eifoiq90]::before {
    top: 1rem; right: 3%; width: 280px; height: 210px;
    background: radial-gradient(ellipse, rgba(20, 184, 166, 0.1), transparent 70%);
}
.api-showcase-section[b-48eifoiq90]::after {
    right: 6%; bottom: 1rem; left: auto; width: auto; height: auto;
    color: rgba(13, 148, 136, 0.15); content: "{ }";
    font: 700 5rem/1 Consolas, monospace; letter-spacing: 0.2em; opacity: 1;
    text-shadow: 8px 8px 0 rgba(13, 148, 136, 0.07), 16px 16px 0 rgba(13, 148, 136, 0.04);
}

/* Testimonials: an oversized quotation mark and short accent strokes. */
.testimonial-section[b-48eifoiq90]::before {
    top: -4.5rem; left: 4%; width: auto; height: auto; border: 0;
    color: rgba(13, 148, 136, 0.09); content: "“";
    font: 700 16rem/1 Georgia, serif; box-shadow: none;
}
.testimonial-section[b-48eifoiq90]::after {
    right: 4%; bottom: 2.5rem; left: auto; width: 88px; height: 32px;
    border-top: 2px solid rgba(13, 148, 136, 0.18); border-bottom: 2px solid rgba(13, 148, 136, 0.18);
    transform: skew(-30deg);
    box-shadow: 0 8px 0 -1px rgba(13, 148, 136, 0.08);
}

/* Small heading flourishes tie the section titles into the larger motifs. */
.services-header h2[b-48eifoiq90]::after,
.signal-head h2[b-48eifoiq90]::after,
.adapter-header h2[b-48eifoiq90]::after,
.steps-header h2[b-48eifoiq90]::after,
.api-showcase-header h2[b-48eifoiq90]::after,
.testimonial-header h2[b-48eifoiq90]::after,
.meta-workspace-heading h2[b-48eifoiq90]::after {
    display: block;
    width: 54px;
    height: 4px;
    margin: 0.8rem auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #0f9f8c, #79e1c3);
    content: "";
    box-shadow: 12px 0 0 -1px rgba(15, 159, 140, 0.18), 24px 0 0 -2px rgba(15, 159, 140, 0.1);
}

.signal-head h2[b-48eifoiq90]::after {
    margin-left: 0;
}

.testimonial-header h2[b-48eifoiq90]::after { margin-left: 0; }

.service-tag[b-48eifoiq90] {
    position: relative;
    padding-left: 0.75rem;
}

.service-tag[b-48eifoiq90]::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: currentColor;
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

.step-number[b-48eifoiq90]::after {
    position: absolute;
    top: 50%;
    right: calc(100% + 0.4rem);
    width: 22px;
    height: 1px;
    background: currentColor;
    content: "";
    opacity: 0.45;
}

/* Give the large CTA and workspace sections their own geometric language. */
.meta-workspace-section[b-48eifoiq90]::before {
    top: 0;
    right: 0;
    width: min(34vw, 360px);
    height: 100%;
    border-radius: 0;
    background-image: linear-gradient(rgba(15, 118, 110, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 118, 110, 0.055) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(135deg, transparent, #000 65%, transparent);
}

.final-cta.brand-bg[b-48eifoiq90]::before {
    top: 0;
    left: 0;
    width: 38%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 24px);
    background-size: 24px 24px;
    clip-path: polygon(0 0, 72% 0, 100% 100%, 0 100%);
    mask-image: linear-gradient(90deg, #000, transparent);
}

.final-cta.brand-bg[b-48eifoiq90]::after {
    right: 4%;
    bottom: 12%;
    width: 78px;
    height: 78px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, transparent 46%, rgba(210, 255, 241, 0.28) 47% 53%, transparent 54%), linear-gradient(0deg, transparent 46%, rgba(210, 255, 241, 0.28) 47% 53%, transparent 54%);
    transform: rotate(45deg);
}

@media (max-width: 600px) {
    .hero-wrapper[b-48eifoiq90]::after { right: 0.75rem; bottom: 1rem; width: 88px; height: 72px; }
    .about-section[b-48eifoiq90]::before { top: 3%; right: 4%; width: 52px; height: 52px; }
    .services[b-48eifoiq90]::before { width: 150px; height: 140px; }
    .stats-cta-section[b-48eifoiq90]::before { width: 50%; }
    .stats-cta-section[b-48eifoiq90]::after { right: 1rem; width: 22px; height: 22px; }
    .signal-section[b-48eifoiq90]::before { top: 8%; right: -5rem; width: 180px; }
    .adapter-section[b-48eifoiq90]::before { right: 0; width: 100px; }
    .steps-section[b-48eifoiq90]::before { top: 1.5rem; right: 1rem; width: 64px; }
    .steps-section[b-48eifoiq90]::after { right: 1rem; bottom: 1rem; }
    .api-showcase-section[b-48eifoiq90]::after { right: 1rem; bottom: 0.5rem; font-size: 3.2rem; }
    .testimonial-section[b-48eifoiq90]::before { top: -2rem; left: 0.5rem; font-size: 9rem; }
    .testimonial-section[b-48eifoiq90]::after { right: 1rem; bottom: 1rem; width: 50px; }
    .final-cta.brand-bg[b-48eifoiq90]::before { width: 60%; }
    .final-cta.brand-bg[b-48eifoiq90]::after { right: 0.75rem; bottom: 0.75rem; width: 42px; height: 42px; }
    .about-image-wrapper[b-48eifoiq90]::before { inset: 0.6rem -0.6rem -0.6rem 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .service-card[b-48eifoiq90], .service-card[b-48eifoiq90]::after, .service-icon-wrap[b-48eifoiq90] { transition: none; }
}

/* Keep paragraph alignment consistent across the homepage. */
p[b-48eifoiq90] { text-align: justify; }

/* Scale and reposition the decorative shapes at tablet and phone widths. */
@media (max-width: 768px) {
    .hero-wrapper[b-48eifoiq90]::before { right: -8%; width: 68vw; opacity: 0.8; }
    .hero-wrapper[b-48eifoiq90]::after { right: 1rem; bottom: 1.5rem; width: 92px; height: 72px; }

    .about-section[b-48eifoiq90]::before { top: 1rem; right: 1rem; width: 58px; height: 58px; }
    .about-section[b-48eifoiq90]::after { left: -9rem; width: 220px; height: 140px; }
    .about-image-wrapper[b-48eifoiq90]::before { inset: 0.65rem -0.65rem -0.65rem 0.65rem; }

    .services[b-48eifoiq90]::before { width: 170px; height: 150px; background-size: 18px 18px; }
    .services[b-48eifoiq90]::after { right: 1.25rem; bottom: 1.25rem; width: 32px; height: 32px; }

    .stats-cta-section[b-48eifoiq90]::before { width: 42%; }
    .stats-cta-section[b-48eifoiq90]::after { right: 1.25rem; width: 26px; height: 26px; }

    .signal-section[b-48eifoiq90]::before { top: 1rem; right: -4rem; width: 190px; height: 82px; }
    .signal-section[b-48eifoiq90]::after { bottom: 1rem; left: 1rem; width: 70px; }

    .adapter-section[b-48eifoiq90]::before { right: 0; width: 115px; }
    .adapter-section[b-48eifoiq90]::after { bottom: 1rem; left: 1rem; width: 36px; height: 36px; }

    .steps-section[b-48eifoiq90]::before { top: 1.5rem; right: 1rem; width: 72px; }
    .steps-section[b-48eifoiq90]::after { right: 1rem; bottom: 1rem; width: 16px; height: 16px; }

    .api-showcase-section[b-48eifoiq90]::before { top: 0.5rem; right: -2rem; width: 190px; height: 150px; }
    .api-showcase-section[b-48eifoiq90]::after { right: 1rem; bottom: 0.5rem; font-size: 3.25rem; }

    .testimonial-section[b-48eifoiq90]::before { top: -2rem; left: 0.5rem; font-size: 9rem; }
    .testimonial-section[b-48eifoiq90]::after { right: 1rem; bottom: 1rem; width: 54px; height: 22px; }

    .meta-workspace-section[b-48eifoiq90]::before { width: 30vw; background-size: 18px 18px; }
    .final-cta.brand-bg[b-48eifoiq90]::before { width: 54%; background-size: 18px 18px; }
    .final-cta.brand-bg[b-48eifoiq90]::after { right: 1rem; bottom: 1rem; width: 44px; height: 44px; }
}

@media (max-width: 420px) {
    .hero-wrapper[b-48eifoiq90]::before { right: -16%; width: 82vw; opacity: 0.6; }
    .hero-wrapper[b-48eifoiq90]::after { width: 66px; height: 56px; }
    .about-section[b-48eifoiq90]::before { width: 42px; height: 42px; }
    .about-section[b-48eifoiq90]::after { width: 150px; height: 110px; }
    .services[b-48eifoiq90]::before { width: 120px; height: 112px; background-size: 16px 16px; }
    .services[b-48eifoiq90]::after { width: 24px; height: 24px; border-width: 4px; }
    .stats-cta-section[b-48eifoiq90]::before { width: 34%; }
    .signal-section[b-48eifoiq90]::before { right: -5rem; width: 150px; height: 68px; }
    .adapter-section[b-48eifoiq90]::before { width: 76px; opacity: 0.75; }
    .steps-section[b-48eifoiq90]::before { width: 48px; }
    .steps-section[b-48eifoiq90]::after { width: 12px; height: 12px; }
    .api-showcase-section[b-48eifoiq90]::after { font-size: 2.5rem; }
    .testimonial-section[b-48eifoiq90]::before { font-size: 7rem; }
    .testimonial-section[b-48eifoiq90]::after { width: 40px; height: 18px; }
    .meta-workspace-section[b-48eifoiq90]::before { width: 26vw; background-size: 15px 15px; }
    .final-cta.brand-bg[b-48eifoiq90]::before { width: 70%; }
    .final-cta.brand-bg[b-48eifoiq90]::after { width: 34px; height: 34px; }
}
/* /Pages/Public/Pricing.razor.rz.scp.css */
.public-pricing[b-5t5ahj5awk] {
    min-height: 100vh;
    padding: 58px 24px 90px;
    color: var(--pricing-text);
    background: linear-gradient(180deg, var(--pricing-page-tint), var(--pricing-background) 36%, var(--pricing-surface) 72%);
    font-family: 'Quicksand', sans-serif;
}

.public-pricing button[b-5t5ahj5awk],
.public-pricing a[b-5t5ahj5awk] {
    font-family: 'Quicksand', sans-serif;
}

.pricing-hero[b-5t5ahj5awk] {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.pricing-eyebrow[b-5t5ahj5awk] {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}

.pricing-hero h1[b-5t5ahj5awk] {
    margin: 0;
    color: var(--pricing-text);
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.045em;
}

.pricing-hero h1 span[b-5t5ahj5awk] {
    color: var(--color-primary);
}

.pricing-hero > p[b-5t5ahj5awk] {
    max-width: 560px;
    margin: 15px auto 0;
    color: var(--pricing-text-muted);
    font-size: 15px;
    line-height: 1.65;
}

.billing-toggle[b-5t5ahj5awk] {
    display: inline-flex;
    gap: 4px;
    margin-top: 25px;
    padding: 5px;
    border: 1px solid var(--pricing-border);
    border-radius: 999px;
    background: var(--white-bg);
    box-shadow: var(--shadow-sm);
}

.billing-toggle button[b-5t5ahj5awk] {
    position: relative;
    padding: 10px 17px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--pricing-text-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.billing-toggle button.selected[b-5t5ahj5awk] {
    background: var(--color-primary);
    color: var(--white-bg);
}

.billing-toggle button span[b-5t5ahj5awk] {
    margin-left: 5px;
    color: var(--pricing-text);
    font-size: 10px;
}

.pricing-controls[b-5t5ahj5awk] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
}
.pricing-controls .billing-toggle[b-5t5ahj5awk] { margin-top: 0; }

.plan-type-toggle[b-5t5ahj5awk] {
    display: inline-flex;
    gap: 3px;
    padding: 4px;
    border: 1px solid var(--pricing-border);
    border-radius: 999px;
    background: var(--white-bg);
    box-shadow: var(--shadow-sm);
}

.plan-type-toggle button[b-5t5ahj5awk] {
    padding: 9px 15px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--pricing-text-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.plan-type-toggle button.selected[b-5t5ahj5awk] {
    background: var(--color-primary);
    color: var(--white-bg);
}

.pricing-message[b-5t5ahj5awk] {
    margin: 54px auto;
    color: var(--pricing-text-muted);
    text-align: center;
}

.pricing-message.error[b-5t5ahj5awk] {
    color: var(--pricing-error);
}

.plan-comparison[b-5t5ahj5awk] {
    width: min(1180px, 100%);
    margin: 96px auto 0;
}

.comparison-heading[b-5t5ahj5awk] {
    margin: 0 auto 36px;
    text-align: center;
}

.comparison-heading .pricing-eyebrow[b-5t5ahj5awk] { margin-bottom: 8px; }
.comparison-heading h2[b-5t5ahj5awk] {
    margin: 0;
    color: var(--pricing-text);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 800;
    letter-spacing: -.04em;
}
.comparison-heading p[b-5t5ahj5awk] {
    margin: 8px 0 0;
    color: var(--pricing-text-muted);
    font-size: 14px;
}

.comparison-scroll[b-5t5ahj5awk] {
    overflow: visible;
    border: 1px solid var(--pricing-border);
    border-radius: 16px;
    background: var(--white-bg);
    box-shadow: var(--pricing-shadow-card);
}

.comparison-table[b-5t5ahj5awk] {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--pricing-text);
    font-size: 13px;
    text-align: left;
}

.comparison-table.api-comparison-table .comparison-plan-heading[b-5t5ahj5awk],
.comparison-table.api-comparison-table .comparison-value[b-5t5ahj5awk] { width: 30%; }

.comparison-table th[b-5t5ahj5awk],
.comparison-table td[b-5t5ahj5awk] {
    padding: 13px 18px;
    border-bottom: 1px solid var(--pricing-border);
}

.comparison-table thead th[b-5t5ahj5awk] {
    height: 76px;
    background: var(--white-bg);
}

.comparison-feature-heading[b-5t5ahj5awk] { width: 40%; color: var(--pricing-text-muted); font-size: 12px; }
.comparison-plan-heading[b-5t5ahj5awk] { width: 15%; text-align: center !important; }
.comparison-plan-heading strong[b-5t5ahj5awk] { display: block; font-size: 14px; font-weight: 800; }
.comparison-plan-heading span[b-5t5ahj5awk] { display: block; margin-top: 4px; color: var(--pricing-text-muted); font-size: 11px; font-weight: 500; }
.comparison-plan-heading .comparison-price del[b-5t5ahj5awk] { margin-right: 4px; color: var(--pricing-text-soft); }
.comparison-plan-heading .comparison-price b[b-5t5ahj5awk] { color: var(--pricing-text); font-size: 12px; }
.comparison-plan-heading .comparison-discount-badge[b-5t5ahj5awk] { margin-top: 4px; }
.comparison-plan-heading.popular-column[b-5t5ahj5awk] { border-top: 3px solid var(--color-primary); }

.comparison-table .popular-column[b-5t5ahj5awk] { background: var(--pricing-page-tint); }
.comparison-value[b-5t5ahj5awk] { width: 15%; text-align: center !important; }
.comparison-group-row th[b-5t5ahj5awk] {
    padding-top: 17px;
    padding-bottom: 12px;
    background: var(--pricing-surface-soft);
    color: var(--pricing-text);
    font-size: 13px;
    font-weight: 800;
}
.comparison-group-row th .bi[b-5t5ahj5awk] { margin-right: 9px; color: var(--color-primary); }
.comparison-feature-name[b-5t5ahj5awk] { font-weight: 600; }
.comparison-feature-button[b-5t5ahj5awk] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}
.comparison-feature-button .bi[b-5t5ahj5awk] { color: var(--pricing-text-soft); font-size: 12px; }
.comparison-info-tip[b-5t5ahj5awk] {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    color: var(--pricing-text-soft);
}
.comparison-info-tooltip[b-5t5ahj5awk] {
    position: absolute;
    z-index: 5;
    top: calc(100% + 10px);
    left: -8px;
    width: 290px;
    padding: 13px 15px;
    border: 1px solid var(--pricing-border);
    border-radius: 13px;
    background: var(--white-bg);
    box-shadow: var(--pricing-shadow-card);
    color: var(--pricing-text-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.55;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    pointer-events: none;
}
.comparison-info-tooltip[b-5t5ahj5awk]::before {
    position: absolute;
    top: -6px;
    left: 12px;
    width: 10px;
    height: 10px;
    border-top: 1px solid var(--pricing-border);
    border-left: 1px solid var(--pricing-border);
    background: var(--white-bg);
    content: "";
    transform: rotate(45deg);
}
.comparison-feature-button:hover .comparison-info-tooltip[b-5t5ahj5awk],
.comparison-feature-button:focus-visible .comparison-info-tooltip[b-5t5ahj5awk] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.comparison-feature-button:hover[b-5t5ahj5awk],
.comparison-feature-button:focus-visible[b-5t5ahj5awk] { color: var(--color-primary); }
.comparison-check[b-5t5ahj5awk] { color: var(--pricing-success); font-size: 15px; }
.comparison-count[b-5t5ahj5awk] { color: var(--pricing-text); font-size: 11px; font-weight: 700; }
.comparison-unavailable[b-5t5ahj5awk] { color: var(--pricing-text-soft); }
.comparison-table tbody tr:last-child > *[b-5t5ahj5awk] { border-bottom: 0; }

.comparison-meta-note[b-5t5ahj5awk] {
    margin: 13px 0 0;
    color: var(--pricing-text-muted);
    font-size: 12px;
    text-align: center;
}
.comparison-meta-note a[b-5t5ahj5awk] { color: var(--color-primary); font-weight: 700; text-decoration: none; }
.comparison-meta-note a:hover[b-5t5ahj5awk] { text-decoration: underline; }

.pricing-transparency[b-5t5ahj5awk] {
    width: min(1040px, 100%);
    margin: 72px auto 0;
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid var(--pricing-border);
    border-radius: 24px;
    background: linear-gradient(145deg, var(--pricing-surface-soft), var(--white-bg) 72%);
    box-shadow: var(--pricing-shadow-card);
}

.transparency-heading[b-5t5ahj5awk] { max-width: 680px; margin: 0 auto 30px; text-align: center; }
.transparency-heading .pricing-eyebrow[b-5t5ahj5awk] { margin-bottom: 9px; }
.transparency-heading h2[b-5t5ahj5awk] {
    margin: 0;
    color: var(--pricing-text);
    font-size: clamp(24px, 3.5vw, 34px);
    font-weight: 800;
    letter-spacing: -.035em;
}
.transparency-heading > p[b-5t5ahj5awk] { margin: 10px 0 0; color: var(--pricing-text-muted); font-size: 14px; line-height: 1.65; }

.transparency-flow[b-5t5ahj5awk] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.transparency-step[b-5t5ahj5awk] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 132px;
    padding: 22px;
    border: 1px solid var(--pricing-border);
    border-radius: 18px;
    background: var(--white-bg);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.transparency-step:hover[b-5t5ahj5awk] {
    transform: translateY(-3px);
    border-color: var(--color-primary-light);
    box-shadow: var(--pricing-shadow-card);
}

.transparency-icon[b-5t5ahj5awk] {
    display: inline-flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--pricing-surface-highlight);
    color: var(--pricing-success);
    font-size: 20px;
}

.transparency-icon.meta-payment-icon[b-5t5ahj5awk] {
    border: 1px solid var(--pricing-border);
    background: var(--pricing-surface-soft);
    color: var(--color-primary);
}

.transparency-kicker[b-5t5ahj5awk] {
    display: block;
    margin-bottom: 6px;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
}
.transparency-step h3[b-5t5ahj5awk] {
    margin: 0 0 4px;
    color: var(--pricing-text);
    font-size: 16px;
    font-weight: 800;
}

.transparency-step p[b-5t5ahj5awk] {
    margin: 0;
    color: var(--pricing-text-muted);
    font-size: 13px;
    line-height: 1.55;
}

.transparency-connector[b-5t5ahj5awk] { display: grid; justify-items: center; gap: 8px; color: var(--color-primary); }
.transparency-connector span[b-5t5ahj5awk] {
    padding: 7px 10px;
    border: 1px solid var(--pricing-border);
    border-radius: 999px;
    background: var(--pricing-surface-highlight);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
}
.transparency-connector .bi[b-5t5ahj5awk] { font-size: 20px; }
.transparency-link[b-5t5ahj5awk] {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    margin: 22px auto 0;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.transparency-link:hover[b-5t5ahj5awk] { text-decoration: underline; }

.pricing-faq[b-5t5ahj5awk] {
    width: min(880px, 100%);
    margin: 92px auto 0;
}

.faq-heading[b-5t5ahj5awk] { margin-bottom: 28px; text-align: center; }
.faq-heading .pricing-eyebrow[b-5t5ahj5awk] { margin-bottom: 8px; }
.faq-heading h2[b-5t5ahj5awk] {
    margin: 0;
    color: var(--pricing-text);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 800;
    letter-spacing: -.04em;
}
.faq-heading p[b-5t5ahj5awk] { margin: 8px 0 0; color: var(--pricing-text-muted); font-size: 14px; }
.faq-list[b-5t5ahj5awk] { display: grid; gap: 10px; }
.faq-item[b-5t5ahj5awk] {
    overflow: visible;
    border: 1px solid var(--pricing-border);
    border-radius: 13px;
    background: var(--white-bg);
    box-shadow: var(--pricing-shadow-card);
}
.faq-question[b-5t5ahj5awk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding: 18px 20px;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--pricing-text);
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
}
.faq-question:focus-visible[b-5t5ahj5awk] { outline: 2px solid var(--color-primary); outline-offset: -3px; }
.faq-question .bi[b-5t5ahj5awk] {
    flex: 0 0 auto;
    color: var(--color-primary);
    font-size: 16px;
    transition: transform .18s ease;
}
.faq-item.expanded .faq-question .bi[b-5t5ahj5awk] { transform: rotate(45deg); }
.faq-answer[b-5t5ahj5awk] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}
.faq-answer p[b-5t5ahj5awk] {
    overflow: hidden;
    min-height: 0;
    margin: 0 20px;
    padding-right: 28px;
    color: var(--pricing-text-muted);
    font-size: 13px;
    line-height: 1.65;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity .2s ease, transform .25s ease, margin .25s ease;
}
.faq-answer.is-expanded[b-5t5ahj5awk] { grid-template-rows: 1fr; }
.faq-answer.is-expanded p[b-5t5ahj5awk] { margin: 0 20px 18px; opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .faq-answer[b-5t5ahj5awk], .faq-answer p[b-5t5ahj5awk], .faq-question .bi[b-5t5ahj5awk], .transparency-step[b-5t5ahj5awk] { transition: none; }
}

@media (max-width: 1000px) {
    .plan-comparison[b-5t5ahj5awk] { margin-top: 76px; }
    .comparison-scroll[b-5t5ahj5awk] { overflow-x: auto; overflow-y: visible; }
    .pricing-faq[b-5t5ahj5awk] { margin-top: 76px; }
}

@media (max-width: 560px) {
    .public-pricing[b-5t5ahj5awk] { padding: 42px 16px 60px; }
    .plan-comparison[b-5t5ahj5awk] { margin-top: 62px; }
    .pricing-transparency[b-5t5ahj5awk] { margin-top: 42px; padding: 22px 16px; border-radius: 18px; }
    .transparency-heading[b-5t5ahj5awk] { margin-bottom: 22px; }
    .transparency-flow[b-5t5ahj5awk] { grid-template-columns: 1fr; gap: 12px; }
    .transparency-step[b-5t5ahj5awk] { min-height: 0; padding: 17px; }
    .transparency-connector[b-5t5ahj5awk] { display: flex; justify-content: center; }
    .transparency-connector .bi[b-5t5ahj5awk] { transform: rotate(90deg); }
    .pricing-faq[b-5t5ahj5awk] { margin-top: 62px; }
    .faq-question[b-5t5ahj5awk] { padding: 16px; font-size: 13px; }
    .faq-answer p[b-5t5ahj5awk] { margin: 0 16px; padding-right: 0; }
    .faq-answer.is-expanded p[b-5t5ahj5awk] { margin: 0 16px 16px; }
    .comparison-table[b-5t5ahj5awk] { min-width: 690px; }
    .comparison-table th[b-5t5ahj5awk], .comparison-table td[b-5t5ahj5awk] { padding: 12px 13px; }
}

/* Clear, responsive visual markers for the pricing journey */
.public-pricing[b-5t5ahj5awk] {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
}

.pricing-hero[b-5t5ahj5awk],
.plan-comparison[b-5t5ahj5awk],
.pricing-transparency[b-5t5ahj5awk],
.pricing-faq[b-5t5ahj5awk] {
    position: relative;
    z-index: 1;
}

.pricing-hero[b-5t5ahj5awk]::before,
.pricing-hero[b-5t5ahj5awk]::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.pricing-hero[b-5t5ahj5awk]::before {
    top: -3.5rem;
    right: -6rem;
    width: 210px;
    height: 180px;
    background: repeating-linear-gradient(135deg, transparent 0 12px, color-mix(in srgb, var(--color-primary) 10%, transparent) 12px 13px, transparent 13px 25px);
    clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%);
}

.pricing-hero[b-5t5ahj5awk]::after {
    bottom: 0;
    left: -1.5rem;
    width: 44px;
    height: 44px;
    background: linear-gradient(90deg, transparent 45%, color-mix(in srgb, var(--color-primary) 32%, transparent) 46% 54%, transparent 55%), linear-gradient(0deg, transparent 45%, color-mix(in srgb, var(--color-primary) 32%, transparent) 46% 54%, transparent 55%);
    transform: rotate(45deg);
}

.pricing-hero h1[b-5t5ahj5awk]::after,
.comparison-heading h2[b-5t5ahj5awk]::after,
.transparency-heading h2[b-5t5ahj5awk]::after,
.faq-heading h2[b-5t5ahj5awk]::after {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    margin: 14px auto 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    box-shadow: 11px 8px 0 -1px color-mix(in srgb, var(--color-primary) 24%, transparent), 22px 16px 0 -2px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.pricing-transparency[b-5t5ahj5awk] {
    overflow: hidden;
}

.pricing-transparency[b-5t5ahj5awk]::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 66px;
    height: 66px;
    border-top: 2px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    border-right: 2px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    pointer-events: none;
}

.transparency-step[b-5t5ahj5awk] { position: relative; }
.transparency-step[b-5t5ahj5awk]::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 18px;
    height: 3px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--color-primary) 22%, transparent);
    box-shadow: -8px -6px 0 -1px color-mix(in srgb, var(--color-primary) 17%, transparent);
}

.plan-comparison[b-5t5ahj5awk]::before {
    content: "";
    position: absolute;
    top: -1.4rem;
    left: 0;
    width: 88px;
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--color-primary) 0 10px, transparent 10px 16px);
    opacity: .42;
}

@media (max-width: 760px) {
    .pricing-hero[b-5t5ahj5awk]::before { top: -2rem; right: -4rem; width: 150px; height: 130px; }
    .pricing-hero[b-5t5ahj5awk]::after { left: 0; width: 30px; height: 30px; }
    .pricing-transparency[b-5t5ahj5awk]::after { width: 40px; height: 40px; }
    .transparency-step[b-5t5ahj5awk]::after { right: 8px; bottom: 8px; width: 12px; }
    .plan-comparison[b-5t5ahj5awk]::before { top: -1rem; width: 60px; }
}

@media (max-width: 420px) {
    .pricing-hero[b-5t5ahj5awk]::before { width: 110px; height: 100px; }
    .pricing-hero[b-5t5ahj5awk]::after { width: 22px; height: 22px; }
    .pricing-hero h1[b-5t5ahj5awk]::after,
    .comparison-heading h2[b-5t5ahj5awk]::after,
    .transparency-heading h2[b-5t5ahj5awk]::after,
    .faq-heading h2[b-5t5ahj5awk]::after { margin-top: 10px; }
}
/* /Pages/Public/PrivacyPolicy.razor.rz.scp.css */
.privacy-hero[b-jei61j2vw1] {
    background: linear-gradient(180deg, #f8fffe 0%, #ffffff 100%);
    padding: 40px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.privacy-hero-content[b-jei61j2vw1] {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.privacy-hero h1[b-jei61j2vw1] {
    margin: 0 0 15px;
    font-size: 3rem;
    font-weight: 800;
    color: #111827;
    line-height: 1.1;
}

.breadcrumb[b-jei61j2vw1] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    flex-wrap: wrap;
}

.breadcrumb a[b-jei61j2vw1] {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.breadcrumb a:hover[b-jei61j2vw1] {
    text-decoration: underline;
}

.breadcrumb span[b-jei61j2vw1] {
    color: #9ca3af;
}

.breadcrumb .current[b-jei61j2vw1] {
    color: #6b7280;
    font-weight: 600;
}

.privacy-content[b-jei61j2vw1] {
    background: #ffffff;
    padding: 70px 20px;
}

.privacy-container[b-jei61j2vw1] {
    max-width: 1100px;
    margin: 0 auto;
}

.privacy-section[b-jei61j2vw1] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 32px;
    margin-bottom: 28px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    transition: all 0.25s ease;
}

.privacy-section:hover[b-jei61j2vw1] {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.privacy-section h2[b-jei61j2vw1] {
    margin: 0 0 20px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    line-height: 1.3;
}

.privacy-section p[b-jei61j2vw1] {
    margin: 0 0 16px;
    color: #4b5563;
    line-height: 1.9;
    font-size: 1rem;
}

.privacy-section strong[b-jei61j2vw1] {
    color: #111827;
    font-weight: 700;
}

.privacy-section a[b-jei61j2vw1] {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.privacy-section a:hover[b-jei61j2vw1] {
    text-decoration: underline;
}

.privacy-section ul[b-jei61j2vw1] {
    margin: 20px 0 0;
    padding-left: 0;
    list-style: none;
}

.privacy-section ul li[b-jei61j2vw1] {
    position: relative;
    padding: 14px 0 14px 32px;
    color: #4b5563;
    line-height: 1.8;
    border-bottom: 1px solid #f1f5f9;
}

.privacy-section ul li:last-child[b-jei61j2vw1] {
    border-bottom: none;
}

.privacy-section ul li[b-jei61j2vw1]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary);
}

.privacy-section br[b-jei61j2vw1] {
    display: block;
    margin-bottom: 8px;
}

@media (max-width: 992px) {
    .privacy-hero h1[b-jei61j2vw1] {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .privacy-hero[b-jei61j2vw1] {
        padding: 70px 16px;
    }

    .privacy-content[b-jei61j2vw1] {
        padding: 50px 16px;
    }

    .privacy-hero h1[b-jei61j2vw1] {
        font-size: 2rem;
    }

    .privacy-section[b-jei61j2vw1] {
        padding: 24px;
    }

    .privacy-section h2[b-jei61j2vw1] {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .privacy-hero h1[b-jei61j2vw1] {
        font-size: 1.8rem;
    }

    .privacy-section[b-jei61j2vw1] {
        padding: 20px;
        border-radius: 14px;
    }

    .privacy-section p[b-jei61j2vw1],
    .privacy-section li[b-jei61j2vw1] {
        font-size: 0.95rem;
    }

    .breadcrumb[b-jei61j2vw1] {
        font-size: 0.85rem;
    }
}
/* /Pages/Public/Solutions/AutomateSupport.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   Automate Support — Solutions Page
   Uses global :root variables from app.css (brand-dark, brand-teal,
   brand-accent, hero-bg, gradient-primary, radius-*, shadow-*)
   ═══════════════════════════════════════════════════════════════════ */

*[b-0kk8rra4s8] {
    box-sizing: border-box;
}

/* ── HERO ─────────────────────────────────────────────────────────── */

.hero-wrapper[b-0kk8rra4s8] {
    position: relative;
    background: linear-gradient(135deg, #071b2c 0%, #0d2f42 32%, #0b5c5a 100%);
    padding: 60px 5% 40px;
    color: var(--text-white);
    overflow: hidden;
}

.hero-wrapper[b-0kk8rra4s8]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.22), transparent 30%),
        radial-gradient(circle at bottom left, rgba(96, 165, 250, 0.18), transparent 34%);
    pointer-events: none;
}

.hero-body[b-0kk8rra4s8] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 60px 0 40px;
    flex-wrap: wrap;
}

.hero-text[b-0kk8rra4s8] {
    flex: 1 1 480px;
    max-width: 600px;
}

.hero-actions[b-0kk8rra4s8] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 24px;
}

.hero-text .about-tag[b-0kk8rra4s8] {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    color: var(--brand-accent);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.hero-text h1[b-0kk8rra4s8] {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 20px;
    color: var(--text-white);
    letter-spacing: -0.05em;
}

.hero-text p[b-0kk8rra4s8] {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 540px;
}

.btn-get-started[b-0kk8rra4s8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #facc15 0%, #fbbf24 100%);
    color: #111827;
    font-weight: 800;
    padding: 16px 28px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 18px 36px rgba(251, 191, 36, 0.22);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.btn-get-started:hover[b-0kk8rra4s8] {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(251, 191, 36, 0.28);
    filter: brightness(1.02);
}

.contact-call[b-0kk8rra4s8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
    color: var(--text-white);
    backdrop-filter: blur(8px);
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.contact-call:hover[b-0kk8rra4s8] {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.34);
}

.hero-image-area[b-0kk8rra4s8] {
    flex: 1 1 400px;
    max-width: 520px;
}

.hero-image-container[b-0kk8rra4s8] {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 28px 60px rgba(2, 6, 23, 0.28);
}

.hero-image-container img[b-0kk8rra4s8] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.hero-bottom[b-0kk8rra4s8] {
    position: relative;
    z-index: 1;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-bottom img[b-0kk8rra4s8] {
    height: 28px;
    width: auto;
    opacity: 0.9;
}

.hero-bottom p[b-0kk8rra4s8] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    margin: 0;
}

/* ── ABOUT / PROBLEM ─────────────────────────────────────────────── */

.about-section[b-0kk8rra4s8] {
    background: linear-gradient(180deg, #f7fbff 0%, #f2f8ff 100%);
    padding: 90px 5%;
}

.about-container[b-0kk8rra4s8] {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

.about-image-wrapper[b-0kk8rra4s8] {
    flex: 1 1 420px;
    max-width: 500px;
    position: relative;
    padding: 18px;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(236,253,245,0.9));
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.06);
}

.about-main-img[b-0kk8rra4s8] {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 22px;
}

.about-content[b-0kk8rra4s8] {
    flex: 1 1 420px;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 28px;
    padding: clamp(24px, 3vw, 36px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
}

.about-tag[b-0kk8rra4s8] {
    display: inline-block;
    background: rgba(20, 184, 166, 0.1);
    color: var(--brand-teal);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.about-content h2[b-0kk8rra4s8] {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--brand-dark);
    line-height: 1.25;
    margin: 0 0 20px;
}

.about-highlight[b-0kk8rra4s8] {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--brand-dark);
    margin: 0 0 20px;
}

.about-list[b-0kk8rra4s8] {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.about-list li[b-0kk8rra4s8] {
    position: relative;
    padding-left: 34px;
    font-size: 0.98rem;
    line-height: 1.6;
    color: #374151;
    background: rgba(20, 184, 166, 0.03);
    border: 1px solid rgba(20, 184, 166, 0.08);
    border-radius: 14px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 12px;
}

.about-list li[b-0kk8rra4s8]::before {
    content: "✓";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0ea5a4, #34d399);
    color: #fff;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
}

.about-list li strong[b-0kk8rra4s8] {
    color: var(--brand-dark);
}

/* ── SERVICES / HOW IT WORKS ─────────────────────────────────────── */

.services[b-0kk8rra4s8] {
    background: linear-gradient(180deg, #f3f8ff 0%, #f7fbff 100%);
    padding: 90px 5%;
}

.services-header[b-0kk8rra4s8] {
    max-width: 1200px;
    margin: 0 auto 48px;
    text-align: center;
}

.eyebrow[b-0kk8rra4s8] {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-teal);
}

.eyebrow strong i[b-0kk8rra4s8] {
    color: var(--brand-dark);
    font-style: normal;
}

.services-grid[b-0kk8rra4s8] {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.industries-grid[b-0kk8rra4s8] {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.service-card[b-0kk8rra4s8] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
    border-radius: 24px;
    padding: 36px 28px;
    position: relative;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.service-card:hover[b-0kk8rra4s8] {
    transform: translateY(-6px);
    box-shadow: 0 24px 44px rgba(15, 23, 42, 0.08);
    border-color: rgba(20, 184, 166, 0.22);
}

.service-card .icon[b-0kk8rra4s8] {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 2rem;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #dffaf5 0%, #c7f0e5 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.service-card h3[b-0kk8rra4s8] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brand-dark);
    margin: 0 0 12px;
}

.service-card p[b-0kk8rra4s8] {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #4b5563;
    margin: 0;
}

.service-card p strong i[b-0kk8rra4s8] {
    color: var(--brand-teal);
    font-style: normal;
    font-weight: 700;
}

.card-index[b-0kk8rra4s8] {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 2.2rem;
    font-weight: 800;
    color: rgba(20, 184, 166, 0.12);
}

.industry-example[b-0kk8rra4s8] {
    margin-top: 12px;
    padding: 10px 14px;
    border-left: 3px solid #34d399;
    background: rgba(20, 184, 166, 0.06);
    border-radius: 0 10px 10px 0;
    font-size: 0.85rem;
    font-style: italic;
    color: #374151;
}

/* ── STATS / TRUST (META AUTHORIZED) ─────────────────────────────── */

.stats-cta-section[b-0kk8rra4s8] {
    padding: 60px 5% 90px;
    background: linear-gradient(180deg, #f3f8ff 0%, #edf7ff 100%);
}

.stats-cta-card[b-0kk8rra4s8] {
    max-width: 1400px;
    margin: 0 auto;
    background: linear-gradient(135deg, #0a1f31 0%, #0d3b55 40%, #0d5e5c 100%);
    border-radius: 30px;
    padding: 2rem 1.5rem;
    color: var(--text-white);
    box-shadow: 0 26px 50px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(255,255,255,0.08);
}

.steps-tag[b-0kk8rra4s8] {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-accent);
    margin-bottom: 20px;
}

.stats-header[b-0kk8rra4s8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.stats-header h2[b-0kk8rra4s8] {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 800;
    margin: 0 0 12px;
    max-width: 560px;
    color: var(--text-white);
}

.stats-header p[b-0kk8rra4s8] {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.65;
    max-width: 520px;
    margin: 0;
}

.stats-header img[b-0kk8rra4s8] {
    height: 65px;
    margin-right: 50px;
    width: auto;
    opacity: 0.9;
    flex-shrink: 0;
}

.stats-divider[b-0kk8rra4s8] {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 32px 0;
}

.stats-grid[b-0kk8rra4s8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.stat-item[b-0kk8rra4s8] {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-value[b-0kk8rra4s8] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--brand-accent);
}

.stat-label[b-0kk8rra4s8] {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.stat-separator[b-0kk8rra4s8] {
    color: rgba(255, 255, 255, 0.25);
    font-size: 1.2rem;
    align-self: center;
}

/* ── STEPS / FEATURE DEEP-DIVE ────────────────────────────────────── */

.steps-section[b-0kk8rra4s8] {
    background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
    padding: 90px 5%;
}

.steps-container[b-0kk8rra4s8] {
    max-width: 1200px;
    margin: 0 auto;
}

.steps-header[b-0kk8rra4s8] {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}

.steps-header h2[b-0kk8rra4s8] {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 800;
    color: var(--brand-dark);
    margin: 16px 0 12px;
}

.steps-header p[b-0kk8rra4s8] {
    color: #6b7280;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.steps-header .steps-tag[b-0kk8rra4s8] {
    color: var(--brand-teal);
}

.steps-grid[b-0kk8rra4s8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.step-card[b-0kk8rra4s8] {
    position: relative;
    background: linear-gradient(180deg, rgba(248, 250, 252, 1), rgba(255,255,255,1));
    border-radius: 22px;
    padding: 32px 24px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.step-card:hover[b-0kk8rra4s8] {
    transform: translateY(-6px);
    box-shadow: 0 24px 42px rgba(15, 23, 42, 0.08);
    border-color: rgba(20, 184, 166, 0.22);
}

.step-number[b-0kk8rra4s8] {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 0.85rem;
    font-weight: 800;
    color: rgba(20, 184, 166, 0.45);
}

.step-icon[b-0kk8rra4s8] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 1.8rem;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #dffaf5 0%, #c7f0e5 100%);
}

.step-card h3[b-0kk8rra4s8] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-dark);
    margin: 0 0 10px;
}

.step-card p[b-0kk8rra4s8] {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

/* ── FINAL CTA ────────────────────────────────────────────────────── */

.final-cta.brand-bg[b-0kk8rra4s8] {
    background: linear-gradient(135deg, #071b2c 0%, #0d2f42 30%, #0d9488 100%);
    padding: 90px 5%;
    text-align: center;
}

.final-cta-container[b-0kk8rra4s8] {
    max-width: 700px;
    margin: 0 auto;
}

.final-cta-container h2[b-0kk8rra4s8] {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 800;
    color: var(--text-white);
    margin: 0 0 18px;
}

.final-cta-container p[b-0kk8rra4s8] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 32px;
}

.cta-button[b-0kk8rra4s8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #facc15 0%, #fbbf24 100%);
    color: #1a1a1a;
    font-weight: 800;
    padding: 18px 40px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 18px 36px rgba(251, 191, 36, 0.22);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.cta-button:hover[b-0kk8rra4s8] {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(251, 191, 36, 0.28);
    filter: brightness(1.02);
}

/* ── RESPONSIVE ───────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .services-grid[b-0kk8rra4s8] {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid[b-0kk8rra4s8] {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid[b-0kk8rra4s8] {
        flex-direction: column;
        align-items: stretch;
    }

    .stat-separator[b-0kk8rra4s8] {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero-body[b-0kk8rra4s8] {
        flex-direction: column;
        text-align: center;
        padding: 40px 0 24px;
    }

    .hero-text p[b-0kk8rra4s8] {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions[b-0kk8rra4s8] {
        justify-content: center;
    }

    .hero-bottom[b-0kk8rra4s8] {
        flex-direction: column;
        text-align: center;
    }

    .about-container[b-0kk8rra4s8] {
        flex-direction: column;
    }

    .about-content[b-0kk8rra4s8] {
        width: 100%;
    }

    .services-grid[b-0kk8rra4s8],
    .steps-grid[b-0kk8rra4s8] {
        grid-template-columns: 1fr;
    }

    .stats-header[b-0kk8rra4s8] {
        flex-direction: column;
    }

    .stats-cta-card[b-0kk8rra4s8] {
        padding: 32px 24px;
    }

    .final-cta.brand-bg[b-0kk8rra4s8] {
        padding: 60px 5%;
    }
}

@media (max-width: 480px) {
    .hero-wrapper[b-0kk8rra4s8] {
        padding: 40px 5% 24px;
    }

    .about-section[b-0kk8rra4s8],
    .services[b-0kk8rra4s8],
    .steps-section[b-0kk8rra4s8] {
        padding: 60px 5%;
    }

    .hero-actions[b-0kk8rra4s8] {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-button[b-0kk8rra4s8],
    .btn-get-started[b-0kk8rra4s8],
    .contact-call[b-0kk8rra4s8] {
        width: 100%;
        text-align: center;
    }
}
+

/* Page-specific decorative geometry, kept behind the content. */
.about-section[b-0kk8rra4s8],
.services[b-0kk8rra4s8],
.stats-cta-section[b-0kk8rra4s8],
.steps-section[b-0kk8rra4s8],
.final-cta.brand-bg[b-0kk8rra4s8] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.about-container[b-0kk8rra4s8], .services-header[b-0kk8rra4s8], .services-grid[b-0kk8rra4s8], .stats-cta-card[b-0kk8rra4s8], .steps-container[b-0kk8rra4s8], .final-cta-container[b-0kk8rra4s8] {
    position: relative;
    z-index: 1;
}

.about-section[b-0kk8rra4s8]::before, .about-section[b-0kk8rra4s8]::after,
.services[b-0kk8rra4s8]::before, .services[b-0kk8rra4s8]::after,
.stats-cta-section[b-0kk8rra4s8]::before, .stats-cta-section[b-0kk8rra4s8]::after,
.steps-section[b-0kk8rra4s8]::before, .steps-section[b-0kk8rra4s8]::after,
.final-cta.brand-bg[b-0kk8rra4s8]::before, .final-cta.brand-bg[b-0kk8rra4s8]::after {
    position: absolute;
    z-index: 0;
    content: "";
    pointer-events: none;
}

.about-section[b-0kk8rra4s8]::before {
    top: 12%; right: 2%; width: 86px; height: 86px;
    border-top: 2px solid rgba(20, 184, 166, .35);
    border-right: 2px solid rgba(20, 184, 166, .35);
    box-shadow: 10px -10px 0 -8px rgba(20, 184, 166, .24), -10px 10px 0 -8px rgba(96, 165, 250, .2);
}
.about-section[b-0kk8rra4s8]::after {
    bottom: 8%; left: -5rem; width: 240px; height: 150px;
    background: radial-gradient(ellipse, rgba(20, 184, 166, .12), transparent 70%);
}

.services[b-0kk8rra4s8]::before {
    top: 0; right: 0; width: 190px; height: 150px;
    background-image: linear-gradient(rgba(20, 184, 166, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 184, 166, .08) 1px, transparent 1px);
    background-size: 20px 20px;
    mask-image: linear-gradient(135deg, #000, transparent 78%);
}
.services[b-0kk8rra4s8]::after {
    right: 8%; bottom: 1.5rem; width: 34px; height: 34px;
    background: linear-gradient(45deg, transparent 43%, rgba(20, 184, 166, .38) 44% 56%, transparent 57%), linear-gradient(-45deg, transparent 43%, rgba(20, 184, 166, .38) 44% 56%, transparent 57%);
}

.stats-cta-section[b-0kk8rra4s8]::before {
    top: 0; right: 0; width: 34%; height: 100%;
    background: repeating-linear-gradient(135deg, transparent 0 16px, rgba(45, 212, 191, .08) 16px 17px, transparent 17px 34px);
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
}
.stats-cta-section[b-0kk8rra4s8]::after {
    top: 1.25rem; right: 5%; width: 24px; height: 24px;
    border: 2px solid rgba(153, 246, 228, .55);
    transform: rotate(45deg);
}

.steps-section[b-0kk8rra4s8]::before {
    top: 2rem; right: 6%; width: 116px; height: 2px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 8px, transparent 8px 15px);
}
.steps-section[b-0kk8rra4s8]::after {
    right: 7%; bottom: 2rem; width: 18px; height: 18px;
    border: 2px solid rgba(255, 255, 255, .42); border-radius: 4px;
    box-shadow: 9px 0 0 -6px rgba(255, 255, 255, .5), 18px 0 0 -6px rgba(255, 255, 255, .3);
    transform: rotate(12deg);
}

.final-cta.brand-bg[b-0kk8rra4s8]::before {
    top: 0; left: 0; width: 36%; height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 22px);
    background-size: 22px 22px;
    clip-path: polygon(0 0, 75% 0, 100% 100%, 0 100%);
    mask-image: linear-gradient(90deg, #000, transparent);
}
.final-cta.brand-bg[b-0kk8rra4s8]::after {
    right: 5%; bottom: 12%; width: 48px; height: 48px;
    background: linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, .34) 47% 53%, transparent 54%), linear-gradient(0deg, transparent 46%, rgba(255, 255, 255, .34) 47% 53%, transparent 54%);
    transform: rotate(45deg);
}

@media (max-width: 700px) {
    .about-section[b-0kk8rra4s8]::before { top: 1rem; right: 1rem; width: 48px; height: 48px; }
    .about-section[b-0kk8rra4s8]::after { left: -7rem; width: 180px; height: 110px; }
    .services[b-0kk8rra4s8]::before { width: 130px; height: 110px; background-size: 16px 16px; }
    .services[b-0kk8rra4s8]::after { right: 1rem; bottom: 1rem; width: 24px; height: 24px; }
    .stats-cta-section[b-0kk8rra4s8]::before { width: 48%; }
    .stats-cta-section[b-0kk8rra4s8]::after { top: .75rem; right: 1rem; width: 18px; height: 18px; }
    .steps-section[b-0kk8rra4s8]::before { top: 1rem; right: 1rem; width: 55px; }
    .steps-section[b-0kk8rra4s8]::after { right: 1rem; bottom: 1rem; width: 13px; height: 13px; }
    .final-cta.brand-bg[b-0kk8rra4s8]::before { width: 60%; background-size: 16px 16px; }
    .final-cta.brand-bg[b-0kk8rra4s8]::after { right: 1rem; bottom: 1rem; width: 34px; height: 34px; }
}

@media (max-width: 420px) {
    .about-section[b-0kk8rra4s8]::before { width: 36px; height: 36px; }
    .services[b-0kk8rra4s8]::before { width: 96px; height: 92px; }
    .stats-cta-section[b-0kk8rra4s8]::before { width: 35%; }
    .steps-section[b-0kk8rra4s8]::before { width: 42px; }
    .final-cta.brand-bg[b-0kk8rra4s8]::before { width: 74%; }
    .final-cta.brand-bg[b-0kk8rra4s8]::after { width: 26px; height: 26px; }
}
/* /Pages/Public/Solutions/CaptureQualifyLeads.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   Capture & Qualify Leads — Solutions Page
   Uses global :root variables from app.css
   ═══════════════════════════════════════════════════════════════════ */

*[b-ncbva0dqp7] {
    box-sizing: border-box;
}

/* ── HERO ─────────────────────────────────────────────────────────── */

.hero-wrapper[b-ncbva0dqp7] {
    position: relative;
    background: linear-gradient(135deg, #071b2c 0%, #0d2f42 32%, #0b5c5a 100%);
    padding: 60px 5% 40px;
    color: var(--text-white);
    overflow: hidden;
}

.hero-wrapper[b-ncbva0dqp7]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.22), transparent 30%),
        radial-gradient(circle at bottom left, rgba(96, 165, 250, 0.18), transparent 34%);
    pointer-events: none;
}

.hero-body[b-ncbva0dqp7] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 60px 0 40px;
    flex-wrap: wrap;
}

.hero-text[b-ncbva0dqp7] {
    flex: 1 1 480px;
    max-width: 600px;
}

.hero-actions[b-ncbva0dqp7] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 24px;
}

.hero-text .about-tag[b-ncbva0dqp7] {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    color: var(--brand-accent);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.hero-text h1[b-ncbva0dqp7] {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 20px;
    color: var(--text-white);
    letter-spacing: -0.05em;
}

.hero-text p[b-ncbva0dqp7] {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 540px;
}

.btn-get-started[b-ncbva0dqp7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #facc15 0%, #fbbf24 100%);
    color: #111827;
    font-weight: 800;
    padding: 16px 28px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 18px 36px rgba(251, 191, 36, 0.22);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.btn-get-started:hover[b-ncbva0dqp7] {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(251, 191, 36, 0.28);
    filter: brightness(1.02);
}

.contact-call[b-ncbva0dqp7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
    color: var(--text-white);
    backdrop-filter: blur(8px);
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.contact-call:hover[b-ncbva0dqp7] {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.34);
}

.hero-image-area[b-ncbva0dqp7] {
    flex: 1 1 400px;
    max-width: 520px;
}

.hero-image-container[b-ncbva0dqp7] {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 28px 60px rgba(2, 6, 23, 0.28);
}

.hero-image-container img[b-ncbva0dqp7] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.hero-bottom[b-ncbva0dqp7] {
    position: relative;
    z-index: 1;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-bottom img[b-ncbva0dqp7] {
    height: 28px;
    width: auto;
    opacity: 0.9;
}

.hero-bottom p[b-ncbva0dqp7] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    margin: 0;
}

/* ── ABOUT / PROBLEM ─────────────────────────────────────────────── */

.about-section[b-ncbva0dqp7] {
    background: var(--white-bg);
    padding: 90px 5%;
}

.about-container[b-ncbva0dqp7] {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

.about-image-wrapper[b-ncbva0dqp7] {
    flex: 1 1 420px;
    max-width: 500px;
    position: relative;
}

.about-main-img[b-ncbva0dqp7] {
    width: 100%;
    height: auto;
    /* border-radius: var(--radius-lg); */
    /* box-shadow: var(--shadow-md); */
    display: block;
}

.about-content[b-ncbva0dqp7] {
    flex: 1 1 420px;
    max-width: 100%;
}

.about-tag[b-ncbva0dqp7] {
    display: inline-block;
    background: rgba(20, 184, 166, 0.1);
    color: var(--brand-teal);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.about-content h2[b-ncbva0dqp7] {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--brand-dark);
    line-height: 1.25;
    margin: 0 0 20px;
}

.about-highlight[b-ncbva0dqp7] {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--brand-dark);
    margin: 0 0 20px;
}

.about-list[b-ncbva0dqp7] {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.about-list li[b-ncbva0dqp7] {
    position: relative;
    padding-left: 28px;
    font-size: 0.98rem;
    line-height: 1.6;
    color: #374151;
}

.about-list li[b-ncbva0dqp7]::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    color: #fff;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
}

.about-list li strong[b-ncbva0dqp7] {
    color: var(--brand-dark);
}

/* ── SERVICES / HOW IT WORKS ─────────────────────────────────────── */

.services[b-ncbva0dqp7] {
    background: linear-gradient(180deg, #f3f8ff 0%, #f7fbff 100%);
    padding: 90px 5%;
}

.services-header[b-ncbva0dqp7] {
    max-width: 1200px;
    margin: 0 auto 48px;
    text-align: center;
}

.eyebrow[b-ncbva0dqp7] {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-teal);
}

.eyebrow strong i[b-ncbva0dqp7] {
    color: var(--brand-dark);
    font-style: normal;
}

.services-grid[b-ncbva0dqp7] {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.industries-grid[b-ncbva0dqp7] {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.service-card[b-ncbva0dqp7] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
    border-radius: 24px;
    padding: 36px 28px;
    position: relative;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.service-card:hover[b-ncbva0dqp7] {
    transform: translateY(-6px);
    box-shadow: 0 24px 44px rgba(15, 23, 42, 0.08);
    border-color: rgba(20, 184, 166, 0.22);
}

.service-card .icon[b-ncbva0dqp7] {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 2rem;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #dffaf5 0%, #c7f0e5 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.service-card h3[b-ncbva0dqp7] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brand-dark);
    margin: 0 0 12px;
}

.service-card p[b-ncbva0dqp7] {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #4b5563;
    margin: 0;
}

.card-index[b-ncbva0dqp7] {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 2.2rem;
    font-weight: 800;
    color: rgba(20, 184, 166, 0.12);
}

.industry-example[b-ncbva0dqp7] {
    margin-top: 12px;
    padding: 10px 14px;
    border-left: 3px solid #34d399;
    background: rgba(20, 184, 166, 0.06);
    border-radius: 0 10px 10px 0;
    font-size: 0.85rem;
    font-style: italic;
    color: #374151;
}

/* ── STATS / TRUST (META AUTHORIZED) ─────────────────────────────── */

.stats-cta-section[b-ncbva0dqp7] {
    padding: 60px 5% 90px;
    background: linear-gradient(180deg, #f3f8ff 0%, #edf7ff 100%);
}

.stats-cta-card[b-ncbva0dqp7] {
    max-width: 1400px;
    margin: 0 auto;
    background: linear-gradient(135deg, #0a1f31 0%, #0d3b55 40%, #0d5e5c 100%);
    border-radius: 30px;
    padding: 2rem 1.5rem;
    color: var(--text-white);
    box-shadow: 0 26px 50px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(255,255,255,0.08);
}

.steps-tag[b-ncbva0dqp7] {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-accent);
    margin-bottom: 20px;
}

.stats-header[b-ncbva0dqp7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.stats-header h2[b-ncbva0dqp7] {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 800;
    margin: 0 0 12px;
    max-width: 560px;
    color: var(--text-white);
}

.stats-header p[b-ncbva0dqp7] {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.65;
    max-width: 520px;
    margin: 0;
}

.stats-header img[b-ncbva0dqp7] {
    height: 65px;
    margin-right: 50px;
    width: auto;
    opacity: 0.9;
    flex-shrink: 0;
}

.stats-divider[b-ncbva0dqp7] {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 32px 0;
}

.stats-grid[b-ncbva0dqp7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.stat-item[b-ncbva0dqp7] {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-value[b-ncbva0dqp7] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--brand-accent);
}

.stat-label[b-ncbva0dqp7] {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.stat-separator[b-ncbva0dqp7] {
    color: rgba(255, 255, 255, 0.25);
    font-size: 1.2rem;
    align-self: center;
}

/* ── STEPS / FEATURE DEEP-DIVE ────────────────────────────────────── */

.steps-section[b-ncbva0dqp7] {
    background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
    padding: 90px 5%;
}

.steps-container[b-ncbva0dqp7] {
    max-width: 1200px;
    margin: 0 auto;
}

.steps-header[b-ncbva0dqp7] {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}

.steps-header h2[b-ncbva0dqp7] {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 800;
    color: var(--brand-dark);
    margin: 16px 0 12px;
}

.steps-header p[b-ncbva0dqp7] {
    color: #6b7280;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.steps-header .steps-tag[b-ncbva0dqp7] {
    color: var(--brand-teal);
}

.steps-grid[b-ncbva0dqp7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.step-card[b-ncbva0dqp7] {
    position: relative;
    background: linear-gradient(180deg, rgba(248, 250, 252, 1), rgba(255,255,255,1));
    border-radius: 22px;
    padding: 32px 24px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.step-card:hover[b-ncbva0dqp7] {
    transform: translateY(-6px);
    box-shadow: 0 24px 42px rgba(15, 23, 42, 0.08);
    border-color: rgba(20, 184, 166, 0.22);
}

.step-number[b-ncbva0dqp7] {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 0.85rem;
    font-weight: 800;
    color: rgba(20, 184, 166, 0.45);
}

.step-icon[b-ncbva0dqp7] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 1.8rem;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #dffaf5 0%, #c7f0e5 100%);
}

.step-card h3[b-ncbva0dqp7] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-dark);
    margin: 0 0 10px;
}

.step-card p[b-ncbva0dqp7] {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

/* ── FINAL CTA ────────────────────────────────────────────────────── */

.final-cta.brand-bg[b-ncbva0dqp7] {
    background: linear-gradient(135deg, #071b2c 0%, #0d2f42 30%, #0d9488 100%);
    padding: 90px 5%;
    text-align: center;
}

.final-cta-container[b-ncbva0dqp7] {
    max-width: 700px;
    margin: 0 auto;
}

.final-cta-container h2[b-ncbva0dqp7] {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 800;
    color: var(--text-white);
    margin: 0 0 18px;
}

.final-cta-container p[b-ncbva0dqp7] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 32px;
}

.cta-button[b-ncbva0dqp7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #facc15 0%, #fbbf24 100%);
    color: #1a1a1a;
    font-weight: 800;
    padding: 18px 40px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 18px 36px rgba(251, 191, 36, 0.22);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.cta-button:hover[b-ncbva0dqp7] {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(251, 191, 36, 0.28);
    filter: brightness(1.02);
}

/* ── RESPONSIVE ───────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .services-grid[b-ncbva0dqp7] {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid[b-ncbva0dqp7] {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid[b-ncbva0dqp7] {
        flex-direction: column;
        align-items: stretch;
    }

    .stat-separator[b-ncbva0dqp7] {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero-body[b-ncbva0dqp7] {
        flex-direction: column;
        text-align: center;
        padding: 40px 0 24px;
    }

    .hero-text p[b-ncbva0dqp7] {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions[b-ncbva0dqp7] {
        justify-content: center;
    }

    .hero-bottom[b-ncbva0dqp7] {
        flex-direction: column;
        text-align: center;
    }

    .about-container[b-ncbva0dqp7] {
        flex-direction: column;
    }

    .about-content[b-ncbva0dqp7] {
        width: 100%;
    }

    .services-grid[b-ncbva0dqp7],
    .steps-grid[b-ncbva0dqp7] {
        grid-template-columns: 1fr;
    }

    .stats-header[b-ncbva0dqp7] {
        flex-direction: column;
    }

    .stats-cta-card[b-ncbva0dqp7] {
        padding: 32px 24px;
    }

    .final-cta.brand-bg[b-ncbva0dqp7] {
        padding: 60px 5%;
    }
}

@media (max-width: 480px) {
    .hero-wrapper[b-ncbva0dqp7] {
        padding: 40px 5% 24px;
    }

    .about-section[b-ncbva0dqp7],
    .services[b-ncbva0dqp7],
    .steps-section[b-ncbva0dqp7] {
        padding: 60px 5%;
    }

    .hero-actions[b-ncbva0dqp7] {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-button[b-ncbva0dqp7],
    .btn-get-started[b-ncbva0dqp7],
    .contact-call[b-ncbva0dqp7] {
        width: 100%;
        text-align: center;
    }
}
+

/* Page-specific decorative geometry, kept behind the content. */
.about-section[b-ncbva0dqp7],
.services[b-ncbva0dqp7],
.stats-cta-section[b-ncbva0dqp7],
.steps-section[b-ncbva0dqp7],
.final-cta.brand-bg[b-ncbva0dqp7] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.about-container[b-ncbva0dqp7], .services-header[b-ncbva0dqp7], .services-grid[b-ncbva0dqp7], .stats-cta-card[b-ncbva0dqp7], .steps-container[b-ncbva0dqp7], .final-cta-container[b-ncbva0dqp7] {
    position: relative;
    z-index: 1;
}

.about-section[b-ncbva0dqp7]::before, .about-section[b-ncbva0dqp7]::after,
.services[b-ncbva0dqp7]::before, .services[b-ncbva0dqp7]::after,
.stats-cta-section[b-ncbva0dqp7]::before, .stats-cta-section[b-ncbva0dqp7]::after,
.steps-section[b-ncbva0dqp7]::before, .steps-section[b-ncbva0dqp7]::after,
.final-cta.brand-bg[b-ncbva0dqp7]::before, .final-cta.brand-bg[b-ncbva0dqp7]::after {
    position: absolute;
    z-index: 0;
    content: "";
    pointer-events: none;
}

.about-section[b-ncbva0dqp7]::before {
    top: 12%; right: 2%; width: 86px; height: 86px;
    border-top: 2px solid rgba(20, 184, 166, .35);
    border-right: 2px solid rgba(20, 184, 166, .35);
    box-shadow: 10px -10px 0 -8px rgba(20, 184, 166, .24), -10px 10px 0 -8px rgba(96, 165, 250, .2);
}
.about-section[b-ncbva0dqp7]::after {
    bottom: 8%; left: -5rem; width: 240px; height: 150px;
    background: radial-gradient(ellipse, rgba(20, 184, 166, .12), transparent 70%);
}

.services[b-ncbva0dqp7]::before {
    top: 0; right: 0; width: 190px; height: 150px;
    background-image: linear-gradient(rgba(20, 184, 166, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 184, 166, .08) 1px, transparent 1px);
    background-size: 20px 20px;
    mask-image: linear-gradient(135deg, #000, transparent 78%);
}
.services[b-ncbva0dqp7]::after {
    right: 8%; bottom: 1.5rem; width: 34px; height: 34px;
    background: linear-gradient(45deg, transparent 43%, rgba(20, 184, 166, .38) 44% 56%, transparent 57%), linear-gradient(-45deg, transparent 43%, rgba(20, 184, 166, .38) 44% 56%, transparent 57%);
}

.stats-cta-section[b-ncbva0dqp7]::before {
    top: 0; right: 0; width: 34%; height: 100%;
    background: repeating-linear-gradient(135deg, transparent 0 16px, rgba(45, 212, 191, .08) 16px 17px, transparent 17px 34px);
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
}
.stats-cta-section[b-ncbva0dqp7]::after {
    top: 1.25rem; right: 5%; width: 24px; height: 24px;
    border: 2px solid rgba(153, 246, 228, .55);
    transform: rotate(45deg);
}

.steps-section[b-ncbva0dqp7]::before {
    top: 2rem; right: 6%; width: 116px; height: 2px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 8px, transparent 8px 15px);
}
.steps-section[b-ncbva0dqp7]::after {
    right: 7%; bottom: 2rem; width: 18px; height: 18px;
    border: 2px solid rgba(255, 255, 255, .42); border-radius: 4px;
    box-shadow: 9px 0 0 -6px rgba(255, 255, 255, .5), 18px 0 0 -6px rgba(255, 255, 255, .3);
    transform: rotate(12deg);
}

.final-cta.brand-bg[b-ncbva0dqp7]::before {
    top: 0; left: 0; width: 36%; height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 22px);
    background-size: 22px 22px;
    clip-path: polygon(0 0, 75% 0, 100% 100%, 0 100%);
    mask-image: linear-gradient(90deg, #000, transparent);
}
.final-cta.brand-bg[b-ncbva0dqp7]::after {
    right: 5%; bottom: 12%; width: 48px; height: 48px;
    background: linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, .34) 47% 53%, transparent 54%), linear-gradient(0deg, transparent 46%, rgba(255, 255, 255, .34) 47% 53%, transparent 54%);
    transform: rotate(45deg);
}

@media (max-width: 700px) {
    .about-section[b-ncbva0dqp7]::before { top: 1rem; right: 1rem; width: 48px; height: 48px; }
    .about-section[b-ncbva0dqp7]::after { left: -7rem; width: 180px; height: 110px; }
    .services[b-ncbva0dqp7]::before { width: 130px; height: 110px; background-size: 16px 16px; }
    .services[b-ncbva0dqp7]::after { right: 1rem; bottom: 1rem; width: 24px; height: 24px; }
    .stats-cta-section[b-ncbva0dqp7]::before { width: 48%; }
    .stats-cta-section[b-ncbva0dqp7]::after { top: .75rem; right: 1rem; width: 18px; height: 18px; }
    .steps-section[b-ncbva0dqp7]::before { top: 1rem; right: 1rem; width: 55px; }
    .steps-section[b-ncbva0dqp7]::after { right: 1rem; bottom: 1rem; width: 13px; height: 13px; }
    .final-cta.brand-bg[b-ncbva0dqp7]::before { width: 60%; background-size: 16px 16px; }
    .final-cta.brand-bg[b-ncbva0dqp7]::after { right: 1rem; bottom: 1rem; width: 34px; height: 34px; }
}

@media (max-width: 420px) {
    .about-section[b-ncbva0dqp7]::before { width: 36px; height: 36px; }
    .services[b-ncbva0dqp7]::before { width: 96px; height: 92px; }
    .stats-cta-section[b-ncbva0dqp7]::before { width: 35%; }
    .steps-section[b-ncbva0dqp7]::before { width: 42px; }
    .final-cta.brand-bg[b-ncbva0dqp7]::before { width: 74%; }
    .final-cta.brand-bg[b-ncbva0dqp7]::after { width: 26px; height: 26px; }
}
/* /Pages/Public/Solutions/FlowSolutions.razor.rz.scp.css */
*[b-upmilpag7n] { box-sizing: border-box; }

.flow-solutions-page[b-upmilpag7n] {
    --flow-ink: var(--brand-dark);
    --flow-deep: var(--hero-bg-dark);
    --flow-mint: var(--brand-accent);
    --flow-lime: var(--brand-accent);
    --flow-coral: var(--color-secondary);
    --flow-paper: var(--light-bg);
    background: var(--flow-paper);
    color: var(--flow-ink);
    overflow: hidden;
}

.flow-hero-grid[b-upmilpag7n], .flow-intro[b-upmilpag7n], .flow-gallery[b-upmilpag7n], .flow-cta[b-upmilpag7n] { position: relative; width: min(100%, 1400px); margin: 0 auto; }
.flow-intro[b-upmilpag7n] { display: grid; grid-template-columns: 1fr 0.9fr; gap: 2.5rem; padding: 3.75rem 0 3.25rem; }
.flow-intro .flow-section-label[b-upmilpag7n], .flow-gallery .flow-section-label[b-upmilpag7n], .flow-cta .flow-section-label[b-upmilpag7n] { color: var(--brand-teal); }
.flow-intro h2[b-upmilpag7n], .flow-gallery h2[b-upmilpag7n], .flow-cta h2[b-upmilpag7n] { margin: 0.9rem 0 0; color: var(--flow-ink); font-size: 3rem; letter-spacing: -0.06em; line-height: 1.05; }
.flow-intro h2 em[b-upmilpag7n] { color: var(--brand-teal); font-style: normal; }
.flow-intro-copy[b-upmilpag7n] { max-width: 480px; align-self: end; padding-bottom: 0.45rem; }
.flow-intro-copy p[b-upmilpag7n], .flow-gallery-heading > p[b-upmilpag7n] { color: black; font-size: 1.05rem; line-height: 1.75; }
.flow-intro-copy p[b-upmilpag7n] { margin: 0 0 1.4rem; }
.flow-inline-link[b-upmilpag7n], .flow-card-link[b-upmilpag7n] { color: var(--brand-teal); }
.flow-gallery[b-upmilpag7n] { padding: 0 0 4rem; }
.flow-gallery-heading[b-upmilpag7n] { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.flow-gallery-heading h2[b-upmilpag7n] { max-width: 660px; font-size: 2.5rem; }
.flow-gallery-heading > p[b-upmilpag7n] { max-width: 340px; margin: 0 0 0.25rem; }
.flow-card-grid[b-upmilpag7n] { display: grid; grid-template-columns: 1fr; gap: 3.5rem; }
.flow-card[b-upmilpag7n] { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); min-height: 280px; overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--white-bg); box-shadow: var(--shadow-sm); transition: transform 220ms ease, box-shadow 220ms ease; }
.flow-card:hover[b-upmilpag7n] { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.flow-card-dark[b-upmilpag7n] { background: var(--flow-deep); color: var(--text-white); }
.flow-card-wide[b-upmilpag7n] { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
.flow-card:nth-child(odd)[b-upmilpag7n] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr); }
.flow-card:nth-child(odd) .flow-card-image[b-upmilpag7n] { order: 2; }
.flow-card:nth-child(odd) .flow-card-content[b-upmilpag7n] { order: 1; }
.flow-card-accent[b-upmilpag7n] { background: var(--color-success-bg); }
.flow-card-image[b-upmilpag7n] { min-height: 100%; overflow: hidden; background: var(--light-bg); }
.flow-card-image img[b-upmilpag7n] { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 450ms ease; }
.flow-card:hover .flow-card-image img[b-upmilpag7n] { transform: scale(1.04); }
.flow-card-content[b-upmilpag7n] { display: flex; flex-direction: column; align-items: flex-start; padding: 1.35rem; background: var(--flow-deep); color: var(--text-white); }
.flow-card-meta[b-upmilpag7n] { display: flex; justify-content: space-between; width: 100%; gap: 0.5rem; color: var(--text-muted); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.flow-card-meta span:first-child[b-upmilpag7n] { color: var(--brand-teal); }
.flow-card-dark .flow-card-meta[b-upmilpag7n], .flow-card-dark .flow-card-meta span:first-child[b-upmilpag7n] { color: var(--flow-lime); }
.flow-card-content .flow-card-meta[b-upmilpag7n] { color: color-mix(in srgb, var(--text-white) 68%, transparent); }
.flow-card-content .flow-card-meta span:first-child[b-upmilpag7n] { color: var(--flow-lime); }
.flow-card h3[b-upmilpag7n] { margin: auto 0 0.65rem; color: inherit; font-size: 1.4rem; letter-spacing: -0.04em; line-height: 1.1; }
.flow-card p[b-upmilpag7n] { margin: 0 0 1.1rem; color: var(--text-secondary); font-size: 0.86rem; line-height: 1.55; }
.flow-card-dark p[b-upmilpag7n] { color: color-mix(in srgb, var(--text-white) 67%, transparent); }
.flow-card-content p[b-upmilpag7n] { color: color-mix(in srgb, var(--text-white) 76%, transparent); }
.flow-card-link[b-upmilpag7n] { font-size: 0.82rem; font-weight: 800; }
.flow-card-dark .flow-card-link[b-upmilpag7n] { color: var(--flow-lime); }
.flow-card-content .flow-card-link[b-upmilpag7n] { color: var(--flow-lime); }
.flow-cta[b-upmilpag7n] { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 4rem; padding: 2.5rem 5%; border-radius: var(--radius-sm); background: var(--gradient-primary); }
.flow-cta h2[b-upmilpag7n] { max-width: 660px; color: var(--text-white); font-size: 2.75rem; }
.flow-cta .flow-section-label[b-upmilpag7n] { color: var(--text-white); font-size: 0.95rem; line-height: 1.55; }
.flow-cta .flow-primary-button[b-upmilpag7n] { flex-shrink: 0; background: var(--flow-deep); color: var(--text-white); padding: 8px 16px; border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: transform 220ms ease, box-shadow 220ms ease; border: 1px solid var(--text-white); }

@media (max-width: 980px) {
    .flow-hero-grid[b-upmilpag7n] { grid-template-columns: 1fr; gap: 2rem; }
    .flow-hero-art[b-upmilpag7n] { min-height: 360px; max-width: 680px; margin: 0 auto; width: 100%; }
    .flow-intro[b-upmilpag7n] { gap: 2rem; }
    .flow-intro h2[b-upmilpag7n], .flow-gallery h2[b-upmilpag7n] { font-size: 2.35rem; }
    .flow-cta h2[b-upmilpag7n] { font-size: 2.25rem; }
    .flow-card[b-upmilpag7n], .flow-card-wide[b-upmilpag7n] { grid-template-columns: 1fr; }
    .flow-card:nth-child(odd)[b-upmilpag7n] { grid-template-columns: 1fr; }
    .flow-card-image[b-upmilpag7n] { height: 320px; }
    .flow-card:nth-child(odd) .flow-card-image[b-upmilpag7n], .flow-card:nth-child(odd) .flow-card-content[b-upmilpag7n] { order: initial; }
}

@media (max-width: 720px) {
    .flow-intro[b-upmilpag7n] { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 2.75rem; padding-bottom: 2.5rem; }
    .flow-intro h2[b-upmilpag7n], .flow-gallery h2[b-upmilpag7n] { font-size: 2rem; }
    
    .flow-gallery-heading[b-upmilpag7n], .flow-cta[b-upmilpag7n] { align-items: flex-start; flex-direction: column; }
    .flow-gallery-heading[b-upmilpag7n] { gap: 1rem; }
    .flow-card-grid[b-upmilpag7n] { grid-template-columns: 1fr; }
    .flow-card-content[b-upmilpag7n] { padding: 1.1rem; }
    .flow-card h3[b-upmilpag7n] { font-size: 1.35rem; }
    .flow-card p[b-upmilpag7n] { font-size: 0.82rem; }
    .flow-cta[b-upmilpag7n] { margin-right: 5%; margin-bottom: 2.75rem; margin-left: 5%; padding: 2rem 1.5rem; }
    .flow-cta h2[b-upmilpag7n] { font-size: 2rem; }
}

@media (max-width: 480px) {
    .flow-card-image[b-upmilpag7n] { height: 210px; }
}

/* Flow-builder accents: nodes, connector rails, and cropped corners. */
.flow-solutions-page[b-upmilpag7n] { position: relative; isolation: isolate; }

.flow-intro[b-upmilpag7n],
.flow-gallery[b-upmilpag7n],
.flow-cta[b-upmilpag7n] { isolation: isolate; }

.flow-intro[b-upmilpag7n]::before,
.flow-gallery[b-upmilpag7n]::before,
.flow-gallery[b-upmilpag7n]::after,
.flow-cta[b-upmilpag7n]::before,
.flow-cta[b-upmilpag7n]::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.flow-intro[b-upmilpag7n]::before {
    top: 2.5rem;
    right: 0;
    width: 96px;
    height: 96px;
    border-top: 2px solid color-mix(in srgb, var(--brand-teal) 28%, transparent);
    border-right: 2px solid color-mix(in srgb, var(--brand-teal) 28%, transparent);
}

.flow-gallery[b-upmilpag7n]::before {
    top: 0;
    right: 0;
    width: 74px;
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--brand-teal) 0 9px, transparent 9px 15px);
    opacity: .42;
}

.flow-gallery[b-upmilpag7n]::after {
    right: -3rem;
    bottom: 8%;
    width: 180px;
    height: 130px;
    background: repeating-linear-gradient(135deg, transparent 0 12px, color-mix(in srgb, var(--brand-teal) 8%, transparent) 12px 13px, transparent 13px 25px);
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
}

.flow-card[b-upmilpag7n] { position: relative; }
.flow-card[b-upmilpag7n]::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
    border-top: 2px solid color-mix(in srgb, var(--brand-teal) 28%, transparent);
    border-right: 2px solid color-mix(in srgb, var(--brand-teal) 28%, transparent);
    pointer-events: none;
}

.flow-cta[b-upmilpag7n] { overflow: hidden; }
.flow-cta[b-upmilpag7n]::before {
    top: 0;
    right: 0;
    width: 38%;
    height: 100%;
    background: repeating-linear-gradient(135deg, transparent 0 13px, rgba(255,255,255,.09) 13px 14px, transparent 14px 27px);
    clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%);
}

.flow-cta[b-upmilpag7n]::after {
    right: 6%;
    bottom: 15%;
    width: 34px;
    height: 34px;
    border: 2px solid color-mix(in srgb, var(--text-white) 42%, transparent);
    border-radius: 5px;
    transform: rotate(12deg);
}

@media (max-width: 720px) {
    .flow-intro[b-upmilpag7n]::before { top: 1rem; right: .75rem; width: 48px; height: 48px; }
    .flow-gallery[b-upmilpag7n]::before { width: 48px; }
    .flow-gallery[b-upmilpag7n]::after { right: -4rem; bottom: 4%; width: 120px; height: 90px; }
    .flow-card[b-upmilpag7n]::after { width: 28px; height: 28px; }
    .flow-cta[b-upmilpag7n]::before { width: 58%; }
    .flow-cta[b-upmilpag7n]::after { right: 1rem; bottom: 1rem; width: 24px; height: 24px; }
}

@media (max-width: 420px) {
    .flow-intro[b-upmilpag7n]::before { width: 34px; height: 34px; }
    .flow-gallery[b-upmilpag7n]::after { width: 88px; height: 72px; }
    .flow-card[b-upmilpag7n]::after { width: 20px; height: 20px; }
    .flow-cta[b-upmilpag7n]::before { width: 72%; }
    .flow-cta[b-upmilpag7n]::after { width: 18px; height: 18px; }
}
/* /Pages/Public/Solutions/MarketingCampaigns.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   Run Marketing Campaigns — Solutions Page
   Uses global :root variables from app.css
   ═══════════════════════════════════════════════════════════════════ */

*[b-bt9gyumooz] {
    box-sizing: border-box;
}

/* ── HERO ─────────────────────────────────────────────────────────── */

.hero-wrapper[b-bt9gyumooz] {
    position: relative;
    background: linear-gradient(135deg, #071b2c 0%, #0d2f42 32%, #0b5c5a 100%);
    padding: 60px 5% 40px;
    color: var(--text-white);
    overflow: hidden;
}

.hero-wrapper[b-bt9gyumooz]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.22), transparent 30%),
        radial-gradient(circle at bottom left, rgba(96, 165, 250, 0.18), transparent 34%);
    pointer-events: none;
}

.hero-body[b-bt9gyumooz] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 60px 0 40px;
    flex-wrap: wrap;
}

.hero-text[b-bt9gyumooz] {
    flex: 1 1 480px;
    max-width: 600px;
}

.hero-actions[b-bt9gyumooz] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 24px;
}

.hero-text .about-tag[b-bt9gyumooz] {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    color: var(--brand-accent);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.hero-text h1[b-bt9gyumooz] {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 20px;
    color: var(--text-white);
    letter-spacing: -0.05em;
}

.hero-text p[b-bt9gyumooz] {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 540px;
}

.btn-get-started[b-bt9gyumooz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #facc15 0%, #fbbf24 100%);
    color: #111827;
    font-weight: 800;
    padding: 16px 28px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 18px 36px rgba(251, 191, 36, 0.22);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.btn-get-started:hover[b-bt9gyumooz] {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(251, 191, 36, 0.28);
    filter: brightness(1.02);
}

.contact-call[b-bt9gyumooz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
    color: var(--text-white);
    backdrop-filter: blur(8px);
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.contact-call:hover[b-bt9gyumooz] {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.34);
}

.hero-image-area[b-bt9gyumooz] {
    flex: 1 1 400px;
    max-width: 520px;
}

.hero-image-container[b-bt9gyumooz] {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 28px 60px rgba(2, 6, 23, 0.28);
}

.hero-image-container img[b-bt9gyumooz] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.hero-bottom[b-bt9gyumooz] {
    position: relative;
    z-index: 1;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-bottom img[b-bt9gyumooz] {
    height: 28px;
    width: auto;
    opacity: 0.9;
}

.hero-bottom p[b-bt9gyumooz] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    margin: 0;
}

/* ── ABOUT / PROBLEM ─────────────────────────────────────────────── */

.about-section[b-bt9gyumooz] {
    background: linear-gradient(180deg, #f7fbff 0%, #f2f8ff 100%);
    padding: 90px 5%;
}

.about-container[b-bt9gyumooz] {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

.about-image-wrapper[b-bt9gyumooz] {
    flex: 1 1 420px;
    max-width: 500px;
    position: relative;
    padding: 18px;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(236,253,245,0.9));
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.06);
}

.about-main-img[b-bt9gyumooz] {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 22px;
}

.about-content[b-bt9gyumooz] {
    flex: 1 1 420px;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 28px;
    padding: clamp(24px, 3vw, 36px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
}

.about-tag[b-bt9gyumooz] {
    display: inline-block;
    background: rgba(20, 184, 166, 0.1);
    color: var(--brand-teal);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.about-content h2[b-bt9gyumooz] {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--brand-dark);
    line-height: 1.25;
    margin: 0 0 20px;
}

.about-highlight[b-bt9gyumooz] {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--brand-dark);
    margin: 0 0 20px;
}

.about-list[b-bt9gyumooz] {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.about-list li[b-bt9gyumooz] {
    position: relative;
    padding-left: 34px;
    font-size: 0.98rem;
    line-height: 1.6;
    color: #374151;
    background: rgba(20, 184, 166, 0.03);
    border: 1px solid rgba(20, 184, 166, 0.08);
    border-radius: 14px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 12px;
}

.about-list li[b-bt9gyumooz]::before {
    content: "✓";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0ea5a4, #34d399);
    color: #fff;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
}

.about-list li strong[b-bt9gyumooz] {
    color: var(--brand-dark);
}

/* ── SERVICES / HOW IT WORKS ─────────────────────────────────────── */

.services[b-bt9gyumooz] {
    background: linear-gradient(180deg, #f3f8ff 0%, #f7fbff 100%);
    padding: 90px 5%;
}

.services-header[b-bt9gyumooz] {
    max-width: 1200px;
    margin: 0 auto 48px;
    text-align: center;
}

.eyebrow[b-bt9gyumooz] {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-teal);
}

.eyebrow strong i[b-bt9gyumooz] {
    color: var(--brand-dark);
    font-style: normal;
}

.services-grid[b-bt9gyumooz] {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.industries-grid[b-bt9gyumooz] {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.service-card[b-bt9gyumooz] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
    border-radius: 24px;
    padding: 36px 28px;
    position: relative;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.service-card:hover[b-bt9gyumooz] {
    transform: translateY(-6px);
    box-shadow: 0 24px 44px rgba(15, 23, 42, 0.08);
    border-color: rgba(20, 184, 166, 0.22);
}

.service-card .icon[b-bt9gyumooz] {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 2rem;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #dffaf5 0%, #c7f0e5 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.service-card h3[b-bt9gyumooz] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brand-dark);
    margin: 0 0 12px;
}

.service-card p[b-bt9gyumooz] {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #4b5563;
    margin: 0;
}

.card-index[b-bt9gyumooz] {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 2.2rem;
    font-weight: 800;
    color: rgba(20, 184, 166, 0.12);
}

.industry-example[b-bt9gyumooz] {
    margin-top: 12px;
    padding: 10px 14px;
    border-left: 3px solid #34d399;
    background: rgba(20, 184, 166, 0.06);
    border-radius: 0 10px 10px 0;
    font-size: 0.85rem;
    font-style: italic;
    color: #374151;
}

/* ── STATS / TRUST (META AUTHORIZED) ─────────────────────────────── */

.stats-cta-section[b-bt9gyumooz] {
    padding: 60px 5% 90px;
    background: linear-gradient(180deg, #f3f8ff 0%, #edf7ff 100%);
}

.stats-cta-card[b-bt9gyumooz] {
    max-width: 1400px;
    margin: 0 auto;
    background: linear-gradient(135deg, #0a1f31 0%, #0d3b55 40%, #0d5e5c 100%);
    border-radius: 30px;
    padding: 2rem 1.5rem;
    color: var(--text-white);
    box-shadow: 0 26px 50px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(255,255,255,0.08);
}

.steps-tag[b-bt9gyumooz] {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-accent);
    margin-bottom: 20px;
}

.stats-header[b-bt9gyumooz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.stats-header h2[b-bt9gyumooz] {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 800;
    margin: 0 0 12px;
    max-width: 560px;
    color: var(--text-white);
}

.stats-header p[b-bt9gyumooz] {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.65;
    max-width: 520px;
    margin: 0;
}

.stats-header img[b-bt9gyumooz] {
    height: 65px;
    margin-right: 50px;
    width: auto;
    opacity: 0.9;
    flex-shrink: 0;
}

.stats-divider[b-bt9gyumooz] {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 32px 0;
}

.stats-grid[b-bt9gyumooz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.stat-item[b-bt9gyumooz] {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-value[b-bt9gyumooz] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--brand-accent);
}

.stat-label[b-bt9gyumooz] {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.stat-separator[b-bt9gyumooz] {
    color: rgba(255, 255, 255, 0.25);
    font-size: 1.2rem;
    align-self: center;
}

/* ── STEPS / FEATURE DEEP-DIVE ────────────────────────────────────── */

.steps-section[b-bt9gyumooz] {
    background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
    padding: 90px 5%;
}

.steps-container[b-bt9gyumooz] {
    max-width: 1200px;
    margin: 0 auto;
}

.steps-header[b-bt9gyumooz] {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}

.steps-header h2[b-bt9gyumooz] {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 800;
    color: var(--brand-dark);
    margin: 16px 0 12px;
}

.steps-header p[b-bt9gyumooz] {
    color: #6b7280;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.steps-header .steps-tag[b-bt9gyumooz] {
    color: var(--brand-teal);
}

.steps-grid[b-bt9gyumooz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.step-card[b-bt9gyumooz] {
    position: relative;
    background: linear-gradient(180deg, rgba(248, 250, 252, 1), rgba(255,255,255,1));
    border-radius: 22px;
    padding: 32px 24px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.step-card:hover[b-bt9gyumooz] {
    transform: translateY(-6px);
    box-shadow: 0 24px 42px rgba(15, 23, 42, 0.08);
    border-color: rgba(20, 184, 166, 0.22);
}

.step-number[b-bt9gyumooz] {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 0.85rem;
    font-weight: 800;
    color: rgba(20, 184, 166, 0.45);
}

.step-icon[b-bt9gyumooz] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 1.8rem;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #dffaf5 0%, #c7f0e5 100%);
}

.step-card h3[b-bt9gyumooz] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-dark);
    margin: 0 0 10px;
}

.step-card p[b-bt9gyumooz] {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

/* ── FINAL CTA ────────────────────────────────────────────────────── */

.final-cta.brand-bg[b-bt9gyumooz] {
    background: linear-gradient(135deg, #071b2c 0%, #0d2f42 30%, #0d9488 100%);
    padding: 90px 5%;
    text-align: center;
}

.final-cta-container[b-bt9gyumooz] {
    max-width: 700px;
    margin: 0 auto;
}

.final-cta-container h2[b-bt9gyumooz] {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 800;
    color: var(--text-white);
    margin: 0 0 18px;
}

.final-cta-container p[b-bt9gyumooz] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 32px;
}

.cta-button[b-bt9gyumooz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #facc15 0%, #fbbf24 100%);
    color: #1a1a1a;
    font-weight: 800;
    padding: 18px 40px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 18px 36px rgba(251, 191, 36, 0.22);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.cta-button:hover[b-bt9gyumooz] {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(251, 191, 36, 0.28);
    filter: brightness(1.02);
}

/* ── RESPONSIVE ───────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .services-grid[b-bt9gyumooz] {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid[b-bt9gyumooz] {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid[b-bt9gyumooz] {
        flex-direction: column;
        align-items: stretch;
    }

    .stat-separator[b-bt9gyumooz] {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero-body[b-bt9gyumooz] {
        flex-direction: column;
        text-align: center;
        padding: 40px 0 24px;
    }

    .hero-text p[b-bt9gyumooz] {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions[b-bt9gyumooz] {
        justify-content: center;
    }

    .hero-bottom[b-bt9gyumooz] {
        flex-direction: column;
        text-align: center;
    }

    .about-container[b-bt9gyumooz] {
        flex-direction: column;
    }

    .about-content[b-bt9gyumooz] {
        width: 100%;
    }

    .services-grid[b-bt9gyumooz],
    .steps-grid[b-bt9gyumooz] {
        grid-template-columns: 1fr;
    }

    .stats-header[b-bt9gyumooz] {
        flex-direction: column;
    }

    .stats-cta-card[b-bt9gyumooz] {
        padding: 32px 24px;
    }

    .final-cta.brand-bg[b-bt9gyumooz] {
        padding: 60px 5%;
    }
}

@media (max-width: 480px) {
    .hero-wrapper[b-bt9gyumooz] {
        padding: 40px 5% 24px;
    }

    .about-section[b-bt9gyumooz],
    .services[b-bt9gyumooz],
    .steps-section[b-bt9gyumooz] {
        padding: 60px 5%;
    }

    .hero-actions[b-bt9gyumooz] {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-button[b-bt9gyumooz],
    .btn-get-started[b-bt9gyumooz],
    .contact-call[b-bt9gyumooz] {
        width: 100%;
        text-align: center;
    }
}
+

/* Page-specific decorative geometry, kept behind the content. */
.about-section[b-bt9gyumooz],
.services[b-bt9gyumooz],
.stats-cta-section[b-bt9gyumooz],
.steps-section[b-bt9gyumooz],
.final-cta.brand-bg[b-bt9gyumooz] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.about-container[b-bt9gyumooz], .services-header[b-bt9gyumooz], .services-grid[b-bt9gyumooz], .stats-cta-card[b-bt9gyumooz], .steps-container[b-bt9gyumooz], .final-cta-container[b-bt9gyumooz] {
    position: relative;
    z-index: 1;
}

.about-section[b-bt9gyumooz]::before, .about-section[b-bt9gyumooz]::after,
.services[b-bt9gyumooz]::before, .services[b-bt9gyumooz]::after,
.stats-cta-section[b-bt9gyumooz]::before, .stats-cta-section[b-bt9gyumooz]::after,
.steps-section[b-bt9gyumooz]::before, .steps-section[b-bt9gyumooz]::after,
.final-cta.brand-bg[b-bt9gyumooz]::before, .final-cta.brand-bg[b-bt9gyumooz]::after {
    position: absolute;
    z-index: 0;
    content: "";
    pointer-events: none;
}

.about-section[b-bt9gyumooz]::before {
    top: 12%; right: 2%; width: 86px; height: 86px;
    border-top: 2px solid rgba(20, 184, 166, .35);
    border-right: 2px solid rgba(20, 184, 166, .35);
    box-shadow: 10px -10px 0 -8px rgba(20, 184, 166, .24), -10px 10px 0 -8px rgba(96, 165, 250, .2);
}
.about-section[b-bt9gyumooz]::after {
    bottom: 8%; left: -5rem; width: 240px; height: 150px;
    background: radial-gradient(ellipse, rgba(20, 184, 166, .12), transparent 70%);
}

.services[b-bt9gyumooz]::before {
    top: 0; right: 0; width: 190px; height: 150px;
    background-image: linear-gradient(rgba(20, 184, 166, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 184, 166, .08) 1px, transparent 1px);
    background-size: 20px 20px;
    mask-image: linear-gradient(135deg, #000, transparent 78%);
}
.services[b-bt9gyumooz]::after {
    right: 8%; bottom: 1.5rem; width: 34px; height: 34px;
    background: linear-gradient(45deg, transparent 43%, rgba(20, 184, 166, .38) 44% 56%, transparent 57%), linear-gradient(-45deg, transparent 43%, rgba(20, 184, 166, .38) 44% 56%, transparent 57%);
}

.stats-cta-section[b-bt9gyumooz]::before {
    top: 0; right: 0; width: 34%; height: 100%;
    background: repeating-linear-gradient(135deg, transparent 0 16px, rgba(45, 212, 191, .08) 16px 17px, transparent 17px 34px);
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
}
.stats-cta-section[b-bt9gyumooz]::after {
    top: 1.25rem; right: 5%; width: 24px; height: 24px;
    border: 2px solid rgba(153, 246, 228, .55);
    transform: rotate(45deg);
}

.steps-section[b-bt9gyumooz]::before {
    top: 2rem; right: 6%; width: 116px; height: 2px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 8px, transparent 8px 15px);
}
.steps-section[b-bt9gyumooz]::after {
    right: 7%; bottom: 2rem; width: 18px; height: 18px;
    border: 2px solid rgba(255, 255, 255, .42); border-radius: 4px;
    box-shadow: 9px 0 0 -6px rgba(255, 255, 255, .5), 18px 0 0 -6px rgba(255, 255, 255, .3);
    transform: rotate(12deg);
}

.final-cta.brand-bg[b-bt9gyumooz]::before {
    top: 0; left: 0; width: 36%; height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 22px);
    background-size: 22px 22px;
    clip-path: polygon(0 0, 75% 0, 100% 100%, 0 100%);
    mask-image: linear-gradient(90deg, #000, transparent);
}
.final-cta.brand-bg[b-bt9gyumooz]::after {
    right: 5%; bottom: 12%; width: 48px; height: 48px;
    background: linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, .34) 47% 53%, transparent 54%), linear-gradient(0deg, transparent 46%, rgba(255, 255, 255, .34) 47% 53%, transparent 54%);
    transform: rotate(45deg);
}

@media (max-width: 700px) {
    .about-section[b-bt9gyumooz]::before { top: 1rem; right: 1rem; width: 48px; height: 48px; }
    .about-section[b-bt9gyumooz]::after { left: -7rem; width: 180px; height: 110px; }
    .services[b-bt9gyumooz]::before { width: 130px; height: 110px; background-size: 16px 16px; }
    .services[b-bt9gyumooz]::after { right: 1rem; bottom: 1rem; width: 24px; height: 24px; }
    .stats-cta-section[b-bt9gyumooz]::before { width: 48%; }
    .stats-cta-section[b-bt9gyumooz]::after { top: .75rem; right: 1rem; width: 18px; height: 18px; }
    .steps-section[b-bt9gyumooz]::before { top: 1rem; right: 1rem; width: 55px; }
    .steps-section[b-bt9gyumooz]::after { right: 1rem; bottom: 1rem; width: 13px; height: 13px; }
    .final-cta.brand-bg[b-bt9gyumooz]::before { width: 60%; background-size: 16px 16px; }
    .final-cta.brand-bg[b-bt9gyumooz]::after { right: 1rem; bottom: 1rem; width: 34px; height: 34px; }
}

@media (max-width: 420px) {
    .about-section[b-bt9gyumooz]::before { width: 36px; height: 36px; }
    .services[b-bt9gyumooz]::before { width: 96px; height: 92px; }
    .stats-cta-section[b-bt9gyumooz]::before { width: 35%; }
    .steps-section[b-bt9gyumooz]::before { width: 42px; }
    .final-cta.brand-bg[b-bt9gyumooz]::before { width: 74%; }
    .final-cta.brand-bg[b-bt9gyumooz]::after { width: 26px; height: 26px; }
}
/* /Pages/Public/Solutions/TransactionalAlerts.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   Send Transactional Alerts — Solutions Page
   Uses global :root variables from app.css
   ═══════════════════════════════════════════════════════════════════ */

*[b-xojgdugzg8] {
    box-sizing: border-box;
}

/* ── HERO ─────────────────────────────────────────────────────────── */

.hero-wrapper[b-xojgdugzg8] {
    position: relative;
    background: linear-gradient(135deg, #071b2c 0%, #0d2f42 32%, #0b5c5a 100%);
    padding: 60px 5% 40px;
    color: var(--text-white);
    overflow: hidden;
}

.hero-wrapper[b-xojgdugzg8]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(20, 184, 166, 0.22), transparent 30%),
        radial-gradient(circle at bottom left, rgba(96, 165, 250, 0.18), transparent 34%);
    pointer-events: none;
}

.hero-body[b-xojgdugzg8] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    max-width: 1300px;
    margin: 0 auto;
    padding: 60px 0 40px;
    flex-wrap: wrap;
}

.hero-text[b-xojgdugzg8] {
    flex: 1 1 480px;
    max-width: 600px;
}

.hero-actions[b-xojgdugzg8] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 24px;
}

.hero-text .about-tag[b-xojgdugzg8] {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    color: var(--brand-accent);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.hero-text h1[b-xojgdugzg8] {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 20px;
    color: var(--text-white);
    letter-spacing: -0.05em;
}

.hero-text p[b-xojgdugzg8] {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 540px;
}

.btn-get-started[b-xojgdugzg8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #facc15 0%, #fbbf24 100%);
    color: #111827;
    font-weight: 800;
    padding: 16px 28px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 18px 36px rgba(251, 191, 36, 0.22);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.btn-get-started:hover[b-xojgdugzg8] {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(251, 191, 36, 0.28);
    filter: brightness(1.02);
}

.contact-call[b-xojgdugzg8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
    color: var(--text-white);
    backdrop-filter: blur(8px);
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.contact-call:hover[b-xojgdugzg8] {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.34);
}

.hero-image-area[b-xojgdugzg8] {
    flex: 1 1 400px;
    max-width: 520px;
}

.hero-image-container[b-xojgdugzg8] {
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 28px 60px rgba(2, 6, 23, 0.28);
}

.hero-image-container img[b-xojgdugzg8] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.hero-bottom[b-xojgdugzg8] {
    position: relative;
    z-index: 1;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-bottom img[b-xojgdugzg8] {
    height: 28px;
    width: auto;
    opacity: 0.9;
}

.hero-bottom p[b-xojgdugzg8] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    margin: 0;
}

/* ── ABOUT / PROBLEM ─────────────────────────────────────────────── */

.about-section[b-xojgdugzg8] {
    background: linear-gradient(180deg, #f7fbff 0%, #f2f8ff 100%);
    padding: 90px 5%;
}

.about-container[b-xojgdugzg8] {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

.about-image-wrapper[b-xojgdugzg8] {
    flex: 1 1 420px;
    max-width: 500px;
    position: relative;
    padding: 18px;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(236,253,245,0.9));
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.06);
}

.about-main-img[b-xojgdugzg8] {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 22px;
}

.about-content[b-xojgdugzg8] {
    flex: 1 1 420px;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 28px;
    padding: clamp(24px, 3vw, 36px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
}

.about-tag[b-xojgdugzg8] {
    display: inline-block;
    background: rgba(20, 184, 166, 0.1);
    color: var(--brand-teal);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.about-content h2[b-xojgdugzg8] {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--brand-dark);
    line-height: 1.25;
    margin: 0 0 20px;
}

.about-highlight[b-xojgdugzg8] {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--brand-dark);
    margin: 0 0 20px;
}

.about-list[b-xojgdugzg8] {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.about-list li[b-xojgdugzg8] {
    position: relative;
    padding-left: 34px;
    font-size: 0.98rem;
    line-height: 1.6;
    color: #374151;
    background: rgba(20, 184, 166, 0.03);
    border: 1px solid rgba(20, 184, 166, 0.08);
    border-radius: 14px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 12px;
}

.about-list li[b-xojgdugzg8]::before {
    content: "✓";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0ea5a4, #34d399);
    color: #fff;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
}

.about-list li strong[b-xojgdugzg8] {
    color: var(--brand-dark);
}

/* ── SERVICES / HOW IT WORKS ─────────────────────────────────────── */

.services[b-xojgdugzg8] {
    background: linear-gradient(180deg, #f3f8ff 0%, #f7fbff 100%);
    padding: 90px 5%;
}

.services-header[b-xojgdugzg8] {
    max-width: 1200px;
    margin: 0 auto 48px;
    text-align: center;
}

.eyebrow[b-xojgdugzg8] {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-teal);
}

.eyebrow strong i[b-xojgdugzg8] {
    color: var(--brand-dark);
    font-style: normal;
}

.services-grid[b-xojgdugzg8] {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.industries-grid[b-xojgdugzg8] {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.service-card[b-xojgdugzg8] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
    border-radius: 24px;
    padding: 36px 28px;
    position: relative;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.service-card:hover[b-xojgdugzg8] {
    transform: translateY(-6px);
    box-shadow: 0 24px 44px rgba(15, 23, 42, 0.08);
    border-color: rgba(20, 184, 166, 0.22);
}

.service-card .icon[b-xojgdugzg8] {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 2rem;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #dffaf5 0%, #c7f0e5 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.service-card h3[b-xojgdugzg8] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brand-dark);
    margin: 0 0 12px;
}

.service-card p[b-xojgdugzg8] {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #4b5563;
    margin: 0;
}

.card-index[b-xojgdugzg8] {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 2.2rem;
    font-weight: 800;
    color: rgba(20, 184, 166, 0.12);
}

.industry-example[b-xojgdugzg8] {
    margin-top: 12px;
    padding: 10px 14px;
    border-left: 3px solid #34d399;
    background: rgba(20, 184, 166, 0.06);
    border-radius: 0 10px 10px 0;
    font-size: 0.85rem;
    font-style: italic;
    color: #374151;
}

/* ── STATS / TRUST (META AUTHORIZED) ─────────────────────────────── */

.stats-cta-section[b-xojgdugzg8] {
    padding: 60px 5% 90px;
    background: linear-gradient(180deg, #f3f8ff 0%, #edf7ff 100%);
}

.stats-cta-card[b-xojgdugzg8] {
    max-width: 1400px;
    margin: 0 auto;
    background: linear-gradient(135deg, #0a1f31 0%, #0d3b55 40%, #0d5e5c 100%);
    border-radius: 30px;
    padding: 2rem 1.5rem;
    color: var(--text-white);
    box-shadow: 0 26px 50px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(255,255,255,0.08);
}

.steps-tag[b-xojgdugzg8] {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-accent);
    margin-bottom: 20px;
}

.stats-header[b-xojgdugzg8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.stats-header h2[b-xojgdugzg8] {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 800;
    margin: 0 0 12px;
    max-width: 560px;
    color: var(--text-white);
}

.stats-header p[b-xojgdugzg8] {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.65;
    max-width: 520px;
    margin: 0;
}

.stats-header img[b-xojgdugzg8] {
    height: 65px;
    margin-right: 50px;
    width: auto;
    opacity: 0.9;
    flex-shrink: 0;
}

.stats-divider[b-xojgdugzg8] {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 32px 0;
}

.stats-grid[b-xojgdugzg8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.stat-item[b-xojgdugzg8] {
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-value[b-xojgdugzg8] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--brand-accent);
}

.stat-label[b-xojgdugzg8] {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.stat-separator[b-xojgdugzg8] {
    color: rgba(255, 255, 255, 0.25);
    font-size: 1.2rem;
    align-self: center;
}

/* ── STEPS / FEATURE DEEP-DIVE ────────────────────────────────────── */

.steps-section[b-xojgdugzg8] {
    background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
    padding: 90px 5%;
}

.steps-container[b-xojgdugzg8] {
    max-width: 1200px;
    margin: 0 auto;
}

.steps-header[b-xojgdugzg8] {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 48px;
}

.steps-header h2[b-xojgdugzg8] {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 800;
    color: var(--brand-dark);
    margin: 16px 0 12px;
}

.steps-header p[b-xojgdugzg8] {
    color: #6b7280;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.steps-header .steps-tag[b-xojgdugzg8] {
    color: var(--brand-teal);
}

.steps-grid[b-xojgdugzg8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.step-card[b-xojgdugzg8] {
    position: relative;
    background: linear-gradient(180deg, rgba(248, 250, 252, 1), rgba(255,255,255,1));
    border-radius: 22px;
    padding: 32px 24px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.step-card:hover[b-xojgdugzg8] {
    transform: translateY(-6px);
    box-shadow: 0 24px 42px rgba(15, 23, 42, 0.08);
    border-color: rgba(20, 184, 166, 0.22);
}

.step-number[b-xojgdugzg8] {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 0.85rem;
    font-weight: 800;
    color: rgba(20, 184, 166, 0.45);
}

.step-icon[b-xojgdugzg8] {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 1.8rem;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #dffaf5 0%, #c7f0e5 100%);
}

.step-card h3[b-xojgdugzg8] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-dark);
    margin: 0 0 10px;
}

.step-card p[b-xojgdugzg8] {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

/* ── FINAL CTA ────────────────────────────────────────────────────── */

.final-cta.brand-bg[b-xojgdugzg8] {
    background: linear-gradient(135deg, #071b2c 0%, #0d2f42 30%, #0d9488 100%);
    padding: 90px 5%;
    text-align: center;
}

.final-cta-container[b-xojgdugzg8] {
    max-width: 700px;
    margin: 0 auto;
}

.final-cta-container h2[b-xojgdugzg8] {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 800;
    color: var(--text-white);
    margin: 0 0 18px;
}

.final-cta-container p[b-xojgdugzg8] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 32px;
}

.cta-button[b-xojgdugzg8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #facc15 0%, #fbbf24 100%);
    color: #1a1a1a;
    font-weight: 800;
    padding: 18px 40px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 18px 36px rgba(251, 191, 36, 0.22);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.cta-button:hover[b-xojgdugzg8] {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(251, 191, 36, 0.28);
    filter: brightness(1.02);
}

/* ── RESPONSIVE ───────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .services-grid[b-xojgdugzg8] {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid[b-xojgdugzg8] {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid[b-xojgdugzg8] {
        flex-direction: column;
        align-items: stretch;
    }

    .stat-separator[b-xojgdugzg8] {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero-body[b-xojgdugzg8] {
        flex-direction: column;
        text-align: center;
        padding: 40px 0 24px;
    }

    .hero-text p[b-xojgdugzg8] {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions[b-xojgdugzg8] {
        justify-content: center;
    }

    .hero-bottom[b-xojgdugzg8] {
        flex-direction: column;
        text-align: center;
    }

    .about-container[b-xojgdugzg8] {
        flex-direction: column;
    }

    .about-content[b-xojgdugzg8] {
        width: 100%;
    }

    .services-grid[b-xojgdugzg8],
    .steps-grid[b-xojgdugzg8] {
        grid-template-columns: 1fr;
    }

    .stats-header[b-xojgdugzg8] {
        flex-direction: column;
    }

    .stats-cta-card[b-xojgdugzg8] {
        padding: 32px 24px;
    }

    .final-cta.brand-bg[b-xojgdugzg8] {
        padding: 60px 5%;
    }
}

@media (max-width: 480px) {
    .hero-wrapper[b-xojgdugzg8] {
        padding: 40px 5% 24px;
    }

    .about-section[b-xojgdugzg8],
    .services[b-xojgdugzg8],
    .steps-section[b-xojgdugzg8] {
        padding: 60px 5%;
    }

    .hero-actions[b-xojgdugzg8] {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-button[b-xojgdugzg8],
    .btn-get-started[b-xojgdugzg8],
    .contact-call[b-xojgdugzg8] {
        width: 100%;
        text-align: center;
    }
}
+

/* Page-specific decorative geometry, kept behind the content. */
.about-section[b-xojgdugzg8],
.services[b-xojgdugzg8],
.stats-cta-section[b-xojgdugzg8],
.steps-section[b-xojgdugzg8],
.final-cta.brand-bg[b-xojgdugzg8] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.about-container[b-xojgdugzg8], .services-header[b-xojgdugzg8], .services-grid[b-xojgdugzg8], .stats-cta-card[b-xojgdugzg8], .steps-container[b-xojgdugzg8], .final-cta-container[b-xojgdugzg8] {
    position: relative;
    z-index: 1;
}

.about-section[b-xojgdugzg8]::before, .about-section[b-xojgdugzg8]::after,
.services[b-xojgdugzg8]::before, .services[b-xojgdugzg8]::after,
.stats-cta-section[b-xojgdugzg8]::before, .stats-cta-section[b-xojgdugzg8]::after,
.steps-section[b-xojgdugzg8]::before, .steps-section[b-xojgdugzg8]::after,
.final-cta.brand-bg[b-xojgdugzg8]::before, .final-cta.brand-bg[b-xojgdugzg8]::after {
    position: absolute;
    z-index: 0;
    content: "";
    pointer-events: none;
}

.about-section[b-xojgdugzg8]::before {
    top: 12%; right: 2%; width: 86px; height: 86px;
    border-top: 2px solid rgba(20, 184, 166, .35);
    border-right: 2px solid rgba(20, 184, 166, .35);
    box-shadow: 10px -10px 0 -8px rgba(20, 184, 166, .24), -10px 10px 0 -8px rgba(96, 165, 250, .2);
}
.about-section[b-xojgdugzg8]::after {
    bottom: 8%; left: -5rem; width: 240px; height: 150px;
    background: radial-gradient(ellipse, rgba(20, 184, 166, .12), transparent 70%);
}

.services[b-xojgdugzg8]::before {
    top: 0; right: 0; width: 190px; height: 150px;
    background-image: linear-gradient(rgba(20, 184, 166, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 184, 166, .08) 1px, transparent 1px);
    background-size: 20px 20px;
    mask-image: linear-gradient(135deg, #000, transparent 78%);
}
.services[b-xojgdugzg8]::after {
    right: 8%; bottom: 1.5rem; width: 34px; height: 34px;
    background: linear-gradient(45deg, transparent 43%, rgba(20, 184, 166, .38) 44% 56%, transparent 57%), linear-gradient(-45deg, transparent 43%, rgba(20, 184, 166, .38) 44% 56%, transparent 57%);
}

.stats-cta-section[b-xojgdugzg8]::before {
    top: 0; right: 0; width: 34%; height: 100%;
    background: repeating-linear-gradient(135deg, transparent 0 16px, rgba(45, 212, 191, .08) 16px 17px, transparent 17px 34px);
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
}
.stats-cta-section[b-xojgdugzg8]::after {
    top: 1.25rem; right: 5%; width: 24px; height: 24px;
    border: 2px solid rgba(153, 246, 228, .55);
    transform: rotate(45deg);
}

.steps-section[b-xojgdugzg8]::before {
    top: 2rem; right: 6%; width: 116px; height: 2px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 8px, transparent 8px 15px);
}
.steps-section[b-xojgdugzg8]::after {
    right: 7%; bottom: 2rem; width: 18px; height: 18px;
    border: 2px solid rgba(255, 255, 255, .42); border-radius: 4px;
    box-shadow: 9px 0 0 -6px rgba(255, 255, 255, .5), 18px 0 0 -6px rgba(255, 255, 255, .3);
    transform: rotate(12deg);
}

.final-cta.brand-bg[b-xojgdugzg8]::before {
    top: 0; left: 0; width: 36%; height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 22px);
    background-size: 22px 22px;
    clip-path: polygon(0 0, 75% 0, 100% 100%, 0 100%);
    mask-image: linear-gradient(90deg, #000, transparent);
}
.final-cta.brand-bg[b-xojgdugzg8]::after {
    right: 5%; bottom: 12%; width: 48px; height: 48px;
    background: linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, .34) 47% 53%, transparent 54%), linear-gradient(0deg, transparent 46%, rgba(255, 255, 255, .34) 47% 53%, transparent 54%);
    transform: rotate(45deg);
}

@media (max-width: 700px) {
    .about-section[b-xojgdugzg8]::before { top: 1rem; right: 1rem; width: 48px; height: 48px; }
    .about-section[b-xojgdugzg8]::after { left: -7rem; width: 180px; height: 110px; }
    .services[b-xojgdugzg8]::before { width: 130px; height: 110px; background-size: 16px 16px; }
    .services[b-xojgdugzg8]::after { right: 1rem; bottom: 1rem; width: 24px; height: 24px; }
    .stats-cta-section[b-xojgdugzg8]::before { width: 48%; }
    .stats-cta-section[b-xojgdugzg8]::after { top: .75rem; right: 1rem; width: 18px; height: 18px; }
    .steps-section[b-xojgdugzg8]::before { top: 1rem; right: 1rem; width: 55px; }
    .steps-section[b-xojgdugzg8]::after { right: 1rem; bottom: 1rem; width: 13px; height: 13px; }
    .final-cta.brand-bg[b-xojgdugzg8]::before { width: 60%; background-size: 16px 16px; }
    .final-cta.brand-bg[b-xojgdugzg8]::after { right: 1rem; bottom: 1rem; width: 34px; height: 34px; }
}

@media (max-width: 420px) {
    .about-section[b-xojgdugzg8]::before { width: 36px; height: 36px; }
    .services[b-xojgdugzg8]::before { width: 96px; height: 92px; }
    .stats-cta-section[b-xojgdugzg8]::before { width: 35%; }
    .steps-section[b-xojgdugzg8]::before { width: 42px; }
    .final-cta.brand-bg[b-xojgdugzg8]::before { width: 74%; }
    .final-cta.brand-bg[b-xojgdugzg8]::after { width: 26px; height: 26px; }
}
/* /Pages/Public/TermsofService.razor.rz.scp.css */
.tos-hero[b-rtnjct7buw] {
    background: linear-gradient(180deg, #f8fffe 0%, #ffffff 100%);
    padding: 40px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.tos-hero-content[b-rtnjct7buw] {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.tos-hero h1[b-rtnjct7buw] {
    margin: 0 0 15px;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: #008080;
    line-height: 1.2;
}

.tos-hero p[b-rtnjct7buw] {
    max-width: 700px;
    margin: 0 auto 20px;
    color: #6b7280;
    font-size: 1.05rem;
    line-height: 1.8;
}

.breadcrumb[b-rtnjct7buw] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.breadcrumb a[b-rtnjct7buw] {
    color: #008080;
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
}

.breadcrumb a:hover[b-rtnjct7buw] {
    color: #14B8A6;
}

.breadcrumb span[b-rtnjct7buw] {
    color: #94a3b8;
}

.breadcrumb .current[b-rtnjct7buw] {
    color: #475569;
    font-weight: 600;
}

.tos-content[b-rtnjct7buw] {
    padding: 70px 20px;
    background: #ffffff;
}

.tos-container[b-rtnjct7buw] {
    max-width: 1100px;
    margin: 0 auto;
}

.tos-section[b-rtnjct7buw] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 35px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.tos-section h2[b-rtnjct7buw] {
    margin: 0 0 20px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #008080;
}

.tos-section p[b-rtnjct7buw] {
    margin-bottom: 16px;
    color: #4b5563;
    line-height: 1.9;
}

.tos-section strong[b-rtnjct7buw] {
    color: #111827;
    font-weight: 600;
}

.tos-section ul[b-rtnjct7buw] {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.tos-section ul li[b-rtnjct7buw] {
    position: relative;
    padding: 16px 18px 16px 55px;
    margin-bottom: 12px;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    background: #fafcfc;
    color: #4b5563;
    line-height: 1.8;
}

.tos-section ul li[b-rtnjct7buw]::before {
    content: "✓";
    position: absolute;
    left: 18px;
    top: 17px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(20,184,166,0.12);
    color: #008080;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tos-section ol[b-rtnjct7buw] {
    counter-reset: section-counter;
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.tos-section ol > li[b-rtnjct7buw] {
    counter-increment: section-counter;
    position: relative;
    padding: 18px 20px 18px 60px;
    margin-bottom: 15px;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    background: #fafcfc;
}

.tos-section ol > li[b-rtnjct7buw]::before {
    content: counter(section-counter);
    position: absolute;
    left: 18px;
    top: 18px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #008080;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tos-section li h2[b-rtnjct7buw] {
    font-size: 1.15rem;
    margin-bottom: 10px;
    color: #008080;
}

#no-return-policy[b-rtnjct7buw] {
    border-left: 5px solid #f59e0b;
    background: #fffdf8;
}

#no-return-policy h2[b-rtnjct7buw] {
    color: #d97706;
}

#no-return-policy ul li[b-rtnjct7buw] {
    background: #fff;
}

.tos-section a[b-rtnjct7buw] {
    color: #008080;
    text-decoration: none;
    font-weight: 500;
}

.tos-section a:hover[b-rtnjct7buw] {
    text-decoration: underline;
}

#no-return-policy[b-rtnjct7buw] {
    scroll-margin-top: 100px;
}

@media (max-width: 991px) {

    .tos-content[b-rtnjct7buw] {
        padding: 50px 20px;
    }

    .tos-section[b-rtnjct7buw] {
        padding: 28px;
    }
}

@media (max-width: 768px) {

    .tos-hero[b-rtnjct7buw] {
        padding: 60px 15px;
    }

    .tos-content[b-rtnjct7buw] {
        padding: 40px 15px;
    }

    .tos-section[b-rtnjct7buw] {
        padding: 22px;
        border-radius: 12px;
    }

    .tos-section h2[b-rtnjct7buw] {
        font-size: 1.25rem;
    }

    .tos-section ul li[b-rtnjct7buw],
    .tos-section ol > li[b-rtnjct7buw] {
        padding-left: 50px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {

    .tos-hero h1[b-rtnjct7buw] {
        font-size: 2rem;
    }

    .tos-hero p[b-rtnjct7buw] {
        font-size: 0.95rem;
    }

    .tos-section[b-rtnjct7buw] {
        padding: 18px;
    }

    .tos-section p[b-rtnjct7buw],
    .tos-section li[b-rtnjct7buw] {
        font-size: 0.9rem;
    }
}