/* ============================================================
   content-premium.css — 内容区换肤层（Nebula 极光 · 内容篇）

   加载顺序：style.css → design-system.css → shell-premium.css → 本文件（最后）
   → 同等特异性下本文件胜出。

   ⚠️ 设计定位（改这个文件前必读）
   现有体系已经是「白卡 + 靛蓝渐变 + 柔阴影」：--bg-card 本就是 #fff、
   --radius-lg 本就是 16px、.stat-value 本就是渐变文字、.btn-primary 本就是
   渐变+光晕。**任何"再白一点 / 再圆一点 / 再加个渐变"的写法都是在复刻它，
   肉眼必然无差别。**
   本层的差异化手法只有四条，改的时候必须落在其中：
     ① 层次：阴影拆成「接触层 + 环境层」双层，卡片真正浮起（而非单层淡影）
     ② 收敛：大面积渐变 → 收敛为"品牌只点亮关键处"，表面回归中性
     ③ 质感：卡片顶沿一道 inset 高光，像被光掠过（零布局成本）
     ④ 节奏：表格用斑马纹 + 悬停左侧品牌竖条，制造行级可读性

   铁律：
   1. **只改「表现」，绝不改「布局」**：主选择器（非伪元素）禁止出现
      display / position / width / height / margin / padding / flex / grid /
      overflow / float / clear / z-index / top / left / right / bottom。
      只动 背景 / 文字色 / 描边 / 圆角 / 阴影 / 字重 / 字距 / 字形 / 过渡 /
      transform（仅 hover 抬升）/ filter。
      → transform 会创建 containing block，内部若有 position:fixed 弹层会错位，
        因此**只对 .stat-card 与 .btn 用，绝不用于 .card**（卡片里最可能有浮层）。
      → 伪元素（::before/::after）是绝对定位的装饰层，允许 position/inset/
        height，不影响主文档流。
   2. **零 JS 改动、零功能改动**。一键回退 = 删掉 index.html 那一行 <link>。
   3. **颜色即语义的类，一律不碰**（改了就是改信息，不是换肤）：
      .tt-* / .timetable-* / .mant-tt-* / .presched-* / .unavail-* /
      .mini-grid* / .conflict-item.hard|soft / .status-dot / .wizard-step /
      .sched-mode-pill / .switch / .ds-badge-* / .ds-tone-* / .btn-danger /
      .btn-warning
      这些承载「课程 / 锁定 / 冲突 / 单双周 / 步骤态 / 严重级 / 危险操作」语义。
   4. **令牌不污染**：自有变量一律 `--cp-*` 且写在本文件 :root。
   5. **作用域**：内容区挂 `.main-content`；模态框在 main 之外，单独挂
      `#modal-overlay`。教务域 ac2-* 由 academic.js 运行时注入 <style>，
      加载更晚，覆盖需 `body .ac2-xxx` 提权（本轮未覆盖，留作后续精修）。
   ============================================================ */

:root {
  /* ── 表面 ── */
  --cp-surface: #ffffff;
  --cp-surface-2: #fafbfd;
  --cp-canvas: #ffffff;                    /* #1181 画布底色：皮肤层可覆盖 */
  --cp-hi: rgba(255, 255, 255, .9);        /* 顶沿高光 */
  --cp-hair: rgba(15, 23, 42, .10);
  --cp-hair-strong: rgba(15, 23, 42, .16);

  /* ── 文字三级 ── */
  --cp-text: #0b1220;
  --cp-text-2: #475569;
  --cp-text-3: #94a3b8;

  /* ── 品牌（与 shell-premium 同源：靛蓝 → 紫 → 天青） ── */
  --cp-brand: #4f46e5;
  --cp-brand-2: #7c6cf6;
  --cp-aurora: linear-gradient(100deg, #6366f1 0%, #8b5cf6 52%, #38bdf8 100%);
  --cp-ring: rgba(79, 70, 229, .18);
  --cp-tint: rgba(99, 102, 241, .06);

  /* ── 圆角 ── */
  --cp-r-md: 10px;
  --cp-r-lg: 16px;

  /* ── 阴影：接触层 + 环境层 双层分离，卡片才真正"浮"起来 ── */
  --cp-sh-1: 0 1px 1px rgba(15, 23, 42, .03), 0 2px 6px -2px rgba(15, 23, 42, .07);
  --cp-sh-2: 0 2px 4px -2px rgba(15, 23, 42, .06), 0 14px 30px -12px rgba(15, 23, 42, .20);
  --cp-sh-3: 0 10px 20px -8px rgba(15, 23, 42, .14), 0 40px 70px -20px rgba(15, 23, 42, .30);
  --cp-sh-brand: 0 2px 4px -2px rgba(79, 70, 229, .20), 0 16px 34px -14px rgba(79, 70, 229, .45);
}

/* ═══════════════════════════════════════════════════════════
   1. 画布：极淡网格 + 双极光（①层次 ②收敛）
   ═══════════════════════════════════════════════════════════ */
/* 用户要求：画布纯白，不要网格/极光装饰。层次交给卡片 hairline 描边 + 双层阴影承担。 */
.main-content {
  color: var(--cp-text);
  background-color: var(--cp-canvas, #ffffff);
}

/* ═══════════════════════════════════════════════════════════
   2. 版式：只调色与字距，绝不动字号字重（动了会撑坏布局）
   ═══════════════════════════════════════════════════════════ */
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4 { color: var(--cp-text); letter-spacing: -.01em; }

.main-content .page-title { color: var(--cp-text); letter-spacing: -.02em; }
.main-content .card-header h3 { letter-spacing: .01em; }

/* 数字统一等宽字形：统计值跳动时不再左右抖 */
.main-content .stat-value,
.main-content .stat-num,
.main-content .ds-stat-v { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════
   3. 统计卡：本层差异化最强的一块（原为纯白卡，改为品牌微染底）
   ── 用极淡品牌渐变底，而不是加深色：内部文字多为 --text-light，
      深色底会让它们糊掉，渐变浅底则零可读性问题。
   ═══════════════════════════════════════════════════════════ */
.main-content .stat-card {
  background: linear-gradient(158deg, #f2f0ff 0%, #e9efff 46%, #ffffff 100%);
  border: 1px solid rgba(99, 102, 241, .20);
  border-radius: var(--cp-r-lg);
  box-shadow: inset 0 1px 0 var(--cp-hi), var(--cp-sh-1);
}
/* 顶部极光条：原来是 opacity .6 的品牌双色渐，这里拉满并加光晕 */
.main-content .stat-card::before {
  background: var(--cp-aurora);
  opacity: 1;
  box-shadow: 0 0 14px rgba(99, 102, 241, .6);
}
/* 数值本就是渐变文字，这里补一层投影让它"发光" */
.main-content .stat-card .stat-value {
  filter: drop-shadow(0 3px 10px rgba(91, 110, 245, .30));
}
.main-content .stat-card .stat-label { color: var(--cp-text-2); }

.main-content .stat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(99, 102, 241, .38);
  box-shadow: inset 0 1px 0 var(--cp-hi), var(--cp-sh-brand);
}

/* ═══════════════════════════════════════════════════════════
   4. 表面系统：白卡 + 顶沿高光 + 双层阴影（③质感）
   ═══════════════════════════════════════════════════════════ */
/* 白卡真正的可见差异在「边界」：旧 --border-light #eef1f6 几乎是隐形的，
   这里加深到清晰 hairline，整页立刻从"一片白"变成"结构化卡片墙"。
   ⚠️ 顶沿白色 inset 高光在 #fff 卡面上不可见，不要加（只有统计卡的渐变底有效）。 */
.main-content .card,
.main-content .config-card,
.main-content .ds-card {
  background: var(--cp-surface);
  border: 1px solid var(--cp-hair);
  border-radius: var(--cp-r-lg);
  box-shadow: var(--cp-sh-1);
  backdrop-filter: none;      /* 画布已不透明，去掉毛玻璃换取文字锐度 */
  -webkit-backdrop-filter: none;
  transition: box-shadow .22s ease, border-color .22s ease;
}
.main-content .card:hover,
.main-content .config-card:hover,
.main-content .ds-card:hover {
  border-color: var(--cp-hair-strong);
  box-shadow: var(--cp-sh-2);
}

/* 卡片头：左端一道品牌渐染，把"标题区"从整块白里拎出来。
   ⚠️ card 有 padding:22px，card-header 是块内独立色块、并非贴顶，
      因此四角统一小圆角，绝不能用「上圆下直」的贴顶圆角。 */
.main-content .card-header {
  border-bottom: 1px solid var(--cp-hair);
  border-radius: 10px;
  background: linear-gradient(90deg,
    rgba(99, 102, 241, .085) 0%,
    rgba(139, 92, 246, .04) 30%,
    transparent 66%);
}
.main-content .ds-card-hd,
.main-content .ds-card-ft { border-color: var(--cp-hair); }

/* ═══════════════════════════════════════════════════════════
   5. 数据呈现：表头渐变 + 斑马纹 + 悬停左侧品牌竖条（④节奏）
   （仅通用表；.tt-* / .presched-info-table / .man-info-table 属课表域，排除）
   ═══════════════════════════════════════════════════════════ */
.main-content table.table th,
.main-content table.data-table th,
.main-content table.task-table th,
.main-content table.sync-table th,
.main-content table.research-table th,
.main-content .ds-table th {
  background: linear-gradient(180deg, #fbfcfe 0%, #f0f3f9 100%);
  color: var(--cp-text-2);
  font-weight: 600;
  letter-spacing: .06em;
  border-bottom: 1px solid rgba(99, 102, 241, .28);
}
.main-content table.table td,
.main-content table.data-table td,
.main-content table.task-table td,
.main-content table.sync-table td,
.main-content table.research-table td,
.main-content .ds-table td { border-bottom: 1px solid var(--cp-hair); }

/* 斑马纹（写在 hover 之前，让 hover 能盖住它） */
.main-content table.table tbody tr:nth-child(even),
.main-content table.data-table tbody tr:nth-child(even),
.main-content table.task-table tbody tr:nth-child(even),
.main-content table.sync-table tbody tr:nth-child(even),
.main-content table.research-table tbody tr:nth-child(even) {
  background: rgba(248, 250, 252, .8);
}

/* 悬停：整行淡染 + 首列 3px 品牌竖条（inset 画在 td padding 内，不遮字） */
.main-content table.table tbody tr:hover,
.main-content table.data-table tbody tr:hover,
.main-content table.task-table tbody tr:hover,
.main-content table.sync-table tbody tr:hover,
.main-content table.research-table tbody tr:hover,
.main-content .ds-table tbody tr:hover { background: var(--cp-tint); }

.main-content table.table tbody tr:hover td:first-child,
.main-content table.data-table tbody tr:hover td:first-child,
.main-content table.task-table tbody tr:hover td:first-child,
.main-content table.sync-table tbody tr:hover td:first-child,
.main-content table.research-table tbody tr:hover td:first-child,
.main-content .ds-table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--cp-brand);
}

/* 表格容器四角收圆（.table-container / .ds-table-wrap 是外层滚动壳） */
.main-content .table-container,
.main-content .ds-table-wrap {
  border: 1px solid var(--cp-hair);
  border-radius: var(--cp-r-lg);
  background: var(--cp-surface);
  box-shadow: inset 0 1px 0 var(--cp-hi), var(--cp-sh-1);
}

/* ═══════════════════════════════════════════════════════════
   6. 控件：统一圆角 + 品牌焦点环（键盘可达性）
   ── 只收编 .form-control / .btn / .ds-btn，绝不裸选 input/select
      （裸选会误伤课表格子里那些故意无边框的控件）
   ═══════════════════════════════════════════════════════════ */
.main-content .form-control {
  border: 1px solid var(--cp-hair-strong);
  border-radius: var(--cp-r-md);
  background: #fdfdff;
  color: var(--cp-text);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.main-content .form-control:hover { border-color: var(--cp-brand-2); }
.main-content .form-control:focus {
  border-color: rgba(79, 70, 229, .60);
  box-shadow: 0 0 0 3px var(--cp-ring), inset 0 1px 2px rgba(15, 23, 42, .03);
}

/* 按钮：主按钮从双色渐升级为三段极光 + 内高光 + 彩色光晕 */
.main-content .btn,
.main-content .ds-btn {
  border-radius: var(--cp-r-md);
  letter-spacing: .01em;
}
.main-content .btn:focus-visible,
.main-content .ds-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cp-ring);
}

.main-content .btn-primary {
  background-image: var(--cp-aurora);
  background-size: 180% 100%;
  background-position: 0% 0%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 6px 16px -6px rgba(99, 102, 241, .65);
  transition: box-shadow .2s ease, transform .2s ease, background-position .45s ease;
}
.main-content .btn-primary:hover {
  transform: translateY(-2px);
  background-position: 70% 0%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 12px 26px -8px rgba(99, 102, 241, .78);
}
.main-content .btn-primary:active { transform: translateY(0); }

.main-content .btn-success {
  background-image: linear-gradient(100deg, #059669 0%, #10b981 55%, #34d399 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 16px -6px rgba(16, 185, 129, .62);
}
.main-content .btn-success:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 12px 24px -8px rgba(16, 185, 129, .70);
}

/* 次要按钮：白底 + 明确 hairline，hover 染上品牌色 */
.main-content .btn-default,
.main-content .btn-secondary,
.main-content .btn-outline {
  background: #ffffff;
  background-image: none;
  border: 1px solid var(--cp-hair-strong);
  color: var(--cp-text-2);
}
.main-content .btn-default:hover,
.main-content .btn-secondary:hover,
.main-content .btn-outline:hover {
  border-color: var(--cp-brand-2);
  color: var(--cp-brand);
  background: var(--cp-tint);
}
/* ⚠️ .btn-danger / .btn-warning 是危险操作语义色，一条都不碰 */

/* ═══════════════════════════════════════════════════════════
   7. 空态与提示：更安静，不与数据抢注意力
   ═══════════════════════════════════════════════════════════ */
.main-content .ds-empty-t { color: var(--cp-text); }
.main-content .ds-empty-d { color: var(--cp-text-3); }

/* ═══════════════════════════════════════════════════════════
   8. 模态框（在 .main-content 之外，单独提权）
   ═══════════════════════════════════════════════════════════ */
#modal-overlay { background: rgba(15, 23, 42, .50); }
#modal-overlay .modal {
  background: var(--cp-surface);
  border: 1px solid var(--cp-hair);
  border-radius: 18px;
  box-shadow: var(--cp-sh-3);
}
#modal-overlay .modal-actions { border-top: 1px solid var(--cp-hair); }

/* ═══════════════════════════════════════════════════════════
   9. 滚动条：更细、更淡，hover 才显形
   ═══════════════════════════════════════════════════════════ */
/* 只管内容区与模态框；.sidebar-nav 属壳，归 shell-premium.css 管，不碰 */
.main-content::-webkit-scrollbar-thumb,
#modal-overlay .modal::-webkit-scrollbar-thumb {
  background: #ccd2de;
  border: 2px solid transparent;
  background-clip: content-box;
}
.main-content::-webkit-scrollbar-thumb:hover,
#modal-overlay .modal::-webkit-scrollbar-thumb:hover {
  background: #aeb6c6;
  background-clip: content-box;
}

/* ═══════════════════════════════════════════════════════════
   10. 无障碍：尊重「减少动态效果」系统偏好
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .main-content .card,
  .main-content .stat-card,
  .main-content .config-card,
  .main-content .ds-card,
  .main-content .form-control { transition: none; }
}

/* ═══════════════════════════════════════════════
   11. 教务域 ac2-*（academic.js / portal.js 运行时注入 <style>，加载晚于本文件）
   → 必须用 .main-content 前缀提权才能覆盖。
   只动「表面/边框/圆角/阴影/表头/斑马纹/焦点环」，
   绝不碰语义色类：.ac2-warn / .ac2-ok / .ac2-dgr / .ac2-st / .ac2-bar /
   .ac2-badge / .ac2-tag / .ac2-tip / .ac2-mask
   ═════════════════════════════════════════════ */
.main-content .ac2-card {
  background: var(--cp-surface);
  border: 1px solid var(--cp-hair);
  border-radius: var(--cp-r-lg);
  box-shadow: var(--cp-sh-1);
}
.main-content .ac2-card-h {
  color: var(--cp-text);
  letter-spacing: .01em;
}
/* 表：容器圆角 + 表头渐变 + 斑马纹 + 悬停品牌竖条（与全局 .table 同源） */
.main-content .ac2-tbl {
  border: 1px solid var(--cp-hair);
  border-radius: var(--cp-r-lg);
  box-shadow: inset 0 1px 0 var(--cp-hi), var(--cp-sh-1);
  background: var(--cp-surface);
}
.main-content .ac2-tbl th {
  background: linear-gradient(180deg, #fbfcfe 0%, #f0f3f9 100%);
  color: var(--cp-text-2);
  letter-spacing: .06em;
  border-bottom: 1px solid rgba(99, 102, 241, .28);
}
.main-content .ac2-tbl td { border-bottom: 1px solid var(--cp-hair); }
.main-content .ac2-tbl tbody tr:nth-child(even) { background: rgba(248, 250, 252, .8); }
.main-content .ac2-tbl tbody tr:hover { background: var(--cp-tint); }
.main-content .ac2-tbl tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--cp-brand); }
/* 表单控件：统一圆角 + 品牌焦点环 */
.main-content .ac2-in,
.main-content .ac2-sel,
.main-content .ac2-form input,
.main-content .ac2-form select,
.main-content .ac2-form textarea {
  border: 1px solid var(--cp-hair-strong);
  border-radius: var(--cp-r-md);
  background: #fdfdff;
  color: var(--cp-text);
}
.main-content .ac2-in:focus,
.main-content .ac2-sel:focus,
.main-content .ac2-form input:focus,
.main-content .ac2-form select:focus,
.main-content .ac2-form textarea:focus {
  outline: none;
  border-color: rgba(79, 70, 229, .60);
  box-shadow: 0 0 0 3px var(--cp-ring);
}
/* 按钮：统一圆角 + 焦点环；.pri(天青渐变) / .dgr(危险红) 保留原语义色不动 */
.main-content .ac2-btn { border-radius: var(--cp-r-md); }
.main-content .ac2-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cp-ring); }