:root {
      --font-game: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
      --font-text: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: var(--font-game);
      background: #f5f6f8; color: #1a1a2e; padding: 28px; line-height: 1.5;
      zoom: 0.9; /* 页面整体缩放至 90% */
    }
    /* 说明性文字保持系统字体，不更换 */
    .notice, .empty-state, .loading,
    .recommend-group-header .count, .region-hint { font-family: var(--font-text); }
    .container { max-width: 1280px; margin: 0 auto; }

    /* 第一行：品牌 + 页面导航（与子页导航一致） */
    .header-top {
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 12px;
      padding-bottom: 10px; margin-bottom: 20px;
      border-bottom: 1px solid #e3e7ec;
    }
    /* 站点品牌：icons.png + RocoM Shiny Helper（与导航栏同行，非页面标题） */
    .brand {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 22px; font-weight: 700; color: #1a1a2e; text-decoration: none;
      line-height: 1.2;
    }
    .brand .brand-ico { width: 52px; height: 52px; object-fit: contain; }
    .brand small { display: block; font-size: 13px; color: #8a919c; font-weight: 400; font-family: var(--font-text); }

    /* 第二行：页面独立标题（属性池匹配）+ 赛季选择 */
    .page-head {
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
    }
    .page-title { display: flex; flex-direction: column; gap: 6px; }
    .page-title h1 { font-size: 26px; margin: 0; line-height: 1.2; color: #1a1a2e; }
    .page-sub { font-size: 13px; color: #8a919c; font-family: var(--font-text); }
    .season-select { min-width: 220px; }
    .season-select label { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; color: #333; }
    .season-select select {
      width: 100%; padding: 12px 16px; border-radius: 10px; border: 2px solid #dee2e6;
      font-size: 16px; background: white; cursor: pointer; outline: none; color: #333;
    }

    /* 右侧导航：页面链接 + GitHub 图标（比正文放大、加粗与内容区分） */
    .top-nav {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 18px;
      font-size: 16px;
    }
    .top-nav a {
      color: #3d4654;
      text-decoration: none;
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
    }
    .top-nav a:hover { color: #1565c0; }
    .top-nav a.active { color: #1565c0; }
    .top-nav a.gh { display: inline-flex; align-items: center; }
    .top-nav a.gh svg { width: 22px; height: 22px; fill: #3d4654; }
    .top-nav a.gh:hover svg { fill: #1565c0; }

    .loading { text-align: center; padding: 48px; color: #666; }

    .filter-grid { display: grid; gap: 20px; margin-bottom: 24px; }

    .filter-box {
      border-radius: 16px; padding: 24px; border: 1px solid;
    }
    .filter-box-header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 16px;
    }
    .filter-box-header h3 { font-size: 17px; margin: 0; }

    .checkbox-group {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
    }
    /* 筛选区左右两个分类并列时，每个分类内一行 3 张卡片 */
    .checkbox-group.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* 精灵星系卡片（参考 wiki 精灵图鉴） */
    .sprite-card {
      position: relative;
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      padding: 14px 10px 12px;
      background: white; border-radius: 14px;
      border: 2px solid #e8e8e8;
      cursor: pointer; transition: all 0.15s; user-select: none;
    }
    .sprite-card:hover { border-color: #c8c8c8; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.06); }
    .sprite-card.selected {
      border-color: var(--accent, #666);
      background: var(--accent-bg, rgba(0,0,0,0.04));
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .sprite-card.selected::after {
      content: '✓'; position: absolute; top: 5px; right: 12px;
      color: var(--accent, #666); font-weight: 700; font-size: 18px;
    }
    .sprite-card input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
    .sprite-img-wrap {
      position: relative; width: 120px; height: 120px;
      background: transparent; border-radius: 12px; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .sprite-img-wrap::before { content: '暂无图片'; font-size: 13px; color: #b8bcc4; }
    .sprite-img { width: 100%; height: 100%; object-fit: contain; }
    /* 精灵/可定向/推荐卡片名称：主名一行 + 括号形态副行（小字灰色）；无括号也保留副行高度使卡片等高 */
    .sprite-name, .dc-name, .rc-name {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      text-align: center;
      line-height: 1.25;
    }
    .nm-main { font-size: inherit; }
    .nm-sub {
      font-size: 12px; font-weight: 400; color: #9aa0a6;
      min-height: 1.2em; line-height: 1.2; white-space: nowrap;
    }
    .sprite-name { font-weight: 700; font-size: 15px; color: #1a1a2e; }
    .sprite-attrs { display: flex; gap: 6px; min-height: 24px; flex-wrap: wrap; justify-content: center; }
    .sprite-attr {
      display: inline-flex; align-items: center; gap: 3px;
      font-size: 13px; font-weight: 600; color: #555;
    }
    .sprite-attr img { width: 20px; height: 20px; border-radius: 50%; }

    /* 赛季机制提示：标题 + 可折叠正文（背景 #B3BFD3，深色文字适配） */
    .notice {
      display: none;
      border-radius: 14px;
      margin-bottom: 18px;
      border: 1px solid #97a6c0;
      background: #B3BFD3;
      overflow: hidden;
      font-size: 14px;
      color: #1e2a42;
    }
    .notice-head {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 40px;
      cursor: pointer;
      user-select: none;
    }
    .notice-title {
      flex: 1;
      text-align: center;
      font-family: var(--font-game);
      font-weight: 700;
      font-size: 21px;
      color: #16203a;
      line-height: 1.5;
    }
    .notice-arrow {
      position: absolute;
      right: 18px;
      top: 50%;
      transform: translateY(-50%);
      flex-shrink: 0;
      font-size: 13px;
      color: #16203a;
      transition: transform 0.25s ease;
    }
    .notice.open .notice-arrow { transform: translateY(-50%) rotate(180deg); }
    .notice-body { display: none; padding: 0 18px 16px; }
    .notice.open .notice-body { display: block; }
    .notice-body p { margin: 0 0 8px; color: #1e2a42; }
    .notice-body p:last-child { margin-bottom: 0; }
    .notice-body .notice-sub { font-weight: 600; margin: 6px 0 2px; }

    /* 地区形态提示（如刺轮砣：上弦的样子 / 下弦的样子） */
    .region-hint {
      display: none;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      background: #eef4ff;
      border: 1px solid #c6d8f5;
      border-radius: 12px;
      padding: 14px 20px;
      margin-bottom: 18px;
      font-size: 15px;
      color: #2b4a7a;
    }
    .region-hint .region-hint-title {
      font-weight: 700;
      padding: 3px 12px;
      border-radius: 8px;
      background: #dbe8ff;
      color: #1f3a66;
      font-size: 14px;
      white-space: nowrap;
    }

    /* 分类方式切换开关 */
    .mode-switch {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 18px; flex-wrap: wrap;
    }
    .mode-label { font-size: 15px; font-weight: 600; color: #333; white-space: nowrap; }
    .mode-buttons {
      display: inline-flex; background: #eceef1; border-radius: 10px;
      padding: 4px; gap: 3px;
    }
    .mode-btn {
      padding: 8px 16px; border: none; border-radius: 8px;
      background: transparent; font-size: 15px; font-weight: 600;
      color: #666; cursor: pointer; transition: all 0.15s;
    }
    .mode-btn.active { background: white; color: #1565c0; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }

    /* 属性筛选开关 */
    .attr-filter {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 18px; flex-wrap: wrap;
    }
    .attr-filter-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
    .attr-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px 6px 6px; border-radius: 18px;
      border: 1.5px solid #d5d9e0; background: white;
      font-size: 14px; font-weight: 600; color: #444;
      font-family: var(--font-game);
      cursor: pointer; transition: all 0.15s;
    }
    .attr-btn:hover { border-color: #aab2bd; }
    .attr-btn img { width: 22px; height: 22px; border-radius: 50%; }
    .attr-btn.active { border-color: var(--ac); background: var(--abg); color: var(--ac); }
    .attr-btn.all { padding: 6px 14px; }
    .attr-btn.stage { padding: 6px 14px; }

    /* 属性筛选下不可命中精灵：置灰不可选 */
    .sprite-card.disabled {
      opacity: 0.4; pointer-events: none;
      filter: grayscale(0.5);
    }

    .attr-tag {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 12px 5px 6px; border-radius: 16px;
      font-weight: 700; margin-right: 6px; border: 1px solid;
      font-size: 15px; text-shadow: none;
    }
    .attr-tag img { width: 22px; height: 22px; border-radius: 50%; }

    /* 命中属性：并入推荐高星光值刷取精灵区块顶部 */
    .recommend-hit-attrs {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 10px;
      padding: 10px 14px;
      margin-bottom: 14px;
    }
    .recommend-hit-attrs .label { font-weight: 600; color: #4527a0; font-size: 15px; white-space: nowrap; }

    .directable-section {
      display: none;
      background: #e8f5e9;
      border-radius: 16px;
      padding: 24px;
      border: 1px solid #c8e6c9;
      margin-bottom: 18px;
    }
    .directable-section h3 {
      margin: 0 0 16px 0;
      color: #2e7d32;
      font-size: 19px;
    }
    .directable-subtitle {
      font-weight: 700;
      color: #333;
      font-size: 16px;
      margin: 14px 0 10px 0;
      padding-bottom: 6px;
      border-bottom: 1px dashed #a5d6a7;
    }
    .directable-subtitle:first-of-type { margin-top: 0; }
    .directable-list {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
    }
    /* 可定向精灵卡片：与上方筛选器精灵卡片一致的竖向样式（图 + 名称 + 属性），底部一行属性池 + 机制tag */
    .directable-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 100%;
      background: white;
      border-radius: 14px;
      border: 2px solid #e8e8e8;
      padding: 14px;
      transition: all 0.15s;
    }
    .directable-card:hover { border-color: #c8c8c8; box-shadow: 0 4px 10px rgba(0,0,0,0.06); }
    .dc-top {
      display: flex; flex-direction: column; align-items: center;
      gap: 8px; width: 100%; text-align: center;
    }
    .dc-img-wrap {
      position: relative; flex-shrink: 0; width: 100px; height: 100px;
      background: transparent; border-radius: 12px; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .dc-img-wrap::before { content: '暂无图片'; font-size: 13px; color: #b8bcc4; }
    .dc-img { width: 100%; height: 100%; object-fit: contain; }
    .dc-info { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
    .dc-name { font-weight: 700; font-size: 15px; color: #1a1a2e; }
    .dc-attrs { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
    .dc-row {
      display: flex; align-items: center; justify-content: space-between; gap: 6px;
      width: 100%;
      padding: 8px 10px; background: #f8f9fa; border-radius: 8px;
      border: 1px solid #e9ecef;
    }
    .dc-pool {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 14px; font-weight: 600; color: #555; white-space: nowrap;
    }
    .dc-pool img { width: 18px; height: 18px; border-radius: 50%; }
    .method-tag {
      font-size: 12px;
      padding: 3px 10px;
      border-radius: 6px;
      font-weight: 600;
      color: white;
      white-space: nowrap;
    }

    .recommend-section {
      display: none;
      background: #ede7f6;
      border-radius: 16px;
      padding: 24px;
      border: 1px solid #d1c4e9;
    }
    .recommend-section h3 {
      margin: 0 0 16px 0;
      color: #4527a0;
      font-size: 19px;
    }

    .recommend-group {
      background: white;
      border-radius: 12px;
      padding: 14px 16px;
      border: 1px solid #e0e0e0;
      margin-bottom: 14px;
    }
    .recommend-group:last-child { margin-bottom: 0; }
    .recommend-group-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }
    .recommend-group-header .dot {
      display: inline-block;
      width: 16px;
      height: 16px;
      border-radius: 50%;
    }
    .recommend-group-header .attr-name {
      font-weight: 700;
      color: #333;
      font-size: 18px;
    }
    .recommend-group-header .count {
      color: #999;
      font-size: 13px;
    }
    /* 定向 tag：属性池定向 / 赛季机制定向（可内嵌金月/赤月）/ 不可定向 */
    .recommend-group-header .dir-method {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      padding: 3px 10px;
      border-radius: 999px;
      font-weight: 600;
      color: white;
      line-height: 1.3;
    }
    .recommend-group-header .dir-method.pool { background: #e65100; }
    .recommend-group-header .dir-method.mech {
      background: #71C2F9;
      color: #3D4F1F; /* BFDE7B 加深后的文字色 */
    }
    .recommend-group-header .dir-method.mech .m-sub {
      display: inline-block;
      color: white;
      padding: 0 6px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.5;
    }
    .recommend-group-header .dir-method.none { background: #aeb4bc; }
    .recommend-items {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
    }
    /* 推荐高星光值精灵卡片：与筛选精灵卡同款版式（透明立绘 + 两行名称 + 图标信息行） */
    .recommend-card {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      width: 100%;
      background: white;
      border-radius: 14px;
      border: 2px solid #e8e8e8;
      padding: 14px 10px 12px;
      transition: all 0.15s;
    }
    .recommend-card:hover { border-color: #c8c8c8; box-shadow: 0 4px 10px rgba(0,0,0,0.06); }
    .rc-img-wrap {
      position: relative; flex-shrink: 0; width: 120px; height: 120px;
      background: transparent; border-radius: 12px; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .rc-img-wrap::before { content: '暂无图片'; font-size: 13px; color: #b8bcc4; }
    .rc-img { width: 100%; height: 100%; object-fit: contain; }
    .rc-name { font-weight: 700; font-size: 15px; color: #1a1a2e; text-align: center; }
    /* 卡内信息两行：第一行「第一属性：图标+属性」，第二行 星光值 + 阶段（浅蓝胶囊气泡） */
    .rc-attr {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: #8a6d3b;
      white-space: nowrap;
    }
    .rc-attr .rc-attr-label { font-weight: 600; color: #8a6d3b; }
    .rc-attr .rc-attr-ico { width: 16px; height: 16px; border-radius: 50%; }
    .rc-attr .rc-attr-name { font-weight: 600; color: #6b5421; }
    .rc-foot {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      min-height: 22px;
    }
    .rc-star {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 700;
      color: #3a3f47;
      white-space: nowrap;
    }
    .rc-star img { width: 18px; height: 18px; }
    .rc-coin {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 700;
      color: #5a5f6b;
      white-space: nowrap;
    }
    .rc-coin img { width: 18px; height: 18px; }
    .rc-season-line { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; width: 100%; }
    /* 阶段浅蓝胶囊气泡 */
    .rc-stage {
      background: #dff1ff;
      color: #0b6bcb;
      font-size: 12px;
      font-weight: 700;
      padding: 1px 10px;
      border-radius: 999px;
      line-height: 1.5;
      white-space: nowrap;
    }

    .empty-state {
      text-align: center;
      padding: 40px;
      color: #999;
      font-size: 15px;
    }

    /* 页脚声明 */
    .footer {
      margin-top: 36px;
      padding: 18px 22px 8px;
      border-top: 1px solid #dde1e6;
      color: #8a919c;
      font-size: 12px;
      line-height: 2;
      text-align: center;
      font-family: var(--font-text);
    }
    .footer p { margin: 0 0 6px; }

    /* ==================== 图片占位符：有图时隐藏占位文字 ==================== */
    .sprite-img-wrap.has-img::before,
    .dc-img-wrap.has-img::before,
    .rc-img-wrap.has-img::before { content: none; }

    /* ==================== 常规/异色图交替（S1~S3，双图交叠平滑过渡） ==================== */
    /* 开启交替的图片容器：两层 <img> 上下堆叠，通过 opacity 交叠淡入淡出 */
    .sw-ready > img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: opacity 2.4s ease-in-out;
    }
    .sprite-img, .dc-img, .rc-img { transition: opacity 2.4s ease-in-out; }

    @media (max-width: 1050px) {
      /* 两个分类并列时每格变窄，精灵图适当缩小避免溢出 */
      .sprite-img-wrap { width: 100px; height: 100px; }
    }

    @media (max-width: 900px) {
      .checkbox-group { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
      .directable-list, .recommend-items { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
    }

    @media (max-width: 768px) {
      .filter-grid { grid-template-columns: 1fr !important; }
      .header-top, .page-head { flex-direction: column; align-items: flex-start; }
    }

    @media (max-width: 560px) {
      body { padding: 16px; }
      .filter-box, .recommend-section { padding: 16px; }
      .sprite-card { padding: 12px 8px 10px; gap: 6px; }
      .checkbox-group { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
      .sprite-img-wrap, .dc-img-wrap, .rc-img-wrap { width: 84px; height: 84px; }
      .directable-card, .recommend-card { width: 100%; }
      .directable-list, .recommend-items { grid-template-columns: 1fr; }
      .dc-row { flex-wrap: wrap; justify-content: center; }
    }
  

    :root {
      --font-game: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
      --font-text: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: var(--font-game); background: #f5f6f8; color: #1a1a2e; padding: 24px; line-height: 1.5; }
    .container { max-width: 1280px; margin: 0 auto; }
    .header { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid #e3e7ec; }
    .brand { display: inline-flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 700; color: #1a1a2e; text-decoration: none; line-height: 1.2; }
    .brand .brand-ico { width: 52px; height: 52px; object-fit: contain; }
    .top-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; font-size: 16px; }
    .top-nav a { color: #3d4654; text-decoration: none; font-weight: 700; line-height: 1.2; white-space: nowrap; }
    .top-nav a:hover { color: #1565c0; }
    .top-nav a.active { color: #1565c0; }
    .top-nav a.gh { display: inline-flex; align-items: center; }
    .top-nav a.gh svg { width: 22px; height: 22px; fill: #3d4654; }
    .top-nav a.gh:hover svg { fill: #1565c0; }
    .page-card { background: white; border: 2px solid #e8e8e8; border-radius: 16px; padding: 28px; }
    .page-card h2 { font-size: 24px; margin-bottom: 6px; }
    .page-card .desc { font-size: 15px; color: #555; margin-bottom: 14px; }
    .page-card .placeholder {
      border: 1px dashed #cfd6df; border-radius: 12px; color: #9aa0a8;
      padding: 46px 20px; text-align: center; font-size: 15px; font-family: var(--font-text);
    }
    .footer { margin-top: 36px; padding: 18px 22px 8px; border-top: 1px solid #dde1e6; color: #8a919c; font-size: 12px; line-height: 2; text-align: center; font-family: var(--font-text); }
    .footer p { margin: 0 0 6px; }
    @media (max-width: 700px) { .header { flex-direction: column; } }
  

    :root {
      --font-game: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
      --font-text: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: var(--font-game); background: #f5f6f8; color: #1a1a2e; padding: 24px; line-height: 1.5; }
    .container { max-width: 1280px; margin: 0 auto; }
    .header { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid #e3e7ec; }
    .brand { display: inline-flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 700; color: #1a1a2e; text-decoration: none; line-height: 1.2; }
    .brand .brand-ico { width: 52px; height: 52px; object-fit: contain; }
    .top-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; font-size: 16px; }
    .top-nav a { color: #3d4654; text-decoration: none; font-weight: 700; line-height: 1.2; white-space: nowrap; }
    .top-nav a:hover { color: #1565c0; }
    .top-nav a.active { color: #1565c0; }
    .top-nav a.gh { display: inline-flex; align-items: center; }
    .top-nav a.gh svg { width: 22px; height: 22px; fill: #3d4654; }
    .top-nav a.gh:hover svg { fill: #1565c0; }
    .page-card { background: white; border: 2px solid #e8e8e8; border-radius: 16px; padding: 28px; }
    .page-card h2 { font-size: 24px; margin-bottom: 18px; }
    .changelog { list-style: none; }
    .changelog li { padding: 12px 0; border-bottom: 1px dashed #e3e7ec; }
    .changelog li:last-child { border-bottom: none; }
    .changelog .ver { font-weight: 700; color: #1565c0; font-size: 16px; margin-right: 8px; }
    .changelog .date { color: #9aa0a6; font-size: 12px; font-family: var(--font-text); margin-left: 6px; }
    .changelog ul { margin: 6px 0 0 20px; color: #555; font-family: var(--font-text); font-size: 13px; }
    .footer { margin-top: 36px; padding: 18px 22px 8px; border-top: 1px solid #dde1e6; color: #8a919c; font-size: 12px; line-height: 2; text-align: center; font-family: var(--font-text); }
    .footer p { margin: 0 0 6px; }
    @media (max-width: 700px) { .header { flex-direction: column; } }
  
/* ==================== 高星光值精灵页 ==================== */
.hv-page { min-width: 0; }
.hv-title { font-size: 22px; margin: 0 0 14px; }
.hv-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.hv-view-switch { display: inline-flex; background: #eceef1; border-radius: 10px; padding: 4px; gap: 3px; }
.hv-btn { padding: 8px 18px; border: none; border-radius: 8px; background: transparent; font-family: var(--font-game); font-size: 16px; font-weight: 700; color: #666; cursor: pointer; transition: all .15s; }
.hv-btn.active { background: #fff; color: #1565c0; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.hv-groups { display: flex; flex-direction: column; gap: 18px; }
.hv-group { scroll-margin-top: 18px; }
.hv-table-card { background: #fff; border: 2px solid #e8e8e8; border-radius: 16px; padding: 18px 20px; overflow-x: auto; }
.hv-table { width: 100%; table-layout: fixed; min-width: 920px; border-collapse: collapse; font-family: var(--font-text); }
.hv-table th, .hv-table td { border-bottom: 1px solid #eef0f3; padding: 9px 10px; text-align: left; font-size: 14px; vertical-align: middle; word-break: break-word; }
.hv-table th { color: #5a6472; font-weight: 600; background: #f7f8fa; white-space: nowrap; }
.hv-table th.hv-th-name { padding-left: 84px; }
.hv-table tr:last-child td { border-bottom: none; }
.hv-name-in { display: flex; align-items: center; gap: 6px; }
.hv-name-in .hv-plus,
.hv-name-in .hv-slot { flex: none; }
.hv-slot { width: 18px; height: 18px; flex: none; }
.hv-ava { width: 44px; height: 44px; object-fit: contain; flex: none; display: block; }
.hv-name-text { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.hv-loading { padding: 60px 20px; text-align: center; color: #9aa0a8; font-family: var(--font-text); }
html { scroll-behavior: smooth; }

/* ==================== 高星光值精灵页 v2 增强 ==================== */
.hv-page, .hv-page * { font-family: var(--font-game); }
.hv-attrbar { margin: -4px 0 16px; align-items: flex-start; }
.hv-attrbar .attr-filter-buttons { flex: 1 1 0%; min-width: 0; }
.hv-attrbar .mode-label { margin-top: 7px; }
.hv-tags { display: inline-flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.hv-seasons { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.hv-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px 2px 4px; border-radius: 999px; border: 1px solid;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.hv-tag img { width: 16px; height: 16px; border-radius: 50%; }
.hv-stage { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #eaf3ff; color: #0b6bcb; border: 1px solid #cfe2fb; font-size: 12px; font-weight: 700; white-space: nowrap; }
.hv-dim { color: #b0b6bf; }
.hv-season { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.rc-foot .hv-season { font-size: 11px; padding: 1px 8px; }
/* 无立绘精灵：占位留空 + 备注标注 */
.rc-note { font-size: 11px; color: #b07a2a; font-weight: 600; text-align: center; line-height: 1.4; }
.hv-ava-empty { border-radius: 10px; background: #f4f6f9; border: 1px dashed #dfe4ea; }
.hv-note { color: #b07a2a; font-weight: 600; font-size: 12px; }
.hv-num { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 14px; color: #333; white-space: nowrap; }
.hv-num img { width: 18px; height: 18px; border-radius: 50%; }
.hv-table-card { margin: 0; width: 100%; }
.hv-plus { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; border: 1px solid #b9c3d2; background: #fff; color: #1565c0; border-radius: 50%; cursor: pointer; font-weight: 700; font-size: 14px; padding: 0; transition: all .15s; }
.hv-plus.open { transform: rotate(45deg); background: #1565c0; color: #fff; border-color: #1565c0; }
.hv-inline { margin-top: 2px; width: 100%; }
.hv-inline summary { list-style: none; cursor: pointer; font-size: 12px; color: #1565c0; font-weight: 600; text-align: center; user-select: none; }
.hv-inline summary::-webkit-details-marker { display: none; }
.hv-inline-list { font-size: 11px; color: #7a7f87; text-align: center; line-height: 1.9; }

/* ==================== 全站链接去下划线 ==================== */
a, a:link, a:visited, a:hover, a:active, a:focus { text-decoration: none; }

/* ==================== 实用链接页 ==================== */
.lnk-section { margin-bottom: 26px; }
.lnk-section:last-child { margin-bottom: 2px; }
.lnk-title {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font-size: 19px; font-weight: 700; color: #1a1a2e; line-height: 1.3;
}
.lnk-title::before {
  content: ''; flex: none; width: 5px; height: 18px;
  border-radius: 3px; background: #1565c0;
}
.lnk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 14px;
}
.lnk-card {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  background: #fff; border: 2px solid #e8e8e8; border-radius: 14px;
  padding: 10px 12px; transition: all 0.15s;
}
.lnk-card:hover {
  border-color: #9ec3ec; transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.lnk-tile {
  flex: none; width: 52px; height: 52px; border-radius: 12px;
  background: #f4f6f9; border: 1px solid #eaedf1;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.lnk-ico { width: 32px; height: 32px; object-fit: contain; display: block; }
.lnk-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lnk-name { font-weight: 700; font-size: 15px; color: #1a1a2e; line-height: 1.3; overflow-wrap: anywhere; }
.lnk-card:hover .lnk-name { color: #1565c0; }
.lnk-host {
  font-size: 12px; color: #9aa0a8; font-family: var(--font-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lnk-tags { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.lnk-tag {
  padding: 1px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.6; white-space: nowrap;
  font-family: var(--font-text);
}
.lnk-tag.t-egg { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.lnk-tag.t-general { background: #eaf3ff; color: #0b6bcb; border: 1px solid #cfe2fb; }
.lnk-tag.t-pvp { background: #fdecea; color: #b71c1c; border: 1px solid #ef9a9a; }
.lnk-tag.t-wiki { background: #ede7f6; color: #4527a0; border: 1px solid #d1c4e9; }

/* ==================== 工具箱导航页 ==================== */
/* 卡片副文本改为工具介绍（可换行，非链接）；卡片暂未上线，故不可点击 */
.lnk-desc {
  font-size: 12px; color: #9aa0a8; font-family: var(--font-text);
  line-height: 1.55; overflow-wrap: anywhere;
}
.lnk-card.is-static { cursor: default; }
.lnk-card.is-static:hover {
  border-color: #e8e8e8; transform: none; box-shadow: none;
}
.lnk-card.is-static:hover .lnk-name { color: #1a1a2e; }
.lnk-tile > svg.lnk-ico { fill: none; stroke: #1565c0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) {
  .lnk-card { padding: 8px 10px; gap: 10px; }
  .lnk-tile { width: 44px; height: 44px; }
  .lnk-ico { width: 26px; height: 26px; }
}

/* ==================== 移动端顶栏导航：单行横向滑动 ==================== */
/* 手机端品牌独占一行，右侧导航保持单行不换行；超出部分左右滑动查看 */
@media (max-width: 768px) {
  .top-nav {
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    gap: 18px;
    padding: 2px 10px 2px 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* 旧 Edge / IE */
  }
  .top-nav::-webkit-scrollbar { display: none; }   /* Chrome / Safari */
  .top-nav a { display: inline-flex; align-items: center; min-height: 44px; }
}