/* ===== 全局设计变量 =====
   最常改：主色 --wb-primary、页面背景 --wb-bg、圆角 --wb-radius-*、阴影 --wb-shadow-*。 */
:root {
  --wb-bg: #f4f8fc;
  --wb-surface: #ffffff;
  --wb-surface-soft: linear-gradient(180deg, #fbfdff 0%, #f7fbff 100%);
  --wb-border: #dbe7f3;
  --wb-border-strong: #c6dbf5;
  --wb-text: #0f172a;
  --wb-text-secondary: #475569;
  --wb-text-tertiary: #64748b;
  --wb-primary: #0056D2;
  --wb-primary-soft: #e8f1ff;
  --wb-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.05);
  --wb-shadow-md: 0 12px 30px rgba(15, 23, 42, 0.08);
  --wb-radius-lg: 18px;
  --wb-radius-md: 14px;
  --wb-radius-sm: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
  background:
    radial-gradient(900px 360px at 50% -180px, rgba(0, 86, 210, 0.10), transparent 70%),
    #f5f7fa;
  color: var(--wb-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ===== 页面基础布局 =====
   .page-container 控制整页最大宽度，.top-bar 控制每个页面顶部标题和操作区。 */
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.top-bar h1 {
  font-size: 24px;
  font-weight: 800;
  color: var(--wb-text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-bar h1 i {
  color: var(--wb-primary);
}

/* ===== 通用按钮 =====
   页面里的 .btn、.primary、.light、.danger 都在这里统一换颜色、字号和圆角。 */
.btn {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid #e9ecef;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.btn.small { padding: 6px 14px; font-size: 12px; }
.btn.primary { background: #0056D2; color: #fff; border-color: #0056D2; }
.btn.primary:hover { background: #0045a8; }
.btn.light { background: #f5f7fa; color: #374151; }
.btn.light:hover { background: #e5e7eb; }
.btn.danger { color: #dc2626; border-color: #fecaca; background: #fff; }
.btn.danger:hover { background: #fef2f2; }

/* ===== 通用内容面板 =====
   首页和发布页的白色大卡片、页头说明及内容留白都由这一组规则控制。 */
.publish-content {
  background: var(--wb-surface);
  border-radius: var(--wb-radius-lg);
  box-shadow: var(--wb-shadow-md);
  border: 1px solid var(--wb-border);
  overflow: hidden;
  min-height: 600px;
}

.publish-header {
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--wb-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--wb-surface-soft);
}

.publish-header-left h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  color: var(--wb-text);
}

.publish-header-left p {
  margin: 0;
  font-size: 13px;
  color: var(--wb-text-tertiary);
  line-height: 1.6;
}

.profile-section-body {
  padding: 28px 32px 32px;
  background:
    radial-gradient(680px 220px at 0% 0%, rgba(0, 86, 210, 0.05), rgba(0, 86, 210, 0) 62%),
    linear-gradient(180deg, #f8fbff 0%, #f4f8fc 100%);
}