/**
 * 智慧宫 CSS 样式系统
 *
 * 分区索引:
 * [0] Design Tokens       - :root 变量
 * [1] Reset & Base        - 重置与基础样式
 * [2] Layout              - 布局 (app-layout, main-content)
 * [3] Navigation          - 导航栏 (gh-nav, breadcrumb)
 * [4] Components          - 基础组件 (btn, card, modal, toast, badge, input, skeleton)
 * [5] Views               - 视图样式 (home, list, lesson, write, dashboard, map...)
 * [6] Responsive          - @media 响应式
 * [7] Print               - @media print
 * [8] Water Theme         - 水境主题覆盖
 *
 * 命名约定:
 * .hw-{component}   全局基础组件
 * .view-{name}      视图容器
 * .nav-{element}    导航组件
 * .water-{component} 水境主题专属
 * .is-{state}       状态修饰 (.is-active, .is-hidden)
 */

/* ========================================
   [0] Design Tokens - Apple 风格设计系统
   ======================================== */
/**
 * Apple Design Tokens 设计规范
 * 
 * 设计原则：
 *   1. 统一的视觉语言 - 所有颜色、间距、圆角、阴影都通过CSS变量定义
 *   2. 语义化命名 - 使用描述性名称，如 --text-primary 而非 --color-black
 *   3. 兼容性考虑 - 保留旧变量名（如 --color-primary）以兼容现有代码
 *   4. 层次分明 - 从主色调 → 语义色 → 表面色 → 文字色 → 边框 → 阴影
 * 
 * 颜色系统：
 *   主色调：Apple Blue (#007AFF) 作为品牌主色
 *   辅助色：绿色（成功）、橙色（警告）、红色（错误）、黄色（高亮）
 *   表面色：白色（主表面）、浅灰（次表面）
 *   文字色：深灰（主要）、中灰（次要）、浅灰（禁用）
 * 
 * 间距系统（8px基准）：
 *   基于Apple的8px网格系统，确保布局一致性
 *   --space-xs: 4px (半格)
 *   --space-sm: 8px (一格)
 *   --space-md: 16px (两格)
 *   --space-lg: 24px (三格)
 *   --space-xl: 32px (四格)
 *   --space-2xl: 48px (六格)
 * 
 * 圆角系统：
 *   从小到大，适用于不同尺寸的组件
 *   --radius-sm: 8px (小按钮、输入框)
 *   --radius-md: 12px (卡片、弹窗)
 *   --radius-lg: 16px (大卡片、模态框)
 *   --radius-xl: 24px (页面头部、英雄区域)
 *   --radius-full: 9999px (药丸按钮、标签)
 * 
 * 阴影系统：
 *   柔和的阴影，模拟iOS的深度效果
 *   --shadow-sm: 微妙的悬浮效果
 *   --shadow-md: 卡片悬浮
 *   --shadow-lg: 模态框
 *   --shadow-xl: 大幅悬浮
 * 
 * 毛玻璃效果：
 *   基于iOS的Glassmorphism设计语言
 *   使用 backdrop-filter: blur() 实现半透明模糊效果
 */
:root {

  /* ---- Apple 主色调 ---- */
  --apple-blue: #007AFF;
  --apple-blue-light: #E5F1FF;
  --apple-blue-hover: #0056CC;
  --apple-green: #34C759;
  --apple-orange: #FF9500;
  --apple-red: #FF3B30;
  --apple-yellow: #FFCC00;

  /* ---- 品牌色（兼容旧名） ---- */
  --color-primary: var(--apple-blue);
  --color-primary-light: var(--apple-blue-light);
  --color-primary-hover: var(--apple-blue-hover);
  --color-accent: var(--apple-blue);
  --color-accent-light: var(--apple-blue-light);
  --color-warning: var(--apple-orange);
  --color-warning-light: #FFF4E5;
  --color-danger: var(--apple-red);

  /* ---- 语义色（保持旧名兼容） ---- */
  --green: var(--apple-green);
  --green-light: #E8F8ED;
  --green-hover: #2DBE50;
  --blue: var(--apple-blue);
  --blue-light: var(--apple-blue-light);
  --gold: var(--apple-yellow);
  --gold-light: #FFFCE8;
  --orange: var(--apple-orange);
  --header-bg: rgba(255, 255, 255, 0.72);
  --header-text: #1D1D1F;

  /* ---- Apple 表面与背景 ---- */
  --surface-primary: #FFFFFF;
  --surface-secondary: #F5F5F7;
  --surface-elevated: rgba(255, 255, 255, 0.8);
  --bg: var(--surface-primary);
  --bg-secondary: var(--surface-secondary);
  --body-bg: #F5F5F7;

  /* ---- Apple 文字色 ---- */
  --text-primary: #1D1D1F;
  --text-secondary: #86868B;
  --text-disabled: #AEAEB2;
  --text: var(--text-primary);
  --text-light: var(--text-secondary);
  --text-link: var(--apple-blue);

  /* ---- Apple 边框 ---- */
  --border-default: rgba(0, 0, 0, 0.1);
  --border-subtle: rgba(0, 0, 0, 0.05);
  --border: var(--border-default);

  /* ---- Apple 柔和阴影 ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.16);
  --shadow: var(--shadow-sm);

  /* ---- Apple 圆角 ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --radius: var(--radius-md);

  /* ---- Apple 毛玻璃效果 ---- */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-blur: blur(20px);
  --glass-blur-heavy: blur(40px);
  --glass-border: rgba(255, 255, 255, 0.5);

  /* ---- 间距 ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* ---- Apple 排版 ---- */
  --font-sans: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Consolas", monospace;
  --font-xs: 11px;
  --font-sm: 12px;
  --font-base: 14px;
  --font-md: 16px;
  --font-lg: 20px;
  --font-xl: 28px;
  --font-2xl: 36px;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* ---- 布局 ---- */
  --nav-height: 52px;
  --sidebar-width: 250px;
  --content-max-width: 1280px;

  /* ---- Apple 过渡动画 ---- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.35s ease;

  /* ---- 层级 ---- */
  --z-nav: 100;
  --z-dropdown: 300;
  --z-modal: 500;
  --z-toast: 600;
  --z-water-canvas: 1;
}
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", Helvetica, Arial, sans-serif;
      color: var(--text); background: var(--body-bg); font-size: 14px; line-height: 1.5;
      overflow-x: hidden; min-height: 100vh;
    }
    a { color: var(--text-link); text-decoration: none; }
    a:hover { text-decoration: underline; }
    button { font-family: inherit; cursor: pointer; }
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }

    /* ========================================
       [3] Apple 风格导航
       ======================================== */
    /* ---- 顶部导航 ---- */
    .gh-nav {
      background: var(--glass-bg);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      color: var(--text-primary);
      padding: 0 24px;
      display: flex;
      align-items: center;
      min-height: var(--nav-height);
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 1px 0 var(--border-subtle);
      border-bottom: none;
    }
    /* Logo */
    .gh-nav .nav-logo {
      color: var(--text-primary);
      text-decoration: none;
      font-weight: 600;
      font-size: 18px;
      flex-shrink: 0;
      margin-right: 20px;
    }
    /* 导航链接容器 */
    .gh-nav .nav-left {
      display: flex;
      align-items: center;
      gap: 2px;
      font-size: 14px;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .gh-nav .nav-left::-webkit-scrollbar { display: none; }
    /* 导航链接样式 - Apple 胶囊按钮 */
    .gh-nav .nav-left a {
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 14px;
      padding: 6px 14px;
      border-radius: var(--radius-full);
      white-space: nowrap;
      transition: all var(--transition-fast);
    }
    .gh-nav .nav-left a:hover {
      background: rgba(0, 0, 0, 0.05);
      color: var(--text-primary);
      text-decoration: none;
    }
    .gh-nav .nav-left a.active {
      background: var(--apple-blue);
      color: #fff;
    }
    /* 仓库名 */
    .gh-nav .nav-repo-name {
      color: var(--text-primary);
      font-weight: 600;
      cursor: pointer;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .gh-nav .nav-repo-name:hover { color: var(--apple-blue); }
    .gh-nav .nav-vis {
      font-size: 11px;
      padding: 2px 8px;
      border: 1px solid var(--border-default);
      border-radius: var(--radius-full);
      color: var(--text-secondary);
      margin-left: 8px;
      vertical-align: middle;
      flex-shrink: 0;
    }
    .nav-home-btn {
      color: var(--text-secondary) !important;
      text-decoration: none;
      font-size: 14px;
      padding: 6px 14px;
      border-radius: var(--radius-full);
      margin-left: 8px;
      white-space: nowrap;
      transition: all var(--transition-fast);
    }
    .nav-home-btn:hover {
      background: rgba(0, 0, 0, 0.05);
      color: var(--text-primary) !important;
      text-decoration: none;
    }
    .nav-forum-btn {
      color: var(--apple-orange) !important;
      text-decoration: none;
      font-size: 14px;
      padding: 6px 14px;
      border-radius: var(--radius-full);
      white-space: nowrap;
      transition: all var(--transition-fast);
    }
    .nav-forum-btn:hover {
      background: rgba(0, 0, 0, 0.05);
      text-decoration: none;
    }
    .nav-wiki-btn {
      color: var(--apple-green) !important;
      text-decoration: none;
      font-size: 14px;
      padding: 6px 14px;
      border-radius: var(--radius-full);
      white-space: nowrap;
      transition: all var(--transition-fast);
    }
    .nav-wiki-btn:hover {
      background: rgba(0, 0, 0, 0.05);
      text-decoration: none;
    }
    .nav-map-btn {
      color: var(--apple-blue) !important;
      text-decoration: none;
      font-size: 14px;
      padding: 6px 14px;
      border-radius: var(--radius-full);
      white-space: nowrap;
      transition: all var(--transition-fast);
    }
    .nav-map-btn:hover {
      background: rgba(0, 0, 0, 0.05);
      text-decoration: none;
    }
    /* 右侧工具组 */
    .nav-right-group {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
      flex: 1;
      justify-content: flex-end;
    }
    /* Apple 风格搜索框 */
    .nav-search-wrap-sm {
      position: relative;
      background: rgba(0, 0, 0, 0.04);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-full);
      padding: 6px 12px 6px 32px;
      transition: all var(--transition-fast);
    }
    .nav-search-wrap-sm::before {
      content: "⌕";
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      color: var(--text-secondary);
      pointer-events: none;
    }
    .nav-search-wrap-sm input {
      background: transparent;
      border: none;
      outline: none;
      color: var(--text-primary);
      font-size: 13px;
      width: 160px;
      font-family: inherit;
    }
    .nav-search-wrap-sm input::placeholder { color: var(--text-secondary); }
    .nav-search-wrap-sm:focus-within {
      background: #fff;
      border-color: var(--apple-blue);
      box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
    }
    /* + 下拉按钮 - Apple 风格 */
    .nav-plus-wrap { position: relative; }
    .nav-plus-btn {
      background: var(--apple-blue);
      color: #fff;
      border: none;
      padding: 6px 14px;
      border-radius: var(--radius-full);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
      transition: all var(--transition-fast);
    }
    .nav-plus-btn:hover {
      background: var(--apple-blue-hover);
      box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4);
      transform: translateY(-1px);
    }
    .nav-plus-menu {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: #fff;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-xl);
      min-width: 200px;
      z-index: 300;
      padding: 8px;
      overflow: hidden;
    }
    .nav-plus-menu.open { display: block; }
    .nav-plus-menu a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      font-size: 14px;
      color: var(--text-primary);
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      border-radius: var(--radius-md);
      transition: background var(--transition-fast);
    }
    .nav-plus-menu a:hover {
      background: var(--surface-secondary);
      text-decoration: none;
    }
    /* 头像下拉 */
    .nav-avatar-wrap { position: relative; cursor: pointer; }
    .nav-avatar-wrap::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      height: 16px;
      z-index: 299;
    }
    .nav-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: none;
      vertical-align: middle;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .nav-avatar-caret {
      font-size: 10px;
      color: var(--text-secondary);
      margin-left: -2px;
      vertical-align: middle;
    }
    .nav-avatar-menu {
      display: none;
      position: absolute;
      top: calc(100% + 12px);
      right: 0;
      background: #fff;
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-xl);
      min-width: 220px;
      z-index: 300;
      padding: 8px;
      overflow: hidden;
    }
    .nav-avatar-wrap:hover > .nav-avatar-menu,
    .nav-avatar-menu:hover { display: block; }
    .avatar-menu-header {
      padding: 12px 14px;
      border-bottom: 1px solid var(--border-subtle);
      line-height: 1.5;
      margin-bottom: 8px;
    }
    .avatar-menu-header strong {
      display: block;
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 600;
    }
    .avatar-menu-header span { color: var(--text-secondary) !important; font-size: 13px; }
    .nav-avatar-menu a {
      display: block;
      padding: 10px 14px;
      font-size: 14px;
      color: var(--text-primary);
      text-decoration: none;
      border-radius: var(--radius-md);
      transition: background var(--transition-fast);
    }
    .nav-avatar-menu a:hover {
      background: var(--surface-secondary);
      text-decoration: none;
    }
    /* 内联登录区 */
    .nav-auth-inline {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .nav-auth-inline input {
      width: 120px;
      padding: 6px 12px;
      font-size: 12px;
      border-radius: var(--radius-full);
      border: 1px solid var(--border-subtle);
      background: rgba(0, 0, 0, 0.04);
      color: var(--text-primary);
    }
    .nav-auth-inline input:focus {
      outline: none;
      border-color: var(--apple-blue);
      box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
    }
    .nav-auth-inline .btn-login {
      padding: 6px 14px;
      font-size: 12px;
      border-radius: var(--radius-full);
      border: none;
      background: var(--apple-blue);
      color: #fff;
      cursor: pointer;
      white-space: nowrap;
      font-weight: 500;
      box-shadow: 0 2px 6px rgba(0, 122, 255, 0.25);
      transition: all var(--transition-fast);
    }
    .nav-auth-inline .btn-login:hover {
      background: var(--apple-blue-hover);
      transform: translateY(-1px);
    }
    @media (max-width: 900px) {
      .nav-right-group { flex-wrap: wrap; gap: 8px; }
    }

    /* ========== Apple 风格汉堡菜单 ========== */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      border-radius: var(--radius-md);
      transition: background var(--transition-fast);
    }
    .nav-hamburger:hover { background: rgba(0, 0, 0, 0.05); }
    .nav-hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--text-primary);
      border-radius: 1px;
      transition: transform var(--transition-base), opacity var(--transition-base);
      transform-origin: center;
    }
    .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { opacity: 0; }
    .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    @media (max-width: 580px) {
      .nav-forum-btn,
      .nav-map-btn { font-size: 0; padding: 6px 10px; }
      .nav-forum-btn::before,
      .nav-map-btn::before { font-size: 18px; }
    }
    @media (max-width: 768px) {
      .nav-hamburger { display: flex; }
      .nav-right-group {
        display: none;
        position: absolute;
        top: var(--nav-height);
        left: 0;
        right: 0;
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        flex-direction: column;
        padding: 16px 20px;
        gap: 12px;
        border-top: 1px solid var(--border-subtle);
        box-shadow: var(--shadow-lg);
        z-index: 99;
        transition: opacity var(--transition-base), transform var(--transition-base);
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
      }
      .nav-right-group.nav-open {
        display: flex;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }
      .nav-auth-inline {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
      }
      .nav-search-wrap-sm { width: 100%; }
      .nav-plus-wrap { align-self: flex-start; }
    }

    /* ========== Apple 风格桃李地图 ========== */
    .map-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-bottom: 24px; }
    .map-stat-card {
      background: var(--surface-primary);
      border: none;
      border-radius: var(--radius-lg);
      padding: 20px 16px;
      text-align: center;
      box-shadow: var(--shadow-sm);
      transition: all var(--transition-base);
    }
    .map-stat-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }
    .map-stat-card .ms-num { font-size: 32px; font-weight: 700; color: var(--apple-blue); }
    .map-stat-card .ms-label { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }
    .map-chart-section {
      background: var(--surface-primary);
      border: none;
      border-radius: var(--radius-lg);
      padding: 24px;
      margin-bottom: 20px;
      box-shadow: var(--shadow-sm);
    }
    .map-chart-section h3 { font-size: 16px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; color: var(--text-primary); }
    /* 柱状条 */
    .map-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
    .map-bar-label { width: 80px; font-size: 13px; text-align: right; color: var(--text); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .map-bar-track { flex: 1; height: 24px; background: var(--surface-secondary); border-radius: var(--radius-full); overflow: hidden; position: relative; }
    .map-bar-fill { height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--apple-blue), #5AC8FA); transition: width 0.6s ease; position: relative; }
    .map-bar-fill.math { background: linear-gradient(90deg, #5856D6, #AF52DE); }
    .map-bar-fill.chinese { background: linear-gradient(90deg, var(--apple-orange), #FF9500); }
    .map-bar-fill.english { background: linear-gradient(90deg, var(--apple-yellow), #FFD60A); }
    .map-bar-fill.science { background: linear-gradient(90deg, var(--apple-green), #30D158); }
    .map-bar-num { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #fff; font-weight: 600; }
    .map-bar-num-out { font-size: 12px; color: var(--text-secondary); flex-shrink: 0; width: 32px; text-align: right; }
    /* 学科×年级 矩阵 */
    .map-matrix { overflow-x: auto; }
    .map-matrix table { border-collapse: collapse; width: 100%; min-width: 500px; }
    .map-matrix th { font-size: 12px; padding: 10px 12px; background: var(--surface-secondary); color: var(--text-secondary); font-weight: 600; white-space: nowrap; position: sticky; top: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; }
    .map-matrix th:first-child { text-align: left; min-width: 80px; }
    .map-matrix td { text-align: center; padding: 10px 8px; font-size: 13px; border: none; border-bottom: 1px solid var(--border-subtle); }
    .map-matrix td:first-child { text-align: left; font-weight: 600; font-size: 14px; }
    .map-matrix .mm-cell { cursor: pointer; border-radius: var(--radius-full); transition: all var(--transition-fast); padding: 6px 12px; }
    .map-matrix .mm-cell:hover { transform: scale(1.1); }
    .mm-hot { background: var(--apple-blue); color: #fff; font-weight: 600; }
    .mm-warm { background: #34C759; color: #fff; }
    .mm-cool { background: #E5F1FF; color: var(--apple-blue); }
    .mm-cold { background: #F5F5F7; color: var(--text-secondary); }
    /* 筛选切换 */
    .map-filter-bar { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; align-items: center; }
    .map-filter-bar .map-repo-tag {
      padding: 8px 16px;
      border-radius: var(--radius-full);
      font-size: 14px;
      border: none;
      background: var(--surface-primary);
      cursor: pointer;
      transition: all var(--transition-fast);
      box-shadow: var(--shadow-sm);
      color: var(--text-secondary);
    }
    .map-filter-bar .map-repo-tag:hover { background: var(--surface-secondary); color: var(--text-primary); }
    .map-filter-bar .map-repo-tag.active { background: var(--apple-blue); color: #fff; box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3); }
    /* 移动端适配 */
    @media (max-width: 640px) {
      .map-bar-label { width: 56px; font-size: 12px; }
      .map-matrix th, .map-matrix td { font-size: 11px; padding: 8px 4px; }
      .map-chart-section { padding: 16px; }
    }
    /* 地理分布地图 */
    .geo-map-container { margin-top: 24px; padding: 0; }
    .geo-map-container h3 { margin-bottom: 16px; }
    #geoMap { width: 100%; height: 420px; border-radius: var(--radius-xl); border: none; box-shadow: var(--shadow-md); z-index: 0; }
    .geo-map-legend { display: flex; gap: 24px; justify-content: center; padding: 16px 0 0; font-size: 13px; }
    .geo-map-legend span { display: flex; align-items: center; gap: 8px; }
    .geo-legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
    @media (max-width: 640px) {
      #geoMap { height: 300px; }
    }

    /* ========== Apple 风格模板库 ========== */
    .tpl-hero { text-align: center; padding: 48px 24px 32px; }
    .tpl-hero h1 { font-size: 36px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
    .tpl-hero p { color: var(--text-secondary); font-size: 16px; margin-top: 8px; }
    .tpl-filter-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 32px; }
    .tpl-filter-tag {
      padding: 8px 18px;
      border-radius: var(--radius-full);
      font-size: 14px;
      border: none;
      background: var(--surface-primary);
      cursor: pointer;
      transition: all var(--transition-fast);
      box-shadow: var(--shadow-sm);
      color: var(--text-secondary);
    }
    .tpl-filter-tag:hover { background: var(--surface-secondary); color: var(--text-primary); }
    .tpl-filter-tag.active { background: var(--apple-blue); color: #fff; box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3); }
    .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; max-width: 1200px; margin: 0 auto; padding: 0 24px 48px; }
    .tpl-card {
      background: var(--surface-primary);
      border: none;
      border-radius: var(--radius-xl);
      padding: 24px;
      cursor: pointer;
      transition: all var(--transition-base);
      display: flex;
      flex-direction: column;
      gap: 16px;
      box-shadow: var(--shadow-md);
    }
    .tpl-card:hover {
      box-shadow: var(--shadow-xl);
      transform: translateY(-4px);
    }
    .tpl-card-header { display: flex; align-items: flex-start; gap: 16px; }
    .tpl-card-icon { font-size: 40px; line-height: 1; flex-shrink: 0; }
    .tpl-card-body { flex: 1; }
    .tpl-card-body h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; color: var(--text-primary); }
    .tpl-card-body p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
    .tpl-card-tags { display: flex; gap: 8px; flex-wrap: wrap; }
    .tpl-card-tag { font-size: 12px; padding: 4px 12px; border-radius: var(--radius-full); background: var(--surface-secondary); color: var(--text-secondary); }
    .tpl-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
    .tpl-card-footer .btn { font-size: 13px; padding: 8px 16px; }
    .tpl-card-meta { font-size: 12px; color: var(--text-secondary); }
    @media (max-width: 640px) {
      .tpl-grid { grid-template-columns: 1fr; padding: 0 16px 32px; }
    }

    /* ========== Apple 风格研讨广场 ========== */
    .discuss-hero { text-align: center; padding: 48px 24px 16px; }
    .discuss-hero h1 { font-size: 36px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
    .discuss-hero p { color: var(--text-secondary); font-size: 16px; margin-top: 8px; }
    .discuss-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 24px; padding: 0 24px; }
    .discuss-tab {
      padding: 8px 18px;
      border-radius: var(--radius-full);
      font-size: 14px;
      border: none;
      background: var(--surface-primary);
      cursor: pointer;
      transition: all var(--transition-fast);
      box-shadow: var(--shadow-sm);
      color: var(--text-secondary);
    }
    .discuss-tab:hover { background: var(--surface-secondary); color: var(--text-primary); }
    .discuss-tab.active { background: var(--apple-blue); color: #fff; box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3); }
    .discuss-tab .tab-badge { font-size: 11px; margin-left: 6px; opacity: 0.8; }
    .discuss-search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 400px; }
    .discuss-search-wrap input { width: 100%; padding: 10px 16px 10px 36px; border: 1px solid var(--border-subtle); border-radius: var(--radius-full); font-size: 14px; outline: none; background: var(--surface-primary); transition: all var(--transition-fast); }
    .discuss-search-wrap input:focus { border-color: var(--apple-blue); box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15); }
    .discuss-search-wrap::before { content: "⌕"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 16px; pointer-events: none; color: var(--text-secondary); }
    .discuss-list { max-width: 900px; margin: 0 auto; padding: 0 24px 48px; }
    .discuss-item { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: all var(--transition-fast); border-radius: var(--radius-lg); margin-bottom: 8px; background: var(--surface-primary); }
    .discuss-item:hover { background: var(--surface-secondary); box-shadow: var(--shadow-sm); }
    .discuss-item-icon { font-size: 24px; flex-shrink: 0; width: 32px; text-align: center; }
    .discuss-item-body { flex: 1; min-width: 0; }
    .discuss-item-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
    .discuss-item-title:hover { color: var(--apple-blue); }
    .discuss-item-meta { font-size: 13px; color: var(--text-secondary); display: flex; gap: 12px; flex-wrap: wrap; }
    .discuss-item-labels { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
    .discuss-item-label { font-size: 12px; padding: 3px 10px; border-radius: var(--radius-full); font-weight: 500; background: var(--apple-blue-light); color: var(--apple-blue); }
    .discuss-item-comments { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-secondary); flex-shrink: 0; }
    .discuss-empty { text-align: center; padding: 48px; color: var(--text-secondary); }
    .discuss-new-btn { padding: 10px 20px; border-radius: var(--radius-full); font-size: 14px; background: var(--apple-green); color: #fff; border: none; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3); transition: all var(--transition-fast); }
    .discuss-new-btn:hover { background: #2DBE50; transform: translateY(-1px); }
    .discuss-loading { text-align: center; padding: 48px; }
    @media (max-width: 580px) {
      .discuss-bar { flex-direction: column; }
      .discuss-search-wrap { max-width: 100%; }
    }

    /* ========== Apple 风格声望系统 ========== */
    .rep-card {
      background: linear-gradient(135deg, var(--apple-blue-light) 0%, #F0F9FF 100%);
      border: none;
      border-radius: var(--radius-xl);
      padding: 24px;
      margin-bottom: 20px;
      box-shadow: var(--shadow-md);
    }
    .rep-header { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
    .rep-badge { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; box-shadow: var(--shadow-sm); }
    .rep-badge.lv1 { background: linear-gradient(135deg, #E8F8ED, #D4EDDA); border: 3px solid var(--apple-green); }
    .rep-badge.lv2 { background: linear-gradient(135deg, #D4EDDA, #C3E6CB); border: 3px solid var(--apple-green); }
    .rep-badge.lv3 { background: linear-gradient(135deg, #C3E6CB, #A9DBA9); border: 3px solid var(--apple-green); }
    .rep-badge.lv4 { background: var(--apple-green); border: 3px solid #2DBE50; color: #fff; }
    .rep-badge.lv5 { background: var(--apple-green); border: 3px solid #2DBE50; color: #fff; }
    .rep-badge.lv6 { background: var(--apple-blue); border: 3px solid #5AC8FA; color: #fff; }
    .rep-badge.lv7 { background: #5856D6; border: 3px solid #AF52DE; color: #fff; }
    .rep-badge.lv8 { background: #AF52DE; border: 3px solid #BF5AF2; color: #fff; }
    .rep-badge.lv9 { background: #FF9500; border: 3px solid #FFD60A; color: #fff; }
    .rep-badge.lv10 { background: linear-gradient(135deg, #FFD700, #FFA500); border: 3px solid #FFD700; color: #fff; }
    .rep-badge.lv11 { background: linear-gradient(135deg, #C0C0C0, #A8A8A8); border: 3px solid #E8E8E8; color: #fff; }
    .rep-badge.lv12 { background: linear-gradient(135deg, #FFD700, #FFA500); border: 3px solid #FFD700; color: #fff; }
    .rep-info { flex: 1; min-width: 150px; }
    .rep-info h3 { font-size: 20px; margin-bottom: 4px; color: var(--text-primary); }
    .rep-info .rep-title { font-size: 15px; color: var(--apple-green); font-weight: 600; margin-bottom: 10px; }
    .rep-progress-bar { width: 100%; height: 8px; background: rgba(0, 0, 0, 0.1); border-radius: var(--radius-full); overflow: hidden; margin-bottom: 6px; }
    .rep-progress-fill { height: 100%; background: linear-gradient(90deg, var(--apple-green), #5AC8FA); border-radius: var(--radius-full); transition: width 0.6s ease; }
    .rep-progress-text { font-size: 12px; color: var(--text-secondary); display: flex; justify-content: space-between; }
    .rep-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 16px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
    .rep-stat { text-align: center; }
    .rep-stat-num { font-size: 24px; font-weight: 700; color: var(--apple-blue); }
    .rep-stat-label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
    .rep-history { margin-top: 20px; }
    .rep-history h4 { font-size: 13px; font-weight: 600; color: var(--text-light); margin-bottom: 12px; }
    /* 时间线 */
    .rep-timeline { position: relative; padding-left: 28px; }
    .rep-timeline::before { content: ""; position: absolute; left: 11px; top: 4px; bottom: 4px; width: 2px; background: #c8e6c9; border-radius: 1px; }
    .rep-tl-item { position: relative; margin-bottom: 14px; padding-bottom: 2px; }
    .rep-tl-item:last-child { margin-bottom: 0; }
    .rep-tl-dot { position: absolute; left: -22px; top: 3px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; z-index: 1; }
    .rep-tl-dot.milestone { background: #ffc107; border: 2px solid #fff; box-shadow: 0 0 0 2px #ffc107; }
    .rep-tl-dot.pr { background: #238636; border: 2px solid #fff; box-shadow: 0 0 0 2px #23863640; }
    .rep-tl-dot.comment { background: #0969da; border: 2px solid #fff; box-shadow: 0 0 0 2px #0969da40; }
    .rep-tl-dot.levelup { background: #f0c040; border: 2px solid #fff; box-shadow: 0 0 0 2px #f0c040; }
    .rep-tl-date { font-size: 11px; color: var(--text-light); margin-bottom: 2px; }
    .rep-tl-desc { font-size: 13px; color: var(--text); }
    .rep-tl-desc a { color: var(--text-link); }
    .rep-tl-rep { font-size: 12px; font-weight: 600; color: var(--green); margin-top: 1px; }
    .rep-tl-rep.negative { color: var(--orange); }
    .rep-history-summary { font-size: 12px; color: var(--text-light); padding: 8px 0; text-align: center; }
    .rep-history-empty { font-size: 14px; color: var(--text-light); text-align: center; padding: 20px; }
    .rep-history-empty p { margin-bottom: 8px; }

    /* ========================================
       [2] Layout
       ======================================== */
    /* ---- 整体布局 ---- */
    .app-layout { display: flex; height: calc(100vh - var(--nav-height)); }

    /* ========== 主内容区 ========== */
    .main-content { flex: 1; overflow-y: auto; overflow-x: hidden; background: #fff; }
    .main-content .view { display: none; min-height: 100%; }
    .main-content .view.active { display: block; }
    /* 主内容区外的视图也需要隐藏/显示控制 */
    .app-layout ~ .view { display: none; }
    .app-layout ~ .view.active {
      display: block;
      position: fixed;
      top: 100px; left: 0; right: 0; bottom: 0;
      overflow-y: auto;
      background: #fff;
      z-index: 10;
    }

/* ========================================
   [4] Components
   ======================================== */

/* ---- Apple 风格按钮 Button ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  font-size: var(--font-base);
  font-weight: 500;
  line-height: var(--leading-tight);
  border-radius: var(--radius-full);
  border: none;
  background: var(--surface-primary);
  color: var(--text-primary);
  transition: all var(--transition-base);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.btn:hover {
  background: var(--surface-secondary);
  color: var(--text-primary);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
/* 主按钮 - Apple Blue */
.btn-pri {
  background: var(--apple-blue);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3), 0 0 0 1px rgba(0, 122, 255, 0.1);
}
.btn-pri:hover {
  background: var(--apple-blue-hover);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 122, 255, 0.4), 0 0 0 1px rgba(0, 122, 255, 0.15);
  transform: translateY(-1px);
}
/* 幽灵按钮 */
.btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  box-shadow: none;
}
.btn-ghost:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}
/* 危险按钮 */
.btn-danger {
  background: var(--apple-red);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3), 0 0 0 1px rgba(255, 59, 48, 0.1);
}
.btn-danger:hover {
  background: #E5342B;
  color: #fff;
  box-shadow: 0 4px 16px rgba(255, 59, 48, 0.4);
  transform: translateY(-1px);
}
/* 金色按钮 */
.btn-gold {
  background: var(--apple-orange);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(255, 149, 0, 0.3), 0 0 0 1px rgba(255, 149, 0, 0.1);
}
.btn-gold:hover {
  background: #E68600;
  color: #fff;
  box-shadow: 0 4px 16px rgba(255, 149, 0, 0.4);
  transform: translateY(-1px);
}
/* 尺寸变体 */
.btn-sm { padding: 6px 14px; font-size: var(--font-sm); }
.btn-lg { padding: 12px 28px; font-size: var(--font-md); }
/* 禁用状态 */
.btn:disabled {
  background: var(--surface-secondary);
  color: var(--text-disabled);
  border: none;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ---- Apple 风格卡片 Card ---- */
.card {
  background: var(--surface-primary);
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}
.card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-3px);
}
.card-hd {
  padding: 14px var(--space-lg);
  font-size: var(--font-base);
  font-weight: 600;
  background: var(--surface-primary);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-primary);
}
.card-bd { padding: var(--space-lg); }
.card-ft {
  padding: 12px var(--space-lg);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  background: var(--surface-secondary);
}

/* ---- Apple 毛玻璃卡片 Glass Card ---- */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}
.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* ---- Apple 徽章/标签 Badge & Tag ---- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: var(--font-xs);
  font-weight: 500;
  border-radius: var(--radius-full);
  line-height: 1;
}
.badge-primary { background: var(--apple-blue-light); color: var(--apple-blue); }
.badge-accent { background: var(--apple-blue-light); color: var(--apple-blue); }
.badge-warning { background: #FFF4E5; color: var(--apple-orange); }
.badge-danger { background: #FFEBEA; color: var(--apple-red); }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: var(--font-xs);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  background: var(--surface-secondary);
  transition: all var(--transition-fast);
}
.tag:hover {
  background: var(--surface-primary);
  border-color: var(--apple-blue);
  color: var(--apple-blue);
}

/* ---- 空状态 Empty State ---- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--space-md);
  text-align: center;
  color: var(--text-secondary);
}
.empty-state-icon { font-size: 48px; margin-bottom: var(--space-md); opacity: 0.5; }
.empty-state-title { font-size: var(--font-lg); font-weight: 600; color: var(--text); margin-bottom: var(--space-xs); }
.empty-state-desc { font-size: var(--font-base); max-width: 360px; }

/* ---- 骨架屏 Skeleton ---- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-secondary) 25%, #e8ecf0 50%, var(--surface-secondary) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.skeleton-card { height: 120px; border-radius: var(--radius-md); margin-bottom: var(--space-md); }
.skeleton-text { height: 14px; margin-bottom: var(--space-sm); }
.skeleton-text:last-child { width: 60%; }
.skeleton-title { height: 20px; width: 40%; margin-bottom: var(--space-md); }
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---- Apple 风格输入框 Input ---- */
.input {
  width: 100%;
  padding: 10px 14px;
  font-size: var(--font-base);
  font-family: inherit;
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.input:focus {
  outline: none;
  border-color: var(--apple-blue);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}
.input:disabled { background: var(--surface-secondary); cursor: not-allowed; opacity: 0.6; }
.textarea { resize: vertical; min-height: 100px; border-radius: var(--radius-md); }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2386868B' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* ---- Apple 风格模态框 Modal ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  animation: modal-fade-in var(--transition-base);
}
.modal {
  background: var(--surface-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 560px;
  width: 90%;
  max-height: 80vh;
  overflow: hidden;
  animation: modal-slide-up var(--transition-slow);
}
.modal-hd { padding: 20px 24px; font-size: 18px; font-weight: 600; border-bottom: 1px solid var(--border-subtle); background: var(--surface-primary); }
.modal-bd { padding: 24px; }
.modal-ft { padding: 16px 24px; border-top: 1px solid var(--border-subtle); display: flex; justify-content: flex-end; gap: 12px; background: var(--surface-secondary); }
@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---- Apple 风格 Toast 消息 ---- */
.toast {
  position: fixed;
  top: 80px;
  right: 24px;
  padding: 14px 20px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-xl);
  z-index: var(--z-toast);
  animation: toast-slide-in var(--transition-slow);
  max-width: 380px;
}
.toast-success { background: var(--apple-green); color: #fff; }
.toast-error { background: var(--apple-red); color: #fff; }
.toast-warning { background: var(--apple-orange); color: #fff; }
.toast-info { background: var(--apple-blue); color: #fff; }
.toast-hiding { animation: toast-slide-out var(--transition-base) forwards; }
@keyframes toast-slide-in { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toast-slide-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } }

/* ---- Apple 风格加载指示器 Loading ---- */
.loading-container { display: flex; flex-direction: column; align-items: center; padding: var(--space-xl); color: var(--text-secondary); }
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border-subtle);
  border-top-color: var(--apple-blue);
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
  margin-bottom: var(--space-md);
}
@keyframes spinner-rotate { to { transform: rotate(360deg); } }

    /* ========================================
       [5] Views
       ======================================== */
    /* ---- 视图：教案列表 ---- */
    .view-list-header { padding: 24px 32px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
    .view-list-header h2 { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
    .view-list-header .breadcrumb { font-size: 13px; color: var(--text-light); }
    .view-list-header .breadcrumb a { color: var(--text-link); }
    .view-list-toolbar { padding: 20px 32px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--border-subtle); background: var(--surface-primary); }
    .view-list-toolbar .search-box { flex: 1; min-width: 200px; max-width: 400px; position: relative; }
    .view-list-toolbar .search-box input { width: 100%; padding: 10px 14px 10px 38px; border: 1px solid var(--border-subtle); border-radius: var(--radius-full); font-size: 14px; font-family: inherit; background: var(--surface-secondary); transition: all var(--transition-fast); }
    .view-list-toolbar .search-box input:focus { outline: none; border-color: var(--apple-blue); background: #fff; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15); }
    .view-list-toolbar .search-box .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--text-secondary); pointer-events: none; }
    .sort-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 13px; border: none; border-radius: var(--radius-full); background: var(--surface-primary); color: var(--text-secondary); transition: all var(--transition-fast); box-shadow: var(--shadow-sm); }
    .sort-btn:hover { background: var(--surface-secondary); color: var(--text-primary); }
    .sort-btn.active { background: var(--apple-blue); border-color: var(--apple-blue); color: #fff; box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3); }

    /* Apple 风格教案卡片网格 */
    .lesson-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; padding: 24px 32px; }
    .lc {
      border: none;
      border-radius: var(--radius-xl);
      padding: 24px;
      cursor: pointer;
      transition: all var(--transition-base);
      display: flex;
      flex-direction: column;
      gap: 14px;
      background: var(--surface-primary);
      box-shadow: var(--shadow-md);
      position: relative;
    }
    .lc:hover {
      box-shadow: var(--shadow-xl);
      transform: translateY(-4px);
    }
    .lc .lc-subject { font-size: 12px; color: var(--apple-blue); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
    .lc .lc-title { font-size: 16px; font-weight: 600; color: var(--apple-blue); line-height: 1.5; }
    .lc .lc-meta { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
    .lc .lc-meta span { display: inline-flex; align-items: center; gap: 4px; }
    /* 搜索高亮 */
    mark { background: #FFF9C4; color: inherit; border-radius: var(--radius-sm); padding: 1px 4px; }
    /* Apple 风格收藏按钮 */
    .lc-fav { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1; border-radius: 50%; transition: all var(--transition-fast); z-index: 2; display: flex; align-items: center; justify-content: center; }
    .lc-fav:hover { background: rgba(0, 0, 0, 0.05); transform: scale(1.1); }
    .lc-fav.faved { color: var(--apple-red); animation: heartPop 0.3s ease; }
    .lc-fav:not(.faved) { color: var(--text-disabled); }
    @keyframes heartPop { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }

    /* ========== Apple 风格视图：教案详情 ========== */
    .view-lesson-top { padding: 16px 32px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--surface-primary); }
    .view-lesson-top .back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: 14px; color: var(--apple-blue); border: none; background: none; cursor: pointer; border-radius: var(--radius-full); transition: all var(--transition-fast); }
    .view-lesson-top .back-btn:hover { background: var(--apple-blue-light); }
    .view-lesson-top .file-path { font-size: 13px; color: var(--text-secondary); font-family: monospace; }
    .view-lesson-top .lesson-actions { margin-left: auto; display: flex; gap: 8px; }
    .lesson-body-wrap { display: grid; grid-template-columns: 1fr 280px; gap: 0; min-height: calc(100vh - var(--nav-height) - 100px); }
    @media (max-width: 900px) { .lesson-body-wrap { grid-template-columns: 1fr; } }
    .lesson-content { padding: 32px 40px; overflow-y: auto; }
    .lesson-content h1 { font-size: 28px; margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
    .lesson-content h2 { font-size: 20px; margin-top: 24px; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid #eee; }
    .lesson-content h3 { font-size: 16px; margin-top: 16px; margin-bottom: 8px; }
    .lesson-content p { margin-bottom: 10px; line-height: 1.8; }
    .lesson-content ul, .lesson-content ol { margin-bottom: 10px; padding-left: 24px; }
    .lesson-content li { margin-bottom: 4px; line-height: 1.7; }
    .lesson-content table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
    .lesson-content table th, .lesson-content table td { border: 1px solid var(--border); padding: 8px 12px; font-size: 13px; }
    .lesson-content table th { background: var(--bg-secondary); font-weight: 600; }
    .lesson-content blockquote { border-left: 4px solid var(--gold); padding: 8px 16px; margin-bottom: 10px; background: var(--gold-light); color: var(--text); }
    .lesson-content code { background: #f6f8fa; padding: 2px 6px; border-radius: 3px; font-size: 0.9em; }
    .lesson-content pre { background: #f6f8fa; padding: 16px; border-radius: var(--radius); overflow-x: auto; margin-bottom: 16px; }
    .lesson-content pre code { padding: 0; background: none; }
    .lesson-sidebar { border-left: 1px solid var(--border); padding: 24px; background: var(--bg-secondary); display: flex; flex-direction: column; gap: 16px; }
    @media (max-width: 900px) { .lesson-sidebar { border-left: none; border-top: 1px solid var(--border); } }
    .lesson-sidebar .meta-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
    .lesson-sidebar .meta-card h4 { font-size: 12px; font-weight: 600; color: var(--text-light); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
    .lesson-sidebar .meta-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
    .lesson-sidebar .meta-row img { width: 20px; height: 20px; border-radius: 50%; }
    .lesson-sidebar .btn-row { display: flex; flex-direction: column; gap: 8px; }

    /* ========== 打印样式（PDF 导出） ========== */
    @media print {
      /* 隐藏所有非内容元素 */
      .gh-nav, .nav-hamburger, .home-actions, .badge-strip,
      .view-lesson-top, .lesson-sidebar, .lesson-actions,
      .modal-overlay, .app-layout > *:not(.main-content),
      .dash-tabs, .dash-header, .repo-tabs, .repo-sidebar,
      .lesson-body-wrap > *:not(.lesson-content),
      button, .btn, .nav-plus-wrap, .nav-avatar-wrap,
      .nav-auth-inline, .nav-search-wrap-sm, #tplFilterRow,
      .map-filter-bar, .tpl-hero p, .home-hero, .guide-cards,
      .home-section, footer, script, style, .src-tabs, .sort-row,
      .search-bar, .list-header, .list-toolbar, #listBreadcrumb,
      .rep-history-empty p:last-child, .rep-history-summary {
        display: none !important;
      }
      /* 确保页面容器可见 */
      body { background: #fff !important; font-size: 13px; line-height: 1.7; }
      .app-layout { display: block !important; height: auto !important; }
      .main-content { padding: 0 !important; overflow: visible !important; }
      .view { display: none !important; }
      .view.active { display: block !important; }
      /* 教案正文 */
      .lesson-content { padding: 20px 0 !important; max-width: 100% !important; overflow: visible !important; }
      .lesson-body-wrap { display: block !important; }
      .lesson-content h1 { font-size: 24px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #000; }
      .lesson-content h2 { font-size: 18px; margin-top: 18px; break-after: avoid; }
      .lesson-content h3 { font-size: 15px; break-after: avoid; }
      .lesson-content p, .lesson-content li { orphans: 3; widows: 3; }
      .lesson-content table { break-inside: avoid; }
      .lesson-content pre, .lesson-content blockquote { break-inside: avoid; }
      .lesson-content img { max-width: 100% !important; break-inside: avoid; }
      .lesson-content a { color: #000; text-decoration: underline; }
      .lesson-content a::after { content: " (" attr(href) ")"; font-size: 10px; color: var(--text-secondary); }
      /* 打印页眉（自动标题） */
      .lesson-content::before {
        content: "智慧宫 HOW — 共笔一堂，桃李天下";
        display: block; font-size: 11px; color: var(--text-disabled);
        border-bottom: 1px solid #ccc; padding-bottom: 6px; margin-bottom: 20px;
        text-align: center;
      }
      /* 打印页脚 */
      @page {
        size: A4;
        margin: 15mm 15mm 20mm 15mm;
        @bottom-center {
          content: "— 智慧宫 HOW · 教育开源协作平台 —";
          font-size: 9px; color: var(--text-disabled);
        }
      }
      @page :first {
        @bottom-center { content: ""; }
      }
      /* 模板库/地图打印 */
      .tpl-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
      .tpl-card { break-inside: avoid; border: 1px solid var(--border-default) !important; box-shadow: none !important; }
      .tpl-card .btn { display: none !important; }
      .map-chart-section { break-inside: avoid; border: 1px solid var(--border-default) !important; }
      .map-stats-row { grid-template-columns: repeat(4, 1fr) !important; }
      .map-filter-bar { display: none !important; }
      .map-bar-fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    }

    /* ========== 视图：个人仪表盘 ========== */
    .dash-header { padding: 32px 32px 24px; border-bottom: 1px solid var(--border); }
    .dash-header .dh-user { display: flex; align-items: center; gap: 16px; }
    .dash-header .dh-user img { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--green); }
    .dash-header .dh-info h2 { font-size: 24px; font-weight: 700; }
    .dash-header .dh-info { position: relative; }
    .dash-header .dh-info .dh-meta { font-size: 13px; color: var(--text-light); margin-top: 2px; }
    .dash-update-hint { font-size: 11px; color: var(--text-light); margin-left: 8px; font-weight: 400; }
    .dh-notif-badge { font-size: 13px; margin-left: 10px; padding: 2px 10px; background: var(--orange); color: #fff; border-radius: 12px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }
    .dh-notif-badge:hover { opacity: 0.85; }
    .dh-notif-badge.no-unread { background: #8b949e; }
    /* 通知下拉面板 */
    .dh-notif-panel { position: absolute; top: 100%; left: 0; margin-top: 8px; width: 420px; max-height: 480px; overflow-y: auto;
      background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 100; }
    /* 通知面板标签切换 */
    .dh-notif-tabs { display: flex; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 1; }
    .dh-notif-tab { flex: 1; text-align: center; padding: 10px 0; font-size: 13px; cursor: pointer; color: var(--text-light); border-bottom: 2px solid transparent; transition: all 0.15s; }
    .dh-notif-tab:hover { color: var(--text); }
    .dh-notif-tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--pri, #0969da); }
    .dh-notif-tab b { color: var(--orange); font-weight: 700; }
    .dh-notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border);
      color: var(--text); text-decoration: none; transition: background 0.15s; }
    .dh-notif-item:last-child { border-bottom: none; }
    .dh-notif-item:hover { background: var(--bg-secondary); }
    .dh-notif-item.unread { background: #ddf4ff; }
    .dh-notif-item.unread:hover { background: #c5e7f7; }
    .dh-notif-icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
    .dh-msg-avatar { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
    .dh-notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer; }
    .dh-notif-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dh-notif-meta { font-size: 11px; color: var(--text-light); }
    .dh-notif-expand { margin-left: 4px; font-size: 10px; color: var(--text-light); transition: transform 0.2s; }
    .dh-notif-link { flex-shrink: 0; color: var(--text-light); font-size: 13px; text-decoration: none; padding: 2px 4px; opacity: 0; transition: opacity 0.15s; }
    .dh-notif-item:hover .dh-notif-link { opacity: 1; }
    /* 通知详情展开 */
    .dh-notif-detail { margin-top: 6px; padding: 8px 10px; background: var(--bg-secondary); border-radius: 4px; font-size: 12px; }
    .dh-notif-detail.loading { color: var(--text-light); }
    .dh-notif-detail-inner { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .dh-nd-actor { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
    .dh-nd-repo { color: var(--text-link); text-decoration: none; }
    .dh-nd-assigner { color: var(--text-light); }
    .dh-nd-time { color: var(--text-light); font-size: 11px; }
    .dh-notif-footer { padding: 8px 14px; text-align: center; font-size: 12px; border-top: 1px solid var(--border); background: var(--bg-secondary); }
    .dh-notif-footer a { color: var(--text-link); text-decoration: none; }
    .dh-notif-empty { padding: 24px; text-align: center; color: var(--text-light); font-size: 13px; }
    /* 发送私信表单 */
    .dh-msg-form { padding: 10px 14px; border-top: 1px solid var(--border); background: var(--bg-secondary); }
    .dh-msg-form input, .dh-msg-form textarea { font-family: inherit; box-sizing: border-box; }
    .dh-msg-form input:focus, .dh-msg-form textarea:focus { outline: none; border-color: var(--pri, #0969da) !important; }
    .dash-header.refreshing { opacity: 0.7; transition: opacity 0.2s; }
    /* 仓库热度条 */
    .dh-repo-stats { display: flex; gap: 14px; margin-top: 8px; font-size: 13px; color: var(--text-light); }
    .dh-repo-stats span { display: flex; align-items: center; gap: 3px; }
    /* 贡献榜 */
    .contrib-section { display: flex; flex-direction: column; gap: 24px; }
    .contrib-sub h3 { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
    .contrib-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
    .contrib-rank { width: 28px; font-size: 14px; font-weight: 700; text-align: center; color: var(--text-light); flex-shrink: 0; }
    .contrib-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
    .contrib-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
    .contrib-name { font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .contrib-name:hover { color: var(--pri); }
    .contrib-count { font-size: 12px; color: var(--text-light); white-space: nowrap; }
    .contrib-bar-wrap { flex: 0 0 80px; height: 6px; background: var(--bg-secondary); border-radius: 3px; overflow: hidden; }
    .contrib-bar { height: 100%; background: var(--green); border-radius: 3px; transition: width 0.5s ease; }
    /* Star 用户头像墙 */
    .star-avatars { display: flex; flex-wrap: wrap; gap: 6px; }
    .star-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: transform 0.15s; }
    .star-avatar:hover { transform: scale(1.15); }
    .dash-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 32px; }
    .dash-tab { padding: 10px 16px; font-size: 14px; color: var(--text-light); border-bottom: 2px solid transparent; cursor: pointer; transition: border-color 0.15s, color 0.15s; background: none; border-top: none; border-left: none; border-right: none; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
    .dash-tab:hover { border-bottom-color: #d0d7de; color: var(--text); }
    .dash-tab.active { color: var(--text); font-weight: 600; border-bottom-color: #fd8c73; }
    .dash-tab .tab-count { background: #afb8c133; border-radius: 10px; padding: 0 6px; font-size: 12px; }
    .dash-tab-body { padding: 24px 32px; display: none; }
    .dash-tab-body.active { display: block; }
    .rep-subtabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); padding-bottom: 0; }
    .rep-subtab { padding: 8px 14px; font-size: 13px; color: var(--text-light); border: none; border-bottom: 2px solid transparent; cursor: pointer; background: none; transition: border-color 0.15s, color 0.15s; }
    .rep-subtab:hover { color: var(--text); }
    .rep-subtab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--green); }
    .rep-sub-panel { display: none; }
    .rep-sub-panel.active { display: block; }
    .pr-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 12px; }
    .pr-item .pr-icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
    .pr-item .pr-info { flex: 1; }
    .pr-item .pr-info .pr-title { font-size: 14px; font-weight: 600; }
    .pr-item .pr-info .pr-meta { font-size: 12px; color: var(--text-light); margin-top: 4px; display: flex; gap: 12px; }
    .pr-item .pr-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 500; }
    .pr-badge-merged { background: #dcffe4; color: #1a5c22; }
    .pr-badge-open { background: #ddf4ff; color: #0969da; }
    .pr-badge-closed { background: var(--bg-secondary); color: var(--text-light); }
    .calendar-grid { display: flex; gap: 3px; overflow-x: auto; padding: 8px 0; }
    .calendar-week { display: flex; flex-direction: column; gap: 3px; }
    .cal-cell { width: 11px; height: 11px; border-radius: 2px; background: #ebedf0; outline: 1px solid rgba(27,31,35,0.06); }
    .cal-cell[data-lv="1"] { background: #9be9a8; }
    .cal-cell[data-lv="2"] { background: #40c463; }
    .cal-cell[data-lv="3"] { background: #30a14e; }
    .cal-cell[data-lv="4"] { background: #216e39; }
    .cal-legend { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-light); margin-top: 8px; justify-content: flex-end; }
    .repo-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 10px; }
    .repo-item .repo-name { font-size: 14px; font-weight: 600; color: var(--text-link); }
    .repo-item .repo-desc { font-size: 12px; color: var(--text-light); margin-top: 4px; }
    .repo-item .repo-meta { font-size: 11px; color: var(--text-light); margin-top: 6px; display: flex; gap: 12px; align-items: center; }
    .repo-item .repo-lang-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }

    /* ========== Apple 风格视图：献课指南 ========== */
    .contrib-body { padding: 48px 40px; max-width: 900px; }
    .contrib-body h2 { font-size: 24px; font-weight: 700; margin: 40px 0 20px; display: flex; align-items: center; gap: 12px; color: var(--text-primary); }
    .contrib-body h2:first-child { margin-top: 0; }
    .step-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 32px 0; }
    @media (max-width: 768px) { .step-cards { grid-template-columns: 1fr; } .contrib-body { padding: 24px 20px; } .lesson-content { padding: 24px 20px; } }
    .step-card {
      border: none;
      border-radius: var(--radius-xl);
      padding: 32px 24px;
      text-align: center;
      transition: all var(--transition-base);
      background: var(--surface-primary);
      box-shadow: var(--shadow-md);
    }
    .step-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px); }
    .step-card .sc-num { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--apple-blue), #5AC8FA); color: #fff; font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3); }
    .step-card h3 { font-size: 18px; margin-bottom: 10px; }
    .step-card p { font-size: 14px; color: var(--text-light); line-height: 1.7; }
    .faq-item { margin-bottom: 20px; }
    .faq-item .faq-q { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
    .faq-item .faq-a { color: var(--text-light); font-size: 14px; line-height: 1.7; }

    /* ========== 视图：编写教案 ========== */
    .write-body { padding: 32px 40px; max-width: 1100px; margin: 0 auto; }
    @media (max-width: 768px) { .write-body { padding: 20px; } }
    .write-body h2 { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
    .write-body .step-indicator { display: flex; gap: 8px; margin-bottom: 28px; align-items: center; }
    .write-body .step-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--border); color: var(--text-light); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
    .write-body .step-dot.done { background: var(--green); color: #fff; }
    .write-body .step-dot.current { background: var(--green); color: #fff; box-shadow: 0 0 0 3px var(--green-light); }
    .write-body .step-line { flex: 1; height: 2px; background: var(--border); max-width: 60px; }
    .write-body .step-line.done { background: var(--green); }
    .write-body .step-label { font-size: 11px; color: var(--text-light); text-align: center; min-width: 55px; }
    .write-body .repo-list { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
    .write-body .repo-row { display: flex; align-items: center; padding: 12px 16px; cursor: pointer; gap: 10px; border-bottom: 1px solid var(--border); transition: background 0.1s; }
    .write-body .repo-row:last-child { border-bottom: none; }
    .write-body .repo-row:hover { background: var(--bg-secondary); }
    .write-body .repo-row.selected { background: var(--green-light); border-left: 3px solid var(--green); }
    .write-body .repo-row .repo-icon { font-size: 16px; flex-shrink: 0; }
    .write-body .repo-row .repo-info { flex: 1; min-width: 0; }
    .write-body .repo-row .repo-name { font-size: 14px; font-weight: 600; color: var(--text-link); }
    .write-body .repo-row .repo-desc { font-size: 12px; color: var(--text-light); }
    .write-body .repo-row .repo-select { font-size: 11px; color: var(--green); font-weight: 600; display: none; }
    .write-body .repo-row.selected .repo-select { display: block; }
    /* Apple 风格文件上传区 */
    .upload-zone { border: 2px dashed var(--border-subtle); border-radius: var(--radius-xl); padding: 40px 32px; text-align: center; cursor: pointer; transition: all var(--transition-base); background: var(--surface-secondary); }
    .upload-zone:hover, .upload-zone.drag-over { border-color: var(--apple-blue); background: var(--apple-blue-light); }
    .upload-zone-inner { pointer-events: none; }
    .upload-icon { font-size: 48px; margin-bottom: 12px; }
    .upload-text { font-size: 15px; color: var(--text-primary); font-weight: 500; margin-bottom: 6px; }
    .upload-hint { font-size: 13px; color: var(--text-secondary); }
    .upload-selected { border-color: var(--apple-blue); border-width: 2px; border-style: solid; background: var(--apple-blue-light); border-radius: var(--radius-xl); }
    /* 多文件列表 */
    .file-mini-list { margin-top: 10px; max-height: 180px; overflow-y: auto; }
    .file-mini-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; border-bottom: 1px solid var(--border); }
    .file-mini-row:last-child { border-bottom: none; }
    .file-mini-row .fm-icon { font-size: 16px; flex-shrink: 0; }
    .file-mini-row .fm-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .file-mini-row .fm-size { color: var(--text-light); font-size: 11px; flex-shrink: 0; }
    .file-mini-row .fm-remove { cursor: pointer; color: var(--red); font-size: 14px; flex-shrink: 0; padding: 0 4px; }
    /* 打包提示栏 */
    .pack-hint-bar { display: none; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 14px; background: #fff8e1; border: 1px solid #ffe082; border-radius: var(--radius); font-size: 13px; color: #6d4c00; }
    .pack-hint-bar.visible { display: flex; }
    .pack-hint-bar .pack-btn { flex-shrink: 0; padding: 5px 14px; background: #ff9800; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 600; font-family: inherit; white-space: nowrap; }
    .pack-hint-bar .pack-btn:hover { background: #f57c00; }
    .pack-hint-bar .pack-btn:disabled { background: #ccc; cursor: not-allowed; }
    .pack-hint-bar .pack-text { flex: 1; min-width: 0; }
    .pack-hint-bar input[type="text"] { flex-shrink: 0; }
    /* 感谢弹窗 */
    .thanks-modal .modal { max-width: 420px; text-align: center; }
    .thanks-icon { font-size: 56px; margin-bottom: 12px; }
    .thanks-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
    .thanks-desc { font-size: 13px; color: var(--text-light); line-height: 1.6; margin-bottom: 20px; }
    /* 编写模式切换 */
    .mode-switch { display: inline-flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
    /* Apple 风格模式切换按钮 */
    .mode-btn { padding: 8px 18px; font-size: 14px; border: none; background: var(--surface-primary); cursor: pointer; font-family: inherit; transition: all var(--transition-fast); border-right: 1px solid var(--border-subtle); color: var(--text-secondary); }
    .mode-btn:first-child { border-radius: var(--radius-full) 0 0 var(--radius-full); }
    .mode-btn:last-child { border-radius: 0 var(--radius-full) var(--radius-full) 0; border-right: none; }
    .mode-btn.active { background: var(--apple-blue); color: #fff; }
    .mode-btn:not(.active):hover { background: var(--surface-secondary); color: var(--text-primary); }
    /* WangEditor 样式覆盖 */
    .w-e-toolbar { border-radius: var(--radius) var(--radius) 0 0 !important; }
    .w-e-text-container { border-radius: 0 0 var(--radius) var(--radius) !important; }
    /* 教案模板弹窗 */
    .tpl-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; max-height: 320px; overflow-y: auto; }
    /* Apple 风格模板项目 */
    .tpl-item { padding: 16px; border: none; border-radius: var(--radius-lg); cursor: pointer; transition: all var(--transition-base); text-align: center; background: var(--surface-primary); box-shadow: var(--shadow-sm); }
    .tpl-item:hover { border-color: var(--apple-blue); background: var(--apple-blue-light); box-shadow: var(--shadow-md); transform: translateY(-2px); }
    .tpl-item .tpl-icon { font-size: 32px; margin-bottom: 8px; }
    .tpl-item .tpl-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
    .tpl-item .tpl-desc { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
    .file-preview-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; font-size: 13px; font-weight: 600; }
    .preview-pane { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
    .preview-pane-header { padding: 6px 12px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--text-light); display: flex; align-items: center; gap: 6px; }
    .preview-pane-content { padding: 12px 16px; max-height: 420px; overflow-y: auto; font-size: 13px; line-height: 1.7; border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); background: #fff; }
    .preview-pane-content h1 { font-size: 22px; margin-bottom: 8px; }
    .preview-pane-content h2 { font-size: 17px; margin: 12px 0 6px; }
    .preview-pane-content h3 { font-size: 14px; margin: 8px 0 4px; }
    .preview-pane-content p { margin-bottom: 8px; }
    .preview-pane-content ul, .preview-pane-content ol { padding-left: 20px; margin-bottom: 8px; }
    .preview-pane-content code { background: #f6f8fa; padding: 1px 4px; border-radius: 3px; }
    .preview-pane-content pre { background: #f6f8fa; padding: 10px; border-radius: var(--radius); overflow-x: auto; }
    .write-body .form-group { margin-bottom: 16px; }
    .write-body .form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
    .write-body .form-group input, .write-body .form-group textarea, .write-body .form-group select {
      width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
      font-size: 13px; font-family: inherit;
    }
    .write-body .form-row { display: flex; gap: 12px; }
    .write-body .form-row .form-group { flex: 1; }
    @media (max-width: 500px) { .write-body .form-row { flex-direction: column; } }
    .write-body .write-status { padding: 10px 16px; border-radius: var(--radius); font-size: 13px; margin-bottom: 12px; display: none; }
    .write-body .write-status.success { display: block; background: #dcffe4; color: #1a5c22; }
    .write-body .write-status.error { display: block; background: #ffebe9; color: #cf222e; }
    .write-body .write-status.info { display: block; background: #ddf4ff; color: #0969da; }
    .write-body .btn-row { display: flex; gap: 8px; margin-top: 16px; }
    /* 教案列表 视图切换 */
    /* Apple 风格布局切换按钮 */
    .layout-toggle { display: inline-flex; gap: 0; border: none; border-radius: var(--radius-full); overflow: hidden; background: var(--surface-secondary); padding: 4px; box-shadow: var(--shadow-sm); }
    .layout-toggle button { padding: 8px 16px; background: transparent; border: none; cursor: pointer; font-size: 14px; border-radius: var(--radius-full); color: var(--text-secondary); transition: all var(--transition-fast); }
    .layout-toggle button:hover { background: var(--surface-primary); color: var(--text-primary); }
    .layout-toggle button.active { background: var(--apple-blue); color: #fff; box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3); }

    /* ========== 视图：仓库页面 ========== */
    .repo-page { background:var(--body-bg); min-height:calc(100vh - var(--nav-height)); }
    /* 头部区域 */
    .repo-head-wrap{background:#fff;border-bottom:1px solid var(--border);padding:16px 24px}
    .repo-head{display:flex;align-items:flex-start;gap:10px}
    .repo-head .repo-icon{font-size:20px;margin-top:3px;flex-shrink:0}
    .repo-head .repo-info{flex:1;min-width:0}
    .repo-fullname-row{display:inline-flex;align-items:center;gap:6px;margin-bottom:4px}
    .repo-fullname{font-size:20px;font-weight:600;line-height:1.4}
    .repo-vis-badge{display:inline-block;font-size:11px;padding:1px 7px;border:1px solid var(--border);border-radius:12px;color:var(--text-light);font-weight:normal}
    .repo-desc{font-size:14px;color:var(--text-light);max-width:720px;line-height:1.5}
    /* 操作按钮行 */
    .repo-actions-row{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
    /* 统计信息条 */
    .repo-stats-bar { display:flex; align-items:center; gap:0; margin-top:10px; font-size:12px; color:var(--text-light); flex-wrap:wrap; }
    .repo-stat-item { display:inline-flex; align-items:center; gap:3px; padding:3px 10px; white-space:nowrap; }
    .repo-stat-item strong { color:var(--text); font-weight:600; }
    .repo-stat-link { color:var(--text-link); text-decoration:none; cursor:pointer; }
    .repo-stat-link:hover { text-decoration:underline; }
    .repo-stat-public { background:var(--bg-secondary); border-radius:12px; padding:2px 10px; font-size:11px; font-weight:500; margin-left:4px; }
    @media(max-width:640px){.repo-stats-bar{gap:2px}.repo-stat-item{padding:3px 6px}}
    .btn-watch,.btn-star,.btn-fork{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:6px;font-size:12px;cursor:pointer;font-family:inherit;white-space:nowrap;border:none}
    .btn-watch{background:#f6f8fa;border:1px solid var(--border);color:var(--text)}
    .btn-watch:hover{background:#f3f4f6}
    .btn-star{background:#f6f8fa;border:1px solid var(--border);color:var(--text)}
    .btn-star:hover{border-color:#d4a72c}
    .btn-star.starred{background:#0969da;color:#fff;border-color:#0969da}
    .btn-fork{background:#238636;color:#fff;padding:5px 14px;font-weight:500}
    .btn-fork:hover{background:#2ea043}
    .action-count{background:#afb8c133;border-radius:10px;padding:0 5px;font-size:11px;margin-left:-2px}
    /* 标签栏 */
    .repo-tabs{display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--border);margin-top:16px;scrollbar-width:none}
    .repo-tabs::-webkit-scrollbar{display:none}
    .repo-tab{padding:10px 16px;font-size:14px;color:var(--text-light);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none;display:inline-flex;align-items:center;gap:5px;font-family:inherit}
    .repo-tab:hover{border-bottom-color:#d0d7de;color:var(--text)}
    .repo-tab.active{color:var(--text);font-weight:600;border-bottom-color:#fd8c73}
    .tab-count{background:#afb8c133;border-radius:10px;padding:0 6px;font-size:12px}
    /* 内容区：左主 + 右侧栏 */
    .repo-content-grid{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:24px;padding:24px;max-width:1280px;margin:0 auto;align-items:start}
    @media(max-width:1012px){.repo-content-grid{grid-template-columns:1fr;padding:16px}.repo-about-sidebar{order:-1;border-top:1px solid var(--border);padding-top:16px}}
    .repo-main-content{min-width:0}
    .repo-tab-panel{display:none}
    .repo-tab-panel.active{display:block}

    /* ---- Code 工具栏 ---- */
    .code-toolbar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;flex-wrap:wrap}
    .branch-selector{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--border);border-radius:6px;font-size:13px;cursor:pointer;background:#fff;font-weight:600;white-space:nowrap}
    .branch-selector:hover{background:var(--bg-secondary)}
    .toolbar-actions{display:flex;gap:6px;margin-left:auto}
    .toolbar-btn{padding:5px 11px;border:1px solid var(--border);border-radius:6px;font-size:12px;background:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-family:inherit;white-space:nowrap;}
    .toolbar-btn:hover{background:var(--bg-secondary)}
    .toolbar-btn.pri{background:#238636;color:#fff;border:none;font-weight:500}
    .tag-badge{font-size:11px;padding:2px 8px;border:1px solid var(--border);border-radius:12px;color:var(--text-light);background:#fff}
    /* 文件列表（表格式：图标/名称/提交信息/时间）*/
    .file-list-header{display:grid;grid-template-columns:20px 1fr 2fr 100px;gap:8px;padding:8px 16px;font-size:11px;font-weight:600;color:var(--text-light);border-bottom:1px solid var(--border);background:#fff}
    .file-list-header>span:nth-child(2){padding-left:4px}
    .file-list-header>span:last-child{text-align:right}
    .file-list{border:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius);overflow:hidden;background:#fff}
    .file-row{display:grid;grid-template-columns:20px 1fr 2fr 100px;gap:8px;padding:8px 16px;font-size:13px;border-bottom:1px solid var(--border);cursor:pointer;align-items:center;transition:background 0.08s}
    .file-row:last-child{border-bottom:none}
    .file-row:hover{background:rgba(208,215,222,0.32)}
    .file-row .fi-icon{font-size:16px;flex-shrink:0;text-align:center}
    .file-row .fi-name{color:var(--text-link);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .file-row.dir .fi-name{font-weight:600}
    .file-row .fi-msg{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
    .file-row .fi-time{color:var(--text-light);text-align:right;font-size:12px;white-space:nowrap}
    /* README 渲染区 */
    .readme-section{margin-top:24px}
    .readme-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;background:var(--bg-secondary);font-weight:600;font-size:14px}
    .readme-body{border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius) var(--radius);padding:24px 28px;background:#fff;font-size:14px;line-height:1.7}
    .readme-body h1{font-size:26px;margin-bottom:12px;border-bottom:1px solid #d0d7de;padding-bottom:10px}
    .readme-body h2{font-size:18px;margin:24px 0 12px;border-bottom:1px solid #d0d7de;padding-bottom:8px}
    .readme-body p{margin-bottom:10px}
    .readme-body ul,.readme-body ol{margin:8px 0;padding-left:28px}
    .readme-body li{margin-bottom:3px}
    .readme-body code{background:var(--bg-secondary);padding:1px 5px;border-radius:4px}
    .readme-body pre{background:var(--bg-secondary);padding:14px;border-radius:6px;overflow-x:auto;margin-bottom:14px}
    .readme-body pre code{background:none;padding:0}

    /* ---- 右侧 About 侧边栏（MoneyPrinterTurbo 风格）---- */
    .about-section{padding:14px 0;border-top:1px solid var(--border)}
    .about-section:first-child{border-top:none;padding-top:0}
    .about-section-title{font-size:13px;font-weight:600;margin-bottom:6px;display:block}
    .about-section-desc{font-size:13px;line-height:1.6;color:var(--text);word-break:break-word}
    .about-meta-kv{display:flex;align-items:center;justify-content:space-between;padding:2px 0;font-size:13px;color:var(--text-light)}
    .about-meta-kv strong{color:var(--text);font-weight:600}
    .about-link-text{display:block;font-size:13px;color:var(--text-link);padding:2px 0;text-decoration:none}
    .about-link-text:hover{text-decoration:underline}
    /* 发布版本 */
    .about-release-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
    .about-release-tag{display:inline-block;padding:2px 10px;background:#dafbe1;color:#1a7f37;border-radius:12px;font-size:12px;font-weight:600}
    .about-release-label{font-size:12px;color:var(--text-light)}
    .about-release-more{font-size:12px;color:var(--text-light)}
    /* 语言/学科条 */
    .about-lang-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}
    .about-lang-bar{height:8px;border-radius:4px;overflow:hidden;display:flex;margin-bottom:8px}
    .about-lang-bar-seg{height:100%}
    .about-lang-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-light);padding:2px 0}
    .about-lang-item strong{color:var(--text);font-weight:600}
    .about-lang-percent{font-size:11px;color:var(--text-light);margin-left:auto}
    /* 话题标签 */
    .about-topics{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
    .about-topic{padding:2px 10px;background:#ddf4ff;color:#0969da;border-radius:12px;font-size:11px;font-weight:500;text-decoration:none;white-space:nowrap}
    .about-topic:hover{background:#b6e3ff;text-decoration:none}
    .about-link{display:block;padding:8px 14px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;color:var(--text-link);text-align:center;text-decoration:none;margin-top:8px;font-weight:500}
    .about-link:hover{background:var(--bg-secondary);text-decoration:none}

    /* ---- 文件预览面板（右侧替换 About 侧边栏）---- */
    .repo-file-preview{position:sticky;top:calc(var(--nav-height) + 16px);border:1px solid var(--border);border-radius:var(--radius);background:#fff;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - var(--nav-height) - 48px)}
    .fp-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--bg-secondary);border-bottom:1px solid var(--border);gap:8px}
    .fp-header-left{display:flex;align-items:center;gap:6px;min-width:0}
    .fp-file-icon{font-size:16px;flex-shrink:0}
    .fp-file-name{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .fp-header-right{display:flex;align-items:center;gap:4px;flex-shrink:0}
    .fp-action-btn{padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius);font-size:12px;color:var(--text-link);text-decoration:none;white-space:nowrap}
    .fp-action-btn:hover{background:var(--bg-secondary);text-decoration:none}
    .fp-close-btn{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);background:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-light);line-height:1;padding:0}
    .fp-close-btn:hover{background:var(--bg-secondary);color:var(--text)}
    .fp-body{flex:1;overflow-y:auto;padding:16px;font-size:13px;line-height:1.7;word-break:break-word}
    .fp-body h1{font-size:22px;margin-bottom:10px;border-bottom:1px solid var(--border);padding-bottom:8px}
    .fp-body h2{font-size:17px;margin:20px 0 10px;border-bottom:1px solid var(--border);padding-bottom:6px}
    .fp-body h3{font-size:14px;margin:16px 0 8px}
    .fp-body p{margin-bottom:8px}
    .fp-body ul,.fp-body ol{margin:6px 0;padding-left:24px}
    .fp-body li{margin-bottom:3px}
    .fp-body code{background:rgba(175,184,193,0.2);padding:1px 5px;border-radius:4px;font-size:12px}
    .fp-body pre{background:var(--bg-secondary);padding:12px;border-radius:6px;overflow-x:auto;margin-bottom:12px;font-size:12px;line-height:1.5}
    .fp-body pre code{background:none;padding:0}
    .fp-body table{border-collapse:collapse;margin:8px 0;width:100%}
    .fp-body th,.fp-body td{border:1px solid var(--border);padding:6px 12px;text-align:left;font-size:12px}
    .fp-body th{background:var(--bg-secondary);font-weight:600}
    .fp-body blockquote{border-left:3px solid var(--border);padding:4px 12px;color:var(--text-light);margin:8px 0}
    .fp-body img{max-width:100%;height:auto;border-radius:4px}
    .fp-body a{color:var(--text-link)}
    .fp-plain{white-space:pre-wrap;font-family:"Cascadia Code","Fira Code","Consolas",monospace;font-size:12px;line-height:1.6;background:var(--bg-secondary);padding:14px;border-radius:var(--radius);overflow-x:auto}
    @media(max-width:1012px){.repo-file-preview{position:static;max-height:none}}

    /* ---- 研讨单 Issues ---- */
    .issues-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap}
    .issues-state-tabs{display:flex;gap:0}
    .issues-state-tab{padding:7px 14px;font-size:13px;border:1px solid transparent;border-radius:var(--radius) var(--radius) 0 0;background:none;color:var(--text-light);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:4px}
    .issues-state-tab:hover{background:var(--bg-secondary);color:var(--text)}
    .issues-state-tab.active{font-weight:600;color:var(--text);border-color:var(--border);border-bottom-color:transparent}
    .issues-search-input{padding:5px 10px;border:1px solid var(--border);border-radius:var(--radius);font-size:13px;width:200px;font-family:inherit}
    .issue-item{border-top:1px solid var(--border);padding:14px 0;display:flex;align-items:flex-start;gap:10px;cursor:pointer}
    .issue-item:hover{background:var(--bg-secondary);margin:0 -16px;padding:14px 16px}
    .issue-status-icon{font-size:16px;flex-shrink:0;margin-top:2px}
    .issue-status-icon.open{color:var(--green)}.issue-status-icon.closed{color:#8250df}
    .issue-main{flex:1;min-width:0}
    .issue-tit{font-size:15px;font-weight:600;line-height:1.4}
    .issue-tit a{color:var(--text)}
    .issue-tit a:hover{color:var(--text-link);text-decoration:none}
    .issue-labels{display:inline-flex;gap:4px;flex-wrap:wrap;margin-left:6px}
    .issue-lbl{padding:1px 7px;border-radius:10px;font-size:11px;font-weight:500}
    .issue-meta{font-size:12px;color:var(--text-light);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
    .issue-comments{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--text-light)}

    /* ---- 仓库卡片 ---- */
    .repo-card{border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px;cursor:pointer;transition:background 0.1s;display:flex;align-items:flex-start;gap:12px;background:#fff}
    .repo-card:hover{background:var(--bg-secondary)}
    .repo-card .rc-icon{font-size:16px;flex-shrink:0;margin-top:1px}
    .repo-card .rc-body{flex:1;min-width:0}
    .repo-card .rc-name{font-size:16px;font-weight:600;color:var(--text-link)}
    .rc-vis{font-size:10px;padding:1px 6px;border:1px solid var(--border);border-radius:10px;color:var(--text-light);margin-left:6px;vertical-align:middle;font-weight:normal}
    .repo-card .rc-desc{font-size:13px;color:var(--text-light);margin-top:4px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .repo-card .rc-meta{font-size:12px;color:var(--text-light);margin-top:8px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
    .rc-meta span{display:inline-flex;align-items:center;gap:3px}
    .back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-link); cursor: pointer; margin-bottom: 4px; }
    .back-link:hover { text-decoration: underline; }
    .search-repo { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; margin-bottom: 16px; font-family: inherit; }
    .search-repo:focus { outline: 2px solid var(--text-link); outline-offset: -1px; }
    /* Breadcrumb back to root */
    .code-breadcrumb { font-size: 13px; padding: 8px 0; display: flex; align-items: center; gap: 4px; }
    .code-breadcrumb a { color: var(--text-link); cursor: pointer; }

    /* ========== 来源标签 ========== */
    .source-badge {
      display: inline-flex; align-items: center; gap: 3px;
      padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 500;
    }
    .source-seed { background: #dcffe4; color: #1a5c22; }
    .source-community { background: #fff8e1; color: #8a6d14; }
    /* 侧边栏分组 */
    .tree-section { padding: 4px 12px 2px; font-size: 10px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
    .tree-section:first-child { margin-top: 0; }
    /* 来源筛选栏 */
    .type-tabs { display: flex; gap: 0; flex-wrap: wrap; }
    .type-tab {
      padding: 6px 12px; background: #fff; border: 1px solid var(--border); border-right: none;
      font-size: 13px; color: var(--text); transition: all 0.2s;
    }
    .type-tab:first-child { border-radius: var(--radius) 0 0 var(--radius); }
    .type-tab:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-right: 1px solid var(--border); }
    .type-tab:hover { background: var(--bg-secondary); }
    .type-tab.active { background: var(--green); color: #fff; border-color: var(--green); }

    .source-tabs { display: flex; gap: 0; }
    .src-tab {
      padding: 6px 14px; font-size: 12px; border: 1px solid var(--border); border-right: none;
      background: #fff; color: var(--text-light); cursor: pointer; font-family: inherit;
      transition: background 0.1s, color 0.1s;
    }
    .src-tab:first-child { border-radius: var(--radius) 0 0 var(--radius); }
    .src-tab:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-right: 1px solid var(--border); }
    .src-tab:hover { background: var(--bg-secondary); }
    .src-tab.active { background: var(--green); color: #fff; border-color: var(--green); }
    .lc .lc-source { margin-top: 2px; }

    /* ========== 智慧广场 ========== */
    .square-hero { text-align: center; padding: 40px 32px 24px; background: linear-gradient(135deg, #f6f8fa 0%, #eaeef2 100%); border-bottom: 1px solid var(--border); }
    .square-hero h1 { font-size: 28px; font-weight: 700; margin-bottom: 8px; color: #1f2328; }
    .square-hero p { font-size: 14px; color: var(--text-light); }
    .square-tabs { display: flex; gap: 0; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; flex-wrap: wrap; }
    .sq-tab { background: none; border: none; padding: 12px 20px; font-size: 14px; font-weight: 500; color: var(--text-light); cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; font-family: inherit; white-space: nowrap; }
    .sq-tab:hover { color: var(--text-link); }
    .sq-tab.active { color: var(--text-link); border-bottom-color: var(--text-link); font-weight: 600; }
    .sq-content { max-width: 1100px; margin: 0 auto; padding: 20px 16px; min-height: 300px; }
    @media (max-width: 580px) {
      .square-hero { padding: 24px 16px 16px; }
      .square-hero h1 { font-size: 22px; }
      .sq-tab { padding: 10px 14px; font-size: 13px; }
    }

    /* ========== Apple 风格首页 Hero ========== */
    .home-hero {
      text-align: center;
      padding: 80px 32px 64px;
      background: linear-gradient(180deg, var(--surface-secondary) 0%, var(--surface-primary) 100%);
      border-bottom: none;
    }
    .home-hero h1 {
      font-size: 48px;
      font-weight: 700;
      letter-spacing: -1px;
      margin-bottom: 12px;
      background: linear-gradient(135deg, var(--text-primary) 0%, var(--apple-blue) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .home-hero .how {
      color: var(--apple-blue);
      font-style: normal;
      font-size: 28px;
      font-weight: 600;
      -webkit-text-fill-color: var(--apple-blue);
    }
    .home-hero .motto { font-size: 18px; color: var(--text-secondary); margin-bottom: 32px; max-width: 600px; margin-left: auto; margin-right: auto; }
    .home-stats { display: flex; justify-content: center; gap: 56px; margin: 0 auto 40px; max-width: 500px; }
    @media (max-width:500px) { .home-stats { gap: 32px; } }
    .home-stats .hs-num { font-size: 36px; font-weight: 700; color: var(--apple-blue); }
    .home-stats .hs-label { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }
    .home-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
    /* Apple 风格统计徽章 */
    .badge-strip { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0 auto 32px; max-width: 700px; }
    .badge-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border: none;
      border-radius: var(--radius-full);
      font-size: 13px;
      color: var(--text-secondary);
      background: var(--surface-primary);
      white-space: nowrap;
      text-decoration: none;
      box-shadow: var(--shadow-sm);
      transition: all var(--transition-fast);
    }
    .badge-item:hover { background: var(--apple-blue-light); color: var(--apple-blue); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .badge-item .badge-icon { font-size: 16px; }
    .badge-item .badge-val { font-weight: 700; color: var(--text-primary); }
    .badge-item .badge-name { margin-left: 2px; }
    .badge-trending { background: linear-gradient(135deg, var(--apple-orange), #FF9500); color: #fff; border: none; font-weight: 600; }
    .badge-trending:hover { background: linear-gradient(135deg, #FF9500, var(--apple-orange)); color: #fff; }
    /* Apple 风格分组面板 */
    .write-panel { border: none; border-radius: var(--radius-xl); background: var(--surface-primary); overflow: hidden; margin-bottom: 20px; box-shadow: var(--shadow-md); }
    .write-panel-header { padding: 16px 24px; background: var(--surface-secondary); font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 10px; }
    .write-panel-header .wp-icon { font-size: 20px; }
    .write-panel-body { padding: 20px 24px; }
    .home-section { padding: 0 32px; max-width: 1100px; margin: 0 auto; }
    .home-section h2 { font-size: 24px; font-weight: 700; margin: 48px 0 24px; text-align: center; color: var(--text-primary); }
    .home-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
    .home-card {
      border: none;
      border-radius: var(--radius-xl);
      padding: 24px;
      background: var(--surface-primary);
      transition: all var(--transition-base);
      cursor: pointer;
      box-shadow: var(--shadow-md);
    }
    .home-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px); }
    .home-card .hc-subject { font-size: 12px; color: var(--apple-blue); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
    .home-card .hc-title { font-size: 16px; font-weight: 600; color: var(--apple-blue); margin: 8px 0; line-height: 1.4; }
    .home-card .hc-meta { font-size: 13px; color: var(--text-secondary); }
    .guide-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
    @media (max-width:768px) { .guide-cards { grid-template-columns: 1fr; } .home-hero h1 { font-size: 32px; } .home-section { padding: 0 20px; } }
    .guide-card {
      border: none;
      border-radius: var(--radius-xl);
      padding: 32px 24px;
      background: var(--surface-primary);
      transition: all var(--transition-base);
      box-shadow: var(--shadow-md);
    }
    .guide-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px); }
    .guide-card .gc-num { font-size: 40px; margin-bottom: 12px; }
    .guide-card .gc-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }
    .guide-card .gc-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }

    /* ========== 弹窗 ========== */
    .modal-overlay {
      display: none; position: fixed; inset: 0; z-index: 200;
      background: rgba(0,0,0,0.4); align-items: center; justify-content: center;
    }
    .modal-overlay.open { display: flex; }
    .modal {
      background: #fff; border-radius: 8px; width: 560px; max-width: 95vw;
      max-height: 85vh; overflow-y: auto; box-shadow: 0 16px 48px rgba(0,0,0,0.2);
    }
    .modal-header {
      padding: 16px 20px; border-bottom: 1px solid var(--border);
      font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: space-between;
    }
    .modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-light); padding: 4px 8px; border-radius: var(--radius); }
    .modal-close:hover { background: var(--bg-secondary); color: var(--text); }
    .modal-body { padding: 20px; }
    .modal-body label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
    .modal-body input, .modal-body textarea, .modal-body select {
      width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
      font-size: 13px; font-family: inherit; margin-bottom: 14px;
    }
    .modal-body input:focus, .modal-body textarea:focus, .modal-body select:focus {
      outline: 2px solid var(--text-link); outline-offset: -1px;
    }
    .modal-body textarea { resize: vertical; min-height: 100px; }
    .modal-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 0 0 8px; }
    .modal-actions .btn { min-width: 80px; justify-content: center; }
    .modal-status { padding: 10px 16px; font-size: 14px; text-align: center; border-radius: var(--radius-md); margin-bottom: 12px; display: none; font-weight: 500; }
    .modal-status.success { display: block; background: var(--apple-green-light, #E8F8ED); color: var(--apple-green); }
    .modal-status.error { display: block; background: #FFEBEA; color: var(--apple-red); }
    .modal-status.info { display: block; background: var(--apple-blue-light); color: var(--apple-blue); }
    .notify-banner { padding: 12px 18px; font-size: 14px; border-radius: var(--radius-lg); line-height: 1.5; }
    .notify-banner.info { background: var(--apple-blue-light); color: var(--apple-blue); border: none; }
    .notify-banner.success { background: #dcffe4; color: #1a5c22; border: 1px solid #a3e6b0; }

    /* ========== 授权弹窗 ========== */
    .consent-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; display: flex; align-items: center; justify-content: center; }
    .consent-modal { background: #fff; border-radius: 12px; width: 460px; max-width: 92vw; max-height: 80vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
    .consent-hd { padding: 20px 24px 0; display: flex; align-items: center; gap: 10px; }
    .consent-icon { font-size: 28px; }
    .consent-title { font-size: 17px; font-weight: 700; }
    .consent-bd { padding: 16px 24px; color: var(--text-light); font-size: 13px; line-height: 1.7; }
    .consent-detail { background: var(--bg-secondary); border-radius: var(--radius); padding: 12px 14px; margin-top: 12px; font-size: 12px; }
    .consent-detail dt { font-weight: 600; color: var(--text); margin-bottom: 2px; }
    .consent-detail dd { margin: 0 0 8px; color: var(--text-light); }
    .consent-detail dd:last-child { margin-bottom: 0; }
    .consent-ft { padding: 12px 24px 20px; display: flex; gap: 8px; justify-content: flex-end; }
    .consent-ft .btn { min-width: 90px; justify-content: center; }

    /* ========== 隐私与授权面板 ========== */
    .privacy-section { margin-bottom: 10px; }
    .privacy-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--bg-secondary); border-radius: var(--radius); margin-bottom: 8px; }
    .privacy-item-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
    .privacy-item-icon { font-size: 18px; flex-shrink: 0; }
    .privacy-item-info { min-width: 0; }
    .privacy-item-name { font-weight: 600; font-size: 13px; }
    .privacy-item-value { font-size: 11px; color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .privacy-item-time { font-size: 10px; color: var(--text-light); }
    .consent-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; flex-shrink: 0; margin-left: 8px; }
    .consent-badge.granted { background: #dcffe4; color: #1a5c22; }
    .consent-badge.denied { background: #ffebe9; color: #cf222e; }
    .consent-badge.pending { background: #fff8c5; color: #bf8700; }
    .privacy-item-actions { display: flex; gap: 6px; flex-shrink: 0; margin-left: 12px; }
    .privacy-item-actions button { padding: 4px 10px; font-size: 11px; border-radius: 4px; border: 1px solid var(--border); background: #fff; cursor: pointer; white-space: nowrap; }
    .privacy-item-actions button:hover { background: var(--bg-secondary); }
    .privacy-item-actions button.danger { color: #cf222e; border-color: #ff8182; }
    .privacy-item-actions button.danger:hover { background: #ffebe9; }

    /* 首次登录引导 */
    .first-login-banner { padding: 14px 16px; background: linear-gradient(135deg,#f0f5ff,#e8f0fe); border: 1px solid #c2d9ff; border-radius: var(--radius); margin-bottom: 16px; }
    .first-login-banner h3 { margin: 0 0 6px; font-size: 15px; }
    .first-login-banner p { font-size: 12px; color: var(--text-light); margin: 0 0 10px; }
    .consent-batch { max-height: 240px; overflow-y: auto; margin-bottom: 12px; }
    .consent-batch-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
    .consent-batch-item:last-child { border-bottom: none; }
    .consent-batch-item input[type="checkbox"] { width: auto; margin: 0; }

    /* ========== 协议声明弹窗 ========== */
    .policy-modal { width: 620px; }
    .policy-list-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; cursor: pointer; transition: all 0.15s; }
    .policy-list-item:hover { border-color: var(--text-link); background: var(--blue-light); }
    .policy-list-icon { font-size: 22px; flex-shrink: 0; }
    .policy-list-info { flex: 1; min-width: 0; }
    .policy-list-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
    .policy-list-desc { font-size: 11px; color: var(--text-light); }
    .policy-list-arrow { color: var(--text-light); font-size: 14px; flex-shrink: 0; }
    .policy-detail-wrap { max-height: 60vh; overflow-y: auto; padding: 4px; }
    .policy-detail-wrap h2 { font-size: 16px; margin: 16px 0 8px; }
    .policy-detail-wrap h3 { font-size: 14px; margin: 12px 0 6px; }
    .policy-detail-wrap h4 { font-size: 13px; margin: 10px 0 4px; }
    .policy-detail-wrap p { font-size: 13px; line-height: 1.7; color: var(--text); margin: 0 0 8px; }
    .policy-detail-wrap ul, .policy-detail-wrap ol { font-size: 13px; line-height: 1.7; margin: 0 0 8px; padding-left: 20px; }
    .policy-detail-wrap li { margin-bottom: 4px; }
    .policy-detail-wrap blockquote { border-left: 4px solid var(--text-link); padding: 6px 12px; margin: 8px 0; background: var(--blue-light); border-radius: 0 var(--radius) var(--radius) 0; color: var(--text); font-size: 13px; }
    .policy-detail-wrap code { background: var(--bg-secondary); padding: 1px 5px; border-radius: 3px; font-size: 12px; }
    .policy-detail-wrap pre { background: var(--bg-secondary); padding: 12px; border-radius: var(--radius); overflow-x: auto; font-size: 12px; margin: 8px 0; }
    .policy-detail-wrap table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 12px; }
    .policy-detail-wrap th { background: var(--bg-secondary); padding: 8px; text-align: left; font-weight: 600; border: 1px solid var(--border); }
    .policy-detail-wrap td { padding: 8px; border: 1px solid var(--border); }
    .policy-detail-wrap hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
    .policy-back-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-link); cursor: pointer; background: none; border: none; padding: 4px 0; margin-bottom: 12px; }
    .policy-back-btn:hover { text-decoration: underline; }
    .policy-ext-link { display: inline-block; margin-top: 12px; font-size: 12px; color: var(--text-link); text-decoration: none; }
    .policy-ext-link:hover { text-decoration: underline; }

    /* ========== 新建仓库弹窗美化 ========== */
    .create-section { margin-bottom: 28px; }
    .create-section-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
    .create-step-num { width: 22px; height: 22px; background: linear-gradient(135deg,#0969da,#0550ae); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
    .create-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
    .create-required { color: #cf222e; font-weight: 400; }
    .create-optional { font-weight: 400; color: var(--text-light); font-size: 12px; }
    .create-hint { font-size: 12px; color: var(--text-light); margin-bottom: 18px; line-height: 1.5; transition: color 0.2s; }

    .create-owner-row { display: flex; align-items: center; gap: 0; margin-bottom: 6px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; }
    .create-owner-row:focus-within { border-color: #0969da; box-shadow: 0 0 0 3px rgba(9,105,218,0.12); }
    .create-owner-tag { padding: 9px 14px; background: var(--bg-secondary); font-size: 13px; font-weight: 600; color: var(--text); border-right: 1px solid var(--border); white-space: nowrap; user-select: none; }
    .create-owner-sep { padding: 9px 4px; background: var(--bg-secondary); font-size: 16px; color: var(--text-light); user-select: none; }
    .create-name-input { flex: 1; padding: 9px 14px; border: none; outline: none; font-size: 14px; font-family: inherit; background: #fff; min-width: 0; }
    .create-name-input::placeholder { color: #afb8c1; }

    .create-desc-wrap { position: relative; margin-bottom: 4px; }
    .create-desc-input { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; font-family: inherit; resize: vertical; min-height: 60px; transition: border-color 0.15s, box-shadow 0.15s; }
    .create-desc-input:focus { border-color: #0969da; box-shadow: 0 0 0 3px rgba(9,105,218,0.12); outline: none; }
    .create-desc-counter { font-size: 11px; color: var(--text-light); text-align: right; margin-bottom: 2px; }

    .create-vis-desc { font-size: 12px; color: var(--text-light); margin-bottom: 10px; }
    .create-vis-row { display: flex; gap: 10px; margin-bottom: 18px; }
    .create-vis-card { flex: 1; padding: 14px; border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; display: flex; align-items: flex-start; gap: 10px; transition: all 0.2s; background: #fff; }
    .create-vis-card:hover { border-color: #8b949e; background: var(--bg-secondary); }
    .create-vis-card.active { border-color: #0969da; background: #ddf4ff; }
    .create-vis-icon { font-size: 22px; flex-shrink: 0; line-height: 1.2; }
    .create-vis-card strong { display: block; font-size: 13px; margin-bottom: 4px; }
    .create-vis-sub { font-size: 11px; color: var(--text-light); line-height: 1.5; }

    /* 创建模式切换标签 */
    .create-mode-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 24px; background: #fff; }
    .create-mode-tab { padding: 10px 18px; font-size: 13px; border: none; background: none; color: var(--text-light); cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; transition: all 0.15s; }
    .create-mode-tab:hover { color: var(--text); border-bottom-color: #d0d7de; }
    .create-mode-tab.active { color: var(--text); font-weight: 600; border-bottom-color: #0969da; }
    .create-mode-panel { padding: 24px; max-height: 52vh; overflow-y: auto; }
    .create-mode-panel.hidden { display: none; }

    /* 许可证类型切换标签（版权协议 / 开源协议） */
    .lic-mode-tabs { display: flex; gap: 0; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
    .lic-mode-tab { flex: 1; padding: 10px 16px; font-size: 13px; border: none; background: #fff; color: var(--text-light); cursor: pointer; font-family: inherit; text-align: center; transition: all 0.15s; font-weight: 500; }
    .lic-mode-tab:first-child { border-right: 1px solid var(--border); }
    .lic-mode-tab:hover { background: var(--bg-secondary); color: var(--text); }
    .lic-mode-tab.active { background: #ddf4ff; color: #0969da; font-weight: 700; }
    .lic-panel { margin-bottom: 8px; }
    .lic-hint { font-size: 11px; color: var(--text-light); margin-top: 6px; line-height: 1.5; }

    .create-init-box { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
    .create-init-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); gap: 16px; }
    .create-init-row:last-child { border-bottom: none; }
    .create-init-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .create-init-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; white-space: normal; }
    .create-init-sub { font-size: 11px; color: var(--text-light); line-height: 1.4; white-space: normal; }
    .create-init-select { padding: 7px 28px 7px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; font-family: inherit; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23656d76' d='M6 8.825a.75.75 0 0 1-.53-.22l-4.5-4.5a.75.75 0 0 1 1.06-1.06L6 7.065l3.97-3.97a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-.53.22Z'/%3E%3C/svg%3E") no-repeat right 10px center; appearance: none; -webkit-appearance: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
    .create-init-select:focus { outline: 2px solid #0969da; outline-offset: -1px; }

    .create-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; }
    .create-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
    .create-toggle-track { position: absolute; inset: 0; background: #8b949e; border-radius: 12px; transition: background 0.25s; }
    .create-toggle-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

    /* ========== 模板选择弹窗 ========== */
    .tpl-header-bar {
      background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 100%);
      padding: 20px 24px; border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
    }
    .tpl-header-bar .tpl-title-wrap { display: flex; align-items: center; gap: 12px; }
    .tpl-header-bar .tpl-icon-box {
      width: 36px; height: 36px; background: linear-gradient(135deg, #0969da, #0550ae);
      border-radius: 10px; display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 18px; box-shadow: 0 2px 6px rgba(5,90,174,0.3);
    }
    .tpl-header-bar .tpl-title { font-size: 16px; font-weight: 700; color: var(--text); }
    .tpl-header-bar .tpl-subtitle { font-size: 12px; color: var(--text-light); }
    .tpl-body { padding: 24px; max-height: 52vh; overflow-y: auto; }
    .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
    .tpl-card {
      border: 2px solid var(--border); border-radius: 10px; padding: 20px;
      cursor: pointer; transition: all 0.2s; background: #fff; display: flex;
      flex-direction: column; gap: 10px; position: relative; overflow: hidden;
    }
    .tpl-card:hover { border-color: #0969da; box-shadow: 0 4px 16px rgba(9,105,218,0.12); transform: translateY(-2px); }
    .tpl-card.selected { border-color: #0969da; background: #f0f7ff; box-shadow: 0 0 0 3px rgba(9,105,218,0.15); }
    .tpl-card .tpl-card-top { display: flex; align-items: flex-start; gap: 10px; }
    .tpl-card .tpl-card-icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
    .tpl-card .tpl-card-info { flex: 1; min-width: 0; }
    .tpl-card .tpl-card-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
    .tpl-card .tpl-card-owner { font-size: 11px; color: var(--text-light); }
    .tpl-card .tpl-card-desc { font-size: 12px; color: var(--text-light); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .tpl-card .tpl-card-meta { display: flex; gap: 14px; font-size: 11px; color: var(--text-light); margin-top: 2px; }
    .tpl-card .tpl-card-meta span { display: inline-flex; align-items: center; gap: 3px; }
    .tpl-card .tpl-card-check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: #0969da; color: #fff; display: none; align-items: center; justify-content: center; font-size: 12px; }
    .tpl-card.selected .tpl-card-check { display: flex; }
    .tpl-new-repo-row { display: flex; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); align-items: center; flex-wrap: wrap; }
    .tpl-new-repo-row .tpl-input { flex: 1; min-width: 160px; padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s; }
    .tpl-new-repo-row .tpl-input:focus { border-color: #0969da; box-shadow: 0 0 0 3px rgba(9,105,218,0.12); outline: none; }
    .tpl-new-repo-row .tpl-owner-display { font-size: 13px; color: var(--text); font-weight: 600; white-space: nowrap; }
    .tpl-owner-input-wrap { flex: 1; min-width: 160px; display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; }
    .tpl-owner-input-wrap:focus-within { border-color: #0969da; box-shadow: 0 0 0 3px rgba(9,105,218,0.12); }
    .tpl-owner-input-wrap .tpl-owner-tag { padding: 9px 12px; background: var(--bg-secondary); font-size: 13px; font-weight: 600; color: var(--text); border-right: 1px solid var(--border); white-space: nowrap; }
    .tpl-owner-input-wrap .tpl-owner-sep { padding: 9px 3px; background: var(--bg-secondary); font-size: 14px; color: var(--text-light); }
    .tpl-owner-input-wrap .tpl-name-input { flex: 1; padding: 9px 12px; border: none; outline: none; font-size: 13px; font-family: inherit; }

    /* ========== 通用 ========== */
    .empty-block { text-align: center; padding: 48px; color: var(--text-light); }
    .loading-block { text-align: center; padding: 48px; color: var(--text-light); }
    .spinner { display: inline-block; width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--green); border-radius: 50%; animation: spin 0.8s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .loading-pulse { animation: pulse 1.4s ease-in-out infinite; }
    @keyframes pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
    /* ========== 骨架屏 ========== */
    @keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
    .skeleton {
      background: linear-gradient(90deg, #e8eaed 25%, #f0f1f3 50%, #e8eaed 75%);
      background-size: 200px 100%;
      animation: shimmer 1.5s ease-in-out infinite;
      border-radius: 4px;
    }
    .sk-card {
      border: 1px solid var(--border); border-radius: var(--radius); padding: 20px;
      background: #fff; display: flex; flex-direction: column; gap: 10px;
    }
    .sk-line { height: 14px; border-radius: 4px; }
    .sk-line-sm { height: 10px; width: 60%; }
    .sk-line-md { height: 16px; width: 85%; }
    .sk-line-lg { height: 20px; width: 40%; }
    .sk-line-xs { height: 10px; width: 45%; }
    .nav-spacer { flex: 1; }
    /* ========== 举报弹窗 ========== */
    .report-radio-group { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
    .report-radio-group label { display: flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; padding: 4px 10px; border: 1px solid var(--border); border-radius: 14px; transition: all 0.15s; }
    .report-radio-group label:has(input:checked) { border-color: #cf222e; background: #ffebe9; color: #cf222e; }
    .report-radio-group input[type="radio"] { accent-color: #cf222e; }
    /* ========== 耕耘日历 ========== */
    .contrib-cal-wrap { margin-top: 20px; }
    .contrib-cal-wrap h3 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
    /* ========== 签到按钮 ========== */
    .signin-btn { padding: 6px 16px; border-radius: 16px; font-size: 13px; border: 1px solid var(--green); background: #fff; color: var(--green); cursor: pointer; transition: all 0.15s; }
    .signin-btn:hover { background: var(--green-light); }
    .signin-btn.done { opacity: 0.6; cursor: default; background: var(--green-light); }
    /* ========== 投票按钮 ========== */
    .vote-bar { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
    .vote-btn { display: flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 14px; font-size: 12px; border: 1px solid var(--border); background: #fff; cursor: pointer; transition: all 0.15s; }
    .vote-btn:hover { background: var(--bg-secondary); }
    .vote-btn.voted { background: var(--green-light); border-color: var(--green); cursor: default; }
    .vote-btn .vote-count { font-weight: 600; }
    /* ========== 匿名统计面板 ========== */
    .anon-stats-panel { position: absolute; bottom: 20px; right: 20px; z-index: 1000; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); font-size: 13px; }
    .anon-stats-panel .anon-title { font-weight: 600; margin-bottom: 4px; }
    .anon-stats-panel .anon-desc { font-size: 11px; color: var(--text-light); }
    @media (max-width: 900px) {
      .view-list-header { padding: 20px 20px 0; }
      .view-list-toolbar { padding: 12px 20px; }
      .lesson-grid { padding: 16px 20px; grid-template-columns: 1fr; }
    }

    /* ========== 删除仓库确认弹窗 ========== */
    .delete-repo-input { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; font-family: inherit; margin-top: 6px; }
    .delete-repo-input:focus { border-color: #cf222e; outline: none; box-shadow: 0 0 0 3px rgba(207,34,46,0.12); }

    /* ========== 仓库设置内联编辑 ========== */
    .repo-edit-btn { font-size: 11px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-secondary); color: var(--text-link); cursor: pointer; font-family: inherit; }
    .repo-edit-btn:hover { background: #ddf4ff; }
    .repo-edit-inline { width: 100%; padding: 6px 10px; border: 1px solid #0969da; border-radius: var(--radius); font-size: 13px; font-family: inherit; }
    .repo-edit-actions { display: flex; gap: 6px; margin-top: 6px; }
    .repo-edit-save { padding: 4px 12px; border: none; border-radius: 4px; background: #238636; color: #fff; font-size: 12px; cursor: pointer; font-family: inherit; }
    .repo-edit-cancel { padding: 4px 12px; border: 1px solid var(--border); border-radius: 4px; background: #fff; font-size: 12px; cursor: pointer; font-family: inherit; }
    .repo-topic-tag { display: inline-block; padding: 2px 10px; margin: 2px; background: #ddf4ff; color: #0969da; border-radius: 12px; font-size: 12px; font-weight: 500; }
    .repo-topic-add { display: inline-block; padding: 2px 10px; margin: 2px; background: var(--bg-secondary); border: 1px dashed var(--border); border-radius: 12px; font-size: 12px; color: var(--text-link); cursor: pointer; }

    /* 仓库操作栏额外按钮 */
    .btn-settings { padding: 4px 12px; border: 1px solid var(--border); border-radius: 6px; background: #fff; font-size: 12px; cursor: pointer; font-family: inherit; color: var(--text); }
    .btn-settings:hover { background: var(--bg-secondary); }
    .btn-delete-repo { padding: 4px 12px; border: 1px solid #ffa39e; border-radius: 6px; background: #fff1f0; font-size: 12px; cursor: pointer; font-family: inherit; color: #cf222e; }
    .btn-delete-repo:hover { background: #ffe2e0; }

    /* ========== 文件行操作按钮 ========== */
    .file-row-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; }
    .repo-file-item:hover .file-row-actions { opacity: 1; }
    .file-action-btn { padding: 2px 6px; font-size: 12px; border: 1px solid transparent; border-radius: 4px; background: none; cursor: pointer; font-family: inherit; color: var(--text-light); }
    .file-action-btn:hover { background: var(--bg-secondary); color: var(--text); border-color: var(--border); }
    .file-action-btn.danger:hover { color: #cf222e; background: #fff1f0; border-color: #ffa39e; }

    /* ========== 星级评分 ========== */
    .star-rating { display: inline-flex; gap: 2px; cursor: pointer; }
    .star-rating .star { font-size: 20px; color: #d0d7de; transition: color 0.15s, transform 0.15s; }
    .star-rating .star.active { color: #f5a623; }
    .star-rating .star:hover { transform: scale(1.2); color: #f5a623; }
    .star-rating.readonly .star { cursor: default; }
    .star-rating.readonly .star:hover { transform: none; }
    .rating-summary { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .rating-avg { font-size: 28px; font-weight: 700; color: #f5a623; }
    .rating-count { font-size: 12px; color: var(--text-light); }
    .rating-comment { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; font-family: inherit; resize: vertical; min-height: 50px; margin-top: 8px; }

    /* ========== 热度榜 ========== */
    .hot-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); }
    .hot-tab { padding: 8px 16px; font-size: 13px; border: none; background: none; color: var(--text-light); cursor: pointer; font-family: inherit; border-bottom: 2px solid transparent; transition: all 0.15s; }
    .hot-tab:hover { color: var(--text); border-bottom-color: #d0d7de; }
    .hot-tab.active { color: #cf222e; font-weight: 600; border-bottom-color: #cf222e; }
    .hot-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: #fff; transition: box-shadow 0.15s; cursor: pointer; }
    .hot-card:hover { box-shadow: var(--shadow); }
    .hot-card-rank { font-size: 28px; font-weight: 800; color: #d0d7de; }
    .hot-card-rank.r1 { color: #f5a623; } .hot-card-rank.r2 { color: #8899aa; } .hot-card-rank.r3 { color: #cd7f32; }
    .hot-card-title { font-size: 15px; font-weight: 600; color: var(--text-link); margin: 4px 0; }
    .hot-card-meta { font-size: 12px; color: var(--text-light); display: flex; gap: 10px; flex-wrap: wrap; }
    .hot-card-score { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #f5a623; font-weight: 600; }

    /* ---------- 活动动态 ---------- */
    .activity-feed { padding: 16px; }
    .activity-item { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; background: #fff; transition: box-shadow 0.15s; cursor: pointer; align-items: flex-start; }
    .activity-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .activity-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
    .activity-content { flex: 1; min-width: 0; }
    .activity-header { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
    .activity-user { font-weight: 600; color: var(--text); font-size: 14px; }
    .activity-action { color: var(--text-light); font-size: 13px; }
    .activity-title { font-size: 15px; font-weight: 600; color: var(--text-link); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .activity-meta { font-size: 12px; color: var(--text-light); display: flex; gap: 12px; flex-wrap: wrap; }
    .activity-time { font-size: 12px; color: var(--text-light); flex-shrink: 0; white-space: nowrap; }

    /* ---------- 贡献榜 ---------- */
    .contributors-board { padding: 16px; }
    .contributors-podium { display: flex; justify-content: center; align-items: flex-end; gap: 16px; margin-bottom: 32px; padding: 24px 0; }
    .podium-item { text-align: center; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; flex: 1; max-width: 200px; transition: transform 0.15s; }
    .podium-item:hover { transform: translateY(-2px); }
    .podium-1 { order: 2; border-color: #ffd700; border-width: 2px; box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2); }
    .podium-2 { order: 1; border-color: #c0c0c0; border-width: 2px; }
    .podium-3 { order: 3; border-color: #cd7f32; border-width: 2px; }
    .podium-medal { font-size: 36px; margin-bottom: 8px; }
    .podium-name { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 10px; word-break: break-all; }
    .podium-stats { font-size: 12px; color: var(--text-light); line-height: 1.8; margin-bottom: 8px; }
    .podium-score { font-size: 14px; font-weight: 700; }
    .contributors-list { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; }
    .contributors-list-header { display: grid; grid-template-columns: 60px 1fr 80px 80px 80px; padding: 10px 16px; background: #f6f8fa; font-size: 12px; font-weight: 600; color: var(--text-light); border-bottom: 1px solid var(--border); }
    .contributor-row { display: grid; grid-template-columns: 60px 1fr 80px 80px 80px; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 13px; align-items: center; transition: background 0.15s; }
    .contributor-row:last-child { border-bottom: none; }
    .contributor-row:hover { background: #f6f8fa; }
    .contrib-rank { font-weight: 600; color: var(--text-light); }
    .contrib-name { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .contrib-stat { color: var(--text-light); }
    .contrib-score { font-weight: 600; color: #f5a623; }

    @media (max-width: 768px) {
      .contributors-podium { flex-direction: column; align-items: center; }
      .podium-item { max-width: 280px; width: 100%; order: unset !important; }
      .contributors-list-header { grid-template-columns: 40px 1fr 60px 60px; font-size: 11px; padding: 8px 12px; }
      .contributors-list-header span:nth-child(5) { display: none; }
      .contributor-row { grid-template-columns: 40px 1fr 60px 60px; font-size: 12px; padding: 8px 12px; }
      .contributor-row .contrib-score { display: none; }
    }

    /* ========== 关联仓库面板 ========== */
    .related-repo-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; background: #fff; transition: box-shadow 0.15s; }
    .related-repo-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .related-repo-icon { font-size: 24px; flex-shrink: 0; }
    .related-repo-body { flex: 1; min-width: 0; }
    .related-repo-name { font-size: 15px; font-weight: 600; color: var(--text-link); word-break: break-all; }
    .related-repo-name a { color: inherit; text-decoration: none; }
    .related-repo-name a:hover { text-decoration: underline; }
    .related-repo-desc { font-size: 13px; color: var(--text); margin-top: 4px; }
    .related-repo-meta { font-size: 12px; color: var(--text-light); margin-top: 6px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
    .related-repo-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
    .related-badge-ref { background: #ddf4ff; color: #0969da; }
    .related-badge-dep { background: #fff8c5; color: #9a6700; }
    .related-badge-fork { background: #dafbe1; color: #1a7f37; }
    .related-badge-collab { background: #f3e8ff; color: #8250df; }
    .related-repo-type { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; background: #f6f8fa; color: #57606a; }
    .related-repo-type.type-错题本 { background: #fff1f0; color: #cf222e; }
    .related-repo-type.type-教案库 { background: #ddf4ff; color: #0969da; }
    .related-repo-type.type-习题集 { background: #dafbe1; color: #1a7f37; }
    .related-repo-type.type-资源包 { background: #f3e8ff; color: #8250df; }
    .related-repo-empty { text-align: center; padding: 40px 20px; color: var(--text-light); }
    .related-repo-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
    .related-repo-header-info { flex: 1; }
    .related-repo-header-info h3 { margin: 0 0 4px 0; font-size: 17px; }
    .related-repo-header-info .meta { font-size: 12px; color: var(--text-light); display: flex; gap: 10px; flex-wrap: wrap; }
    .related-repo-tags { display: flex; gap: 4px; flex-wrap: wrap; }
    .related-repo-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; background: #f6f8fa; color: #57606a; }

    /* ========== 仓库 Topics 筛选 ========== */
    .topic-filter-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; align-items: center; }
    .topic-filter-tag { padding: 3px 12px; border-radius: 14px; font-size: 12px; border: 1px solid var(--border); background: #fff; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
    .topic-filter-tag:hover { background: var(--bg-secondary); border-color: #0969da; }
    .topic-filter-tag.active { background: #0969da; color: #fff; border-color: #0969da; }
    .topic-filter-clear { padding: 3px 12px; font-size: 12px; color: var(--text-light); cursor: pointer; border: none; background: none; }
    .topic-filter-clear:hover { color: #cf222e; text-decoration: underline; }
    .rc-topics { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
    .rc-topic-tag { padding: 1px 7px; border-radius: 10px; font-size: 10px; background: #f6f8fa; color: #57606a; white-space: nowrap; }

    /* ========== 标签云/标签墙 ========== */
    .tag-cloud-wrap { max-width: 1100px; margin: 0 auto; padding: 20px 16px; }
    .tag-cloud-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
    .tag-cloud-header h1 { font-size: 24px; font-weight: 700; margin: 0; }
    .tag-cloud-container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 20px 0; }
    .tag-cloud-item { display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 14px; cursor: pointer; transition: all 0.2s; border: 1px solid transparent; white-space: nowrap; }
    .tag-cloud-item:hover { transform: scale(1.08); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    .tag-cloud-size-s { font-size: 12px; padding: 4px 10px; }
    .tag-cloud-size-m { font-size: 15px; padding: 6px 14px; }
    .tag-cloud-size-l { font-size: 18px; padding: 8px 18px; font-weight: 600; }
    .tag-cloud-size-xl { font-size: 22px; padding: 10px 22px; font-weight: 700; }
    .tag-cloud-count { font-size: 10px; color: var(--text-light); margin-left: 2px; }
    .tag-cloud-filtered { margin: 12px 0; font-size: 13px; color: var(--text-link); }
    .tag-cloud-filtered button { margin-left: 8px; font-size: 12px; background: none; border: none; color: var(--text-light); cursor: pointer; }
    .tag-cloud-filtered button:hover { color: #cf222e; }

    /* ========== 导入标签弹窗 ========== */
    .import-topics-modal-body { max-height: 300px; overflow-y: auto; }
    .import-topics-source-list { display: flex; flex-direction: column; gap: 6px; }
    .import-topics-source-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: background 0.15s; }
    .import-topics-source-item:hover { background: var(--bg-secondary); }
    .import-topics-source-item.selected { border-color: #0969da; background: #ddf4ff; }
    .import-topics-preview { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; padding: 10px; background: #f6f8fa; border-radius: var(--radius); min-height: 32px; }
    .import-topics-preview .about-topic { cursor: default; }

    /* ========== P1: 标签管理面板 ========== */
    .label-hot-section { margin-bottom: 4px; }
    .label-hot-list { display: flex; flex-wrap: wrap; gap: 6px; }
    .label-hot-chip { display: inline-block; padding: 3px 10px; border-radius: 14px; font-size: 11px; cursor: pointer; transition: transform 0.15s,box-shadow 0.15s; }
    .label-hot-chip:hover { transform: scale(1.06); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
    .label-manager-list { display: flex; flex-direction: column; gap: 6px; }
    .label-manager-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
    .label-manager-swatch { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; color: #fff; min-width: 50px; text-align: center; }
    .label-manager-desc { flex: 1; font-size: 11px; color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .label-manager-actions { display: flex; gap: 4px; }
    .label-manager-actions button { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 12px; transition: background 0.15s; }
    .label-manager-actions button:hover { background: var(--bg-secondary); }

    /* ========== P2: 标签合并 ========== */
    .label-merge-select { width: 100%; padding: 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; }

    /* ========== P3: 元数据 ========== */
    .wisedom-editor { width: 100%; height: 360px; font-family: Consolas, Monaco, monospace; font-size: 13px; padding: 10px; border: 1px solid var(--border); border-radius: 4px; resize: vertical; }

    /* ========== 信用面板 ========== */
    .dual-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
    @media (max-width: 700px) { .dual-panel { grid-template-columns: 1fr; } }
    .credit-card { background: linear-gradient(135deg, #f8f9fa 0%, #f0f4ff 100%); border: 2px solid #d0d7de; border-radius: var(--radius); padding: 20px; }
    .credit-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    .credit-circle { width: 64px; height: 64px; border-radius: 50%; border: 4px solid; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fff; }
    .credit-info { flex: 1; min-width: 140px; }
    .credit-info h3 { font-size: 16px; margin-bottom: 4px; }
    .credit-level-badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; color: #fff; margin-bottom: 6px; }
    .credit-permission { font-size: 12px; color: var(--text-light); margin-bottom: 4px; }
    .credit-streak { font-size: 12px; color: #bf8700; font-weight: 600; }
    .credit-violation { font-size: 11px; color: #cf222e; }
    .credit-progress-bar { width: 100%; height: 6px; background: #e8e8e8; border-radius: 3px; margin: 14px 0 4px; overflow: hidden; }
    .credit-progress-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
    .credit-progress-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-light); padding: 0 2px; margin-bottom: 10px; }
    .credit-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
    .credit-appeal-btn { padding: 6px 14px; border: 1px solid #d0d7de; border-radius: 6px; background: #fff; font-size: 12px; cursor: pointer; transition: background 0.15s; }
    .credit-appeal-btn:hover:not(:disabled) { background: #f3f4f6; }
    .credit-appeal-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .credit-learn-btn { padding: 6px 14px; border: 1px solid #0969da; border-radius: 6px; background: #ddf4ff; color: #0969da; font-size: 12px; cursor: pointer; transition: background 0.15s; }
    .credit-learn-btn:hover:not(:disabled) { background: #b5e4ff; }
    .credit-learn-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ========== 声望消费 ========== */
    .rep-spend-section { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 16px; }
    .rep-spend-section h4 { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
    .rep-spend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
    .rep-spend-btn { padding: 8px 12px; border: 1px solid #d0d7de; border-radius: 6px; background: #f6f8fa; font-size: 12px; cursor: pointer; text-align: left; transition: background 0.15s, border-color 0.15s; }
    .rep-spend-btn:hover:not(:disabled) { background: #e8f0fe; border-color: #0969da; }
    .rep-spend-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .rep-spend-btn span { display: block; font-size: 10px; color: var(--text-light); margin-top: 2px; }

    /* ========== 规则说明卡片 ========== */
    .rep-rules-card { background: #fffbe6; border: 1px solid #ffe58f; border-radius: var(--radius); padding: 14px 18px; }

    /* ========== 园丁失职分面板 ========== */
    .dm-card { background: linear-gradient(135deg, #fafbfc 0%, #fff8f5 100%); border: 2px solid #f0d0c0; border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
    .dm-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    .dm-badge { width: 64px; height: 64px; border-radius: 50%; border: 4px solid; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fff; }
    .dm-info { flex: 1; min-width: 140px; }
    .dm-info h3 { font-size: 16px; margin-bottom: 4px; }
    .dm-level-badge { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; color: #fff; margin-bottom: 6px; }
    .dm-gardener-perm { font-size: 12px; color: var(--text-light); margin-bottom: 4px; }
    .dm-link-note { font-size: 11px; color: #cf222e; margin-top: 2px; }
    .dm-progress-bar { width: 100%; height: 6px; background: #e8e8e8; border-radius: 3px; margin: 14px 0 4px; overflow: hidden; }
    .dm-progress-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
    .dm-progress-labels { display: flex; justify-content: space-between; font-size: 10px; padding: 0 2px; margin-bottom: 10px; }
    .dm-threshold-info { font-size: 11px; color: #cf222e; background: #ffebe9; border: 1px solid #ffc1ba; border-radius: 6px; padding: 6px 10px; margin: 8px 0; display: flex; gap: 8px; flex-wrap: wrap; }
    .dm-threshold-info span { background: #fff; padding: 2px 6px; border-radius: 3px; font-weight: 600; }
    .dm-history { margin: 10px 0; }
    .dm-history h4 { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
    .dm-recovery-section { background: #f6f8fa; border: 1px solid #d0d7de; border-radius: var(--radius); padding: 14px 16px; margin-top: 12px; }
    .dm-recovery-section h4 { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
    .dm-recovery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
    .dm-recovery-btn { padding: 8px 12px; border: 1px solid #d0d7de; border-radius: 6px; background: #fff; font-size: 12px; cursor: pointer; text-align: left; transition: background 0.15s, border-color 0.15s; }
    .dm-recovery-btn:hover:not(:disabled) { background: #f0f9ff; border-color: #0969da; }
    .dm-recovery-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .dm-recovery-btn span { display: block; font-size: 10px; color: var(--text-light); margin-top: 2px; }
    .dm-cooldowns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 11px; color: #bf8700; }
    .dm-cooldowns span { background: #fffbe6; padding: 3px 8px; border-radius: 4px; border: 1px solid #ffe58f; }

    /* ========== 官方园丁面板（repo 侧边栏） ========== */
    #aboutGardenersSection {
      border-top: 2px solid #d2a8ff;
      padding-top: 12px;
    }
    #aboutGardenersSection .about-section-title {
      color: #8250df;
    }
    .official-gardener-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 8px;
    }
    .official-gardener-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 8px;
      background: #faf8ff;
      border: 1px solid #e8e1f5;
      cursor: default;
      transition: background 0.15s;
    }
    .official-gardener-card:hover {
      background: #f3efff;
    }
    .ogc-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: linear-gradient(135deg, #8250df, #bf3989);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .ogc-info {
      flex: 1;
      min-width: 0;
    }
    .ogc-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }
    .ogc-role {
      font-size: 11px;
      color: #8250df;
      font-weight: 500;
      margin-bottom: 2px;
    }
    .ogc-meta {
      display: flex;
      gap: 8px;
      font-size: 10px;
      color: var(--text-light);
    }
    .ogc-stat {
      background: #f0edf5;
      padding: 1px 6px;
      border-radius: 3px;
    }
    .ogc-note {
      background: #faf8ff;
      padding: 6px 10px;
      border-radius: 6px;
      border: 1px dashed #d2a8ff;
    }

    /* ========== 园丁推荐弹窗 ========== */
    .gr-intro {
      padding: 12px;
      background: #f6f8fa;
      border-radius: 8px;
      margin-bottom: 12px;
      font-size: 13px;
      color: var(--text);
      line-height: 1.6;
    }
    .gr-intro p { margin: 0 0 6px 0; }
    .gr-legend {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      font-size: 11px;
      color: var(--text-light);
    }
    .gr-legend span {
      background: #fff;
      padding: 2px 8px;
      border-radius: 4px;
      border: 1px solid #d0d7de;
    }
    .gr-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .gr-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 8px;
      border: 1px solid #d0d7de;
      background: #fff;
      transition: box-shadow 0.15s, border-color 0.15s;
    }
    .gr-card:hover {
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      border-color: #0969da;
    }
    .gr-card.gr-top {
      border-left: 4px solid #0969da;
      background: #f6f8fa;
    }
    .gr-rank {
      font-size: 20px;
      font-weight: 700;
      width: 36px;
      text-align: center;
      flex-shrink: 0;
    }
    .gr-main {
      flex: 1;
      min-width: 0;
    }
    .gr-user {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
    }
    .gr-username {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }
    .gr-composite {
      font-size: 12px;
      font-weight: 700;
      color: #0969da;
      background: #ddf4ff;
      padding: 2px 8px;
      border-radius: 10px;
    }
    .gr-stats {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      font-size: 11px;
      margin-bottom: 4px;
    }
    .gr-stat-item {
      color: var(--text-light);
      padding: 1px 4px;
      border-radius: 3px;
    }
    .gr-stat-item.gr-warn {
      color: #cf222e;
      font-weight: 600;
    }
    .gr-contrib {
      display: flex;
      gap: 10px;
      font-size: 10px;
      color: var(--text-light);
    }
    .gr-action {
      flex-shrink: 0;
    }
    .gr-profile-link {
      display: inline-block;
      padding: 4px 10px;
      font-size: 11px;
      border: 1px solid #d0d7de;
      border-radius: 6px;
      color: var(--text-link);
      text-decoration: none;
      transition: background 0.15s, border-color 0.15s;
    }
    .gr-profile-link:hover {
      background: #ddf4ff;
      border-color: #0969da;
    }
    .gr-footer {
      background: #f6f8fa;
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #d0d7de;
    }

    /* ========== 园丁申请弹窗 ========== */
    .apply-intro {
      padding: 12px 14px;
      background: #f0f7ff;
      border: 1px solid #b6d4fe;
      border-radius: 8px;
      margin-bottom: 16px;
      font-size: 13px;
      color: var(--text);
      line-height: 1.6;
    }
    .apply-intro p { margin: 0 0 8px 0; color: #0550ae; }
    .apply-intro ul { margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: var(--text-light); }
    .apply-intro ul li { margin-bottom: 3px; }

    /* ========== 园丁管理界面 ========== */
    .gm-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      border-bottom: 1px solid var(--border);
      padding-bottom: 8px;
    }
    .gm-tab {
      padding: 6px 14px;
      border: none;
      background: transparent;
      color: var(--text-light);
      font-size: 13px;
      border-radius: 6px 6px 0 0;
      cursor: pointer;
      transition: all 0.15s;
    }
    .gm-tab:hover { background: var(--bg-secondary); color: var(--text); }
    .gm-tab.active {
      background: var(--bg);
      color: var(--text);
      font-weight: 600;
      border: 1px solid var(--border);
      border-bottom-color: var(--bg);
    }
    .gm-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .gm-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--bg);
      transition: box-shadow 0.15s;
    }
    .gm-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .gm-item-info {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .gm-badge { font-size: 18px; }
    .gm-user { font-weight: 600; color: var(--text); }
    .gm-role { font-size: 12px; padding: 2px 8px; border-radius: 4px; background: var(--bg-secondary); }
    .gm-credit, .gm-rep { font-size: 11px; color: var(--text-light); }
    .gm-time { font-size: 11px; }
    .gm-item-actions { display: flex; gap: 6px; }
    .gm-appoint-form {
      padding: 16px;
      background: var(--bg-secondary);
      border-radius: 8px;
    }
    .gm-appoint-form .form-group { margin-bottom: 14px; }
    .gm-appoint-form label {
      display: block;
      font-size: 13px;
      font-weight: 500;
      margin-bottom: 6px;
      color: var(--text);
    }
    .gm-appoint-form input,
    .gm-appoint-form select {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 14px;
      background: var(--bg);
    }
    .gm-appoint-form input:focus,
    .gm-appoint-form select:focus {
      outline: none;
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(9,105,218,0.15);
    }

    /* ========== 选举系统 ========== */
    .election-hero {
      text-align: center;
      padding: 32px 16px 24px;
      background: linear-gradient(135deg, #f6f8fa 0%, #f0f7ff 100%);
      border-radius: 12px;
      margin-bottom: 24px;
      border: 1px solid #d0d7de;
    }
    .election-hero h2 { font-size: 24px; font-weight: 700; margin: 0 0 8px; color: var(--text); }
    .election-hero p { font-size: 14px; color: var(--text-light); margin: 0 0 16px; }
    .election-section-title {
      font-size: 16px;
      font-weight: 600;
      margin: 24px 0 12px;
      padding-bottom: 8px;
      border-bottom: 2px solid #d0d7de;
    }
    .election-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .election-card {
      padding: 14px 16px;
      border-radius: 10px;
      border: 1px solid #d0d7de;
      background: #fff;
      transition: box-shadow 0.15s;
    }
    .election-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .ec-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .ec-name { font-size: 15px; }
    .ec-badge {
      font-size: 11px;
      padding: 2px 10px;
      border-radius: 10px;
      font-weight: 600;
    }
    .ec-badge.active { background: #d4f4e2; color: #1a7f37; }
    .ec-badge.finished { background: #f0edf5; color: #8250df; }
    .ec-meta {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      font-size: 12px;
      color: var(--text-light);
      margin-bottom: 8px;
    }
    .ec-winners {
      font-size: 13px;
      color: #1a7f37;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .ec-winners-banner {
      background: #d4f4e2;
      border: 1px solid #4ac26b;
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 700;
      color: #1a7f37;
      margin-bottom: 16px;
    }
    .ec-actions { display: flex; gap: 6px; }
    .election-detail { max-width: 780px; margin: 0 auto; }
    .ed-back { margin-bottom: 12px; font-size: 13px; }
    .ed-meta {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      font-size: 12px;
      color: var(--text-light);
      margin-bottom: 16px;
    }
    .text-green { color: #1a7f37; font-weight: 600; }
    .text-orange { color: #bf8700; font-weight: 600; }
    .candidate-list { display: flex; flex-direction: column; gap: 8px; }
    .candidate-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 8px;
      border: 1px solid #d0d7de;
      background: #fff;
    }
    .candidate-card.cc-winner {
      border-left: 4px solid #1a7f37;
      background: #f0faf2;
    }
    .cc-rank { font-size: 16px; font-weight: 700; width: 36px; text-align: center; flex-shrink: 0; }
    .cc-info { flex: 1; min-width: 0; }
    .cc-info strong { font-size: 14px; display: block; }
    .cc-stats {
      display: flex;
      gap: 12px;
      font-size: 11px;
      color: var(--text-light);
      margin-top: 2px;
    }
    .cc-votes {
      font-size: 14px;
      font-weight: 700;
      color: #0969da;
      flex-shrink: 0;
    }
    .cc-check { font-size: 13px; cursor: pointer; white-space: nowrap; }
    .election-create-panel {
      padding: 16px;
      background: #f6f8fa;
      border: 1px solid #d0d7de;
      border-radius: 10px;
      margin-bottom: 20px;
    }
    .election-create-panel h4 { margin: 0 0 12px; font-size: 15px; }
    .reward-log {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 12px;
      color: var(--text-light);
    }
    .reward-item {
      padding: 4px 10px;
      background: #f0faf2;
      border-radius: 4px;
      border-left: 3px solid #1a7f37;
    }

    /* 选举 - 英雄区规则摘要 */
    .ec-hero-rules {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      font-size: 12px;
      color: var(--text-light);
      background: #f0f7ff;
      padding: 8px 14px;
      border-radius: 8px;
      border: 1px solid #d0e0f0;
      margin-top: 4px;
    }
    .ec-hero-rules span::before { content: ''; margin-right: 2px; }
    /* 选举 - 阶段标签 */
    .ec-phase-badge {
      font-size: 12px;
      padding: 2px 10px;
      border-radius: 10px;
      font-weight: 600;
      background: #f0f7ff;
      color: #0969da;
    }
    /* 选举 - 确认阶段标签 */
    .ec-badge.confirm {
      background: #fff3cd;
      color: #856404;
    }
    /* 选举 - 倒计时 */
    .ec-countdown {
      padding: 8px 14px;
      background: #fef5e7;
      border: 1px solid #f9e79f;
      border-radius: 8px;
      margin-bottom: 12px;
      font-size: 13px;
    }
    .ec-time-left { color: #bf8700; font-weight: 600; }
    .ec-timeout { color: #cf222e; font-weight: 600; }
    /* 选举 - 描述 */
    .ec-desc {
      font-size: 13px;
      color: var(--text-light);
      padding: 8px 12px;
      background: #f6f8fa;
      border-radius: 6px;
      margin-bottom: 12px;
      border-left: 3px solid #d0d7de;
    }
    /* 选举 - 投票输入 */
    .ec-vote-input {
      width: 52px;
      text-align: center;
      padding: 4px 6px;
      border: 1px solid #d0d7de;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      outline: none;
      transition: border-color 0.15s;
    }
    .ec-vote-input:focus {
      border-color: #0969da;
      box-shadow: 0 0 0 2px rgba(9,105,218,0.15);
    }
    /* 选举 - 投票分配摘要 */
    .ec-vote-summary {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      padding: 10px 14px;
      background: #f0f7ff;
      border: 1px solid #b6d2f0;
      border-radius: 8px;
      margin-top: 12px;
      font-size: 13px;
      color: #0550ae;
    }
    .ec-vote-summary strong {
      font-size: 15px;
      color: #0969da;
    }
    /* 选举 - 已投票提示 */
    .ec-voted-notice {
      padding: 8px 14px;
      background: #d4f4e2;
      border: 1px solid #4ac26b;
      border-radius: 8px;
      font-size: 13px;
      color: #1a7f37;
      font-weight: 600;
      margin-top: 12px;
    }
    /* 选举 - 确认区域 */
    .ec-confirm-section {
      padding: 14px 16px;
      background: #fffdf5;
      border: 1px solid #f9e79f;
      border-radius: 10px;
      margin-top: 16px;
    }
    .ec-confirm-section h4 {
      margin: 0 0 10px;
      font-size: 15px;
    }
    .cc-confirm-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 0;
      border-bottom: 1px solid #f0edf5;
      font-size: 14px;
    }
    .cc-confirm-row:last-child { border-bottom: none; }
    .cc-confirm-row span:first-child { font-weight: 600; flex: 1; }
    /* 选举 - 计票规则框 */
    .ec-rules-box {
      padding: 10px 14px;
      background: #f6f8fa;
      border: 1px solid #d0d7de;
      border-radius: 8px;
      font-size: 12px;
      color: var(--text-light);
      margin-top: 12px;
    }
    .ec-rules-box p { margin: 0; }

    /* ====== 合作规范标签切换 ====== */
    .collab-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
    .collab-tab { background: none; border: none; padding: 12px 20px; font-size: 14px; font-weight: 500; color: var(--text-light); cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; font-family: inherit; }
    .collab-tab:hover { color: var(--text-link); }
    .collab-tab.active { color: var(--text-link); border-bottom-color: var(--text-link); font-weight: 600; }

    /* ====== 版权协议卡片 ====== */
    .license-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 20px; transition: box-shadow 0.15s; }
    .license-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
    .lc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .lc-badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; color: #fff; font-weight: 600; }
    .lc-header h3 { margin: 0; font-size: 16px; }
    .license-card p { font-size: 13px; color: var(--text-light); margin-bottom: 10px; line-height: 1.5; }
    .lc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
    .lc-tags span { font-size: 11px; padding: 2px 8px; background: var(--bg-secondary); border-radius: 4px; color: var(--text-light); }
    /* 协议卡片操作按钮 */
    .lc-actions { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
    .lc-actions .btn { font-size: 12px; padding: 4px 10px; }
    /* 自定义协议卡片高亮 */
    .license-card.custom-license { border-color: #8250df; border-style: dashed; background: #faf8ff; }

    /* ====== 协议检查页面 ====== */
    .protocols-hero {
      padding: 28px 20px 20px;
      background: linear-gradient(135deg, #f0faf2 0%, #e8f5e9 100%);
      border-radius: 12px;
      margin-bottom: 24px;
      border: 1px solid #c8e6c9;
    }
    .protocols-hero h2 { font-size: 22px; font-weight: 700; margin: 0 0 8px; color: #2e7d32; }
    .protocols-hero p { font-size: 14px; color: #558b2f; margin: 0; }
    .protocols-panel {
      padding: 16px;
      background: #fff;
      border: 1px solid #d0d7de;
      border-radius: 10px;
      margin-bottom: 20px;
    }
    .protocols-result { margin-bottom: 20px; }
    .pt-score {
      padding: 16px 20px;
      background: #f6f8fa;
      border-radius: 10px;
      border: 1px solid #d0d7de;
      margin-bottom: 16px;
    }
    .pt-score h3 { margin: 0 0 4px; font-size: 18px; }
    .pt-score p { margin: 0; font-size: 13px; color: var(--text-light); }
    .pt-file-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .pt-file-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 14px;
      border-radius: 8px;
      border: 1px solid #d0d7de;
      background: #fff;
      font-size: 14px;
    }
    .pt-file-row.found { background: #f0faf2; border-color: #c8e6c9; }
    .pt-file-row.missing { background: #fef5f5; border-color: #f9c6c6; }
    .pt-file-row.error { background: #fff8e1; border-color: #ffe082; }
    .pt-file-name { font-weight: 600; min-width: 200px; }
    .pt-file-desc { color: var(--text-light); font-size: 12px; flex: 1; }
    .pt-badge {
      font-size: 12px;
      padding: 2px 10px;
      border-radius: 10px;
      font-weight: 600;
      white-space: nowrap;
    }
    .pt-badge.found { background: #d4f4e2; color: #1a7f37; }
    .pt-badge.missing { background: #fde0e0; color: #cf222e; }
    .pt-badge.optional-missing { background: #fef5e7; color: #bf8700; }
    .pt-badge.error { background: #ffe082; color: #8d6e00; }
    .pt-badge.unknown { background: #f0edf5; color: #8250df; }
    .protocols-legend {
      padding: 16px 20px;
      background: #f6f8fa;
      border-radius: 10px;
      border: 1px solid #d0d7de;
    }
    .protocols-legend h4 { margin: 0 0 10px; font-size: 15px; }
    .pt-requirement-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .pt-requirement-table th,
    .pt-requirement-table td {
      padding: 6px 10px;
      border: 1px solid #d0d7de;
      text-align: left;
    }
    .pt-requirement-table th { background: #f0edf5; font-weight: 600; }
    .pt-requirement-table tr:hover { background: #f0f7ff; }

    /* ========== 协作规则可视化配置 ========== */
    .collab-hero {
      padding: 24px 20px 18px;
      background: linear-gradient(135deg, #f0edf5, #dff0ff);
      border-radius: 12px;
      margin-bottom: 16px;
    }
    .collab-hero h2 { margin: 0 0 6px; font-size: 22px; }
    .collab-hero p { color: var(--text-light); margin: 0 0 10px; font-size: 14px; }
    .collab-meta {
      display: flex; gap: 16px;
      font-size: 13px; color: var(--text-light);
    }
    .collab-meta strong { color: var(--text); }
    .collab-preset-bar {
      margin-top: 12px; padding-top: 12px;
      border-top: 1px solid rgba(0,0,0,0.08);
      display: flex; align-items: center; gap: 8px; font-size: 13px;
    }
    .collab-preset-bar select { padding: 4px 10px; border-radius: 6px; border: 1px solid #d0d7de; }

    /* 卡片 */
    .collab-card {
      background: #fff;
      border: 1px solid #d0d7de;
      border-radius: 10px;
      margin-bottom: 12px;
      overflow: hidden;
    }
    .collab-card-hd {
      display: flex; align-items: center; gap: 6px;
      padding: 10px 16px;
      background: #f6f8fa;
      border-bottom: 1px solid #d0d7de;
      font-weight: 600; font-size: 14px;
    }
    .collab-card-icon { font-size: 16px; }
    .collab-card-bd { padding: 14px 16px; }

    /* 文件命名提示 */
    .collab-naming-hint {
      padding: 8px 12px;
      background: #fef5e7;
      border-radius: 6px;
      font-size: 12px; color: #bf8700;
      margin-bottom: 10px;
    }
    .collab-naming-hint code {
      background: rgba(0,0,0,0.06);
      padding: 1px 6px; border-radius: 3px;
      font-size: 12px; color: #8250df;
    }

    /* 标签列表 */
    .collab-tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
    .collab-tag {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 10px;
      background: #edf4ff;
      color: #0969da;
      border-radius: 12px;
      font-size: 12px; font-weight: 500;
    }
    .collab-tag a { color: #0969da; text-decoration: none; font-size: 11px; }
    .collab-tag a:hover { color: #cf222e; }

    /* 文件类型 */
    .collab-ftype-group {
      margin-bottom: 10px;
      padding: 8px;
      border: 1px solid #e8eaed;
      border-radius: 8px;
    }
    .collab-ftype-header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 6px; font-size: 13px;
    }
    .collab-ftype-toggle { font-size: 12px; color: #0969da; text-decoration: none; }
    .collab-ftype-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
      gap: 4px;
    }
    .collab-type-label {
      display: flex; align-items: center; gap: 4px;
      font-size: 12px;
      padding: 3px 6px;
      border-radius: 4px;
      cursor: pointer;
    }
    .collab-type-label:hover { background: #f0f7ff; }

    /* 目录行 */
    .collab-dir-row {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 8px;
      margin-bottom: 6px;
      background: #f6f8fa;
      border-radius: 8px;
      font-size: 13px;
    }
    .collab-dir-handle { cursor: grab; color: #bbb; font-size: 16px; }
    .collab-dir-subject {
      border: 1px solid #d0d7de;
      border-radius: 4px;
      padding: 4px 8px;
      font-size: 13px;
    }
    .collab-dir-grades { display: flex; flex-wrap: wrap; gap: 4px; }
    .collab-dir-grade-input {
      width: 80px;
      border: 1px solid #d0d7de;
      border-radius: 4px;
      padding: 4px 6px;
      font-size: 12px;
    }

    /* 操作按钮 */
    .collab-actions {
      display: flex; gap: 8px;
      padding: 16px 0;
      flex-wrap: wrap;
      justify-content: center;
    }
    .collab-empty {
      padding: 16px;
      text-align: center;
      color: var(--text-light);
      font-size: 13px;
      background: #f6f8fa;
      border-radius: 8px;
    }

    /* 切换开关 */
    .switch {
      position: relative;
      display: inline-block;
      width: 44px; height: 24px;
      vertical-align: middle;
    }
    .switch input { opacity: 0; width: 0; height: 0; }
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: #ccc;
      transition: .3s;
      border-radius: 24px;
    }
    .slider::before {
      content: "";
      position: absolute;
      height: 18px; width: 18px;
      left: 3px; bottom: 3px;
      background-color: #fff;
      transition: .3s;
      border-radius: 50%;
    }
    input:checked + .slider { background: #2da44e; }
    input:checked + .slider::before { transform: translateX(20px); }

    /* ========== 数据可视化（Insights） ========== */
    .insights-hero {
      padding: 24px 20px 18px;
      background: linear-gradient(135deg, #e8f5e9, #e3f2fd);
      border-radius: 12px;
      margin-bottom: 16px;
    }
    .insights-hero h2 { margin: 0 0 6px; font-size: 22px; }
    .insights-hero p { color: var(--text-light); margin: 0; font-size: 14px; }
    .insights-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }
    .insights-quality-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .insights-card {
      background: #fff;
      border: 1px solid #d0d7de;
      border-radius: 10px;
      padding: 16px;
    }
    .insights-chart { width: 100%; height: 300px; }
    .insights-section { margin-top: 24px; }
    .insights-section h3 { margin: 0 0 12px; font-size: 16px; }

    /* 移动端适配 */
    @media (max-width: 600px) {
      .election-hero { padding: 20px 12px 16px; }
      .election-hero h2 { font-size: 20px; }
      .candidate-card { flex-wrap: wrap; }
      .ec-meta { gap: 8px; }
      .ec-hero-rules { flex-direction: column; gap: 6px; }
      .ec-vote-summary { flex-direction: column; align-items: flex-start; gap: 6px; }
      .cc-confirm-row { flex-wrap: wrap; gap: 8px; }
      .pt-file-row { flex-wrap: wrap; }
      .pt-file-name { min-width: auto; width: 100%; }
      .pt-requirement-table { font-size: 11px; }
      .pt-requirement-table th, .pt-requirement-table td { padding: 4px 6px; }

      .collab-hero { padding: 16px 12px 12px; }
      .collab-hero h2 { font-size: 18px; }
      .collab-meta { flex-direction: column; gap: 4px; }
      .collab-dir-row { flex-wrap: wrap; }
      .collab-dir-grade-input { width: 60px; }
      .collab-actions { flex-direction: column; }
      .collab-ftype-grid { grid-template-columns: repeat(3, 1fr); }

      .insights-grid { grid-template-columns: 1fr; }
      .insights-quality-grid { grid-template-columns: 1fr; }
      .insights-chart { height: 250px; }
      .insights-hero h2 { font-size: 18px; }
    }

    /* ========== 高级分析：等级徽章 ========== */
    .grade-badge-S, .grade-badge-A, .grade-badge-B, .grade-badge-C {
      display: inline-block; padding: 3px 10px; border-radius: 12px;
      font-size: 11px; font-weight: 700; letter-spacing: 1px;
    }
    .grade-badge-S { background: #fff8e1; color: #b8860b; border: 1px solid #ffd700; }
    .grade-badge-A { background: #f0f9f0; color: #2d8a4e; border: 1px solid #91cc75; }
    .grade-badge-B { background: #e8f0fe; color: #3b6fc5; border: 1px solid #91a7ff; }
    .grade-badge-C { background: #f5f5f5; color: #666; border: 1px solid #ccc; }

    /* ========== 批注模式 ========== */
    .anno-toolbar-inner {
      display: flex; gap: 4px;
    }
    .anno-btn {
      padding: 5px 10px; border: none; border-radius: 5px;
      font-size: 12px; cursor: pointer; white-space: nowrap;
      background: #f0f0f0; color: #333; transition: all 0.15s;
    }
    .anno-btn:hover { background: #e0e0e0; }
    .anno-btn-highlight { background: #fff3cd; }
    .anno-btn-highlight:hover { background: #ffeaa7; }
    .anno-btn-resolve { background: #d4edda; color: #155724; }
    .anno-btn-resolve:hover { background: #c3e6cb; }
    .anno-mark { transition: background 0.2s; }
    .anno-mark:hover { opacity: 0.8; }
    .anno-mark.anno-resolved { opacity: 0.6; text-decoration: none; }

    /* 批注详情弹层 */
    .anno-detail-popup {
      animation: fadeIn 0.2s ease;
      overflow: hidden;
    }
    .anno-detail-header {
      padding: 14px 18px; background: #f8f9fa;
      border-bottom: 1px solid #e9ecef;
      display: flex; justify-content: space-between; align-items: center;
      font-size: 14px;
    }
    .anno-badge-resolved, .anno-badge-pending {
      display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px;
    }
    .anno-badge-resolved { background: #d4edda; color: #155724; }
    .anno-badge-pending { background: #fff3cd; color: #856404; }
    .anno-detail-body { padding: 14px 18px; }
    .anno-detail-text { font-size: 13px; color: #333; margin-bottom: 8px; padding: 8px 12px; background: #f8f9fa; border-radius: 6px; border-left: 3px solid #5470c6; }
    .anno-detail-comment { font-size: 13px; color: #5470c6; margin-bottom: 8px; padding: 8px 12px; background: #eef2ff; border-radius: 6px; }
    .anno-detail-meta { font-size: 11px; color: #999; display: flex; gap: 12px; }
    .anno-detail-resolved { margin-top: 8px; font-size: 11px; color: #2d8a4e; padding: 6px 10px; background: #f0f9f0; border-radius: 4px; }
    .anno-detail-actions { padding: 12px 18px; border-top: 1px solid #e9ecef; display: flex; gap: 8px; }
    .anno-action-btn {
      flex: 1; padding: 8px 12px; border: none; border-radius: 6px;
      font-size: 13px; cursor: pointer; transition: all 0.15s;
    }
    .anno-resolve-btn { background: #91cc75; color: #fff; }
    .anno-resolve-btn:hover { background: #7ab862; }
    .anno-delete-btn { background: #f0f0f0; color: #666; }
    .anno-delete-btn:hover { background: #e0e0e0; color: #ee6666; }

    /* ========== 变更审查面板 ========== */
    .change-review-panel {
      background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.15);
      overflow: hidden; margin-bottom: 12px;
    }
    .change-review-header {
      padding: 14px 18px; background: #f8f9fa;
      border-bottom: 1px solid #e9ecef;
    }
    .change-review-header h4 { margin: 0 0 8px; font-size: 15px; }
    .change-stats { display: flex; gap: 12px; font-size: 12px; }
    .change-stat { padding: 2px 8px; border-radius: 10px; }
    .change-stat.pending { background: #fff3cd; color: #856404; }
    .change-stat.accepted { background: #d4edda; color: #155724; }
    .change-stat.rejected { background: #f8d7da; color: #721c24; }
    .change-review-body { padding: 14px 18px; max-height: 60vh; overflow-y: auto; }
    .change-empty { text-align: center; padding: 24px; color: #999; font-size: 14px; }
    .change-list { display: flex; flex-direction: column; gap: 10px; }
    .change-item {
      padding: 12px; background: #fafbfc; border: 1px solid #e5e7eb;
      border-radius: 8px; transition: all 0.2s;
    }
    .change-item:hover { border-color: #5470c6; box-shadow: 0 2px 8px rgba(84,112,198,0.1); }
    .change-item-header {
      display: flex; gap: 10px; font-size: 12px; color: #666; margin-bottom: 8px; align-items: center;
    }
    .change-type { padding: 2px 6px; border-radius: 4px; font-weight: 600; font-size: 11px; }
    .change-type.insert { background: #d4edda; color: #155724; }
    .change-type.delete { background: #f8d7da; color: #721c24; }
    .change-type.modify { background: #fff3cd; color: #856404; }
    .change-author, .change-time { color: #999; }
    .change-item-content { margin-bottom: 10px; }
    .change-old, .change-new {
      font-size: 12px; padding: 4px 8px; border-radius: 4px; margin: 3px 0;
      font-family: var(--font-mono, monospace); max-height: 60px; overflow: hidden;
      white-space: pre-wrap; word-break: break-all;
    }
    .change-old { background: #fff5f5; color: #e53e3e; text-decoration: line-through; }
    .change-new { background: #f0fff4; color: #276749; }
    .change-item-actions { display: flex; gap: 8px; }
    .change-accept-btn, .change-reject-btn {
      padding: 4px 14px; border: 1px solid; border-radius: 4px;
      font-size: 12px; cursor: pointer; transition: all 0.15s;
    }
    .change-accept-btn { background: #f0f9f0; color: #2d8a4e; border-color: #91cc75; }
    .change-accept-btn:hover { background: #91cc75; color: #fff; }
    .change-reject-btn { background: #fff5f5; color: #e53e3e; border-color: #feb2b2; }
    .change-reject-btn:hover { background: #fc8181; color: #fff; }

    /* ========== 语音评论面板 ========== */
    .voice-comment-panel {
      background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.15);
      overflow: hidden;
    }
    .voice-panel-header {
      padding: 14px 18px; background: #f8f9fa;
      border-bottom: 1px solid #e9ecef;
      display: flex; justify-content: space-between; align-items: center;
    }
    .voice-panel-header h4 { margin: 0; font-size: 15px; }
    .voice-count { font-size: 12px; color: #999; }
    .voice-panel-body { padding: 14px 18px; max-height: 40vh; overflow-y: auto; }
    .voice-empty { text-align: center; padding: 24px; color: #999; font-size: 14px; }
    .voice-list { display: flex; flex-direction: column; gap: 8px; }
    .voice-item {
      padding: 12px; background: #fafbfc; border: 1px solid #e5e7eb;
      border-radius: 8px; transition: all 0.2s;
    }
    .voice-item:hover { border-color: #91cc75; }
    .voice-item-header {
      display: flex; gap: 10px; font-size: 12px; color: #666; margin-bottom: 8px;
    }
    .voice-duration { color: #5470c6; font-weight: 600; }
    .voice-item-controls { display: flex; gap: 8px; }
    .voice-play-btn, .voice-delete-btn {
      padding: 4px 14px; border: 1px solid; border-radius: 4px;
      font-size: 12px; cursor: pointer; transition: all 0.15s;
    }
    .voice-play-btn { background: #eef2ff; color: #5470c6; border-color: #91a7ff; }
    .voice-play-btn:hover { background: #5470c6; color: #fff; }
    .voice-delete-btn { background: #f8f9fa; color: #999; border-color: #e5e7eb; }
    .voice-delete-btn:hover { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }

    /* 变更摘要面板 */
    .change-summary-panel { border-top: 1px solid var(--border-default); }

    /* 响应式 */
    @media (max-width: 600px) {
      .change-review-panel, .voice-comment-panel {
        width: 90vw !important; right: 5vw !important;
      }
      .anno-detail-popup { min-width: 280px; max-width: 90vw; }
    }

    /* ========== 杏坛论坛 / 讨论区 ========== */
    .disc-header { padding: 16px 20px 8px; }
    .disc-header h1 { font-size: 24px; font-weight: 700; margin: 0 0 4px; color: var(--text); }
    .disc-header p { color: var(--text-secondary); font-size: 14px; margin: 0; }
    .disc-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
    .disc-categories { display: flex; gap: 8px; flex-wrap: wrap; }
    .disc-cat-btn { padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface-primary); color: var(--text-secondary); font-size: 13px; cursor: pointer; transition: all 0.2s; }
    .disc-cat-btn:hover { background: var(--border-subtle); }
    .disc-cat-btn.active { background: var(--apple-blue); color: #fff; border-color: var(--apple-blue); }
    .disc-create-btn { padding: 8px 16px; border: none; border-radius: var(--radius-full); background: var(--apple-green); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
    .disc-create-btn:hover { opacity: 0.85; transform: scale(1.02); }
    .disc-container { padding: 0 20px 40px; }
    .disc-loading, .disc-empty { padding: 40px 20px; text-align: center; color: var(--text-secondary); font-size: 14px; }

    .disc-item { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background 0.15s; }
    .disc-item:hover { background: var(--surface-secondary); }
    .disc-item-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .disc-item-main { flex: 1; min-width: 0; }
    .disc-title { font-size: 15px; font-weight: 600; color: var(--text); margin: 0 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .disc-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-secondary); }
    .disc-author { display: flex; align-items: center; gap: 6px; }
    .disc-avatar { width: 18px; height: 18px; border-radius: 50%; }
    .disc-time { color: var(--text-disabled); }
    .disc-item-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
    .disc-stats { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-secondary); }
    .disc-reaction-preview { font-size: 12px; color: var(--text-disabled); }
    .disc-pin { color: #d29922; font-size: 12px; }
    .disc-lock { color: var(--text-disabled); font-size: 12px; }
    .disc-category { padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; }

    /* 讨论详情 */
    .disc-detail { padding: 20px; max-width: 800px; margin: 0 auto; }
    .disc-detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    .disc-detail-badges { display: flex; gap: 8px; }
    .disc-detail-category { display: inline-block; padding: 4px 12px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 12px; }
    .disc-detail-title { font-size: 22px; font-weight: 700; margin: 0 0 16px; color: var(--text); line-height: 1.4; }
    .disc-detail-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
    .disc-avatar-lg { width: 32px; height: 32px; border-radius: 50%; }
    .disc-author-info { display: flex; flex-direction: column; }
    .disc-author-name { font-size: 14px; font-weight: 600; color: var(--text); }
    .disc-author-login { font-size: 12px; color: var(--text-secondary); }
    .disc-detail-content { font-size: 15px; line-height: 1.7; color: var(--text); margin-bottom: 24px; padding: 16px 0; border-bottom: 1px solid var(--border-subtle); }
    .disc-detail-content h1, .disc-detail-content h2, .disc-detail-content h3 { margin-top: 20px; margin-bottom: 10px; }
    .disc-detail-content p { margin-bottom: 12px; }
    .disc-detail-content code { background: var(--surface-secondary); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
    .disc-detail-content pre { background: var(--surface-secondary); padding: 16px; border-radius: 8px; overflow-x: auto; }
    .disc-detail-actions { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
    .disc-action-btn { padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface-primary); font-size: 13px; cursor: pointer; transition: all 0.2s; }
    .disc-action-btn:hover { background: var(--surface-secondary); }
    .disc-back { padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface-primary); color: var(--text-link); font-size: 13px; cursor: pointer; transition: all 0.2s; }
    .disc-back:hover { background: var(--surface-secondary); }

    .disc-replies-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
    .disc-replies-title { font-size: 16px; font-weight: 600; margin: 0 0 16px; color: var(--text); }
    .disc-replies-list { display: flex; flex-direction: column; gap: 16px; }
    .disc-reply-item { display: flex; gap: 12px; padding: 16px; background: var(--surface-secondary); border-radius: 12px; }
    .disc-reply-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
    .disc-reply-content { flex: 1; min-width: 0; }
    .disc-reply-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .disc-reply-author { font-size: 13px; font-weight: 600; color: var(--text); }
    .disc-reply-time { font-size: 12px; color: var(--text-disabled); }
    .disc-reply-body { font-size: 14px; line-height: 1.6; color: var(--text); }

    .disc-reply-form { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
    .disc-reply-input { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; resize: vertical; min-height: 80px; background: var(--surface-primary); box-sizing: border-box; }
    .disc-reply-input:focus { outline: none; border-color: var(--apple-blue); box-shadow: 0 0 0 3px rgba(0,122,255,0.1); }
    .disc-reply-btn { align-self: flex-end; padding: 8px 20px; border: none; border-radius: var(--radius-full); background: var(--apple-blue); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
    .disc-reply-btn:hover { opacity: 0.85; }

    /* ========== Wiki 知识库 ========== */
    .wiki-container { max-width: 900px; margin: 0 auto; padding: 20px; }
    .wiki-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
    .wiki-header h1 { font-size: 24px; font-weight: 700; margin: 0; color: var(--text); }
    .wiki-loading, .wiki-error, .wiki-empty { padding: 40px 20px; text-align: center; color: var(--text-secondary); font-size: 14px; }
    .wiki-create-btn { padding: 8px 16px; border: none; border-radius: var(--radius-full); background: var(--apple-blue); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
    .wiki-create-btn:hover { opacity: 0.85; }

    .wiki-category-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
    .wiki-category-tab { padding: 6px 16px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface-primary); color: var(--text-secondary); font-size: 13px; cursor: pointer; transition: all 0.2s; }
    .wiki-category-tab:hover { background: var(--border-subtle); }
    .wiki-category-tab.active { background: var(--apple-blue); color: #fff; border-color: var(--apple-blue); }

    .wiki-pages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
    .wiki-page-card { padding: 20px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: all 0.2s; background: var(--surface-primary); }
    .wiki-page-card:hover { box-shadow: var(--shadow-lg); border-color: var(--apple-blue); transform: translateY(-2px); }
    .wiki-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
    .wiki-page-category { padding: 2px 10px; border-radius: var(--radius-full); background: var(--apple-blue); color: #fff; font-size: 11px; font-weight: 600; }
    .wiki-page-date { font-size: 12px; color: var(--text-disabled); }
    .wiki-page-title { font-size: 16px; font-weight: 600; margin: 0 0 8px; color: var(--text); }
    .wiki-page-preview { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wiki-page-footer { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-disabled); }
    .wiki-page-author { color: var(--text-secondary); }
    .wiki-page-likes { color: #f85149; }

    /* Wiki 页面详情 */
    .wiki-page-container { max-width: 800px; margin: 0 auto; padding: 20px; }
    .wiki-back-btn { padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface-primary); color: var(--text-link); font-size: 13px; cursor: pointer; transition: all 0.2s; margin-bottom: 16px; }
    .wiki-back-btn:hover { background: var(--surface-secondary); }
    .wiki-page-actions { display: flex; gap: 8px; }
    .wiki-edit-btn, .wiki-like-btn { padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface-primary); font-size: 13px; cursor: pointer; transition: all 0.2s; }
    .wiki-edit-btn:hover, .wiki-like-btn:hover { background: var(--surface-secondary); }
    .wiki-like-btn.liked { background: #fff0f0; border-color: #f85149; color: #f85149; }
    .wiki-page-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; color: var(--text-secondary); }
    .wiki-page-body { font-size: 15px; line-height: 1.8; color: var(--text); }
    .wiki-page-body h1, .wiki-page-body h2, .wiki-page-body h3 { margin-top: 24px; margin-bottom: 12px; }
    .wiki-page-body p { margin-bottom: 14px; }
    .wiki-page-body code { background: var(--surface-secondary); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
    .wiki-page-body pre { background: var(--surface-secondary); padding: 16px; border-radius: 8px; overflow-x: auto; }

    /* Wiki 编辑表单 */
    .wiki-form { display: flex; flex-direction: column; gap: 16px; }
    .wiki-form-group { display: flex; flex-direction: column; gap: 6px; }
    .wiki-form-group label { font-size: 14px; font-weight: 600; color: var(--text); }
    .wiki-form-group input, .wiki-form-group select, .wiki-form-group textarea { padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--surface-primary); }
    .wiki-form-group input:focus, .wiki-form-group select:focus, .wiki-form-group textarea:focus { outline: none; border-color: var(--apple-blue); box-shadow: 0 0 0 3px rgba(0,122,255,0.1); }
    .wiki-form-group textarea { min-height: 200px; resize: vertical; }

    /* ---------- Wiki 知识关联 ---------- */
    .wiki-related-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
    .wiki-related-title { font-size: 16px; font-weight: 600; margin: 0 0 16px; color: var(--text); }
    .wiki-related-list { display: grid; gap: 10px; }
    .wiki-related-item { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: all 0.15s; background: #fff; align-items: center; }
    .wiki-related-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-color: #8250df; }
    .wiki-related-icon { font-size: 24px; flex-shrink: 0; }
    .wiki-related-info { flex: 1; min-width: 0; }
    .wiki-related-name { font-size: 14px; font-weight: 600; color: var(--text-link); margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wiki-related-meta { font-size: 12px; color: var(--text-light); display: flex; gap: 12px; flex-wrap: wrap; }

    /* ========== Toast 消息系统 ========== */
    .toast {
      pointer-events: auto;
      min-width: 300px;
      max-width: 450px;
      padding: 14px 18px;
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      display: flex;
      align-items: center;
      gap: 12px;
      animation: slideInRight 0.3s ease-out;
      position: relative;
      overflow: hidden;
    }
    .toast.toast-hiding {
      animation: slideOutRight 0.3s ease-in forwards;
    }
    @keyframes slideInRight {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }
    @keyframes slideOutRight {
      from {
        transform: translateX(0);
        opacity: 1;
      }
      to {
        transform: translateX(100%);
        opacity: 0;
      }
    }
    .toast-success {
      background: #dafbe1;
      border-left: 4px solid #1a7f37;
      color: #1a7f37;
    }
    .toast-error {
      background: #ffebe9;
      border-left: 4px solid #cf222e;
      color: #cf222e;
    }
    .toast-warning {
      background: #fff8c5;
      border-left: 4px solid #bf8700;
      color: #9a6700;
    }
    .toast-info {
      background: #ddf4ff;
      border-left: 4px solid #0969da;
      color: #0969da;
    }
    .toast-icon {
      font-size: 20px;
      flex-shrink: 0;
    }
    .toast-content {
      flex: 1;
      font-size: 14px;
      line-height: 1.5;
    }
    .toast-close {
      background: none;
      border: none;
      font-size: 18px;
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 0.2s;
      padding: 0;
      line-height: 1;
    }
    .toast-close:hover {
      opacity: 1;
    }
    .toast-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3px;
      background: currentColor;
      opacity: 0.3;
      animation: progressShrink linear forwards;
    }
    @keyframes progressShrink {
      from { width: 100%; }
      to { width: 0%; }
    }

/* ========== 骨架屏加载状态 ========== */
.skeleton {
  background: linear-gradient(90deg, #2d333b 25%, #373e47 50%, #2d333b 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius);
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}

.skeleton-title {
  height: 24px;
  margin-bottom: 12px;
}

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.skeleton-card {
  padding: 16px;
  margin-bottom: 12px;
}

.skeleton-card .skeleton-title {
  width: 60%;
}

.skeleton-card .skeleton-text {
  width: 100%;
}

.skeleton-card .skeleton-text:last-child {
  width: 80%;
}

/* ========== Loading 动画 ========== */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: var(--text-link);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: var(--text-light);
}

/* ========== 进度条 ========== */
.progress-bar {
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--text-link), #58a6ff);
  transition: width 0.3s ease;
  position: relative;
}

.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: progress-shimmer 1.5s infinite;
}

@keyframes progress-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ========== 表单验证样式 ========== */
.field-error {
  border-color: var(--apple-red) !important;
  background: rgba(255, 59, 48, 0.1) !important;
}

.field-error:focus {
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.2) !important;
}

.field-success {
  border-color: #238636 !important;
  background: rgba(35, 134, 54, 0.1) !important;
}

.field-success:focus {
  box-shadow: 0 0 0 3px rgba(35, 134, 54, 0.2) !important;
}

/* ========================================
   [8] Water Theme Override
   ======================================== */

/* 基础水境主题变量 + 全局Token覆盖 */
[data-theme="water"] {
  /* 核心色彩：冷白、灰蓝、低饱和 */
  --water-bg-primary: #f0f4f8;
  --water-bg-secondary: #e8eef5;
  --water-blue-light: #d4e4f7;
  --water-blue-medium: #a8c5e8;
  --water-blue-deep: #6b9bd2;
  --water-gray-cool: #c5d0dc;
  --water-white-cold: #f8fafc;
  
  /* 文字颜色：极细字重，低对比度 */
  --water-text-primary: #2d3748;
  --water-text-secondary: #4a5568;
  --water-text-light: #718096;
  --water-font-weight: 300;
  
  /* 毛玻璃效果 */
  --water-glass-bg: rgba(255, 255, 255, 0.25);
  --water-glass-border: rgba(255, 255, 255, 0.4);
  --water-glass-blur: 20px;
  --water-glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);

  /* 全局Token覆盖 - 让基础组件自动适配水境风格 */
  --surface-primary: rgba(255, 255, 255, 0.25);
  --surface-secondary: rgba(255, 255, 255, 0.1);
  --surface-elevated: rgba(255, 255, 255, 0.35);
  --border-default: rgba(255, 255, 255, 0.4);
  --border-subtle: rgba(255, 255, 255, 0.2);
  --shadow-md: 0 8px 32px rgba(31, 38, 135, 0.15);
  --shadow-lg: 0 16px 48px rgba(31, 38, 135, 0.2);
  --text-primary: #2d3748;
  --text-secondary: #4a5568;
}

/* 水境主题 - 晴天模式 */
[data-theme="water"][data-weather="sunny"] {
  --water-sky-gradient: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
  --water-surface-color: rgba(13, 43, 62, 0.8);
  --water-light-color: rgba(255, 220, 150, 0.12);
}

/* 水境主题 - 多云模式 */
[data-theme="water"][data-weather="cloudy"] {
  --water-sky-gradient: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 50%, #64748b 100%);
  --water-surface-color: rgba(26, 37, 48, 0.85);
  --water-light-color: rgba(180, 190, 200, 0.05);
}

/* 水境主题 - 雨天模式 */
[data-theme="water"][data-weather="rainy"] {
  --water-sky-gradient: linear-gradient(135deg, #94a3b8 0%, #64748b 50%, #475569 100%);
  --water-surface-color: rgba(14, 26, 36, 0.9);
  --water-light-color: rgba(100, 130, 160, 0.04);
}

/* 水境主题 - 夜晚模式 */
[data-theme="water"][data-weather="night"] {
  --water-sky-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #020617 100%);
  --water-surface-color: rgba(5, 14, 20, 0.95);
  --water-light-color: rgba(200, 220, 255, 0.03);
}

/* 水境主题 - 水面 Canvas 容器 */
.water-surface-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: all;
  background: var(--water-sky-gradient);
  transition: background 0.8s ease;
}

#waterCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* 水境主题 - 天气切换器 */
.weather-switcher {
  position: fixed;
  top: 80px;
  right: 20px;
  display: flex;
  gap: 8px;
  padding: 8px;
  background: var(--water-glass-bg);
  backdrop-filter: var(--water-glass-blur);
  -webkit-backdrop-filter: var(--water-glass-blur);
  border: 1px solid var(--water-glass-border);
  border-radius: 24px;
  box-shadow: var(--water-glass-shadow);
  z-index: 1000;
}

.weather-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  opacity: 0.6;
}

.weather-btn:hover {
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

.weather-btn.active {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 水境主题 - 鼠标光迹 */
.water-light-trail {
  position: fixed;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--water-light-color) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}

/* 水境主题 - 涟漪效果 */
.water-ripple {
  position: fixed;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  pointer-events: none;
  z-index: 1;
  animation: ripple-expand 2s ease-out forwards;
}

@keyframes ripple-expand {
  0% {
    width: 0;
    height: 0;
    opacity: 0.3;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

/* 水境主题 - 主标题样式 */
[data-theme="water"] .home-hero h1 {
  font-weight: 200 !important;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, #ffffff 0%, #b0d4e8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 20px rgba(176, 212, 232, 0.3);
  font-size: clamp(3rem, 10vw, 6.5rem);
}

/* 水境主题 - 副文案样式 */
[data-theme="water"] .home-hero .motto {
  font-weight: 200 !important;
  opacity: 0.5;
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: var(--water-text-secondary);
}

/* 水境主题 - 统计数字样式 */
[data-theme="water"] .hs-num {
  font-weight: 300 !important;
  font-size: 2rem;
  color: var(--water-text-primary);
}

[data-theme="water"] .hs-label {
  font-weight: 200 !important;
  font-size: 0.8rem;
  color: var(--water-text-light);
}

/* 水境主题 - 按钮样式 */
[data-theme="water"] .btn {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  font-weight: 300;
  transition: all 0.3s ease;
}

[data-theme="water"] .btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

[data-theme="water"] .btn-pri {
  background: rgba(35, 134, 54, 0.15);
  border-color: rgba(35, 134, 54, 0.3);
}

[data-theme="water"] .btn-gold {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.3);
}

/* 水境主题 - 功能卡片毛玻璃效果（暗色透明，露出3D湖面） */
[data-theme="water"] .guide-card,
[data-theme="water"] .home-section .card,
[data-theme="water"] .dash-tab,
[data-theme="water"] .lesson-card {
  background: rgba(15, 30, 55, 0.18) !important;
  backdrop-filter: blur(12px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 32px rgba(0, 20, 50, 0.2) !important;
  transition: all 0.3s ease !important;
}

[data-theme="water"] .guide-card:hover,
[data-theme="water"] .home-section .card:hover,
[data-theme="water"] .dash-tab:hover,
[data-theme="water"] .lesson-card:hover {
  background: rgba(15, 30, 55, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 48px rgba(0, 20, 50, 0.3) !important;
}

/* 水境主题 - 导航栏透明（更通透，露出3D水面） */
[data-theme="water"] .nav-bar {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* 水境主题 - 主内容区透明（露出3D水面） */
[data-theme="water"] .main-content {
  background: transparent !important;
}
[data-theme="water"] .app-layout ~ .view.active {
  background: transparent !important;
}
/* 水境主题 - body也透明 */
[data-theme="water"] body {
  background: transparent !important;
}

/* 水境主题 - 内容区域间距 */
[data-theme="water"] .home-hero {
  padding-bottom: 6rem !important;
}

[data-theme="water"] .home-stats {
  gap: 1.5rem !important;
}

[data-theme="water"] .guide-cards {
  gap: 1.8rem !important;
}

/* 水境主题 - 滚动视差效果 */
[data-theme="water"] .home-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-theme="water"] .home-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 水境主题 - 水滴玻璃按钮（湖面精灵） */
@keyframes water-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-6px) rotate(1deg); }
  50% { transform: translateY(-2px) rotate(-0.5deg); }
  75% { transform: translateY(-8px) rotate(0.5deg); }
}

@keyframes water-wind-sway {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20% { transform: translateX(3px) rotate(2deg); }
  40% { transform: translateX(-2px) rotate(-1.5deg); }
  60% { transform: translateX(1px) rotate(1deg); }
  80% { transform: translateX(-3px) rotate(-2deg); }
}

@keyframes water-ripple-ring {
  0% { box-shadow: 0 0 0 0 rgba(100, 180, 255, 0.4), 0 0 20px rgba(100, 180, 255, 0.15), inset 0 0 20px rgba(255,255,255,0.15); }
  50% { box-shadow: 0 0 0 12px rgba(100, 180, 255, 0), 0 0 30px rgba(100, 180, 255, 0.3), inset 0 0 30px rgba(255,255,255,0.25); }
  100% { box-shadow: 0 0 0 0 rgba(100, 180, 255, 0), 0 0 20px rgba(100, 180, 255, 0.15), inset 0 0 20px rgba(255,255,255,0.15); }
}

@keyframes water-shimmer {
  0% { background-position: -200% 50%; }
  100% { background-position: 200% 50%; }
}

.theme-toggle-water {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  /* 玻璃核心：多色叠加，水漾折射感 */
  background:
    radial-gradient(ellipse at 35% 30%, rgba(255,255,255,0.45) 0%, rgba(180,220,255,0.2) 30%, rgba(70, 130, 200, 0.1) 60%, rgba(30, 60, 100, 0.05) 100%),
    linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(200,230,255,0.1) 40%, rgba(100,160,220,0.08) 60%, rgba(255,255,255,0.15) 100%);
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 8px 32px rgba(31, 38, 135, 0.12),
    inset 0 0 24px rgba(255, 255, 255, 0.2),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  /* 浮动动画 */
  animation: water-float 4s ease-in-out infinite, water-ripple-ring 3s ease-in-out infinite;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1.2);
  overflow: hidden;
}

/* 玻璃按钮上的水纹高光扫过 */
.theme-toggle-water::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255, 255, 255, 0.3) 45%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.3) 55%,
    transparent 60%
  );
  animation: water-shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

/* 玻璃按钮上的图案印刻（水纹纹理） */
.theme-toggle-water::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(100,150,200,0.08) 100%),
    repeating-conic-gradient(rgba(255,255,255,0.03) 0% 3%, transparent 3% 6%);
  pointer-events: none;
}

.theme-toggle-water:hover {
  animation: water-wind-sway 2.5s ease-in-out infinite, water-ripple-ring 1.5s ease-in-out infinite;
  transform: scale(1.12);
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow:
    0 12px 48px rgba(31, 38, 135, 0.2),
    0 0 40px rgba(100, 180, 255, 0.25),
    inset 0 0 30px rgba(255, 255, 255, 0.3),
    inset 0 4px 8px rgba(255, 255, 255, 0.4);
}

.theme-toggle-water:active {
  transform: scale(0.95);
  transition: transform 0.15s ease;
}

/* 经典模式下按钮需要可见背景（白色页面不能全透） */
:root:not([data-theme="water"]) .theme-toggle-water {
  background: rgba(20, 50, 90, 0.65);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.15),
    inset 0 0 18px rgba(255, 255, 255, 0.15);
}
:root:not([data-theme="water"]) .theme-toggle-water:hover {
  background: rgba(30, 70, 130, 0.75);
}

/* 水主题下按钮要更明显（深色湖面不能融入） */
[data-theme="water"] .theme-toggle-water {
  border-color: rgba(255, 255, 255, 0.75);
  background:
    radial-gradient(ellipse at 35% 30%, rgba(255,255,255,0.55) 0%, rgba(180,220,255,0.35) 30%, rgba(70, 130, 200, 0.25) 60%, rgba(30, 60, 100, 0.2) 100%),
    linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(200,230,255,0.2) 40%, rgba(100,160,220,0.18) 60%, rgba(255,255,255,0.25) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 8px 32px rgba(31, 38, 135, 0.18),
    0 0 20px rgba(120, 190, 255, 0.25),
    inset 0 0 24px rgba(255, 255, 255, 0.25),
    inset 0 2px 4px rgba(255, 255, 255, 0.35);
}
[data-theme="water"] .theme-toggle-water:hover {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.3),
    0 12px 48px rgba(31, 38, 135, 0.25),
    0 0 30px rgba(140, 210, 255, 0.35),
    inset 0 0 30px rgba(255, 255, 255, 0.35),
    inset 0 4px 8px rgba(255, 255, 255, 0.45);
}

/* 水境主题 - 性能模式提示 */
.water-performance-indicator {
  position: fixed;
  bottom: 80px;
  right: 20px;
  padding: 8px 12px;
  background: var(--water-glass-bg);
  backdrop-filter: var(--water-glass-blur);
  -webkit-backdrop-filter: var(--water-glass-blur);
  border: 1px solid var(--water-glass-border);
  border-radius: 16px;
  font-size: 12px;
  color: var(--water-text-light);
  z-index: 999;
}

/* ========== backdrop-filter 降级方案（Firefox 和部分移动端兼容） ========== */
@supports not (backdrop-filter: blur(12px)) {
  [data-theme="water"] .guide-card,
  [data-theme="water"] .home-section .card,
  [data-theme="water"] .dash-tab,
  [data-theme="water"] .lesson-card,
  [data-theme="water"] .btn,
  [data-theme="water"] .weather-switcher,
  [data-theme="water"] .theme-toggle-water,
  [data-theme="water"] .water-performance-indicator {
    /* 让3D水面透过来：使用深色透明玻璃替代白色遮挡 */
    background: rgba(10, 25, 50, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  }
  
  [data-theme="water"] .nav-bar {
    background: rgba(10, 25, 45, 0.5) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
  }
}

/* ========== 移动端媒体查询优化 ========== */
@media (max-width: 768px) {
  /* 移动端减小天气切换器尺寸 */
  .weather-switcher {
    top: 70px;
    right: 10px;
    padding: 6px;
    gap: 6px;
  }
  
  .weather-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  
  /* 移动端调整水滴按钮尺寸 */
  .theme-toggle-water {
    width: 52px;
    height: 52px;
    font-size: 23px;
    bottom: 18px;
    right: 18px;
  }
  
  /* 移动端调整主标题大小 */
  [data-theme="water"] .home-hero h1 {
    font-size: clamp(2rem, 8vw, 4rem) !important;
  }
  
  /* 移动端调整副文案 */
  [data-theme="water"] .home-hero .motto {
    font-size: clamp(0.9rem, 3vw, 1.2rem) !important;
  }
  
  /* 移动端调整统计数字 */
  [data-theme="water"] .hs-num {
    font-size: 1.5rem !important;
  }
  
  /* 移动端调整卡片间距 */
  [data-theme="water"] .guide-cards {
    gap: 1rem !important;
  }
  
  [data-theme="water"] .home-stats {
    gap: 1rem !important;
  }
  
  /* 移动端减少毛玻璃模糊度以提升性能 */
  [data-theme="water"] .guide-card,
  [data-theme="water"] .home-section .card,
  [data-theme="water"] .dash-tab,
  [data-theme="water"] .lesson-card {
    backdrop-filter: blur(8px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.1) !important;
  }
  
  /* 移动端导航栏 */
  [data-theme="water"] .nav-bar {
    backdrop-filter: blur(10px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
  }
}

/* 小屏幕手机优化 */
@media (max-width: 480px) {
  .weather-switcher {
    top: 60px;
    right: 8px;
    padding: 4px;
  }
  
  .weather-btn {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  
  .theme-toggle-water {
    width: 44px;
    height: 44px;
    font-size: 20px;
    bottom: 12px;
    right: 12px;
  }
  
  /* 进一步简化移动端动画 */
  [data-theme="water"] .guide-card:hover,
  [data-theme="water"] .home-section .card:hover,
  [data-theme="water"] .dash-tab:hover,
  [data-theme="water"] .lesson-card:hover {
    transform: translateY(-2px) !important;
  }
}

/* ========================================
   [8] Water Theme Override
   ======================================== */

/* 基础水境主题变量 + 全局Token覆盖 */
[data-theme="water"] {
  /* 核心色彩：冷白、灰蓝、低饱和 */
  --water-bg-primary: #f0f4f8;
  --water-bg-secondary: #e8eef5;
  --water-blue-light: #d4e4f7;
  --water-blue-medium: #a8c5e8;
  --water-blue-deep: #6b9bd2;
  --water-gray-cool: #c5d0dc;
  --water-white-cold: #f8fafc;
  
  /* 文字颜色：极细字重，低对比度 */
  --water-text-primary: #2d3748;
  --water-text-secondary: #4a5568;
  --water-text-light: #718096;
  --water-font-weight: 300;
  
  /* 毛玻璃效果 */
  --water-glass-bg: rgba(255, 255, 255, 0.25);
  --water-glass-border: rgba(255, 255, 255, 0.4);
  --water-glass-blur: 20px;
  --water-glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);

  /* 全局Token覆盖 - 让基础组件自动适配水境风格 */
  --surface-primary: rgba(255, 255, 255, 0.25);
  --surface-secondary: rgba(255, 255, 255, 0.1);
  --surface-elevated: rgba(255, 255, 255, 0.35);
  --border-default: rgba(255, 255, 255, 0.4);
  --border-subtle: rgba(255, 255, 255, 0.2);
  --shadow-md: 0 8px 32px rgba(31, 38, 135, 0.15);
  --shadow-lg: 0 16px 48px rgba(31, 38, 135, 0.2);
  --text-primary: #2d3748;
  --text-secondary: #4a5568;
}

/* 水境主题 - 晴天模式 */
[data-theme="water"][data-weather="sunny"] {
  --water-sky-gradient: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
  --water-surface-color: rgba(186, 230, 253, 0.3);
  --water-light-reflection: rgba(255, 255, 255, 0.6);
  --water-ripple-color: rgba(255, 255, 255, 0.4);
}

/* 水境主题 - 多云模式 */
[data-theme="water"][data-weather="cloudy"] {
  --water-sky-gradient: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 50%, #64748b 100%);
  --water-surface-color: rgba(148, 163, 184, 0.3);
  --water-light-reflection: rgba(255, 255, 255, 0.3);
  --water-ripple-color: rgba(255, 255, 255, 0.25);
}

/* 水境主题 - 雨天模式 */
[data-theme="water"][data-weather="rainy"] {
  --water-sky-gradient: linear-gradient(135deg, #94a3b8 0%, #64748b 50%, #475569 100%);
  --water-surface-color: rgba(100, 116, 139, 0.4);
  --water-light-reflection: rgba(255, 255, 255, 0.2);
  --water-ripple-color: rgba(255, 255, 255, 0.3);
}

/* 水境主题 - 夜晚模式 */
[data-theme="water"][data-weather="night"] {
  --water-sky-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #020617 100%);
  --water-surface-color: rgba(15, 23, 42, 0.5);
  --water-light-reflection: rgba(255, 255, 255, 0.15);
  --water-ripple-color: rgba(255, 255, 255, 0.2);
  --water-text-primary: #e2e8f0;
  --water-text-secondary: #cbd5e1;
  --water-text-light: #94a3b8;
}

/* 水境主题全局样式 */
[data-theme="water"] body {
  background: var(--water-sky-gradient);
  font-weight: var(--water-font-weight);
  transition: background 1s ease;
}

[data-theme="water"] .gh-nav {
  background: var(--water-glass-bg);
  backdrop-filter: blur(var(--water-glass-blur));
  border-bottom: 1px solid var(--water-glass-border);
  box-shadow: var(--water-glass-shadow);
}

/* 水境功能卡片 - 毛玻璃效果 */
[data-theme="water"] .water-card {
  background: var(--water-glass-bg);
  backdrop-filter: blur(var(--water-glass-blur));
  border: 1px solid var(--water-glass-border);
  border-radius: 16px;
  box-shadow: var(--water-glass-shadow);
  padding: 24px;
  transition: all 0.3s ease;
}

[data-theme="water"] .water-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 48px rgba(31, 38, 135, 0.25);
  border-color: rgba(255, 255, 255, 0.6);
}

/* 水面 Canvas 容器 */
.water-surface-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

#waterCanvas {
  width: 100%;
  height: 100%;
}

/* 天气切换器 */
.weather-switcher {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 1000;
  display: flex;
  gap: 8px;
  background: var(--water-glass-bg);
  backdrop-filter: blur(var(--water-glass-blur));
  border: 1px solid var(--water-glass-border);
  border-radius: 12px;
  padding: 8px;
  box-shadow: var(--water-glass-shadow);
}

.weather-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.weather-btn:hover {
  background: var(--water-light-reflection);
  transform: scale(1.1);
}

.weather-btn.active {
  background: var(--water-light-reflection);
  box-shadow: 0 0 0 2px var(--water-blue-medium);
}

/* 水境文字样式 */
[data-theme="water"] h1,
[data-theme="water"] h2,
[data-theme="water"] h3 {
  font-weight: 200;
  letter-spacing: 0.05em;
  color: var(--water-text-primary);
}

[data-theme="water"] p {
  font-weight: var(--water-font-weight);
  color: var(--water-text-secondary);
  line-height: 1.8;
}

/* 鼠标光迹效果 */
.water-light-trail {
  position: fixed;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--water-light-reflection) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  mix-blend-mode: screen;
}

/* ========== Three.js 3D 水境背景 ========== */
.water-scene-3d {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

.water-scene-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 3D风格切换面板 */
.water-style-panel {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 10px 18px;
  border-radius: 60px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.water-style-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.25s ease;
  font-weight: 300;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.water-style-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
}

.water-style-btn.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

@media (max-width: 600px) {
  .water-style-panel {
    bottom: 20px;
    padding: 6px 12px;
    gap: 4px;
    border-radius: 40px;
    max-width: 94vw;
    overflow-x: auto;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
  .water-style-btn {
    font-size: 0.7rem;
    padding: 4px 10px;
    flex-shrink: 0;
  }
}

/* ========== 导航返回按钮 + 全局面包屑 ========== */

/* 返回按钮 */
.nav-back-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--text-light, #656d76);
  font-size: 16px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
  flex-shrink: 0;
}

.nav-back-btn:hover {
  background: var(--bg-secondary, #f6f8fa);
  border-color: var(--border, #d0d7de);
  color: var(--text, #1f2328);
}

.nav-back-btn:active {
  transform: scale(0.95);
}

/* 全局面包屑导航 */
.global-breadcrumb {
  display: none;
  padding: 6px 24px;
  font-size: 12px;
  color: var(--text-light, #656d76);
  background: var(--bg-secondary, #f6f8fa);
  border-bottom: 1px solid var(--border, #d0d7de);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  box-sizing: border-box;
}

.global-breadcrumb .breadcrumb-link {
  color: var(--text-link, #0969da);
  text-decoration: none;
  transition: color 0.15s;
}

.global-breadcrumb .breadcrumb-link:hover {
  text-decoration: underline;
  color: var(--text-link-hover, #0550ae);
}

.global-breadcrumb .breadcrumb-sep {
  margin: 0 6px;
  color: var(--text-light, #656d76);
  opacity: 0.5;
}

.global-breadcrumb .breadcrumb-current {
  font-weight: 600;
  color: var(--text, #1f2328);
}

/* 移动端面包屑适配 */
@media (max-width: 768px) {
  .global-breadcrumb {
    padding: 6px 12px;
    font-size: 11px;
  }
  
  .global-breadcrumb .breadcrumb-link:not(:last-of-type),
  .global-breadcrumb .breadcrumb-sep:not(:last-of-type) {
    display: none;
  }
  
  .global-breadcrumb .breadcrumb-link:last-of-type + .breadcrumb-sep,
  .global-breadcrumb .breadcrumb-link:last-of-type + .breadcrumb-sep + .breadcrumb-current {
    display: inline;
  }
}

@media (max-width: 480px) {
  .nav-back-btn {
    font-size: 14px;
    padding: 3px 6px;
  }
}

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-100%); opacity: 0; }
}

/* 图片懒加载样式 */
img[data-src], img[data-lazy] {
  opacity: 0;
  transition: opacity 0.3s ease;
  background: #f0f0f0;
}

img.loading {
  opacity: 0.5;
  filter: blur(5px);
  transition: opacity 0.3s ease, filter 0.3s ease;
}

img.loaded {
  opacity: 1;
  filter: blur(0);
}

img.error {
  opacity: 0.3;
  background: #f8f8f8;
}