/* ========================================
   OpenList 样式 - 修复版
   ======================================== */

/* ===== 1. 全局背景 ===== */
html, body {
  background: url('https://pan.wuwudesu.com/public/background.jpg') center/cover fixed !important;
}

#root {
  background: transparent !important;
}

/* ===== 2. 强制日间模式 ===== */
html {
  color-scheme: light !important;
}

:root {
  --chakra-colors-chakra-body-text: #1a202c !important;
  --chakra-colors-chakra-body-bg: transparent !important;
}

html.dark, html.dark * {
  color-scheme: light !important;
}

/* ===== 3. 顶部导航栏 ===== */
header {
  max-width: 840px !important;
  width: calc(100% - 30px) !important;
  margin: 0 auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-radius: 12px !important;
  top: 5px !important;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(12px) !important;
  position: fixed !important;
  z-index: 100 !important;
  padding: 8px 16px !important;
}

html.dark header {
  background: rgba(255,255,255,0.92) !important;
}

/* ===== 4. 头像 - 层级不超过导航栏 ===== */
img[src*="logo"], img[alt*="logo"], header img:first-child {
  border-radius: 50% !important;
  width: 173px !important;
  height: 173px !important;
  object-fit: cover !important;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  cursor: pointer !important;
  background: transparent !important;
  z-index: 50 !important;
}

img[src*="logo"]:hover {
  transform: scale(1.35) rotate(20deg) !important;
}

/* ===== 5. 主内容区域 ===== */
#root > div {
  padding-top: 70px !important;
  background: transparent !important;
}

main {
  max-width: 800px !important;
  width: calc(100% - 40px) !important;
  margin: 0 auto !important;
  padding: 16px !important;
  background: transparent !important;
}

/* ===== 6. 路径栏 ===== */
nav, [role="navigation"] {
  border-radius: 10px !important;
  background: rgba(255,255,255,0.85) !important;
  padding: 10px 20px !important;
  margin-bottom: 10px !important;
}

html.dark nav {
  background: rgba(255,255,255,0.85) !important;
}

/* ===== 7. 工具栏（排除右下角浮动工具栏）===== */
[role="toolbar"], [class*="toolbar"]:not(.left-toolbar-box):not(.toolbar-toggle):not([class*="left-toolbar"]) {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
}

html.dark [role="toolbar"] {
  background: rgba(255,255,255,0.85) !important;
}

/* ===== 8. 表头 ===== */
thead, th, [role="columnheader"] {
  background: rgba(255,255,255,0.88) !important;
}

html.dark thead, html.dark th {
  background: rgba(255,255,255,0.88) !important;
}

/* ===== 9. 文件列表项 ===== */
tr, [role="listitem"], [role="row"], tbody > * {
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(4px) !important;
  border-radius: 6px !important;
}

html.dark tr, html.dark [role="listitem"] {
  background: rgba(255,255,255,0.55) !important;
}

tr:hover, [role="listitem"]:hover {
  background: rgba(255,255,255,0.75) !important;
}

/* ===== 10. 卡片 ===== */
[class*="card"] {
  background: rgba(255,255,255,0.85) !important;
  border-radius: 10px !important;
}

html.dark [class*="card"] {
  background: rgba(255,255,255,0.85) !important;
}

/* ===== 11. 按钮 ===== */
button {
  border-radius: 8px !important;
}

/* ===== 12. 子菜单/管理页面 - 白色背景 ===== */
[role="dialog"], [role="alertdialog"],
aside, [class*="sidebar"], [class*="Sidebar"],
[class*="admin-panel"], [class*="AdminPanel"],
[class*="settings"], [class*="Settings"],
[class*="chakra-modal"], [class*="chakra-drawer"],
[class*="ModalContent"], [class*="DrawerContent"] {
  background: white !important;
}

/* ===== 13. 右下角浮动工具栏 - 最高层级 ===== */
.left-toolbar-box {
  z-index: 99999 !important;
}

/* 右下角工具栏内的 SVG 图标 */
.left-toolbar-box svg {
  width: 32px !important;
  height: 32px !important;
}

/* ===== 14. 图片背景透明 ===== */
img {
  background: transparent !important;
}

/* ===== 15. 渐变模糊遮罩 ===== */
body::after {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: radial-gradient(
    ellipse 60% 50% at center center,
    transparent 0%,
    transparent 35%,
    rgba(255,255,255,0.15) 55%,
    rgba(255,255,255,0.35) 70%,
    rgba(255,255,255,0.55) 85%,
    rgba(255,255,255,0.8) 100%
  ) !important;
}

/* ===== 16. 强制文字深色 ===== */
html.dark, html.dark body {
  color: #1a202c !important;
}

html.dark a {
  color: #3b82f6 !important;
}