/* =============================================================
 * 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;
}

/* -------------------------------------------------------------
 * 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;

  /* shadcn/ui 语义色（HSL 通道值，便于 alpha 叠加） */
  --background: 210 40% 98%;
  --foreground: 222 24% 16%;
  --card: 0 0% 100%;
  --card-foreground: 222 24% 16%;
  --muted: 214 32% 94%;
  --muted-foreground: 215 16% 47%;
  --primary: 213 41% 44%;
  --primary-foreground: 0 0% 100%;
  --accent: 156 43% 41%;
  --border: 214 32% 91%;
  --ring: 213 41% 44%;

  /* 亚克力材质参数 */
  --acrylic-blur: 20px;
  --acrylic-saturate: 180%;
  --acrylic-bg: rgba(255, 255, 255, 0.55);
  --acrylic-bg-strong: rgba(255, 255, 255, 0.72);
  --acrylic-bg-subtle: rgba(255, 255, 255, 0.38);
  --acrylic-border: rgba(255, 255, 255, 0.6);
  --acrylic-hairline: rgba(15, 23, 42, 0.08);
  --acrylic-highlight: rgba(255, 255, 255, 0.9);

  /* MUI elevation 阴影标度 */
  --elevation-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --elevation-2: 0 2px 4px rgba(15, 23, 42, 0.06), 0 4px 10px rgba(15, 23, 42, 0.08);
  --elevation-3: 0 6px 14px rgba(15, 23, 42, 0.08), 0 12px 28px rgba(15, 23, 42, 0.1);
  --elevation-4: 0 12px 24px rgba(15, 23, 42, 0.1), 0 24px 48px rgba(15, 23, 42, 0.12);

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

html.dark {
  --background: 222 30% 9%;
  --foreground: 210 30% 92%;
  --card: 222 28% 14%;
  --card-foreground: 210 30% 92%;
  --muted: 217 24% 20%;
  --muted-foreground: 215 20% 65%;
  --primary: 213 60% 66%;
  --primary-foreground: 222 30% 9%;
  --accent: 156 45% 55%;
  --border: 217 24% 24%;
  --ring: 213 60% 66%;

  --acrylic-bg: rgba(30, 41, 59, 0.5);
  --acrylic-bg-strong: rgba(30, 41, 59, 0.72);
  --acrylic-bg-subtle: rgba(30, 41, 59, 0.34);
  --acrylic-border: rgba(255, 255, 255, 0.1);
  --acrylic-hairline: rgba(255, 255, 255, 0.08);
  --acrylic-highlight: rgba(255, 255, 255, 0.14);

  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.28);
  --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.32), 0 4px 10px rgba(0, 0, 0, 0.34);
  --elevation-3: 0 6px 14px rgba(0, 0, 0, 0.38), 0 12px 28px rgba(0, 0, 0, 0.4);
  --elevation-4: 0 12px 24px rgba(0, 0, 0, 0.42), 0 24px 48px rgba(0, 0, 0, 0.46);
}

/* -------------------------------------------------------------
 * 2. 亚克力背景层（无自定义壁纸时的默认底）
 * ----------------------------------------------------------- */
#fixed-background.acrylic-backdrop {
  background-color: hsl(var(--background)) !important;
  background-image:
    radial-gradient(at 12% 8%, rgba(65, 109, 157, 0.28) 0px, transparent 55%),
    radial-gradient(at 88% 4%, rgba(60, 151, 109, 0.22) 0px, transparent 50%),
    radial-gradient(at 78% 88%, rgba(184, 141, 88, 0.24) 0px, transparent 55%),
    radial-gradient(at 4% 92%, rgba(65, 109, 157, 0.18) 0px, transparent 50%);
}

html.dark #fixed-background.acrylic-backdrop {
  background-color: hsl(var(--background)) !important;
  background-image:
    radial-gradient(at 12% 8%, rgba(65, 109, 157, 0.34) 0px, transparent 55%),
    radial-gradient(at 88% 4%, rgba(60, 151, 109, 0.2) 0px, transparent 50%),
    radial-gradient(at 78% 88%, rgba(120, 90, 60, 0.28) 0px, transparent 55%),
    radial-gradient(at 4% 92%, rgba(65, 109, 157, 0.22) 0px, transparent 50%);
}

/* 自定义壁纸时叠加一层柔化膜，让玻璃层更「吃」背景 */
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));
}

/* -------------------------------------------------------------
 * 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.88); }
  .acrylic-surface-strong { background: rgba(255, 255, 255, 0.96); }
  .acrylic-surface-subtle { background: rgba(255, 255, 255, 0.78); }
  html.dark .acrylic-surface { background: rgba(30, 41, 59, 0.9); }
  html.dark .acrylic-surface-strong { background: rgba(30, 41, 59, 0.96); }
  html.dark .acrylic-surface-subtle { background: rgba(30, 41, 59, 0.82); }
}

/* -------------------------------------------------------------
 * 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. 首页：侧边栏（亚克力抽屉）
 * ----------------------------------------------------------- */
#sidebar.sidebar {
  background: var(--acrylic-bg-strong) !important;
  backdrop-filter: blur(24px) saturate(var(--acrylic-saturate)) !important;
  -webkit-backdrop-filter: blur(24px) saturate(var(--acrylic-saturate)) !important;
  border-right: 1px solid var(--acrylic-border) !important;
  box-shadow: var(--elevation-3), inset -1px 0 0 var(--acrylic-hairline) !important;
}

#sidebar .p-6 > div > h3 {
  color: hsl(var(--muted-foreground)) !important;
  letter-spacing: 0.12em;
}

#sidebar a[href^="?catalog"],
#sidebar a[data-id] {
  border-radius: var(--td-radius-medium) !important;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

#sidebar a[href^="?catalog"]:hover,
#sidebar a[data-id]:hover {
  background: rgba(65, 109, 157, 0.12) !important;
  transform: translateX(2px);
}

#sidebar a.nav-item-active,
#sidebar a.active {
  background: rgba(65, 109, 157, 0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(65, 109, 157, 0.22);
}

html.dark #sidebar.sidebar {
  background: rgba(17, 24, 39, 0.72) !important;
  border-right-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark #sidebar a[href^="?catalog"]:hover,
html.dark #sidebar a[data-id]:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* 移动端遮罩：柔和模糊而非纯黑 */
#mobileOverlay.mobile-overlay.open,
#mobileOverlay.mobile-overlay {
  background: rgba(15, 23, 42, 0.32) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* -------------------------------------------------------------
 * 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;
}

/* 移动端侧边栏按钮 */
#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. 首页：统计行 / 页脚 / 回到顶部 / 模态框
 * ----------------------------------------------------------- */
.home-stats-row h2 {
  color: hsl(var(--foreground)) !important;
}

#hitokoto-parent { color: hsl(var(--muted-foreground)) !important; }

#app-scroll > .main-content > footer,
footer {
  background: transparent !important;
  border-top: 1px solid var(--acrylic-hairline) !important;
  color: hsl(var(--muted-foreground)) !important;
}

#app-scroll > .main-content > footer a:hover { color: hsl(var(--primary)) !important; }

#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 {
  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 {
  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 {
  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 { 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-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;
}

/* 侧边栏分类 */
.uc-sidebar-cat {
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  text-decoration: none;
}

.uc-sidebar-cat:hover {
  background: hsl(var(--primary) / 0.12);
}

.uc-sidebar-cat-active {
  background: hsl(var(--primary) / 0.16) !important;
  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.22);
}

.uc-sidebar-count {
  flex-shrink: 0;
  margin-left: 0.25rem;
  padding: 0.05rem 0.4rem;
  border-radius: var(--td-radius-round);
  font-size: 0.6875rem;
  background: hsl(var(--muted) / 0.85);
  color: hsl(var(--muted-foreground));
}

/* 卡片上的编辑 / 删除按钮 */
.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;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

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

/* -------------------------------------------------------------
 * 13. 后台管理页 亚克力化
 * ----------------------------------------------------------- */
body:has(.admin-header) {
  background-color: hsl(var(--background));
  background-image:
    radial-gradient(at 8% 4%, rgba(65, 109, 157, 0.18) 0px, transparent 52%),
    radial-gradient(at 92% 10%, rgba(60, 151, 109, 0.14) 0px, transparent 48%),
    radial-gradient(at 70% 92%, rgba(184, 141, 88, 0.16) 0px, transparent 52%);
  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;
}

.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;
}