/* =============================================================
 * acrylic.css — 磨砂玻璃 / 亚克力视觉层
 * -------------------------------------------------------------
 * 设计令牌体系参考 shadcn/ui（HSL 语义变量 + radius 标度），
 * 圆角/间距标度参考 TDesign，交互反馈（涟漪、elevation）参考 MUI。
 *
 * 本文件为「皮肤层」，在 style.css / tailwind.min.css 之后加载，
 * 通过变量与显式覆盖实现主题，不改变既有 DOM 结构。
 * ============================================================= */

/* -------------------------------------------------------------
 * 0. 工具类守卫（务必保留在文件最前）
 * -------------------------------------------------------------
 * 本文件在 tailwind.min.css 之后加载，且对 .uc-btn / .uc-avatar /
 * .uc-top-action / .uc-icon-btn 等组件类声明了 display，与 Tailwind
 * 的 .hidden 工具类同优先级 —— 靠后加载会反压 .hidden，导致
 * 「登录按钮与用户头像同时显示、头像被挤到第二行」的错位问题。
 * 此处强制归位，确保 hidden 类与 hidden 属性在任何情况下都生效。
 * ----------------------------------------------------------- */
.hidden,
[hidden] {
  display: none !important;
}

/* 文本选中色跟随主题主色 */
::selection {
  background: hsl(var(--primary) / 0.24);
  color: hsl(var(--foreground));
}

/* -------------------------------------------------------------
 * 1. 设计令牌
 * ----------------------------------------------------------- */
:root {
  /* TDesign 圆角标度 */
  --td-radius-small: 3px;
  --td-radius-default: 6px;
  --td-radius-medium: 9px;
  --td-radius-large: 12px;
  --td-radius-extra-large: 16px;
  --td-radius-round: 999px;

  /* 浅色主题「白昼纸感」：明亮纸面 + 冷调天光。
     与 html.dark 是两套独立设计（各自的语义色 / 光斑 / 玻璃 / 阴影），
     而不是把浅色简单压暗或叠一层滤镜。 */
  color-scheme: light;

  /* shadcn/ui 语义色（HSL 通道值，便于 alpha 叠加） */
  --background: 210 46% 99%;
  --foreground: 222 34% 15%;
  --card: 0 0% 100%;
  --card-foreground: 222 34% 15%;
  --muted: 214 34% 95%;
  --muted-foreground: 215 18% 45%;
  --primary: 214 56% 42%;
  --primary-foreground: 0 0% 100%;
  --accent: 158 46% 36%;
  --border: 215 28% 90%;
  --ring: 214 56% 42%;

  /* 背景氛围光斑：左上天光 / 右上薄荷 / 右下暖沙 / 左下冷蓝 */
  --backdrop-base: 208 48% 99%;
  --glow-a: 210 92% 60%;
  --glow-b: 162 66% 48%;
  --glow-c: 32 84% 62%;
  --glow-d: 224 82% 68%;
  --glow-a-alpha: 0.22;
  --glow-b-alpha: 0.17;
  --glow-c-alpha: 0.15;
  --glow-d-alpha: 0.13;

  /* 亚克力材质参数（浅色：高亮度白玻璃） */
  --acrylic-blur: 20px;
  --acrylic-saturate: 190%;
  --acrylic-bg: rgba(255, 255, 255, 0.58);
  --acrylic-bg-strong: rgba(255, 255, 255, 0.78);
  --acrylic-bg-subtle: rgba(255, 255, 255, 0.42);
  --acrylic-border: rgba(255, 255, 255, 0.72);
  --acrylic-hairline: rgba(15, 23, 42, 0.08);
  --acrylic-highlight: rgba(255, 255, 255, 0.95);

  /* MUI elevation 阴影标度（浅色：冷调柔和投影） */
  --elevation-1: 0 1px 2px rgba(30, 58, 95, 0.06), 0 1px 3px rgba(30, 58, 95, 0.08);
  --elevation-2: 0 2px 4px rgba(30, 58, 95, 0.06), 0 4px 10px rgba(30, 58, 95, 0.09);
  --elevation-3: 0 6px 14px rgba(30, 58, 95, 0.08), 0 12px 28px rgba(30, 58, 95, 0.11);
  --elevation-4: 0 12px 24px rgba(30, 58, 95, 0.1), 0 24px 48px rgba(30, 58, 95, 0.13);

  /* 主题色映射，便于业务样式复用 */
  --acrylic-primary: #416d9d;
  --acrylic-accent: #3c976d;
  --acrylic-radius: var(--td-radius-extra-large);
}

html.dark {
  /* 暗色主题「午夜极光」：靛蓝夜幕 + 青紫极光。
     独立配色（更深的蓝黑底、发光蓝主色、冷青强调色），不是浅色的降亮度版本。 */
  color-scheme: dark;

  --background: 224 34% 8%;
  --foreground: 212 32% 94%;
  --card: 222 26% 13%;
  --card-foreground: 212 32% 94%;
  --muted: 220 22% 18%;
  --muted-foreground: 214 20% 68%;
  --primary: 213 84% 68%;
  --primary-foreground: 224 42% 10%;
  --accent: 162 58% 56%;
  --border: 220 18% 24%;
  --ring: 213 84% 68%;

  /* 背景氛围：底部靛蓝光柱 / 右上极光青 / 左上紫罗兰 / 中部淡蓝 */
  --backdrop-base: 226 36% 7%;
  --glow-a: 228 92% 58%;
  --glow-b: 168 78% 44%;
  --glow-c: 286 70% 56%;
  --glow-d: 205 88% 56%;
  --glow-a-alpha: 0.34;
  --glow-b-alpha: 0.22;
  --glow-c-alpha: 0.2;
  --glow-d-alpha: 0.16;

  /* 暗色玻璃：降低饱和度避免霓虹溢出，靠内高光塑形 */
  --acrylic-blur: 22px;
  --acrylic-saturate: 150%;
  --acrylic-bg: rgba(24, 32, 50, 0.62);
  --acrylic-bg-strong: rgba(19, 26, 42, 0.84);
  --acrylic-bg-subtle: rgba(30, 39, 60, 0.46);
  --acrylic-border: rgba(148, 163, 184, 0.18);
  --acrylic-hairline: rgba(148, 163, 184, 0.14);
  --acrylic-highlight: rgba(255, 255, 255, 0.12);

  --elevation-1: 0 1px 2px rgba(2, 6, 23, 0.5), 0 1px 3px rgba(2, 6, 23, 0.44);
  --elevation-2: 0 2px 6px rgba(2, 6, 23, 0.5), 0 6px 16px rgba(2, 6, 23, 0.46);
  --elevation-3: 0 8px 18px rgba(2, 6, 23, 0.54), 0 16px 34px rgba(2, 6, 23, 0.5);
  --elevation-4: 0 14px 28px rgba(2, 6, 23, 0.58), 0 28px 56px rgba(2, 6, 23, 0.54);
}

/* 根元素底色跟随主题，避免滚动回弹 / 页面切换时露出白底 */
html {
  background-color: hsl(var(--background));
}

/* -------------------------------------------------------------
 * 2. 亚克力背景层（无自定义壁纸时的默认底）
 * ----------------------------------------------------------- */
#fixed-background.acrylic-backdrop {
  background-color: hsl(var(--backdrop-base)) !important;
  background-image:
    radial-gradient(58rem 40rem at 12% 6%, hsl(var(--glow-a) / var(--glow-a-alpha)) 0%, transparent 60%),
    radial-gradient(46rem 32rem at 88% 2%, hsl(var(--glow-b) / var(--glow-b-alpha)) 0%, transparent 58%),
    radial-gradient(50rem 38rem at 82% 94%, hsl(var(--glow-c) / var(--glow-c-alpha)) 0%, transparent 60%),
    radial-gradient(44rem 34rem at 2% 96%, hsl(var(--glow-d) / var(--glow-d-alpha)) 0%, transparent 58%);
  transition: background-color 0.5s ease;
}

/* 暗色：光斑的位置与形态和浅色完全不同，形成「午夜极光」的独立观感 */
html.dark #fixed-background.acrylic-backdrop {
  background-image:
    radial-gradient(64rem 46rem at 50% 116%, hsl(var(--glow-a) / var(--glow-a-alpha)) 0%, transparent 62%),
    radial-gradient(48rem 34rem at 98% 4%, hsl(var(--glow-b) / var(--glow-b-alpha)) 0%, transparent 58%),
    radial-gradient(42rem 32rem at 2% 12%, hsl(var(--glow-c) / var(--glow-c-alpha)) 0%, transparent 58%),
    radial-gradient(38rem 28rem at 24% 68%, hsl(var(--glow-d) / var(--glow-d-alpha)) 0%, transparent 60%);
}

/* 自定义壁纸时叠加一层柔化膜，让玻璃层更「吃」背景；
   浅色只是轻微柔光，暗色则整体压深，保证白字与卡片对比度 */
body.custom-wallpaper::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -9998;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(15, 23, 42, 0.14));
  transition: background 0.5s ease;
}

html.dark body.custom-wallpaper::after {
  background: linear-gradient(180deg, rgba(10, 15, 32, 0.2), rgba(2, 6, 23, 0.48));
}

/* -------------------------------------------------------------
 * 3. 通用亚克力材质类
 * ----------------------------------------------------------- */
.acrylic-surface,
.acrylic-surface-strong,
.acrylic-surface-subtle {
  backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(var(--acrylic-blur)) saturate(var(--acrylic-saturate));
}

.acrylic-surface {
  background: var(--acrylic-bg);
  border: 1px solid var(--acrylic-border);
  box-shadow: var(--elevation-2), inset 0 1px 0 var(--acrylic-highlight);
}

.acrylic-surface-strong {
  background: var(--acrylic-bg-strong);
  border: 1px solid var(--acrylic-border);
  box-shadow: var(--elevation-4), inset 0 1px 0 var(--acrylic-highlight);
}

.acrylic-surface-subtle {
  background: var(--acrylic-bg-subtle);
  border: 1px solid var(--acrylic-hairline);
  box-shadow: var(--elevation-1), inset 0 1px 0 var(--acrylic-highlight);
}

/* 不支持 backdrop-filter 时的降级：提高不透明度保证可读性 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .acrylic-surface { background: rgba(255, 255, 255, 0.9); }
  .acrylic-surface-strong { background: rgba(255, 255, 255, 0.97); }
  .acrylic-surface-subtle { background: rgba(255, 255, 255, 0.82); }
  html.dark .acrylic-surface { background: rgba(24, 32, 50, 0.94); }
  html.dark .acrylic-surface-strong { background: rgba(19, 26, 42, 0.97); }
  html.dark .acrylic-surface-subtle { background: rgba(30, 39, 60, 0.86); }
}

/* -------------------------------------------------------------
 * 4. MUI 风格涟漪反馈
 * ----------------------------------------------------------- */
.mui-ripple-host {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.mui-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: currentColor;
  opacity: 0.28;
  pointer-events: none;
  animation: mui-ripple-in 620ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes mui-ripple-in {
  to { transform: scale(2.6); opacity: 0; }
}

/* -------------------------------------------------------------
 * 5. 首页：侧边栏已取消（导航由工具栏面包屑 + 网格目录卡片承担），
 *    原本的亚克力抽屉与移动端遮罩样式一并移除
 * ----------------------------------------------------------- */

/* -------------------------------------------------------------
 * 6. 首页：顶部操作按钮（亚克力胶囊）
 * ----------------------------------------------------------- */
.top-action-icon {
  width: 2.75rem !important;
  height: 2.75rem !important;
  color: hsl(var(--foreground)) !important;
  background: var(--acrylic-bg) !important;
  border: 1px solid var(--acrylic-border) !important;
  border-radius: var(--td-radius-round) !important;
  box-shadow: var(--elevation-2), inset 0 1px 0 var(--acrylic-highlight) !important;
  filter: none !important;
  backdrop-filter: blur(14px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(14px) saturate(var(--acrylic-saturate));
}

.top-action-icon:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-3), inset 0 1px 0 var(--acrylic-highlight) !important;
}

.top-action-icon:active {
  transform: translateY(0) scale(0.96);
}

body.custom-wallpaper .top-action-icon,
html.dark body.custom-wallpaper .top-action-icon {
  color: #ffffff !important;
  background: rgba(15, 23, 42, 0.34) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.theme-action-icon:hover,
.admin-action-icon:hover,
html.dark .theme-action-icon:hover,
html.dark .admin-action-icon:hover {
  color: hsl(var(--primary)) !important;
}

body.custom-wallpaper .theme-action-icon:hover,
body.custom-wallpaper .admin-action-icon:hover {
  color: #ffffff !important;
  background: rgba(15, 23, 42, 0.5) !important;
}

/* -------------------------------------------------------------
 * 6b. 主题切换按钮：日 / 月图标旋转淡入淡出 + 切换时的光晕脉冲
 * ----------------------------------------------------------- */
#themeToggleBtn {
  position: relative;
  display: grid;
  place-items: center;
  overflow: visible;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, background 0.3s ease;
}

/* 两个图标叠在同一格里，靠 transform/opacity 平滑互换
   （覆盖 Tailwind 的 block / dark:hidden 瞬时显隐） */
#themeToggleBtn svg {
  grid-area: 1 / 1;
  display: block !important;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s ease;
  will-change: transform, opacity;
}

#themeIconSun { opacity: 1; transform: rotate(0deg) scale(1); }
#themeIconMoon { opacity: 0; transform: rotate(90deg) scale(0.3); }

html.dark #themeIconSun { opacity: 0; transform: rotate(-90deg) scale(0.3); }
html.dark #themeIconMoon { opacity: 1; transform: rotate(0deg) scale(1); }

#themeToggleBtn:active {
  transform: translateY(0) scale(0.9);
}

/* 切换瞬间：按钮向外扩散一圈光晕，让动画「从按钮长出来」 */
.theme-animating #themeToggleBtn::after {
  content: '';
  position: absolute;
  inset: -0.35rem;
  border-radius: var(--td-radius-round);
  pointer-events: none;
  background: radial-gradient(circle, hsl(var(--primary) / 0.45) 0%, transparent 72%);
  animation: theme-btn-glow 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes theme-btn-glow {
  from { opacity: 0; transform: scale(0.4); }
  35% { opacity: 1; }
  to { opacity: 0; transform: scale(2.1); }
}

@media (prefers-reduced-motion: reduce) {
  #themeToggleBtn,
  #themeToggleBtn svg {
    transition: none;
  }

  .theme-animating #themeToggleBtn::after {
    animation: none;
    opacity: 0;
  }
}

/* 移动端侧边栏按钮 */
#sidebarToggle {
  background: var(--acrylic-bg) !important;
  border: 1px solid var(--acrylic-border) !important;
  border-radius: var(--td-radius-medium) !important;
  box-shadow: var(--elevation-2), inset 0 1px 0 var(--acrylic-highlight) !important;
  backdrop-filter: blur(14px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(14px) saturate(var(--acrylic-saturate));
}

/* -------------------------------------------------------------
 * 7. 首页：搜索区
 * ----------------------------------------------------------- */
.home-search-field .search-input-target,
input.search-input-target {
  border-radius: var(--td-radius-extra-large) !important;
  backdrop-filter: blur(18px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(18px) saturate(var(--acrylic-saturate));
  box-shadow: var(--elevation-3), inset 0 1px 0 var(--acrylic-highlight) !important;
  border: 1px solid var(--acrylic-border) !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

input.search-input-target:focus {
  border-color: hsl(var(--ring) / 0.55) !important;
  box-shadow: var(--elevation-4), 0 0 0 4px hsl(var(--ring) / 0.16), inset 0 1px 0 var(--acrylic-highlight) !important;
}

html.dark input[type="text"].search-input-target,
html.dark input.search-input-target {
  background-color: rgba(15, 23, 42, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

/* 搜索引擎切换胶囊 */
.search-engine-option {
  border-radius: var(--td-radius-round) !important;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.search-engine-option:hover { border-color: var(--acrylic-border); }

.search-engine-option.active {
  background: var(--acrylic-bg-strong) !important;
  border: 1px solid var(--acrylic-border) !important;
  box-shadow: var(--elevation-1), inset 0 1px 0 var(--acrylic-highlight);
}

/* -------------------------------------------------------------
 * 8. 首页：分类导航胶囊
 * ----------------------------------------------------------- */
.nav-btn {
  border-radius: var(--td-radius-round) !important;
  backdrop-filter: blur(12px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(12px) saturate(var(--acrylic-saturate));
  transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.nav-btn.inactive {
  background-color: var(--acrylic-bg) !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid var(--acrylic-border) !important;
  box-shadow: var(--elevation-1), inset 0 1px 0 var(--acrylic-highlight);
}

.nav-btn.inactive:hover {
  background-color: var(--acrylic-bg-strong) !important;
  border-color: hsl(var(--ring) / 0.4) !important;
  transform: translateY(-1px);
  box-shadow: var(--elevation-2), inset 0 1px 0 var(--acrylic-highlight);
}

.nav-btn.active {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: 1px solid hsl(var(--primary)) !important;
  box-shadow: var(--elevation-3), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  font-weight: 600;
}

body.custom-wallpaper .nav-btn.inactive,
html.dark body.custom-wallpaper .nav-btn.inactive {
  background-color: rgba(15, 23, 42, 0.34) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

body.custom-wallpaper .nav-btn.inactive:hover {
  background-color: rgba(15, 23, 42, 0.5) !important;
}

body.custom-wallpaper .nav-btn.active,
html.dark.custom-wallpaper .nav-btn.active {
  background-color: hsl(var(--primary)) !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------
 * 9. 首页：下拉菜单
 * ----------------------------------------------------------- */
.dropdown-menu {
  background: var(--acrylic-bg-strong) !important;
  border: 1px solid var(--acrylic-border) !important;
  border-radius: var(--td-radius-large) !important;
  box-shadow: var(--elevation-4), inset 0 1px 0 var(--acrylic-highlight) !important;
  backdrop-filter: blur(22px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(22px) saturate(var(--acrylic-saturate));
  padding: 0.35rem !important;
  overflow: hidden;
}

.dropdown-item {
  border-radius: var(--td-radius-medium) !important;
  color: hsl(var(--foreground)) !important;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.dropdown-item:hover { background: hsl(var(--muted) / 0.7) !important; }

.dropdown-item.active {
  background: hsl(var(--primary) / 0.14) !important;
  color: hsl(var(--primary)) !important;
}

html.dark .dropdown-menu {
  background: rgba(17, 24, 39, 0.86) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .dropdown-item { color: hsl(var(--foreground)) !important; }
html.dark .dropdown-item:hover { background: rgba(255, 255, 255, 0.08) !important; }
html.dark .dropdown-item.active {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

/* -------------------------------------------------------------
 * 10. 首页：书签卡片（核心亚克力材质）
 * ----------------------------------------------------------- */
.site-card {
  background: var(--acrylic-bg) !important;
  border: 1px solid var(--acrylic-border) !important;
  border-radius: var(--card-radius, var(--td-radius-extra-large)) !important;
  box-shadow: var(--elevation-2), inset 0 1px 0 var(--acrylic-highlight) !important;
  backdrop-filter: blur(var(--frosted-glass-blur, var(--acrylic-blur))) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(var(--frosted-glass-blur, var(--acrylic-blur))) saturate(var(--acrylic-saturate));
  transition: transform 0.32s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.32s cubic-bezier(0.25, 0.8, 0.25, 1),
              background-color 0.3s ease,
              border-color 0.3s ease;
}

.site-card:hover {
  background: var(--acrylic-bg-strong) !important;
  border: 1px solid hsl(var(--ring) / 0.45) !important;
  box-shadow: var(--elevation-4), 0 0 0 4px hsl(var(--ring) / 0.1), inset 0 1px 0 var(--acrylic-highlight) !important;
}

/* 显式开启毛玻璃时加强通透度 */
.site-card.frosted-glass-effect {
  --acrylic-bg: rgba(255, 255, 255, 0.44);
}

html.dark .site-card.frosted-glass-effect {
  --acrylic-bg: rgba(30, 41, 59, 0.42);
}

html.dark .site-card {
  background: rgba(30, 41, 59, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html.dark .site-card:hover {
  background: rgba(30, 41, 59, 0.68) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: var(--elevation-4), 0 0 0 4px rgba(255, 255, 255, 0.06) !important;
}

/* 卡片内分类胶囊（TDesign Tag 质感） */
.site-card .site-category,
.site-card .inline-flex {
  border-radius: var(--td-radius-round) !important;
  background: hsl(var(--primary) / 0.1) !important;
  color: hsl(var(--primary)) !important;
  border: 1px solid hsl(var(--primary) / 0.16) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html.dark .site-card .site-category,
html.dark .site-card .inline-flex {
  background: rgba(255, 255, 255, 0.09) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 卡片内复制按钮 */
.copy-btn {
  border-radius: var(--td-radius-round) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.copy-btn:hover { transform: translateY(-1px); }

/* 无 logo 时的首字母占位（玻璃徽章） */
.site-card .site-icon .rounded-lg.bg-primary-600 {
  border-radius: var(--td-radius-large) !important;
  background: linear-gradient(140deg, hsl(var(--primary)), hsl(var(--accent))) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--elevation-1);
}

.site-card .site-icon img {
  border-radius: var(--td-radius-large) !important;
}

/* -------------------------------------------------------------
 * 11. 首页：回到顶部 / 模态框
 * ----------------------------------------------------------- */
#backToTop {
  background: var(--acrylic-bg-strong) !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid var(--acrylic-border) !important;
  border-radius: var(--td-radius-round) !important;
  box-shadow: var(--elevation-3), inset 0 1px 0 var(--acrylic-highlight) !important;
  backdrop-filter: blur(16px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(16px) saturate(var(--acrylic-saturate));
}

#backToTop:hover { transform: translateY(-2px); }

#addSiteBtnFloating,
#addSiteBtnSidebar {
  background: hsl(var(--accent)) !important;
  border-radius: var(--td-radius-round) !important;
  box-shadow: var(--elevation-3), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

#addSiteBtnFloating:hover,
#addSiteBtnSidebar:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* 模态框统一亚克力化 */
#addSiteModal > div,
#userAuthModal > div,
#userBookmarkModal > div,
#ucFolderModal > div,
#ucFolderPickerModal > div {
  background: var(--acrylic-bg-strong) !important;
  border: 1px solid var(--acrylic-border) !important;
  border-radius: var(--td-radius-extra-large) !important;
  box-shadow: var(--elevation-4), inset 0 1px 0 var(--acrylic-highlight) !important;
  backdrop-filter: blur(26px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(26px) saturate(var(--acrylic-saturate));
}

#addSiteModal input,
#addSiteModal textarea,
#addSiteModal select,
#userAuthModal input,
#userAuthModal select,
#userBookmarkModal input,
#userBookmarkModal textarea,
#userBookmarkModal select,
#ucFolderModal input,
#ucFolderModal select,
#ucFolderPickerModal select {
  background: var(--acrylic-bg-subtle) !important;
  border: 1px solid var(--acrylic-border) !important;
  border-radius: var(--td-radius-medium) !important;
  color: hsl(var(--foreground)) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#addSiteModal input:focus,
#addSiteModal textarea:focus,
#addSiteModal select:focus,
#userAuthModal input:focus,
#userBookmarkModal input:focus,
#userBookmarkModal textarea:focus,
#userBookmarkModal select:focus,
#ucFolderModal input:focus,
#ucFolderModal select:focus,
#ucFolderPickerModal select:focus {
  outline: none !important;
  border-color: hsl(var(--ring) / 0.6) !important;
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.18) !important;
}

#addSiteModal h2,
#userAuthModal h2,
#userBookmarkModal h2,
#ucFolderModal h2,
#ucFolderPickerModal h2 { color: hsl(var(--foreground)) !important; }

/* -------------------------------------------------------------
 * 12. 用户中心（登录/注册/我的书签）
 * ----------------------------------------------------------- */
.uc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2.5rem;
  padding: 0 1.15rem;
  border-radius: var(--td-radius-medium);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.uc-btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.uc-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--elevation-3), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.uc-btn-ghost {
  background: var(--acrylic-bg-subtle);
  border-color: var(--acrylic-border);
  color: hsl(var(--foreground));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.uc-btn-ghost:hover { background: var(--acrylic-bg-strong); }

.uc-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* 视图切换分段控件（MUI ToggleButtonGroup 质感） */
.uc-segmented {
  display: inline-flex;
  padding: 0.25rem;
  gap: 0.25rem;
  border-radius: var(--td-radius-round);
  background: var(--acrylic-bg-subtle);
  border: 1px solid var(--acrylic-border);
  box-shadow: inset 0 1px 0 var(--acrylic-highlight);
  backdrop-filter: blur(14px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(14px) saturate(var(--acrylic-saturate));
}

.uc-segmented button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.9rem;
  border: 0;
  cursor: pointer;
  border-radius: var(--td-radius-round);
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  font-weight: 500;
  transition: background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.uc-segmented button:hover { color: hsl(var(--foreground)); }

.uc-segmented button[aria-selected="true"] {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: var(--elevation-1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 顶部操作区的文字按钮（与图标按钮同材质） */
.uc-top-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.75rem;
  padding: 0 1.15rem;
  border-radius: var(--td-radius-round);
  background: var(--acrylic-bg);
  border: 1px solid var(--acrylic-border);
  box-shadow: var(--elevation-2), inset 0 1px 0 var(--acrylic-highlight);
  backdrop-filter: blur(14px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(14px) saturate(var(--acrylic-saturate));
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.uc-top-action:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-3), inset 0 1px 0 var(--acrylic-highlight);
}

body.custom-wallpaper .uc-top-action {
  background: rgba(15, 23, 42, 0.34);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

body.custom-wallpaper .uc-top-action:hover { background: rgba(15, 23, 42, 0.5); }

/* 用户面板包裹层：inline-flex 消除行内基线的下沉间隙，
 * 保证头像与主题 / 后台图标在固定定位容器中垂直居中对齐。
 */
#ucUserShell,
#ucUserPanel {
  display: inline-flex;
  align-items: center;
}

/* 用户头像按钮 */
.uc-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--td-radius-round);
  background: linear-gradient(140deg, hsl(var(--primary)), hsl(var(--accent)));
  border: 1px solid var(--acrylic-border);
  box-shadow: var(--elevation-2), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}

.uc-avatar:hover { transform: translateY(-2px); box-shadow: var(--elevation-3), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.uc-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* 用户菜单下拉 */
.uc-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 11rem;
  padding: 0.35rem;
  border-radius: var(--td-radius-large);
  background: var(--acrylic-bg-strong);
  border: 1px solid var(--acrylic-border);
  box-shadow: var(--elevation-4), inset 0 1px 0 var(--acrylic-highlight);
  backdrop-filter: blur(24px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(24px) saturate(var(--acrylic-saturate));
  z-index: 60;
}

.uc-menu[hidden] { display: none !important; }

.uc-menu button,
.uc-menu a {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border: 0;
  cursor: pointer;
  background: transparent;
  border-radius: var(--td-radius-medium);
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
  text-align: left;
  text-decoration: none;
  transition: background-color 0.18s ease;
}

.uc-menu button:hover,
.uc-menu a:hover { background: hsl(var(--muted) / 0.75); }

.uc-menu .uc-menu-danger { color: #dc2626; }

/* 我的书签面板 */
#userBookmarksPanel {
  background: var(--acrylic-bg-subtle) !important;
  border: 1px solid var(--acrylic-border) !important;
  border-radius: var(--td-radius-extra-large) !important;
  box-shadow: var(--elevation-2), inset 0 1px 0 var(--acrylic-highlight) !important;
  backdrop-filter: blur(20px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(20px) saturate(var(--acrylic-saturate));
}

.uc-bookmark-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--td-radius-large);
  background: var(--acrylic-bg-subtle);
  border: 1px solid var(--acrylic-hairline);
  box-shadow: inset 0 1px 0 var(--acrylic-highlight);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.uc-bookmark-item:hover {
  transform: translateY(-1px);
  background: var(--acrylic-bg);
  box-shadow: var(--elevation-2), inset 0 1px 0 var(--acrylic-highlight);
}

.uc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid transparent;
  border-radius: var(--td-radius-medium);
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.uc-icon-btn:hover {
  background: hsl(var(--muted) / 0.8);
  color: hsl(var(--foreground));
}

.uc-icon-btn.uc-icon-danger:hover { background: rgba(220, 38, 38, 0.12); color: #dc2626; }

/* 快捷方式工具栏 */
.uc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--td-radius-extra-large);
  background: var(--acrylic-bg-subtle);
  border: 1px solid var(--acrylic-border);
  box-shadow: inset 0 1px 0 var(--acrylic-highlight);
  backdrop-filter: blur(18px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(18px) saturate(var(--acrylic-saturate));
}

/* 左侧信息块：目录路径 + 统计文案，两行堆叠 */
.uc-toolbar-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 12rem;
  min-width: 0;
}

.uc-toolbar-meta {
  margin: 0;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}

.uc-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* 悬浮添加入口 */
.uc-fab {
  position: fixed;
  right: 2rem;
  bottom: 5.5rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--acrylic-border);
  border-radius: var(--td-radius-round);
  background: linear-gradient(140deg, hsl(var(--primary)), hsl(var(--accent)));
  color: #fff;
  cursor: pointer;
  box-shadow: var(--elevation-4), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}

.uc-fab:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-4), 0 0 0 4px hsl(var(--ring) / 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 未登录引导 */
.uc-login-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 3rem 1.5rem;
  text-align: center;
  border-radius: var(--td-radius-extra-large);
  background: var(--acrylic-bg-subtle);
  border: 1px solid var(--acrylic-border);
  box-shadow: var(--elevation-2), inset 0 1px 0 var(--acrylic-highlight);
  backdrop-filter: blur(20px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(20px) saturate(var(--acrylic-saturate));
}

.uc-login-prompt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.25rem;
  border-radius: var(--td-radius-round);
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}

.uc-login-prompt-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.uc-login-prompt-text {
  margin: 0;
  max-width: 26rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
}

.uc-login-prompt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.75rem;
}

/* 卡片上的编辑 / 删除按钮 */
.site-card .uc-icon-btn {
  width: 1.75rem;
  height: 1.75rem;
}

/* 我的书签条目内部元素 */
.uc-bookmark-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--td-radius-large);
  overflow: hidden;
  text-decoration: none;
}

.uc-bookmark-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--td-radius-large);
  background: rgba(148, 163, 184, 0.15);
}

.uc-bookmark-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--td-radius-large);
  background: linear-gradient(140deg, hsl(var(--primary)), hsl(var(--accent)));
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.uc-bookmark-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uc-bookmark-name:hover { color: hsl(var(--primary)); }

.uc-bookmark-url {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uc-bookmark-tag {
  flex-shrink: 0;
  padding: 0.05rem 0.5rem;
  border-radius: var(--td-radius-round);
  font-size: 0.6875rem;
  font-weight: 500;
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  border: 1px solid hsl(var(--primary) / 0.16);
}

html.dark .uc-bookmark-tag {
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.1);
}

/* 空状态 */
.uc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2.5rem 1rem;
  text-align: center;
  color: hsl(var(--muted-foreground));
}

/* 表单提示条 */
.uc-alert {
  border-radius: var(--td-radius-medium);
  padding: 0.55rem 0.8rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  border: 1px solid transparent;
}

.uc-alert-error { background: rgba(220, 38, 38, 0.1); color: #b91c1c; border-color: rgba(220, 38, 38, 0.22); }
.uc-alert-success { background: rgba(60, 151, 109, 0.12); color: #2e7755; border-color: rgba(60, 151, 109, 0.24); }
.uc-alert-info { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); border-color: hsl(var(--primary) / 0.2); }

html.dark .uc-alert-error { color: #fca5a5; }
html.dark .uc-alert-success { color: #6ee7b7; }
html.dark .uc-alert-info { color: hsl(var(--primary)); }

/* Toast */
.uc-toast {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: var(--td-radius-large);
  background: var(--acrylic-bg-strong);
  border: 1px solid var(--acrylic-border);
  box-shadow: var(--elevation-4), inset 0 1px 0 var(--acrylic-highlight);
  backdrop-filter: blur(22px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(22px) saturate(var(--acrylic-saturate));
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  max-width: min(22rem, calc(100vw - 2rem));
  /* 浮窗只做提示，绝不能挡住右上角的按钮 */
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.uc-toast[data-leaving="true"] { opacity: 0; transform: translateY(-6px); }

.uc-toast[data-type="success"] {
  border-color: rgba(60, 151, 109, 0.4);
  color: #2e7755;
}

.uc-toast[data-type="error"] {
  border-color: rgba(220, 38, 38, 0.4);
  color: #b91c1c;
}

html.dark .uc-toast[data-type="success"] { color: #6ee7b7; }
html.dark .uc-toast[data-type="error"] { color: #fca5a5; }

/* -------------------------------------------------------------
 * 13. 后台管理页 亚克力化
 * ----------------------------------------------------------- */
body:has(.admin-header) {
  background-color: hsl(var(--background));
  background-image:
    radial-gradient(46rem 32rem at 8% 4%, hsl(var(--glow-a) / 0.16) 0%, transparent 55%),
    radial-gradient(38rem 28rem at 92% 10%, hsl(var(--glow-b) / 0.13) 0%, transparent 52%),
    radial-gradient(42rem 30rem at 70% 94%, hsl(var(--glow-c) / 0.14) 0%, transparent 55%);
  background-attachment: fixed;
}

.admin-header,
.container > .admin-header {
  background: var(--acrylic-bg-strong) !important;
  border: 1px solid var(--acrylic-border) !important;
  border-radius: var(--td-radius-extra-large) !important;
  box-shadow: var(--elevation-2), inset 0 1px 0 var(--acrylic-highlight) !important;
  backdrop-filter: blur(20px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(20px) saturate(var(--acrylic-saturate));
}

.import-export,
.bookmark-list,
.category-list,
.settings-panel,
.modal-content,
.preview-panel,
[class*="panel"] {
  border-radius: var(--td-radius-extra-large);
}

@media (min-width: 1024px) {
  body:has(.admin-header) .container {
    max-width: 1400px;
  }
}

/* 后台下拉/弹层亚克力化 */
body:has(.admin-header) .custom-dropdown-menu,
body:has(.admin-header) .dropdown-panel {
  background: var(--acrylic-bg-strong) !important;
  border: 1px solid var(--acrylic-border) !important;
  border-radius: var(--td-radius-large) !important;
  box-shadow: var(--elevation-4), inset 0 1px 0 var(--acrylic-highlight) !important;
  backdrop-filter: blur(22px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(22px) saturate(var(--acrylic-saturate));
}

/* 后台按钮统一圆角与按压反馈 */
body:has(.admin-header) .refresh-btn,
body:has(.admin-header) .logout-btn {
  border-radius: var(--td-radius-medium) !important;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

body:has(.admin-header) .refresh-btn:hover,
body:has(.admin-header) .logout-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--elevation-2);
}

/* -------------------------------------------------------------
 * 13b. 后台 · 用户管理 / 默认书签
 * ----------------------------------------------------------- */
.admin-toolbar-hint {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #64748b;
}

.admin-stats-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

@media (min-width: 900px) {
  .admin-stats-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.admin-stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.15rem;
  border-radius: var(--td-radius-large);
  background: var(--acrylic-bg-subtle);
  border: 1px solid var(--acrylic-border);
  box-shadow: var(--elevation-1), inset 0 1px 0 var(--acrylic-highlight);
  backdrop-filter: blur(14px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(14px) saturate(var(--acrylic-saturate));
}

.admin-stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: #64748b;
}

.admin-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: #1e293b;
}

.admin-tab-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.admin-search-input {
  flex: 1 1 240px;
  min-width: 200px;
  min-height: 42px;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: var(--td-radius-medium);
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-search-input:focus {
  border-color: hsl(var(--ring) / 0.6);
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.15);
}

.admin-search-input[data-empty="true"]::before {
  content: attr(data-placeholder);
  color: #94a3b8;
  pointer-events: none;
}

.user-status {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.55rem;
  border-radius: var(--td-radius-round);
  font-size: 0.75rem;
  font-weight: 500;
}

.user-status-active {
  background: rgba(60, 151, 109, 0.14);
  color: #2e7755;
}

.user-status-disabled {
  background: rgba(148, 163, 184, 0.2);
  color: #64748b;
}

.user-status-encrypted {
  background: hsl(var(--primary) / 0.14);
  color: hsl(var(--primary));
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 0.8125rem;
  color: hsl(var(--primary));
  text-decoration: none;
  transition: opacity 0.18s ease;
}

.link-btn:hover { text-decoration: underline; opacity: 0.85; }
.link-btn-danger { color: #dc2626; }

/* 默认书签卡片 */
.default-bm-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem;
  border-radius: var(--td-radius-large);
  background: var(--acrylic-bg-subtle);
  border: 1px solid var(--acrylic-border);
  box-shadow: var(--elevation-1), inset 0 1px 0 var(--acrylic-highlight);
  backdrop-filter: blur(14px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(14px) saturate(var(--acrylic-saturate));
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}

.default-bm-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-2), inset 0 1px 0 var(--acrylic-highlight);
}

.default-bm-icon { flex-shrink: 0; }

.default-bm-logo,
.default-bm-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--td-radius-large);
  object-fit: cover;
}

.default-bm-initial {
  background: linear-gradient(140deg, hsl(var(--primary)), hsl(var(--accent)));
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.default-bm-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.default-bm-name {
  font-size: 0.875rem;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.default-bm-url {
  font-size: 0.75rem;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.default-bm-tag {
  align-self: flex-start;
  margin-top: 0.1rem;
  padding: 0.05rem 0.5rem;
  border-radius: var(--td-radius-round);
  font-size: 0.6875rem;
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

.default-bm-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
  align-items: flex-end;
}

/* -------------------------------------------------------------
 * 14. 无障碍与动效降级
 * ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mui-ripple { animation: none; opacity: 0; }
  .site-card:hover { transform: translateY(-2px); }
  .top-action-icon:hover,
  .nav-btn.inactive:hover,
  .uc-btn-primary:hover { transform: none; }
}

.uc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid hsl(var(--ring) / 0.7);
  outline-offset: 2px;
}

/* -------------------------------------------------------------
 * 13. 首页图标墙（图标 + 标题）与右键 / 长按菜单
 * ----------------------------------------------------------- */

.uc-ctx-menu {
  position: fixed;
  z-index: 90;
  min-width: 168px;
  padding: 0.3rem;
  border-radius: var(--td-radius-large, 14px);
  border: 1px solid var(--acrylic-border);
  background: var(--acrylic-bg-strong);
  box-shadow: var(--elevation-4), inset 0 1px 0 var(--acrylic-highlight);
  backdrop-filter: blur(20px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(20px) saturate(var(--acrylic-saturate));
}

.uc-ctx-menu[hidden] { display: none !important; }

.uc-ctx-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: var(--td-radius-medium, 8px);
  background: transparent;
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.uc-ctx-item:hover { background: hsl(var(--muted) / 0.8); }
.uc-ctx-item-danger { color: #dc2626; }
.uc-ctx-sep { height: 1px; margin: 0.25rem 0.3rem; background: var(--acrylic-hairline); }

/* -------------------------------------------------------------
 * 14. 离线网页（列表 + 阅读器）
 * ----------------------------------------------------------- */

#ucOfflineModal > div,
#ucReaderModal > div {
  background: var(--acrylic-bg-strong) !important;
  border: 1px solid var(--acrylic-border) !important;
  border-radius: var(--td-radius-extra-large) !important;
  box-shadow: var(--elevation-4), inset 0 1px 0 var(--acrylic-highlight) !important;
  backdrop-filter: blur(26px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(26px) saturate(var(--acrylic-saturate));
}

#ucOfflineModal h2,
#ucReaderModal h2 { color: hsl(var(--foreground)) !important; }

.uc-offline-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 58vh;
  overflow-y: auto;
  padding-right: 0.15rem;
}

.uc-offline-empty {
  margin: 0;
  padding: 2rem 1rem;
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
}

.uc-offline-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--td-radius-large, 14px);
  border: 1px solid var(--acrylic-border);
  background: var(--acrylic-bg-subtle);
}

.uc-offline-item-main { flex: 1; min-width: 0; }

.uc-offline-item-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uc-offline-item-meta {
  font-size: 0.72rem;
  color: hsl(var(--muted-foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uc-offline-item-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }

.uc-offline-icon {
  width: 26px;
  height: 26px;
  border-radius: var(--td-radius-small, 6px);
  object-fit: cover;
  flex-shrink: 0;
}

.uc-offline-icon-text {
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 0.8rem;
  font-weight: 600;
}

.uc-btn-sm {
  height: 2rem !important;
  padding: 0 0.65rem !important;
  font-size: 0.8rem;
}

.uc-btn-danger { color: #dc2626 !important; }

.uc-reader-body {
  max-height: 62vh;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.92rem;
  line-height: 1.8;
  color: hsl(var(--foreground));
  padding-right: 0.25rem;
}

/* -------------------------------------------------------------
 * 15. 图标墙 v2：正方形卡片 + 分页 + header 响应式修复
 * ----------------------------------------------------------- */


/* 正方形图标格：图标居中，标题固定一行、超出省略 */
/* 分页 */
.uc-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.uc-pager.hidden { display: none !important; }

.uc-pager-btn {
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--acrylic-border);
  background: var(--acrylic-bg);
  color: hsl(var(--foreground));
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.uc-pager-btn:hover:not(:disabled) {
  background: var(--acrylic-bg-strong);
  transform: translateY(-1px);
}

.uc-pager-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.uc-pager-info {
  min-width: 4.5rem;
  text-align: center;
  font-size: 0.82rem;
  color: hsl(var(--muted-foreground));
}

/* -------------------------------------------------------------
 * 16. 图标墙定稿：正方形框内只放图标，标题在框外下方
 * ----------------------------------------------------------- */

.uc-tiles {
  /* 图标墙：从左到右、从上到下等宽排布，铺满容器不居中留白 */
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)) !important;
  justify-items: stretch !important;
  justify-content: stretch !important;
  gap: 0.9rem 0.6rem !important;
}

@media (min-width: 550px) {
  .uc-tiles {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important;
    gap: 1rem 0.75rem !important;
  }
}

.uc-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
  aspect-ratio: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.uc-tile-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--td-radius-large, 14px);
  border: 1px solid var(--acrylic-border);
  background: var(--acrylic-bg);
  /* 顶部内高光：让玻璃「有厚度」，浅色更通透、暗色更立体 */
  box-shadow: var(--elevation-1), inset 0 1px 0 var(--acrylic-highlight);
  backdrop-filter: blur(var(--frosted-glass-blur, 15px)) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(var(--frosted-glass-blur, 15px)) saturate(var(--acrylic-saturate));
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.uc-tile:hover .uc-tile-box {
  transform: translateY(-3px);
  box-shadow: var(--elevation-3), inset 0 1px 0 var(--acrylic-highlight);
  background: var(--acrylic-bg-strong);
}

.uc-tile:active .uc-tile-box { transform: translateY(-1px); }

.uc-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border-radius: 0;
}

.uc-tile-img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
}

.uc-tile-initial {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 600;
  font-size: 0.95rem;
}

.uc-tile-name {
  width: 100%;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.3;
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 圆形加号按钮 */
.uc-btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0 !important;
  border-radius: 9999px !important;
}


/* -------------------------------------------------------------
 * 17. 离线阅读：净化后 HTML 的排版样式
 * ----------------------------------------------------------- */

.uc-reader-html {
  white-space: normal;
}

.uc-reader-html > :first-child { margin-top: 0; }
.uc-reader-html > :last-child { margin-bottom: 0; }

.uc-reader-html p,
.uc-reader-html ul,
.uc-reader-html ol,
.uc-reader-html blockquote,
.uc-reader-html pre,
.uc-reader-html table,
.uc-reader-html figure {
  margin: 0 0 0.9em;
}

.uc-reader-html h1,
.uc-reader-html h2,
.uc-reader-html h3,
.uc-reader-html h4,
.uc-reader-html h5,
.uc-reader-html h6 {
  margin: 1.3em 0 0.6em;
  line-height: 1.35;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.uc-reader-html h1 { font-size: 1.5rem; }
.uc-reader-html h2 { font-size: 1.28rem; }
.uc-reader-html h3 { font-size: 1.12rem; }
.uc-reader-html h4,
.uc-reader-html h5,
.uc-reader-html h6 { font-size: 1rem; }

.uc-reader-html ul,
.uc-reader-html ol { padding-left: 1.35em; }
.uc-reader-html ul { list-style: disc; }
.uc-reader-html ol { list-style: decimal; }
.uc-reader-html li { margin: 0.25em 0; }

.uc-reader-html a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.uc-reader-html blockquote {
  padding: 0.4em 0.9em;
  border-left: 3px solid hsl(var(--primary) / 0.5);
  background: var(--acrylic-bg-subtle);
  border-radius: 0 8px 8px 0;
  color: hsl(var(--muted-foreground));
}

.uc-reader-html pre {
  padding: 0.8em 1em;
  overflow-x: auto;
  border-radius: 10px;
  background: hsl(var(--muted) / 0.6);
  font-size: 0.85rem;
  line-height: 1.6;
}

.uc-reader-html code {
  padding: 0.1em 0.35em;
  border-radius: 5px;
  background: hsl(var(--muted) / 0.6);
  font-size: 0.88em;
}

.uc-reader-html pre code {
  padding: 0;
  background: transparent;
}

.uc-reader-html table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.uc-reader-html th,
.uc-reader-html td {
  padding: 0.45em 0.6em;
  border: 1px solid var(--acrylic-border);
  text-align: left;
}

.uc-reader-html hr {
  margin: 1.2em 0;
  border: 0;
  border-top: 1px solid var(--acrylic-border);
}

.uc-reader-html img { max-width: 100%; height: auto; }


/* -------------------------------------------------------------
 * 18. 首页图标外观（由后台设置经 body data 属性下发）
 *     data-uc-tile-style / data-uc-tile-style-mobile：style1 方框 / style2 圆框 / style3 无框
 *     data-uc-frosted / data-uc-frosted-mobile：毛玻璃开关
 * ----------------------------------------------------------- */

.uc-tile-box {
  border-radius: var(--card-radius, var(--td-radius-large, 14px));
}

@media (min-width: 768px) {
  [data-uc-frosted="off"] .uc-tile-box {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--acrylic-bg-strong) !important;
  }

  [data-uc-tile-style="style2"] .uc-tile-box {
    border-radius: 50% !important;
  }

  [data-uc-tile-style="style3"] .uc-tile-box {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (max-width: 767px) {
  [data-uc-frosted-mobile="off"] .uc-tile-box {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--acrylic-bg-strong) !important;
  }

  [data-uc-tile-style-mobile="style2"] .uc-tile-box {
    border-radius: 50% !important;
  }

  [data-uc-tile-style-mobile="style3"] .uc-tile-box {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


/* -------------------------------------------------------------
 * 19. 目录路径面包屑（首页唯一的上级导航入口）
 * ----------------------------------------------------------- */

.uc-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin: 0;
  font-size: 0.82rem;
}

.uc-crumb {
  padding: 0.16rem 0.42rem;
  border-radius: 6px;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease;
}

a.uc-crumb:hover { background: hsl(var(--muted) / 0.7); color: hsl(var(--foreground)); }
.uc-crumb.is-current { color: hsl(var(--foreground)); font-weight: 600; }
.uc-crumb-sep { color: hsl(var(--muted-foreground)); opacity: 0.6; }

.uc-ctx-title {
  max-width: 12rem;
  padding: 0.3rem 0.6rem 0.45rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid var(--acrylic-hairline);
  font-size: 0.72rem;
  color: hsl(var(--muted-foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -------------------------------------------------------------
 * 20. 网格中的目录卡片（主页也能看到并进入目录）
 *     与书签卡片同尺寸同布局，仅用主题色图标 + 角标区分；
 *     方框/圆框/无框等外观仍沿用后台的图标样式设置
 * ----------------------------------------------------------- */

.uc-folder-tile .uc-tile-box {
  background: linear-gradient(160deg, hsl(var(--primary) / 0.16), hsl(var(--primary) / 0.05)), var(--acrylic-bg);
  border-color: hsl(var(--primary) / 0.32);
}

.uc-folder-tile:hover .uc-tile-box {
  background: linear-gradient(160deg, hsl(var(--primary) / 0.24), hsl(var(--primary) / 0.1)), var(--acrylic-bg-strong);
  border-color: hsl(var(--primary) / 0.5);
}

.uc-folder-tile-icon { color: hsl(var(--primary)); }

/* 图标尺寸写死在这里：JS 模板里新增的 Tailwind 工具类不会进构建产物 */
.uc-folder-tile-icon svg {
  width: 2.25rem;
  height: 2.25rem;
}

.uc-folder-tile .uc-tile-name { font-weight: 600; }

.uc-folder-tile-badge {
  position: absolute;
  top: 4px;
  right: 5px;
  min-width: 1.1rem;
  padding: 0 0.26rem;
  border-radius: 9999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.12rem;
  text-align: center;
}

/* -------------------------------------------------------------
 * 21. 后台 · 默认书签目录树（左侧树 + 右侧书签）
 *     左侧为可展开折叠的多级目录，行尾「⋯」弹出目录操作菜单
 * ----------------------------------------------------------- */

.df-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 960px) {
  .df-layout {
    grid-template-columns: 258px minmax(0, 1fr);
    align-items: start;
  }
}

.df-sidebar {
  padding: 0.85rem 0.7rem;
  border-radius: var(--td-radius-large);
  background: var(--acrylic-bg-subtle);
  border: 1px solid var(--acrylic-border);
  box-shadow: var(--elevation-1), inset 0 1px 0 var(--acrylic-highlight);
  backdrop-filter: blur(14px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(14px) saturate(var(--acrylic-saturate));
}

.df-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.25rem 0.55rem;
  margin-bottom: 0.45rem;
  border-bottom: 1px solid var(--acrylic-border);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #64748b;
}

.df-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid var(--acrylic-border);
  border-radius: var(--td-radius-medium);
  background: var(--acrylic-bg);
  color: #475569;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.df-icon-btn svg { width: 0.9rem; height: 0.9rem; }

.df-icon-btn:hover {
  background: hsl(var(--primary) / 0.12);
  border-color: hsl(var(--primary) / 0.4);
  color: hsl(var(--primary));
}

.df-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 62vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.df-node { min-width: 0; }

.df-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.34rem 0.45rem;
  border-radius: var(--td-radius-medium);
  font-size: 0.8125rem;
  color: #334155;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.df-row:hover { background: hsl(var(--primary) / 0.08); }

.df-row.is-active {
  background: hsl(var(--primary) / 0.14);
  color: hsl(var(--primary));
}

.df-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 0;
  background: none;
  color: #94a3b8;
  cursor: pointer;
  transition: transform 0.18s ease;
}

.df-toggle svg { width: 0.7rem; height: 0.7rem; }
.df-toggle.is-open { transform: rotate(90deg); }
.df-toggle.is-leaf { visibility: hidden; }

.df-row-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: #94a3b8;
}

.df-row-icon svg { width: 0.95rem; height: 0.95rem; }
.df-row.is-active .df-row-icon { color: hsl(var(--primary)); }

.df-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.df-row.is-active .df-row-name { font-weight: 600; }

.df-count {
  flex-shrink: 0;
  min-width: 1.3rem;
  padding: 0 0.3rem;
  border-radius: 9999px;
  background: rgba(148, 163, 184, 0.18);
  color: #64748b;
  font-size: 0.6875rem;
  line-height: 1.3rem;
  text-align: center;
}

.df-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #94a3b8;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.16s ease, color 0.16s ease;
}

.df-more svg { width: 0.8rem; height: 0.8rem; }
.df-row:hover .df-more { opacity: 1; }
.df-more:hover { color: hsl(var(--primary)); }

.df-empty {
  margin: 0.5rem 0.25rem;
  font-size: 0.75rem;
  line-height: 1.7;
  color: #94a3b8;
}

.df-empty-error { color: #dc2626; }

.df-main { min-width: 0; }

.df-main-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--acrylic-border);
}

.df-current-path { font-size: 0.9375rem; font-weight: 600; color: #1e293b; }
.df-current-meta { font-size: 0.75rem; color: #64748b; }

.df-menu {
  position: fixed;
  z-index: 2100;
  min-width: 10.5rem;
  padding: 0.3rem;
  border-radius: var(--td-radius-large);
  background: #fff;
  border: 1px solid var(--acrylic-border);
  box-shadow: var(--elevation-3);
}

.df-menu-title {
  padding: 0.3rem 0.5rem;
  font-size: 0.75rem;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.df-menu-item {
  display: block;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 0;
  border-radius: var(--td-radius-medium);
  background: none;
  text-align: left;
  font-size: 0.8125rem;
  color: #334155;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.df-menu-item:hover { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); }
.df-menu-item.is-danger { color: #dc2626; }
.df-menu-item.is-danger:hover { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.df-menu-sep { height: 1px; margin: 0.25rem 0; background: var(--acrylic-border); }

/* -------------------------------------------------------------
 * 22. 加密账户：注册选项 + 解锁面板
 * ----------------------------------------------------------- */

.uc-encrypt-group {
  padding: 0.75rem;
  border: 1px solid hsl(var(--primary) / 0.28);
  border-radius: var(--td-radius-large, 14px);
  background: hsl(var(--primary) / 0.06);
}

.uc-encrypt-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
}

.uc-encrypt-toggle input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.uc-encrypt-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.uc-encrypt-toggle-text strong {
  font-size: 0.875rem;
  font-weight: 600;
}

.uc-encrypt-toggle-text small {
  font-size: 0.75rem;
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
}

.uc-encrypt-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid hsl(var(--primary) / 0.2);
}

.uc-encrypt-warning {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #b45309;
}

/* 解锁面板 */
.uc-unlock {
  max-width: 34rem;
  margin: 0 auto 2rem;
  padding: 2rem 1.5rem;
  text-align: center;
  border-radius: var(--td-radius-extra-large, 18px);
  background: var(--acrylic-bg-subtle);
  border: 1px solid var(--acrylic-border);
  box-shadow: var(--elevation-1), inset 0 1px 0 var(--acrylic-highlight);
  backdrop-filter: blur(18px) saturate(var(--acrylic-saturate));
  -webkit-backdrop-filter: blur(18px) saturate(var(--acrylic-saturate));
}

.uc-unlock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.75rem;
  border-radius: 9999px;
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}

.uc-unlock-icon svg { width: 1.75rem; height: 1.75rem; }

.uc-unlock-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.uc-unlock-text {
  margin: 0 auto 1.25rem;
  max-width: 30rem;
  font-size: 0.8125rem;
  line-height: 1.75;
  color: hsl(var(--muted-foreground));
}

.uc-unlock-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.uc-unlock-form input {
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 20rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--td-radius-medium, 10px);
  border: 1px solid var(--acrylic-border);
  background: var(--acrylic-bg);
  color: hsl(var(--foreground));
  outline: none;
}

.uc-unlock-form input:focus {
  border-color: hsl(var(--ring) / 0.6);
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.15);
}

.uc-unlock-hint {
  margin: 0.75rem 0 0;
  font-size: 0.72rem;
  line-height: 1.7;
  color: hsl(var(--muted-foreground));
  opacity: 0.9;
}

/* 未解锁时禁止添加 */
.uc-toolbar-locked .uc-toolbar-actions { opacity: 0.45; pointer-events: none; }