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

:root {
  /* === 字体 === */
  --mj-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;

  /* === 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 中的旧红色 #e94560 / 紫色 #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;
}

/* ===================================================
   KeyLearn：强制覆盖 Bootstrap navbar-dark 为白底
   =================================================== */

/* 工业学院导航栏白底改造 */
.navbar.navbar-dark.bg-dark {
  background: #fff !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
.navbar.navbar-dark.bg-dark .navbar-brand {
  color: #1D4ED8 !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}
.navbar.navbar-dark.bg-dark .btn-outline-secondary,
.navbar.navbar-dark.bg-dark .btn-outline-light {
  color: #1D4ED8 !important;
  border-color: #1D4ED8 !important;
  background: transparent !important;
}
.navbar.navbar-dark.bg-dark .btn-outline-secondary:hover,
.navbar.navbar-dark.bg-dark .btn-outline-light:hover {
  background: #1D4ED8 !important;
  color: #fff !important;
}
.navbar.navbar-dark.bg-dark .btn {
  border-radius: 6px !important;
  font-size: 13px !important;
  padding: 4px 12px !important;
}

/* 工业学院次要导航条 (类别导航) */
.mj-breadcrumb + .nav.justify-content-center {
  background: #fff !important;
  border-bottom: 1px solid #E2E8F0 !important;
  padding: 8px 0 !important;
}
.mj-breadcrumb + .nav.justify-content-center .nav-link {
  color: #64748B !important;
  font-size: 13px !important;
  padding: 4px 12px !important;
}
.mj-breadcrumb + .nav.justify-content-center .nav-link.active {
  color: #1D4ED8 !important;
  font-weight: 600 !important;
}
.mj-breadcrumb + .nav.justify-content-center .nav-link:hover {
  color: #1D4ED8 !important;
}

/* ===================================================
   KEYVOICE header 改造
   =================================================== */
div.header {
  background: #fff !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

/* ===================================================
   AI智能体页面 header 改造
   =================================================== */
.mode-bar, [class*="mode-bar"], [class*="ModeBar"] {
  background: #fff !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

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

/* ===================================================
   旧 bootstrap 按钮覆盖
   =================================================== */
.btn-primary {
  background-color: #1D4ED8 !important;
  border-color: #1D4ED8 !important;
}
.btn-outline-primary {
  color: #1D4ED8 !important;
  border-color: #1D4ED8 !important;
}
.btn-outline-primary:hover {
  background: #1D4ED8 !important;
  color: #fff !important;
}

/* ===================================================
   全站文字颜色统一
   =================================================== */
a { color: #1D4ED8 !important; }
a:hover { color: #3B6CE8 !important; }

/* ===================================================
   面包屑统一
   =================================================== */
.mj-breadcrumb, [class*="breadcrumb"] {
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
}
.mj-breadcrumb a, [class*="breadcrumb"] a {
  color: #1D4ED8 !important;
}

/* ===================================================
   card 统一
   =================================================== */
.card, [class*="card"] {
  border-radius: 8px !important;
  border-color: #E2E8F0 !important;
}

/* ===================================================
   KEYVOICE 完整品牌色改造
   =================================================== */
/* 顶栏：深色改白色 */
div.header { background: #fff !important; border-bottom: 1px solid #E2E8F0 !important; color: #1E293B !important; box-shadow: 0 1px 3px rgba(0,0,0,.04) !important; }
div.header .brand h1 { color: #1D4ED8 !important; }
div.header .brand span { color: #94A3B8 !important; }
div.header a[href*="返回"] { background: #1D4ED8 !important; color: #fff !important; border: none !important; }
div.header a[href*="返回"]:hover { background: #3B6CE8 !important; }

/* 模式标签 */
.mode-tab { border-color: #E2E8F0 !important; color: #64748B !important; }
.mode-tab.active { background: #1D4ED8 !important; color: #fff !important; border-color: #1D4ED8 !important; }
.mode-tab:hover { border-color: #1D4ED8 !important; color: #1D4ED8 !important; }

/* 侧栏 */
.sidebar { border: 1px solid #E2E8F0 !important; }
.sidebar-top .new-btn { background: #1D4ED8 !important; }
.session-item.active { border-left-color: #1D4ED8 !important; background: #EFF6FF !important; }
.session-item:hover { background: #F8FAFC !important; }

/* 输入框聚焦 */
.input-row input:focus { border-color: #1D4ED8 !important; box-shadow: 0 0 0 3px rgba(29,78,216,.1) !important; }

/* 发送按钮 */
.input-row button { background: #1D4ED8 !important; }

/* AI头像 */
.avatar.ai { background: linear-gradient(135deg, #1D4ED8, #3B6CE8) !important; }
.avatar.user { background: #1E293B !important; }

/* 用户气泡 */
.message.user .bubble { background: #1D4ED8 !important; }
.message.ai .bubble { background: #F8FAFC !important; border-color: #E2E8F0 !important; color: #1E293B !important; }

/* 引用标记 */
.ref-block span { color: #1D4ED8 !important; background: #EFF6FF !important; }

/* 欢迎页建议按钮 */
.welcome-suggest button:hover { border-color: #1D4ED8 !important; color: #1D4ED8 !important; }

/* 智能体广场 */
.agent-btn.active { border-left-color: #1D4ED8 !important; background: #EFF6FF !important; }
.agent-btn .tag { background: #1D4ED8 !important; }
.avatar.ai[style*="linear-gradient"] { background: linear-gradient(135deg, #1D4ED8, #3B6CE8) !important; }

/* 智能体广场侧栏选中 */
.agent-btn.active .icon { background: #EFF6FF !important; }

/* Voice 页面 body 背景保持一致性 */
body:has(div.header div.brand svg) { background: #F8FAFC !important; }

/* 消息气泡中的品牌色链接 */
.bubble a { color: #1D4ED8 !important; }

/* ===================================================
   KeyPin：改造暗色顶栏为白底
   =================================================== */
.mj-topbar { background: #fff !important; border-bottom: 1px solid #E2E8F0 !important; }
.mj-topbar a[href*="/pin/"] { color: #1D4ED8 !important; font-weight: 600 !important; }
.mj-topbar a { color: #64748B !important; }
.mj-topbar a:hover { color: #1D4ED8 !important; }

/* ====================================================
   全站移动端响应式 — 统一覆盖 v2.0
   适用：320-500px 窄屏手机
   ==================================================== */

/* ---- 768px: 平板/大屏手机 ---- */
@media (max-width: 768px) {
  .mj-unified-header > div,
  .header-inner { gap: 8px !important; padding: 0 12px !important; }
  .mj-unified-header a,
  .header .nav a { padding: 6px 8px !important; font-size: 12px !important; }
  .mj-container,
  .main,
  .container { padding: 0 12px !important; }
  .row.g-3 > [class*="col-"] { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; }
  .d-flex.gap-2.flex-wrap { flex-wrap: wrap !important; }
  .d-flex.gap-2.flex-wrap > * { margin-bottom: 4px !important; }
  .detail-panel { padding: 20px !important; border-radius: 0 !important; }
  .detail-panel h2 { font-size: 18px !important; }
  .detail-panel .cur { font-size: 24px !important; }
  .vip-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }
  .mj-hero { padding: 24px 16px !important; }
  .mj-hero h1 { font-size: 22px !important; }
  .banner { padding: 40px 16px 48px !important; }
  .banner h1 { font-size: 28px !important; }
  .banner p { font-size: 14px !important; }
  .stats { gap: 16px !important; }
  .tool-nav { overflow-x: auto !important; white-space: nowrap !important; flex-wrap: nowrap !important; }
  .tool-btn { font-size: 13px !important; padding: 8px 14px !important; }
  .calc-card { max-width: 100% !important; padding: 16px !important; }
  .input-row { flex-direction: column !important; }
}

/* ---- 480px: 小屏手机 ---- */
@media (max-width: 480px) {
  .mj-unified-header a, .header .nav a { font-size: 11px !important; padding: 4px 6px !important; }
  .logo-text { font-size: 15px !important; }
  .header-inner { gap: 4px !important; }
  .row.g-3 > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
  .btn, .btn-sm, [class*="btn-"] { font-size: 12px !important; padding: 6px 12px !important; min-height: 36px !important; }
  input, select, textarea, .form-control { font-size: 14px !important; min-height: 40px !important; }
  .banner { padding: 28px 12px 36px !important; }
  .banner h1 { font-size: 22px !important; }
  .stats { gap: 8px !important; flex-wrap: wrap !important; }
  .stat-item { min-width: 40% !important; }
  .stat-item .num { font-size: 18px !important; }
  .vip-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .vip-card { padding: 16px !important; }
  .vip-card .price { font-size: 22px !important; }
  .vip-card .icon { font-size: 28px !important; }
  .mj-breadcrumb { font-size: 12px !important; padding: 8px 0 !important; }
  .detail-panel h2 { font-size: 16px !important; }
  .detail-panel .cur { font-size: 20px !important; }
  .detail-panel .desc { padding: 12px !important; }
  .btn-bar { flex-direction: column !important; }
  .btn-bar .el-button { width: 100% !important; }
  .search-bar { flex-direction: column !important; }
  .search-bar .el-input { width: 100% !important; }
  .right-popup { right: 8px !important; left: 8px !important; width: auto !important; }
  .tool-btn { font-size: 12px !important; padding: 6px 10px !important; }
  .calc-card label { font-size: 13px !important; }
  .calc-card input, .calc-card select { font-size: 13px !important; padding: 6px 10px !important; }
  .result-box .val { font-size: 20px !important; }
  .calc-btn { width: 100% !important; }
  .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .card { padding: 12px !important; }
  .card h3 { font-size: 14px !important; }
  .section-title { font-size: 16px !important; }
  .tag, .badge { font-size: 10px !important; }
  .mj-unified-header .logo-icon, .header .logo-icon { width: 24px !important; height: 24px !important; font-size: 12px !important; }
  .mj-unified-header a[href*="login"], .mj-unified-header a[href*="register"], .header .btn { font-size: 11px !important; padding: 4px 8px !important; }
}

/* ---- 400px: 超小屏 ---- */
@media (max-width: 400px) {
  .mj-unified-header a, .header .nav a { font-size: 10px !important; padding: 3px 4px !important; }
  .logo-text { font-size: 13px !important; }
  .vip-grid { grid-template-columns: 1fr !important; }
  .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .product-card-title { font-size: 12px !important; }
  .product-card-price .cur { font-size: 16px !important; }
  .banner h1 { font-size: 18px !important; }
}


/* ---- Work: inline-style hero override ---- */
@media (max-width: 768px) {
  div[style*="background:linear-gradient(135deg, #667eea"] { padding: 16px 12px !important; }
  div[style*="background:linear-gradient(135deg, #667eea"] .col-7,
  div[style*="background:linear-gradient(135deg, #667eea"] .col-5 { width: 100% !important; text-align: left !important; }
  div[style*="background:linear-gradient(135deg, #667eea"] .btn { width: 100% !important; }
  div[style*="background:linear-gradient(135deg, #667eea"] .row > div { padding: 4px 0 !important; }
}

/* ---- Work: task card grid inline container ---- */
@media (max-width: 480px) {
  div[style*="max-width:1000px;margin:0 auto 20px"] { padding: 0 8px !important; }
  #taskGrid .col-md-6 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
  #pagination .btn { font-size: 12px !important; padding: 4px 8px !important; }
}

/* ---- 统一Header：内联flex容器（Work/Learn/Pin共用） ---- */
@media (max-width: 768px) {
  div[style*="max-width:1200px;margin:0 auto;display:flex"] {
    padding: 0 10px !important; gap: 8px !important; flex-wrap: wrap !important; height: auto !important; min-height: 44px !important;
  }
  div[style*="max-width:1200px;margin:0 auto;display:flex"] a[style*="padding:6px 14px"] {
    padding: 6px 8px !important; font-size: 12px !important;
  }
  div[style*="display:flex;align-items:center;gap:10px;flex-shrink:0;"] a[style*="padding:5px 14px"] {
    padding: 5px 8px !important; font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  div[style*="max-width:1200px;margin:0 auto;display:flex"] a[style*="padding:6px 14px"] {
    padding: 4px 6px !important; font-size: 11px !important;
  }
  div[style*="display:flex;align-items:center;gap:10px;flex-shrink:0;"] {
    gap: 4px !important;
  }
  div[style*="font-weight:700;font-size:16px;color:#1E293B"] { font-size: 14px !important; }
}

@media (max-width: 400px) {
  div[style*="max-width:1200px;margin:0 auto;display:flex"] a[style*="padding:6px 14px"] {
    padding: 3px 4px !important; font-size: 10px !important;
  }
}

/* ---- Work 任务平台: hover & 字体层级 ---- */
.task-card{cursor:pointer;transition:box-shadow .2s,transform .2s;border:1px solid #E2E8F0;border-radius:12px}
.task-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.1);transform:translateY(-2px);border-color:#BFDBFE}
.task-card .card-title{color:#1E293B;font-size:15px;font-weight:600}
.task-card .card-text{color:#475569;font-size:13px}
.task-card .card-text small{color:#94A3B8;font-size:12px}
.filter-btn{transition:all .2s;cursor:pointer}
.filter-btn.btn-outline-secondary:hover{background:#EFF6FF;color:#1D4ED8;border-color:#2563EB}
.filter-btn.btn-mj-primary:hover{background:#1E40AF;box-shadow:0 2px 4px rgba(29,78,216,.3)}
.btn-light:hover{background:#F1F5F9!important;border-color:#94A3B8!important}
.loading-state{text-align:center;padding:60px 20px;color:#94A3B8;font-size:14px}
.empty-state{text-align:center;padding:60px 20px;color:#94A3B8;font-size:14px}