[x-cloak] { display: none !important; }

.alert-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    animation: alertFadeIn 0.2s ease-out;
}

.alert-dialog-container {
    background: var(--panel-card-bg, #ffffff);
    border: 1px solid var(--panel-card-border, #e5e7eb);
    border-radius: 16px;
    padding: 3rem 3.5rem 2.5rem;
    max-width: 520px;
    width: calc(100% - 3rem);
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
    animation: alertSlideIn 0.25s ease-out;
}

.alert-dialog-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert-svg { width: 80px; height: 80px; }
.alert-dialog-icon--confirm,
.alert-dialog-icon--loading,
.alert-dialog-icon--success { color: #22c55e; }
.alert-dialog-icon--confirm { animation: alertPulse 1.4s ease-in-out infinite; }
.alert-dialog-icon--error   { color: #ef4444; }
.alert-dialog-icon--info    { color: #3b82f6; }

.alert-svg--spin { animation: alertSpin 0.9s linear infinite; }

.alert-circle--animate {
    stroke-dasharray: 226;
    stroke-dashoffset: 226;
    animation: alertCircleDraw 0.5s ease-out forwards;
}
.alert-check--animate {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    animation: alertCheckDraw 0.4s 0.35s ease-out forwards;
}
.alert-x--animate {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: alertXDraw 0.4s 0.35s ease-out forwards;
}

.alert-dialog-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--panel-text-primary, #0f172a);
    margin: 0 0 0.5rem;
}

.alert-dialog-message {
    font-size: 1.05rem;
    color: var(--panel-text-muted, #64748b);
    margin: 0 0 2rem;
    line-height: 1.5;
}

.alert-dialog-actions { display: flex; justify-content: center; }
.alert-dialog-actions-row { display: flex; gap: 0.75rem; }

.alert-btn {
    padding: 0.7rem 1.6rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.alert-btn--primary {
    background: var(--panel-primary, #34076C);
    color: #ffffff;
}
.alert-btn--primary:hover {
    background: var(--panel-primary-hover, #4c1d95);
}
.alert-btn--secondary {
    background: transparent;
    color: var(--panel-text-primary, #0f172a);
    border-color: var(--panel-card-border, #e5e7eb);
}
.alert-btn--secondary:hover {
    background: var(--panel-card-border, #f1f5f9);
}

.alert-transition-enter        { transition: opacity 0.18s ease-out; }
.alert-transition-enter-start  { opacity: 0; }
.alert-transition-enter-end    { opacity: 1; }
.alert-transition-leave        { transition: opacity 0.15s ease-in; }
.alert-transition-leave-start  { opacity: 1; }
.alert-transition-leave-end    { opacity: 0; }

@keyframes alertFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes alertSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes alertSpin       { to { transform: rotate(360deg); } }
@keyframes alertPulse      { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes alertCircleDraw { to { stroke-dashoffset: 0; } }
@keyframes alertCheckDraw  { to { stroke-dashoffset: 0; } }
@keyframes alertXDraw      { to { stroke-dashoffset: 0; } }