/* 从 index.css 合并的全局样式 */
/* 不再通过CSS文件导入antd样式，改为通过ConfigProvider注入 */

/* 字体加载优化 - 减少CLS */
* {
  font-display: swap;
  /* 立即使用备用字体，减少字体加载导致的布局偏移 */
}

/* 全局样式和CSS变量 */
:root {
  /* 主色系 */
  --primary-color: #1890ff;
  --primary-color-hover: #40a9ff;
  --primary-color-active: #096dd9;
  --primary-color-outline: rgba(24, 144, 255, 0.2);
  --primary-1: #e6f7ff;
  --primary-2: #bae7ff;
  --primary-3: #91d5ff;
  --primary-4: #69c0ff;
  --primary-5: #40a9ff;
  --primary-6: #1890ff;
  --primary-7: #096dd9;

  /* 成功色 */
  --success-color: #52c41a;
  --success-color-hover: #73d13d;
  --success-color-active: #389e0d;
  --success-color-outline: rgba(82, 196, 26, 0.2);

  /* 警告色 */
  --warning-color: #faad14;
  --warning-color-hover: #ffc53d;
  --warning-color-active: #d48806;
  --warning-color-outline: rgba(250, 173, 20, 0.2);

  /* 错误色 */
  --error-color: #ff4d4f;
  --error-color-hover: #ff7875;
  --error-color-active: #d9363e;
  --error-color-outline: rgba(255, 77, 79, 0.2);

  /* 中性色 */
  --body-background: #fff;
  --component-background: #fff;
  --text-color: rgba(0, 0, 0, 0.85);
  --text-color-secondary: rgba(0, 0, 0, 0.45);
  --disabled-color: rgba(0, 0, 0, 0.25);
  --border-color-base: #d9d9d9;
  --border-color-split: #f0f0f0;
  --background-color-light: #fafafa;
  --background-color-base: #f5f5f5;

  /* 会员颜色 */
  --member-color: #ff9500;
  --member-color-hover: #ffb84d;

  /* 布局相关 */
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-sm: 12px;
  --line-height-base: 1.5715;
  --layout-header-height: 64px;
  --layout-footer-height: 69px;
  --layout-sider-width: 200px;
  --layout-trigger-height: 48px;
  --border-radius-base: 6px;
  --border-radius-sm: 4px;
  --border-radius-lg: 8px;

  /* 阴影 */
  --shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.08), 0 -9px 28px 0 rgba(0, 0, 0, 0.05), 0 -12px 48px 16px rgba(0, 0, 0, 0.03);
  --shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03);
  --shadow-1-left: -6px 0 16px -8px rgba(0, 0, 0, 0.08), -9px 0 28px 0 rgba(0, 0, 0, 0.05), -12px 0 48px 16px rgba(0, 0, 0, 0.03);
  --shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05), 12px 0 48px 16px rgba(0, 0, 0, 0.03);
  --shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);

  /* 高对比模式下的变量 */
  --high-contrast-mode: none;
}

/* 页面Tab选项卡相关样式 */
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #1890ff !important;
  font-weight: 600 !important;
  text-shadow: 0 0 0.5px currentColor;
}

.ant-tabs-ink-bar {
  background-color: #1890ff !important;
  height: 3px !important;
}

.ant-tabs-tab:hover {
  color: #40a9ff !important;
}

/* 确保默认标签文字颜色足够明显 */
.ant-tabs-tab .ant-tabs-tab-btn {
  color: rgba(0, 0, 0, 0.65) !important;
}

/* 粉红少女主题全局样式 */
.theme-pink-girl {
  /* 更新CSS变量为粉红色调 */
  --primary-color: #ff69b4;
  --primary-color-hover: #ff1493;
  --primary-color-active: #dc143c;
  --primary-color-outline: rgba(255, 105, 180, 0.2);
  --primary-1: #fff0f6;
  --primary-2: #ffd6e7;
  --primary-3: #ffadd2;
  --primary-4: #ff85c0;
  --primary-5: #ff69b4;
  --primary-6: #ff1493;
  --primary-7: #dc143c;

  /* 成功色调整为粉红色系 */
  --success-color: #ff91c7;
  --success-color-hover: #ffb3d9;
  --success-color-active: #e91e63;
  --success-color-outline: rgba(255, 145, 199, 0.2);

  /* 警告色调整为粉红色系 */
  --warning-color: #ffb3d9;
  --warning-color-hover: #ffc0cb;
  --warning-color-active: #ff69b4;
  --warning-color-outline: rgba(255, 179, 217, 0.2);

  /* 错误色保持红色但调整为粉红色系 */
  --error-color: #e91e63;
  --error-color-hover: #f06292;
  --error-color-active: #c2185b;
  --error-color-outline: rgba(233, 30, 99, 0.2);

  /* 背景色调整 */
  --body-background: #fff0f6;
  --component-background: #ffffff;
  --background-color-light: #fff5f8;
  --background-color-base: #ffebf0;
}

/* 粉红主题的Tab选项卡样式 */
.theme-pink-girl .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #ff69b4 !important;
  font-weight: 600 !important;
  text-shadow: 0 0 0.5px currentColor;
}

.theme-pink-girl .ant-tabs-ink-bar {
  background-color: #ff69b4 !important;
  height: 3px !important;
}

.theme-pink-girl .ant-tabs-tab:hover {
  color: #ff1493 !important;
}

/* 粉红主题的按钮样式 */
.theme-pink-girl .ant-btn-primary {
  background-color: #ff69b4 !important;
  border-color: #ff69b4 !important;
  color: #ffffff !important;
}

.theme-pink-girl .ant-btn-primary:hover,
.theme-pink-girl .ant-btn-primary:focus {
  background-color: #ff1493 !important;
  border-color: #ff1493 !important;
  color: #ffffff !important;
}

.theme-pink-girl .ant-btn-primary:active {
  background-color: #dc143c !important;
  border-color: #dc143c !important;
  color: #ffffff !important;
}

/* 粉红主题的链接样式 */
.theme-pink-girl a {
  color: #ff69b4;
}

.theme-pink-girl a:hover {
  color: #ff1493 !important;
}

/* 粉红主题的表单控件样式 */
.theme-pink-girl .ant-input:focus,
.theme-pink-girl .ant-input-focused {
  border-color: #ff69b4 !important;
  box-shadow: 0 0 0 2px rgba(255, 105, 180, 0.2) !important;
}

.theme-pink-girl .ant-select:not(.ant-select-disabled):hover .ant-select-selector,
.theme-pink-girl .ant-select-focused .ant-select-selector {
  border-color: #ff69b4 !important;
}

.theme-pink-girl .ant-select-focused .ant-select-selector {
  box-shadow: 0 0 0 2px rgba(255, 105, 180, 0.2) !important;
}

/* 粉红主题的复选框和单选框 */
.theme-pink-girl .ant-checkbox-checked .ant-checkbox-inner {
  background-color: #ff69b4 !important;
  border-color: #ff69b4 !important;
}

.theme-pink-girl .ant-checkbox-indeterminate .ant-checkbox-inner {
  background-color: #ff69b4 !important;
  border-color: #ff69b4 !important;
}

.theme-pink-girl .ant-radio-checked .ant-radio-inner {
  border-color: #ff69b4 !important;
}

.theme-pink-girl .ant-radio-inner::after {
  background-color: #ff69b4 !important;
}

/* 粉红主题的开关 */
.theme-pink-girl .ant-switch-checked {
  background-color: #ff69b4 !important;
}

/* 粉红主题的进度条 */
.theme-pink-girl .ant-progress-bg {
  background-color: #ff69b4 !important;
}

/* 粉红主题的滑块 */
.theme-pink-girl .ant-slider-track {
  background-color: #ff69b4 !important;
}

.theme-pink-girl .ant-slider-handle {
  border-color: #ff69b4 !important;
}

.theme-pink-girl .ant-slider-handle:focus {
  box-shadow: 0 0 0 5px rgba(255, 105, 180, 0.2) !important;
}

/* 确保激活的标签文字颜色更明显 */
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #1890ff !important;
}

/* 基础样式设置 */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "黑体-简",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  font-size: var(--font-size-base);
  line-height: 1.5715;
  line-height: var(--line-height-base);
  color: rgba(0, 0, 0, 0.85);
  color: var(--text-color);
  background-color: #fff;
  background-color: var(--body-background);
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

/* 修复模态框定位问题 - 防止模态框先出现在左边再居中 */
.ant-modal-wrap {
  position: fixed !important;
  inset: 0 !important;
  overflow: auto !important;
  outline: 0 !important;
  -webkit-overflow-scrolling: touch !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 100px !important;
}

/* 确保隐藏的模态框不会阻挡点击 */
.ant-modal-wrap {
  pointer-events: auto !important;
}

.ant-modal-wrap:not(.ant-modal-wrap-open) {
  pointer-events: none !important;
}

/* 只有完全隐藏的模态框才不显示 */
.ant-modal-wrap[style*="display: none"] {
  display: none !important;
}

.ant-modal {
  position: relative !important;
  top: 0 !important;
  max-width: calc(100vw - 32px) !important;
  margin: 0 !important;
  padding-bottom: 0px !important;
  transform: none !important;
  transition: none !important;
}

.ant-modal-content {
  position: relative !important;
  background-color: #fff !important;
  background-clip: padding-box !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) !important;
  transform: none !important;
  transition: none !important;
}

/* 确保模态框立即居中显示，不使用动画 */
.ant-modal-mask {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.45) !important;
}

/* 禁用可能导致定位问题的动画 - 仅针对模态框 */
.ant-modal-wrap .ant-zoom-enter,
.ant-modal-wrap .ant-zoom-appear,
.ant-modal-wrap .ant-fade-enter,
.ant-modal-wrap .ant-fade-appear {
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
}

.ant-modal-wrap .ant-zoom-enter-active,
.ant-modal-wrap .ant-zoom-appear-active,
.ant-modal-wrap .ant-fade-enter-active,
.ant-modal-wrap .ant-fade-appear-active {
  transition: none !important;
  animation: none !important;
}

/* 消息提示框修复 */
.ant-message {
  position: fixed !important;
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1010 !important;
  width: auto !important;
  margin: 0 !important;
}

.ant-message .ant-message-notice {
  position: relative !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* 通知框修复 */
.ant-notification {
  position: fixed !important;
  z-index: 1010 !important;
}

.ant-notification-topRight {
  top: 24px !important;
  right: 24px !important;
}

/* 确认对话框修复 */
.ant-modal-confirm .ant-modal-wrap {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.ant-modal-confirm .ant-modal {
  position: relative !important;
  top: 0 !important;
  transform: none !important;
  transition: none !important;
}

/* 移除重复的动画禁用规则，避免冲突 */

/* 移除全局 pointer-events 规则，避免冲突 */

/* 移除不必要的全局 pointer-events 覆盖规则 */

/* 全局链接样式 */
a {
  color: #1890ff;
  text-decoration: none;
}

a:hover {
  color: #40a9ff;
}

/* 增加弹出层z-index以确保在其他元素上方显示 */
.ant-modal {
  z-index: 1050;
}

.ant-drawer {
  z-index: 1040;
}

.ant-dropdown {
  z-index: 1030;
}

.ant-tooltip {
  z-index: 1060;
}

.ant-message {
  z-index: 1070;
}

.ant-notification {
  z-index: 1070;
}

/* 响应式布局辅助类 */
.hide-on-mobile {
  display: block;
}

.show-on-mobile {
  display: none;
}

@media (max-width: 768px) {
  .hide-on-mobile {
    display: none;
  }

  .show-on-mobile {
    display: block;
  }
}

/* 表格样式增强 */
.ant-table-small {
  font-size: 14px;
}

.ant-table-middle {
  font-size: 15px;
}

/* 覆盖Ant Design默认字体设置，确保与主体一致 */
.ant-typography,
.ant-btn,
.ant-input,
.ant-select,
.ant-checkbox,
.ant-radio,
.ant-pagination,
.ant-tabs,
.ant-tag,
.ant-modal-title,
.ant-drawer-title,
.ant-form-item-label>label,
.ant-menu-item,
.ant-menu-submenu-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', '黑体-简',
    sans-serif;
}

/* 通用辅助类 */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.p-0 {
  padding: 0;
}

.p-10 {
  padding: 10px;
}

.p-20 {
  padding: 20px;
}

/* 浮动清除 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

div.ant-typography.css-dev-only-do-not-override-1m63z2v[style*="padding: 8px"] {
  padding: 16px !important;
  border: 1px solid #f0f0f0;
}

/* 添加Cascader相关样式 */
.location-cascader-dropdown {
  z-index: 1500 !important;
  /* 确保下拉菜单显示在最上层 */
}

.ant-cascader-menus {
  z-index: 1500 !important;
}

.ant-cascader-menu {
  height: 300px !important;
  /* 设置下拉菜单的高度 */
}

/* 确保Cascader下拉菜单在Modal内正常显示 */
.ant-select-dropdown {
  z-index: 1500 !important;
}

/* 提高Modal层级 */
.ant-modal-wrap,
.ant-modal-mask {
  z-index: 1000 !important;
}

.ant-modal {
  z-index: 1001 !important;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8;
}

/* 高对比度模式支持 */
@media (forced-colors: active) {
  :root {
    --high-contrast-mode: auto;
  }

  /* 修复高对比度模式下的一些常见问题 */
  .ant-btn {
    forced-color-adjust: none;
  }

  .ant-card {
    forced-color-adjust: none;
  }

  .ant-menu {
    forced-color-adjust: none;
  }

  .ant-table {
    forced-color-adjust: none;
  }

  .ant-layout {
    forced-color-adjust: none;
  }
}

/* 避免页面水平滚动 */
#root {
  overflow-x: hidden;
  min-height: 10vh;
}

/* 页面过渡动画 */
.page-enter {
  opacity: 0;
  transform: scale(0.95);
}

.page-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms, transform 300ms;
}

.page-exit {
  opacity: 1;
  transform: scale(1);
}

.page-exit-active {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 300ms, transform 300ms;
}

/* 原有 App.css 样式 */
.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 确保问题段落显示为块级元素 */
div.ant-typography.question-paragraph.css-dev-only-do-not-override-1m63z2v,
div.ant-typography.css-dev-only-do-not-override-1m63z2v[style*="display: inline"] {
  display: block !important;
  margin: 0 !important;
}

/* 社交媒体图标样式 */
.social-links {
  margin-top: 10px;
}

.social-link-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  line-height: 24px;
}

.social-icon {
  font-size: 20px;
  margin-right: 8px;
  width: 24px;
  text-align: center;
  display: inline-block;
}

.social-name {
  font-weight: 500;
  margin-right: 8px;
  width: 70px;
  display: inline-block;
}

.social-value {
  color: rgba(0, 0, 0, 0.65);
  flex: 1 1;
}

/* 修复iconfont图标大小 */
.iconfont {
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

/* 特定社交媒体图标颜色 */
.icon-weibo {
  color: #E6162D;
}

.icon-wechat {
  color: #07C160;
}

.icon-qq {
  color: #12B7F5;
}

.icon-douyin {
  color: #000000;
}

.icon-bilibili {
  color: #FB7299;
}
/* 覆盖Ant Design的高对比度模式样式 */
@media (forced-colors: active) {
  /* 使用现代的forced-colors模式样式 */
  .ant-btn:hover,
  .ant-btn:focus,
  .ant-btn:active,
  .ant-checkbox:hover,
  .ant-checkbox:focus,
  .ant-checkbox:active,
  .ant-radio:hover,
  .ant-radio:focus,
  .ant-radio:active,
  .ant-switch:hover,
  .ant-switch:focus,
  .ant-switch:active,
  .ant-input:hover,
  .ant-input:focus,
  .ant-input:active,
  .ant-select:hover,
  .ant-select:focus,
  .ant-select:active {
    /* 使用新的Forced Colors Mode标准 */
    forced-color-adjust: none;
    border-color: Highlight;
    outline-color: Highlight;
  }
} 
/**
 * Ant Design样式覆盖
 * 彻底解决hash类名问题的最简单方案
 */

/* 使用属性选择器匹配所有包含ant-app的类名 */
[class*="ant-app"] {
  margin: 0 !important;
  transition: margin 0.2s ease-in-out;
}

/* 移动端需要顶部间距的页面 */
@media (max-width: 768px) {
  .page-with-top-margin [class*="ant-app"] {
    margin: 24px 0 0 0;
  }
  
  /* 确保首页和推荐页面不受影响 */
  .home-page [class*="ant-app"],
  .recommendation-page [class*="ant-app"] {
    margin: 0 !important;
  }
}

/* 如果Ant Design更新了类名模式，这个作为备用 */
[class*="css-"][class*="ant-app"],
[class*="ant-"][class*="app"] {
  padding: 0;
}

@media (max-width: 768px) {
  .page-with-top-margin [class*="css-"][class*="ant-app"],
  .page-with-top-margin [class*="ant-"][class*="app"] {
    margin: 0;
  }
  
  .home-page [class*="css-"][class*="ant-app"],
  .home-page [class*="ant-"][class*="app"],
  .recommendation-page [class*="css-"][class*="ant-app"],
  .recommendation-page [class*="ant-"][class*="app"] {
    margin: 0 !important;
  }
}
/* 导航栏头像修复样式 - 防止被其他地方的头像样式干扰 */

/* 最高优先级的导航栏头像样式 */
.navbar-user-avatar.desktop-navbar-user-avatar,
.navbar-user-avatar.desktop-navbar-user-avatar .ant-avatar,
.navbar-user-avatar.desktop-navbar-user-avatar .ant-avatar.ant-avatar-circle,
.navbar-user-avatar.desktop-navbar-user-avatar .ant-avatar.ant-avatar-circle.ant-avatar-image,
.navbar-user-avatar.desktop-navbar-user-avatar .ant-avatar.ant-avatar-circle.ant-avatar-image.ant-avatar-icon {
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 16px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 导航栏头像内部图片样式 */
.navbar-user-avatar.desktop-navbar-user-avatar .ant-avatar img,
.navbar-user-avatar.desktop-navbar-user-avatar .ant-avatar.ant-avatar-circle img,
.navbar-user-avatar.desktop-navbar-user-avatar .ant-avatar.ant-avatar-circle.ant-avatar-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
}

/* 确保导航栏头像容器样式 */
.avatar-with-verification.navbar-user-avatar.desktop-navbar-user-avatar {
  width: 32px !important;
  height: 32px !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

/* 响应式样式 - 小平板 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .navbar-user-avatar.desktop-navbar-user-avatar,
  .navbar-user-avatar.desktop-navbar-user-avatar .ant-avatar,
  .navbar-user-avatar.desktop-navbar-user-avatar .ant-avatar.ant-avatar-circle,
  .navbar-user-avatar.desktop-navbar-user-avatar .ant-avatar.ant-avatar-circle.ant-avatar-image,
  .navbar-user-avatar.desktop-navbar-user-avatar .ant-avatar.ant-avatar-circle.ant-avatar-image.ant-avatar-icon {
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
  }
  
  .avatar-with-verification.navbar-user-avatar.desktop-navbar-user-avatar {
    width: 28px !important;
    height: 28px !important;
  }
}

/* 响应式样式 - 大平板 */
@media screen and (min-width: 1025px) and (max-width: 1400px) {
  .navbar-user-avatar.desktop-navbar-user-avatar,
  .navbar-user-avatar.desktop-navbar-user-avatar .ant-avatar,
  .navbar-user-avatar.desktop-navbar-user-avatar .ant-avatar.ant-avatar-circle,
  .navbar-user-avatar.desktop-navbar-user-avatar .ant-avatar.ant-avatar-circle.ant-avatar-image,
  .navbar-user-avatar.desktop-navbar-user-avatar .ant-avatar.ant-avatar-circle.ant-avatar-image.ant-avatar-icon {
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .avatar-with-verification.navbar-user-avatar.desktop-navbar-user-avatar {
    width: 30px !important;
    height: 30px !important;
  }
}

/* 响应式样式 - 手机端 */
@media screen and (max-width: 768px) {
  .navbar-user-avatar.desktop-navbar-user-avatar,
  .navbar-user-avatar.desktop-navbar-user-avatar .ant-avatar,
  .navbar-user-avatar.desktop-navbar-user-avatar .ant-avatar.ant-avatar-circle,
  .navbar-user-avatar.desktop-navbar-user-avatar .ant-avatar.ant-avatar-circle.ant-avatar-image,
  .navbar-user-avatar.desktop-navbar-user-avatar .ant-avatar.ant-avatar-circle.ant-avatar-image.ant-avatar-icon {
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
  }
  
  .avatar-with-verification.navbar-user-avatar.desktop-navbar-user-avatar {
    width: 28px !important;
    height: 28px !important;
  }
}

/* 覆盖可能干扰的通用样式 */
.ant-avatar.ant-avatar-circle.ant-avatar-image.ant-avatar-icon.navbar-user-avatar,
.ant-avatar.ant-avatar-circle.ant-avatar-image.ant-avatar-icon.desktop-navbar-user-avatar {
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 16px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  border: none !important;
}

/* 确保导航栏头像的实名认证标识正确显示 */
.navbar-user-avatar.desktop-navbar-user-avatar .verification-badge {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #1890ff !important;
  color: white !important;
  font-size: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: bold !important;
  border: 2px solid white !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}
/* 
 * 推荐页面头像修复 - 专门解决推荐页面头像椭圆问题
 * 使用最高优先级和最具体的选择器
 */

/* 超高优先级修复 - 针对推荐页面 */
html body div#root .mobile-navbar .ant-avatar.ant-avatar-circle.ant-avatar-image.ant-avatar-icon,
html body div#root .mobile-navbar .ant-avatar.ant-avatar-circle.ant-avatar-image,
html body div#root .mobile-navbar .ant-avatar.ant-avatar-circle,
html body div#root .mobile-navbar .ant-avatar,
html body div#root .mobile-navbar .avatar-with-verification,
html body div#root .mobile-navbar .user-avatar {
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  aspect-ratio: 1 / 1 !important;
  box-sizing: content-box !important;
  border-radius: 50% !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  flex-shrink: 0 !important;
}

/* 针对头像内的img标签 */
html body div#root .mobile-navbar .ant-avatar img,
html body div#root .mobile-navbar .avatar-with-verification img {
  width: 32px !important;
  height: 32px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  box-sizing: content-box !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
}

/* 小屏幕修复 */
@media (max-width: 480px) {
  html body div#root .mobile-navbar .ant-avatar.ant-avatar-circle.ant-avatar-image.ant-avatar-icon,
  html body div#root .mobile-navbar .ant-avatar.ant-avatar-circle.ant-avatar-image,
  html body div#root .mobile-navbar .ant-avatar.ant-avatar-circle,
  html body div#root .mobile-navbar .ant-avatar,
  html body div#root .mobile-navbar .avatar-with-verification,
  html body div#root .mobile-navbar .user-avatar {
    width: 30px !important;
    height: 30px !important;
    line-height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
  }
  
  html body div#root .mobile-navbar .ant-avatar img,
  html body div#root .mobile-navbar .avatar-with-verification img {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
  }
}

/* 使用属性选择器作为最后的保险 */
html body div#root .mobile-navbar [class*="ant-avatar"][class*="circle"][class*="image"],
html body div#root .mobile-navbar [class*="ant-avatar"][class*="circle"],
html body div#root .mobile-navbar [class*="ant-avatar"],
html body div#root .mobile-navbar [class*="avatar-with-verification"] {
  aspect-ratio: 1 / 1 !important;
  box-sizing: content-box !important;
  border-radius: 50% !important;
}

/* 针对内联样式的覆盖 */
html body div#root .mobile-navbar .ant-avatar[style*="width"],
html body div#root .mobile-navbar .ant-avatar[style*="height"],
html body div#root .mobile-navbar .avatar-with-verification[style*="width"],
html body div#root .mobile-navbar .avatar-with-verification[style*="height"] {
  width: 32px !important;
  height: 32px !important;
  aspect-ratio: 1 / 1 !important;
}

@media (max-width: 480px) {
  html body div#root .mobile-navbar .ant-avatar[style*="width"],
  html body div#root .mobile-navbar .ant-avatar[style*="height"],
  html body div#root .mobile-navbar .avatar-with-verification[style*="width"],
  html body div#root .mobile-navbar .avatar-with-verification[style*="height"] {
    width: 30px !important;
    height: 30px !important;
  }
}
/* 导航栏生产环境样式修复 */

/* 确保搜索框在所有环境下都显示为药丸形状 - 不覆盖默认圆角 */

.navbar-search-container:hover,
.navbar-search-container:focus-within {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  border-radius: 36px; /* 药丸形状 */
}

/* 桌面端搜索框 */
.desktop-search .navbar-search-container {
  border-radius: 20px;
}

.desktop-search .navbar-search-container:hover,
.desktop-search .navbar-search-container:focus-within {
  border-radius: 20px; /* 保持药丸形状 */
}

/* 移动端搜索框 */
.mobile-top-navbar .navbar-search-container {
  background: #f5f5f5 !important;
  border-radius: 20px !important;
  border: 1px solid #e8e8e8 !important;
}

/* 确保移动端搜索框的搜索图标显示 */
.mobile-top-navbar .navbar-search-submit-button {
  color: #666 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mobile-top-navbar .navbar-search-submit-button:hover {
  color: #1890ff !important;
  background: rgba(24, 144, 255, 0.1) !important;
}

/* 确保搜索图标可见 */
.mobile-top-navbar .navbar-search-submit-button .anticon {
  font-size: 16px !important;
}

/* 高优先级选择器确保搜索按钮样式正确 */
.mobile-top-navbar .ant-btn.ant-btn-text.ant-btn-color-default.ant-btn-variant-text.ant-btn-icon-only.navbar-search-submit-button {
  color: #666 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.mobile-top-navbar .ant-btn.ant-btn-text.ant-btn-color-default.ant-btn-variant-text.ant-btn-icon-only.navbar-search-submit-button:hover {
  color: #1890ff !important;
  background: rgba(24, 144, 255, 0.1) !important;
}

.mobile-top-navbar .ant-btn.ant-btn-text.ant-btn-color-default.ant-btn-variant-text.ant-btn-icon-only.navbar-search-submit-button .anticon {
  font-size: 16px !important;
}

/* 确保导航栏头像在所有环境下都正确显示 - 只影响导航栏 */
.navbar-header .navbar-user-avatar,
.navbar-header .navbar-user-avatar .ant-avatar,
.navbar-header .desktop-navbar-user-avatar,
.navbar-header .desktop-navbar-user-avatar .ant-avatar,
.navbar-right .navbar-user-avatar,
.navbar-right .navbar-user-avatar .ant-avatar,
.navbar-right .desktop-navbar-user-avatar,
.navbar-right .desktop-navbar-user-avatar .ant-avatar {
  box-sizing: border-box !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.navbar-header .navbar-user-avatar .ant-avatar img,
.navbar-header .desktop-navbar-user-avatar .ant-avatar img,
.navbar-right .navbar-user-avatar .ant-avatar img,
.navbar-right .desktop-navbar-user-avatar .ant-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
}

/* 移动端导航栏头像 */
.mobile-top-navbar .navbar-user-avatar,
.mobile-top-navbar .navbar-user-avatar .ant-avatar,
.mobile-top-navbar .custom-user-avatar,
.mobile-top-navbar .custom-user-avatar .ant-avatar,
.mobile-top-navbar .avatar-with-verification {
  box-sizing: border-box !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mobile-top-navbar .navbar-user-avatar .ant-avatar img,
.mobile-top-navbar .custom-user-avatar .ant-avatar img,
.mobile-top-navbar .avatar-with-verification img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
}

/* 强制覆盖导航栏中可能的内联样式 */
.navbar-header .navbar-user-avatar[style],
.navbar-right .navbar-user-avatar[style],
.mobile-top-navbar .navbar-user-avatar[style],
.mobile-top-navbar .avatar-with-verification[style] {
  border-radius: 50% !important;
}

@media (max-width: 768px) {
  .navbar-header .navbar-user-avatar,
  .navbar-header .navbar-user-avatar .ant-avatar,
  .navbar-right .navbar-user-avatar,
  .navbar-right .navbar-user-avatar .ant-avatar {
    width: 28px !important;
    height: 28px !important;
  }
}
/* 会员头像全局样式 */

/* 会员头像描边基础样式 */
.member-avatar-border {
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

/* 基础会员头像描边 */
.member-avatar-basic {
  border: 4px solid #0000FF !important;
  border: 4px solid var(--member-name-color, #0000FF) !important;
}

/* 免费会员或过期会员无描边 */
.member-avatar-free {
  border: none !important;
}

/* 头像容器样式，确保描边不被裁剪 */
.avatar-container {
  display: inline-block;
  border-radius: 50%;
}

/* Ant Design Avatar 组件的全局覆盖 */
.ant-avatar.member-avatar-border {
  border-radius: 50% !important;
}

/* 确保头像在不同尺寸下都能正确显示描边 */
.ant-avatar.member-avatar-border.ant-avatar-lg {
  border-width: 4px !important;
}

.ant-avatar.member-avatar-border.ant-avatar-sm {
  border-width: 2px !important;
}

/* 小尺寸头像（24px及以下）使用2px描边 */
.ant-avatar[data-member-level="10"]:not([data-member-expired="true"])[style*="width: 24px"],
.ant-avatar[data-member-level="40"]:not([data-member-expired="true"])[style*="width: 24px"],
.ant-avatar.member-avatar-border[style*="width: 24px"],
.ant-avatar.member-avatar-custom[style*="width: 24px"] {
  border-width: 2px !important;
}

/* 头像悬停效果（可选） */
.member-avatar-border:hover {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

/* 通过数据属性控制会员头像描边 - 全局样式 */
.ant-avatar[data-member-level="10"]:not([data-member-expired="true"]),
.ant-avatar[data-member-level="40"]:not([data-member-expired="true"]) {
  border: 4px solid #0000FF !important;
  border: 4px solid var(--member-name-color, #0000FF) !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

/* 高级会员使用不同的默认颜色 */
.ant-avatar[data-member-level="40"]:not([data-member-expired="true"]) {
  --member-name-color: #800080;
}

/* 免费会员或过期会员确保无描边 */
.ant-avatar[data-member-level="0"],
.ant-avatar[data-member-expired="true"] {
  border: none !important;
}
/* 主题管理页面样式 */
.theme-card-active {
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

.theme-card-active:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(24, 144, 255, 0.2);
}

/* 主题变量定义 */
:root {
  --theme-primary: #1890ff;
  --theme-success: #52c41a;
  --theme-warning: #faad14;
  --theme-error: #ff4d4f;
  --theme-background: #ffffff;
  --theme-text: #000000;
}

/* 应用主题变量到全局样式 */
.ant-btn-primary {
  background-color: #1890ff !important;
  background-color: var(--theme-primary) !important;
  border-color: #1890ff !important;
  border-color: var(--theme-primary) !important;
  color: #ffffff !important;
  /* 强制设置白色文字，确保在任何背景色下都清晰可见 */
}

.ant-btn-primary:hover,
.ant-btn-primary:focus {
  background-color: #1890ff !important;
  background-color: var(--theme-primary) !important;
  border-color: #1890ff !important;
  border-color: var(--theme-primary) !important;
  color: #ffffff !important;
  /* 悬停状态也保持白色文字 */
  opacity: 0.8;
}

.ant-menu-item-selected {
  color: #1890ff !important;
  color: var(--theme-primary) !important;
}

.ant-menu-item-selected::after {
  border-right-color: #1890ff !important;
  border-right-color: var(--theme-primary) !important;
}

.ant-menu-horizontal>.ant-menu-item-selected {
  border-bottom-color: #1890ff !important;
  border-bottom-color: var(--theme-primary) !important;
}

/* 链接颜色 */
a {
  color: #1890ff;
  color: var(--theme-primary);
}

a:hover {
  color: #1890ff !important;
  color: var(--theme-primary) !important;
  opacity: 0.8;
}

/* 标签颜色 - 智能文字颜色设置 */
.ant-tag-blue {
  background-color: #1890ff !important;
  background-color: var(--theme-primary) !important;
  border-color: #1890ff !important;
  border-color: var(--theme-primary) !important;
  color: #ffffff !important;
  /* 主题色通常是深色，使用白色文字 */
}

/* 深色背景标签使用白色文字 */
.ant-tag-primary {
  background-color: #1890ff !important;
  background-color: var(--theme-primary) !important;
  border-color: #1890ff !important;
  border-color: var(--theme-primary) !important;
  color: #ffffff !important;
}

/* 绿色背景使用白色文字
.ant-tag-success {
  background-color: var(--theme-success) !important;
  border-color: var(--theme-success) !important;
  color: #ffffff !important;
}
绿色背景使用白色文字 */
.ant-tag-error,
.ant-tag-red {
  background-color: #ff4d4f !important;
  background-color: var(--theme-error) !important;
  border-color: #ff4d4f !important;
  border-color: var(--theme-error) !important;
  color: #ffffff !important;
  /* 红色背景使用白色文字 */
}

/* 浅色背景标签使用深色文字 */
.ant-tag-warning,
.ant-tag-orange,
.ant-tag-yellow {
  background-color: #faad14 !important;
  background-color: var(--theme-warning) !important;
  border-color: #faad14 !important;
  border-color: var(--theme-warning) !important;
  color: #000000 !important;
  /* 黄色/橙色背景使用黑色文字 */
}

/* 其他浅色标签 */
.ant-tag-cyan,
.ant-tag-lime,
.ant-tag-pink {
  color: #000000 !important;
  /* 浅色背景使用黑色文字 */
}

/* 深色标签 */
.ant-tag-magenta,
.ant-tag-volcano,
.ant-tag-geekblue {
  color: #ffffff !important;
  /* 深色背景使用白色文字 */
}

/* Ant Design color属性生成的标签样式 - 修复careers页面标签 */
/* 紫色标签（经验要求：3-5年、5-8年等）- 紫色是浅色，使用黑色文字 */
.ant-tag[data-color="purple"],
.ant-tag.ant-tag-purple,
.ant-tag-purple {
  color: #000000 !important;
  /* 紫色背景使用黑色文字 */
}

/* 绿色标签（地点：北京等）- 绿色是浅色，使用黑色文字 */
.ant-tag[data-color="green"],
.ant-tag.ant-tag-green,
.ant-tag-green {
  color: #000000 !important;
  /* 绿色背景使用黑色文字 */
}

/* 蓝色标签（职位类型：全职等）- 蓝色是深色，使用白色文字 */
.ant-tag[data-color="blue"],
.ant-tag.ant-tag-blue {
  color: #ffffff !important;
  /* 蓝色背景使用白色文字 */
}

/* 推荐页面需求类型标签特殊处理 - 强制使用黑色文字 */
.request-type-tag,
.ant-tag.request-type-tag {
  color: #000000 !important;
  /* 推荐页面需求类型标签使用黑色文字 */
}

.ant-tag[data-color="red"],
.ant-tag.ant-tag-red {
  color: #ffffff !important;
  /* 红色背景使用白色文字 */
}

/* 浅色标签需要深色文字 */
.ant-tag[data-color="orange"],
.ant-tag.ant-tag-orange,
.ant-tag[data-color="yellow"],
.ant-tag.ant-tag-yellow,
.ant-tag[data-color="gold"],
.ant-tag.ant-tag-gold,
.ant-tag[data-color="lime"],
.ant-tag.ant-tag-lime,
.ant-tag[data-color="cyan"],
.ant-tag.ant-tag-cyan {
  color: #000000 !important;
  /* 浅色背景使用黑色文字 */
}

/* 通用标签颜色修复 - 覆盖所有可能的Ant Design标签颜色 */
/* 深色背景标签 */
.ant-tag-blue,
.ant-tag-red,
.ant-tag-magenta,
.ant-tag-volcano,
.ant-tag-geekblue {
  color: #ffffff !important;
}

/* 浅色背景标签 */
.ant-tag-orange,
.ant-tag-yellow,
.ant-tag-gold,
.ant-tag-lime,
.ant-tag-cyan,
.ant-tag-pink {
  color: #000000 !important;
}

/* 处理内联样式的标签 - 通过CSS选择器匹配背景色 */
.ant-tag[style*="background-color: rgb(24, 144, 255)"],
/* 蓝色 */
.ant-tag[style*="background-color: rgb(114, 46, 209)"],
/* 紫色 */
.ant-tag[style*="background-color: rgb(82, 196, 26)"],
/* 绿色 */
.ant-tag[style*="background-color: rgb(245, 34, 45)"],
/* 红色 */
.ant-tag[style*="background-color: rgb(235, 47, 150)"],
/* 洋红 */
.ant-tag[style*="background-color: rgb(250, 84, 28)"],
/* 火山红 */
.ant-tag[style*="background-color: rgb(47, 84, 235)"] {
  /* 极客蓝 */
  color: #ffffff !important;
}

.ant-tag[style*="background-color: rgb(255, 165, 0)"],
/* 橙色 */
.ant-tag[style*="background-color: rgb(255, 255, 0)"],
/* 黄色 */
.ant-tag[style*="background-color: rgb(250, 173, 20)"],
/* 金色 */
.ant-tag[style*="background-color: rgb(165, 214, 167)"],
/* 青柠 */
.ant-tag[style*="background-color: rgb(19, 194, 194)"],
/* 青色 */
.ant-tag[style*="background-color: rgb(235, 47, 150)"] {
  /* 粉色 */
  color: #000000 !important;
}

/* 成功状态颜色 */
.ant-btn-success,
.ant-message-success .anticon,
.ant-notification-notice-success .ant-notification-notice-icon {
  color: #52c41a !important;
  color: var(--theme-success) !important;
}

/* 警告状态颜色 */
.ant-btn-warning,
.ant-message-warning .anticon,
.ant-notification-notice-warning .ant-notification-notice-icon {
  color: #faad14 !important;
  color: var(--theme-warning) !important;
}

/* 错误状态颜色 */
.ant-btn-danger,
.ant-message-error .anticon,
.ant-notification-notice-error .ant-notification-notice-icon {
  color: #ff4d4f !important;
  color: var(--theme-error) !important;
}

/* 特殊主题样式 */
.theme-grayscale {
  filter: grayscale(100%);
}

.theme-grayscale .ant-btn-primary {
  background-color: #595959 !important;
  border-color: #595959 !important;
  color: #ffffff !important;
  /* 灰度主题使用白色文字 */
}

.theme-grayscale .ant-tag-primary,
.theme-grayscale .ant-tag-blue {
  background-color: #595959 !important;
  border-color: #595959 !important;
  color: #ffffff !important;
  /* 灰度主题标签使用白色文字 */
}

.theme-festive .ant-btn-primary {
  background-color: #ff4d4f !important;
  border-color: #ff4d4f !important;
  color: #ffffff !important;
  /* 节庆主题使用白色文字 */
}

.theme-festive .ant-tag-primary,
.theme-festive .ant-tag-blue {
  background-color: #ff4d4f !important;
  border-color: #ff4d4f !important;
  color: #ffffff !important;
  /* 节庆主题标签使用白色文字 */
}

.theme-spring .ant-btn-primary {
  background-color: #52c41a !important;
  border-color: #52c41a !important;
  color: #ffffff !important;
  /* 春季主题使用白色文字 */
}

.theme-spring .ant-tag-primary,
.theme-spring .ant-tag-blue {
  background-color: #52c41a !important;
  border-color: #52c41a !important;
  color: #ffffff !important;
  /* 春季主题标签使用白色文字 */
}

.theme-golden .ant-btn-primary {
  background-color: #faad14 !important;
  border-color: #faad14 !important;
  color: #ffffff !important;
  /* 金色主题使用白色文字 */
}

.theme-golden .ant-tag-primary,
.theme-golden .ant-tag-blue {
  background-color: #faad14 !important;
  border-color: #faad14 !important;
  color: #000000 !important;
  /* 金色主题标签使用黑色文字，因为金色是浅色背景 */
}

/* 粉红少女主题样式 */
.theme-pink-girl .ant-btn-primary {
  background-color: #ff69b4 !important;
  border-color: #ff69b4 !important;
  color: #ffffff !important;
  /* 粉红主题使用白色文字 */
}

.theme-pink-girl .ant-btn-primary:hover,
.theme-pink-girl .ant-btn-primary:focus {
  background-color: #ff1493 !important;
  border-color: #ff1493 !important;
  color: #ffffff !important;
}

.theme-pink-girl .ant-tag-primary,
.theme-pink-girl .ant-tag-blue {
  background-color: #ff69b4 !important;
  border-color: #ff69b4 !important;
  color: #ffffff !important;
  /* 粉红主题标签使用白色文字 */
}

.theme-pink-girl .ant-menu-item-selected {
  color: #ff69b4 !important;
}

.theme-pink-girl .ant-menu-item-selected::after {
  border-right-color: #ff69b4 !important;
}

.theme-pink-girl .ant-menu-horizontal>.ant-menu-item-selected {
  border-bottom-color: #ff69b4 !important;
}

.theme-pink-girl a {
  color: #ff1493;
}

.theme-pink-girl a:hover {
  color: #3e70f7 !important;
}

/* 粉红主题的特殊效果 */
.theme-pink-girl .ant-card {
  box-shadow: 0 0px 0px rgba(255, 105, 180, 0.1) !important;
}

.theme-pink-girl .ant-card:hover {
  box-shadow: 0 0px 0px rgba(255, 105, 180, 0.2) !important;
}

.theme-pink-girl .ant-input:focus,
.theme-pink-girl .ant-input-focused {
  border-color: #ff69b4 !important;
  box-shadow: 0 0 0 0px rgba(255, 105, 180, 0.2) !important;
}

.theme-pink-girl .ant-select:not(.ant-select-disabled):hover .ant-select-selector,
.theme-pink-girl .ant-select-focused .ant-select-selector {
  border-color: #ff69b4 !important;
}

.theme-pink-girl .ant-checkbox-checked .ant-checkbox-inner {
  background-color: #ff69b4 !important;
  border-color: #ff69b4 !important;
}

.theme-pink-girl .ant-radio-checked .ant-radio-inner {
  border-color: #ff69b4 !important;
}

.theme-pink-girl .ant-radio-inner::after {
  background-color: #ff69b4 !important;
}

.theme-pink-girl .ant-switch-checked {
  background-color: #ff69b4 !important;
}

.theme-pink-girl .ant-progress-bg {
  background-color: #ff69b4 !important;
}

.theme-pink-girl .ant-slider-track {
  background-color: #ff69b4 !important;
}

.theme-pink-girl .ant-slider-handle {
  border-color: #ff69b4 !important;
}

.theme-pink-girl .ant-slider-handle:focus {
  box-shadow: 0 0 0 5px rgba(255, 105, 180, 0.2) !important;
}

/* 粉红主题的导航栏样式 */
.theme-pink-girl .navbar-avatar {
  border: 2px solid #ff69b4 !important;
}

.theme-pink-girl .navbar-upload-btn:hover {
  background-color: rgba(255, 105, 180, 0.1) !important;
  color: #ff69b4 !important;
}

/* 粉红主题的表格样式 */
.theme-pink-girl .ant-table-thead>tr>th {
  background-color: rgba(255, 105, 180, 0.05) !important;
}

.theme-pink-girl .ant-table-tbody>tr:hover>td {
  background-color: rgba(255, 105, 180, 0.03) !important;
}

/* 粉红主题的分页样式 */
.theme-pink-girl .ant-pagination-item-active {
  background-color: #ff69b4 !important;
  border-color: #ff69b4 !important;
}

.theme-pink-girl .ant-pagination-item-active a {
  color: #ffffff !important;
}

/* 粉红主题的标签页样式 */
.theme-pink-girl .ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #ff69b4 !important;
}

.theme-pink-girl .ant-tabs-ink-bar {
  background-color: #ff69b4 !important;
}

/* 粉红主题的消息提示样式 */
.theme-pink-girl .ant-message-success .anticon {
  color: #ff91c7 !important;
}

.theme-pink-girl .ant-notification-notice-success .ant-notification-notice-icon {
  color: #ff91c7 !important;
}

/* 粉红主题的加载动画 */
.theme-pink-girl .ant-spin-dot-item {
  background-color: #ff69b4 !important;
}

/* 粉红主题的时间轴样式 */
.theme-pink-girl .ant-timeline-item-head {
  background-color: #ff69b4 !important;
  border-color: #ff69b4 !important;
}

/* 粉红主题的步骤条样式 */
.theme-pink-girl .ant-steps-item-finish .ant-steps-item-icon {
  background-color: #ff69b4 !important;
  border-color: #ff69b4 !important;
}

.theme-pink-girl .ant-steps-item-process .ant-steps-item-icon {
  background-color: #ff69b4 !important;
  border-color: #ff69b4 !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .theme-management-container {
    padding: 16px;
  }

  .theme-card-active {
    transform: none;
  }

  .theme-card-active:hover {
    transform: none;
  }
}

.ant-tag.ant-tag-geekblue,
.ant-tag.ant-tag-magenta,
.ant-tag.ant-tag-volcano {
  color: #000000 !important;
}
/* 生产环境样式修复 - 确保逛街活动模块高度正确 */

/* 强制覆盖逛街活动模块的高度限制 */
.street-activity-module {
  min-height: 123px !important;
  max-height: none !important; /* 移除最大高度限制 */
  height: auto !important; /* 允许内容自动撑开 */
}

/* 确保活动项目有足够的高度 */
.street-activity-item {
  min-height: 80px !important;
}

.activity-info {
  height: auto !important;
  min-height: 28px !important;
}

/* 生产环境导航栏搜索框样式修复 - 保持原有的圆角 */
.navbar-search-container {
  transition: all 0.3s ease !important;
}

.navbar-search-container:hover,
.navbar-search-container:focus-within {
  border-color: #40a9ff !important;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
  border-radius: 36px !important; /* 药丸形状 */
}

/* 桌面端搜索框药丸形状 */
.desktop-search .navbar-search-container {
  border-radius: 20px !important;
}

.desktop-search .navbar-search-container:hover,
.desktop-search .navbar-search-container:focus-within {
  border-radius: 20px !important; /* 保持药丸形状 */
}

/* 移动端搜索框样式修复 */
.mobile-top-navbar .navbar-search-container {
  background: #f5f5f5 !important;
  border-radius: 20px !important;
  border: 1px solid #e8e8e8 !important;
}

/* 确保移动端搜索框的搜索图标显示 */
.mobile-top-navbar .navbar-search-submit-button {
  color: #666 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mobile-top-navbar .navbar-search-submit-button:hover {
  color: #1890ff !important;
  background: rgba(24, 144, 255, 0.1) !important;
}

.mobile-top-navbar .navbar-search-submit-button .anticon {
  font-size: 16px !important;
}

/* 高优先级选择器确保搜索按钮样式正确 */
.mobile-top-navbar .ant-btn.ant-btn-text.ant-btn-color-default.ant-btn-variant-text.ant-btn-icon-only.navbar-search-submit-button {
  color: #666 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.mobile-top-navbar .ant-btn.ant-btn-text.ant-btn-color-default.ant-btn-variant-text.ant-btn-icon-only.navbar-search-submit-button:hover {
  color: #1890ff !important;
  background: rgba(24, 144, 255, 0.1) !important;
}

.mobile-top-navbar .ant-btn.ant-btn-text.ant-btn-color-default.ant-btn-variant-text.ant-btn-icon-only.navbar-search-submit-button .anticon {
  font-size: 16px !important;
}

/* 生产环境导航栏头像样式修复 - 只影响导航栏 */
.navbar-header .navbar-user-avatar,
.navbar-header .navbar-user-avatar .ant-avatar,
.navbar-right .navbar-user-avatar,
.navbar-right .navbar-user-avatar .ant-avatar,
.mobile-top-navbar .navbar-user-avatar,
.mobile-top-navbar .navbar-user-avatar .ant-avatar,
.mobile-top-navbar .custom-user-avatar,
.mobile-top-navbar .avatar-with-verification {
  box-sizing: border-box !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.navbar-header .navbar-user-avatar .ant-avatar img,
.navbar-right .navbar-user-avatar .ant-avatar img,
.mobile-top-navbar .navbar-user-avatar .ant-avatar img,
.mobile-top-navbar .custom-user-avatar .ant-avatar img,
.mobile-top-navbar .avatar-with-verification img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
}

/* 移动端样式修复 */
@media (max-width: 768px) {
  .street-activity-module {
    min-height: 123px !important;
    max-height: 178px !important;
    height: auto !important;
    padding: 8px !important;
  }
  
  .street-activity-content {
    flex: 1 1 !important;
  }
  
  .street-activity-grid {
    min-height: 100px !important;
  }

  /* 移动端导航栏头像修复 */
  .navbar-header .navbar-user-avatar,
  .navbar-header .navbar-user-avatar .ant-avatar,
  .navbar-right .navbar-user-avatar,
  .navbar-right .navbar-user-avatar .ant-avatar,
  .mobile-top-navbar .navbar-user-avatar,
  .mobile-top-navbar .navbar-user-avatar .ant-avatar,
  .mobile-top-navbar .custom-user-avatar,
  .mobile-top-navbar .avatar-with-verification {
    width: 28px !important;
    height: 28px !important;
  }
}

@media (max-width: 480px) {
  .street-activity-module {
    min-height: 123px !important;
    max-height: 178px !important;
    height: auto !important;
    padding: 8px !important;
  }
}

/* 错误处理相关样式 */

.chunk-error {
  padding: 50px 20px;
  text-align: center;
  background: #fafafa;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.network-error {
  padding: 50px 20px;
  text-align: center;
  background: #fff7e6;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.error-boundary-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.error-retry-button {
  margin-top: 16px;
  min-width: 120px;
}

.error-message {
  color: #666;
  margin: 16px 0;
  line-height: 1.6;
}

.offline-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #faad14;
  color: white;
  text-align: center;
  padding: 8px;
  z-index: 9999;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.offline-indicator .anticon {
  margin-right: 8px;
}

/* 加载失败时的占位样式 */
.lazy-loading-error {
  padding: 40px 20px;
  text-align: center;
  background: #f5f5f5;
  border-radius: 8px;
  margin: 20px 0;
}

.lazy-loading-error .ant-result-title {
  color: #666;
  font-size: 18px;
}

.lazy-loading-error .ant-result-subtitle {
  color: #999;
  font-size: 14px;
}

/* 网络状态指示器 */
.network-status-indicator {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  background: white;
  border-radius: 20px;
  padding: 8px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #d9d9d9;
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
}

.network-status-indicator.online {
  border-color: #52c41a;
  color: #52c41a;
}

.network-status-indicator.offline {
  border-color: #ff4d4f;
  color: #ff4d4f;
  background: #fff2f0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chunk-error,
  .network-error {
    padding: 30px 15px;
    min-height: 300px;
  }
  
  .error-boundary-container {
    padding: 15px;
  }
  
  .offline-indicator {
    font-size: 12px;
    padding: 6px;
  }
  
  .network-status-indicator {
    bottom: 15px;
    right: 15px;
    padding: 6px 12px;
    font-size: 11px;
  }
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .chunk-error {
    background: #1f1f1f;
    color: #fff;
  }
  
  .network-error {
    background: #2a1f0f;
    color: #fff;
  }
  
  .lazy-loading-error {
    background: #262626;
    color: #fff;
  }
  
  .network-status-indicator {
    background: #1f1f1f;
    border-color: #434343;
    color: #fff;
  }
}
/**
 * Ant Design 统一样式覆盖
 * 用于解决全局样式冲突问题
 * 
 * 使用说明：
 * 1. 这个文件应该在所有其他CSS文件之后加载
 * 2. 使用高特异性选择器确保优先级
 * 3. 统一管理所有Ant Design组件的自定义样式
 */

/* ==========================================================================
   通用组件样式统一
   ========================================================================== */

/* 按钮组件统一样式 */
.ant-btn {
  border-radius: 6px !important;
  font-weight: 400 !important;
  transition: all 0.3s ease !important;
}

/* 输入框组件统一样式 */
.ant-input,
.ant-input-affix-wrapper {
  border-radius: 6px !important;
}

.ant-input:focus,
.ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper-focused {
  border-color: #40a9ff !important;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;
}

/* 卡片组件统一样式 */
.ant-card {
  border-radius: 0px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
}

.ant-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
  transform: none;
}

/* 模态框组件统一样式 */
.ant-modal {
  z-index: 1000 !important;
}

.ant-modal-mask {
  z-index: 999 !important;
}

.ant-modal-content {
  border-radius: 8px !important;
}

/* 下拉选择器统一样式 */
.ant-select-dropdown {
  z-index: 1050 !important;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08) !important;
  border-radius: 6px !important;
}

/* 列表项统一样式 */
.ant-list-item {
  padding: 12px 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

/* 表单项统一样式 */
.ant-form-item {
  margin-bottom: 16px !important;
}

.ant-form-item-control-input {
  min-height: 32px !important;
  line-height: 1.5715 !important;
}

/* 评论组件统一样式 */
.ant-comment {
  padding: 12px 0 !important;
}

.ant-comment-content {
  margin-left: 12px !important;
}

/* 进度条统一样式 */
.ant-progress {
  margin: 8px 0 !important;
}

/* 上传组件统一样式 */
.ant-upload-drag {
  border: 2px dashed #d9d9d9 !important;
  border-radius: 6px !important;
  background: #fafafa !important;
}

.ant-upload-drag:hover {
  border-color: #40a9ff !important;
}

/* 标签组件统一样式 */
.ant-tag {
  border-radius: 4px !important;
  font-size: 12px !important;
}

/* 头像组件统一样式 */
.ant-avatar {
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   间距组件特殊处理
   ========================================================================== */

/* Space组件统一间距 - 使用CSS Grid替代flex以避免冲突 */
.ant-space {
  display: inline-flex !important;
  flex-wrap: wrap !important;
}

.ant-space-item {
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

/* 不同尺寸的间距定义 */
.ant-space-small>.ant-space-item:not(:last-child) {
  margin-right: 8px !important;
}

.ant-space-middle>.ant-space-item:not(:last-child) {
  margin-right: 16px !important;
}

.ant-space-large>.ant-space-item:not(:last-child) {
  margin-right: 24px !important;
}

/* 垂直间距 */
.ant-space-vertical.ant-space-small>.ant-space-item:not(:last-child) {
  margin-right: 0 !important;
  margin-bottom: 8px !important;
}

.ant-space-vertical.ant-space-middle>.ant-space-item:not(:last-child) {
  margin-right: 0 !important;
  margin-bottom: 16px !important;
}

.ant-space-vertical.ant-space-large>.ant-space-item:not(:last-child) {
  margin-right: 0 !important;
  margin-bottom: 24px !important;
}

/* ==========================================================================
   页面特定样式修复
   ========================================================================== */

/* 图片详情页特定样式 */
.image-detail-page .ant-form-item {
  margin-bottom: 16px !important;
  padding: 0 !important;
}

.image-detail-page .ant-comment {
  border-bottom: 1px solid #f0f0f0 !important;
}

/* 上传页面特定样式 */
.upload-page .ant-upload-drag {
  min-height: 180px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 用户页面特定样式 */
.user-page .ant-card {
  margin-bottom: 16px !important;
}

.user-page .ant-space {
  width: 100% !important;
}

/* ==========================================================================
   响应式样式
   ========================================================================== */

@media (max-width: 768px) {
  .ant-card {
    margin: 0px !important;
    border-radius: 0px !important;
  }

  .ant-btn {
    font-size: 12px !important;
    padding: 0px 3px !important;
  }

  .ant-space-item {
    margin-right: 0px !important;
  }
}

/* ==========================================================================
   动画和过渡效果统一
   ========================================================================== */

.ant-slide-up-enter,
.ant-slide-up-appear {
  animation-duration: 0.3s !important;
  animation-timing-function: ease-out !important;
}

.ant-fade-enter,
.ant-fade-appear {
  animation-duration: 0.3s !important;
}

/* ==========================================================================
   深色主题支持（如果需要）
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .ant-card {
    background: #1f1f1f !important;
    border-color: #303030 !important;
  }

  .ant-input {
    background: #1f1f1f !important;
    border-color: #303030 !important;
    color: #fff !important;
  }
}
/* 图片列表CSS - 优化版 2025-06 */

.masonry-grid {
  display: flex;
  margin-left: 0px;
  width: auto;
  will-change: transform;
  background-color: #f5f5f5f5;
}

/* 移动端2列布局优化 - 修复单列问题 */
@media (max-width: 768px) {

  /* 强制移动端显示2列 */
  .mobile-images-list.masonry-grid {
    display: flex !important;
    flex-direction: row !important;
  }

  /* 确保只显示2列 */
  .mobile-images-list .masonry-grid-column {
    width: calc(50% - 2px) !important;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(50% - 2px);
    max-width: calc(50% - 2px) !important;
  }

  /* 隐藏多余的列 */
  .mobile-images-list .masonry-grid-column:nth-child(n+3) {
    display: none !important;
  }

  .reward-info {
    margin-right: 8px;
    display: flex;
    align-items: flex-start;
  }
}

/* 超小屏幕也强制2列 */
@media (max-width: 480px) {
  .mobile-images-list.masonry-grid {
    display: flex !important;
    flex-direction: row !important;
  }

  .mobile-images-list .masonry-grid-column {
    width: calc(50% - 1px) !important;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(50% - 1px);
    max-width: calc(50% - 1px) !important;
    padding-left: 2px !important;
  }

  .mobile-images-list .masonry-grid-column:nth-child(n+3) {
    display: none !important;
  }

  .reward-info {
    margin-right: 8px;
    display: flex;
    align-items: flex-start;
  }
}

/* 强化列样式，确保列不会因为高度变化而位移 */
.masonry-grid-column {
  padding-left: 2px;
  padding-right: 2px;
  background-clip: padding-box;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
  /* 允许显示超出部分（如阴影） */
  min-height: 200px;
  /* 确保短列仍有基本高度 */
  contain: layout style paint;
  /* 告诉浏览器这个元素及其子元素的布局、样式和绘制是相对独立的 */
}

/* 优化网格项样式，防止突然位移 */
.masonry-grid-item {
  margin-bottom: 8px;
  position: relative;
  transition: transform 0.2s ease;
  /* 平滑过渡变化 */
  contain: layout style;
  /* 局部内容变化不影响整体布局 */
}

/* 确保图片卡片有固定的最小尺寸，防止突然崩塌 */
.image-card {
  position: relative;
  min-height: 120px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* 为图片容器添加占位空间确保尺寸 - CLS优化 */
.homepage-image-wrapper {
  position: relative;
  width: 100%;
  min-height: 150px;
  /* 增加最小高度，减少布局偏移 */
  background-color: #f5f5f5;
  /* CLS优化：为图片加载预留空间 */
  contain: layout style;
  /* CSS containment优化 */
  /* 占位背景色 */
  overflow: hidden;
}

/* 图片骨架屏样式优化 */
.image-skeleton-placeholder {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
}

/* 优化图片加载样式 */
.image-card-img {
  display: block;
  max-width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
}

/* 确保图片加载前后容器不变形 */
.image-card.loading .homepage-image-wrapper {
  background-color: #f0f0f0;
}

/* 确保图片信息区域有一致高度 */
.image-info {
  min-height: 20px;
  padding: 8px 0 0 0;
}

/* 添加网格布局样式 */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  padding: 10px;
}

.image-card .ant-card-cover {
  flex: 1 1;
  overflow: hidden;
}

/* 修改图片样式，确保水平和垂直居中 */
.image-list-page .image-card-img {
  width: auto;
  /* 改为auto，让图片保持原始宽高比 */
  max-width: 100%;
  /* 限制最大宽度 */
  height: auto;
  /* display: block;*/
  margin: 0 auto;
  /* 水平居中 */
  object-fit: contain;
  /* 保持图片比例并适应容器 */
  max-height: 100%;
  /* 确保图片不超出容器 */
  border-radius: 8px;
  /* 添加圆角 */
}

/* 完全自定义的卡片组件样式 */
.custom-image-card {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05);
}

.custom-image-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
}

.custom-image-card-cover {
  flex: 1 1;
  overflow: hidden;
}

.custom-image-content {
  padding: 0 6px !important;
  border-radius: 0 0 8px 8px !important;
  background-color: #fff;
}

/* 调整内容间距 */
.custom-image-content .image-link {
  margin-bottom: 0px;
  display: block;
}

.custom-image-content .image-list-card-footer {
  margin: 0 0 4px 0;
  height: 32px;
}

/* 保留旧样式以兼容 */
.image-list-item-card .ant-card-body {
  padding: 8px !important;
  border-radius: 0 0 8px 8px !important;
}

/* 添加自定义类名替代ant-card-body */
.image-content {
  padding: 0px !important;
  border-radius: 0 0 8px 8px !important;
  background-color: #fff;
}

/* 为自定义类提供额外的样式 */
.image-card.image-content {
  border: none;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.image-card.image-content:hover {
  transform: translateY(-2px);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
}

/* 新增样式：为需求类型标签添加半高背景色 */
.ant-tag.ant-tag-blue.image-tag {
  border: none;
  border-radius: 0px;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: bold;
  line-height: 20px;
  background: linear-gradient(to top, rgba(255, 255, 0, 0.3) 50%, transparent 50%) !important;
  color: #000 !important;
  margin: 0 !important;
  flex-shrink: 0;
  /* 防止标签被压缩 */
  max-width: 50px;
  /* 限制标签最大宽度 */
}

.masonry-grid-item .ant-avatar {
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
  height: 20px !important;
  width: 20px !important;
  font-weight: lighter;
  margin: 0 !important;
  padding: 0 !important;
}

:where(.css-dev-only-do-not-override-240cud).ant-card .ant-card-meta-detail>div:not(:last-child) {
  margin-bottom: 0px;
}

.card-meta-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.image-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.image-link:hover {
  color: #1890ff;
}

/* 标签覆盖容器 */
.tag-overlap-container {
  position: relative;
  width: 100%;
  padding-top: 20px;
  /* 为标签预留空间 */
}

/* 标签样式 */
.tag-overlap-container .image-tag {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 2;
  /* 确保标签在上层 */
}

/* 带缩进的描述容器 */
.description-with-indent {
  position: relative;
  padding-left: 8px;
  /* 第一行起始缩进 */
}

/* 描述文本样式 */
.image-description {
  display: block;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: #333 !important;
  line-height: 1.5;
  max-height: 3em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  text-indent: 40px;
}

/* 确保链接中的文本也是可见的 */
.image-link .image-description {
  color: #333;
}

/* 确保悬停时文本颜色变为蓝色 */
.image-link:hover .image-description {
  color: #1890ff !important;
}

.homepage-image-info {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* 确保链接中的文本也是可见的 */
.image-link .image-description {
  color: #333;
  overflow: hidden;
  padding: 0;
  margin: 0;
  font-size: 12px;
}

/* 确保悬停时文本颜色不变为白色 */
.image-link:hover .image-description {
  color: #1890ff !important;
  /* 悬停时变为蓝色，而不是白色 */
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

/* 添加更高特异性选择器，确保首页的样式不被覆盖 */
.image-card .user-info,
.masonry-grid-item .user-info,
.grid-layout .user-info {
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  margin-top: 8px;
  flex-direction: row;
  text-align: left;
}

.user-link {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 24px;
  height: 24px;
}

.user-nickname {
  color: inherit;
  font-weight: lighter;
  font-size: 0.8rem;
}

.card-content {
  padding: 0px;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.reward-info {
  font-size: 10px;
  margin: 0;
}

.reward-amount {
  color: #333;
}

.reward-amount strong {
  color: red;
  font-size: large;
}

.reward-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.reward-link:hover {
  color: #1890ff;
}

/* 新增统计信息样式 */
.stats-info {
  font-size: 12px;
  color: #8c8c8c;
}

.help-count {
  color: rgb(140, 140, 140);
  ;
}

.follow-count {
  color: rgb(140, 140, 140);
}

.image-list-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

/* Styles for the image list card stats text */
.image-list-card-stat-text {
  color: rgb(140, 140, 140);
  font-size: 8px;
}

.image-list-card-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.image-list-card-user-info {
  margin: 0;
  height: 22px;
  width: 22px;
}

/* 添加图片列表统计信息样式 */
.image-stats-info-list {
  margin: 0 0 -2px 0;
  padding: 6.5px 0 0 0;
  font-size: 10px;
}

/* Apply parent class and remove !important */
.image-list-page .image-card-img {
  opacity: 1;
  width: 100%;
  height: auto;
  height: -webkit-fit-content;
  height: fit-content;
  max-width: 100%;
  max-height: 480px !important;
  min-height: 72px !important;
  object-fit: cover !important;
}

.ant-avatar.ant-avatar-circle.ant-avatar-image.ant-avatar-icon.user-avatar:hover {
  border: none;
}

.ant-tag.ant-tag-blue.image-tag.css-dev-only-do-not-override-17qnbem {
  padding: 0 !important;
  margin: 1px 0 0 0 !important;
  font-size: 12px !important;
}

.image-description {
  padding: 0;
  margin: 0;
}

/* 专门为请求类型标签添加的样式 */
.request-type-tag {
  border: none !important;
  border-radius: 0px !important;
  padding: 0px 4px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  line-height: 20px !important;
  background: linear-gradient(to top, rgba(255, 255, 0, 0.3) 50%, transparent 50%) !important;
  color: #000 !important;
  margin: 0 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 2 !important;
  max-width: 50px !important;
  /* 限制标签宽度 */
}

/* 标签覆盖容器 */
.tag-overlap-container {
  position: relative;
  width: 100%;
  padding-top: 0px;
  /* 为标签预留空间 */
}

/* 带缩进的描述容器 */
.description-with-indent {
  position: relative;
  padding-left: 0px;
  margin-top: 0px !important;
  padding-top: 1px;
}

/* 描述文本样式 */
.image-description {
  display: block;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: #333 !important;
  line-height: 1.5;
  max-height: 3em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  text-indent: 40px;
}

/* 确保骨架屏和图片都居中显示 */
.homepage-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 10px;
  min-height: 150px;
  /* 设置最小高度 */
}

.ant-avatar.ant-avatar-circle.ant-avatar-image.user-avatar,
.ant-avatar.ant-avatar-circle.ant-avatar-image.member-avatar-free.comment-avatar,
.ant-avatar.ant-avatar-circle.ant-avatar-image.ant-dropdown-trigger.navbar-avatar,
.ant-avatar.ant-avatar-circle.ant-avatar-image.user-avatar.custom-user-avatar,
.ant-avatar.ant-avatar-circle.ant-avatar-image.member-avatar-free.user-avatar {
  border-radius: 50% !important;
}

.image-description {
  padding-top: 1.5px !important;
}

.reward-label {
  font-size: 10px;
}

/* 图片列表中的头像样式 - 使用高优先级选择器覆盖全局样式 */
.masonry-grid-item .avatar-with-verification.user-avatar,
.masonry-grid-item .ant-avatar.ant-avatar-circle.ant-avatar-image.ant-avatar-icon,
.masonry-grid-item .ant-avatar.ant-avatar-circle.ant-avatar-image,
.masonry-grid-item .ant-avatar.ant-avatar-circle,
.masonry-grid-item .ant-avatar,
.image-list-card-user-info .avatar-with-verification,
.image-list-card-user-info .ant-avatar.ant-avatar-circle.ant-avatar-image.ant-avatar-icon,
.image-list-card-user-info .ant-avatar.ant-avatar-circle.ant-avatar-image,
.image-list-card-user-info .ant-avatar.ant-avatar-circle,
.image-list-card-user-info .ant-avatar,
.custom-image-card .avatar-with-verification,
.custom-image-card .ant-avatar.ant-avatar-circle.ant-avatar-image.ant-avatar-icon,
.custom-image-card .ant-avatar.ant-avatar-circle.ant-avatar-image,
.custom-image-card .ant-avatar.ant-avatar-circle,
.custom-image-card .ant-avatar {
  width: 20px !important;
  height: 20px !important;
  margin-right: 0px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  line-height: 20px !important;
  font-size: 10px !important;
  border-radius: 50% !important;
  box-sizing: content-box !important;
}

/* 图片列表中头像的img标签 */
.masonry-grid-item .avatar-with-verification img,
.masonry-grid-item .ant-avatar img,
.image-list-card-user-info .avatar-with-verification img,
.image-list-card-user-info .ant-avatar img,
.custom-image-card .avatar-with-verification img,
.custom-image-card .ant-avatar img {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* 图片列表黑色模式优化 */
[data-theme="dark"] .masonry-grid,
.dark-mode .masonry-grid {
  background-color: #141414;
}

[data-theme="dark"] .image-card,
[data-theme="dark"] .custom-image-card,
.dark-mode .image-card,
.dark-mode .custom-image-card {
  background-color: #262626;
  border: 1px solid #434343;
}

[data-theme="dark"] .image-card:hover,
[data-theme="dark"] .custom-image-card:hover,
.dark-mode .image-card:hover,
.dark-mode .custom-image-card:hover {
  background-color: #303030;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .homepage-image-wrapper,
.dark-mode .homepage-image-wrapper {
  background-color: #262626;
}

[data-theme="dark"] .custom-image-content,
[data-theme="dark"] .image-content,
.dark-mode .custom-image-content,
.dark-mode .image-content {
  background-color: #262626;
}

[data-theme="dark"] .image-description,
.dark-mode .image-description {
  color: #fff !important;
}

[data-theme="dark"] .image-link:hover .image-description,
.dark-mode .image-link:hover .image-description {
  color: #1890ff !important;
}

[data-theme="dark"] .user-nickname,
.dark-mode .user-nickname {
  color: #ccc;
}

[data-theme="dark"] .reward-amount,
.dark-mode .reward-amount {
  color: #fff;
}

[data-theme="dark"] .reward-amount strong,
.dark-mode .reward-amount strong {
  color: #ff4d4f;
}

[data-theme="dark"] .stats-info,
[data-theme="dark"] .help-count,
[data-theme="dark"] .follow-count,
[data-theme="dark"] .image-list-card-stat-text,
.dark-mode .stats-info,
.dark-mode .help-count,
.dark-mode .follow-count,
.dark-mode .image-list-card-stat-text {
  color: #8c8c8c;
}

[data-theme="dark"] .reward-label,
.dark-mode .reward-label {
  color: #ccc;
}

[data-theme="dark"] .image-skeleton-placeholder,
.dark-mode .image-skeleton-placeholder {
  background-color: #434343;
}

[data-theme="dark"] .image-card.loading .homepage-image-wrapper,
.dark-mode .image-card.loading .homepage-image-wrapper {
  background-color: #434343;
}

/* 图片卡片内容区域黑色模式 */
[data-theme="dark"] .ant-card-body,
.dark-mode .ant-card-body {
  background-color: #262626;
  color: #fff;
}

[data-theme="dark"] .card-content,
.dark-mode .card-content {
  background-color: #262626;
}

/* 标签黑色模式 */
[data-theme="dark"] .ant-tag.ant-tag-blue.image-tag,
[data-theme="dark"] .request-type-tag,
.dark-mode .ant-tag.ant-tag-blue.image-tag,
.dark-mode .request-type-tag {
  background: linear-gradient(to top, rgba(255, 255, 0, 0.4) 50%, transparent 50%) !important;
  color: #000 !important;
}

/* 悬赏金额样
式 - 不同字体大小 */
.reward-amount {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}

.reward-text {
  font-size: 9px;
  color: #000;
  font-weight: normal;
}

.reward-number {
  font-size: 20px !important;
  color: red;
  font-weight: bold;
  margin: 0 0px -2px 0px;
}

/* 黑色模式下的悬赏样式 */
[data-theme="dark"] .reward-text,
[data-theme="dark"] .reward-number,
.dark-mode .reward-text,
.dark-mode .reward-number {
  color: #ff4d4f;
}

/* Apply parent class and remove !important */
@media (max-width: 768px) {
  .image-list-page .image-card-img {
    max-height: -webkit-max-content;
    max-height: max-content;
    /* Removed !important */
    object-fit: contain;
    /* Removed !important */
    height: -webkit-fit-content;
    height: fit-content;
    max-width: 100%;
    max-height: 360px;
    min-height: 100px;
    object-fit: cover;
    border-radius: 8px 8px 0 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .verification-badge.verified {
    background-color: #1890ff;
    color: #fff;
    border-color: #1890ff;
    flex-wrap: wrap;
    align-content: center;
    width: 10px;
    height: 10px;
    font-size: 8px !important;
    bottom: -5px;
    right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ant-avatar.ant-avatar-circle.ant-avatar-image.ant-avatar-icon.user-avatar:hover {
    border: none;
  }
}

@media (prefers-color-scheme: dark) {
  .masonry-grid {
    display: flex;
    margin-left: 0px;
    width: auto;
    will-change: transform;
    background-color: #1f1f1f;
  }

  .ant-layout {
    display: flex;
    flex: auto;
    flex-direction: column;
    min-height: 0;
    background-color: #1f1f1f;
  }

  .custom-image-content {
    padding: 0 8px !important;
    border-radius: 0 0 8px 8px !important;
    background-color: #2a2a2a;
  }

  .ant-tag.ant-tag-blue.image-tag.request-type-tag,
  .image-description {
    color: #bfbfbf !important;
  }

  .homepage-image-wrapper,
  .custom-image-card.image-card.loaded.image-list-item-card {
    background-color: #2a2a2a;
  }

  .reward-text,
  .reward-number {
    color: #ff4d4f;
  }
}
/* 骨架屏相关样式 */

/* 图片骨架屏占位符 */
.image-skeleton-placeholder {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 8px;
}

/* 设置骨架屏中图片容器的样式 */
.homepage-image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 0;
  min-height: 72px;
  max-height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 0;
}

/* 图片加载前的状态 */
.image-card.loading .image-card-img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 图片加载后的状态 */
.image-card.loaded .image-card-img {
  opacity: 1;
  transition: opacity 0.3s ease;
  border-radius: 0;
}

/* 加载中的图片卡片 */
.image-card.loading .ant-skeleton-image {
  display: block;
}

/* 加载完成的图片卡片 */
.image-card.loaded .ant-skeleton-image {
  display: none;
}

/* 首页加载中状态 */
.loader-container {
  text-align: center;
  margin-top: 20px;
  height: 80px;
  padding: 20px;
}

/* 没有更多图片的提示 */
.no-more-images {
  text-align: center;
  margin-top: 20px;
  color: #999;
}

/* 自定义骨架屏动画 */
@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.ant-skeleton-image {
  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: 8px;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 确保骨架屏SVG图标居中 */
.ant-skeleton-image-svg {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* 图片卡片骨架屏样式 */
.image-card-skeleton .ant-skeleton-image {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 150px !important;
}

/* 媒体查询适配不同设备 */
@media (max-width: 768px) {
  .image-skeleton-placeholder {
    width: 100% !important;
    height: 100% !important;
  }
  
  .homepage-image-wrapper {
    max-height: 360px;
    padding: 0px 0;
  }
} 

@media (prefers-color-scheme: dark) {
  .masonry-grid {
      display: flex;
      margin-left: 0px;
      width: auto;
      will-change: transform;
      background-color: #1f1f1f;
  }
  .ant-layout {
    display: flex;
    flex: auto;
    flex-direction: column;
    min-height: 0;
    background-color: #1f1f1f;
  }
  .custom-image-content {
    padding: 0 8px !important;
    border-radius: 0 0 8px 8px !important;
    background-color: #2a2a2a;
  }

  .recommendation-header,
  .ant-tag.ant-tag-blue.image-tag.request-type-tag,
  .image-description{
   color: #bfbfbf !important;
  }
  .homepage-image-wrapper,
  .custom-image-card.image-card.loaded.image-list-item-card{
		background-color: #2a2a2a;
	}
  .recommendation-header h3{
    color: #bfbfbf !important;
   }
}
.avatar-with-verification {
    position: relative;
    display: inline-block;
    box-sizing: content-box; /* 确保头像容器不受box-sizing影响 */
}

.avatar-with-verification .ant-avatar {
    box-sizing: content-box !important; /* 确保头像本身保持圆形 */
    border-radius: 50% !important;
}

.ant-layout .avatar-with-verification,
.ant-layout .avatar-with-verification .ant-avatar,
.ant-layout .avatar-with-verification.user-avatar,
.ant-layout .avatar-with-verification.member-avatar,
.ant-layout .avatar-with-verification.mobile-navbar-avatar,
.ant-layout .avatar-with-verification.mobile-top-navbar-avatar,
.ant-layout .avatar-with-verification.desktop-navbar-avatar,
.avatar-with-verification,
.avatar-with-verification .ant-avatar,
.avatar-with-verification.user-avatar,
.avatar-with-verification.member-avatar,
.avatar-with-verification.mobile-navbar-avatar,
.avatar-with-verification.mobile-top-navbar-avatar,
.avatar-with-verification.desktop-navbar-avatar {
  box-sizing: content-box !important;
  border-radius: 50% !important;
}

/* 针对所有可能的头像组合进行修复 */
.ant-layout .ant-avatar.ant-avatar-circle.ant-avatar-image.user-avatar,
.ant-layout .ant-avatar.ant-avatar-circle.ant-avatar-image.member-avatar-free,
.ant-layout .ant-avatar.ant-avatar-circle.ant-avatar-image,
.ant-avatar.ant-avatar-circle.ant-avatar-image.user-avatar,
.ant-avatar.ant-avatar-circle.ant-avatar-image.member-avatar-free,
.ant-avatar.ant-avatar-circle.ant-avatar-image {
  box-sizing: content-box !important;
  border-radius: 50% !important;
}
.verification-badge{
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    width: 10px;
    height: 10px;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 8px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    border: 1px solid #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    /* transition: all 0.2s ease !important; */ /* 移除以减少闪烁 */
    z-index: 100 !important;
}

.userdetail-verification-badge{
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    width: 10px;
    height: 10px;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 8px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    border: 1px solid #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    /* transition: all 0.2s ease !important; */ /* 移除以减少闪烁 */
    z-index: 100 !important;
}

.userprofile-verification-badge{
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 8px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    border: 1px solid #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    /* transition: all 0.2s ease !important; */ /* 移除以减少闪烁 */
    z-index: 100 !important;
}

.imagelist-verification-badge{
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    width: 10px;
    height: 10px;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 8px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    border: 1px solid #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    /* transition: all 0.2s ease !important; */ /* 移除以减少闪烁 */
    z-index: 100 !important;
}

.profilevisits-verification-badge {
    position: absolute !important;
    bottom: 0px !important;
    right: 0px !important;
    width: 10px;
    height: 10px;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 8px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    border: 1px solid #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    /* transition: all 0.2s ease !important; */ /* 移除以减少闪烁 */
    z-index: 100 !important;
}
.verification-badge:hover,
.userdetail-verification-badge:hover,
.userprofile-verification-badge:hover,
.imagelist-verification-badge:hover,
.profilevisits-verification-badge:hover {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* 已认证样式：蓝色背景 + 白色字体 */
.verification-badge.verified,
.userdetail-verification-badge.verified,
.userprofile-verification-badge.verified,
.imagelist-verification-badge.verified,
.profilevisits-verification-badge.verified {
    background-color: #1890ff !important;
    color: #fff !important;
}

/* 未认证样式：灰色背景 + 白色字体 */
.verification-badge.unverified,
.userdetail-verification-badge.unverified,
.userprofile-verification-badge.unverified,
.imagelist-verification-badge.unverified,
.profilevisits-verification-badge.unverified {
    background-color: #ccc !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* 导航栏专用样式 - 防止与图片列表中的用户头像冲突 */
.desktop-navbar-avatar .verification-badge {
    width: 14px;
    height: 14px;
    font-size: 8px;
    bottom: -1px;
    right: -1px;
    border: 1px solid #fff;
    z-index: 1000; /* 确保在导航栏中显示在最上层 */
}

.mobile-navbar-avatar .verification-badge,
.mobile-top-navbar-avatar .verification-badge {
    width: 12px;
    height: 12px;
    font-size: 7px;
    bottom: -1px;
    right: -1px;
    border: 1px solid #fff;
    z-index: 1000; /* 确保在导航栏中显示在最上层 */
}

/* 导航栏头像悬停效果 */
.desktop-navbar-avatar .verification-badge:hover,
.mobile-navbar-avatar .verification-badge:hover,
.mobile-top-navbar-avatar .verification-badge:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* 图片列表中的用户头像样式 - 保持原有样式 */
.image-card-avatar .verification-badge{
    width: 16px;
    height: 16px;
    font-size: 8px;
    bottom: -2px;
    right: -2px;
    border: 1px solid #fff;
    z-index: 10;
}

.image-detail-avatar .verification-badge{
    width: 16px;
    height: 16px;
    font-size: 8px;
    bottom: -2px;
    right: -2px;
    border: 1px solid #fff;
    z-index: 10;
}

.user-avatar .imagelist-verification-badge{
    width: 10px;
    height: 10px;
    font-size: 8px;
    bottom: -2px;
    right: -2px;
    border: 1px solid #fff;
    z-index: 10;
}

/* 用户详情页面头像样式 - 主头像（80px）使用更大的V字符 */
.user-detail-main-avatar .verification-badge,
.user-detail-main-avatar .userdetail-verification-badge {
    width: 22px;
    height: 22px;
    font-size: 11px !important;
    bottom: -3px !important;
    right: -3px !important;
    border: 2px solid #fff !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
}

/* 用户详情页面次要头像样式（64px） */
.user-detail-secondary-avatar .verification-badge,
.user-detail-secondary-avatar .userdetail-verification-badge,
.user-card-modal-avatar .userdetail-verification-badge {
    width: 18px !important;
    height: 18px !important;
    font-size: 9px !important;
    bottom: -2px !important;
    right: -2px !important;
    border: 2px solid #fff !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
}

/* 用户资料页面头像样式（120px）- 最大的V字符 */
.user-main-profile-avatar .verification-badge {
    width: 20px;
    height: 20px;
    font-size: 12px !important;
    bottom: -3px !important;
    right: -3px !important;
    border: 2px solid #fff !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
}

.profile-page-main-avatar .verification-badge{
    width: 20px;
    height: 20px;
    font-size: 12px !important;
    bottom: -3px !important;
    right: -3px !important;
    border: 2px solid #fff !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
}

.user-main-profile-avatar .userprofile-verification-badge {
    width: 20px !important;
    height: 20px !important;
    font-size: 12px !important;
    bottom: -3px !important;
    right: -3px !important;
    border: 2px solid #fff !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
}

.profile-page-main-avatar .userprofile-verification-badge {
    width: 20px !important;
    height: 20px !important;
    font-size: 9px !important;
    bottom: -3px !important;
    right: -3px !important;
    border: 1px solid #fff !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
}

/* 通用用户详情头像样式 - 兼容旧类名 */
.user-detail-avatar .verification-badge {
    width: 18px;
    height: 18px;
    font-size: 9px;
    bottom: -2px;
    right: -2px;
    border: 2px solid #fff;
    z-index: 10;
}
.ant-space.ant-space-horizontal.ant-space-align-start.featured-comment-content{
    gap: 4px;
    display: flex;
    align-items: center !important;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}
.ant-avatar.ant-avatar-circle.ant-avatar-image.featured-follow-avatar{
	width: 16px !important;
    height: 16px !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
}
.ant-space.ant-space-horizontal.ant-space-align-center{
    gap: 2px;
}
/* 响应式调整 */
@media (max-width: 768px) {
    .verification-badge {
        width: 10px;
        height: 10px;
        font-size: 8px !important;
        bottom: -4px;
        right: -4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .userdetail-verification-badge {
        width: 10px;
        height: 10px;
        font-size: 8px !important;
        bottom: -4px;
        right: -4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    

    .userprofile-verification-badge{
        width: 10px !important;
        height: 10px !important;
        font-size: 8px !important;
        bottom: -4px !important;
        right: -4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .imagelist-verification-badge{
        width: 10px;
        height: 10px;
        font-size: 8px !important;
        bottom: -4px;
        right: -4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .profilevisits-verification-badge {
        width: 10px;
        height: 10px;
        font-size: 8px !important;
        bottom: -4px;
        right: -4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* 移动端导航栏头像特殊调整 */
    .mobile-navbar-avatar .verification-badge,
    .mobile-top-navbar-avatar .verification-badge {
        width: 10px;
        height: 10px;
        font-size: 6px;
        bottom: 0px;
        right: 0px;
        border: 1px solid #fff;
    }
    
    /* 移动端图片卡片头像调整 */
    .image-card-avatar .verification-badge{
        width: 10px;
        height: 10px;
        font-size: 7px;
        bottom: -1px;
        right: -1px;
    }

    .user-avatar .imagelist-verification-badge {
        width: 10px;
        height: 10px;
        font-size: 7px;
        bottom: -1px;
        right: -1px;
    }
    /* 移动端用户详情页面头像调整 */
    .user-detail-main-avatar .verification-badge{
        width: 10px;
        height: 10px;
        font-size: 8px;
        bottom: -2px;
        right: -2px;
        border: 1px solid #fff;
    }
    /* 移动端用户详情页面头像调整 */
    .user-detail-main-avatar .userdetail-verification-badge {
        width: 16px;
        height: 16px;
        font-size: 8px;
        bottom: -2px;
        right: -2px;
        border: 1px solid #fff;
    }
    
    .user-detail-secondary-avatar .verification-badge,
    .user-detail-secondary-avatar .userdetail-verification-badge,
    .user-card-modal-avatar .userdetail-verification-badge {
        width: 14px;
        height: 14px;
        font-size: 7px;
        bottom: -1px;
        right: -1px;
        border: 1px solid #fff;
    }
    .ant-space.ant-space-horizontal.ant-space-align-center{
        gap: 2px !important;;
    }
    .user-main-profile-avatar .verification-badge {
        width: 18px;
        height: 18px;
        font-size: 9px;
        bottom: -2px;
        right: -2px;
        border: 1px solid #fff;
    }
    .profile-page-main-avatar .verification-badge{
        width: 18px;
        height: 18px;
        font-size: 9px;
        bottom: -2px;
        right: -2px;
        border: 1px solid #fff;
    }

    .user-main-profile-avatar .userprofile-verification-badge {
        width: 18px !important;
        height: 18px !important;
        font-size: 9px !important;
        bottom: -2px !important;
        right: -2px !important;
        border: 1px solid #fff !important;
    }

    .profile-page-main-avatar .userprofile-verification-badge {
        width: 12px !important;
        height: 12px !important;
        font-size: 9px !important;
        bottom: -2px !important;
        right: -2px !important;
        border: 1px solid #fff !important;
    }
    .ant-space.ant-space-horizontal.ant-space-align-start.featured-comment-content{
        gap: 4px;
        display: flex;
        align-items: center !important;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .ant-avatar.ant-avatar-circle.ant-avatar-image.featured-follow-avatar{
        width: 16px !important;
        height: 16px !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
}

/* 懒加载图片组件样式 */

.lazy-image-container {
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.lazy-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: scale(1.05);
}

.lazy-image.loaded {
  opacity: 1;
  transform: scale(1);
}

.lazy-image.loading {
  opacity: 0;
}

/* 占位符样式 */
.lazy-image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-shimmer {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 错误状态样式 */
.lazy-image-error {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  color: #999;
}

.error-icon {
  font-size: 24px;
  margin-bottom: 8px;
  opacity: 0.5;
}

.error-text {
  font-size: 12px;
  font-weight: 500;
}

/* 加载指示器 */
.lazy-image-loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 状态类 */
.lazy-image-idle .lazy-image-placeholder {
  opacity: 1;
}

.lazy-image-loading .lazy-image-placeholder {
  opacity: 1;
}

.lazy-image-loaded .lazy-image-placeholder {
  opacity: 0;
  pointer-events: none;
}

.lazy-image-loaded .lazy-image-loading-indicator {
  opacity: 0;
  pointer-events: none;
}

.lazy-image-error .lazy-image-placeholder,
.lazy-image-error .lazy-image-loading-indicator {
  opacity: 0;
  pointer-events: none;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .error-icon {
    font-size: 20px;
  }
  
  .error-text {
    font-size: 11px;
  }
  
  .loading-spinner {
    width: 16px;
    height: 16px;
    border-width: 1.5px;
  }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .lazy-image-placeholder {
    background-color: #e0e0e0;
  }
  
  .placeholder-shimmer {
    background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
  }
}

/* 减少动画模式支持 */
@media (prefers-reduced-motion: reduce) {
  .lazy-image,
  .placeholder-shimmer,
  .loading-spinner {
    animation: none;
    transition: none;
  }
  
  .lazy-image.loaded {
    opacity: 1;
    transform: none;
  }
}
/* 精选互动容器 */
.featured-interaction {
  padding: 8px 0;
  border-top: 1px solid #f0f0f0;
  margin-top: 8px;
}

/* 关注信息样式 */
.featured-follow-info {
  margin-bottom: 0px;
  margin-top: 6px;
}

.featured-follow-avatar {
  flex-shrink: 0;
}

.featured-follow-text {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

/* 精选评论样式 */
.featured-comment {
  position: relative;
}

.featured-comment-content {
  width: 100%;
  align-items: flex-start !important;
  flex-wrap: wrap;
}

.featured-comment-text {
  font-size: 13px;
  color: #333;
  line-height: 1.4;
  word-break: break-word;
}

/* 超级感谢评论特殊样式 */
.featured-comment.super-thank {
  border-radius: 6px;
}

.featured-comment.super-thank .featured-comment-text {
  color: #d46b08;
}

.super-thank-badge {
  background: linear-gradient(135deg, #fa8c16 0%, #d46b08 100%);
  color: white;
  font-size: 11px;
  padding: 1px 4px;
  border-radius: 8px;
  font-weight: 500;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 用户昵称样式 */
.featured-user-name {
  font-weight: bold !important;
  color: #333 !important;
  text-decoration: none;
  font-size: 13px;
}

.featured-user-name:hover {
  color: #1890ff !important;
  text-decoration: underline;
}

/* 评论切换指示器样式 */
.comment-indicators {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 0;
}

.comment-indicators .indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #d9d9d9;
  cursor: pointer;
  transition: all 0.3s ease;
}

.comment-indicators .indicator.active {
  background-color: #1890ff;
  transform: scale(1.2);
}

.comment-indicators .indicator:hover {
  background-color: #40a9ff;
}

/* 展开按钮样式 */
.featured-expand-btn {
  color: #1890ff;
  cursor: pointer;
  font-size: 13px;
  margin-left: 2px;
  transition: color 0.2s ease;
}

.featured-expand-btn:hover {
  color: #40a9ff;
  text-decoration: underline;
}

/* 图片卡片中的精选互动样式 */
.custom-image-card .featured-interaction {
  padding: 6px 8px 4px 8px;
  border-top: 1px solid #f0f0f0;
  margin-top: 4px;
  background-color: #fafafa;
  border-radius: 0 0 8px 8px;
}

.custom-image-card .featured-follow-text,
.custom-image-card .featured-comment-text {
  font-size: 12px;
  line-height: 1.3;
}

.custom-image-card .featured-user-name {
  font-size: 12px;
}

.custom-image-card .featured-follow-avatar {
  width: 18px !important;
  height: 18px !important;
  font-size: 9px !important;
}

.custom-image-card .super-thank-badge {
  font-size: 10px;
  padding: 1px 3px;
}

.custom-image-card .featured-comment.super-thank {
  padding: 4px 6px;
  margin: 2px 0;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .featured-interaction {
    padding: 6px 0;
  }

  .featured-follow-avatar {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
  }

  .featured-follow-text,
  .featured-comment-text,
  .featured-user-name {
    font-size: 12px;
  }

  .super-thank-badge {
    font-size: 10px;
    padding: 1px 5px;
  }

  .featured-comment.super-thank {
    padding: 4px 6px;
  }

  /* 图片卡片移动端样式 */
  .custom-image-card .featured-interaction {
    padding: 4px 6px 2px 6px;
  }

  .custom-image-card .featured-follow-text,
  .custom-image-card .featured-comment-text,
  .custom-image-card .featured-user-name {
    font-size: 11px;
  }

  .custom-image-card .featured-follow-avatar {
    width: 16px !important;
    height: 16px !important;
    font-size: 8px !important;
  }
}
/* 新发页面样式 - 参考 DiscoverPage 样式 */
.new-page {
  min-height: 10vh;
  background: #f5f5f5;
  padding: 8px;
}

.new-content {
  background: white;
  border-radius: 8px;
  padding: 0px;
  min-height: 400px;
}

/* 登录提示卡片 */
.new-login-card {
  max-width: 400px;
  margin: 100px auto;
  text-align: center;
}

.new-login-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* 加载器容器 */
.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.no-more-content {
  color: #999;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .new-page {
    padding: 8px;
  }

  .new-content {
    padding: 0px;
  }

  .new-login-card {
    margin: 50px auto;
  }

  .new-login-actions {
    flex-direction: column;
  }
}
/* 面包屑导航样式 */
.page-header {
  margin-bottom: 0px;
  padding: 8px;
  border-bottom: 0px solid #f0f0f0;
  display: flex;
  align-items: flex-start;
}

.page-breadcrumb {
  font-size: 14px;
  line-height: 1.5;
  background-color: #fff;
  padding: 16px 8px;
}

.page-breadcrumb a {
  color: rgba(0, 0, 0, 0.45);
  transition: color 0.3s;
  cursor: pointer !important;
}

.page-breadcrumb a:hover {
  color: #1890ff;
}

.page-breadcrumb .ant-breadcrumb-separator {
  margin: 0 8px;
  color: rgba(0, 0, 0, 0.45);
}

.page-breadcrumb .ant-breadcrumb-link {
  display: inline-flex;
  align-items: center;
}

.page-breadcrumb .ant-breadcrumb-link .anticon {
  margin-right: 4px;
}

.page-breadcrumb .ant-breadcrumb-link:last-child {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .page-header {
    padding: 8px 8px 0 8px;
    margin-bottom: 0px;
  }
  
  .page-breadcrumb {
    font-size: 12px;
  }
  
  .page-breadcrumb .ant-breadcrumb-separator {
    margin: 0 4px;
  }
} 
.settings-layout {
  min-height: 10vh;
  background-color: #f0f2f5;
}

.settings-content {
  padding: 0px;
  max-width: 100%;
  margin: 0;
  background-color: #f5f5f5;
}

.settings-container {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.settings-section {
  margin-bottom: 8px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.settings-section .ant-card-head {
  border-bottom: 1px solid #f0f0f0;
  padding: 16px 8px;
}

.settings-section .ant-card-head-title {
  font-size: 16px;
  font-weight: 500;
  padding: 0 8px;
}

.settings-section .ant-list-item {
  padding: 12px 0px !important;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  cursor: pointer !important;
  justify-content: space-between !important;
}

.settings-section .ant-list-item:hover {
  background-color: #fafafa;
}

.settings-section .ant-list-item-meta {
  align-items: center;
  margin-bottom: 0;
}

.settings-section .ant-list-item-meta-avatar {
  margin-right: 8px;
  line-height: 32px;
}

.ant-layout-content.settings-content{
  background-color: #f5f5f5;
}

.settings-section .ant-list-item-meta-title {
  margin: 0;
  line-height: 32px;
}

.settings-section .ant-list-item-meta-content {
  display: flex;
  align-items: center;
  text-align: left;
}

.settings-section .ant-list-item-meta-title {
  margin-bottom: 0 !important;
  font-size: 14px !important;
  line-height: 32px !important;
}

.settings-section .ant-icon {
  font-size: 18px;
  color: #595959;
}

.settings-item-button {
  width: 100%;
  text-align: left;
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
}

.settings-item-button:hover {
  background: #f5f5f5;
}

.settings-item-button .anticon {
  margin-right: 12px;
  font-size: 16px;
}

.settings-logout {
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

.settings-logout .ant-btn {
  height: 48px;
  font-size: 16px;
}

/* 退出登录按钮的特殊样式 */
.settings-section .logout-item {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 12px 0px !important;
  justify-content: space-between !important;
}

.settings-section .logout-item .ant-list-item-meta {
  display: flex;
  align-items: center;
}

.settings-section .logout-item .ant-list-item-meta-avatar {
  line-height: 0px;
  margin: 0px;
  padding: 0px;
}

.settings-section .logout-item .ant-list-item-meta-title {
  margin: 0;
  line-height: 32px;
}

.settings-section .logout-item .ant-list-item-meta-content {
  display: flex;
  align-items: center;
}

/* 覆盖列表项的默认样式 */
.settings-section .ant-list-item .ant-list-item-meta-title {
  line-height: normal !important;
  margin: 0 !important;
}

.settings-section .ant-list-item .ant-list-item-meta-title span {
  line-height: normal !important;
  margin: 0 !important;
}

/* 确保列表项内容垂直居中 */
.settings-section .ant-list-item .ant-list-item-meta {
  align-items: center;
}

/* 覆盖 ant-design 的默认样式 */
:where(.css-dev-only-do-not-override-240cud).ant-list .ant-list-item .ant-list-item-meta-title {
  line-height: normal !important;
  margin: 0 !important;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .settings-content {
    padding: 0px;
  }

  .settings-section {
    margin-bottom: 8px;
    padding:8px !important;
  }

  .settings-section .ant-card-head {
    padding: 4px 0px !important;
    min-height: 24px;
  }

  .settings-section .ant-list-item {
    padding: 4px 0px !important;
    display: flex;
    flex-direction: row;
    border-bottom: 0px solid #f0f0f0;
    justify-content: space-between !important;
  }

  .settings-item-button {
    height: 44px;
  }

  .settings-logout {
    padding-top: 16px;
  }

  .settings-logout .ant-btn {
    height: 44px;
  }

  /* 全局样式已移至 global-layout.css，通过 page-with-top-margin 类控制 */
  .settings-page{
    margin: 0;
 }
 .ant-card-head {
  border-bottom: 0px solid #f0f0f0 !important;
}
.ant-layout-content.settings-content{
  background-color: #f5f5f5;
}

.settings-section .ant-card-head-title {
  font-size: 16px;
  font-weight: 500;
  padding: 0 16px;
}
}

:where(.css-dev-only-do-not-override-1m63z2v).ant-card .ant-card-body {
  padding: 8px;
  border-radius: 0 0 8px 8px;
}

:where(.css-dev-only-do-not-override-17qnbem).ant-btn {
  font-size: 14px;
  height: 32px;
  padding: 0;
  border-radius: 4px;
}

.ant-list.ant-list-split.profile-settings-list.css-dev-only-do-not-override-1clthio {
  padding: 0px;
}

.ant-list-item.profile-settings-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 0 !important;
}

:where(.css-dev-only-do-not-override-1clthio).ant-list .ant-list-item .ant-list-item-meta .ant-list-item-meta-title {
  margin: 0 !important;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px !important;
  line-height: 1.5714285714285714;
}

.ant-list-item-action {
  align-items: center;
}

@media (max-width: 768px) {
  .settings-page .ant-layout.settings-layout.css-dev-only-do-not-override-1clthio {
    margin: 24px 0 0 0;
  }

  .page-header {
    padding: 8px 0 0 12px;
    border-bottom: 0px solid #f0f0f0;
    background-color: #fff;
  }

  /* 全局样式已移至 global-layout.css，通过 page-with-top-margin 类控制 */
}
.ant-layout-content.settings-content.css-dev-only-do-not-override-1clthio{
	background-color: #f5f5f5;
}

.ant-card-body{
	padding: 8px 16px !important;
}
.ant-list-item-meta-avatar{
	margin-right: 4px !important;
}
.ant-card-head-wrapper{
  margin: 0 !important;
}
@media screen and (max-width: 768px) {
  .settings-page.page-with-top-margin {
      margin: 0;
    }
  }
.address-layout {
  min-height: 10vh;
  background: #f0f2f5;
}

.address-content {
  padding: 0px;
  max-width: 100%;
  margin: 0;
}

.address-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: none;
}

.address-tabs {
  padding: 0 24px;
}

.address-tabs .ant-tabs-tab {
  font-weight: 500;
  font-size: 16px;
}

.address-list-container {
  margin: 0px 0;
  padding: 0 24px;
}

.address-actions {
  margin-top: 20px;
  padding: 0 24px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.address-form-card {
  max-width: 100%;
  margin: 0;
}

/* 地址列表项优化 */
.address-list-container .ant-list-item {
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.address-list-container .ant-list-item:last-child {
  border-bottom: none;
}

.address-list-container .ant-list-item-meta-avatar {
  margin-right: 16px;
}

.address-list-container .ant-list-item-meta-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.address-list-container .ant-list-item-meta-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  word-break: break-all;
}

.address-list-container .ant-list-item-action {
  margin-left: 16px;
}

/* 级联选择器容器样式 */
.cascader-container {
  position: relative;
  z-index: 1;
}

/* 级联选择器弹出层样式 */
.address-cascader-popup {
  z-index: 2000 !important;
}

.ant-cascader-menus {
  z-index: 2000 !important;
}

/* 确保下拉菜单在其他元素之上 */
.ant-select-dropdown {
  z-index: 2000 !important;
}

/* 修复级联选择器的弹出层位置 */
.ant-cascader-dropdown {
  position: absolute;
  z-index: 2000 !important;
}

/* 确保级联选择器内容可见 */
.ant-cascader-menu {
  height: auto !important;
  max-height: 300px !important;
}

/* 移动端优化 */
@media screen and (max-width: 768px) {
  .address-layout {
    background: #fff;
  }

  .address-content {
    padding: 0;
  }

  .address-container {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid #f0f0f0;
  }

  .address-tabs {
    padding: 0 16px !important;
    background: #fff;
    border-bottom: 0px solid #f0f0f0;
  }

  .address-tabs .ant-tabs-tab {
    font-size: 16px;
    padding: 16px 0;
  }

  .address-list-container {
    margin: 0;
    padding: 0 16px;
  }

  .address-list-container .ant-list-item {
    padding: 20px 0;
    border-bottom: 1px solid #f5f5f5;
  }

  .address-list-container .ant-list-item-meta {
    width: 100%;
    align-items: flex-start;
  }

  .address-list-container .ant-list-item-meta-avatar {
    margin-right: 12px;
    margin-top: 2px;
  }

  .address-list-container .ant-list-item-meta-title {
    font-size: 16px !important;
    font-weight: 500;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  .address-list-container .ant-list-item-meta-description {
    font-size: 14px !important;
    color: #666;
    line-height: 1.6;
    word-break: break-all;
    margin-top: 4px;
  }

  .address-list-container .ant-list-item-action {
    margin-left: 0;
    margin-top: 0px;
    flex-direction: column;
    align-items: flex-end;
  }

  .address-list-container .ant-list-item-action>li {
    padding: 0 !important;
  }

  .address-list-container .ant-list-item-action .ant-btn {
    font-size: 14px;
    height: 24px;
    padding: 0;
  }

  .address-actions {
    padding: 16px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .address-actions .ant-btn {
    min-width: 100px;
    height: 40px;
    font-size: 16px;
    border-radius: 6px;
  }

  .address-form-card {
    margin: 0;
    border-radius: 0;
  }

  /* 环境图标优化 */
  .anticon-environment {
    font-size: 20px !important;
    color: #1890ff;
  }

  /* 默认地址标识优化 */
  .address-list-container .ant-list-item-meta-title span[style*="color: #1890ff"] {
    background: #e6f7ff;
    color: #1890ff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: normal;
    margin-left: 8px;
  }

  /* 分页器优化 */
  .address-list-container .ant-pagination {
    text-align: center;
    margin-top: 20px;
    padding: 16px 0;
  }

  .address-list-container .ant-pagination .ant-pagination-item,
  .address-list-container .ant-pagination .ant-pagination-prev,
  .address-list-container .ant-pagination .ant-pagination-next {
    min-width: 40px;
    height: 40px;
    line-height: 38px;
    font-size: 16px;
  }
}

/* 超小屏幕优化 */
@media screen and (max-width: 480px) {
  .address-list-container .ant-list-item-meta-title {
    font-size: 15px !important;
  }

  .address-list-container .ant-list-item-meta-description {
    font-size: 13px !important;
  }

  .address-actions .ant-btn {
    min-width: 90px;
    font-size: 15px;
  }

  .address-tabs .ant-tabs-tab {
    font-size: 15px;
  }
}

/* 确保列表项元数据正确显示 */
:where(.css-dev-only-do-not-override-1vygad6).ant-list .ant-list-item .ant-list-item-meta {
  display: flex;
  flex: 1 1;
  align-items: flex-start;
  max-width: 100%;
}

/* 空状态优化 */
.address-list-container .ant-empty {
  padding: 40px 20px;
}

.address-list-container .ant-empty-description {
  color: #999;
  font-size: 14px;
}
/* 原生地区选择器样式 */
.native-region-selector {
  display: flex;
  gap: 8px;
  width: 100%;
  flex-direction: row;
}

.native-region-selector .native-select {
  flex: 1 1;
  height: 32px;
  padding: 2px 0px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  transition: all 0.3s;
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
  appearance: menulist;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}

.native-region-selector .native-select:hover:not(:disabled) {
  border-color: #40a9ff;
}

.native-region-selector .native-select:focus {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  outline: none;
}

.native-region-selector .native-select:disabled {
  background-color: #f5f5f5;
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

/* 选项样式 */
.native-region-selector .native-select option {
  padding: 8px 12px;
}

/* 响应式样式 */
@media (max-width: 576px) {
  .native-region-selector {
        flex-direction: row;
        gap: 12px;
        display: flex;
  }
  
  .native-region-selector .native-select {
    width: 100%;
  }
}

/* 特定选择器样式 */
.native-region-selector .province-select {
  color: #1890ff;
  font-weight: 500;
}

.native-region-selector .city-select {
  color: #52c41a;
  font-weight: 500;
}

.native-region-selector .district-select {
  color: #722ed1;
  font-weight: 500;
}

/* 占位符选项样式 */
.native-region-selector .native-select option:first-child {
  color: #bfbfbf;
} 
.notification-settings-layout {
  padding: 8px;
  background: #f0f2f5;
}

.notification-settings-content {
  max-width: 100%;
  margin: 0;
}

.notification-section {
  margin-bottom: 16px;
}

.ant-card-body {
  padding: 8px;
}

.notification-section .ant-card-body {
  padding: 8px !important;
}

.notification-section .ant-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between !important;
  color: rgba(51, 51, 51, 0.88);
  align-content: space-between;
  flex-direction: row;
  padding: 4px !important;
}

.notification-section .ant-typography {
  margin: 8px;
}

.notification-section .ant-btn-link {
  padding: 0;
  height: auto;
  line-height: 1;
  color: rgba(0, 0, 0, 0.45);
}

.notification-section .ant-list-item-meta-title {
  margin: 0;
}

.recommend-options {
  margin-top: 16px;
}

.recommend-options .ant-radio-wrapper {
  display: block;
  height: 32px;
  line-height: 32px;
}

.interests-section {
  margin-bottom: 24px;
}

.interests-section .ant-space {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.interests-section .ant-btn {
  margin: 4px;
}

.interests-section .ant-tag {
  margin: 4px;
  padding: 4px 8px;
}

.interests-section h5.ant-typography {
  margin-top: 24px;
  margin-bottom: 8px;
}
.ant-form-item-control-input-content {
    display: flex;
    justify-content: center;
}

/* 复制按钮样式 */
.email-copy-button {
    transition: all 0.3s ease;
}

.email-copy-button:hover {
    transform: scale(1.1);
}

.email-copy-button:active {
    transform: scale(0.95);
}

/* 复制按钮图标样式 - 使用独特的类名避免样式冲突 */
.email-copy-button .email-copy-icon {
    font-size: 12px !important;
}
.ant-input.ant-input-lg.ant-input-outlined{
    font-size: 16px;
    height: 36px;
    display: flex;
    align-items: center;
}
.ant-form-item-required{
    height: 36px !important;
    font-size: 16px !important;
}
.ant-input.ant-input-lg.ant-input-outlined.ant-input-compact-item.ant-input-compact-first-item{
    text-align: center;
    font-size: 16px;
    letter-spacing: 0px;
}
.ant-form-item.ant-form-item-vertical{
    margin-top: 8px !important;
}
.ant-typography {
    font-size: 16px;
}
@media (max-width: 768px) {
    .email-copy-button .email-copy-icon {
        font-size: 12px !important;
    }
}

/* 邮箱地址区域 */
.email-address-section {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 4px;
    margin-bottom: 16px;
    min-width: 0; /* 允许flex子元素收缩 */
}

.email-address-section .ant-typography {
    margin: 0;
}

/* 邮箱地址文本样式 */
.ant-typography code {
    margin: 0;
    padding-inline: 0;
    padding-block: 0;
    font-size: 90%;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    background: none;
    border: none;
    border-radius: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: inline-block;
}

/* 确保邮箱地址容器能够正确收缩 */
.email-address-section .ant-typography[style*="flex: 1"] {
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .email-address-section {
        gap: 2px;
        padding: 6px 8px;
    }
    
    .ant-typography code {
        font-size: 85%;
    }
}
.account-security-layout {
  padding: 8px;
  background: #f0f2f5;
}

.account-security-content {
  max-width: 100%;
  margin: 0;
}

.security-section {
  margin-bottom: 8px;
}

.security-section .ant-card-body {
  padding: 0;
}

.security-section .ant-list-item {
  padding: 16px;
  cursor: default;
}

.security-section .ant-list-item.clickable-item {
  cursor: pointer;
}

.security-section .ant-list-item.clickable-item:hover {
  background-color: rgba(0, 0, 0, 0.02);
}
.ant-input{
    height: 36px;
}
.ant-space-compact{
    width: 100%;
    gap: 16px;
}
.ant-btn.ant-btn-primary.ant-btn-color-primary.ant-btn-variant-solid.ant-btn-lg.ant-btn-compact-item.ant-btn-compact-last-item{
height: 36px;
}
.security-section .ant-list-item-meta-title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  line-height: 22px;
  margin: 0;
}

.security-section .ant-btn-link {
  padding: 0;
  height: auto;
  line-height: 1;
  color: rgba(0, 0, 0, 0.45);
}

.security-section .anticon-right {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}

/* 安全卡片通用样式 */
.security-setting-container {
  max-width: 100%;
  margin: 0;
  padding: 8px;
}

.security-card {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.security-card-header {
  margin-bottom: 8px;
}

.security-card-title {
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
}

.security-card-title-text {
  margin-bottom: 0 !important;
}

.security-card-subtitle {
  color: rgba(0, 0, 0, 0.45);
  margin-top: 4px;
  margin-bottom: 0;
}

.security-card-content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.back-button {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.65);
}

.back-button:hover {
  color: #1890ff;
}

/* 表单样式 */
.security-form {
  max-width: 400px;
}

.security-form-actions {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

/* 危险操作样式 */
.danger-item {
  color: #ff4d4f;
}

.danger-text {
  color: #ff4d4f;
}

/* 验证状态样式 */
.verification-status {
  display: flex;
  align-items: center;
}

.verification-status .status-icon {
  margin-right: 8px;
}

.verification-status .verified {
  color: #52c41a;
}

.verification-status .unverified {
  color: #faad14;
}

.verification-status .rejected {
  color: #ff4d4f;
}

/* 设备管理样式 */
.device-item {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.device-item:last-child {
  border-bottom: none;
}

.device-item .device-info {
  display: flex;
  align-items: center;
}

.device-item .device-icon {
  font-size: 24px;
  margin-right: 16px;
}

.device-item .device-meta {
  flex: 1 1;
}

.device-item .device-actions {
  margin-top: 8px;
}

/* 社交账号绑定样式 */
.social-binding-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.social-binding-item:last-child {
  border-bottom: none;
}

.social-binding-item .social-icon {
  font-size: 24px;
  margin-right: 16px;
}

.social-binding-item .social-info {
  flex: 1 1;
}

.social-binding-item .social-actions {
  margin-left: 16px;
}

/* 账号注销样式 */
.deletion-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-wrap: wrap;
}

.deletion-steps {
  width: 240px;
  flex-shrink: 0;
}

.deletion-content {
  flex: 1 1;
  min-height: 30px;
}

.deletion-impact .impact-list {
  margin: 16px 0;
  padding: 16px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.deletion-impact .impact-list ul {
  padding-left: 20px;
}

.deletion-impact .impact-list li {
  margin-bottom: 16px;
}

.deletion-form {
  max-width: 500px;
}

.step-actions {
  margin-top: 16px;
}

/* 注销状态显示样式 */
.deletion-status {
  width: 100%;
}

.deletion-status .status-details {
  margin: 16px 0;
  padding: 16px;
  background-color: #fafafa;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
}

.deletion-status .status-item {
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  line-height: 1.5;
}

.deletion-status .status-item:last-child {
  margin-bottom: 0;
}

.deletion-status .status-item .label {
  font-weight: 500;
  margin-right: 12px;
  min-width: 80px;
  color: rgba(0, 0, 0, 0.85);
  flex-shrink: 0;
}

.deletion-status .status-item .value {
  flex: 1 1;
  word-break: break-word;
}

/* 已有申请状态的容器 */
.existing-application {
  width: 100%;
  max-width: 600px;
}

.deletion-agreement {
  max-height: 300px;
  overflow-y: auto;
  padding: 0 8px;
}

.ant-list-item-meta-title{
  margin: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1;
  margin-bottom: 0px !important;
}
.ant-list-item-meta-description{
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
  line-height: 1;
}
.ant-list-item{
padding: 12px 0 !important;
}
.ant-list-item-meta{
  align-items: center;
  }
/* 响应式样式 - 大屏幕 */
@media (min-width: 1200px) {
  .security-setting-container {
    padding: 8px;
  }

  .security-card-content {
    padding: 0 16px;
  }
}

/* 响应式样式 - 中等屏幕 */
@media (min-width: 769px) and (max-width: 1199px) {
  .security-setting-container {
    padding: 16px;
  }

  .security-card-content {
    padding: 0 8px;
  }
}

/* 响应式样式 - 小屏幕/移动端 */
@media (max-width: 768px) {
  .account-security-layout {
    padding: 0;
    margin: 0px 0 0 0;
  }

  .account-security-content {
    padding: 0;
  }

  .security-setting-container {
    padding: 0;
  }

  .security-card {
    border-radius: 0;
    box-shadow: none;
    padding: 8px;
  }

  .security-card-header {
    margin-bottom: 8px;
    padding: 0 4px;
  }

  .security-card-title {
    margin-top: 4px;
  }

  .security-card-title-text {
    font-size: 18px !important;
  }

  .security-card-subtitle {
    font-size: 13px;
  }

  .security-card-content {
    padding: 0;
  }

  .security-form {
    width: 100%;
    max-width: 100%;
  }

  .security-form-actions {
    margin-top: 16px;
  }

  .device-item {
    padding: 12px 8px !important;
  }

  .device-item .ant-list-item-meta-avatar {
    margin-right: 8px !important;
  }

  .device-item .ant-list-item-meta-title {
    font-size: 14px !important;
  }

  .device-item .ant-list-item-meta-description {
    font-size: 12px !important;
  }

  .device-item .ant-list-item-action {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  .device-item .ant-list-item-action>li {
    padding: 0 4px !important;
    margin-right: 0 !important;
  }

  .page-header {
    padding: 8px 0 4px 12px;
    border-bottom: 0px solid #f0f0f0;
    background-color: #fff;
  }
  
.ant-list-item-meta{
  align-items: center !important;
  }
  
.ant-list-item-meta-description{
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px !important;
  line-height: 1;
}
}

@media (max-width: 480px) {
  .security-card-header {
    padding: 0;
  }

  .security-card-title-text {
    font-size: 16px !important;
  }

  .security-card-subtitle {
    font-size: 12px;
  }

  .device-item .ant-list-item-action {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-top: 8px !important;
  }

  .device-item .ant-list-item-action>li {
    margin-bottom: 6px !important;
  }

  .device-item .ant-list-item-action>li:last-child {
    margin-bottom: 0 !important;
  }
}

:where(.css-dev-only-do-not-override-1clthio).ant-card .ant-card-body {
  padding: 8px;
  border-radius: 0 !important;
}

.ant-list-item.danger-item {
  cursor: pointer;
  flex-direction: row;
}

:where(.css-dev-only-do-not-override-1clthio).ant-list .ant-list-item .ant-list-item-action {
  flex: 0 1 !important;
  -webkit-margin-start: 0px !important;
          margin-inline-start: 0px !important;
  padding: 0 !important;
  font-size: 10px !important;
  list-style: none;
  flex-direction: row !important;
}

.ant-list-item {
  flex-direction: row !important;
}

.ant-typography.css-dev-only-do-not-override-1clthio {
  padding: 0 8px;
  color: #666 !important;
  margin: 0px !important;
}

:where(.css-dev-only-do-not-override-1clthio).ant-list .ant-list-item .ant-list-item-meta .ant-list-item-meta-avatar {
  -webkit-margin-end: 2px;
          margin-inline-end: 2px;
}
@media (max-width: 768px) {
.ant-tag.ant-tag-success{
        height: 24px !important;
        display: flex;
        align-items: center;
    }
}
.payment-settings-layout {
  padding: 8px;
  background: #f0f2f5;
}

.payment-settings-content {
  max-width: 100%;
  margin: 0;
}

.payment-section {
  margin-bottom: 8px;
}

.payment-section .ant-card-body {
  padding: 0;
}

.payment-section .ant-list-item {
  padding: 16px;
  cursor: default;
}

.payment-section .ant-list-item-meta-title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  line-height: 22px;
  margin: 0;
}

.payment-section .ant-btn-link {
  padding: 0;
  height: auto;
  line-height: 1;
  color: rgba(0, 0, 0, 0.45);
}

.payment-section .anticon-right {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
} 
/* 内容验证通用样式 */

/* 抖动动画 */
@keyframes validation-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.validation-shake {
  animation: validation-shake 0.5s;
}

/* 验证错误状态 */
.validation-error .ant-input,
.validation-error .ant-input-textarea textarea,
.validation-error textarea {
  border-color: #ff4d4f !important;
  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2) !important;
}

.validation-error .ant-input:focus,
.validation-error .ant-input-textarea textarea:focus,
.validation-error textarea:focus {
  border-color: #ff4d4f !important;
  box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.3) !important;
}

/* 错误提示文字样式 */
.validation-error-message {
  color: #ff4d4f;
  font-size: 14px;
  line-height: 1.5715;
  margin-top: 4px;
  margin-bottom: 8px;
  padding: 4px 8px;
  background-color: #fff2f0;
  border: 1px solid #ffccc7;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.validation-error-message::before {
  content: '⚠️';
  margin-right: 4px;
}

/* 移动端日期选择器样式 */
.mobile-date-picker-modal {
  max-width: 90vw;
}

.mobile-date-picker-modal .ant-modal-header {
  border-bottom: 1px solid #F2F2F7;
  padding: 16px 20px;
}

.mobile-date-picker-modal .ant-modal-title {
  font-size: 17px;
  font-weight: 600;
  color: #000;
  text-align: center;
}

.mobile-date-picker-modal .ant-modal-close {
  top: 16px;
  right: 16px;
}

.mobile-date-picker-modal .ant-modal-body {
  padding: 16px 20px;
}

.mobile-date-picker-modal .ant-modal-footer {
  border-top: 1px solid #F2F2F7;
  padding: 16px 20px;
  text-align: center;
}

.mobile-date-picker-modal .ant-modal-footer .ant-btn {
  height: 32px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  min-width: 80px;
  margin: 0 8px;
}

.mobile-date-picker-modal .ant-modal-footer .ant-btn:first-child {
  background: #F2F2F7;
  border: none;
  color: #007AFF;
}

.mobile-date-picker-modal .ant-modal-footer .ant-btn-primary {
  background: #007AFF;
  border: none;
  color: white;
}

.mobile-date-picker-content {
  width: 100%;
}

.date-picker-selectors {
  width: 100%;
  padding: 0;
}

.date-selector-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 0;
}

.date-selector-item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.selector-label {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 16px;
  color: #8E8E93;
}

.native-select {
  width: 100%;
  height: 60px;
  border: none;
  border-radius: 8px;
  padding: 16px 12px;
  font-size: 28px;
  background: #F2F2F7;
  color: #000;
  font-weight: 600;
  text-align: center;
  outline: none;
  transition: all 0.2s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.native-select:focus {
  background: #E5E5EA;
}

.native-select option {
  padding: 12px;
  font-size: 20px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .mobile-date-picker-modal {
    max-width: 95vw;
  }

  .date-selector-row {
    gap: 8px;
  }

  .native-select {
    height: 36px;
    font-size: 14px;
    padding: 6px 8px;
  }

  .selector-label {
    font-size: 12px;
  }
}
/* 原生选择器样式 */
.native-select {
  width: 100%;
  height: 32px;
  padding: 0px 4px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  transition: all 0.3s;
  box-sizing: border-box;
  outline: none;
  cursor: pointer;
  appearance: menulist;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}

.native-select:hover:not(:disabled) {
  border-color: #40a9ff;
}

.native-select:focus {
  border-color: #40a9ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  outline: none;
}

.native-select:disabled {
  background-color: #f5f5f5;
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

/* 选项样式 */
.native-select option {
  padding: 2px 12px;
}

/* 占位符选项样式 */
.native-select option:first-child {
  color: #bfbfbf;
}
.native-school-selector {
    display: flex;
    flex-direction: row !important;
    gap: 12px;
}
.ant-row.ant-form-item-row{
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}
.ant-list-item-action{
    -webkit-margin-start: 0px !important;
            margin-inline-start: 0px !important;
}

.ant-list-item,
.ant-list-item-action,
.ant-btn,
.ant-upload,
.profile-avatar-wrapper,
.profile-avatar {
    cursor: pointer !important;
}

/* 确保列表项可点击 */
.ant-list-item {
    cursor: pointer !important;
}

.ant-list-item:hover {
    background-color: #f5f5f5;
}

/* 确保按钮可点击 */
.ant-btn.ant-btn-link {
    cursor: pointer !important;
}

/* 确保上传组件可点击 */
.ant-upload.ant-upload-select {
    cursor: pointer !important;
    height: 74px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}
.ant-form.ant-form-vertical{
    margin-top: 0px;
    gap: 16px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
#birthday{
    width: -webkit-min-content !important;
    width: min-content !important;
    text-align: left;
    font-size: 18px;
    font-weight: 500;
}
.ant-form-item-control-input{
    width: -webkit-min-content;
    width: min-content;
}
.ant-btn.ant-btn-default.ant-btn-color-default.ant-btn-variant-outlined.ant-btn-icon-only{
    padding: 0 8px;
    width: auto;
    border: none;
}
@media (max-width: 768px) {
    .profile-settings-page{
        margin: 0;
    }
    .ant-form.ant-form-vertical{
    margin-top: 0px;
    gap: 16px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.ant-form-item-control-input{
    width: -webkit-min-content;
    width: min-content;
}
}

.ant-spin-container{
    padding: 0;
    background-color: #fff;
}

.ant-card-body{
	padding: 8px 16px !important;
}

@media screen and (max-width: 768px) {
    .ant-list.ant-list-item.ant-list-item-action {
        -webkit-margin-start: 0;
                margin-inline-start: 0;
    }
	.ant-list-item-action{
        -webkit-margin-start: 0;
                margin-inline-start: 0;
    }
	.ant-btn.ant-btn-link{
	font-size: 14px;
    height: 32px;
    padding: 4px;
    border-radius: 6px;
	}
    .profile-list-item-meta-title-container{
        font-size: 14px;
    }
    
  #birthday{
    width: 100%;
    text-align: left;
    font-size: 18px;
    font-weight: 500;
}
}
/* ProfileSettings.css */

/* 设置容器样式 */
.settings-container {
  background-color: #fff;
  min-height: 20vh;
}

.ant-space.ant-space-horizontal.ant-space-align-center.ant-space-gap-row-small.ant-space-gap-col-small,
.ant-col.ant-form-item-control {
  display: flex;
  align-items: flex-start;
  flex: auto !important;
}

.settings-content {
  padding: 8px;
  background-color: #FFF;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ant-radio-button-label {
  display: flex;
  justify-content: center;
}

.ant-form-item-control-input {
  width: 100%;
}

/* 标题样式 */
.settings-title {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  font-weight: 600;
  background-color: #fff;
}

.ant-radio-group.ant-radio-group-outline {
  display: flex;
  justify-content: flex-start;
}

.settings-subtitle {
  margin-bottom: 24px !important;
  color: rgba(0, 0, 0, 0.45);
}

/* 列表项样式 */
.profile-settings-list {
  margin-bottom: 0px;
}

.profile-settings-item {
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
  display: flex !important;
  flex-direction: row;
  align-items: center;
}

/* 最后一个列表项移除底部边框 */
.profile-settings-item:last-child {
  border-bottom: none;
  /* 移除底部边框 */
  display: flex !important;
  flex-direction: row;
  align-items: center;
}

.profile-list-item-meta {
  flex: 0 0 120px;
}

.profile-list-item-meta-title-container {
  display: flex;
  align-items: center;
}

/* 值样式 */
.profile-settings-value {
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 16px;
}

.field-value-truncate {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clickable-value {
  cursor: pointer;
  transition: background-color 0.3s;
  border-radius: 4px;
  padding: 4px 0 4px 8px;
  display: flex;
  justify-content: flex-end;
}

.clickable-value:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

/* 头像样式 */
.profile-avatar-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border: 1px solid #e8e8e8;
}

.profile-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 模态框样式 */
.modal-form-item {
  margin-bottom: 24px;
}

.modal-form-item-last {
  margin-bottom: 0;
}

.modal-privacy-switch {
  display: flex;
  align-items: center;
  margin-top: 16px;
}

.modal-privacy-switch-text {
  margin-left: 8px;
}

.ant-radio-button-wrapper.ant-radio-button-wrapper-in-form-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile-settings-page ::where(.css-dev-only-do-not-override-1vygad6).ant-list .ant-list-item .ant-list-item-action {
  flex: 0 1 !important;
  -webkit-margin-start: 48px;
          margin-inline-start: 48px;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  flex-direction: row !important;
}

.profile-settings-page ::where(.css-dev-only-do-not-override-1vygad6).ant-list .ant-list-item .ant-list-item-meta .ant-list-item-meta-content {
  flex: 1 1;
  color: rgba(0, 0, 0, 0.88);
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-content: center !important;
}

.profile-settings-page ::where(.css-dev-only-do-not-override-1vygad6).ant-list .ant-list-item .ant-list-item-meta .ant-list-item-meta-title {
  margin: 0 !important;
  padding: 0px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  font-weight: 600;
}

/* 地区选择器样
式 */
.location-modal-container {
  position: relative;
  z-index: 1;
}

.location-form-item {
  margin-bottom: 24px;
}

.region-selector {
  position: relative;
  z-index: 1;
}

.location-cascader {
  width: 100%;
  position: relative;
  z-index: 1;
}

.location-cascader .ant-cascader-picker {
  width: 100%;
}

.location-cascader-dropdown {
  z-index: 2100 !important;
  position: absolute !important;
}

.location-cascader-dropdown .ant-cascader-menu {
  max-height: 200px;
  overflow-y: auto;
}

/* 确保模态框内的级联选择器下拉框正确显示 */
.ant-modal .location-cascader-dropdown {
  z-index: 2100 !important;
}

/* 修复级联选择器在模态框中的显示问题 */
.ant-cascader-dropdown {
  z-index: 2100 !important;
}

.ant-modal-wrap {
  z-index: 1200;
}

.ant-modal-mask {
  z-index: 1200;
}

.ant-modal {
  z-index: 1200;
}

/* 地区选
择器下拉框样式 */
.location-cascader-dropdown {
  z-index: 2100 !important;
  position: absolute !important;
}

.location-cascader-dropdown .ant-cascader-menu {
  max-height: 200px;
  overflow-y: auto;
}

/* 确保模态框内的级联选择器下拉框正确显示 */
.ant-modal .location-cascader-dropdown {
  z-index: 2100 !important;
}

/* 修复级联选择器在模态框中的显示问题 */
.ant-cascader-dropdown {
  z-index: 2100 !important;
}

.region-cascader-popup {
  z-index: 9999 !important;
}

.region-cascader-popup .ant-cascader-menu {
  max-height: 300px;
  overflow-y: auto;
}

/* 确保级联选择器的下拉框不被模态框遮挡 */
.ant-cascader-dropdown.region-cascader-popup {
  z-index: 9999 !important;
  position: fixed !important;
}

.ant-modal-wrap {
  z-index: 1200;
}

.ant-modal-mask {
  z-index: 1200;
}

.ant-modal {
  z-index: 1200;
}

.ant-radio-group.ant-radio-group-outline.css-dev-only-do-not-override-1clthio {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-start;
}

.ant-divider.ant-divider-horizontal.ant-divider-with-text.ant-divider-with-text-left {
  display: flex;
  align-items: center;
  margin: 16px 0 0 0;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  text-align: center;
  -webkit-border-before: 0 rgba(5, 5, 5, 0.06);
          border-block-start: 0 rgba(5, 5, 5, 0.06);
}

.ant-space.ant-space-horizontal.ant-space-align-center.ant-space-gap-row-small.ant-space-gap-col-small {
  display: flex;
  justify-content: flex-start !important;
}

.ant-row.ant-form-item-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.ant-col.ant-form-item-label {
  width: 88px;
  display: flex;
  flex-direction: row;
  padding-bottom: 0;
  justify-content: space-between;
  white-space: pre;
  text-align: justify;
}

.ant-radio-button-wrapper.ant-radio-button-wrapper-in-form-item {
  margin: 0;
  min-width: 20px !important;
  text-align: center;
  padding: 0px 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-start-start-radius: 0px;
  border-end-start-radius: 0px;
  width: -webkit-max-content;
  width: max-content;
}

.ant-radio-button-wrapper.ant-radio-button-wrapper-in-form-item:active {
  background: #cf1322 !important;
  background: var(--theme-error, #cf1322) !important;
  border-color: #cf1322 !important;
  border-color: var(--theme-error, #cf1322) !important;
}

.ant-radio-button-wrapper.ant-radio-button-wrapper-checked.ant-radio-button-wrapper-in-form-item:active {
  background: #cf1322 !important;
  background: var(--theme-error, #cf1322) !important;
  border-color: #cf1322 !important;
  border-color: var(--theme-error, #cf1322) !important;
}

.ant-form.ant-form-vertical {
  margin-top: 0px;
  gap: 16px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.ant-form-item-control-input {
  width: -webkit-min-content;
  width: min-content;
}

.ant-space.ant-space-horizontal.ant-space-align-center.ant-space-gap-row-small.ant-space-gap-col-small {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.ant-list-item-meta.profile-list-item-meta {
  flex: 1 1 !important;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .profile-list-item-meta {
    flex: 0 0 100px;
  }

  .ant-radio-button-label {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: -webkit-max-content;
    height: max-content;
  }

  .settings-content {
    padding: 0px;
  }

  .ant-list-item-meta-title {
    margin: 0;
    padding: 0;
    margin-bottom: 0px !important;
  }

  .ant-radio-button-wrapper.ant-radio-button-wrapper-in-form-item {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .ant-row.ant-form-item-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .ant-col.ant-form-item-label {
    width: 88px;
    display: flex;
    flex-direction: row;
    padding-bottom: 0;
    justify-content: space-between;
    white-space: pre;
    text-align: justify;
  }

  .ant-radio-button-wrapper.ant-radio-button-wrapper-in-form-item {
    margin: 0;
    min-width: 20px !important;
    text-align: center;
    padding: 0px 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-start-start-radius: 0px;
    border-end-start-radius: 0px;
    width: -webkit-max-content;
    width: max-content;
  }

  .ant-radio-button-wrapper.ant-radio-button-wrapper-in-form-item:active {
    background: #cf1322 !important;
    background: var(--theme-error, #cf1322) !important;
    border-color: #cf1322 !important;
    border-color: var(--theme-error, #cf1322) !important;
  }

  .ant-radio-button-wrapper.ant-radio-button-wrapper-checked.ant-radio-button-wrapper-in-form-item:active {
    background: #cf1322 !important;
    background: var(--theme-error, #cf1322) !important;
    border-color: #cf1322 !important;
    border-color: var(--theme-error, #cf1322) !important;
  }

  .ant-form.ant-form-vertical {
    margin-top: 0px;
    gap: 16px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .ant-form-item-control-input {
    width: -webkit-min-content;
    width: min-content;
  }

  .ant-space.ant-space-horizontal.ant-space-align-center.ant-space-gap-row-small.ant-space-gap-col-small {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

@media (max-width: 576px) {
  .profile-list-item-meta {
    flex: 0 0 80px;
  }

  .settings-content {
    padding: 0px;
  }

  .profile-avatar-wrapper {
    width: 64px;
    height: 64px;
  }

  .ant-radio-button-wrapper.ant-radio-button-wrapper-in-form-item {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .ant-row.ant-form-item-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .ant-col.ant-form-item-label {
    width: 88px;
    display: flex;
    flex-direction: row;
    padding-bottom: 0;
    justify-content: space-between;
    white-space: pre;
    text-align: justify;
    flex: auto !important;
  }

  .ant-radio-button-wrapper.ant-radio-button-wrapper-in-form-item {
    margin: 0;
    min-width: 20px !important;
    text-align: center;
    padding: 0px 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-start-start-radius: 0px;
    border-end-start-radius: 0px;
    width: -webkit-max-content;
    width: max-content;
  }

  .ant-radio-button-wrapper.ant-radio-button-wrapper-in-form-item:active {
    background: #cf1322 !important;
    background: var(--theme-error, #cf1322) !important;
    border-color: #cf1322 !important;
    border-color: var(--theme-error, #cf1322) !important;
  }

  .ant-radio-button-wrapper.ant-radio-button-wrapper-checked.ant-radio-button-wrapper-in-form-item:active {
    background: #cf1322 !important;
    background: var(--theme-error, #cf1322) !important;
    border-color: #cf1322 !important;
    border-color: var(--theme-error, #cf1322) !important;
  }

  .ant-form.ant-form-vertical {
    margin-top: 0px;
    gap: 16px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .ant-form-item-control-input {
    width: -webkit-min-content;
    width: min-content;
  }

  .ant-space.ant-space-horizontal.ant-space-align-center.ant-space-gap-row-small.ant-space-gap-col-small {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

.ant-form-item-control-input-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.general-settings-layout {
  min-height: 10vh;
  background-color: #f0f2f5;
}

.general-settings-content {
  padding: 8px;
  max-width: 100%;
  margin: 0;
}

.general-section {
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

@media screen and (max-width: 768px) {
  .general-settings-content {
    padding: 0px;
  }
  
  .general-section {
    margin-bottom: 16px;
  }
} 

@media (max-width: 768px) {
.ant-list-item {
  display: flex !important;
  flex-direction: row;
  padding: 16px 0 !important;
}

.ant-card-body {
padding: 8px 16px !important;
}
}
.ant-card-head-wrapper{
	padding:0 !important;
}
.content-preferences-container {
  padding: 8px;
  background-color: #f5f5f5;
  min-height: calc(100vh - 64px);
}

/* 提升卡片视觉与间距 */
.content-preferences-header {
  margin-bottom: 0px;
}
.content-preferences-header h2 {
  margin-bottom: 8px;
}

.preference-card {
  margin-bottom: 0px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.preferences-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.08s ease, background 0.2s ease;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  min-height: 28px;
  gap: 4px;
}

.preferences-item.selected {
  border-color: #1890ff !important;
  box-shadow: 0 6px 14px rgba(24, 144, 255, 0.18) !important;
  background: #e6f4ff !important; /* clearer blue tint */
}

.preferences-item.selected .item-avatar {
  background: #1890ff !important;
  color: #ffffff !important;
}

.preferences-item.selected .item-text {
  color: #1d39c4 !important;
  font-weight: 600 !important;
}

.preferences-item:hover {
  border-color: #1890ff;
  box-shadow: 0 6px 14px rgba(24, 144, 255, 0.12);
  background: #ffffff;
}

.preferences-item:focus-visible {
  outline: 2px solid #1890ff;
  outline-offset: 2px;
}

.preferences-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 4px;
  gap: 4px;
}

.item-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: #262626;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-avatar {
  width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e6f7ff;
  color: #1890ff;
  font-weight: 600;
  flex: 0 0 auto;
}

.item-avatar-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.item-delete {
  -webkit-appearance: none;
          appearance: none;
  background: #fff;
  color: #8c8c8c;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 26px;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  margin-left: 8px;
}

.item-delete:hover {
  color: #ff4d4f;
  border-color: #ffccc7;
  background: #fff1f0;
}

/* 药丸形状按钮样式 */
.category-pill-button {
  width: 100%;
  border-radius: 20px;
  font-size: 14px;
  height: 36px;
  padding: 0 16px;
  transition: all 0.3s;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-pill-button.ant-btn-default {
  border-color: #d9d9d9;
  color: rgba(0, 0, 0, 0.65);
}

.category-pill-button.ant-btn-default:hover {
  color: #1890ff;
  border-color: #1890ff;
  background-color: #e6f7ff;
}

.category-pill-button.ant-btn-primary {
  background-color: #1890ff;
  border-color: #1890ff;
  color: #fff;
}

.category-pill-button span + span {
  margin-left: 4px;
}

.preference-setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
}

.setting-label {
  display: flex;
  flex-direction: column;
  max-width: 80%;
}

.diversity-slider {
  width: 300px;
  margin-top: 8px;
  padding: 0 4px;
}

.preference-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 0px;
}

.content-preferences-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
  gap: 16px;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .preferences-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .item-content{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
	  gap: 0;
    padding: 0;
}
}

@media (max-width: 992px) {
  .preferences-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .item-content{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
	  gap: 0;
    padding: 0;
}
}

@media (max-width: 768px) {
  .content-preferences-container {
    padding: 8px;
  }
  .category-block { padding: 4px 0; }

  .preference-setting-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
  }
  .setting-label {
    max-width: 100%;
    margin-bottom: 8px;
  }
  
  .diversity-slider {
    width: 100%;
  }
  
  .scrollable-item {
    width: 33.33%;
  }
  .item-content{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
	  gap: 0;
    padding: 0;
}
}

@media (max-width: 576px) {
  /* 在手机端启用水平滚动 */
  .scrollable-categories {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* 为iOS提供平滑滚动 */
    padding-bottom: 10px; /* 为滚动条预留空间 */
  }
  
  .scrollable-row {
    flex-wrap: nowrap;
    width: auto;
    padding-bottom: 5px; /* 为滚动条预留空间 */
  }
  
  .scrollable-item {
    width: auto;
    flex: 0 0 auto;
    min-width: 120px;
  }
  
  /* 添加滚动指示器 */
  .scrollable-categories::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 10px;
    width: 30px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.8));
    pointer-events: none;
  }
  
  /* 显示滑动提示 */
  .mobile-scroll-tip {
    display: block;
    height: 0%;
  }
  .item-content{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
	  gap: 0;
    padding: 0;
}
}

@media (max-width: 480px) {
  .scrollable-item {
    min-width: 110px;
  }
  .item-content{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
	  gap: 0;
    padding: 0;
}
}
.ant-divider.ant-divider-horizontal,
.ant-typography{
  margin-bottom: 0px !important;
  margin: 0px 0;
  }
.item-content{
    display: flex;
    flex-direction: row !important;
    justify-content: flex-start !important;
	  gap: 0 !important;
    padding: 0 !important;
}
.privacy-settings-container {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.privacy-settings-title {
  margin-bottom: 24px;
  color: #262626;
}

.privacy-settings-list {
  margin-top: 16px;
}

.settings-section {
  margin-bottom: 32px;
}

.settings-section h4 {
  margin-bottom: 16px;
  color: #262626;
  font-weight: 500;
}

.privacy-setting-item {
  padding: 16px;
  border-radius: 4px;
  background: #fafafa;
  margin-bottom: 8px;
}

.setting-content {
  width: 100%;
}

.setting-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.setting-label {
  font-size: 16px;
  font-weight: 500;
  color: #262626;
}

.setting-description {
  color: #595959;
  font-size: 14px;
  margin-bottom: 16px;
}

.privacy-radio-group {
  width: 100%;
}

.privacy-radio-group .ant-radio-wrapper {
  margin-right: 24px;
}

.privacy-radio-group .ant-space {
  gap: 4px !important;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  width: 100%;
}

.loading-content {
  text-align: center;
  padding: 50px;
}

.loading-placeholder {
  background: #fafafa;
  padding: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 200px;
  min-height: 100px;
}

.error-container {
  padding: 24px;
  text-align: center;
}

.error-message {
  color: #ff4d4f;
}

@media (max-width: 768px) {
  .privacy-settings-container {
    padding: 16px;
  }

  .privacy-radio-group .ant-radio-wrapper {
    margin-right: 16px;
    margin-bottom: 8px;
  }

  .privacy-radio-group .ant-space {
    flex-wrap: wrap;
  }
}

.privacy-settings-list .ant-list-item {
  padding: 16px 0;
}

.privacy-settings-list .ant-list-item-meta-title {
  margin-bottom: 8px;
  color: #262626;
}

.privacy-settings-list .ant-list-item-meta-description {
  color: #595959;
}

.privacy-settings-list .ant-radio-group {
  margin-top: 12px;
}

.privacy-settings-list .ant-radio-button-wrapper {
  min-width: 100px;
  text-align: center;
}

.privacy-settings-icon {
  font-size: 20px;
  margin-right: 12px;
  color: #1890ff;
}

.settings-section {
  background: #fff;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 4px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
}

.settings-section h3 {
  margin-bottom: 16px;
  color: #333;
  font-weight: 500;
  font-size: 16px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 12px 8px;
}

.setting-item span {
  color: #333;
  font-size: 14px;
  flex: 1 1;
  margin-right: 0px;
}

.ant-radio-group {
  display: flex;
  gap: 8px;
}

.ant-radio-button-wrapper {
  min-width: 60px;
  text-align: center;
  padding: 0 12px;
  height: 32px;
  line-height: 30px;
  font-size: 13px;
}

.ant-list-item {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start !important;
  align-items: center;
  padding: 8px 0 !important;
  background-color: #fff;
}

.privacy-section {
  margin-bottom: 20px;
}

.privacy-section .ant-card-body {
  padding: 16px;
}

.privacy-section .ant-list-item {
  cursor: pointer;
  transition: background-color 0.3s;
}

.privacy-section .ant-list-item:hover {
  background-color: #f5f5f5;
}

.privacy-section .ant-list-item-extra {
  color: #999;
}

.privacy-detail-container {
  max-width: 100%;
  margin: 0;
  padding: 8px;
}

.privacy-detail-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: none;
}

.privacy-detail-header {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.back-button {
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  gap: 8px;
}

.back-button:hover {
  color: #1890ff;
}

.privacy-setting-detail {
  max-width: 100%;
  margin: 0px;
}

.privacy-setting-detail .header {
  margin-bottom: 24px;
  cursor: pointer;
  color: #1890ff;
}

.privacy-setting-detail .ant-radio-group {
  margin-top: 16px;
  display: flex;
  gap: 16px;
}

@media screen and (max-width: 768px) {
  .privacy-settings-container {
    padding: 8px;
  }

  .privacy-settings-container h2 {
    font-size: 18px;
    padding: 0 8px;
  }

  .settings-section {
    padding: 4px;
    margin-bottom: 4px;
  }

  .settings-section h3 {
    font-size: 15px;
    padding: 0 8px;
  }

  .setting-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .setting-item span {
    margin-bottom: 0px;
  }

  .ant-radio-group {
    width: 100%;
    justify-content: space-between;
  }

  .ant-radio-button-wrapper {
    flex: 1 1;
    min-width: auto;
    padding: 0 8px;
    font-size: 12px;
  }
}

@media (prefers-color-scheme: dark) {
  .settings-section {
    background: #1f1f1f;
  }

  .privacy-settings-container h2,
  .settings-section h3,
  .setting-item span {
    color: #fff;
  }

  .ant-list-item:not(:last-child) {
    border-bottom-color: #303030;
  }

  .ant-radio-button-wrapper {
    background: #141414;
    border-color: #434343;
    color: #fff;
  }

  .ant-radio-button-wrapper-checked {
    background: #177ddc;
    border-color: #177ddc;
    color: #fff;
  }
}

.setting-item {
  transition: all 0.3s ease;
}

.setting-item:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

@media screen and (max-width: 480px) {
  .ant-radio-group {
    flex-wrap: wrap;
  }

  .ant-radio-button-wrapper {
    margin-bottom: 0px;
  }

  .setting-item {
    padding: 0px 0px;
  }
}

/* PrivacySettingDetail styles */
.privacy-setting-detail-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
}

.back-button {
  margin-bottom: 16px;
  padding: 0;
}

.setting-detail-card {
  border-radius: 8px;
  box-shadow: none;
}

.setting-detail-card .ant-card-body {
  padding: 24px;
}

.setting-description {
  color: #666;
  margin: 16px 0;
}

.visibility-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.visibility-options .ant-radio-wrapper {
  font-size: 16px;
  padding: 12px;
  border-radius: 6px;
  transition: all 0.3s;
}

.visibility-options .ant-radio-wrapper:hover {
  background-color: #f5f5f5;
}

/* Responsive styles */
@media (max-width: 576px) {
  .privacy-setting-detail-container {
    padding: 16px;
  }

  .setting-detail-card .ant-card-body {
    padding: 16px;
  }
}

.user-info-tag {
  border-radius: 40px !important;
  padding: 2px 8px !important;
}

@media screen and (max-width: 576px) {
  :where(.css-dev-only-do-not-override-1m63z2v).ant-list-vertical .ant-list-item .ant-list-item-extra {
    margin: 0px;
  }
}

@media screen and (max-width: 768px) {
  :where(.css-dev-only-do-not-override-1m63z2v).ant-list-vertical .ant-list-item .ant-list-item-extra {
    -webkit-margin-start: 0px;
            margin-inline-start: 0px;
  }
}

:where(.css-dev-only-do-not-override-1m63z2v).ant-list-vertical .ant-list-item .ant-list-item-extra {
  -webkit-margin-start: 0px;
          margin-inline-start: 0px;
}

/* 移动端适配样式 */
.mobile-privacy-actions {
  margin-top: 12px !important;
  width: 100% !important;
  display: flex;
  justify-content: flex-end;
}

.privacy-card {
  width: 100%;
  margin: 0 auto;
}

.privacy-title {
  margin-bottom: 8px !important;
  margin: 0;
  padding: 0;
}

.privacy-description {
  margin: 0;
  padding: 0;
  display: block;
}

/* 增强Tabs在移动端的显示效果 */
.mobile-tabs .ant-tabs-nav {
  margin-bottom: 16px;
  width: 100%;
}

.mobile-tabs .ant-tabs-tab {
  padding: 8px 12px;
  margin: 0 4px;
}

.mobile-tabs .ant-tabs-content-holder {
  border-left: none;
}

.privacy-list-item {
  padding: 16px 0;
}

@media screen and (max-width: 768px) {
  .privacy-settings-container {
    padding: 8px;
  }

  .privacy-card .ant-card-body {
    padding: 16px 12px;
  }

  .mobile-tabs .ant-tabs-nav {
    margin-bottom: 8px;
  }

  .mobile-tabs .ant-tabs-tab {
    padding: 6px 8px;
    margin: 0 2px;
  }

  .privacy-list-item {
    padding: 12px 0;
  }

  .mobile-privacy-actions {
    margin-top: 8px;
  }

  .privacy-radio-group {
    display: flex;
    width: 100%;
  }

  .privacy-radio-group .ant-radio-button-wrapper {
    flex: 1 1;
    text-align: center;
    padding: 0 8px;
  }
}

@media screen and (max-width: 480px) {
  .privacy-card .ant-card-body {
    padding: 12px 8px;
  }

  .privacy-list-item .ant-list-item-meta-title {
    font-size: 14px;
  }

  .privacy-list-item .ant-list-item-meta-description {
    font-size: 12px;
  }

  .mobile-tabs .ant-tabs-tab {
    padding: 4px 6px;
    margin: 0 1px;
  }

  .privacy-radio-group .ant-radio-button-wrapper {
    font-size: 12px;
    height: 28px;
    line-height: 26px;
  }
}

/* 修复暗色模式下的样式 */
@media (prefers-color-scheme: dark) {
  .privacy-card {
    background: #1f1f1f;
  }

  .privacy-list-item {
    border-bottom-color: #303030;
  }

  .privacy-list-item .ant-list-item-meta-title {
    color: #e0e0e0;
  }

  .privacy-list-item .ant-list-item-meta-description {
    color: #a0a0a0;
  }
}

/* 移动端优化 - 解决文字挤在一列的问题 */
.mobile-privacy-list-item {
  margin-bottom: 16px;
  padding: 16px 12px !important;
  background-color: #fafafa;
  border-radius: 8px;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
}

.mobile-privacy-list-item .ant-list-item-meta {
  margin-bottom: 0 !important;
  width: 80% !important;
  flex: 0 0 60% !important;
  margin-right: 0px;
}

.mobile-privacy-list-item .item-title {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 0px;
  width: 100%;
  white-space: normal;
  word-wrap: break-word;
  display: block;
}

.mobile-privacy-list-item .item-description {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  word-break: break-word;
  word-wrap: break-word;
  white-space: normal;
  width: 100%;
  display: block;
  max-width: 100%;
}

.mobile-privacy-actions {
  width: 30% !important;
  flex: 0 0 30% !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
}

/* 为所有列表项添加换行样式 */
.privacy-list-item .ant-list-item-meta-title,
.privacy-list-item .ant-list-item-meta-description {
  white-space: normal !important;
  word-wrap: break-word !important;
  width: 100% !important;
}

.ant-list-item-meta-content {
  width: 100% !important;
  max-width: 100% !important;
}

/* 修改移动端下的列表样式 */
@media screen and (max-width: 768px) {
  .privacy-settings-container {
    padding: 8px;
  }

  .privacy-card .ant-card-body {
    padding: 16px 12px;
  }

  .mobile-tabs .ant-tabs-nav {
    margin-bottom: 16px;
  }

  .mobile-tabs .ant-tabs-tab {
    padding: 6px 8px;
    margin: 0 2px;
  }

  .mobile-privacy-list-item {
    margin-bottom: 8px;
  }

  .mobile-privacy-actions {
    margin-top: 8px;
  }

  .privacy-radio-group {
    display: flex;
    width: 100%;
  }

  .privacy-radio-group .ant-radio-button-wrapper {
    flex: 1 1;
    text-align: center;
    padding: 0 8px;
  }

  /* 增加间距和背景,提高可读性 */
  .privacy-list-item {
    margin-bottom: 8px;
  }

  .ant-list-item-meta-content {
    width: 100%;
  }

  /* 强制所有列表项的文本换行 */
  .ant-list-item-meta-title,
  .ant-list-item-meta-description {
    white-space: normal !important;
    word-break: break-word !important;
    width: 100% !important;
  }
}

@media (prefers-color-scheme: dark) {
  .mobile-privacy-list-item {
    background-color: #1e1e1e;
  }

  .mobile-privacy-list-item .item-title {
    color: #e0e0e0;
  }

  .mobile-privacy-list-item .item-description {
    color: #a0a0a0;
  }

  .mobile-privacy-actions {
    border-top-color: #333;
  }
}

/* 全局列表样式覆盖，确保文字正确换行 */
.privacy-setting-list .ant-list-item-meta {
  width: 84% !important;
  flex: 0.50 1 auto !important;
}

.privacy-setting-list .ant-list-item-meta-content {
  width: 100% !important;
  max-width: 100% !important;
}

.privacy-setting-list .ant-list-item-meta-title {
  white-space: normal !important;
  word-break: normal !important;
  width: 100% !important;
  margin-bottom: 8px !important;
  color: rgba(0, 0, 0, 0.85) !important;
}

.privacy-setting-list .ant-list-item-meta-description {
  white-space: normal !important;
  word-break: break-word !important;
  width: 100% !important;
  color: rgba(0, 0, 0, 0.65) !important;
}

/* 特别为移动视图设置 */
.privacy-setting-list .mobile-privacy-list-item {
  padding: 12px !important;
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
}

/* 移动端钱包信息选项卡优化 - 确保开关按钮正确显示 */
.mobile-privacy-actions .ant-switch {
  flex-shrink: 0;
  min-width: 44px;
}

.mobile-privacy-actions .ant-radio-group {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.mobile-privacy-actions .ant-radio-button-wrapper {
  font-size: 11px;
  padding: 0 6px;
  height: 28px;
  line-height: 26px;
}

/* 确保所有列表项都有一致的外边距和内边距 */
@media screen and (max-width: 768px) {
  .privacy-setting-list .ant-list-item {
    margin-bottom: 1px !important;
    padding: 16px 12px !important;
    background-color: #FFF !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    border-bottom: none !important;
  }

  /* 特别处理最后一个列表项，确保与其他项目样式一致 */
  .privacy-setting-list .ant-list-item:last-child {
    margin-bottom: 0px !important;
    padding: 16px 12px !important;
    background-color: #fff !important;
    border-radius: 8px !important;
  }

  /* 统一所有单选按钮组的样式 */
  .privacy-setting-list .mobile-privacy-actions .ant-radio-group {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 1px !important;
  }

  .privacy-setting-list .mobile-privacy-actions .ant-radio-button-wrapper {
    flex: 0 0 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    text-align: center !important;
    padding: 0 2px !important;
    font-size: 10px !important;
    height: 28px !important;
    line-height: 26px !important;
    border-radius: 3px !important;
    overflow: hidden !important;
  }

  /* 确保按钮文字居中并适应小尺寸 */
  .privacy-setting-list .mobile-privacy-actions .ant-radio-button-wrapper span {
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 10px !important;
  }

  /* 暗色模式下的一致性 */
  @media (prefers-color-scheme: dark) {

    .privacy-setting-list .ant-list-item,
    .privacy-setting-list .ant-list-item:last-child {
      background-color: #1e1e1e !important;
    }
  }
}

.ant-divider.css-dev-only-do-not-override-1clthio.ant-divider-horizontal {
  padding: 0;
  margin: 8px 0;
}

.ant-list-item.ant-list-item-no-flex.privacy-list-item.mobile-privacy-list-item {
  flex-wrap: nowrap;
}

#rc-tabs-1-tab-social>span {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

/* 修复所有标签页中图标和文字分行的问题 */
.ant-tabs-tab-btn > span {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-direction: row !important;
}

/* 确保图标和文字在同一行 */
.ant-tabs-tab-btn > span > .anticon {
  flex-shrink: 0;
}

/* 移动端优化 */
@media screen and (max-width: 768px) {
  .ant-tabs-tab-btn > span {
    gap: 4px !important;
  }
}
/* 黑名单页面 - 优雅现代设计 */

/* 容器样式 - 隔离全局样式影响 */
.elegant-blacklist-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  background: #fafafa;
  min-height: calc(100vh - 64px);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 重置所有可能的全局样式干扰 */
.elegant-blacklist-container *,
.elegant-blacklist-container *::before,
.elegant-blacklist-container *::after {
  box-sizing: border-box;
}

/* 重置 Ant Design 组件可能受到的干扰 */
.elegant-blacklist-container .ant-space {
  display: inline-flex !important;
  gap: 0px !important;
}

.elegant-blacklist-container .ant-space-vertical {
  display: flex !important;
  flex-direction: column !important;
}

.elegant-blacklist-container .ant-space-horizontal {
  display: inline-flex !important;
  flex-direction: row !important;
}

/* 重置 ant-space-item 的干扰样式 */
.elegant-blacklist-container .ant-space-item {
  width: auto !important;
  margin: 0 !important;
  height: auto !important;
  display: inline-block !important;
  flex: none !important;
}

.elegant-blacklist-container .ant-space.ant-space-vertical > .ant-space-item {
  display: block !important;
  width: 100% !important;
}

.elegant-blacklist-container .ant-space.ant-space-horizontal > .ant-space-item {
  display: inline-block !important;
  width: auto !important;
}

.elegant-blacklist-container .ant-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: none;
}

/* 加载状态 */
.elegant-blacklist-container .loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background: #fff;
  border-radius: 12px;
  margin-top: 24px;
}

/* 头部区域 */
.elegant-blacklist-container .blacklist-header-section {
  background: linear-gradient(135deg, #ff6b9d 0%, #ff1744 100%);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  color: white;
  box-shadow: 0 8px 24px rgba(255, 107, 157, 0.3);
}

.elegant-blacklist-container .header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.elegant-blacklist-container .title-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.elegant-blacklist-container .header-icon {
  font-size: 48px;
  color: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.elegant-blacklist-container .page-title {
  color: white !important;
  margin: 0 !important;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
}

.elegant-blacklist-container .page-subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 15px;
  margin-top: 8px;
  line-height: 1.5;
}

.elegant-blacklist-container .stats-section {
  text-align: center;
}

.elegant-blacklist-container .stat-item {
  background: rgba(255, 255, 255, 0.15);
  padding: 16px 28px;
  border-radius: 12px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.elegant-blacklist-container .stat-item .ant-typography {
  color: white !important;
  font-size: 16px;
  font-weight: 500;
}

.elegant-blacklist-container .stats-section .ant-badge-count {
  background: #fff;
  color: #ff1744;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 搜索卡片 */
.elegant-blacklist-container .search-card {
  margin-bottom: 24px;
  background: white;
}

.elegant-blacklist-container .search-card .ant-card-body {
  padding: 20px 24px;
}

.elegant-blacklist-container .elegant-search .ant-input-affix-wrapper {
  border-radius: 10px;
  border: 2px solid #f0f0f0;
  padding: 8px 16px;
  transition: all 0.3s ease;
      display: flex;
    align-items: center;
}

.elegant-blacklist-container .elegant-search .ant-input-affix-wrapper:hover,
.elegant-blacklist-container .elegant-search .ant-input-affix-wrapper:focus,
.elegant-blacklist-container .elegant-search .ant-input-affix-wrapper-focused {
  border-color: #ff6b9d;
  box-shadow: 0 0 0 2px rgba(255, 107, 157, 0.1);
}

.elegant-blacklist-container .elegant-search .ant-input {
  font-size: 15px;
}

/* 错误提示 */
.elegant-blacklist-container .error-alert {
  margin-bottom: 24px;
  border-radius: 12px;
}

/* 内容卡片 */
.elegant-blacklist-container .content-card {
  background: white;
}

.elegant-blacklist-container .content-card .ant-card-body {
  padding: 16px;
}

/* 列表项 */
.elegant-blacklist-container .elegant-blacklist {
  padding: 0;
}

.elegant-blacklist-container .elegant-blacklist .ant-list-item {
  border: none;
  padding: 0;
  margin-bottom: 12px;
}

.elegant-blacklist-container .elegant-blacklist-item {
  background: white;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.elegant-blacklist-container .elegant-blacklist-item:hover {
  border-color: #ff6b9d;
  box-shadow: 0 4px 16px rgba(255, 107, 157, 0.15);
  transform: translateY(-2px);
}

.elegant-blacklist-container .item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  gap: 20px;
}

.elegant-blacklist-container .user-info {
  align-items: center;
  gap: 16px;
  flex: 1 1;
  min-width: 0;
  max-width: 80%;
  display: flex;
  flex-direction: row;
}

.elegant-blacklist-container .avatar-link {
  flex-shrink: 0;
  display: block;
  transition: transform 0.2s ease;
}

.elegant-blacklist-container .avatar-link:hover {
  transform: scale(1.08);
}

.elegant-blacklist-container .user-avatar {
  border: 2px solid #f0f0f0;
  transition: border-color 0.2s ease;
}

.elegant-blacklist-container .avatar-link:hover .user-avatar {
  border-color: #ff6b9d;
}

.elegant-blacklist-container .user-details {
  flex: 1 1;
  min-width: 0;
}

.elegant-blacklist-container .user-name-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0px;
  flex-wrap: wrap;
}

.elegant-blacklist-container .user-name-link {
  text-decoration: none;
  transition: color 0.2s ease;
}

.elegant-blacklist-container .display-name {
  font-size: 17px;
  font-weight: 600;
  color: #262626;
  margin: 0;
  transition: color 0.2s ease;
}

.elegant-blacklist-container .user-name-link:hover .display-name {
  color: #ff6b9d;
}

.elegant-blacklist-container .user-name-section .ant-tag {
  margin: 0;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  border: none;
  padding: 2px 8px;
}

.elegant-blacklist-container .user-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.elegant-blacklist-container .user-meta .ant-space {
  width: 100% !important;
}

.elegant-blacklist-container .user-meta .ant-space-item {
  width: 100% !important;
  display: block !important;
}

.elegant-blacklist-container .user-id,
.elegant-blacklist-container .blacklist-reason,
.elegant-blacklist-container .blacklist-date {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #8c8c8c !important;
  line-height: 1.5;
  width: 100%;
  gap: 4px;
}

.elegant-blacklist-container .user-id .anticon,
.elegant-blacklist-container .blacklist-reason .anticon,
.elegant-blacklist-container .blacklist-date .anticon {
  color: #bfbfbf;
  font-size: 12px;
}

.elegant-blacklist-container .item-actions {
  flex: 0 0 auto;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  max-width: 20%;
  align-items: center;
}

.elegant-blacklist-container .unblock-button {
  border-radius: 8px;
  font-weight: 600;
  height: 40px;
  padding: 0 16px;
  font-size: 13px;
  transition: all 0.2s ease;
  border: none;
  background: #ff4d4f;
  color: white;
  white-space: nowrap;
  flex-shrink: 0;
}

.elegant-blacklist-container .unblock-button:hover {
  background: #ff7875 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3) !important;
}

.elegant-blacklist-container .unblock-button .anticon {
  font-size: 14px;
}

/* 空状态 */
.elegant-blacklist-container .empty-state {
  padding: 80px 24px;
  text-align: center;
}

.elegant-blacklist-container .empty-state .ant-empty-description {
  color: #8c8c8c;
  font-size: 15px;
  margin-top: 16px;
}

.elegant-blacklist-container .empty-state .ant-btn-link {
  color: #ff6b9d;
  font-weight: 500;
  margin-top: 8px;
}

.elegant-blacklist-container .empty-state .ant-btn-link:hover {
  color: #ff1744;
}
.ant-row.ant-row-middle {
    margin-left: 0;
    margin-right: 0;
    row-gap: 0px;
    display: flex;
    align-content: flex-end;
    align-items: center;
}
/* 动画效果 */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.elegant-blacklist-container .elegant-blacklist-item {
  animation: slideInUp 0.3s ease-out;
}

/* 平板响应式 */
@media (max-width: 992px) {
  .elegant-blacklist-container {
    padding: 20px;
  }

  .elegant-blacklist-container .blacklist-header-section {
    padding: 28px 24px;
  }

  .elegant-blacklist-container .page-title {
    font-size: 24px;
  }

  .elegant-blacklist-container .header-icon {
    font-size: 40px;
  }
  .ant-space-item{
    height: 16px;
}

.ant-row.ant-row-middle {
    margin-left: 0;
    margin-right: 0;
    row-gap: 0px;
    display: flex;
    align-content: flex-end;
    align-items: center !important;
}
}

/* 手机端响应式 */
@media (max-width: 768px) {
  .elegant-blacklist-container {
    padding: 16px;
    background: #fff;
  }

  .elegant-blacklist-container .blacklist-header-section {
    padding: 24px 20px;
    margin-bottom: 16px;
    border-radius: 12px;
  }

  .elegant-blacklist-container .header-content {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .elegant-blacklist-container .title-section {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .elegant-blacklist-container .header-icon {
    font-size: 36px;
  }

  .elegant-blacklist-container .page-title {
    font-size: 22px;
  }

  .elegant-blacklist-container .page-subtitle {
    font-size: 14px;
  }

  .elegant-blacklist-container .search-card {
    margin-bottom: 16px;
  }

  .elegant-blacklist-container .search-card .ant-card-body {
    padding: 16px;
  }

  .elegant-blacklist-container .content-card .ant-card-body {
    padding: 12px;
  }

  .elegant-blacklist-container .item-content {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    gap: 16px;
  }

  .elegant-blacklist-container .user-info {
    width: 100%;
    max-width: 100%;
    flex: 1 1;
            display: flex;
        flex-direction: row;
  }

  .elegant-blacklist-container .user-details {
    flex: 1 1;
    width: 100%;
  }

  .elegant-blacklist-container .item-actions {
    max-width: 100%;
    justify-content: stretch;
  }

  .elegant-blacklist-container .unblock-button {
    width: 100%;
    justify-content: center;
    padding: 0 20px;
  }

  .elegant-blacklist-container .empty-state {
    padding: 60px 16px;
  }
  .ant-space-item{
    height: 16px;
}

.ant-row.ant-row-middle {
    margin-left: 0;
    margin-right: 0;
    row-gap: 0px;
    display: flex;
    align-content: flex-end;
    align-items: center !important;
}
}

/* 小屏手机响应式 */
@media (max-width: 480px) {
  .elegant-blacklist-container {
    padding: 12px;
  }

  .elegant-blacklist-container .blacklist-header-section {
    padding: 20px 16px;
    border-radius: 10px;
  }

  .elegant-blacklist-container .page-title {
    font-size: 20px;
  }

  .elegant-blacklist-container .header-icon {
    font-size: 32px;
  }

  .elegant-blacklist-container .page-subtitle {
    font-size: 13px;
  }

  .elegant-blacklist-container .stat-item {
    padding: 12px 20px;
  }

  .elegant-blacklist-container .search-card .ant-card-body {
    padding: 12px;
  }

  .elegant-blacklist-container .elegant-search .ant-input {
    font-size: 14px;
  }

  .elegant-blacklist-container .content-card .ant-card-body {
    padding: 8px;
  }

  .elegant-blacklist-container .elegant-blacklist .ant-list-item {
    margin-bottom: 8px;
  }

  .elegant-blacklist-container .item-content {
    padding: 12px;
    justify-content: space-between !important;
        width: 100%;
  }

  .elegant-blacklist-container .user-avatar {
    width: 44px !important;
    height: 44px !important;
  }

  .elegant-blacklist-container .display-name {
    font-size: 15px;
  }

  .elegant-blacklist-container .user-id,
  .elegant-blacklist-container .blacklist-reason,
  .elegant-blacklist-container .blacklist-date {
    font-size: 12px;
  }

  .elegant-blacklist-container .unblock-button {
    height: 36px;
    font-size: 13px;
    padding: 0 16px;
  }

  .elegant-blacklist-container .empty-state {
    padding: 40px 12px;
  }
  .ant-space-item{
    height: 16px;
}

.ant-row.ant-row-middle {
    margin-left: 0;
    margin-right: 0;
    row-gap: 0px;
    display: flex;
    align-content: flex-end;
    align-items: center !important;
}
}

/* 确保面包屑导航不受影响 */
.elegant-blacklist-container .ant-breadcrumb {
  margin-bottom: 16px;
  font-size: 14px;
}

.elegant-blacklist-container .ant-breadcrumb-link {
  color: #595959;
  transition: color 0.2s ease;
}

.elegant-blacklist-container .ant-breadcrumb-link:hover {
  color: #ff6b9d;
}

/* Popconfirm 样式优化 */
.ant-popover.ant-popconfirm {
  z-index: 1050;
}

.ant-popconfirm .ant-popconfirm-title {
  font-weight: 600;
  color: #262626;
  font-size: 15px;
}

.ant-popconfirm .ant-popconfirm-description {
  color: #8c8c8c;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
}

.ant-popconfirm .ant-popconfirm-buttons {
  margin-top: 16px;
}

.ant-popconfirm .ant-btn-primary {
  background: #ff4d4f;
  border-color: #ff4d4f;
}

.ant-popconfirm .ant-btn-primary:hover {
  background: #ff7875;
  border-color: #ff7875;
}

/* 加载按钮状态 */
.elegant-blacklist-container .unblock-button.ant-btn-loading {
  opacity: 0.7;
  cursor: not-allowed;
}

/* 搜索框清除按钮 */
.elegant-blacklist-container .ant-input-clear-icon {
  color: #bfbfbf;
  font-size: 12px;
  transition: color 0.2s ease;
}

.elegant-blacklist-container .ant-input-clear-icon:hover {
  color: #8c8c8c;
}
/* 社交账号绑定通用样式 */
.social-binding-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 24px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 绑定信息样式 */
.binding-info {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.binding-header {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
  width: 100%;
}

.binding-status {
  margin-left: 24px;
  flex: 1 1;
}

.binding-status h3 {
  color: #52c41a;
  font-weight: 500;
  padding: 0;
  margin: 0;
}

.binding-status p {
  margin-bottom: 0px;
  color: rgba(0, 0, 0, 0.65);
  padding: 0;
  margin: 0;
}

/* 二维码样式 */
.binding-qrcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.binding-qrcode h3 {
  margin-bottom: 24px;
  font-weight: 500;
}

.qrcode-container {
  margin-bottom: 0px;
  padding: 16px;
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 0px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 12px;
  /* 200px + 32px padding */
}

.qrcode-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.binding-qrcode p {
  color: rgba(0, 0, 0, 0.45);
}

/* 绑定操作样式 */
.binding-actions {
  text-align: center;
  padding: 16px 0;
}

.binding-actions h3 {
  margin-bottom: 8px;
  font-weight: 500;
}

.binding-actions p {
  margin-bottom: 24px;
  color: rgba(0, 0, 0, 0.65);
}

/* 响应式样式 */
@media (max-width: 768px) {
  .social-binding-container {
    padding: 16px;
  }

  .binding-header {
    flex-direction: column;
    text-align: center;
  }

  .binding-status {
    margin-left: 0;
    margin-top: 16px;
  }
}

@media (max-width: 480px) {
  .social-binding-container {
    padding: 12px;
  }

  .qrcode-container {
    padding: 12px;
  }

  .qrcode-container img {
    width: 160px !important;
    height: 160px !important;
  }
}
/* 官方认证页面专用样式 - 重置版本 */

/* 页面容器 */
.official-verification-page {
  width: 100%;
  min-height: 100vh;
  background-color: #f0f2f5;
  padding: 0;
  margin: 0;
}

.official-verification-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* 表单容器 */
.official-verification-form {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: none;
}

/* 认证类型说明 */
.verification-type-description {
  margin-bottom: 24px;
}

.verification-type-description .ant-alert {
  border-radius: 6px;
}

/* 强制覆盖所有可能的干扰样式 */
.official-verification-page * {
  box-sizing: border-box;
  column-gap: 0px;
  row-gap: 0px;
}

/* 表单项基础样式 */
.official-verification-page .ant-form-item {
  margin-bottom: 16px !important;
}

.official-verification-page .ant-form-item-label {
  padding-bottom: 8px !important;
  text-align: left !important;
}

.official-verification-page .ant-form-item-label>label {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
}

.official-verification-page .ant-form-item-label>label.ant-form-item-required::before {
  color: #ff4d4f;
  margin-right: 4px;
}

.official-verification-page .ant-form-item-control {
  width: 100%;
}

/* 输入框样式 */
.official-verification-page .ant-input,
.official-verification-page .ant-input-affix-wrapper {
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  min-height: 40px;
  width: 100%;
}

.official-verification-page .ant-input:focus,
.official-verification-page .ant-input-affix-wrapper:focus,
.official-verification-page .ant-input-affix-wrapper-focused {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

/* 文本域样式 */
.official-verification-page textarea.ant-input {
  resize: vertical;
  min-height: 100px;
}

/* 单选按钮组样式 */
.official-verification-page .ant-radio-group {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.official-verification-page .ant-radio-wrapper {
  margin-right: 0;
  padding: 2px 4px;
  border: none;
  border-radius: 6px;
  background-color: #fafafa;
  transition: all 0.3s;
  flex: 1 1;
  min-width: 40px;
  text-align: center;
}

.official-verification-page .ant-radio-wrapper:hover {
  border-color: #1890ff;
  background-color: #f0f8ff;
}

.official-verification-page .ant-radio-wrapper-checked {
  border-color: #1890ff;
  background-color: #e6f7ff;
}

/* 上传组件样式 */
.official-verification-page .ant-upload {
  width: 100%;
}

.official-verification-page .ant-upload .ant-btn {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 表单操作按钮样式 */
.official-verification-page .security-form-actions {
  margin-top: 0px;
  text-align: center;
}

.official-verification-page .security-form-actions .ant-btn {
  min-width: 120px;
  height: 40px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}

/* 认证状态显示样式 */
.verification-status-container {
  text-align: center;
  padding: 40px 20px;
}

.verification-status-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.verification-status-info h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
}

.verification-status-info p {
  margin: 4px 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  line-height: 1.5;
}

/* 认证流程样式 */
.verification-process {
  background-color: #fafafa;
  padding: 20px;
  border-radius: 8px;
  margin: 24px 0;
}

.verification-process h4 {
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
}

.verification-process .ant-steps {
  margin-top: 16px;
}

/* 注意事项样式 */
.verification-notice {
  background-color: #f6f8fa;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #1890ff;
}

.verification-notice h4 {
  margin-bottom: 12px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
}

.verification-notice ul {
  margin: 0;
  padding-left: 20px;
}

.verification-notice li {
  margin-bottom: 8px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.5;
}

.verification-notice li:last-child {
  margin-bottom: 0;
}

/* 信用代码验证状态样式 */
.official-verification-form .ant-form-item-has-success .ant-input,
.official-verification-form .ant-form-item-has-success .ant-input-affix-wrapper {
  border-color: #52c41a;
}

.official-verification-form .ant-form-item-has-error .ant-input,
.official-verification-form .ant-form-item-has-error .ant-input-affix-wrapper {
  border-color: #ff4d4f;
}

.ant-row.ant-form-item-row {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.ant-col.ant-form-item-label {
  min-width: -webkit-max-content;
  min-width: max-content;
}

/* 响应式样式 - 平板 */
@media (max-width: 768px) {
  .official-verification-container {
    padding: 0 12px;
  }

  .official-verification-form {
    padding: 20px;
  }

  .official-verification-page .ant-radio-group {
    flex-direction: row;
    gap: 8px;
  }

  .official-verification-page .ant-radio-wrapper {
    text-align: left;
    flex: none;
    max-width: -webkit-max-content;
    max-width: max-content;
  }
}

/* 响应式样式 - 手机 */
@media (max-width: 480px) {
  .official-verification-container {
    padding: 0px;
  }

  .official-verification-form {
    padding: 16px;
  }

  .official-verification-page .ant-form-item {
    margin-bottom: 20px;
  }

  .official-verification-page .security-form-actions .ant-btn {
    width: 100%;
    height: 44px;
  }
}

/* 其他组件样式 */
.verification-container {
  width: 100%;
  padding: 0;
}

.verification-content {
  width: 100%;
  margin-bottom: 24px;
}

/* 认证流程样式 */
.verification-process {
  background-color: #fafafa;
  padding: 20px;
  border-radius: 8px;
  margin: 24px 0;
}

.verification-process h4 {
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
}

/* 注意事项样式 */
.verification-notice {
  background-color: #f6f8fa;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #1890ff;
}

.verification-notice h4 {
  margin-bottom: 12px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
}

.verification-notice ul {
  margin: 0;
  padding-left: 20px;
}

.verification-notice li {
  margin-bottom: 8px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.5;
}

/* 认证状态显示样式 */
.verification-status-container {
  text-align: center;
  padding: 16px;
}

.verification-status-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.verification-status-info h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
}

.verification-status-info p {
  margin: 4px 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  line-height: 1.5;
}
/* 设备管理页面样式 */
.device-management-container {
  padding: 24px;
  background: #f0f2f5;
  min-height: calc(100vh - 64px);
}
.ant-row.ant-row-middle{
    margin-left: 0;
    margin-right: 0;
    row-gap: 8px;
    display: flex;
    align-content: flex-end;
    align-items: flex-end;
}
/* 筛选卡片 */
.filter-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 16px;
}

.filter-card .ant-card-body {
  padding: 16px;
}

/* 表格样式优化 */
.ant-table {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.ant-table-thead > tr > th {
  background: #fafafa;
  font-weight: 600;
  color: #262626;
}

.ant-table-tbody > tr:hover > td {
  background: #f5f5f5;
}

.ant-table-cell {
  padding: 12px 16px;
}

/* 设备列表项 */
.device-item {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.device-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.device-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.device-type {
  color: #1890ff;
}

.device-tag {
  margin-left: 8px;
}
.security-card-content {
        padding: 0;
    }

.device-description {
  color: #8c8c8c;
  font-size: 14px;
}

.device-info-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.device-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #595959;
  font-size: 14px;
}

.info-icon {
  color: #1890ff;
  font-size: 16px;
}

.device-action-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.current-device-tag {
  font-size: 14px;
  padding: 4px 12px;
}

/* 移动端设备卡片 */
.device-cards-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.device-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.device-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.device-card-header {
  margin-bottom: 12px;
}

.device-card-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.device-icon {
  font-size: 32px;
  color: #1890ff;
  flex-shrink: 0;
}

.device-info {
  flex: 1 1;
}

.device-name {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.device-meta {
  font-size: 13px;
  color: #8c8c8c;
}

.device-card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

.device-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #595959;
}

.detail-icon {
  color: #1890ff;
  font-size: 14px;
  flex-shrink: 0;
}

.detail-text {
  flex: 1 1;
  word-break: break-all;
}

.device-card-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

/* 帮助文本 */
.device-help-text {
  margin-top: 24px;
  padding: 16px;
  background: #f5f5f5;
  border-radius: 8px;
  border-left: 4px solid #1890ff;
}

.device-help-text h4 {
  margin-bottom: 12px;
  color: #262626;
  font-size: 15px;
  font-weight: 600;
}

.device-help-text ul {
  margin-bottom: 0;
  padding-left: 20px;
}

.device-help-text li {
  margin-bottom: 8px;
  color: #595959;
  font-size: 14px;
  line-height: 1.6;
}

.device-help-text li:last-child {
  margin-bottom: 0;
}

/* 错误消息 */
.error-message {
  padding: 24px;
  text-align: center;
  color: #ff4d4f;
  font-size: 14px;
  background: #fff2f0;
  border-radius: 8px;
  border: 1px solid #ffccc7;
}

@media (min-width: 1200px) {
    .security-card-content {
        padding: 0;
    }
}
/* 响应式设计 */
@media (max-width: 768px) {
  .device-management-container {
    padding: 16px;
  }
  .security-card-content {
        padding: 0;
    }
  .device-item {
    padding: 12px;
  }
  
  .device-info-group {
    gap: 6px;
  }
  
  .device-info-item {
    font-size: 13px;
  }
  
  .device-title {
    font-size: 15px;
  }
  
  .device-help-text {
    padding: 12px;
  }
  
  .device-help-text h4 {
    font-size: 14px;
  }
  
  .device-help-text li {
    font-size: 13px;
  }
  
  .filter-card .ant-row {
    gap: 12px;
  }
}

/* 分页样式优化 */
.ant-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 576px) {
  .ant-pagination {
    font-size: 12px;
  }
  
  .ant-pagination-item,
  .ant-pagination-prev,
  .ant-pagination-next {
    min-width: 28px;
    height: 28px;
    line-height: 26px;
  }
}

/* 日期选择器样式 */
.ant-picker {
  width: 100%;
}

/* 空状态样式 */
.ant-empty {
  padding: 48px 24px;
}

.ant-empty-description {
  color: #8c8c8c;
  font-size: 14px;
}

/* 骨架屏样式 */
.ant-skeleton {
  padding: 24px;
}

/* 标签样式 */
.ant-tag {
  border-radius: 4px;
  font-size: 12px;
}

/* 按钮组样式 */
.ant-space {
  flex-wrap: wrap;
}

/* 卡片标题样式 */
.ant-card-head-title {
  font-size: 16px;
  font-weight: 600;
}

/* 列表样式优化 */
.ant-list-item {
  border: none !important;
}

.ant-list-item-meta-avatar {
  margin-right: 16px;
}

/* Popconfirm样式 */
.ant-popover-message-title {
  padding-left: 0;
}

/* 响应式表格 */
@media (max-width: 992px) {
  .device-info-group {
    flex-direction: column;
  }
  
  .device-action-group {
    margin-top: 12px;
  }
}

/* 加载动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.device-item,
.device-card {
  animation: fadeIn 0.3s ease;
}

/* 悬停效果 */
.device-info-item:hover {
  color: #1890ff;
  cursor: default;
}

/* 图标动画 */
.info-icon,
.detail-icon {
  transition: transform 0.3s ease;
}

.device-info-item:hover .info-icon,
.device-detail:hover .detail-icon {
  transform: scale(1.1);
}

/* 账号恢复页面样式 */
.recovery-container {
  max-width: 100%;
  overflow: visible;
}

/* 修复安全问题下拉列表定位问题 */
.security-question-select {
  position: relative;
  overflow: visible;
}

.security-question-select.ant-form-item {
  position: relative;
  overflow: visible !important;
}

.security-question-select .ant-form-item-control {
  overflow: visible !important;
}

.security-question-select .ant-form-item-control-input {
  overflow: visible !important;
}

.security-question-select .ant-form-item-control-input-content {
  overflow: visible !important;
}

/* 确保所有相关容器都不裁剪下拉列表 */
.security-questions-form {
  overflow: visible !important;
}

.question-card {
  overflow: visible !important;
}

.question-card .ant-card-body {
  overflow: visible !important;
}

.question-card .ant-card-head {
  overflow: visible !important;
}

/* 确保整个安全问题容器都支持下拉列表显示 */
.security-questions-container {
  overflow: visible !important;
}

/* 确保标签页容器不会限制下拉列表 */
.ant-tabs {
  overflow: visible !important;
}

.ant-tabs-content {
  overflow: visible !important;
}

.ant-tabs-tabpane {
  overflow: visible !important;
}

/* 确保整个恢复容器不会限制下拉列表 */
.recovery-container {
  overflow: visible !important;
}

/* 确保下拉列表在document.body中时有最高的z-index */
body .ant-select-dropdown {
  z-index: 999999 !important;
  position: fixed !important;
}

/* 特别针对安全问题下拉列表的样式 */
.ant-select-dropdown {
  z-index: 999999 !important;
  position: fixed !important;
}

/* 确保下拉列表选项可见 */
.ant-select-dropdown .ant-select-item {
  z-index: 999999 !important;
}

/* 确保下拉列表容器可见 */
.ant-select-dropdown .ant-select-item-group {
  z-index: 999999 !important;
}

/* 强制覆盖所有可能的z-index冲突 */
body>.ant-select-dropdown {
  z-index: 999999 !important;
  position: fixed !important;
}

/* 确保下拉列表内容完全可见 */
.ant-select-dropdown .ant-select-item-option {
  z-index: 999999 !important;
}

.ant-select-dropdown .ant-select-item-option-content {
  z-index: 999999 !important;
}

/* 覆盖任何可能的样式冲突 */
div[class*="ant-select-dropdown"] {
  z-index: 999999 !important;
  position: fixed !important;
}

/* 专门针对新的popupClassName的样式 */
.security-question-dropdown-popup {
  z-index: 999999 !important;
  position: fixed !important;
}

.security-question-dropdown-popup.ant-select-dropdown {
  z-index: 999999 !important;
  position: fixed !important;
}

/* 确保在body中的下拉列表有最高优先级 */
body .security-question-dropdown-popup {
  z-index: 999999 !important;
  position: fixed !important;
}

body .security-question-dropdown-popup.ant-select-dropdown {
  z-index: 999999 !important;
  position: fixed !important;
}

/* 恢复状态卡片 */
.recovery-status-card {
  margin-bottom: 24px;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
}

.recovery-status {
  padding: 8px 0;
}

.recovery-status-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.recovery-status-items {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}

.recovery-status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #595959;
}

.recovery-status-item span:first-child {
  font-weight: 500;
}

/* 安全问题容器 */
.security-questions-container {
  padding: 0;
}

.security-questions-header {
  margin-bottom: 24px;
  padding: 20px;
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  background: linear-gradient(135deg, var(--primary-color, #1890ff) 0%, var(--primary-color-active, #096dd9) 100%);
  border-radius: 12px;
  color: white;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  font-size: 32px;
  color: rgba(255, 255, 255, 0.9);
}

.header-text h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: white;
}

.header-text p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

/* 安全问题表单 */
.security-questions-form {
  margin-top: 0;
}

.question-card {
  margin-bottom: 20px;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
}

.question-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.question-card-title .anticon {
  color: #1677ff;
}

/* 表单操作按钮 */
.security-form-actions {
  margin-top: 0px;
  text-align: center;
}

.save-questions-btn {
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  background: linear-gradient(135deg, #1677ff 0%, #69c0ff 100%);
  border: none;
}

/* 安全提示 */
.security-tips {
  margin-top: 24px;
}

.security-tips .ant-alert {
  border-radius: 12px;
  border: 1px solid #e6f7ff;
  background: #f6ffed;
}

.security-tips ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.security-tips li {
  margin-bottom: 4px;
  color: #595959;
  line-height: 1.6;
}

/* 恢复描述 */
.recovery-description {
  margin-top: 16px;
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;
  border-left: 4px solid #1677ff;
}

.recovery-description p {
  margin: 0;
  color: #595959;
  font-size: 14px;
  line-height: 1.6;
}

.recovery-description p:not(:last-child) {
  margin-bottom: 8px;
}

/* 标签页样式优化 */
.ant-tabs-tab {
  font-weight: 500;
  font-size: 16px;
}

.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #1677ff;
  font-weight: 600;
}

/* 表单项样式优化 */
.ant-form-item-label>label {
  font-weight: 500;
  color: #262626;
}

.ant-input,
.ant-select-selector {
  border-radius: 8px;
  border: 1px solid #d9d9d9;
}

.ant-input:focus,
.ant-select-focused .ant-select-selector {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
}

/* 开关样式 */
.ant-switch {
  background: #bfbfbf;
}

.ant-switch-checked {
  background: #1677ff;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .recovery-container {
    padding: 0 8px;
  }

  .security-questions-header {
    padding: 16px;
    margin-bottom: 20px;
  }

  .header-content {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .header-icon {
    font-size: 28px;
  }

  .header-text h3 {
    font-size: 18px;
  }

  .header-text p {
    font-size: 13px;
  }

  .question-card {
    margin-bottom: 16px;
  }

  .question-card .ant-card-head {
    padding: 12px 16px;
  }

  .question-card .ant-card-body {
    padding: 16px;
  }

  .question-card-title {
    font-size: 14px;
  }

  .recovery-status-items {
    flex-direction: column;
    gap: 12px;
  }

  .recovery-status-item {
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .recovery-status-item:last-child {
    border-bottom: none;
  }

  .security-form-actions {
    margin-top: 24px;
  }

  .save-questions-btn {
    height: 44px;
    font-size: 15px;
  }

  .recovery-description {
    padding: 12px;
    margin-top: 12px;
  }

  .recovery-description p {
    font-size: 13px;
  }

  .security-tips {
    margin-top: 20px;
  }

  .security-tips li {
    font-size: 13px;
  }

  /* 标签页在移动端的优化 */
  .ant-tabs-tab {
    font-size: 14px;
    padding: 8px 12px;
  }

  .ant-tabs-content-holder {
    padding-top: 16px;
  }
}

@media (max-width: 480px) {
  .recovery-container {
    padding: 0 4px;
  }

  .security-questions-header {
    padding: 12px;
    margin-bottom: 16px;
  }

  .header-text h3 {
    font-size: 16px;
  }

  .header-text p {
    font-size: 12px;
  }

  .question-card .ant-card-head {
    padding: 10px 12px;
  }

  .question-card .ant-card-body {
    padding: 12px;
  }

  .question-card-title {
    font-size: 13px;
  }

  .save-questions-btn {
    height: 42px;
    font-size: 14px;
  }

  .recovery-description {
    padding: 10px;
  }

  .recovery-description p {
    font-size: 12px;
  }

  .security-tips li {
    font-size: 12px;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .recovery-status-card {
    background: #1f1f1f;
    border-color: #303030;
  }

  .question-card {
    background: #1f1f1f;
    border-color: #303030;
  }

  .recovery-description {
    background: #262626;
    color: #d9d9d9;
  }

  .recovery-description p {
    color: #d9d9d9;
  }

  .security-tips .ant-alert {
    background: #162312;
    border-color: #274916;
  }
}

/* 移除所有动画效果 */

/* 无障碍优化 */
.question-card:focus-within {
  outline: 2px solid #1677ff;
  outline-offset: 2px;
}

.save-questions-btn:focus {
  outline: 2px solid #1677ff;
  outline-offset: 2px;
}

/* 打印样式 */
@media print {
  .security-questions-header {
    background: #f5f5f5 !important;
    color: #000 !important;
  }

  .header-text h3,
  .header-text p {
    color: #000 !important;
  }

  .question-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }

  .save-questions-btn {
    display: none !important;
  }
}

.ant-card.ant-card-bordered.ant-card-small.question-card.css-dev-only-do-not-override-1clthio {
  border-bottom: 1px solid #e8e8e8 !important;
}

/* 确保账号恢复页面的下拉列表可见 */
.account-recovery-container .ant-select-dropdown {
  z-index: 999999 !important;
  position: fixed !important;
  background-color: white !important;
  border: 1px solid #d9d9d9 !important;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08) !important;
  border-radius: 6px !important;
}

/* 确保下拉列表选项完全可见 */
body .ant-select-dropdown .ant-select-item,
.ant-select-dropdown .ant-select-item {
  z-index: 999999 !important;
  background-color: white !important;
  padding: 5px 12px !important;
  cursor: pointer !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

/* 确保下拉列表选项悬停效果 */
body .ant-select-dropdown .ant-select-item:hover,
.ant-select-dropdown .ant-select-item:hover {
  background-color: #f5f5f5 !important;
}

/* 确保下拉列表选项选中效果 */
body .ant-select-dropdown .ant-select-item-option-selected,
.ant-select-dropdown .ant-select-item-option-selected {
  background-color: #e6f7ff !important;
  color: #1890ff !important;
}

/* 强制覆盖任何可能的遮挡 - 终极修复 */
body>div[class*="ant-select-dropdown"] {
  z-index: 999999 !important;
  position: fixed !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  background-color: white !important;
  border: 1px solid #d9d9d9 !important;
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08) !important;
  border-radius: 6px !important;
}
.ant-alert.ant-alert-info.ant-alert-with-description{
    align-items: flex-start;
    padding: 16px;
}
.top-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
  height: 4px;
}

.full-screen-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.full-screen-loader .ant-spin {
  font-size: 24px;
}

.full-screen-loader .ant-spin-dot {
  font-size: 24px;
  width: 1em;
  height: 1em;
}

.full-screen-loader .ant-spin-dot-item {
  width: 9px;
  height: 9px;
} 
.optimized-loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  padding: 20px;
}

.optimized-loading-container .ant-spin {
  max-height: none;
}

.error-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 20px;
  text-align: center;
  color: #666;
}

.error-fallback h3 {
  margin-bottom: 10px;
  color: #ff4d4f;
}

.error-fallback button {
  margin-top: 15px;
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.error-fallback button:hover {
  background: #40a9ff;
}
/**
 * 自定义App包装器样式
 * 替代Ant Design的App组件样式
 */

.custom-app-wrapper {
  min-height: 10vh;
  background-color: #f5f5f5;
  margin: 0;
  transition: margin 0.2s ease-in-out;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .page-with-top-margin .custom-app-wrapper {
    margin: 24px 0 0 0;
  }
  
  /* 确保首页和推荐页面不受影响 */
  .home-page .custom-app-wrapper,
  .recommendation-page .custom-app-wrapper {
    margin: 0 !important;
  }
}

/*# sourceMappingURL=main.47cc90f4.css.map*/