:root{
    --gold:#d9ae5c;
    --panel:#0e0c10;
    --line:#3a2f1e;
    --cream:#f3ecdf;
    --error:#e2685a;
    --success:#7fbf8f;
}

.alert{
    position:fixed;
    top:24px;
    right:24px;
    z-index:9999;
    max-width:420px;
    width:calc(100% - 48px);
    display:flex !important;
    align-items:flex-start;
    gap:10px;
    background:var(--panel) !important;
    border:1px solid var(--line) !important;
    color:var(--cream) !important;
    border-radius:10px !important;
    font-size:.9rem;
    line-height:1.5;
    padding:14px 16px;
    margin-bottom:0;
    box-shadow:0 20px 50px -12px rgba(0,0,0,0.6);
    animation:toastIn .35s ease forwards;
}

@keyframes toastIn{
    from{ opacity:0; transform:translateY(-12px); }
    to{ opacity:1; transform:translateY(0); }
}

.alert i{ margin-top:2px; flex:0 0 auto; }
.alert span{ flex:1; }
.alert .btn-close{
    filter:invert(1) grayscale(1) brightness(1.6);
    opacity:.6;
    flex:0 0 auto;
}
.alert .btn-close:hover{ opacity:1; }

.alert-success{ border-color:var(--gold) !important; }
.alert-success i{ color:var(--gold); }

.alert-danger{ border-color:var(--error) !important; }
.alert-danger i{ color:var(--error); }

.alert-warning{ border-color:var(--gold) !important; }
.alert-warning i{ color:var(--gold); }

.alert-info{ border-color:var(--gold) !important; }
.alert-info i{ color:var(--gold); }

@media (max-width:480px){
    .alert{ top:12px; right:12px; left:12px; width:auto; max-width:none; }
}