/* ===================================================
   mojishe-brand.css — 模极社品牌统一样式
   PRD v1.1 品牌色: 主色 #1D4ED8 (深蓝) | 辅色 #F59E0B (暖橙)
   用于所有子站（Django + SPA + Discourse）
   版本: v2.0 | 2026-05-12
   =================================================== */

:root {
  /* === PRD v1.1 品牌色 === */
  --mj-primary: #1D4ED8;         /* 主色调 — 深蓝 */
  --mj-primary-light: #3B6CE8;   /* 主色亮版 hover/active */
  --mj-primary-dark: #1539A0;    /* 主色暗版 */
  --mj-accent: #F59E0B;          /* 辅色 — 暖橙 */
  --mj-accent-light: #FBBF24;    /* 辅色亮版 */
  --mj-accent-dark: #D97706;     /* 辅色暗版 */

  /* === 中性色 === */
  --mj-dark: #1E293B;            /* 深色背景/文字 */
  --mj-dark-light: #334155;     /* 次深色 */
  --mj-text: #1E293B;            /* 正文 */
  --mj-text-secondary: #64748B;  /* 次级文字 */
  --mj-text-tertiary: #94A3B8;  /* 辅助文字 */
  --mj-bg: #F8FAFC;              /* 页背景 */
  --mj-bg-card: #FFFFFF;         /* 卡片/模块背景 */
  --mj-border: #E2E8F0;          /* 边框 */
  --mj-border-light: #F1F5F9;   /* 浅边框 */

  /* === 功能色 === */
  --mj-success: #10B981;         /* 成功 */
  --mj-warning: #F59E0B;         /* 警告 (复用辅色) */
  --mj-danger: #EF4444;          /* 危险/错误 */
  --mj-info: #3B82F6;            /* 信息 */

  /* === 过渡动画 === */
  --mj-transition: 0.2s ease;
}

/* ===================================================
   品牌Logo
   =================================================== */
.mj-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 18px;
  color: var(--mj-dark);
  text-decoration: none;
  transition: color var(--mj-transition);
}
.mj-logo:hover { color: var(--mj-primary); }
.mj-logo svg { width: 28px; height: 28px; flex-shrink: 0; }

/* ===================================================
   统一页脚
   =================================================== */
.mj-footer {
  background: var(--mj-dark);
  color: rgba(255,255,255,.6);
  padding: 40px 0 32px;
  margin-top: 48px;
  font-size: 13px;
  line-height: 1.6;
}
.mj-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.mj-footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
}
.mj-footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.mj-footer-links a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color var(--mj-transition);
  font-size: 13px;
}
.mj-footer-links a:hover { color: var(--mj-accent); }
.mj-footer-copy { color: rgba(255,255,255,.4); font-size: 12px; }

/* ===================================================
   统一按钮
   =================================================== */
.mj-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--mj-transition);
}
.mj-btn-primary {
  background: var(--mj-primary);
  color: #fff;
}
.mj-btn-primary:hover { background: var(--mj-primary-light); color: #fff; }
.mj-btn-accent {
  background: var(--mj-accent);
  color: #fff;
}
.mj-btn-accent:hover { background: var(--mj-accent-light); color: #fff; }
.mj-btn-outline {
  border: 1px solid var(--mj-primary);
  color: var(--mj-primary);
  background: transparent;
}
.mj-btn-outline:hover { background: var(--mj-primary); color: #fff; }

/* ===================================================
   统一卡片
   =================================================== */
.mj-card {
  background: var(--mj-bg-card);
  border-radius: 8px;
  border: 1px solid var(--mj-border);
  padding: 20px;
  transition: box-shadow var(--mj-transition);
}
.mj-card:hover { box-shadow: 0 2px 12px rgba(29,78,216,.08); }

/* ===================================================
   品牌强调色
   =================================================== */
.mj-highlight { color: var(--mj-primary); }
.mj-accent-color { color: var(--mj-accent); }
.mj-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  background: var(--mj-primary);
  color: #fff;
}
.mj-accent-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  background: var(--mj-accent);
  color: #fff;
}

/* ===================================================
   SPA品牌色覆盖 (!important覆盖旧有内联样式)
   =================================================== */

/* 覆盖 .logo 中的旧红色 #1D4ED8 / 紫色 #595bca */
.header .logo { color: var(--mj-primary) !important; }

/* 覆盖 .nav a.active 中的旧品牌色 */
.nav a.active { color: var(--mj-primary) !important; }

/* 覆盖 .user-avatar 背景色 */
.user-avatar { background: var(--mj-primary) !important; }

/* 覆盖 el-button 旧品牌色内联 style */
.header .el-button--primary,
.el-button[style*="e94560"],
.el-button[style*="595bca"],
.el-button[style*="409eff"] {
  background: var(--mj-primary) !important;
  border-color: var(--mj-primary) !important;
  color: #fff !important;
}

/* 覆盖 .task-tags span 旧背景色 */
.task-tags span {
  background: rgba(29,78,216,.1) !important;
  color: var(--mj-primary) !important;
}

/* KeyStore SPA 品牌色覆盖 */
.mj-primary-bg {
  background: linear-gradient(135deg, var(--mj-dark), var(--mj-dark-light)) !important;
}
.mj-primary-text { color: var(--mj-primary) !important; }

/* Element Plus 品牌色覆盖 */
:root {
  --el-color-primary: #1D4ED8 !important;
  --el-color-primary-light-3: #3B6CE8 !important;
  --el-color-primary-light-5: #7B9CF5 !important;
  --el-color-primary-light-7: #B3C9FB !important;
  --el-color-primary-light-8: #D1DCFC !important;
  --el-color-primary-light-9: #E9EEFE !important;
  --el-color-primary-dark-2: #1539A0 !important;
}

/* 覆盖Element Plus 按钮 */
[class*="el-button--primary"],
button[style*="background"],
.el-button--success,
.el-button--warning,
.el-button--danger {
  --el-button-bg-color: #1D4ED8 !important;
  --el-button-border-color: #1D4ED8 !important;
  --el-button-hover-bg-color: #3B6CE8 !important;
  --el-button-hover-border-color: #3B6CE8 !important;
  --el-button-active-bg-color: #1539A0 !important;
}

/* 覆盖 .header-inner 边框颜色 */
.header { border-bottom-color: var(--mj-primary) !important; }

/* 覆盖搜索框聚焦 */
.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px var(--mj-primary) inset !important;
}

/* 淡彩色标签/徽章背景 */
[class*="tag"], [class*="badge"], [class*="label"] {
  background-color: rgba(29,78,216,.1) !important;
  border-color: rgba(29,78,216,.2) !important;
  color: var(--mj-primary) !important;
}

/* 覆盖搜索按钮、登录按钮等内联样式 */
.header .el-button,
.el-button[style*="background"],
.el-button[style*="color"] {
  background: var(--mj-primary) !important;
  border-color: var(--mj-primary) !important;
  color: #fff !important;
}
.header .el-button.is-text,
.el-button.el-button--text,
.el-button.is-link {
  background: transparent !important;
  color: var(--mj-primary) !important;
}

/* 面包屑链接品牌色 */
.mj-breadcrumb a,
.breadcrumb a,
[class*="breadcrumb"] a {
  color: var(--mj-primary) !important;
}

/* 选中和悬停状态 */
.selected { background: rgba(29,78,216,.1) !important; }
*:hover > [class*="hover"] { color: var(--mj-primary) !important; }
.nav a:hover { color: var(--mj-primary) !important; }

/* 输入框聚焦边框 */
input:focus, .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px var(--mj-primary) inset !important;
}

/* 滑块选中色 */
.el-slider__bar { background: var(--mj-primary) !important; }
.el-slider__button { border-color: var(--mj-primary) !important; }

/* 分页器选中 */
.el-pager li.active { color: var(--mj-primary) !important; }
.el-pager li:hover { color: var(--mj-primary) !important; }

/* 步骤条 */
.el-step__head.is-process { color: var(--mj-primary) !important; border-color: var(--mj-primary) !important; }
.el-step__head.is-finish { color: var(--mj-primary) !important; border-color: var(--mj-primary) !important; }

/* Tab选中色 */
.el-tabs__active-bar { background: var(--mj-primary) !important; }
.el-tabs__item.is-active { color: var(--mj-primary) !important; }
.el-tabs__item:hover { color: var(--mj-primary) !important; }

/* Radio选中色 */
.el-radio__input.is-checked .el-radio__inner { background: var(--mj-primary) !important; border-color: var(--mj-primary) !important; }
.el-radio__input.is-checked+.el-radio__label { color: var(--mj-primary) !important; }

/* Checkbox选中色 */
.el-checkbox__input.is-checked .el-checkbox__inner { background: var(--mj-primary) !important; border-color: var(--mj-primary) !important; }
.el-checkbox__input.is-checked+.el-checkbox__label { color: var(--mj-primary) !important; }

/* 开关色 */
.el-switch.is-checked .el-switch__core { border-color: var(--mj-primary) !important; background: var(--mj-primary) !important; }

/* 进度条色 */
.el-progress-bar__inner { background: var(--mj-primary) !important; }

/* DatePicker选中 */
.el-date-table td.today { color: var(--mj-primary) !important; }
.el-date-table td.current:not(.disabled) span { background: var(--mj-primary) !important; }

/* Tag组件 */
.el-tag--primary { --el-tag-bg-color: rgba(29,78,216,.1) !important; --el-tag-text-color: #1D4ED8 !important; --el-tag-border-color: rgba(29,78,216,.2) !important; }

/* Loading spinner */
.el-loading-spinner .path { stroke: var(--mj-primary) !important; }

/* Notification */
.el-notification { --el-notification-title-color: var(--mj-primary) !important; }

/* 消息提示 */
.el-message--success .el-message__icon { color: var(--mj-primary) !important; }

/* ===================================================
   VIP卡片品牌色
   =================================================== */
.vip-card.popular {
  border-color: var(--mj-accent) !important;
  background: linear-gradient(180deg, #FFFBEB, #fff) !important;
}
.vip-card .buy-btn.primary {
  background: var(--mj-accent) !important;
  color: #fff !important;
}
.vip-card .buy-btn.success {
  background: var(--mj-primary) !important;
  color: #fff !important;
}

/* ===================================================
   mj-nav.js 导航栏品牌色覆盖
   =================================================== */
#mj-nav-root {
  --mj-primary: #1D4ED8 !important;
  --mj-accent: #F59E0B !important;
  --mj-dark: #1E293B !important;
}

/* ===================================================
   全站统一导航 & 排版
   =================================================== */

/* 隐藏各站自身导航（包括.mj-topbar，各站重复的navbar） */
.mj-topbar { display: none !important; }

/* 各站Django的自带导航隐蔽 */
.mj-topbar + nav.navbar { display: none !important; }
body > nav.navbar { display: none !important; }
div.header:not(.mj-unified-header *) { display: none !important; }

/* 内容区增加间距 */
.mj-container { padding: 32px 24px !important; max-width: 1200px !important; margin: 0 auto !important; }
.container { padding: 32px 24px !important; max-width: 1200px !important; }

/* pin的mj-hero banner间距 */
.mj-hero { padding: 48px 24px !important; margin-bottom: 24px !important; }

/* work的面包屑 */
.mj-breadcrumb { padding: 12px 0 4px !important; margin-bottom: 20px !important; }

/* 卡片间距 */
.card { margin-bottom: 20px !important; }
.card-body { padding: 20px !important; }

/* 页脚 */
.mj-footer { padding: 32px 24px !important; margin-top: 48px !important; }

/* work/learn 的面包屑留空 */
nav.mj-breadcrumb { margin-bottom: 24px !important; }

/* learn页面子导航 隐藏 */
.nav.justify-content-center { display: none !important; }
.navbar-expand-lg.navbar-light { margin-bottom: 0 !important; }

/* voice .header——不隐藏voice自己的header，这是AI问答界面的一部分 */
/* voice的.mode-bar 保留 */

/* store SPA header——保留store自己的header，但将颜色对齐 */
.store-page .header { --primary: #1D4ED8 !important; }