* {
    box-sizing: border-box;
}

:root {
    color-scheme: dark;
}

html {
    min-height: 100%;
    background: #09090b;
}

/* Subtle Animated Sci-Fi Ambient Light Orbs */
html::before {
    content: "";
    position: fixed;
    top: -20%;
    left: -20%;
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.045) 0%, transparent 70%);
    z-index: -2;
    pointer-events: none;
    animation: ambient-drift-one 28s ease-in-out infinite alternate;
    will-change: transform;
}

html::after {
    content: "";
    position: fixed;
    bottom: -20%;
    right: -20%;
    width: 80vw;
    height: 80vw;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.03) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
    animation: ambient-drift-two 32s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes ambient-drift-one {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(12%, 8%, 0) scale(1.15);
    }
    100% {
        transform: translate3d(-6%, -12%, 0) scale(0.9);
    }
}

@keyframes ambient-drift-two {
    0% {
        transform: translate3d(0, 0, 0) scale(1.05);
    }
    50% {
        transform: translate3d(-8%, -10%, 0) scale(0.95);
    }
    100% {
        transform: translate3d(10%, 6%, 0) scale(1.15);
    }
}

/* Futuristic cybernetic grid mesh overlay */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3; /* Behind elements, but above ambient drift orbs */
    pointer-events: none;
    background-image: 
        linear-gradient(rgba(20, 184, 166, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 184, 166, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(circle at center, black 30%, rgba(0, 0, 0, 0.1) 100%);
    -webkit-mask-image: radial-gradient(circle at center, black 30%, rgba(0, 0, 0, 0.1) 100%);
}

body {
    min-height: 100vh;
    margin: 0;
    background: transparent;
    color: var(--text-main, #f8fafc);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}


[hidden] {
    display: none !important;
}

bbb-home-app,
bbb-profile-app,
bbb-review-ideas-app,
bbb-admin-app {
    min-height: 100vh;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-base, #09090b);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(20, 184, 166, 0.5);
}