.fb-region {
    position: fixed;
    z-index: 1090;
    inset-block-start: calc(88px + env(safe-area-inset-top, 0px));
    inset-inline-end: max(16px, env(safe-area-inset-right, 0px));
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
.fb-stack { display: flex; flex-direction: column; gap: 8px; }
.fb-toast {
    --fb-accent: var(--primary-color, #2E4220);
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-surface, #fff);
    color: var(--color-text, #212529);
    border: 1px solid color-mix(in srgb, var(--fb-accent) 22%, #e1e1e1);
    border-inline-start: 4px solid var(--fb-accent);
    border-radius: var(--radius-sm, 8px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    font-size: 0.92rem;
    line-height: 1.4;
    animation: fbIn 0.18s ease-out both;
}
.fb-toast--error { --fb-accent: var(--color-danger, #dc3545); background: color-mix(in srgb, var(--fb-accent) 5%, #fff); }
.fb-toast--info { --fb-accent: #2563eb; }
.fb-toast.is-leaving { animation: fbOut 0.16s ease-in both; }
.fb-icon { flex: none; font-size: var(--icon-md, 1rem); line-height: 1.4; width: 1.1em; text-align: center; color: var(--fb-accent); margin-block-start: 2px; }
.fb-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fb-close {
    flex: none;
    width: 28px; height: 28px;
    margin: -4px 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: transparent; color: inherit; opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
.fb-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }
.fb-close:focus-visible { opacity: 1; outline: 2px solid var(--fb-accent); outline-offset: 1px; }

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

.fb-dialog {
    width: min(420px, calc(100vw - 32px));
    padding: 22px;
    border: 0;
    border-radius: var(--radius-md, 12px);
    background: var(--color-surface, #fff);
    color: var(--color-text, #212529);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    overscroll-behavior: contain;
}
.fb-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.fb-dialog-title { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; }
.fb-dialog-text { margin: 0 0 18px; color: var(--color-text-muted, #6c757d); }
.fb-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.fb-btn {
    min-height: 40px; padding: 8px 18px;
    border-radius: var(--radius-pill, 50px);
    border: 1px solid var(--color-border, #e1e1e1);
    background: #fff; color: inherit; font-weight: 600; cursor: pointer;
    transition: background-color 0.15s ease, transform 0.12s ease;
}
.fb-btn:active { transform: scale(0.97); }
.fb-btn:focus-visible { outline: 2px solid var(--color-primary, #2E4220); outline-offset: 2px; }
.fb-btn--confirm { background: var(--color-primary, #2E4220); border-color: transparent; color: var(--on-primary, #fff); }
.fb-btn--danger { background: var(--color-danger, #dc3545); border-color: transparent; color: #fff; }

.fb-inline-error { color: var(--color-danger, #dc3545); font-size: 0.88rem; margin: 0 0 10px; }
.fb-inline-error[hidden] { display: none; }

@keyframes fbIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes fbOut { to { opacity: 0; transform: translateY(-4px); } }

@media (max-width: 767px) {
    .fb-region {
        inset-block-start: auto;
        inset-block-end: calc(88px + env(safe-area-inset-bottom, 0px));
        inset-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
        width: auto;
    }
    .fb-toast { animation-name: fbInUp; }
}
@keyframes fbInUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .fb-toast, .fb-toast.is-leaving { animation-duration: 0.01ms; }
    .fb-close, .fb-btn { transition: none; }
    .fb-btn:active { transform: none; }
}

/* ---------- Empty states ---------- */
.es {
    --es-accent: var(--p, var(--primary-color, #2E4220));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 30rem;
    margin: 2.5rem auto;
    padding: 2.5rem 1.5rem;
    background: var(--color-surface, #fff);
    border: 1px solid color-mix(in srgb, var(--es-accent) 14%, var(--color-border, #e1e1e1));
    border-radius: var(--radius-lg, 16px);
}
.es--compact { margin: 1rem auto; padding: 1.75rem 1rem; border: 0; background: transparent; }
.es-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.5rem; height: 3.5rem; margin-block-end: 1rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--es-accent) 10%, transparent);
    color: var(--es-accent);
    font-size: var(--icon-lg, 1.25rem);
}
.es--compact .es-icon { width: 3rem; height: 3rem; margin-block-end: 0.75rem; }
.es-title { margin: 0 0 0.4rem; font-size: var(--text-lg, 1.125rem); font-weight: var(--weight-semibold, 600); color: var(--color-text, #212529); }
.es-text { margin: 0; max-width: 24rem; font-size: var(--text-sm, 0.9375rem); color: var(--color-text-muted, #6c757d); overflow-wrap: anywhere; }
.es-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-block-start: 1.4rem; }
.es-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 42px; padding: 0.5rem 1.25rem;
    border-radius: var(--radius-pill, 50px);
    border: 1px solid color-mix(in srgb, var(--es-accent) 30%, var(--color-border, #e1e1e1));
    background: transparent; color: var(--es-accent);
    font-size: var(--text-sm, 0.9375rem); font-weight: var(--weight-semibold, 600); line-height: 1.2;
    text-decoration: none !important; cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.es-btn:hover { background: color-mix(in srgb, var(--es-accent) 8%, transparent); color: var(--es-accent); }
.es-btn:active { transform: scale(0.98); }
.es-btn:focus-visible { outline: 2px solid var(--es-accent); outline-offset: 2px; }
.es-btn--primary { background: var(--es-accent); border-color: var(--es-accent); color: #fff; }
.es-btn--primary:hover { background: var(--es-accent); color: #fff; filter: brightness(1.08); }
.es-btn i { font-size: var(--icon-md, 1rem); }
[dir="rtl"] .es-btn .fa-arrow-left { transform: scaleX(-1); }
@media (max-width: 575px) {
    .es { margin-block: 1.5rem; padding: 2rem 1.1rem; }
    .es-actions { flex-direction: column; align-self: stretch; }
    .es-btn { width: 100%; }
}

/* ---------- Loading skeletons ---------- */
.sk-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.25rem; }
.sk-dot, .sk-line {
    background: color-mix(in srgb, var(--color-text, #212529) 8%, transparent);
    border-radius: 6px;
    animation: skPulse 1.4s ease-in-out infinite;
}
.sk-dot { flex: none; width: 2rem; height: 2rem; border-radius: 50%; }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.sk-line { height: 0.65rem; width: 70%; }
.sk-line--short { width: 40%; }
.sk-amount { flex: none; width: 3.5rem; height: 0.8rem; }
@keyframes skPulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
    .sk-dot, .sk-line { animation: none; }
}