/* ══════════════════════════════════════════════════════════
   MASTER VISUAL FIX — Professional clean-up layer
   Loads last; wins over all previous CSS files.
   ══════════════════════════════════════════════════════════ */

/* ── 1. FORCE VISIBILITY — stop opacity:0 from animations ── */
/* animations.css and motion-bloom.css set opacity:0 as start
   state. When we kill animations they freeze there. Fix: */
body > *,
main > section,
main,
.premium-card,
header,
.theme-strip {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* Allow premium-card hover transform */
.premium-card:hover {
    transform: translateY(-2px) !important;
}

/* ── 2. KILL PSEUDO-ELEMENT CLUTTER ────────────────────── */
button::after,
a[href]::after,
.premium-card::after,
.premium-card::before,
.section-rhythm::before,
.section-rhythm::after,
.surface-sheen::before {
    display: none !important;
    content: none !important;
}

/* ── 3. FIX CARD BACKGROUNDS ───────────────────────────── */
.premium-card {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

.dark .premium-card {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(51, 65, 85, 0.7) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.premium-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06) !important;
}
.dark .premium-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.28), 0 1px 4px rgba(0,0,0,0.18) !important;
}

/* ── 4. FIX HEADER ─────────────────────────────────────── */
header, nav {
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
}
.dark header, .dark nav {
    background: rgba(2, 6, 23, 0.92) !important;
    border-bottom: 1px solid rgba(30, 41, 59, 0.85) !important;
}

/* ── 5. REDUCE PARTICLE CANVAS ─────────────────────────── */
#particle-canvas {
    opacity: 0.08 !important;
}

/* ── 6. BODY BACKGROUND ─────────────────────────────────── */
body {
    background-image: none !important;
    background-color: #f8fafc !important;
    letter-spacing: 0.01em !important;
    overflow-x: hidden !important;
}
.dark body, html.dark body {
    background-color: #020617 !important;
}

/* ── 7. NEON GLOW TEXT ──────────────────────────────────── */
.neon-glow-text {
    text-shadow: none !important;
    color: #a78bfa !important;
    animation: none !important;
}

/* ── 8. INPUTS ──────────────────────────────────────────── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
textarea,
select {
    background: #f8fafc !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(203, 213, 225, 0.9) !important;
    color: #0f172a !important;
}
.dark input[type="text"],
.dark input[type="password"],
.dark input[type="email"],
.dark input[type="search"],
.dark textarea,
.dark select {
    background: rgba(15, 23, 42, 0.8) !important;
    border-color: rgba(51, 65, 85, 0.8) !important;
    color: #f1f5f9 !important;
}
input:focus, textarea:focus {
    border-color: rgba(139, 92, 246, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.10) !important;
}

/* ── 9. MODALS ──────────────────────────────────────────── */
[id^="modal-"] > div,
#modal-admin-auth > div,
#modal-vault > div {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18) !important;
    opacity: 1 !important;
    transform: none !important;
}
.dark [id^="modal-"] > div,
.dark #modal-admin-auth > div,
.dark #modal-vault > div {
    background: #0f172a !important;
    border: 1px solid rgba(51, 65, 85, 0.8) !important;
}

/* ── 10. THEME STRIP ────────────────────────────────────── */
.theme-strip {
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
}
.dark .theme-strip {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(51, 65, 85, 0.7) !important;
}

/* ── 11. SEARCH SHELL ───────────────────────────────────── */
.search-shell {
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
}
.dark .search-shell {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(51, 65, 85, 0.7) !important;
}

/* ── 12. BUTTONS ────────────────────────────────────────── */
.neon-btn:hover {
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* ── 13. ROTATING HALO ──────────────────────────────────── */
.rotating-neon-halo {
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.2),
                0 8px 24px rgba(0,0,0,0.14) !important;
}

/* ── 14. SCROLLBAR ──────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 3px;
}

/* ── 15. LAYOUT ─────────────────────────────────────────── */
main {
    margin-top: 1.5rem !important;
    gap: 1.5rem !important;
}

/* ── 16. WORLD CLOCK DROPDOWN ───────────────────────────── */
#world-clock-dropdown {
    background: #ffffff !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.14) !important;
    opacity: 1 !important;
}
.dark #world-clock-dropdown {
    background: #0f172a !important;
    border: 1px solid rgba(51, 65, 85, 0.8) !important;
}

/* ── 17. MINI BADGES ────────────────────────────────────── */
.mini-badge {
    background: rgba(241, 245, 249, 0.9) !important;
    border: 1px solid rgba(203, 213, 225, 0.7) !important;
    color: #64748b !important;
}
.dark .mini-badge {
    background: rgba(30, 41, 59, 0.8) !important;
    border: 1px solid rgba(51, 65, 85, 0.7) !important;
    color: #94a3b8 !important;
}

/* ── 18. NEUTRALIZE OLD FLOATING-NAV ────────────────────── */
/* Old .floating-nav replaced by fnav.css entirely */
.floating-nav,
.floating-nav-btn,
.floating-nav-btn:hover,
.floating-nav-btn:focus-visible {
    all: unset !important;
    display: none !important;
}

/* ── 19. RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 768px) {
    .premium-card { border-radius: 16px !important; }
    .theme-strip  { border-radius: 16px !important; }
    main { gap: 1rem !important; }
}