@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
:root {
    --font1: 'Inter', sans-serif;
    --font2: 'DM Sans', sans-serif;
    --font3: 'Poppins', sans-serif;
    --font4: 'Roboto', Arial, sans-serif;
    --font5: 'Nunito Sans', sans-serif;
}

html {
    font-family: var(--font1);
}

body {
    font-family: inherit;
}

button,
input,
select,
textarea,
optgroup,
option {
    font-family: inherit;
}

input::placeholder,
textarea::placeholder {
    font-family: inherit;
}

:where(
    .overflow-x-auto,
    [class*="table-wrap"],
    [class*="TableWrap"]
) {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.22) transparent;
}

:where(
    .overflow-x-auto,
    [class*="table-wrap"],
    [class*="TableWrap"]
)::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}

:where(
    .overflow-x-auto,
    [class*="table-wrap"],
    [class*="TableWrap"]
)::-webkit-scrollbar-track {
    background: transparent;
}

:where(
    .overflow-x-auto,
    [class*="table-wrap"],
    [class*="TableWrap"]
)::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.22);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

:where(
    .overflow-x-auto,
    [class*="table-wrap"],
    [class*="TableWrap"]
)::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.34);
    border: 2px solid transparent;
    background-clip: padding-box;
}

:where(
    .overflow-x-auto,
    [class*="table-wrap"],
    [class*="TableWrap"]
)::-webkit-scrollbar-corner {
    background: transparent;
}

html[data-theme="light"] :where(
    .filter-tab.active,
    .wf-tab.active,
    .vw-tab.active,
    .lm-mode-tab.active,
    .export-format-btn.selected,
    .vw-export-format-btn.selected,
    .int-filter-tab.active,
    .ew-tab-btn.active,
    .ew-payload-tab.selected,
    .ew-integration-btn.selected,
    .ew-sheet-item.selected,
    .st-open-btn.active,
    .ha-series-btn.active
) {
    background: #dbe5ff !important;
    border-color: #9db4ff !important;
    color: #3158e8 !important;
    box-shadow: inset 0 0 0 1px rgba(79,111,255,0.12) !important;
}

html[data-theme="light"] :where(
    .ha-series-btn.active-green,
    .wf-status-active,
    .ha-status-qualified,
    .ha-status-active
) {
    background: #d8f7ea !important;
    border-color: #78dfbd !important;
    color: #0f9f73 !important;
    box-shadow: inset 0 0 0 1px rgba(15,159,115,0.10) !important;
}

html[data-theme="light"] :where(
    .ha-series-btn.active-red
) {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
}

html[data-theme="light"] :where(
    .wf-tab.active .wf-tab-count
) {
    background: rgba(49,88,232,0.18) !important;
    color: #3158e8 !important;
}

html[data-theme="light"] :where(
    .st-btn-danger,
    .ew-btn-danger,
    .ew-btn-xs-red,
    .int-btn-danger,
    .aic-btn-danger,
    .lif-btn-danger,
    .adm-btn-danger,
    .notif-action-btn.danger,
    .ld-modal-confirm.danger,
    .ld-msg-menu-item.danger,
    button[onclick*="DeleteAccount"],
    button[onclick*="deleteWorkflow"],
    button[onclick*="confirmDelete"],
    button[onclick*="deleteSelectedSheet"]
) {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
    box-shadow: inset 0 0 0 1px rgba(220,38,38,0.08) !important;
}

html[data-theme="light"] :where(
    .st-btn-danger,
    .ew-btn-danger,
    .ew-btn-xs-red,
    .int-btn-danger,
    .aic-btn-danger,
    .lif-btn-danger,
    .adm-btn-danger,
    .notif-action-btn.danger,
    button[onclick*="DeleteAccount"],
    button[onclick*="deleteWorkflow"],
    button[onclick*="confirmDelete"],
    button[onclick*="deleteSelectedSheet"]
):hover {
    background: #fecaca !important;
    border-color: #f87171 !important;
    color: #b91c1c !important;
}

html[data-theme="light"] :where(
    .st-btn-blue,
    .vw-btn-purple,
    .vw-view-btn,
    .st-open-btn,
    .aic-btn-sm:not(.aic-btn-danger),
    .ew-btn-secondary,
    .st-btn-secondary,
    .int-btn-secondary,
    .sp-btn-secondary,
    .utility-duplicate-btn,
    .lm-action-btn,
    .lm-filter-btn
) {
    background: #dbe5ff !important;
    border-color: #9db4ff !important;
    color: #3158e8 !important;
    box-shadow: inset 0 0 0 1px rgba(79,111,255,0.10) !important;
}

html[data-theme="light"] :where(
    .st-btn-blue,
    .vw-btn-purple,
    .vw-view-btn,
    .st-open-btn,
    .aic-btn-sm:not(.aic-btn-danger),
    .ew-btn-secondary,
    .st-btn-secondary,
    .int-btn-secondary,
    .sp-btn-secondary,
    .utility-duplicate-btn,
    .lm-action-btn,
    .lm-filter-btn
):hover {
    background: #c7d5ff !important;
    border-color: #7f9dff !important;
    color: #2447c6 !important;
}

html[data-theme="light"] :where(
    .st-badge-muted,
    .ew-header-pill,
    .vw-variant-badge,
    .st-variant-badge,
    .bll-plan-badge,
    .bll-badge
) {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

html[data-theme="light"] :where(
    .st-badge-green,
    .ew-webhook-status-badge.good
) {
    background: #d8f7ea !important;
    border-color: #78dfbd !important;
    color: #0f9f73 !important;
}

html[data-theme="light"] :where(
    .ha-help,
    .vw-help,
    .ld-help,
    .lm-help,
    .sp-help,
    [class*="help"]
) {
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] :where(
    .ha-help-tip,
    .vw-help-tip,
    .ld-help-tip,
    .lm-help-tip,
    [class*="tooltip"],
    [class*="help-tip"]
) {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
    box-shadow: 0 16px 36px rgba(15,23,42,0.16) !important;
}

html[data-theme="light"] :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    textarea,
    select,
    .form-input,
    .int-input,
    .int-select,
    .int-textarea,
    .ew-input,
    .ew-select,
    .ew-textarea,
    .nw-input,
    .nw-select,
    .nw-textarea,
    .st-input,
    .st-select,
    .st-textarea,
    .settings-input,
    .aic-input,
    .aic-select,
    .lm-page .form-input,
    .ew-rotation-select
) {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,0.02) !important;
}

html[data-theme="light"] :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    textarea,
    select,
    .form-input,
    .int-input,
    .int-select,
    .int-textarea,
    .ew-input,
    .ew-select,
    .ew-textarea,
    .nw-input,
    .nw-select,
    .nw-textarea,
    .st-input,
    .st-select,
    .st-textarea,
    .settings-input,
    .aic-input,
    .aic-select,
    .lm-page .form-input,
    .ew-rotation-select
):focus {
    border-color: #7f9dff !important;
    box-shadow: 0 0 0 3px rgba(79,111,255,0.14), inset 0 0 0 1px rgba(79,111,255,0.08) !important;
}

html[data-theme="light"] :where(input, textarea)::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"] :where(select option) {
    background: #ffffff !important;
    color: #0f172a !important;
}

html[data-theme="light"] :where(
    .int-modal,
    .int-qr-box,
    .ew-modal,
    .vw-export-modal,
    .sp-modal-card,
    .ob-popup,
    #modalContent
) {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 28px 80px rgba(15,23,42,0.18) !important;
}

html[data-theme="light"] :where(
    .int-modal-head,
    .int-modal-foot,
    .ew-modal-head,
    .ew-modal-foot,
    .vw-export-modal-head,
    .sp-modal-head,
    .ob-popup-head,
    .ob-popup-foot
) {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html[data-theme="light"] :where(
    .int-modal-body,
    .ew-modal-body,
    .vw-export-modal-body,
    .sp-modal-body
) {
    background: #ffffff !important;
    color: #0f172a !important;
}

html[data-theme="light"] :where(
    .int-modal-title,
    .ew-modal-title,
    .vw-export-modal-title,
    .sp-modal-title,
    .ob-popup-title
) {
    color: #0f172a !important;
}

html[data-theme="light"] :where(
    .int-modal-close,
    .ew-modal-close,
    .vw-export-close,
    .sp-close
) {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

html[data-theme="light"] :where(
    .int-modal-close,
    .ew-modal-close,
    .vw-export-close,
    .sp-close
):hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

html[data-theme="light"] :where(
    .vw-export-card,
    .ew-rotation-card,
    .ew-rotation-stat,
    .ew-rotation-detach
) {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

html[data-theme="light"] #exportModal {
    background: rgba(15,23,42,0.28) !important;
    --ha-card: #ffffff !important;
    --ha-border: #cbd5e1 !important;
    --ha-blue: #4f6fff !important;
    --ha-blue-s: rgba(79,111,255,0.12) !important;
    --ha-green: #0f9f73 !important;
    --ha-t1: #0f172a !important;
    --ha-t2: #475569 !important;
    --ha-t3: #64748b !important;
}

.app-toast-container {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}

.app-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    min-width: min(260px, calc(100vw - 32px));
    padding: 14px 18px;
    border: 1px solid var(--app-toast-border);
    border-radius: 14px;
    background: var(--app-toast-bg);
    color: var(--app-toast-fg);
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    backdrop-filter: blur(14px);
    font-size: 13px;
    font-family: inherit;
    pointer-events: auto;
    animation: app-toast-in .22s cubic-bezier(.34,1.56,.64,1);
}

.app-toast--leaving {
    animation: app-toast-out .2s ease forwards;
}

.app-toast--success {
    --app-toast-bg: rgba(9,33,29,.96);
    --app-toast-border: rgba(31,214,140,.44);
    --app-toast-fg: #6fffd4;
    --app-toast-title-fg: #eef0f8;
    --app-toast-icon-bg: rgba(31,214,140,.18);
}

.app-toast--error {
    --app-toast-bg: rgba(38,18,23,.96);
    --app-toast-border: rgba(248,113,113,.48);
    --app-toast-fg: #fca5a5;
    --app-toast-title-fg: #fff1f2;
    --app-toast-icon-bg: rgba(248,113,113,.18);
}

.app-toast--info {
    --app-toast-bg: rgba(16,22,45,.96);
    --app-toast-border: rgba(79,111,255,.48);
    --app-toast-fg: #a5b8ff;
    --app-toast-title-fg: #eef0f8;
    --app-toast-icon-bg: rgba(79,111,255,.18);
}

.app-toast--warning {
    --app-toast-bg: rgba(41,29,10,.96);
    --app-toast-border: rgba(251,191,36,.5);
    --app-toast-fg: #fcd34d;
    --app-toast-title-fg: #fff7ed;
    --app-toast-icon-bg: rgba(251,191,36,.2);
}

.app-toast__icon {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--app-toast-fg);
    background: var(--app-toast-icon-bg);
}

.app-toast__icon-svg {
    width: 11px;
    height: 11px;
}

.app-toast__body {
    flex: 1;
    min-width: 0;
    line-height: 1.5;
}

.app-toast__title {
    color: var(--app-toast-title-fg, var(--t1, #eef0f8));
    font-weight: 600;
    margin-bottom: 2px;
}

.app-toast__message {
    color: var(--app-toast-fg);
    overflow-wrap: anywhere;
}

.app-toast__close {
    flex-shrink: 0;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--t3, #5a6480);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: color .15s ease;
}

.app-toast__close:hover {
    color: var(--app-toast-title-fg, var(--t1, #eef0f8));
}

html[data-theme="light"] .app-toast {
    box-shadow: 0 16px 36px rgba(15,23,42,.18);
}

html[data-theme="light"] .app-toast--success {
    --app-toast-bg: #dcfce7;
    --app-toast-border: #16a34a;
    --app-toast-fg: #047857;
    --app-toast-title-fg: #064e3b;
    --app-toast-icon-bg: rgba(22,163,74,.16);
}

html[data-theme="light"] .app-toast--error {
    --app-toast-bg: #fee2e2;
    --app-toast-border: #dc2626;
    --app-toast-fg: #b91c1c;
    --app-toast-title-fg: #7f1d1d;
    --app-toast-icon-bg: rgba(220,38,38,.14);
}

html[data-theme="light"] .app-toast--info {
    --app-toast-bg: #dbeafe;
    --app-toast-border: #2563eb;
    --app-toast-fg: #1d4ed8;
    --app-toast-title-fg: #1e3a8a;
    --app-toast-icon-bg: rgba(37,99,235,.14);
}

html[data-theme="light"] .app-toast--warning {
    --app-toast-bg: #fef3c7;
    --app-toast-border: #d97706;
    --app-toast-fg: #92400e;
    --app-toast-title-fg: #78350f;
    --app-toast-icon-bg: rgba(217,119,6,.16);
}

@keyframes app-toast-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes app-toast-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(8px);
    }
}

@media (max-width: 640px) {
    .app-toast-container {
        right: 16px;
        bottom: 16px;
        width: calc(100vw - 32px);
    }
}