:root {
    --app-toast-success: #10b981;
    --app-toast-error: #ef4444;
    --app-toast-warning: #f59e0b;
    --app-toast-info: #3b82f6;
    --app-toast-dark: #0f172a;
}

.app-feedback-inline {
    position: relative;
    z-index: 40;
    width: min(100%, 1140px);
    margin: 0 auto 16px auto;
    padding-inline: 12px;
}

.app-feedback-alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 18px 15px 14px;
    border-radius: 18px;
    margin-bottom: 12px;
    border: 1px solid rgba(148, 163, 184, .28);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .07);
    background: linear-gradient(180deg, #fff, #f8fafc);
    color: #111827;
    direction: rtl;
    line-height: 1.9;
    overflow: hidden;
    animation: appAlertEnter .26s ease both;
}

.app-feedback-alert__stripe {
    position: absolute;
    inset-block: 0;
    right: 0;
    width: 6px;
}

.app-feedback-alert strong { font-weight: 900; }
.app-feedback-alert p { margin: 2px 0 0; color: #475569; }
.app-feedback-alert__icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    flex: 0 0 auto;
    color: #fff;
    font-size: 17px;
    margin-top: 2px;
    box-shadow: 0 9px 18px rgba(15, 23, 42, .16);
}

.app-feedback-alert__body { flex: 1 1 auto; min-width: 0; padding-right: 4px; }
.app-feedback-alert__close {
    border: 0;
    background: #eef2f7;
    color: #64748b;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.app-feedback-alert--success { border-color: rgba(16, 185, 129, .28); }
.app-feedback-alert--error { border-color: rgba(239, 68, 68, .30); }
.app-feedback-alert--warning { border-color: rgba(245, 158, 11, .32); }
.app-feedback-alert--info { border-color: rgba(59, 130, 246, .28); }
.app-feedback-alert--success .app-feedback-alert__stripe,
.app-feedback-alert--success .app-feedback-alert__icon { background: var(--app-toast-success); }
.app-feedback-alert--error .app-feedback-alert__stripe,
.app-feedback-alert--error .app-feedback-alert__icon { background: var(--app-toast-error); }
.app-feedback-alert--warning .app-feedback-alert__stripe,
.app-feedback-alert--warning .app-feedback-alert__icon { background: var(--app-toast-warning); }
.app-feedback-alert--info .app-feedback-alert__stripe,
.app-feedback-alert--info .app-feedback-alert__icon { background: var(--app-toast-info); }

.app-toast-stack {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 2147483600;
    width: min(430px, calc(100vw - 28px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.app-toast-stack[data-position="top-right"] { right: 18px; left: auto; }
.app-toast-stack[data-position="bottom-left"] { top: auto; bottom: 18px; }
.app-toast-stack[data-position="bottom-right"] { top: auto; bottom: 18px; left: auto; right: 18px; }

.app-toast {
    --app-toast-accent: var(--app-toast-info);
    pointer-events: auto;
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 12px;
    align-items: flex-start;
    padding: 15px 15px 17px;
    border-radius: 22px;
    background: rgba(15, 23, 42, .96);
    color: #fff;
    backdrop-filter: blur(18px);
    box-shadow: 0 26px 64px rgba(15, 23, 42, .36);
    border: 1px solid rgba(255, 255, 255, .12);
    direction: rtl;
    opacity: 0;
    transform: translateX(-24px) translateY(-10px) scale(.97);
    transition: opacity .24s ease, transform .24s ease;
    overflow: hidden;
}

.app-toast__glow {
    position: absolute;
    inset: -28px auto auto -28px;
    width: 110px;
    height: 110px;
    border-radius: 999px;
    background: var(--app-toast-accent);
    opacity: .22;
    filter: blur(20px);
}

.app-toast.is-visible { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
.app-toast.is-leaving { opacity: 0; transform: translateX(-18px) translateY(-6px) scale(.98); }

.app-toast__icon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 19px;
    background: var(--app-toast-accent);
    box-shadow: 0 13px 26px rgba(15, 23, 42, .24);
    position: relative;
    z-index: 1;
}

.app-toast--success { --app-toast-accent: var(--app-toast-success); }
.app-toast--error { --app-toast-accent: var(--app-toast-error); }
.app-toast--warning { --app-toast-accent: var(--app-toast-warning); }
.app-toast--info { --app-toast-accent: var(--app-toast-info); }

.app-toast__content { min-width: 0; position: relative; z-index: 1; }
.app-toast__title { font-weight: 900; color: #fff; margin: 0 0 4px 0; font-size: .98rem; }
.app-toast__text { color: rgba(255,255,255,.80); margin: 0; line-height: 1.85; font-size: .92rem; }
.app-toast__close {
    border: 0;
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.86);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    width: 30px;
    height: 30px;
    border-radius: 11px;
    position: relative;
    z-index: 1;
}
.app-toast__close:hover { background: rgba(255,255,255,.18); }

.app-toast__progress {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, transparent, var(--app-toast-accent));
    transform-origin: right;
    animation: appToastProgress var(--app-toast-timer, 7400ms) linear forwards;
}

.app-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483650;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    direction: rtl;
    opacity: 0;
    transition: opacity .18s ease;
}
.app-confirm-overlay.is-visible { opacity: 1; }
.app-confirm-overlay.is-leaving { opacity: 0; }

.app-confirm-card {
    width: min(94vw, 470px);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(15, 23, 42, .34);
    padding: 24px;
    transform: translateY(14px) scale(.98);
    transition: transform .22s ease;
}
.app-confirm-overlay.is-visible .app-confirm-card { transform: translateY(0) scale(1); }

.app-confirm-icon {
    width: 50px;
    height: 50px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    color: #fff;
    font-size: 22px;
    margin-bottom: 12px;
}
.app-confirm-card--success .app-confirm-icon { background: var(--app-toast-success); }
.app-confirm-card--error .app-confirm-icon { background: var(--app-toast-error); }
.app-confirm-card--warning .app-confirm-icon { background: var(--app-toast-warning); }
.app-confirm-card--info .app-confirm-icon { background: var(--app-toast-info); }

.app-confirm-card h3 { font-size: 1.16rem; font-weight: 900; color: #111827; margin: 0 0 8px 0; }
.app-confirm-card p { color: #475569; line-height: 1.9; margin: 0 0 16px 0; }
.app-confirm-input { width: 100%; border: 1px solid #dbe3ef; border-radius: 14px; padding: 11px 13px; margin-bottom: 16px; outline: none; }
.app-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.app-confirm-btn { border: 0; border-radius: 14px; padding: 10px 18px; cursor: pointer; font-weight: 900; }
.app-confirm-btn--confirm { background: #2563eb; color: #fff; }
.app-confirm-btn--cancel { background: #eef2f7; color: #334155; }

@keyframes appAlertEnter { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes appToastProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 576px) {
    .app-toast-stack { top: 12px; left: 10px; right: 10px; width: auto; }
    .app-toast { grid-template-columns: 38px 1fr auto; border-radius: 19px; padding: 13px 13px 16px; }
    .app-toast__icon { width: 38px; height: 38px; border-radius: 14px; }
    .app-feedback-alert { border-radius: 16px; padding: 13px 15px; }
    .app-confirm-actions { flex-direction: column-reverse; }
    .app-confirm-btn { width: 100%; }
}

/* V5 feedback refinements */
.app-toast-stack {
    top: max(16px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
}

.app-toast::before {
    content: "";
    position: absolute;
    inset-block: 12px;
    right: 0;
    width: 4px;
    border-radius: 999px 0 0 999px;
    background: var(--app-toast-accent);
    box-shadow: 0 0 18px var(--app-toast-accent);
}

.app-toast__title { letter-spacing: -.15px; }
.app-toast__text { max-height: 88px; overflow: auto; padding-left: 4px; }
.app-toast__text::-webkit-scrollbar { width: 4px; }
.app-toast__text::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 999px; }

.app-feedback-alert {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .055);
}

.app-feedback-alert::after {
    content: "";
    position: absolute;
    inset-inline: 18px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, .34), transparent);
}

@media (max-width: 576px) {
    .app-toast-stack {
        top: auto;
        bottom: calc(12px + env(safe-area-inset-bottom));
        left: 10px;
        right: 10px;
    }
    .app-toast { transform: translateY(18px) scale(.98); }
    .app-toast.is-visible { transform: translateY(0) scale(1); }
    .app-toast.is-leaving { transform: translateY(14px) scale(.98); }
}

@media (prefers-reduced-motion: reduce) {
    .app-toast,
    .app-feedback-alert,
    .app-confirm-overlay,
    .app-confirm-card,
    .app-toast__progress {
        animation: none !important;
        transition: none !important;
    }
}

/* V6: lightweight reusable loading state for Ajax buttons */
.app-btn-loading {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    pointer-events: none;
    opacity: .82;
}

.app-btn-spinner {
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: appBtnSpin .75s linear infinite;
}

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

.badge.d-none,
.notification-count.d-none {
    display: none !important;
}

/* V8: login page feedback isolation and centered toast placement */
.app-toast-stack[data-position="top-center"] {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.app-toast-stack[data-position="bottom-center"] {
    top: auto;
    bottom: 18px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

body.login-feedback-page .app-feedback-inline {
    display: none !important;
}

body.login-feedback-page .app-toast-stack {
    top: max(20px, env(safe-area-inset-top));
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%);
    width: min(430px, calc(100vw - 32px));
}

body.login-feedback-page .app-toast {
    transform: translateY(-14px) scale(.98);
}

body.login-feedback-page .app-toast.is-visible {
    transform: translateY(0) scale(1);
}

body.login-feedback-page .app-toast.is-leaving {
    transform: translateY(-10px) scale(.98);
}

.app-btn-loading {
    min-width: var(--app-btn-loading-width, auto);
    min-height: var(--app-btn-loading-height, auto);
    white-space: nowrap;
}

.app-btn-loading .app-btn-spinner:only-child {
    margin: 0;
}

@media (max-width: 576px) {
    .app-toast-stack[data-position="top-center"],
    .app-toast-stack[data-position="bottom-center"],
    body.login-feedback-page .app-toast-stack {
        left: 10px !important;
        right: 10px !important;
        transform: none;
        width: auto;
    }

    body.login-feedback-page .app-toast-stack {
        top: 12px;
        bottom: auto !important;
    }
}