/**
 * 🎨 全局背景样式
 * 使用 DOM 容器显示背景，确保在所有内容后面
 */

/* 重置 html - 确保背景显示 */
html {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
}

/* 设置 body 为背景容器 - 确保背景显示 */
body {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    position: relative !important;
    z-index: 0 !important;
}

/* 全局背景容器 */
#global-bg-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    z-index: -999999 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 确保所有内容在背景上方 */
.app-container {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.main-content {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.page-container,
.container {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* 确保 body 和 html 完全透明 */
html,
body {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* 确保导航栏在背景上方 */
.bottom-navigation {
    z-index: 9999 !important;
}

/* 确保其他固定元素在背景上方 */
.back-btn,
.header,
.nav-tabs,
.floating-button {
    z-index: 10 !important;
}