/* ===== iOS 白色风格侧边栏 ===== */

/* 核心策略：用超高优先级强制覆盖所有页面 */

/* 1. 侧边栏容器 - iOS 白色毛玻璃风格 */
html body[data-current-view] .sidebar,
html body .sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 220px !important;
  background: rgba(255, 255, 0.95) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
  padding: 20px 12px !important;
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.04) !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  color: #1d1d1f !important;
  border-radius: 0 !important;
  inset: 0 auto 0 !important;
}

/* 2. 品牌区 */
html body .sidebar .brand-mark {
  padding: 8px 12px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid rgba(0, 0, 0.05) !important;
}

html body .sidebar .brand-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%) !important;
  flex-shrink: 0 !important;
}

html body .sidebar .brand-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  line-height: 1.3 !important;
}

/* 3. 导航列表 */
html body .sidebar .nav-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* 4. 导航按钮基础样式 */
html body[data-current-view] .nav-item,
html body .nav-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #1d1d1f !important;
  text-align: left !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 5. 悬停效果 */
html body[data-current-view] .nav-item:hover,
html body .nav-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #007AFF !important;
  transform: none !important;
}

/* 6. 激活状态 - 所有页面统一 */
html body[data-current-view="home"] .nav-item[data-view="home"],
html body[data-current-view="create"] .nav-item[data-view="create"],
html body[data-current-view="aesthetic"] .nav-item[data-view="aesthetic"],
html body[data-current-view="works"] .nav-item[data-view="works"],
html body[data-current-view="tasks"] .nav-item[data-view="tasks"],
html body[data-current-view="assets"] .nav-item[data-view="assets"],
html body[data-current-view="mine"] .nav-item[data-view="mine"],
html body .nav-item.active {
  background: #007AFF !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25) !important;
}

/* 7. 强制隐藏所有图标伪元素 */
html body[data-current-view] .nav-item::before,
html body .nav-item::before {
  display: none !important;
  content: none !important;
}

/* 8. 主内容区适配 */
html body .main {
  margin-left: 220px !important;
}

/* 9. 移动端隐藏侧边栏 */
@media (max-width: 768px) {
  html body .sidebar {
    display: none !important;
  }
  html body .main {
    margin-left: 0 !important;
  }
}