/* ============================================================================
   manju-ui.css —— 剧浪 全站统一设计系统
   ----------------------------------------------------------------------------
   依据：2026-09-24_manju_全页面重设计_架构方案.md §2/§3/§2.5
   用途：全站唯一 token 源 + Element Plus 覆盖 + 通用组件类 + 断点规则。
   约定：所有组件类统一前缀 mj-；全部用 --mj-* token 实现。
   部署：位于 /public/assets/css/manju-ui.css（与 element-plus.css 同级）。
   兜底：每页 <style> 顶部内联一份最小 :root token 块（§2.4）。
   注意：本文件仅承载「token + EP 覆盖 + 通用组件类 + 断点」，各页业务私有样式
         仍留在页内 <style>，不搬入本文件，避免污染与冲突。
   ============================================================================ */

/* ============================================================================
   §2.1 设计 Token（亮色默认，全站内联或依赖本 css 均有）
   ============================================================================ */
:root {
  /* ── 品牌色 ── */
  --mj-primary:#6366f1;          /* indigo 主操作/链接/选中 */
  --mj-primary-strong:#4f46e5;   /* hover/按压 */
  --mj-primary-soft:rgba(99,102,241,.10); /* 选中背景/浅填充 */
  --mj-brand:#7c3aed;            /* violet 渐变收尾/强调端 */
  --mj-accent:#22d3ee;           /* cyan 辅助强调/科技点缀 */
  --mj-accent-strong:#06b6d4;
  --mj-accent-soft:rgba(34,211,238,.12);
  --mj-grad-brand:linear-gradient(135deg,#6366f1,#7c3aed); /* 主渐变：框架/主 CTA */
  --mj-grad-hot:linear-gradient(135deg,#6366f1,#4f46e5);   /* 收益热渐变（QA B1-1 统一主色）：分佣/收益/创作高亮 */

  /* ── 语义色 ── */
  --mj-success:#10b981; --mj-warning:#f59e0b;
  --mj-danger:#ef4444;  --mj-info:#64748b;

  /* ── 中性色阶 ── */
  --mj-bg:#f4f6fb;       /* 全局背景 */
  --mj-bg-card:#ffffff;  /* 卡片/面板 */
  --mj-bg-sub:#f7f8fc;   /* 次级填充/表头/分隔 */
  --mj-bg-sidebar:#171b33;/* 侧边栏深紫（主理人拍板） */
  --mj-border:#e5e8f0;  --mj-border-strong:#d4d8e6;
  --mj-text:#1f2333;    --mj-text-2:#6b7280;    --mj-text-3:#9ca3af;

  /* ── 圆角 ── */
  --mj-radius:12px;  --mj-radius-sm:8px;  --mj-radius-lg:16px;  --mj-radius-pill:999px;

  /* ── 间距（8px 基线）── */
  --mj-space-1:4px; --mj-space-2:8px; --mj-space-3:12px;
  --mj-space-4:16px;--mj-space-5:24px;--mj-space-6:32px;

  /* ── 字号 ── */
  --mj-font-size-xs:12px; --mj-font-size-sm:13px; --mj-font-size-base:14px;
  --mj-font-size-md:16px; --mj-font-size-lg:20px; --mj-font-size-xl:24px;

  /* ── 阴影（2 台阶）── */
  --mj-shadow:0 1px 3px rgba(15,23,42,.06);
  --mj-shadow-md:0 6px 20px rgba(15,23,42,.08);

  /* ── 尺寸常量 ── */
  --mj-sidebar-w:220px;  --mj-sidebar-w-md:190px;  --mj-topbar-h:60px;
  --mj-touch:44px;

  /* ── 字体 ── */
  --mj-font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}

/* ============================================================================
   §2.2 深色主题（营销/展示页用：<html data-theme="dark"> 触发）
   ============================================================================ */
[data-theme="dark"]{
  --mj-bg:#0f1225; --mj-bg-card:#171b33; --mj-bg-sub:#1d2240;
  --mj-bg-sidebar:#0b0e1f;
  --mj-border:rgba(255,255,255,.08); --mj-border-strong:rgba(255,255,255,.14);
  --mj-text:#e8eaf6; --mj-text-2:#a5a9c2; --mj-text-3:#6b7090;
  --mj-shadow:0 1px 3px rgba(0,0,0,.4); --mj-shadow-md:0 6px 20px rgba(0,0,0,.45);
  /* 深色下强调色增强以保对比度 */
  --mj-primary-soft:rgba(99,102,241,.20); --mj-accent-soft:rgba(34,211,238,.18);
}

/* ============================================================================
   §2.5 断点常量（集中定义，媒体查询内禁用魔法数字）
   ============================================================================ */
:root{
  --mj-bp-lg:1200px; --mj-bp-md:992px; --mj-bp-sm:768px; --mj-bp-xs:480px;
}

/* ============================================================================
   §2.3 Element Plus 覆盖（整体对齐，避免逐页改组件）
   ============================================================================ */
:root{
  --el-color-primary:#6366f1;      --el-color-primary-light-3:#8a93f5;
  --el-color-primary-light-5:#aab1f8; --el-color-primary-light-7:#cbd0fb;
  --el-color-primary-light-8:#dcdffc; --el-color-primary-light-9:#eef0fe;
  --el-color-primary-dark-2:#4f46e5;
  --el-color-success:#10b981; --el-color-warning:#f59e0b;
  --el-color-danger:#ef4444;  --el-color-info:#64748b;
  --el-border-radius-base:8px; --el-border-radius-small:6px;
  --el-font-size-base:14px;
  --el-box-shadow:var(--mj-shadow-md);
}

/* ============================================================================
   §3.1 骨架四件套
   ============================================================================ */
.mj-app-shell{ display:flex; min-height:100vh; }
.mj-sidebar{ width:var(--mj-sidebar-w); flex-shrink:0; background:var(--mj-bg-sidebar); color:#fff; }
.mj-topbar{ height:var(--mj-topbar-h); background:var(--mj-bg-card); border-bottom:1px solid var(--mj-border); box-shadow:var(--mj-shadow); position:sticky; top:0; z-index:50; display:flex; align-items:center; padding:0 var(--mj-space-5); }
.mj-content-area{ padding:var(--mj-space-5); background:var(--mj-bg); overflow-x:hidden; flex:1; }

/* ============================================================================
   §3.2 按钮（触屏基准 ≥44px）
   ============================================================================ */
.mj-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:var(--mj-touch); padding:0 var(--mj-space-5); border-radius:var(--mj-radius-sm); font-size:var(--mj-font-size-base); font-weight:500; border:1px solid var(--mj-border); background:var(--mj-bg-card); color:var(--mj-text); cursor:pointer; transition:all .2s; }
.mj-btn:hover{ border-color:var(--mj-primary); color:var(--mj-primary); }
.mj-btn:disabled{ opacity:.5; cursor:not-allowed; }
.mj-btn-primary{ background:var(--mj-grad-brand); border:none; color:#fff; }
.mj-btn-primary:hover{ box-shadow:0 6px 16px rgba(99,102,241,.35); transform:translateY(-1px); color:#fff; }
.mj-btn-ghost{ background:transparent; border:1px solid var(--mj-border-strong); color:var(--mj-text-2); }
.mj-btn-ghost:hover{ border-color:var(--mj-primary); color:var(--mj-primary); }
.mj-btn-danger{ background:var(--mj-danger); border:none; color:#fff; }
.mj-btn-sm{ min-height:36px; padding:0 var(--mj-space-4); font-size:var(--mj-font-size-sm); }
.mj-btn-lg{ min-height:48px; padding:0 var(--mj-space-6); font-size:var(--mj-font-size-md); }
.mj-btn-block{ width:100%; }

/* ============================================================================
   §3.3 卡片
   ============================================================================ */
.mj-card{ background:var(--mj-bg-card); border:1px solid var(--mj-border); border-radius:var(--mj-radius); box-shadow:var(--mj-shadow); }
.mj-card-header{ display:flex; align-items:center; justify-content:space-between; padding:var(--mj-space-4) var(--mj-space-5); border-bottom:1px solid var(--mj-border); }
.mj-card-body{ padding:var(--mj-space-4); }

/* ============================================================================
   §3.4 统计卡
   ============================================================================ */
.mj-stat{ background:var(--mj-bg-card); border:1px solid var(--mj-border); border-radius:var(--mj-radius); box-shadow:var(--mj-shadow); padding:var(--mj-space-5); display:flex; flex-direction:column; }
.mj-stat-num{ font-size:26px; font-weight:700; margin:var(--mj-space-2) 0; }
.mj-stat-label{ color:var(--mj-text-3); font-size:var(--mj-font-size-sm); }
.mj-stat-icon{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.mj-stat.mj-grad-brand{ background:var(--mj-grad-brand); color:#fff; }
.mj-stat.mj-grad-brand .mj-stat-label{ color:rgba(255,255,255,.85); }

/* ============================================================================
   §3.5 表格（横滚 + 粘性首列 + 卡片化降级）
   ============================================================================ */
.mj-table-wrap{ overflow-x:auto; border-radius:var(--mj-radius); }
.mj-table{ width:100%; border-collapse:collapse; min-width:720px; }
.mj-table th,.mj-table td{ padding:12px 16px; text-align:left; font-size:var(--mj-font-size-base); border-bottom:1px solid var(--mj-border); }
.mj-table th{ background:var(--mj-bg-sub); color:var(--mj-text-2); font-weight:600; font-size:var(--mj-font-size-sm); }
.mj-table tr:hover td{ background:var(--mj-primary-soft); }
/* 粘性首列：保持上下文（通常为名称/操作列） */
.mj-table th:first-child,.mj-table td:first-child{ position:sticky; left:0; background:var(--mj-bg-card); box-shadow:1px 0 0 var(--mj-border); }
/* 行 hover 时粘性首列保持不透明，避免透出下层内容 */
.mj-table tr:hover th:first-child,.mj-table tr:hover td:first-child{ background:var(--mj-bg-card); }
.mj-table-cards{ }
@media (max-width:767px){
  .mj-table{ min-width:640px; }
  .mj-table th,.mj-table td{ min-height:44px; padding:14px 16px; }
}
/* 卡片化降级（仅当列 ≤5 且适合竖排时由页面按需加 .mj-table-cards） */
@media (max-width:767px){
  .mj-table-cards thead{ display:none; }
  .mj-table-cards,.mj-table-cards tbody,.mj-table-cards tr,.mj-table-cards td{ display:block; width:100%; }
  .mj-table-cards tr{ border:1px solid var(--mj-border); border-radius:var(--mj-radius); margin-bottom:var(--mj-space-4); background:var(--mj-bg-card); }
  .mj-table-cards td{ position:relative; padding-left:42%; text-align:right; border-bottom:1px solid var(--mj-border); min-height:44px; display:flex; align-items:center; justify-content:space-between; }
  .mj-table-cards td:before{ content:attr(data-label); position:relative; font-weight:600; color:var(--mj-text-2); text-align:left; }
  .mj-table-cards td:first-child{ position:static; box-shadow:none; }
  .mj-table-cards td:last-child{ border-bottom:none; }
}

/* ============================================================================
   §3.6 表单 / 弹窗 / 栅格 / 工具
   ============================================================================ */
.mj-form{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--mj-space-4); }
.mj-form-item{ display:flex; flex-direction:column; gap:6px; }
.mj-field-label{ font-size:var(--mj-font-size-sm); color:var(--mj-text); font-weight:500; }
.mj-form input,.mj-form select,.mj-form textarea,.mj-field-label{ }
.mj-form .el-input__inner,.mj-form input,.mj-form select,.mj-form textarea{ min-height:40px; }

/* 弹窗：桌面居中 / ≤767 底部弹层 */
.mj-dialog{ width:560px; max-width:90vw; max-height:90vh; border-radius:var(--mj-radius-lg); background:var(--mj-bg-card); }
.mj-dialog-mask{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:2000; }
@media (max-width:767px){
  .mj-dialog{ width:100%; max-width:100%; border-radius:16px 16px 0 0; max-height:90vh; position:fixed; bottom:0; left:0; }
  .mj-dialog-mask{ align-items:flex-end; }
}
/* Element Plus 弹窗底部弹层覆盖 */
@media (max-width:767px){
  .el-dialog{ width:100% !important; max-width:100% !important; border-radius:16px 16px 0 0 !important; max-height:90vh; margin:0 auto 0 !important; }
  .el-dialog.is-fullscreen{ border-radius:0 !important; }
}

/* 栅格：自动按断点降列（1200→4 / 992→3 / 768→2 / 480→1） */
.mj-grid-2,.mj-grid-3,.mj-grid-4{ display:grid; gap:var(--mj-space-4); }
.mj-grid-2{ grid-template-columns:repeat(2,1fr); }
.mj-grid-3{ grid-template-columns:repeat(3,1fr); }
.mj-grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1200px){ .mj-grid-4{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:992px){ .mj-grid-4{ grid-template-columns:repeat(2,1fr); } .mj-grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px){ .mj-grid-4,.mj-grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .mj-grid-4,.mj-grid-3,.mj-grid-2{ grid-template-columns:1fr; } }

/* 标签 / 徽标 */
.mj-tag{ display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:var(--mj-radius-pill); font-size:var(--mj-font-size-xs); font-weight:500; }
.mj-tag-success{ background:rgba(16,185,129,.12); color:var(--mj-success); }
.mj-tag-warning{ background:rgba(245,158,11,.12); color:var(--mj-warning); }
.mj-tag-danger{ background:rgba(239,68,68,.12); color:var(--mj-danger); }
.mj-tag-info{ background:rgba(100,116,139,.12); color:var(--mj-info); }
.mj-tag-primary{ background:var(--mj-primary-soft); color:var(--mj-primary); }
.mj-badge{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--mj-danger); }

/* 骨架工具类 */
.mj-page-title{ font-size:var(--mj-font-size-lg); font-weight:700; margin-bottom:var(--mj-space-5); display:flex; align-items:center; justify-content:space-between; gap:var(--mj-space-3); flex-wrap:wrap; }
.mj-toolbar{ display:flex; gap:var(--mj-space-3); flex-wrap:wrap; align-items:center; margin-bottom:var(--mj-space-4); }
.mj-filter-bar{ display:flex; gap:var(--mj-space-3); flex-wrap:wrap; align-items:center; margin-bottom:var(--mj-space-4); }
.mj-pager{ display:flex; justify-content:flex-end; margin-top:var(--mj-space-4); }
.mj-empty{ color:var(--mj-text-3); text-align:center; padding:40px 0; }

/* 渐变工具类 */
.mj-grad-brand{ background:var(--mj-grad-brand); }
.mj-grad-hot{ background:var(--mj-grad-hot); }
.mj-grad-text{ -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* 长表单页移动端底部吸底操作条 */
.mj-sticky-footer{ position:sticky; bottom:0; background:var(--mj-bg-card); border-top:1px solid var(--mj-border); padding:var(--mj-space-4); display:flex; justify-content:flex-end; gap:var(--mj-space-3); padding-bottom:calc(var(--mj-space-4) + env(safe-area-inset-bottom)); z-index:40; }

/* ============================================================================
   §3.7 移动抽屉（复用 index 既有模式，全局归一）
   ============================================================================ */
.mj-hamburger{ min-width:44px; min-height:44px; display:none; align-items:center; justify-content:center; font-size:20px; background:transparent; border:none; cursor:pointer; }
@media (max-width:768px){
  .mj-hamburger{ display:inline-flex; }
  .mj-sidebar{ width:0!important; overflow:hidden; position:fixed; z-index:1000; top:0;bottom:0;left:0;height:100%;transition:width .3s; }
  .mj-sidebar-open .mj-sidebar{ width:var(--mj-sidebar-w-md); overflow-y:auto; }
  body.mj-sidebar-open{ overflow:hidden; }
  .mj-sidebar-mask{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:999; }
  body.mj-sidebar-open .mj-sidebar-mask{ display:block; }
}

/* ============================================================================
   断点通用响应式（兜底：内容区触屏、横向溢出防护）
   ============================================================================ */
@media (max-width:992px){ .mj-sidebar{ width:var(--mj-sidebar-w-md); } }
@media (max-width:480px){ .mj-topbar{ padding:0 var(--mj-space-3); } }

/* 统一字体回退：页面未设字体时使用设计系统字体 */
body{ font-family:var(--mj-font); }