.app-state {
    --app-state-accent: #2563eb;
    width: 100%;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 28px 20px;
    border: 1px dashed rgba(100, 116, 139, 0.34);
    border-radius: 16px;
    color: #475569;
    background: rgba(248, 250, 252, 0.86);
    text-align: center;
}

.app-state--compact {
    min-height: 100px;
    padding: 20px 14px;
}

.app-state--loading {
    --app-state-accent: #2563eb;
}

.app-state--empty {
    --app-state-accent: #64748b;
}

.app-state--error {
    --app-state-accent: #dc2626;
    border-color: rgba(220, 38, 38, 0.26);
    background: rgba(254, 242, 242, 0.9);
}

.app-state--success {
    --app-state-accent: #15803d;
    border-color: rgba(21, 128, 61, 0.24);
    background: rgba(240, 253, 244, 0.9);
}

.app-state__icon {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    color: var(--app-state-accent);
    background: color-mix(in srgb, var(--app-state-accent) 11%, white);
    font-size: 1.15rem;
}

.app-state__spinner {
    width: 22px;
    height: 22px;
    border: 3px solid color-mix(in srgb, var(--app-state-accent) 22%, transparent);
    border-top-color: var(--app-state-accent);
    border-radius: 50%;
    animation: appStateSpin 0.8s linear infinite;
}

.app-state__title {
    margin: 0;
    color: #1e293b;
    font-size: 1rem;
    font-weight: 850;
}

.app-state__message {
    max-width: 34rem;
    margin: 0;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.65;
}

.app-state__action {
    min-height: 42px;
    margin-top: 3px;
    padding: 8px 15px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: var(--app-state-accent);
    cursor: pointer;
    font-weight: 800;
}

.app-state__action:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--app-state-accent) 24%, transparent);
    outline-offset: 3px;
}

.app-ui-toast-region {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 22000;
    width: min(380px, calc(100vw - 32px));
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.app-ui-toast {
    --app-toast-accent: #2563eb;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-left: 4px solid var(--app-toast-accent);
    border-radius: 14px;
    color: #1e293b;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
    pointer-events: auto;
    animation: appToastIn 180ms ease-out both;
}

.app-ui-toast--success {
    --app-toast-accent: #16a34a;
}

.app-ui-toast--error {
    --app-toast-accent: #dc2626;
}

.app-ui-toast--warning {
    --app-toast-accent: #d97706;
}

.app-ui-toast__icon {
    color: var(--app-toast-accent);
    margin-top: 2px;
}

.app-ui-toast__message {
    min-width: 0;
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.55;
}

.app-ui-toast__close {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: 0;
    border-radius: 9px;
    color: #64748b;
    background: transparent;
    cursor: pointer;
}

.app-ui-toast__close:hover,
.app-ui-toast__close:focus-visible {
    color: #0f172a;
    background: #f1f5f9;
    outline: none;
}

@keyframes appStateSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes appToastIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 640px) {
    .app-ui-toast-region {
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-state__spinner,
    .app-ui-toast {
        animation-duration: 0.01ms !important;
    }
}