/* ============================================================
   GLASSMORPHISM & FROSTED CARDS
   ============================================================ */

/* Base glass surface */
.glass {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Cards */
.premium-card,
.bg-white.dark\:bg-slate-900,
.bg-slate-50.dark\:bg-slate-900\/40 {
    background: rgba(15, 10, 35, 0.45) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(139, 92, 246, 0.13) !important;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.4),
        0 1px 0 inset rgba(255, 255, 255, 0.06) !important;
    transition: box-shadow 0.35s ease, border-color 0.35s ease, transform 0.35s ease !important;
}

.premium-card:hover {
    border-color: rgba(139, 92, 246, 0.32) !important;
    box-shadow:
        0 12px 40px rgba(139, 92, 246, 0.18),
        0 2px 0 inset rgba(255, 255, 255, 0.09) !important;
}

/* Modals */
#modal-admin-auth > div,
#modal-vault > div,
[id^="modal-"] > div {
    background: rgba(10, 6, 28, 0.72) !important;
    backdrop-filter: blur(28px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
    border: 1px solid rgba(139, 92, 246, 0.22) !important;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.65),
        0 1px 0 inset rgba(255, 255, 255, 0.07) !important;
}

/* Header bar */
header,
nav {
    background: rgba(8, 5, 20, 0.6) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.14) !important;
}

/* Inputs */
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
    background: rgba(10, 6, 28, 0.55) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-color: rgba(139, 92, 246, 0.25) !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

input:focus,
textarea:focus {
    border-color: rgba(139, 92, 246, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12) !important;
    outline: none !important;
}

/* Frosted dropdown / popover */
.world-clock-dropdown,
[id$="-dropdown"],
[id$="-popover"] {
    background: rgba(10, 6, 28, 0.8) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
}