/* ============================================================
   圈子 PC 端 · 统一 UI 设计系统
   大厂风格 · 大气 · 克制配色 · 全站共用
   ============================================================ */

/* ---------- 1. 设计变量 ---------- */
:root {
  /* 主色 */
  --color-primary: #165dff;
  --color-primary-hover: #0e42d2;
  --color-primary-active: #0e3ab0;
  --color-primary-light: #e8f0ff;
  --color-primary-light-2: #f2f6ff;

  /* 语义色（克制使用） */
  --color-success: #00b42a;
  --color-success-light: #e8ffea;
  --color-warning: #ff7d00;
  --color-warning-light: #fff3e8;
  --color-danger: #f53f3f;
  --color-danger-light: #ffece8;
  --color-info: #165dff;

  /* 文字 */
  --color-text-1: #1d2129;
  --color-text-2: #4e5969;
  --color-text-3: #86909c;
  --color-text-4: #c9cdd4;

  /* 背景 / 填充 */
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-fill-1: #f7f8fa;
  --color-fill-2: #f2f3f5;

  /* 描边 */
  --color-border: #e5e6eb;
  --color-border-light: #f2f3f5;
  --color-border-dark: #c9cdd4;

  /* 圆角 */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* 阴影 */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 6px 20px rgba(0, 0, 0, 0.08);
  --shadow-4: 0 12px 32px rgba(0, 0, 0, 0.12);

  /* 尺寸 */
  --header-height: 60px;
  --container-width: 1240px;
  --sidebar-width: 220px;
  --rail-width: 300px;
    /* 主色调 */
    --primary-color: #165dff;
    --primary-light: #699bff;

    /* 文字色系 */
    --text-primary: #1d2129;
    --text-secondary: #4e5969;
    --text-muted: #86909c;

    /* 背景色系 */
    --color-bg: #f7f8fa;

    /* 边框 */
    --border-color: #e5e6eb;
  /* 过渡 */
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* 字体 */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
}

/* ---------- 2. 基础重置 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-1);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-width: 1200px;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-primary);
}

ul,
ol {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--color-text-1);
}

::selection {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: #d8dce3;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: #c0c4cc;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- 3. 排版工具 ---------- */
.text-12 { font-size: 12px; }
.text-13 { font-size: 13px; }
.text-14 { font-size: 14px; }
.text-16 { font-size: 16px; }
.text-18 { font-size: 18px; }
.text-20 { font-size: 20px; }
.text-24 { font-size: 24px; }
.text-28 { font-size: 28px; }
.text-32 { font-size: 32px; }

.text-1 { color: var(--color-text-1); }
.text-2 { color: var(--color-text-2); }
.text-3 { color: var(--color-text-3); }
.text-4 { color: var(--color-text-4); }
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.text-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-mx {
    background: linear-gradient(135deg, #e8f0ff, #f2f6ff);
    border-color: transparent;
    padding: 20px;
    border-radius: var(--radius-md);
}
/* ---------- 4. 布局工具 ---------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-1 { flex: 1; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }

.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }

.hidden { display: none !important; }

/* 主区域栅格：左主 + 右栏 */
.layout-main {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.layout-main > .layout-content { flex: 1; min-width: 0; }
.layout-main > .layout-rail {width: var(--rail-width);flex-shrink: 0;position: sticky;top: calc(var(--header-height) + 16px);}

/* 用户中心栅格：左导航 + 右内容 */
.layout-user {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 0 60px;
}
.layout-user > .user-sidebar { width: var(--sidebar-width); flex-shrink: 0; position: sticky; top: 80px; }
.layout-user > .user-content { flex: 1; min-width: 0; }

/* ============================================================
   5. 顶部导航 Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-1);
}
.site-header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
  justify-content: space-between;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-1);
  flex-shrink: 0;
}
.site-logo .logo{
 height: 30px;
}
.site-logo .logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, #165dff, #4080ff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(22, 93, 255, 0.3);
}
.site-logo:hover { color: var(--color-text-1); }

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
}
.main-nav a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  font-size: 15px;
  color: var(--color-text-2);
  font-weight: 500;
}
.main-nav a:hover { color: var(--color-text-1); background: var(--color-fill-1); }
.main-nav a.active { color: var(--color-primary); font-weight: 600; }
.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 3px;
  background: var(--color-primary);
  border-radius: 3px 3px 0 0;
}

.header-search {
  flex: 1;
  max-width: 360px;
  position: relative;
}
.header-search .select{
    height: 34px;
    padding: 0 8px;
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 10;
    width:72px;
    border: 1px solid transparent;
    border-radius: 100px 0 0 100px;
    outline: none;
    background: transparent;
    cursor: pointer;
}
/* 取消select选中高亮 */
.header-search .select:focus{
    box-shadow: none;
    border:1px solid transparent;
}
 
.header-search input {
  width: 100%;
  height: 38px;
  padding: 0px 38px 0 80px;
  background: var(--color-fill-1);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: var(--transition);
  box-sizing: border-box;
  outline: none;
}
.header-search input:focus {
  background: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.header-search .search-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-3);
}
.header-search .search-btn:hover { color: var(--color-primary); background: var(--color-primary-light); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.header-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-2);
  position: relative;
  transition: var(--transition);
}
.header-icon-btn:hover { background: var(--color-fill-1); color: var(--color-text-1); }
.header-icon-btn .dot {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--color-danger);
  color: #fff;
  font-size: 11px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

/* 用户菜单 */
.user-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: var(--transition);
}
.user-menu:hover { background: var(--color-fill-1); }
.user-menu .avatar { width: 30px; height: 30px; }

/* 下拉面板 */
.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: var(--transition);
  z-index: 200;
}
.dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdowns-menu a,
.dropdowns-menu .dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text-2);
  font-size: 14px;
  transition: var(--transition);
}
.dropdowns-menu a:hover,
.dropdowns-menu .dd-item:hover { background: var(--color-fill-1); color: var(--color-text-1); }
.dropdowns-menu .divider { height: 1px; background: var(--color-border-light); margin: 6px 0; }
.dropdowns-menu .header-user-card { padding: 10px 12px 12px; border-bottom: 1px solid var(--color-border-light); margin-bottom: 6px; }

/* ============================================================
   6. 按钮
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--color-fill-2);
  color: var(--color-text-1);
  white-space: nowrap;
  transition: var(--transition);
  user-select: none;
}
 

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-hover);color: #fff; }

.btn-secondary {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.btn-secondary:hover { background: var(--color-primary-light-2); }

.btn-outline {
  background: #fff;
  border-color: var(--color-border);
  color: var(--color-text-1);
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light-2); }

.btn-text {
  background: transparent;
  color: var(--color-primary);
  padding: 0 8px;
}
.btn-text:hover { background: var(--color-primary-light); }

.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: #d93636; }

.btn-success { background: var(--color-success); color: #fff; }
.btn-success:hover { background: #009a26; }

.btn-ghost { background: transparent; color: var(--color-text-2); }
.btn-ghost:hover { background: var(--color-fill-1); color: var(--color-text-1); }

.btn-lg { height: 44px; padding: 0 24px; font-size: 15px; border-radius: var(--radius-sm); }
.btn-sm { height: 30px; padding: 0 12px; font-size: 13px; }
.btn-xs { height: 24px; padding: 0 8px; font-size: 12px; }

.btn-block { width: 100%; }
.btn-pill { border-radius: var(--radius-pill); }
.btn-icon { width: 36px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }
.btn-icon.btn-lg { width: 44px; }

/* ============================================================
   7. 头像
   ============================================================ */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-fill-2);
  color: var(--color-text-3);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  font-weight: 600;
  object-fit: cover;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-xs { width: 24px; height: 24px; font-size: 11px; }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-md { width: 40px; height: 40px; font-size: 14px; }
.avatar-lg { width: 56px; height: 56px; font-size: 18px; }
.avatar-xl { width: 80px; height: 80px; font-size: 26px; }
.avatar-2xl { width: 112px; height: 112px; font-size: 36px; }

.avatar-group { display: inline-flex; }
.avatar-group .avatar { margin-left: -8px; border: 2px solid #fff; }
.avatar-group .avatar:first-child { margin-left: 0; }
.avatar-count {
  margin-left: -8px;
  min-width: 24px;
  height: 24px;
  padding: 5px;
  border-radius: 50%;
  background: var(--color-fill-2);
  border: 2px solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--color-text-3);
}

/* ============================================================
   8. 标签 / 徽章
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 8px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  background: var(--color-fill-2);
  color: var(--color-text-2);
  white-space: nowrap;
  border-radius: 4px;
}
.tag-primary { background: var(--color-primary-light); color: var(--color-primary); }
.tag-success { background: var(--color-success-light); color: var(--color-success); }
.tag-warning { background: var(--color-warning-light); color: var(--color-warning); }
.tag-danger { background: var(--color-danger-light); color: var(--color-danger); }
.tag-solid-primary { background: var(--color-primary); color: #fff; }
.tag-lg { height: 28px; padding: 0 10px; font-size: 13px; }
.tag-pill { border-radius: var(--radius-pill); }

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 600;
  background: var(--color-danger);
  color: #fff;
  border-radius: 9px;
}

/* VIP 等级标 */
.vip-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  background: linear-gradient(135deg, #ff9a3c, #ff7d00);
  color: #fff;
  border-radius: 4px;
}
.level-tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: 4px;
}

/* ============================================================
   9. 卡片
   ============================================================ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  transition: var(--transition);
}
.card-hover:hover { box-shadow: var(--shadow-2); border-color: var(--color-border); }
.card-pad { padding: 20px; }
.card-pad-lg { padding: 24px; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-light);
}
.card-head .card-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card-body { padding: 20px; }

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.section-title h3 { font-size: 18px; font-weight: 600; }
.section-title .more { font-size: 13px; color: var(--color-text-3); }
.section-title .more:hover { color: var(--color-primary); }

/* ============================================================
   10. 动态卡片 Feed Card
   ============================================================ */
.feed-card {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 20px;
  transition: var(--transition);
}
.feed-card + .feed-card { margin-top: 16px; }
.feed-card:hover { box-shadow: var(--shadow-2); border-color: var(--color-border); }

.feed-head { display: flex; align-items: center; gap: 12px; }
.feed-head .feed-user-info { flex: 1; min-width: 0; }
.feed-head .feed-username { font-size: 15px; font-weight: 600; color: var(--color-text-1); display: flex; align-items: center; gap: 6px; }
.feed-head .feed-meta { font-size: 12px; color: var(--color-text-3); margin-top: 2px; display: flex; align-items: center; gap: 8px; }
.feed-head .feed-meta .dot { width: 3px; height: 3px; background: var(--color-text-4); border-radius: 50%; }

.feed-circle-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-3);
}
.feed-circle-source a { color: var(--color-primary); }
.feed-circle-source a:hover { text-decoration: underline; }
.feed-title {
  margin-top: 12px;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-1);
    margin-bottom: 8px;
    line-height: 1.4;
}
.feed-content { margin-top: 12px; font-size: 15px; line-height: 1.75; color: var(--color-text-1); word-break: break-word; }
.feed-content.expandable { max-height: 200px; overflow: hidden; position: relative; }
.feed-expand { color: var(--color-primary); cursor: pointer; font-size: 14px; }
.feed-expand:hover { text-decoration: underline; }

.feed-images {margin-top: 12px;display: grid;gap: 6px;width: 200px;margin-bottom: 12px;}

.feed-images.col-1, .feed-images.count-1 {
    grid-template-columns: minmax(0, 200px);
}

.feed-images.col-2, .feed-images.count-2 {
    grid-template-columns: repeat(2, 1fr);
}

.feed-images.col-3, .feed-images.count-3 {
    grid-template-columns: repeat(3, 100px);
}

.feed-images.col-4, .feed-images.count-4 {
    grid-template-columns: repeat(2, 110px);
}

.feed-images.col-5, .feed-images.count-5, .feed-images.col-6, .feed-images.count-6, .feed-images.col-7, .feed-images.count-7, .feed-images.count-8, .feed-images.col-9, .feed-images.count-9 {
    grid-template-columns: repeat(3, 80px);
}
.feed-images.col-8{
    grid-template-columns: repeat(4, 80px);
}
.feed-images .img-item {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-fill-2);
  cursor: pointer;
  position: relative;
}
.feed-images .img-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.feed-images .img-item:hover img { transform: scale(1.04); }
.feed-images .img-item.video::after {
  content: "▶";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding-left: 3px;
}

.feed-video-box {
  margin-top: 12px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
  position: relative;
  max-width: 200px;
  height: 128px;
  margin-bottom: 12px;
}
.feed-video-box img { width: 100%; display: block; }
.feed-video-box .play-mask {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.2);
  cursor: pointer;
}
.feed-video-box .play-mask span {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; padding-left: 4px;
}

.feed-topics {display: flex;flex-wrap: wrap;gap: 8px;margin-top: 12px;}
.feed-topic-tag {
  font-size: 13px;
  color: var(--color-primary);
  background: var(--color-primary-light-2);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
}
.feed-topic-tag:hover { background: var(--color-primary-light); }

.feed-actions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
  gap: 8px;
}
.feed-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  color: var(--color-text-2);
  font-size: 14px;
  transition: var(--transition);
}
.feed-action.active, .feed-action.liked {
    color: var(--color-danger);
}
.feed-action:hover { background: var(--color-fill-1); color: var(--color-primary); }
.feed-action.active { color: var(--color-primary); }
.feed-action .num { font-size: 13px; }
.feed-action.spacer { margin-left: auto; }

/* 引用转发 */
.feed-quote {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--color-fill-1);
  border-left: 3px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--color-text-2);
}

/* ============================================================
   11. 圈子卡片
   ============================================================ */
.circle-card {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition);
}
.circle-card:hover { box-shadow: var(--shadow-2); border-color: var(--color-border); transform: translateY(-2px); }
.circle-cover {
  height: 68px;
  background: linear-gradient(135deg, #e8f0ff, #d4e3ff);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 32px;
}
.circle-cover .cover_img {width: 60px;height: 60px;object-fit: cover;position: absolute;left: 15px;top: 52px;border-radius: 10px;border: 3px solid #ffffff;}
.circle-cover .banner_img {width: 100%;height: 100%;object-fit: cover;}

.circle-body { padding: 16px; }
.circle-body .circle-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 68px;
}
.circle-body .circle-desc {font-size: 13px;color: var(--color-text-3);line-height: 1.5;margin-top: 10px;height: 40px;}
.circle-meta { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--color-text-3); }
.circle-footer {display: flex;align-items: center;justify-content: space-between;}

/* 圈子网格 */
.circle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* 圈子封面 hero */
.circle-hero {
  background: linear-gradient(135deg, #165dff 0%, #4080ff 100%);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  color: #fff;
}

.circle-hero-content {
  padding: 24px;
  display: flex;
  align-items: flex-end;
  gap: 20px;
}
.circle-hero .circle-avatar {
  width: 84px; height: 84px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: var(--color-primary);
  flex-shrink: 0;
  box-shadow: var(--shadow-2);
}
.circle-hero .circle-avatar img{
  border-radius: var(--radius-md);
}
.circle-hero-info { flex: 1; padding-bottom: 4px; }
.circle-hero-info h2 {color: #fff;font-size: 24px;margin-bottom: 6px;display: flex;align-items: center;gap: 12px;}
.circle-hero-info .circle-hero-desc { color: rgba(255,255,255,0.85); font-size: 13px; }

/* ============================================================
   12. 话题卡片
   ============================================================ */
.topic-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  transition: var(--transition);
}
.topic-card + .topic-card { margin-top: 12px; }
.topic-card:hover { box-shadow: var(--shadow-2); border-color: var(--color-border); }
.topic-rank {
  width: 28px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-4);
  font-style: italic;
  flex-shrink: 0;
  text-align: center;
}
.topic-rank.top-1 { color: #f53f3f; }
.topic-rank.top-2 { color: #ff7d00; }
.topic-rank.top-3 { color: #ffb20d; }
.topic-info { flex: 1; min-width: 0; }
.topic-info .topic-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.topic-info .topic-desc { font-size: 13px; color: var(--color-text-3); }
.topic-stats { font-size: 12px; color: var(--color-text-3); text-align: right; flex-shrink: 0; }
.topic-stats .num { font-size: 16px; font-weight: 600; color: var(--color-text-1); }

/* 话题广场网格 */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.topic-grid .topic-card { margin-top: 0; }

/* ============================================================
   13. 用户卡片
   ============================================================ */
.user-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  transition: var(--transition);
}
.user-card + .user-card { margin-top: 12px; }
.user-card:hover { box-shadow: var(--shadow-2); }
.user-card .user-info { flex: 1; min-width: 0; }
.user-card .user-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.user-card .user-bio { font-size: 13px; color: var(--color-text-3); margin-top: 3px; }
.user-stats-line { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--color-text-3); }
.user-stats-line b { color: var(--color-text-1); font-size: 14px; font-weight: 600; }

/* ============================================================
   14. 统计数字
   ============================================================ */
.stat-row { display: flex; gap: 32px; }
.stat-row .stat-item .num { font-size: 22px; font-weight: 700; color: var(--color-text-1); line-height: 1.2; }
.stat-row .stat-item .label { font-size: 13px; color: var(--color-text-3); margin-top: 4px; }

/* 大数据卡 */
.stat-card {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.stat-card .stat-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 4px;
}
.stat-card .stat-num { font-size: 28px; font-weight: 700; color: var(--color-text-1); line-height: 1; }
.stat-card .stat-label { font-size: 13px; color: var(--color-text-3); }
.stat-card .stat-trend { font-size: 12px; }
.stat-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ============================================================
   15. 表单
   ============================================================ */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-size: 14px;
  color: var(--color-text-2);
  margin-bottom: 8px;
  font-weight: 500;
}
.form-label .req { color: var(--color-danger); margin-right: 3px; }
.form-hint { font-size: 12px; color: var(--color-text-3); margin-top: 6px; }

.input,
.textarea,
.select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-1);
  transition: var(--transition);
}
.textarea { height: auto; padding: 10px 12px; line-height: 1.6; resize: vertical; min-height: 96px; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-border-dark); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-4); }
.input:disabled { background: var(--color-fill-1); color: var(--color-text-3); cursor: not-allowed; }

.input-lg { height: 44px; font-size: 15px; }
.input-with-btn { position: relative; }
.input-with-btn .btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }

.input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.input-group .input { border: none; border-radius: 0; }
.input-group .addon {
  padding: 0 14px;
  display: flex; align-items: center;
  background: var(--color-fill-1);
  color: var(--color-text-3);
  font-size: 14px;
  border-right: 1px solid var(--color-border);
}
.input-group:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.input-group:focus-within .input { box-shadow: none; }

/* Radio / Checkbox */
.radio-row, .checkbox-row { display: flex; flex-wrap: wrap; gap: 12px; }
.radio, .checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text-1);
  user-select: none;
}
.radio input, .checkbox input { margin: 0; accent-color: var(--color-primary); width: 16px; height: 16px; }

/* 选择卡片（单选/多选块） */
.choice-cards { display: flex; flex-wrap: wrap; gap: 12px; }
.choice-card {
  flex: 1;
  min-width: 160px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.choice-card:hover { border-color: var(--color-primary); }
.choice-card.selected { border-color: var(--color-primary); background: var(--color-primary-light-2); }
.choice-card.selected::after {
  content: "✓";
  position: absolute;
  top: 8px; right: 8px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.choice-card .cc-title { font-weight: 600; margin-bottom: 4px; }
.choice-card .cc-desc { font-size: 12px; color: var(--color-text-3); }

/* Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0;
  background: var(--color-border-dark);
  border-radius: 22px;
  transition: var(--transition);
  cursor: pointer;
}
.switch .slider::before {
  content: "";
  position: absolute;
  left: 3px; top: 3px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch input:checked + .slider { background: var(--color-primary); }
.switch input:checked + .slider::before { transform: translateX(18px); }

/* Upload */
.upload-area {
  border: 1.5px dashed var(--color-border-dark);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  color: var(--color-text-3);
  cursor: pointer;
  transition: var(--transition);
  background: var(--color-fill-1);
}
.upload-area:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light-2); }
.upload-area .up-icon { font-size: 32px; margin-bottom: 8px; }
.upload-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.upload-item {
  width: 96px; height: 96px;
  border-radius: var(--radius-sm);
  background: var(--color-fill-2);
  position: relative;
  overflow: hidden;
}
.upload-item img { width: 100%; height: 100%; object-fit: cover; }
.upload-item .remove {
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px;
  background: rgba(0,0,0,0.55);
  color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.upload-add {
  width: 96px; height: 96px;
  border: 1.5px dashed var(--color-border-dark);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-3);
  font-size: 28px;
  cursor: pointer;
  transition: var(--transition);
}
.upload-add:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ============================================================
   16. Tabs
   ============================================================ */
.tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--color-border-light);
}
.tabs .tab {
  position: relative;
  padding: 12px 18px;
  font-size: 15px;
  color: var(--color-text-2);
  cursor: pointer;
  transition: var(--transition);
  font-weight: 500;
}
.tabs .tab:hover { color: var(--color-text-1); }
.tabs .tab.active { color: var(--color-primary); font-weight: 600; }
.tabs .tab.active::after {
  content: "";
  position: absolute;
  left: 18px; right: 18px;
  bottom: -1px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 3px 3px 0 0;
}
.tabs .tab .badge { margin-left: 6px; }
.tabs .tab-spacer { flex: 1; }

/* 分段控件 */
.segmented {
  display: inline-flex;
  background: var(--color-fill-1);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}
.segmented .seg {
  padding: 6px 16px;
  font-size: 13px;
  color: var(--color-text-2);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: var(--transition);
}
.segmented .seg:hover { color: var(--color-text-1); }
.segmented .seg.active { background: #fff; color: var(--color-primary); font-weight: 500; box-shadow: var(--shadow-1); }

/* 筛选条 */
.filter-bar {
  padding: 0px 20px;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.filter-group {display: flex;gap: 10px;margin: 15px 0px;}
.filter-group .f-label {font-size: 13px;color: var(--color-text-3);width: 70px;display: block;margin-top: 6px;}
.filter-chips {display: flex;gap: 8px;flex-wrap: wrap;width: calc(100% - 70px);}
.filter-chip {
  padding: 5px 14px;
  font-size: 13px;
  border-radius: var(--radius-pill);
  color: var(--color-text-2);
  cursor: pointer;
  transition: var(--transition);
}
.filter-chip:hover { background: var(--color-fill-1); }
.filter-chip.active { background: var(--color-primary); color: #fff; }

/* ============================================================
   17. 侧栏 Rail 组件
   ============================================================ */
.rail-card {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  overflow: hidden;
}
.rail-card .rail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border-light);
}
.rail-card .rail-head .t { font-size: 15px; font-weight: 600; }
.rail-card .rail-head .more { font-size: 12px; color: var(--color-text-3); }
.rail-card .rail-body { padding: 12px 16px; }

/* 排行榜列表（侧栏） */
.rank-list .rank-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.rank-list .rank-item + .rank-item { border-top: 1px solid var(--color-border-light); }
.rank-list .rank-no {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--color-fill-2);
  color: var(--color-text-3);
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rank-list .rank-item:nth-child(1) .rank-no { background: #ffece8; color: #f53f3f; }
.rank-list .rank-item:nth-child(2) .rank-no { background: #fff3e8; color: #ff7d00; }
.rank-list .rank-item:nth-child(3) .rank-no { background: #fff7e8; color: #ffb20d; }
.rank-list .rank-info { flex: 1; min-width: 0; }
.rank-list .rank-name { font-size: 14px; font-weight: 500; }
.rank-list .rank-meta { font-size: 12px; color: var(--color-text-3); }
.rank-list .rank-value { font-size: 14px; font-weight: 600; color: var(--color-primary); }

/* 推荐圈子侧栏 */
.rec-circle-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
}
.rec-circle-item + .rec-circle-item { border-top: 1px solid var(--color-border-light); }
.rec-circle-item .rc-cover {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #e8f0ff, #cdd9ff);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary); font-size: 18px;
  flex-shrink: 0;
}
.rec-circle-item .rc-info { flex: 1; min-width: 0; }
.rec-circle-item .rc-name { font-size: 14px; font-weight: 500; }
.rec-circle-item .rc-meta { font-size: 12px; color: var(--color-text-3); }

/* ============================================================
   18. 用户中心侧栏
   ============================================================ */
.user-side-card {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
  text-align: center;
}
.user-side-card .side-avatar { margin: 0 auto 12px; }
.user-side-card .side-name { font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; }
.user-side-card .side-bio { font-size: 13px; color: var(--color-text-3); margin-top: 6px; }
.user-side-card .side-stats { display: flex; justify-content: center; gap: 24px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border-light); }
.user-side-card .side-stats .ss-num { font-size: 18px; font-weight: 700; }
.user-side-card .side-stats .ss-label { font-size: 12px; color: var(--color-text-3); }

.side-nav {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 8px;
}
.side-nav-group { padding: 6px 12px 4px; font-size: 12px; color: var(--color-text-3); }
.side-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text-2);
  font-size: 14px;
  transition: var(--transition);
}
.side-nav a:hover { background: var(--color-fill-1); color: var(--color-text-1); }
.side-nav a.active { background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; }
.side-nav a .nav-icon { width: 18px; text-align: center; }
.side-nav a .nav-badge { margin-left: auto; }

/* ============================================================
   19. 表格
   ============================================================ */
.table-wrap {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}
table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.table th {
  background: var(--color-fill-1);
  color: var(--color-text-2);
  font-weight: 500;
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--color-border-light);
  white-space: nowrap;
}
table.table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-1);
}
table.table tbody tr:last-child td { border-bottom: none; }
table.table tbody tr:hover { background: var(--color-fill-1); }
table.table .t-secondary { color: var(--color-text-3); font-size: 13px; }

/* 分页容器居中 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

/* 分页基础样式 */
.pagination {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 6px; /* 按钮间距 */
}

.pagination li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 普通数字按钮 */
.pagination li a,
.pagination li span {
  display: inline-block;
  min-width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  background: #fff;
  border: 1px solid #e5e7eb;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* 鼠标悬浮效果 */
.pagination li a:hover {
  background: #f5f7fa;
  border-color: #d1d5db;
  color: #165DFF;
}

/* 当前选中页 */
.pagination li.active span {
  background: #165DFF;
  color: #fff;
  border-color: #165DFF;
  font-weight: 500;
}

/* 禁用状态（首页/上一页） */
.pagination li.disabled span {
  color: #ccc;
  background: #f9fafb;
  border-color: #e5e7eb;
  cursor: not-allowed;
}

/* 页面加载蒙版 */
.page-loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    opacity: 1;
    visibility: visible;
}

.page-loading-mask.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loading-mask .spinner {
    width: 52px;
    height: 52px;
    border: 5px solid #e8e8e8;
    border-top: 5px solid #667eea;
    border-radius: 50%;
    animation: spin 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    margin-bottom: 20px;
}

.page-loading-mask p {
    font-size: 18px;
    color: #444;
    letter-spacing: 1px;
    font-weight: 400;
    margin: 0;
}

.page-loading-mask .sub {
    font-size: 13px;
    color: #999;
    margin-top: 6px;
    letter-spacing: 0.3px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* ============================================================
   21. 弹窗 Modal
   ============================================================ */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-mask.show { display: flex; }
.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 460px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-4);
  animation: modalIn 0.2s ease;
}
.modal.lg { max-width: 680px; }
.modal.xl { max-width: 880px; }
@keyframes modalIn { from { opacity: 0; transform: scale(0.96) translateY(10px); } to { opacity: 1; transform: none; } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-border-light);
}
.modal-head .modal-title { font-size: 17px; font-weight: 600; }
.modal-head .modal-close { font-size: 22px; color: var(--color-text-3); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.modal-head .modal-close:hover { background: var(--color-fill-1); color: var(--color-text-1); }
.modal-body { padding: 24px; overflow-y: auto; }
.modal-foot {
  padding: 16px 24px;
  border-top: 1px solid var(--color-border-light);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* 抽屉 */
.drawer-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  z-index: 1000;
}
.drawer-mask.show { display: block; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 90vw;
  background: #fff;
  display: flex; flex-direction: column;
  z-index: 1001;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  box-shadow: var(--shadow-4);
}
.drawer.show { transform: translateX(0); }

/* ============================================================
   22. 评论
   ============================================================ */
.comment-item { display: flex; gap: 12px; padding: 16px 0; }
.comment-item + .comment-item { border-top: 1px solid var(--color-border-light); }
.comment-item .comment-main { flex: 1; min-width: 0; }
.comment-item .comment-author { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.comment-item .comment-text { font-size: 14px; color: var(--color-text-1); margin-top: 4px; line-height: 1.6; }
.comment-item .comment-meta { display: flex; align-items: center; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--color-text-3); }
.comment-item .comment-meta .cm-action { cursor: pointer; }
.comment-item .comment-meta .cm-action:hover { color: var(--color-primary); }
.comment-reply { background: var(--color-fill-1); border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 10px; }
.comment-reply + .comment-reply { margin-top: 8px; }
.comment-input-wrap { display: flex; gap: 12px; align-items: flex-start; }
.comment-input-wrap .input { flex: 1; }
.comment-item .view-more-replies{
    color: #a2adc3;
    margin-top: 10px;
    text-align: end;
    width: 100%;
}
/* ============================================================
   23. 空状态 / 骨架 / 加载
   ============================================================ */
.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-3);
}
.empty .empty-icon { font-size: 56px; margin-bottom: 16px; opacity: 0.5; }
.empty .empty-text { font-size: 14px; }
.empty .empty-action { margin-top: 16px; }

.skeleton {
  background: linear-gradient(90deg, var(--color-fill-1) 25%, var(--color-fill-2) 37%, var(--color-fill-1) 63%);
  background-size: 400% 100%;
  animation: skeleton 1.4s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skl-line { height: 14px; margin-bottom: 8px; }
.skl-line.short { width: 40%; }
.skl-avatar { width: 40px; height: 40px; border-radius: 50%; }

.loading-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--color-border-light);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   24. 进度条
   ============================================================ */
.progress {
  height: 8px;
  background: var(--color-fill-2);
  border-radius: 8px;
  overflow: hidden;
}
.progress .progress-bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: 8px;
  transition: width 0.4s ease;
}
.progress.success .progress-bar { background: var(--color-success); }
.progress.warning .progress-bar { background: var(--color-warning); }
.progress.thin { height: 4px; }

/* 等级进度 */
.level-progress {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 24px;
}
.level-progress .lp-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.level-progress .lp-level {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #165dff, #4080ff);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
  flex-shrink: 0;
}
.level-progress .lp-title { font-size: 18px; font-weight: 600; }
.level-progress .lp-sub { font-size: 13px; color: var(--color-text-3); margin-top: 2px; }
/* 我的经验 - 页面专属样式（基于蓝色设计系统） */
.level-progress .lp-info-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px;}
.level-progress .lp-info-row .lp-cur{color:var(--color-text-2);}
.level-progress .lp-info-row .lp-pct{font-weight:700;color:var(--color-primary);font-size:18px;}
.level-progress .lp-foot{display:flex;justify-content:space-between;font-size:12px;color:var(--color-text-3);margin-top:8px;}
.level-progress .lp-need{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding-top:16px;border-top:1px solid var(--color-border-light);font-size:13px;color:var(--color-text-2);}
.level-progress .lp-need .tag{margin-left:6px;}
/* ============================================================
   25. 时间线
   ============================================================ */
.timeline { position: relative; padding-left: 24px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--color-border-light);
}
.timeline-item { position: relative; padding-bottom: 24px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item .tl-dot {
  position: absolute;
  left: -24px; top: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--color-primary);
  z-index: 1;
}
.timeline-item .tl-dot.muted { border-color: var(--color-border-dark); }
.timeline-item .tl-time { font-size: 12px; color: var(--color-text-3); margin-bottom: 4px; }
.timeline-item .tl-title { font-size: 14px; font-weight: 500; }
.timeline-item .tl-desc { font-size: 13px; color: var(--color-text-2); margin-top: 4px; }
.timeline-item .tl-value { font-size: 14px; color: var(--color-primary); font-weight: 600; margin-top: 4px; }
/* ============================================================
   26. 排行榜领奖台 Podium
   ============================================================ */
.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  padding: 30px 0 20px;
}
.podium-item { text-align: center; width: 160px; }
.podium-item .podium-avatar { margin: 0 auto 10px; border: 3px solid; }
.podium-item.p1 .podium-avatar { border-color: #f7ba00; }
.podium-item.p2 .podium-avatar { border-color: #c9cdd4; }
.podium-item.p3 .podium-avatar { border-color: #c98a5a; }
.podium-item .podium-name { font-size: 15px; font-weight: 600; }
.podium-item .podium-value { font-size: 13px; color: var(--color-text-3); margin-top: 2px; }
.podium-item .podium-block {
  margin-top: 14px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: linear-gradient(180deg, var(--color-fill-1), var(--color-fill-2));
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; color: var(--color-text-3);
}
.podium-item.p1 .podium-block { height: 110px; background: linear-gradient(180deg, #fff7e8, #ffe7a8); color: #f7ba00; }
.podium-item.p2 .podium-block { height: 84px; background: linear-gradient(180deg, #f7f8fa, #e5e6eb); color: #86909c; }
.podium-item.p3 .podium-block { height: 64px; background: linear-gradient(180deg, #fdf1ea, #f5d8c4); color: #c98a5a; }
.podium-item .crown { font-size: 22px; margin-bottom: 4px; }
 .sign-calendar {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 24px;
  /* 增加溢出处理 */
  overflow-x: auto;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.calendar-grid .cal-head {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-3);
  padding: 6px 0;
  font-weight: 500;
  border: 3px solid var(--color-border-light);
}
.calendar-grid .cal-cell {
  aspect-ratio: 1/1;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 3px solid var(--color-border-light);
  color: var(--color-text-2);
  position: relative;
  /* 禁止内容撑开格子 */
  box-sizing: border-box;
}
.calendar-grid .cal-cell.empty { border: none; }
.calendar-grid .cal-cell.other-month { color: var(--color-text-4); }
.calendar-grid .cal-cell.signed {background: var(--color-primary-light);color: var(--color-primary);border-color: var(--color-primary-light);border: 3px solid var(--color-warning);}
.calendar-grid .cal-cell.signed::after {
    content: "✓";
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 18px;
    background-color: var(--color-warning);
    width: 28px;
    height: 28px;
    color: aliceblue;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
}
.calendar-grid .cal-cell.today { border-color: var(--color-primary); border-width: 2px; font-weight: 700; }
.calendar-grid .cal-cell.today.signed { background: var(--color-primary); color: #fff; }
.calendar-grid .cal-cell .cal-reward {
  font-size: 16px;
  color: var(--color-warning);
  margin-top: 2px;
  white-space: nowrap;
}
.calendar-grid .cal-cell.signed .cal-reward { color: var(--color-warning); }
.calendar-grid .cal-cell.today.signed .cal-reward { color: #ffe7a8; }

.sign-stats-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}
.sign-stat {
  flex: 1;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
}
.sign-stat .ss-num { font-size: 26px; font-weight: 700; color: var(--color-primary); }
.sign-stat .ss-label { font-size: 13px; color: var(--color-text-3); margin-top: 4px; }
        .sign-hero-btn{margin-bottom:20px;}
        .sign-hero-btn .btn{font-size:16px;font-weight:600;}
        .sign-week-progress{margin-bottom:18px;}
        .swp-info{display:flex;justify-content:space-between;font-size:13px;color:var(--color-text-3);margin-bottom:8px;}
        .swp-info i{color:var(--color-warning);}
        .sign-rules{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
        .sign-rule{background:var(--color-primary-light);border:1px solid var(--color-primary-light-2);border-radius:var(--radius-sm);padding:12px 6px;text-align:center;}
        .sign-rule .d{font-size:11px;color:var(--color-primary);font-weight:600;margin-bottom:4px;}
        .sign-rule .r{font-size:14px;font-weight:700;color:var(--color-primary);}
        .sign-rule.special{grid-column:span 7;background:var(--color-warning-light);}
        .sign-rule.special .d,.sign-rule.special .r{color:var(--color-warning);}
        .sign-rank-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--color-border-light);}
        .sign-rank-item:last-child{border-bottom:none;}
        .sign-rank-item .rk{width:32px;text-align:center;}
        .sign-rank-item .av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--color-fill-2);}
        .sign-rank-item .av img{width:100%;height:100%;object-fit:cover;}
        .sign-rank-item .av .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary),#4080ff);color:#fff;font-weight:600;}
        .sign-rank-item .meta{flex:1;min-width:0;}
        .sign-rank-item .nm{font-weight:600;font-size:14px;color:var(--color-text-1);}
        .sign-rank-item .ct{font-size:12px;color:var(--color-text-3);margin-top:2px;}
        .sign-rank-item .rw{color:var(--color-warning);font-weight:700;font-size:15px;white-space:nowrap;}
        @media(max-width:768px){
            .sign-rules{grid-template-columns:repeat(4,1fr);}
            .sign-rule.special{grid-column:span 4;}
        }
        @media(max-width:480px){
            .sign-rules{grid-template-columns:repeat(3,1fr);}
            .sign-rule.special{grid-column:span 3;}
        }



/* ============================================================
   28. 钱包
   ============================================================ */
.wallet-banner {
  background: linear-gradient(135deg, #165dff 0%, #4080ff 100%);
  border-radius: var(--radius-lg);
  padding: 28px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.wallet-banner::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);
}
.wallet-banner .wb-label { font-size: 14px; opacity: 0.85; }
.wallet-banner .wb-amount { font-size: 36px; font-weight: 700; margin-top: 6px; line-height: 1; }
.wallet-banner .wb-amount .unit { font-size: 18px; margin-left: 4px; font-weight: 500; }
.wallet-banner .wb-actions { display: flex; gap: 12px; z-index: 1; }
.wallet-banner .wb-actions .btn { background: rgba(255,255,255,0.18); color: #fff; backdrop-filter: blur(4px); }
.wallet-banner .wb-actions .btn:hover { background: rgba(255,255,255,0.3); }
.wallet-banner .wb-actions .btn.primary { background: #fff; color: var(--color-primary); }
.wallet-banner .wb-actions .btn.primary:hover { background: #f2f6ff; }

/* 交易记录项 */
.tx-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
}
.tx-item + .tx-item { border-top: 1px solid var(--color-border-light); }
.tx-item .tx-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.tx-item .tx-icon.in { background: var(--color-success-light); color: var(--color-success); }
.tx-item .tx-icon.out { background: var(--color-danger-light); color: var(--color-danger); }
.tx-item .tx-info { flex: 1; min-width: 0; }
.tx-item .tx-title { font-size: 14px; font-weight: 500; }
.tx-item .tx-time { font-size: 12px; color: var(--color-text-3); margin-top: 2px; }
.tx-item .tx-amount { font-size: 16px; font-weight: 600; }
.tx-item .tx-amount.in { color: var(--color-success); }
.tx-item .tx-amount.out { color: var(--color-text-1); }

/* 套餐选择 */
.plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.plan-card {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.plan-card:hover { border-color: var(--color-primary); }
.plan-card.selected { border-color: var(--color-primary); background: var(--color-primary-light-2); }
.plan-card .plan-amount { font-size: 28px; font-weight: 700; color: var(--color-text-1); }
.plan-card .plan-amount .unit { font-size: 14px; font-weight: 500; color: var(--color-text-3); }
.plan-card .plan-gift { font-size: 12px; color: var(--color-warning); margin-top: 6px; }
.plan-card .plan-tag {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: var(--color-warning); color: #fff;
  font-size: 11px; padding: 2px 10px;
  border-radius: var(--radius-pill); white-space: nowrap;
}

/* ============================================================
   29. 消息
   ============================================================ */
.msg-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  transition: var(--transition);
}
.msg-list-item + .msg-list-item { border-top: 1px solid var(--color-border-light); }
.msg-list-item:hover { background: var(--color-fill-1); }
.msg-list-item.unread { background: var(--color-primary-light-2); }
.msg-list-item .msg-info { flex: 1; min-width: 0; }
.msg-list-item .msg-name { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.msg-list-item .msg-preview { font-size: 13px; color: var(--color-text-3); margin-top: 3px; }
.msg-list-item .msg-time { font-size: 12px; color: var(--color-text-3); flex-shrink: 0; }
.msg-list-item .unread-dot { width: 8px; height: 8px; background: var(--color-danger); border-radius: 50%; flex-shrink: 0; }

/* 系统消息 */
.sysmsg-item {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
}
.sysmsg-item + .sysmsg-item { border-top: 1px solid var(--color-border-light); }
.sysmsg-item .sm-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.sysmsg-item .sm-icon.like { background: var(--color-danger-light); color: var(--color-danger); }
.sysmsg-item .sm-icon.comment { background: var(--color-primary-light); color: var(--color-primary); }
.sysmsg-item .sm-icon.follow { background: var(--color-success-light); color: var(--color-success); }
.sysmsg-item .sm-icon.system { background: var(--color-warning-light); color: var(--color-warning); }
.sysmsg-item .sm-content { flex: 1; }
.sysmsg-item .sm-text { font-size: 14px; color: var(--color-text-1); }
.sysmsg-item .sm-text .at { color: var(--color-primary); }
.sysmsg-item .sm-time { font-size: 12px; color: var(--color-text-3); margin-top: 6px; }
 
/* ============================================================
   31. 页面通用组件
   ============================================================ */
.page-hero {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 20px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-3);
  margin-bottom: 16px;
}
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb .sep { color: var(--color-text-4); }
.breadcrumb .current { color: var(--color-text-1); }

.page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.page-title-row h1 { font-size: 22px; font-weight: 600; }
.page-title-row .sub { font-size: 13px; color: var(--color-text-3); margin-top: 4px; }

/* 内容卡片容器 */
.content-stack > * + * { margin-top: 16px; }

/* 顶部 Banner */
.page-banner {
  border-radius: var(--radius-lg);
  padding: 32px;
  color: #fff;
  background: linear-gradient(135deg, #165dff 0%, #4080ff 100%);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
 
.page-banner h1 { color: #fff; font-size: 26px; }
.page-banner p { color: rgba(255,255,255,0.85); margin-top: 8px; font-size: 14px; max-width: 600px; position: relative; z-index: 1; }

/* 登录注册页 */
.auth-layout {
  min-height: 100vh;
  display: flex;
}
.auth-aside {
  flex: 1;
  background: linear-gradient(135deg, #165dff 0%, #0e42d2 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 80px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.auth-aside::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgb(255 255 255 / 19%), transparent 60%);
}
.auth-aside h1 { color: #fff; font-size: 40px; line-height: 1.3; }
.auth-aside p { color: rgba(255,255,255,0.85); margin-top: 20px; font-size: 16px; max-width: 420px; line-height: 1.8; position: relative; z-index: 1; }
.auth-main {
  width: 600px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: #fff;
}
.auth-form { width: 100%; max-width: 360px; }
.auth-form h2 { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.auth-form .auth-sub { color: var(--color-text-3); margin-bottom: 32px; font-size: 14px; }
.auth-tabs { display: flex; gap: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--color-border-light); }
.auth-tabs .auth-tab { padding-bottom: 14px; font-size: 16px; color: var(--color-text-3); cursor: pointer; position: relative; font-weight: 500; }
.auth-tabs .auth-tab.active { color: var(--color-text-1); font-weight: 600; }
.auth-tabs .auth-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--color-primary); border-radius: 3px 3px 0 0; }

/* ============================================================
   32. Footer
   ============================================================ */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--color-border-light);
  padding: 32px 0;
  margin-top: 60px;
}
.site-footer .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--color-text-3);
  font-size: 13px;
}
.site-footer .footer-links { display: flex; gap: 20px; }
.site-footer .footer-links a:hover { color: var(--color-primary); }

/* ============================================================
   33. Toast 提示
   ============================================================ */
.toast-wrap {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: rgba(29, 33, 41, 0.92);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  box-shadow: var(--shadow-3);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: toastIn 0.25s ease;
}
.toast.success { background: rgba(0, 180, 42, 0.95); }
.toast.error { background: rgba(245, 63, 63, 0.95); }
.toast.warning { background: rgba(255, 125, 0, 0.95); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* ============================================================
   34. 城市选择
   ============================================================ */
.city-index {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.city-index a {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: var(--color-text-2);
}
.city-index a:hover { background: var(--color-primary); color: #fff; }
.city-group { margin-bottom: 20px; }
.city-group .city-letter { font-size: 18px; font-weight: 700; color: var(--color-text-3); margin-bottom: 12px; }
.city-group .city-items { display: flex; flex-wrap: wrap; gap: 10px; }
.city-group .city-items a {
  padding: 8px 18px;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--color-text-2);
  transition: var(--transition);
}
.city-group .city-items a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.city-group .city-items a.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ============================================================
   35. 杂项工具
   ============================================================ */
.divider { height: 1px; background: var(--color-border-light); margin: 16px 0; }
.divider-text { display: flex; align-items: center; gap: 12px; color: var(--color-text-3); font-size: 13px; margin: 16px 0; }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--color-border-light); }

.link-primary { color: var(--color-primary); }
.link-primary:hover { text-decoration: underline; }

.hover-lift { transition: var(--transition); }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }

.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }

.img-cover { width: 100%; height: 100%; object-fit: cover; }

.rounded { border-radius: var(--radius-sm); }

.text-center { text-align: center; }
.text-right { text-align: right; }
.cursor-pointer { cursor: pointer; }
.position-relative { position: relative; }
.nowrap { white-space: nowrap; }

/* 弹性填充 */
.spacer { flex: 1; }

/* 卡片网格通用 */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* 通知红点（无数字） */
.dot-badge { position: relative; }
.dot-badge::after {
  content: "";
  position: absolute;
  top: 4px; right: 4px;
  width: 8px; height: 8px;
  background: var(--color-danger);
  border-radius: 50%;
  border: 2px solid #fff;
}

/* 步骤条 */
.steps { display: flex; align-items: center; gap: 0; }
.step { display: flex; align-items: center; gap: 10px; flex: 1; }
.step .step-no {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-fill-2);
  color: var(--color-text-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  flex-shrink: 0;
}
.step .step-label { font-size: 14px; color: var(--color-text-3); }
.step .step-line { flex: 1; height: 2px; background: var(--color-border-light); margin: 0 12px; }
.step.active .step-no { background: var(--color-primary); color: #fff; }
.step.active .step-label { color: var(--color-text-1); font-weight: 500; }
.step.done .step-no { background: var(--color-success); color: #fff; }
.step.done .step-line { background: var(--color-success); }

/* 关于页 / 协议页 富文本 */
.rich-text { background: #fff; border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: 40px; line-height: 1.9; color: var(--color-text-2); }
.rich-text h1 { font-size: 28px; margin-bottom: 8px; color: var(--color-text-1); }
.rich-text h2 { font-size: 20px; margin: 28px 0 14px; color: var(--color-text-1); }
.rich-text h3 { font-size: 16px; margin: 20px 0 10px; color: var(--color-text-1); }
.rich-text p { margin-bottom: 14px; }
.rich-text ul { padding-left: 20px; margin-bottom: 14px; }
.rich-text ul li { list-style: disc; margin-bottom: 6px; }
.rich-text .meta { color: var(--color-text-3); font-size: 13px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border-light); }

/* 关于页版本信息卡 */
.about-card {
  background: linear-gradient(135deg, #165dff 0%, #4080ff 100%);
  border-radius: var(--radius-lg);
  padding: 40px;
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
}
.about-card .about-logo {
  width: 80px; height: 80px;
  border-radius: 20px;
  background: rgba(255,255,255,0.2);
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 700;
}
.about-card h1 { color: #fff; font-size: 28px; }
.about-card .about-version { color: rgba(255,255,255,0.85); margin-top: 8px; }

/* 城市定位条 */
.location-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--color-text-2);
  cursor: pointer;
  transition: var(--transition);
}
.location-bar:hover { background: var(--color-fill-1); color: var(--color-text-1); }


        /* ===== 页面整体布局 ===== */
        .ca-page{
            padding:28px 0;
        }

        /* ===== 顶部渐变标题区 ===== */
        .ca-hero{
            background: var(--color-primary);
            border-radius:18px;
            padding:32px 40px;
            margin-bottom:28px;
            color:#fff;
            position:relative;
            overflow:hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
        }
        .ca-hero::before{
            content:'';
            position:absolute;
            top:-50%;right:-10%;
            width:400px;height:400px;
            background:radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 70%);
            border-radius:50%;
        }
        .ca-hero::after{
            content:'';
            position:absolute;
            bottom:-40%;left:-5%;
            width:300px;height:300px;
            background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%);
            border-radius:50%;
        }
        .ca-hero-inner{
            position:relative;z-index:1;
            display:flex;align-items:center;gap:20px;
        }
        .ca-hero-icon{
            width:64px;height:64px;
            background:rgba(255,255,255,.2);
            backdrop-filter:blur(10px);
            border-radius:16px;
            display:flex;align-items:center;justify-content:center;
            font-size:28px;
            flex-shrink:0;
        }
        .ca-hero h1{
            font-size:26px;
            font-weight:700;
            margin:0 0 4px;
            letter-spacing:-.02em;
            color: var(--color-surface);
        }
        .ca-hero p{
            font-size:14px;opacity:.9;margin:0;line-height:1.6;
        }

        /* ===== 双栏网格布局 ===== */
        .ca-layout{
            display:grid;
            grid-template-columns:1fr 340px;
            gap:28px;
            align-items:flex-start;
        }

        /* ===== 表单卡片 ===== */
        .ca-section{
            background:#fff;
            border-radius:16px;
            padding:28px 32px;
            margin-bottom:20px;
            box-shadow:0 1px 3px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
            border:1px solid rgba(0,0,0,.03);
            transition:box-shadow .3s;
        }
        .ca-section:hover{
            box-shadow:0 2px 6px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.08);
        }
        .ca-section:last-child{margin-bottom:0;}

        .ca-section-header{
            display:flex;
            align-items:center;
            gap:12px;
            border-bottom:1px solid var(--border-light);
        }
        .ca-section-icon{
            width:40px;height:40px;
            border-radius:12px;
            display:flex;align-items:center;justify-content:center;
            font-size:18px;
            flex-shrink:0;
        }
        .ca-section-icon.theme{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;}
        .ca-section-icon.green{background:linear-gradient(135deg,#10b981,#059669);color:#fff;}
        .ca-section-icon.orange{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;}
        .ca-section-icon.purple{background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;}
        .ca-section-icon.blue{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;}

        .ca-section-title{
            font-size:17px;font-weight:700;
            color:var(--text-primary);
            margin:0;
        }
        .ca-section-desc{
            font-size:13px;color:var(--text-muted);
            margin:2px 0 0;
        }

        /* ===== 表单项 ===== */
        .ca-form-group{margin-bottom:22px;}
        .ca-form-group:last-child{margin-bottom:0;}

        .ca-label{
            display:block;
            font-size:14px;font-weight:600;
            color:var(--text-secondary);
            margin-bottom:10px;
            letter-spacing:.01em;
        }
        .ca-label .req{
            color:#ef4444;
            margin-left:2px;
        }
        .ca-label .optional{
            font-weight:400;font-size:12px;
            color:var(--text-muted);
            margin-left:6px;
        }

        .ca-input,
        .ca-textarea,
        .ca-select{
            width:100%;
            padding:13px 16px;
            border:1.5px solid var(--border-color);
            border-radius:12px;
            font-size:14px;
            outline:none;
            transition:all .25s ease;
            background:var(--color-bg);
            font-family:inherit;
            color:var(--text-primary);
        }
        .ca-input:hover,
        .ca-textarea:hover,
        .ca-select:hover{
            border-color:#c7d2fe;
        }
        .ca-input:focus,
        .ca-textarea:focus,
        .ca-select:focus{
            border-color:var(--primary-color);
            box-shadow:0 0 0 4px rgba(79,70,229,.1);
            background:#fff;
        }
        .ca-textarea{
            min-height:110px;
            resize:vertical;
            line-height:1.7;
        }
        .ca-select{
            appearance:none;
            background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
            background-repeat:no-repeat;
            background-position:right 14px center;
            background-size:16px;
            padding-right:40px;
        }

        .ca-hint{
            font-size:12px;color:var(--text-muted);
            margin-top:8px;line-height:1.5;
            display:flex;align-items:flex-start;gap:4px;
        }
        .ca-hint i{font-size:13px;margin-top:1px;flex-shrink:0;}

        /* ===== 圈子类型卡片 ===== */
        .ca-type-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:14px;
        }
        .ca-type-card{
            padding:22px 18px;
            border:2px solid var(--border-color);
            border-radius:14px;
            cursor:pointer;
            text-align:center;
            transition:all .25s ease;
            background:#fff;
            position:relative;
            overflow:hidden;
        }
        .ca-type-card:hover{
            border-color:var(--primary-light);
            transform:translateY(-2px);
            box-shadow:0 6px 20px rgba(79,70,229,.12);
        }
        .ca-type-card.active{
            border-color:var(--primary-color);
            background:linear-gradient(135deg,rgba(79,70,229,.06),rgba(124,58,237,.06));
            box-shadow:0 4px 14px rgba(79,70,229,.15);
        }
        .ca-type-card.active::after{
            content:'\F26E';
            font-family:'bootstrap-icons';
            position:absolute;top:10px;right:12px;
            font-size:14px;color:var(--primary-color);
        }
        .ca-type-card .ic{
            font-size:32px;
            margin-bottom:10px;
            display:flex;align-items:center;justify-content:center;
            width:56px;height:56px;margin:0 auto 12px;
            border-radius:14px;
        }
        .ca-type-card.t1 .ic{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#059669;}
        .ca-type-card.t2 .ic{background:linear-gradient(135deg,#ffedd5,#fed7aa);color:#ea580c;}
        .ca-type-card.t3 .ic{background:linear-gradient(135deg,#ede9fe,#ddd6fe);color:#7c3aed;}

        .ca-type-card .nm{
            font-size:15px;font-weight:700;
            color:var(--text-primary);
            margin-bottom:4px;
        }
        .ca-type-card .ds{
            font-size:12px;color:var(--text-muted);
        }

        /* ===== 封面上传 ===== */
        .ca-cover-uploader{
            position:relative;
            width: 348px;
            height: 138px;
            border:2px dashed #d1d5db;
            border-radius:14px;
            overflow:hidden;
            cursor:pointer;
            display:flex;
            align-items:center;
            justify-content:center;
            background:linear-gradient(135deg,#fafbfc,#f4f5f7);
            transition:all .3s;
        }
        .ca-cover-uploader:hover{
            border-color:var(--primary-color);
            background:linear-gradient(135deg,#f5f3ff,#eef2ff);
        }
        .ca-cover-uploader img{
            width:100%;height:100%;
            object-fit:cover;
            position:absolute;top:0;left:0;
        }
        .ca-cover-uploader .placeholder{
            display:flex;flex-direction:column;
            align-items:center;
            color:var(--text-muted);
            gap:10px;
            z-index:1;
        }
        .ca-cover-uploader .placeholder i{
            font-size:36px;
            color:var(--primary-light);
        }
        .ca-cover-uploader .placeholder span{
            font-size:13px;
        }

        /* ===== 付费金额输入 ===== */
        .ca-fee-row{
            display:flex;align-items:stretch;gap:0;
            border:1.5px solid var(--border-color);
            border-radius:12px;
            overflow:hidden;
            transition:all .25s;
        }
        .ca-fee-row:focus-within{
            border-color:var(--primary-color);
            box-shadow:0 0 0 4px rgba(79,70,229,.1);
        }
        .ca-fee-row .prefix{
            display:flex;align-items:center;justify-content:center;
            padding:0 18px;
            background:linear-gradient(135deg,#f59e0b,#d97706);
            color:#fff;font-size:18px;font-weight:600;
            min-width:52px;
        }
        .ca-fee-row .ca-input{
            border:none;border-radius:0;
            padding:13px 16px;
        }
        .ca-fee-row .ca-input:focus{
            box-shadow:none;
        }

        /* ===== 复选框美化 ===== */
        .ca-checkbox-wrap{
            display:flex;align-items:center;gap:12px;
            padding:14px 18px;
            background:#f8f9fb;
            border-radius:12px;
            border:1.5px solid var(--border-light);
            cursor:pointer;
            transition:all .2s;
        }
        .ca-checkbox-wrap:hover{
            background:#f4f5ff;
            border-color:#c7d2fe;
        }
        .ca-checkbox-wrap input[type="checkbox"]{
            width:18px;height:18px;
            accent-color:var(--primary-color);
            cursor:pointer;
        }
        .ca-checkbox-wrap label{
            font-size:14px;color:var(--text-secondary);
            cursor:pointer;margin:0;
        }

        /* ===== 提交按钮 ===== */
        .ca-submit{
            width:100%;
            padding:16px 24px;
            border-radius:14px;
            font-size:16px;font-weight:600;
            border:none;
            cursor:pointer;
            background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);
            color:#fff;
            transition:all .3s cubic-bezier(.4,0,.2,1);
            display:flex;align-items:center;justify-content:center;gap:8px;
            letter-spacing:.02em;
            box-shadow:0 4px 14px rgba(79,70,229,.3);
        }
        .ca-submit:hover:not(:disabled){
            box-shadow:0 8px 28px rgba(79,70,229,.4);
            transform:translateY(-2px);
        }
        .ca-submit:active:not(:disabled){
            transform:translateY(0);
            box-shadow:0 2px 8px rgba(79,70,229,.3);
        }
        .ca-submit:disabled{
            background:#d1d5db;
            cursor:not-allowed;
            transform:none;
            box-shadow:none;
        }

        /* ===== 右侧信息面板 ===== */
        .ca-sidebar{
            position:sticky;
            top:calc(var(--header-height) + 20px);
        }
        .ca-side-card{
            background:#fff;
            border-radius:16px;
            padding:26px;
            box-shadow:0 1px 3px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.06);
            border:1px solid rgba(0,0,0,.03);
            margin-bottom:20px;
        }
        .ca-side-card-title{
            font-size:15px;font-weight:700;
            color:var(--text-primary);
            margin:0 0 16px;
            display:flex;align-items:center;gap:8px;
        }
        .ca-side-card-title i{
            color:var(--primary-color);
            font-size:16px;
        }
        .ca-side-list{
            list-style:none;
            padding:0;margin:0;
        }
        .ca-side-list li{
            display:flex;align-items:flex-start;gap:10px;
            padding:10px 0;
            font-size:13px;color:var(--text-secondary);
            line-height:1.6;
            border-bottom:1px dashed var(--border-light);
        }
        .ca-side-list li:last-child{border-bottom:none;}
        .ca-side-list li i{
            color:var(--primary-light);
            font-size:14px;
            margin-top:3px;flex-shrink:0;
        }
        .ca-side-tip{
            background:linear-gradient(135deg,#fef3c7,#fde68a);
            border-radius:12px;
            padding:14px 16px;
            margin-bottom:14px;
        }
        .ca-side-tip:last-child{margin-bottom:0;}
        .ca-side-tip-title{
            font-size:13px;font-weight:600;
            color:#92400e;
            display:flex;align-items:center;gap:6px;
            margin-bottom:4px;
        }
        .ca-side-tip-text{
            font-size:12px;color:#78350f;line-height:1.6;
        }

        /* ===== 审核提示条 ===== */
        .ca-notice{
            background:linear-gradient(135deg,#fff7ed,#ffedd5);
            border:1.5px solid #fed7aa;
            color:#9a3412;
            padding:14px 18px;
            border-radius:12px;
            font-size:13px;
            margin-bottom:20px;
            display:flex;align-items:center;gap:10px;
        }
        .ca-notice i{font-size:16px;flex-shrink:0;}

        /* ===== 登录提示 ===== */
        .login-tip{
            padding:60px 20px;
            text-align:center;
            color:var(--text-muted);
        }
        .login-tip .btn{
            display:inline-block;
            margin-top:16px;
            padding:12px 36px;
            border-radius:12px;
            background:linear-gradient(135deg,#4f46e5,#7c3aed);
            color:#fff;
            text-decoration:none;
            font-size:14px;font-weight:600;
            transition:all .3s;
            box-shadow:0 4px 14px rgba(79,70,229,.3);
        }
        .login-tip .btn:hover{
            transform:translateY(-2px);
            box-shadow:0 6px 20px rgba(79,70,229,.4);
        }
/* Toast 容器（右上角） */
#toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    max-width: 420px;
    width: 100%;
    pointer-events: none;
}

#toast-container .toast-item {
    pointer-events: auto;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius-sm);
    padding: 14px 20px;
    box-shadow: 0 12px 40px -8px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.3) inset;
    border: 1px solid rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
    max-width: 100%;
    animation: toastSlideIn 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
    transform-origin: top right;
    transition: var(--transition);
    color: #1d2129;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 450;
    word-break: break-word;
}

@keyframes toastSlideIn {
    0% {
        opacity: 0;
        transform: translateX(40px) scale(0.94);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

#toast-container .toast-item.removing {
    animation: toastSlideOut 0.25s cubic-bezier(0.4,0,0.2,1) forwards;
}

@keyframes toastSlideOut {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateX(30px) scale(0.94);
    }
}

#toast-container .toast-item .toast-icon {
    flex-shrink: 0;
    font-size: 20px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.04);
}

#toast-container .toast-item .toast-text {
    flex: 1;
    padding: 2px 0;
}

#toast-container .toast-item .toast-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    color: var(--color-text-3);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    padding: 0;
    margin-left: 4px;
}

#toast-container .toast-item .toast-close:hover {
    background: rgba(0,0,0,0.06);
    color: var(--color-text-2);
}

#toast-container .toast-item.type-success {
    border-left: 4px solid var(--color-success);
}

#toast-container .toast-item.type-success .toast-icon {
    color: var(--color-success);
}

#toast-container .toast-item.type-error {
    border-left: 4px solid var(--color-danger);
}

#toast-container .toast-item.type-error .toast-icon {
    color: var(--color-danger);
}

#toast-container .toast-item.type-warning {
    border-left: 4px solid var(--color-warning);
}

#toast-container .toast-item.type-warning .toast-icon {
    color: var(--color-warning);
}

#toast-container .toast-item.type-info {
    border-left: 4px solid var(--color-primary);
}

#toast-container .toast-item.type-info .toast-icon {
    color: var(--color-primary);
}
/* 空提示（站点专有结构 .empty-prompt，视觉对齐参考 .empty） */
.empty-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 24px;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-1);
    transition: var(--transition);
}

.empty-prompt .icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(229,232,240,0.5), rgba(241,245,249,0.2));
    box-shadow: 0 8px 20px -8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
    margin-bottom: 20px;
}

.empty-prompt .icon-wrap i {
    font-size: 42px;
    line-height: 1;
    color: var(--color-text-3);
}

.empty-prompt .empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-1);
    margin-bottom: 8px;
}

.empty-prompt .empty-sub {
    font-size: 14px;
    color: var(--color-text-3);
    font-weight: 400;
}

.empty-prompt .hint-badge {
    margin-top: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 500;
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(22,93,255,0.3);
    text-decoration: none;
    transition: var(--transition);
}

.empty-prompt .hint-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(22,93,255,0.4);
    color: #fff;
}

.empty-prompt .hint-badge i {
    font-size: 15px;
    color: #fff;
}
.pub-wrap{display:grid;grid-template-columns:1fr 340px;gap:20px;}
.pub-main{display:flex;flex-direction:column;gap:16px;}
.pub-side{position:sticky;top:calc(var(--header-height) + 16px);display:flex;flex-direction:column;gap:16px;}
.pub-card{background:#fff;border-radius:16px;padding:22px;box-shadow:0 2px 12px rgba(0,0,0,.05);}
.pub-card #settopList{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.pub-status-card h3{
    justify-content: center;
    margin-bottom: 18px;
}
.pub-status-list{
    display: flex;
    justify-content: center;
    gap:24px;
    flex-wrap: wrap;
    border: 1px solid #e9e9e9;
    background-color: var(--color-bg);
    padding: 20px 0;
    border-radius: 12px;
}
.pub-status-item{
    font-size:13px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    min-width:70px;
}
.pub-status-item .lab{
    color:var(--text-muted);
}
.pub-status-item span:last-child{
    font-weight: 600;
    color: var(--primary-color);
    font-size: 14px;
}
.pub-card h3{font-size:15px;font-weight:700;margin:0 0 16px;color:var(--text-primary);display: flex;gap: 6px;justify-content: flex-start;align-items: end;}
.pub-card h3 i{color:var(--primary-color);}
.pub-card h3 .req{color:#ff4d4f;}
/* 帖子类型 */
.pub-type-bar{display:flex;gap:8px;margin-bottom:18px;}
.pub-type{flex:1;padding:14px;border:2px solid var(--border-color);border-radius:12px;cursor:pointer;text-align:center;transition:all .2s;background:#fff;display:flex;flex-direction:column;align-items:center;gap:6px;}
.pub-type:hover{border-color:var(--primary-light);}
.pub-type.active{border-color:var(--primary-color);background:rgba(22,93,255,0.08);}
.pub-type i{font-size:22px;color:var(--text-muted);}
.pub-type.active i{color:var(--primary-color);}
.pub-type .nm{font-size:13px;font-weight:600;color:var(--text-secondary);}
.pub-type.active .nm{color:var(--primary-color);}
/* 标题输入 */
.pub-title-input{width:100%;padding:14px 16px;border-radius:12px;font-size:18px;font-weight:600;color: #5b5b5b;outline:none;transition:all .2s;font-family:inherit;border: 1px solid #e9e9e9;background-color: var(--color-bg);}
.pub-title-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(22,93,255,.1);}
.pub-title-input::placeholder{color:var(--text-muted);font-weight:400;}
/* 内容编辑器 */
.pub-editor{width:100%;min-height:240px;padding:16px;border: 1px solid #e9e9e9;background-color: var(--color-bg);border-radius:12px;font-size:15px;line-height:1.8;color: #5b5b5b;outline:none;resize:vertical;transition:all .2s;font-family:inherit;}
.pub-editor:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(22,93,255,.1);}
.pub-editor::placeholder{color:var(--text-muted);}
.pub-editor-bar{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap;}
.pub-tool-btn{padding:8px 14px;border:1px solid var(--border-color);border-radius:10px;background:#fff;font-size:13px;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s;}
.pub-tool-btn:hover{border-color:var(--primary-color);color:var(--primary-color);}
.pub-tool-btn.ai{background:linear-gradient(135deg,#6c5ce7,#a29bfe);color:#fff;border:none;}
.pub-tool-btn.ai:hover{opacity:.9;}
.pub-char-count{margin-left:auto;font-size:12px;color:var(--text-muted);}
/* 图片网格 */
.pub-img-grid{display:grid;grid-template-columns: repeat(9,1fr);gap:10px;margin-top:12px;}
.pub-img-item{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#f5f5f7;}
.pub-img-item img{width:100%;height:100%;object-fit:cover;}
.pub-img-item .del{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;}
.pub-img-add{aspect-ratio:1;border:2px dashed var(--border-color);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);gap:6px;transition:all .2s;background:#fafafa;}
.pub-img-add:hover{border-color:var(--primary-color);color:var(--primary-color);}
.pub-img-add i{font-size:28px;}
.pub-img-add span{font-size:12px;}
/* 视频 */
.pub-video-box{margin-top:12px;}
.pub-video-preview{position:relative;border-radius:12px;overflow:hidden;background:#000;max-width:400px;}
.pub-video-preview video{width:100%;display:block;}
.pub-video-preview .del{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;cursor:pointer;}
.pub-video-upload{border:2px dashed var(--border-color);border-radius:12px;padding:30px;text-align:center;cursor:pointer;color:var(--text-muted);transition:all .2s;}
.pub-video-upload:hover{border-color:var(--primary-color);color:var(--primary-color);}
/* 圈子选择器 */
.pub-circle-picked{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border-color);border-radius:12px;cursor:pointer;transition:all .2s;}
.pub-circle-picked:hover{border-color:var(--primary-color);}
.pub-circle-picked .cv{width:44px;height:44px;border-radius:10px;overflow:hidden;background:#f5f5f7;flex-shrink:0;}
.pub-circle-picked .cv img{width:100%;height:100%;object-fit:cover;}
.pub-circle-picked .cv .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#ddd;font-size:20px;}
.pub-circle-picked .meta{flex:1;min-width:0;}
.pub-circle-picked .nm{font-size:14px;font-weight:600;color:var(--text-primary);}
.pub-circle-picked .sub{font-size:12px;color:var(--text-muted);margin-top:2px;}
.pub-circle-picked .arrow{color:var(--text-muted);}
.pub-circle-empty{padding:18px;border-radius:12px;text-align:center;cursor:pointer;color: var(--color-primary);transition:all .2s;border: 1px solid #e9e9e9;background-color: var(--color-bg);}
.pub-circle-empty:hover{border-color:var(--primary-color);color:var(--primary-color);}
.pub-circle-empty i{font-size:24px;display:block;margin-bottom:6px;}
/* 话题标签 */
.pub-topic-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.pub-topic-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(22,93,255,0.10);color:var(--primary-color);border-radius:14px;font-size:13px;font-weight:500;}
.pub-topic-tag .x{cursor:pointer;opacity:.6;}
.pub-topic-tag .x:hover{opacity:1;}
.pub-topic-input{width:100%;padding:10px 14px;border-radius:10px;font-size:13px;outline:none;border: 1px solid #e9e9e9;background-color: var(--color-bg);}
.pub-topic-input:focus{border-color:var(--primary-color);}
.pub-topic-suggest{max-height:200px;overflow-y:auto;margin-top:8px;}
.pub-topic-suggest-item{padding:8px 12px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text-secondary);display:flex;align-items:center;gap:6px;}
.pub-topic-suggest-item:hover{background:#f5f5f7;color:var(--primary-color);}
.pub-topic-fixed{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.pub-topic-fixed-item{padding:4px 10px;background:#f5f5f7;border-radius:12px;font-size:12px;color:var(--text-secondary);cursor:pointer;transition:all .2s;}
.pub-topic-fixed-item:hover{background:rgba(22,93,255,0.10);color:var(--primary-color);}
/* 表情选择面板 */
.pub-emoji-panel{display:none;position:absolute;top: 46px;left:0;width: 338px;background:#fff;border:1px solid var(--border-color);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.1);padding:12px;z-index:10;}
.pub-emoji-panel.show{display:block;}
.pub-emoji-panel .emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;height: 138px;overflow-x: hidden;overflow-y: auto;}
.pub-emoji-panel .emoji-item{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;border-radius:8px;transition:all .15s;}
.pub-emoji-panel .emoji-item:hover{background:#f5f5f7;transform:scale(1.2);}
.pub-emoji-tab{display:flex;gap:6px;margin-bottom:10px;border: 1px solid #e9e9e9;background-color: var(--color-bg);padding: 5px;border-radius: 8px;}
.pub-emoji-tab-item{padding:4px 10px;border-radius:8px;font-size:12px;cursor:pointer;color:var(--text-muted);}
.pub-emoji-tab-item.active{background:rgba(22,93,255,0.10);color:var(--primary-color);}
/* 来源下拉选择 */
.pub-source-select{position:relative;}
.pub-source-dropdown{display:none;position:absolute;top: 46px;left:0;width:260px;background:#fff;border:1px solid var(--border-color);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.1);z-index:10;max-height: 216px;overflow-y:auto;}
.pub-source-dropdown.show{display:block;}
.pub-source-item{padding:10px 14px;font-size:13px;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;gap:8px;}
.pub-source-item:hover{background:#f5f5f7;color:var(--primary-color);}
.pub-source-item.selected{background:rgba(22,93,255,0.10);color:var(--primary-color);font-weight:500;}
.pub-source-item i{font-size:14px;}
.pub-source-item.selected i{display:inline-block;}
/* 置顶选项 */
.pub-settop-opt{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:10px;margin-bottom:8px;cursor:pointer;transition:all .2s;border: 1px solid #e9e9e9;background-color: var(--color-bg);}
.pub-settop-opt:hover{border-color:var(--primary-color);}
.pub-settop-opt.selected{border-color: #edc07b;background: antiquewhite;}
.pub-settop-opt .nm{font-size:13px;font-weight:500;color:var(--text-primary);}
.pub-settop-opt .price{font-size:13px;color:#ff6b35;font-weight:600;}
.pub-settop-opt .days{font-size:11px;color:var(--text-muted);}
/* 提交栏 */
.pub-submit-bar{display:flex;align-items:center;gap:12px;padding:18px 22px;background:#fff;border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,.05);position:sticky;bottom:16px;}
.pub-submit-btn{margin-left:auto;padding:12px 36px;border:none;border-radius:12px;background: var(--color-primary);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 14px rgba(22,93,255,.3);}
.pub-submit-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(22,93,255,.4);}
.pub-submit-btn:disabled{background:#ccc;box-shadow:none;cursor:not-allowed;transform:none;}
.pub-draft-hint{font-size:12px;color:var(--text-muted);}
/* 登录提示 */
.pub-login{padding:80px 20px;text-align:center;color:var(--text-muted);}
.pub-login i{font-size:56px;display:block;margin-bottom:16px;}
.pub-login .btn{display:inline-block;margin-top:14px;padding:12px 32px;border-radius:24px;background:var(--primary-color);color:#fff;text-decoration:none;font-size:14px;}
/* 弹窗：圈子选择 */
.pub-modal-mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:9999;align-items:center;justify-content:center;}
.pub-modal-mask.show{display:flex;}
.pub-modal{background:#fff;border-radius:18px;width:560px;max-width:92vw;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;}
.pub-modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border-color);}
.pub-modal-head h4{margin:0;font-size:16px;font-weight:700;}
.pub-modal-head .close{background:none;border:none;font-size:24px;color:var(--text-muted);cursor:pointer;}
.pub-modal-search{padding:14px 22px;border-bottom:1px solid #f5f5f7;}
.pub-modal-search input{width:100%;padding:10px 14px;border:1px solid var(--border-color);border-radius:10px;font-size:14px;outline:none;}
.pub-modal-list{flex:1;overflow-y:auto;padding:10px 22px;}
.pub-modal-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;cursor:pointer;transition:all .2s;}
.pub-modal-item:hover{background:#f5f5f7;}
.pub-modal-item.selected{background:rgba(22,93,255,0.10);}
.pub-modal-item .cv{width:40px;height:40px;border-radius:10px;overflow:hidden;background:#f5f5f7;flex-shrink:0;}
.pub-modal-item .cv img{width:100%;height:100%;object-fit:cover;}
.pub-modal-item .cv .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#ddd;}
.pub-modal-item .meta{flex:1;min-width:0;}
.pub-modal-item .nm{font-size:14px;font-weight:600;color:var(--text-primary);}
.pub-modal-item .sub{font-size:12px;color:var(--text-muted);margin-top:2px;}
.pub-modal-item .badge{font-size:11px;padding:3px 8px;border-radius:10px;}
.pub-modal-item .badge.joined{background:#e8f5e9;color:#34C759;}
.pub-modal-item .badge.paid{background:#fff3e0;color:#ff9500;}
.pub-modal-item .badge.anon{background:#f3e8ff;color:#6c5ce7;}

.agree-page { margin: 0 auto; padding: 20px 0 0px; }
.agree-tabs { display: flex; gap: 8px; background: var(--color-surface); padding: 6px; border-radius: var(--radius-md); margin-bottom: 16px; border: 1px solid var(--color-border-light); box-shadow: var(--shadow-1); }
.agree-tab { flex: 1; text-align: center; padding: 10px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--color-text-3); text-decoration: none; transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.agree-tab:hover { color: var(--color-text-1); background: var(--color-fill-1); }
.agree-tab.active { background: var(--color-primary); color: #fff; }
.agree-page .rich-text strong { color: var(--color-text-1); font-weight: 700; }
.agree-footer { text-align: center; padding: 24px 20px; color: var(--color-text-3); font-size: 13px; line-height: 1.8; }
.agree-footer .btn { margin-top: 12px; }

.pub-comment-login-tip{
    text-align: center;
    padding:36px 20px;
}
.pub-comment-login-tip .login-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}
.pub-comment-login-tip i{
    font-size:42px;
    color: var(--text-muted);
}
.pub-comment-login-tip h3{
    margin:0;
    font-size:16px;
    color:var(--text-primary);
}
.pub-comment-login-tip p{
    margin:0;
    font-size:14px;
    color:var(--text-secondary);
}
.pub-comment-login-tip .login-btn{
    margin-top:8px;
    padding:10px 28px;
    background-color:var(--primary-color);
    border-radius:30px;
    color:#ffffff;
    font-size:14px;
    font-weight:500;
    text-decoration: none;
    transition: 0.2s;
}
.pub-comment-login-tip .login-btn:hover{
    opacity: 0.9;
    transform: translateY(-2px);
}

.quick-entry{display:flex;flex-direction:column;align-items:center;gap:10px;padding: 8px;border-radius:var(--radius-md);text-decoration:none;color:var(--color-text-1);transition:var(--transition);}
.quick-entry:hover{background:var(--color-primary-light-2);transform:translateY(-2px);}
.quick-entry .qe-icon{width:52px;height:52px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;}
.quick-entry .qe-label{font-size:13px;color:var(--color-text-2);}
.qe-blue{background:var(--color-primary);}
.qe-green{background:var(--color-success);}
.qe-orange{background:var(--color-warning);}
.qe-red{background:var(--color-danger);}
.qe-cyan{background:#0ea5e9;}
.qe-indigo{background:#2563eb;}
.qe-teal{background:#14b8a6;}
.qe-gray{background:var(--color-text-3);}
.sticky{ 
    position: sticky;
    top: calc(var(--header-height) + 16px);
}


.load-more{padding: 10px;text-align: center;}
.load-more .load-more-btn{
    color: #858687;
}

/* 我的点赞 - 页面专属样式（基于蓝色设计系统） */
        .uc-hero-flex{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;}
        .uc-hero-title{font-size:22px;font-weight:700;color:var(--color-text-1);margin:0 0 8px;display:flex;align-items:center;gap:10px;}
        .uc-hero-sub{font-size:14px;color: var(--color-text-3);margin:0;line-height:1.6;}
        .uc-hero-count{text-align:right;}
        .uc-hero-num{font-size:36px;font-weight:800;color:var(--color-primary);line-height:1;}
        .uc-hero-lbl{font-size:13px;color:var(--color-text-3);margin-top:4px;}
        
      /* 我的评论 - 页面专属样式（基于蓝色设计系统） */
 
 
 
        .uc-hero-stat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 28px;background:var(--color-primary-light);border-radius:var(--radius-md);}
        .uc-hero-num{font-size:30px;font-weight:800;color:var(--color-primary);line-height:1;}
        .uc-hero-lbl{font-size:13px;color:var(--color-text-3);}
        .cmt-post-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px dashed var(--color-border-light);}
        .cmt-circle-ic{width:44px;height:44px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;background:var(--color-fill-2);display:flex;align-items:center;justify-content:center;color:var(--color-text-3);font-size:18px;}
        .cmt-circle-ic img{width:100%;height:100%;object-fit:cover;}
        .cmt-meta{flex:1;min-width:0;}
        .cmt-c-name{font-size:14px;font-weight:600;color:var(--color-text-1);}
        .cmt-c-sub{font-size:12px;color:var(--color-text-3);display:flex;gap:12px;margin-top:4px;}
        .cmt-c-sub span{display:inline-flex;align-items:center;gap:4px;}
        .cmt-preview{background:var(--color-fill-1);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:14px;border-left:3px solid var(--color-primary);}
        .cmt-p-title{font-size:14px;font-weight:500;color:var(--color-text-2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
        .cmt-body{display:flex;gap:14px;align-items:flex-start;}
        .cmt-content{flex:1;min-width:0;}
        .cmt-user-line{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px;flex-wrap:wrap;}
        .cmt-u-name{font-weight:600;color:var(--color-text-1);font-size:14px;}
        .cmt-u-time{color:var(--color-text-3);font-size:12px;display:inline-flex;align-items:center;gap:4px;}
        .cmt-text{font-size:14px;color:var(--color-text-2);line-height:1.7;word-break:break-all;}
        .cmt-pic{width:88px;height:88px;border-radius:var(--radius-sm);object-fit:cover;margin-top:10px;}
        .cmt-actions{display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--color-border-light);}
        .cmt-action{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:var(--radius-sm);font-size:12px;color:var(--color-text-3);background:var(--color-fill-1);transition:var(--transition);}
        .cmt-action:hover{background:var(--color-primary-light);color:var(--color-primary);}
        
        /* 我的圈子 - 页面专属样式（基于蓝色设计系统） */
        .hero-stats{display:flex;gap:16px;flex-wrap:wrap;position:relative;z-index:1;}
        .page-banner .add {
            position: absolute;
            right: 32px;
            top: 32px;
            display: inline-flex ;
            align-items: center;
            justify-content: center;
            gap: 6px;
            height: 36px;
            padding: 0 18px;
            font-size: 14px;
            font-weight: 500;
            border-radius: var(--radius-sm);
            background: var(--color-fill-2);
            color: var(--color-text-1);
        }
        .hero-stat{background:rgba(255,255,255,.18);border-radius:var(--radius-md);padding:14px 22px;text-align:center;min-width:110px;border:1px solid rgba(255,255,255,.2);}
        .hero-stat .hs-num{font-size:26px;font-weight:700;line-height:1.1;color:#fff;}
        .hero-stat .hs-lbl{font-size:12px;color:rgba(255,255,255,.85);margin-top:4px;}
        .cc-cover{height:120px;background:linear-gradient(135deg,var(--color-primary-light),var(--color-primary-light-2));overflow:hidden;}
        .cc-cover img{width:100%;height:100%;object-fit:cover;}
        .cc-cover-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--color-primary);font-size:32px;}
        .cc-body{padding:16px 18px 18px;}
        .cc-head{display:flex;gap:12px;margin-bottom:12px;align-items:flex-start;}
        .cc-logo{width:52px;height:52px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;background:var(--color-fill-2);box-shadow:var(--shadow-1);margin-top:-34px;border:3px solid var(--color-surface);}
        .cc-logo img{width:100%;height:100%;object-fit:cover;}
        .cc-info{flex:1;min-width:0;padding-top:4px;}
        .cc-name{font-size:15px;font-weight:600;color:var(--color-text-1);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .cc-tags{display:flex;gap:6px;flex-wrap:wrap;}
        .cc-intro{font-size:13px;color:var(--color-text-3);line-height:1.6;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
        .cc-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--color-text-3);padding-top:14px;border-top:1px solid var(--color-border-light);}
        .cc-stats{display:flex;gap:14px;align-items:center;}
        .cc-stats span{display:inline-flex;align-items:center;gap:4px;}
        .cc-fee{color:var(--color-warning);font-weight:600;}
        .cc-time{font-size:11px;display:inline-flex;align-items:center;gap:3px;}
        
        
        
        .filter-pills { display: flex; gap: 6px; background: var(--color-fill-1); padding: 4px; border-radius: var(--radius-sm); }
        .filter-pills a { padding: 7px 18px; border-radius: var(--radius-xs); font-size: 13px; color: var(--color-text-2); text-decoration: none; transition: var(--transition); }
        .filter-pills a:hover { color: var(--color-text-1); }
        .filter-pills a.active { background: var(--color-primary); color: #fff; }
        .tx-date-group { padding: 14px 20px 6px; font-size: 12px; color: var(--color-text-3); font-weight: 600; }
        .tx-link { text-decoration: none; color: inherit; display: flex; }
        .tx-link:hover { background: var(--color-fill-1); }
        .tx-item .tx-balance { font-size: 12px; color: var(--color-text-3); margin-top: 2px; }
        
        
        
        /* 私信页 - 统一布局 */
.chat-layout {
    display: flex;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
}

/* 左侧：会话列表 */
.chat-sidebar {
    width: 320px;
    border-right: 1px solid var(--color-border-light);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 90px);
}
.chat-search {
    padding: 14px;
    border-bottom: 1px solid var(--color-border-light);
}
.chat-search input {
    width: 100%;
    height: 34px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0 12px;
    font-size: 13px;
    outline: none;
    background: var(--color-fill-1);
}
.chat-search input:focus {
    border-color: var(--color-primary);
    background: #fff;
}
.chat-list {
    flex: 1;
    overflow-y: auto;
}
.chat-list .empty-prompt {
    padding: 40px 20px;
    text-align: center;
}
.chat-list .empty-prompt .icon-wrap {
    font-size: 48px;
    color: var(--color-text-4);
    margin-bottom: 12px;
}
.chat-list .empty-prompt .empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-1);
}
.chat-list .empty-prompt .empty-sub {
    font-size: 13px;
    color: var(--color-text-3);
}

.chat-conv-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--color-border-light);
    transition: var(--transition);
}
.chat-conv-item:last-child {
    border-bottom: none;
}
.chat-conv-item:hover {
    background: var(--color-fill-1);
}
.chat-conv-item.active {
    background: var(--color-primary-light-2);
}
.chat-conv-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-fill-2);
}
.chat-conv-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.chat-conv-avatar .initial {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: var(--color-primary);
}
.chat-conv-avatar .online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: var(--color-success);
    border-radius: 50%;
    border: 2px solid #fff;
}
.chat-conv-meta {
    flex: 1;
    min-width: 0;
}
.chat-conv-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.chat-conv-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-1);
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-conv-time {
    font-size: 11px;
    color: var(--color-text-3);
}
.chat-conv-last {
    font-size: 12px;
    color: var(--color-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-badge {
    min-width: 18px;
    height: 18px;
    background: var(--color-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* 右侧：聊天主区域 */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: calc(100vh - 90px);
}
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border-light);
    background: #fff;
}
.chat-header .back-btn {
    display: none;
}
.chat-header .chat-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.chat-header .chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-fill-2);
    flex-shrink: 0;
}
.chat-header .chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.chat-header .chat-avatar .initial {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    background: var(--color-primary);
}
.chat-header .chat-name {
    font-size: 15px;
    font-weight: 600;
}
.chat-header .chat-status {
    font-size: 12px;
    color: var(--color-success);
}
.chat-header .chat-status.offline {
    color: var(--color-text-3);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    background: var(--color-fill-1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.chat-empty-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-3);
    gap: 10px;
}
.chat-empty-main i {
    font-size: 56px;
    opacity: 0.4;
}

.chat-msg {
    display: flex;
    gap: 10px;
    max-width: 75%;
}
.chat-msg.right {
    flex-direction: row-reverse;
    margin-left: auto;
}
.chat-msg .av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-fill-2);
}
.chat-msg .av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.chat-msg .av .initial {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.chat-msg .bubble-wrap {
    display: flex;
    flex-direction: column;
}
.chat-msg.right .bubble-wrap {
    align-items: flex-end;
}
.chat-msg .msg-time {
    font-size: 11px;
    color: var(--color-text-3);
    margin-bottom: 4px;
}
.chat-msg .bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    max-width: 100%;
}
.chat-msg.left .bubble {
    background: #fff;
    color: var(--color-text-1);
    border-top-left-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.chat-msg.right .bubble {
    background: linear-gradient(135deg, var(--color-primary), #4080ff);
    color: #fff;
    border-top-right-radius: 4px;
}
.chat-msg .bubble.img-bubble {
    padding: 4px;
    background: transparent;
}
.chat-msg .bubble.img-bubble img {
    max-width: 200px;
    border-radius: 10px;
    display: block;
}

.chat-input-area {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--color-border-light);
    background: #fff;
}
.chat-input-area .tool-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-fill-1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-3);
    flex-shrink: 0;
    transition: var(--transition);
}
.chat-input-area .tool-btn:hover {
    background: var(--color-fill-2);
    color: var(--color-primary);
}
.chat-input-area textarea {
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    padding: 10px 16px;
    font-size: 14px;
    outline: none;
    resize: none;
    min-height: 36px;
    max-height: 120px;
    line-height: 1.5;
    font-family: inherit;
    transition: all 0.2s;
}
.chat-input-area textarea:focus {
    border-color: var(--color-primary);
}
.chat-input-area textarea:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.chat-input-area .send-btn {
    padding: 8px 20px;
    border-radius: 18px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition);
}
.chat-input-area .send-btn:hover {
    background: var(--color-primary-hover);
}
.chat-input-area .send-btn:disabled {
    background: var(--color-border-dark);
    cursor: not-allowed;
}