/* ============================================
   全局背景管理
   ============================================ */

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #fafbff;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #fafbff;
    position: relative;
    z-index: 0;
}

/* ============================================
   全局背景容器
   需要 !important 覆盖主题系统的动态样式
   ============================================ */

#global-bg-container,
html[data-theme-loaded="true"] #global-bg-container,
body[class*="theme-"] #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;
    background-color: transparent !important;
    z-index: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: opacity 0.3s ease-out !important;
}

#global-bg-container.loaded {
    opacity: var(--bg-opacity, 0.3) !important;
}

/* ============================================
   背景动画层
   需要 !important 防止主题系统覆盖
   ============================================ */

.bg-animation,
html[data-theme-loaded="true"] .bg-animation,
body[class*="theme-"] .bg-animation,
.product-note-page .bg-animation {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ============================================
   内容层 z-index 管理
   确保所有内容在背景之上
   ============================================ */

.app-container {
    position: relative;
    z-index: 1;
    background: transparent;
}

.main-content {
    position: relative;
    z-index: 1;
    background: transparent;
}

.page-container,
.container {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* ============================================
   固定元素 z-index 层级
   ============================================ */

.bottom-navigation {
    z-index: 9999;
}

.page-header {
    z-index: 100;
}

.back-btn,
.header,
.nav-tabs,
.floating-button {
    z-index: 10;
}

/* ============================================
   产品笔记页面特殊处理
   ============================================ */

.product-note-page #global-bg-container {
    opacity: 0.3 !important;
}

body.product-note-page,
body.product-note-page.ecommerce-mode {
    background: transparent;
}

body.product-note-page::before,
body.product-note-page.ecommerce-mode::before {
    display: none;
}

.product-note-page .page-header {
    background: rgba(255, 255, 255, 0.85);
}

/* ============================================
   深色模式
   ============================================ */

@media (prefers-color-scheme: dark) {
    html,
    body {
        background: #0f1117;
    }

    .product-note-page .page-header {
        background: rgba(15, 17, 23, 0.9);
    }
}