/* ================================================================
   MetaBuff V2 — Visual Intelligence System
   "Void & Mint" Design Tokens + Premium Layers
   
   DROP-IN UPGRADE — no logic changes, pure visual layer.
   Include AFTER your existing <style> block or as a <link>.
   ================================================================ */

/* ─── DESIGN TOKENS ─── */
:root {
    /* Palette — unchanged names, refined values */
    --bg-void:           #07070c;
    --bg-void-alt:       #0a0a10;
    --accent-mint:       #6ee7b7;
    --accent-mint-dim:   #3a7d60;
    --accent-mint-subtle:rgba(110,231,183,0.06);
    --accent-blue:       #38bdf8;
    --accent-blue-subtle:rgba(56,189,248,0.06);
    --txt-primary:       #e2e8f0;
    --txt-muted:         #94a3b8;

    /* Surface layers — depth system */
    --surface-0:         rgba(255,255,255,0.015);
    --surface-1:         rgba(255,255,255,0.03);
    --surface-2:         rgba(255,255,255,0.05);
    --surface-3:         rgba(255,255,255,0.07);
    --surface-border:    rgba(255,255,255,0.06);
    --surface-border-hover: rgba(255,255,255,0.12);
    --surface-border-focus: rgba(110,231,183,0.3);

    /* Glow system */
    --glow-mint:         rgba(110,231,183,0.12);
    --glow-mint-md:      rgba(110,231,183,0.2);
    --glow-mint-strong:  rgba(110,231,183,0.35);
    --glow-blue:         rgba(56,189,248,0.12);

    /* Spacing scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 64px;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);
    --shadow-xl:  0 16px 48px rgba(0,0,0,0.6);
    --shadow-glow-mint: 0 0 20px var(--glow-mint), 0 0 60px rgba(110,231,183,0.04);
    --shadow-glow-blue: 0 0 20px var(--glow-blue), 0 0 60px rgba(56,189,248,0.04);

    /* Easing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Transitions */
    --transition-fast: 150ms var(--ease-out-expo);
    --transition-base: 250ms var(--ease-out-expo);
    --transition-slow: 400ms var(--ease-out-expo);
}

/* ─── 1. BACKGROUND SYSTEM ─── */

/* Layer 1: Base gradient — replaces flat --bg-void */
body {
    background:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(110,231,183,0.025) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 90%, rgba(56,189,248,0.02) 0%, transparent 50%),
        radial-gradient(ellipse 100% 100% at 50% 50%, var(--bg-void-alt) 0%, var(--bg-void) 100%);
    background-color: var(--bg-void);
    background-attachment: fixed;
}

/* Layer 2: Noise overlay — applied via ::before on a container */
.mb-noise::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

/* Layer 3: Data grid — subtle CSS grid lines */
.mb-grid-bg::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(110,231,183,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110,231,183,0.018) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 20%, transparent 80%);
    animation: mb-grid-drift 30s linear infinite;
}

@keyframes mb-grid-drift {
    0%   { background-position: 0 0; }
    100% { background-position: 80px 80px; }
}

/* ─── 2. SURFACE SYSTEM ─── */

/* Base surface card — upgraded with gradient + transparency + glow edge */
.surface-card {
    background: 
        linear-gradient(135deg, var(--surface-1) 0%, var(--surface-0) 100%);
    border: 1px solid var(--surface-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 
        var(--shadow-sm),
        inset 0 1px 0 rgba(255,255,255,0.03);
    transition: 
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        transform var(--transition-base);
    position: relative;
}

.surface-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.03) 0%, transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.surface-card:hover::before {
    opacity: 1;
}

/* Elevated surface (modals, dropdowns) */
.surface-elevated {
    background:
        linear-gradient(160deg, var(--surface-2) 0%, var(--surface-1) 100%);
    border: 1px solid var(--surface-border-hover);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-lg);
}

/* Focused / selected surface */
.surface-focused {
    border-color: var(--surface-border-focus) !important;
    box-shadow: 
        var(--shadow-md),
        0 0 0 1px rgba(110,231,183,0.08),
        var(--shadow-glow-mint);
}


/* ─── 3. INPUT SYSTEM ─── */

/* Upgrade mb-input */
.mb-input {
    background: var(--surface-0);
    border: 1px solid var(--surface-border);
    color: var(--txt-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    width: 100%;
    transition: 
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
.mb-input::placeholder { 
    color: rgba(148,163,184,0.4);
    transition: color var(--transition-fast);
}
.mb-input:hover {
    border-color: var(--surface-border-hover);
    background: var(--surface-1);
}
.mb-input:hover::placeholder {
    color: rgba(148,163,184,0.55);
}
.mb-input:focus {
    outline: none;
    border-color: var(--accent-mint);
    box-shadow: 
        0 0 0 3px rgba(110,231,183,0.08),
        0 0 20px rgba(110,231,183,0.06),
        inset 0 1px 3px rgba(0,0,0,0.1);
    background: var(--surface-1);
}

/* Landing page inputs (the simpler bg-surface ones) */
input[type="text"].bg-surface,
input[type="email"].bg-surface,
input[type="text"].bg-void,
input[type="email"].bg-void {
    transition: 
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}
input[type="text"]:focus,
input[type="email"]:focus {
    box-shadow: 
        0 0 0 3px rgba(110,231,183,0.08),
        0 0 20px rgba(110,231,183,0.06);
}

/* Slider thumb upgrade */
.ne-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-mint);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(110,231,183,0.4), 0 0 2px rgba(0,0,0,0.3);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.ne-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 16px rgba(110,231,183,0.5), 0 0 2px rgba(0,0,0,0.3);
    transform: scale(1.15);
}

/* Checkbox accent */
input[type="checkbox"] {
    accent-color: var(--accent-mint);
    cursor: pointer;
}

/* Game lookup search input — larger, more prominent */
.gl-search-input {
    background: var(--surface-0) !important;
    border: 1px solid var(--surface-border) !important;
    transition: 
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}
.gl-search-input:hover {
    border-color: var(--surface-border-hover) !important;
    background: var(--surface-1) !important;
}
.gl-search-input:focus {
    border-color: var(--accent-mint) !important;
    box-shadow: 
        0 0 0 3px rgba(110,231,183,0.08),
        0 0 24px rgba(110,231,183,0.08),
        inset 0 2px 4px rgba(0,0,0,0.08) !important;
    background: var(--surface-1) !important;
}

/* Autocomplete dropdown — smoother */
.gl-suggestions {
    background: rgba(14,14,22,0.97) !important;
    border: 1px solid var(--surface-border-hover) !important;
    box-shadow: var(--shadow-xl) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: mb-dropdown-enter 0.2s var(--ease-out-expo) forwards;
}

@keyframes mb-dropdown-enter {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gl-dd-item {
    transition: background var(--transition-fast), transform var(--transition-fast);
    border-radius: var(--radius-sm);
    margin: 2px;
}
.gl-dd-item:hover {
    background: var(--surface-2) !important;
    transform: translateX(2px);
}


/* ─── 4. BUTTON SYSTEM ─── */

/* Primary button */
.mb-btn {
    background: linear-gradient(135deg, var(--accent-mint) 0%, #5ddea8 100%);
    color: var(--bg-void);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.7rem 1.3rem;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: 
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 
        0 2px 8px rgba(110,231,183,0.2),
        inset 0 1px 0 rgba(255,255,255,0.15);
    position: relative;
    overflow: hidden;
}

/* Shimmer sweep on hover */
.mb-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; 
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s var(--ease-out-expo);
    pointer-events: none;
}
.mb-btn:hover::after {
    left: 100%;
}

.mb-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 24px rgba(110,231,183,0.25),
        0 0 40px rgba(110,231,183,0.08),
        inset 0 1px 0 rgba(255,255,255,0.15);
}
.mb-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 6px rgba(110,231,183,0.15);
}
.mb-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    filter: grayscale(0.3);
}

/* Ghost button */
.mb-btn-ghost {
    background: transparent;
    color: var(--txt-muted);
    border: 1px solid var(--surface-border);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 0.8rem;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: 
        color var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast);
}
.mb-btn-ghost:hover {
    color: var(--txt-primary);
    border-color: var(--surface-border-hover);
    background: var(--surface-1);
    transform: translateY(-1px);
}
.mb-btn-ghost:active {
    transform: translateY(0) scale(0.98);
}

/* CTA buttons on landing — breathe + glow */
.btn-breathe {
    animation: mb-breathe 3s ease-in-out infinite;
    position: relative;
}
@keyframes mb-breathe {
    0%, 100% { box-shadow: 0 0 16px var(--glow-mint), 0 0 48px rgba(110,231,183,0.04); }
    50%      { box-shadow: 0 0 24px var(--glow-mint-md), 0 0 64px rgba(110,231,183,0.08); }
}

/* Export / action buttons */
.ne-export-btn {
    transition: 
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}
.ne-export-btn:hover {
    background: rgba(110,231,183,0.15);
    border-color: rgba(110,231,183,0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(110,231,183,0.1);
}
.ne-export-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Retry / secondary action buttons */
.ne-retry-btn,
.gl-retry-btn {
    transition: 
        background var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}
.ne-retry-btn:hover,
.gl-retry-btn:hover {
    background: rgba(110,231,183,0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(110,231,183,0.08);
}


/* ─── 5. GLOW + SHADOW SYSTEM ─── */

/* Consistent glow class */
.mb-glow-mint {
    box-shadow: var(--shadow-glow-mint);
}
.mb-glow-blue {
    box-shadow: var(--shadow-glow-blue);
}

/* Feature cards — hover glow + lift */
.feature-card {
    transition: 
        transform var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}
.feature-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(110,231,183,0.2) !important;
    box-shadow: 
        0 8px 32px rgba(0,0,0,0.3),
        0 0 40px rgba(110,231,183,0.06) !important;
}

/* Pricing cards */
.pricing-popular {
    box-shadow: 
        0 8px 32px rgba(0,0,0,0.4),
        0 0 60px rgba(110,231,183,0.06),
        inset 0 1px 0 rgba(110,231,183,0.1);
}

/* Metric cards in Game Lookup — subtle hover */
.gl-metric-card {
    transition: 
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}
.gl-metric-card:hover {
    border-color: var(--surface-border-hover) !important;
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}


/* ─── 6. SIDEBAR UPGRADE ─── */

.sidebar {
    background: 
        linear-gradient(180deg, rgba(10,10,16,0.98) 0%, rgba(7,7,12,0.98) 100%) !important;
    border-right: 1px solid var(--surface-border) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.3);
}

.sidebar-nav-item {
    transition: 
        color var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
    border-radius: var(--radius-sm);
}
.sidebar-nav-item:hover {
    color: var(--txt-primary);
    background: var(--surface-2) !important;
    transform: translateX(2px);
}
.sidebar-nav-item.active {
    color: var(--accent-mint);
    background: var(--accent-mint-subtle) !important;
    box-shadow: inset 0 0 24px rgba(110,231,183,0.03);
}
.sidebar-nav-item.active::before {
    background: var(--accent-mint);
    box-shadow: 0 0 8px rgba(110,231,183,0.4);
}

/* Topbar glass effect */
.topbar {
    background: rgba(7,7,12,0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid var(--surface-border) !important;
    box-shadow: 0 1px 12px rgba(0,0,0,0.2);
}

/* Nav glass (landing) */
nav.fixed {
    background: rgba(7,7,12,0.82) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 1px 12px rgba(0,0,0,0.2);
}


/* ─── 7. ANIMATION SYSTEM ─── */

/* Entry animations */
@keyframes mb-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mb-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes mb-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes mb-slide-right {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Stagger utility classes */
.mb-stagger-1 { animation-delay: 50ms; }
.mb-stagger-2 { animation-delay: 100ms; }
.mb-stagger-3 { animation-delay: 150ms; }
.mb-stagger-4 { animation-delay: 200ms; }
.mb-stagger-5 { animation-delay: 250ms; }

/* "System alive" pulse */
@keyframes mb-pulse-dot {
    0%, 100% { opacity: 0.3; transform: scale(0.9); }
    50%      { opacity: 1;   transform: scale(1.1); }
}
.mb-pulse-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent-mint);
    animation: mb-pulse-dot 2s ease-in-out infinite;
}

/* Scanline animation for laser-scan cards */
.laser-scan::after {
    background: linear-gradient(90deg, transparent, rgba(110,231,183,0.5), transparent) !important;
    height: 1px;
}

/* Skeleton shimmer — improved */
@keyframes mb-skeleton {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.015) 0%,
        rgba(255,255,255,0.05) 40%,
        rgba(255,255,255,0.05) 60%,
        rgba(255,255,255,0.015) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: mb-skeleton 2s ease-in-out infinite !important;
}

/* Scroll reveal — slightly improved */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Oracle cards */
.oracle-card {
    transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo), box-shadow 0.3s;
}
.oracle-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 30px rgba(110,231,183,0.04);
}


/* ─── 8. NOTIFICATION BELL UPGRADE ─── */

.notif-dropdown {
    background: rgba(14,14,22,0.97) !important;
    border: 1px solid var(--surface-border-hover) !important;
    box-shadow: var(--shadow-xl) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: mb-dropdown-enter 0.2s var(--ease-out-expo) forwards;
}

.notif-bell {
    transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.notif-bell:hover {
    transform: scale(1.08);
}

.notif-bell-dot {
    animation: mb-pulse-dot 1.5s ease-in-out infinite;
}


/* ─── 9. TABLE UPGRADES (Niche Explorer) ─── */

.ne-table-wrap {
    box-shadow: var(--shadow-md);
}

.ne-row {
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.ne-row:hover {
    background: var(--surface-2) !important;
}

.ne-th {
    background: var(--surface-0);
}


/* ─── 10. MISC REFINEMENTS ─── */

/* Gradient divider — more alive */
.gradient-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-mint), var(--accent-blue), transparent);
    opacity: 0.3;
    animation: mb-divider-glow 4s ease-in-out infinite alternate;
}
@keyframes mb-divider-glow {
    0%   { opacity: 0.2; }
    100% { opacity: 0.4; }
}

/* Scrollbar — subtler */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { 
    background: rgba(255,255,255,0.06); 
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { 
    background: rgba(255,255,255,0.12); 
}

/* Tier badges — slight glow */
.tier-indie {
    box-shadow: 0 0 8px rgba(110,231,183,0.15);
}
.tier-studio {
    box-shadow: 0 0 8px rgba(56,189,248,0.15);
}

/* Paywall gradient — smoother */
.paywall-blur::after {
    background: linear-gradient(to bottom, transparent 0%, var(--bg-void) 90%) !important;
}

/* Selection color */
::selection {
    background: rgba(110,231,183,0.2);
    color: #fff;
}

/* Focus ring — updated */
*:focus-visible {
    outline: 2px solid rgba(110,231,183,0.6);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Mouse glow — subtler, wider */
.mouse-glow {
    width: 700px !important;
    height: 700px !important;
    background: radial-gradient(circle, rgba(110,231,183,0.03) 0%, transparent 65%) !important;
}

/* Pricing card group hover */
#pricing [role="listitem"] {
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
#pricing [role="listitem"]:hover {
    transform: translateY(-4px);
}

/* Hero grid — refined */
.hero-grid::before {
    background-image:
        linear-gradient(rgba(110,231,183,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110,231,183,0.022) 1px, transparent 1px) !important;
    background-size: 72px 72px !important;
}

/* Auth card special treatment */
#authScreen .surface-card {
    box-shadow: 
        var(--shadow-xl),
        0 0 80px rgba(110,231,183,0.04);
}

/* Toast upgrade */
.copy-toast {
    box-shadow: var(--shadow-lg), 0 0 20px rgba(110,231,183,0.15);
    border-radius: var(--radius-md);
}

/* "System alive" — scanning text effect */
@keyframes mb-typing-dots {
    0%, 20% { content: '.'; }
    40%     { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Link hover — subtle underline */
a.text-mint:hover,
a.text-data-blue:hover {
    text-decoration-color: currentColor;
}

/* Smooth all border transitions globally */
*:not(input):not(button):not(a) {
    transition-property: border-color;
    transition-duration: 250ms;
    transition-timing-function: var(--ease-out-expo);
}

/* Print-safe: hide background effects */
@media print {
    .mb-noise::before,
    .mb-grid-bg::after,
    .mouse-glow { display: none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .mb-grid-bg::after { animation: none !important; }
    .btn-breathe { animation: none !important; }
    .gradient-divider { animation: none !important; }
}

/* ============================================================
   MetaBuff — Notifications + Search v3 CSS additions
   Append to dashboard-data-views.css (or app.html <style>)
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   NOTIFICATIONS
   ════════════════════════════════════════════════════════════ */

.notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin: -8px -8px 8px -8px;
}

.notif-header-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--txt-primary);
}

.notif-header-empty {
    font-size: 0.6875rem;
    color: var(--txt-muted);
    font-family: 'JetBrains Mono', monospace;
}

.notif-mark-read {
    background: none;
    border: none;
    color: var(--accent-mint);
    font-size: 0.6875rem;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}

.notif-mark-read:hover {
    background: rgba(110, 231, 183, 0.08);
}

.notif-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notif-item {
    position: relative;
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.notif-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

.notif-unread {
    background: rgba(110, 231, 183, 0.04);
}

.notif-unread:hover {
    background: rgba(110, 231, 183, 0.07);
}

.notif-item-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    margin-top: 2px;
}

.notif-item-body {
    flex: 1;
    min-width: 0;
}

.notif-item-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--txt-primary);
    line-height: 1.35;
    margin-bottom: 2px;
}

.notif-read .notif-item-title {
    color: var(--txt-muted);
    font-weight: 500;
}

.notif-item-text {
    font-size: 0.6875rem;
    color: var(--txt-muted);
    line-height: 1.45;
    margin-bottom: 4px;
}

.notif-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.notif-item-time {
    font-size: 0.625rem;
    color: rgba(148, 163, 184, 0.6);
}

.notif-item-action {
    background: none;
    border: none;
    color: var(--accent-mint);
    font-size: 0.6875rem;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    padding: 2px 0;
    transition: opacity 0.15s;
}

.notif-item-action:hover {
    opacity: 0.7;
}

.notif-item-unread-dot {
    position: absolute;
    top: 14px;
    right: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-mint);
    box-shadow: 0 0 8px rgba(110, 231, 183, 0.5);
}


/* ════════════════════════════════════════════════════════════
   GAME LOOKUP — SEARCH v3 (fuzzy + keyboard nav)
   ════════════════════════════════════════════════════════════ */

/* Esc kbd hint inside search input */
.gl-search-kbd {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--txt-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    pointer-events: none;
}

/* Active dropdown item (keyboard or hover) */
.gl-dd-item.gl-dd-active {
    background: rgba(110, 231, 183, 0.06) !important;
    border-left: 2px solid var(--accent-mint);
    padding-left: 10px;
}

/* Richer dropdown item layout */
.gl-dd-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    color: var(--txt-muted);
    margin-top: 2px;
}

.gl-dd-sep {
    color: rgba(148, 163, 184, 0.4);
}

.gl-dd-reviews {
    color: var(--accent-blue);
    font-size: 0.625rem;
}

/* Loading skeleton in dropdown */
.gl-dd-loading {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gl-dd-skel {
    height: 44px;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.03) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.03) 100%
    );
    background-size: 200% 100%;
    animation: glDdShimmer 1.4s linear infinite;
}

@keyframes glDdShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}