@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

#ohsnap {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 999999999;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ===== BASE TOAST ===== */
.alert {
    min-width: 260px;
    max-width: 340px;

    padding: 14px 16px;
    border-radius: 14px;

    background: rgba(20, 18, 24, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.06);

    color: #fff;

    box-shadow:
            0 10px 30px rgba(0, 0, 0, 0.55),
            0 0 40px rgba(255, 180, 0, 0.08);

    display: flex;
    align-items: center;
    gap: 10px;

    animation: slideIn 0.25s ease;
    position: relative;
    overflow: hidden;
}

/* subtle glow line */
.alert::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    opacity: 0.8;
}

/* ===== ICON ===== */
.alert i {
    font-size: 16px;
    opacity: 0.95;
}

/* ===== TEXT ===== */
.alert span {
    font-size: 13px;
    font-weight: 500;
}

/* ===== TYPES (crypto style) ===== */

/* SUCCESS (green neon) */
.alert-green::before {
    background: linear-gradient(90deg, #00ffb2, #37BC9B);
    box-shadow: 0 0 12px rgba(55, 188, 155, 0.5);
}
.alert-green i {
    color: #37BC9B;
}

/* ERROR (red glow) */
.alert-red::before {
    background: linear-gradient(90deg, #ff3b5c, #DA4453);
    box-shadow: 0 0 12px rgba(218, 68, 83, 0.5);
}
.alert-red i {
    color: #ff4d6d;
}

/* WARNING (gold) */
.alert-yellow::before {
    background: linear-gradient(90deg, #ffcc00, #F6BB42);
    box-shadow: 0 0 14px rgba(246, 187, 66, 0.5);
}
.alert-yellow i {
    color: #F6BB42;
}

/* INFO (blue crypto) */
.alert-blue::before {
    background: linear-gradient(90deg, #4A89DC, #5aa7ff);
    box-shadow: 0 0 14px rgba(74, 137, 220, 0.4);
}
.alert-blue i {
    color: #4A89DC;
}

/* ===== ANIMATION ===== */
@keyframes slideIn {
    from {
        transform: translateX(30px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}