/* ==========================================================================
   Linux582021 的插件官网 —— 统一样式表
   ==========================================================================
   全站唯一样式来源，所有页面以 <link rel="stylesheet" href="style.css"> 引用。

   结构：
     一、官网标准       InTheNameOfLinux 官网（linux.html）的设计系统
     二、帮助页专有     .sidebar / .help-table / .tip / .faq-item / .steps /
                        .code-block / .page-hero / .perm-compare 等
     三、页面专属组件   封面 / 视频背景 / 透明导航 / 插件卡片链接 / 帮助中心
   ========================================================================== */

/* ============================================================
   一、官网标准
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

:root {
  /* 主色取自封面视频的钢青蓝族（视频采样 #526371） */
  --blue: #4a7ba7;
  --blue-hover: #3d6a92;
  --blue-light: #e9f0f6;
  --blue-soft: #f2f6fa;
  --blue-border: #c3d6e5;

  /* 封面/视频深色 */
  --ink-900: #0e161d;
  --ink-800: #16222c;
  --ink-700: #1e2c38;
  --ink-600: #2a3a48;
  --video-tint: #526371;

  /* 中性色 */
  --bg: #ffffff;
  --bg-secondary: #f5f7f9;
  --bg-tertiary: #fafbfc;
  --text: #1d1d1f;
  --text-secondary: #515154;
  --text-tertiary: #86868b;
  --border: #d2d7db;
  --border-light: #e6eaee;

  /* 代码 */
  --code-bg: #f5f7f9;
  --code-text: #1d1d1f;
  --code-comment: #6e6e73;
  --code-keyword: #4a7ba7;
  --code-value: #a8624a;

  /* 语义色 */
  --green: #34c759;
  --green-light: #effaf0;
  --orange: #ff9500;
  --orange-light: #fff8e6;
  --red: #ff3b30;
  --red-light: #fff0f0;

  /* 阴影（带蓝调，与主色呼应） */
  --shadow-sm: 0 1px 3px rgba(30, 44, 56, 0.05);
  --shadow: 0 4px 12px rgba(30, 44, 56, 0.07);
  --shadow-lg: 0 12px 32px rgba(30, 44, 56, 0.09);
  --shadow-hover: 0 20px 48px rgba(74, 123, 167, 0.18);
}

html {
    scroll-behavior: smooth;
  }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                 'SF Pro Text', 'Helvetica Neue', 'PingFang SC',
                 'Microsoft YaHei', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

.card p,
  .card li,
  .flow li,
  .penalty-card p,
  td,
  th,
  .command-block {
    word-break: break-word;
    overflow-wrap: break-word;
  }

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
  }

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* 液态玻璃：全站顶栏统一，滚动后不变 */
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.4),
    0 4px 24px rgba(15, 25, 35, 0.07);
  z-index: 1000;
  transition: none;
}

.nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 52px;
  }

.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.2px;
  }

.nav-logo-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--blue) 0%, #7ba3c9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 700;
  }

.nav-links {
    display: flex;
    gap: 28px;
    list-style: none;
    align-items: center;
  }

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s;
  }

.nav-links a:hover {
    color: var(--text);
  }

.nav-links .nav-external {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--blue);
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 980px;
    background: var(--blue-light);
    transition: all 0.2s ease;
    font-size: 13px;
  }

.nav-links .nav-external:hover {
    color: #fff;
    background: var(--blue);
  }

.nav-links .nav-external svg {
    transition: transform 0.2s ease;
  }

.nav-links .nav-external:hover svg {
    transform: translate(1px, -1px);
  }

.hero {
    padding: 140px 0 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

.hero::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 600px;
    background: radial-gradient(ellipse at center,
                rgba(74, 123, 167, 0.10) 0%,
                rgba(74, 123, 167, 0.03) 40%,
                transparent 70%);
    pointer-events: none;
    z-index: 0;
  }

.hero > .container {
    position: relative;
    z-index: 1;
  }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--blue-light);
    border-radius: 999px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 20px;
  }

.hero-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--blue);
    border-radius: 50%;
  }

.hero h1 {
    font-size: clamp(40px, 6.5vw, 72px);
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1.05;
    margin-bottom: 20px;
    color: var(--text);
  }

.hero h1 .gradient {
    background: linear-gradient(135deg, #4a7ba7 0%, #7ba3c9 50%, #8fc0dc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

.hero-subtitle {
    font-size: clamp(17px, 2.2vw, 21px);
    color: var(--text-secondary);
    max-width: 620px;
    margin: 0 auto 32px;
    line-height: 1.5;
    font-weight: 400;
  }

.hero-meta {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 36px;
  }

.meta-tag {
    padding: 6px 14px;
    background: var(--bg-secondary);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
  }

.meta-tag strong {
    color: var(--text);
    font-weight: 600;
  }

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  /* 介绍页 hero：按钮与上方副标题留出间距 */
  .page-hero .hero-buttons {
    margin-top: 34px;
  }

.btn {
    padding: 12px 26px;
    border-radius: 980px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -0.1px;
  }

.btn-primary {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
  }

.btn-primary:hover {
    background: var(--blue-hover);
    border-color: var(--blue-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(74, 123, 167, 0.3);
  }

.btn-secondary {
    background: var(--blue-soft);
    color: var(--blue);
    border-color: var(--blue-border);
  }

.btn-secondary:hover {
    background: var(--blue-light);
    border-color: var(--blue);
    color: var(--blue-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(74, 123, 167, 0.15);
  }

section {
    padding: 80px 0;
  }

section.alt {
  /* 章节课的背景由玻璃模块自己承担，区块本身透明，视频才透得出来 */
  background: transparent;
}

.section-header {
    text-align: center;
    margin-bottom: 56px;
  }

.section-header h2 {
    font-size: clamp(30px, 4.5vw, 44px);
    font-weight: 700;
    letter-spacing: -1.5px;
    margin-bottom: 12px;
    color: var(--text);
    line-height: 1.1;
  }

.section-header p {
    font-size: 17px;
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto;
  }

.section-label {
    display: inline-block;
    color: var(--blue);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

.grid {
    display: grid;
    gap: 16px;
  }

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

.whatsnew-more {
    margin: 28px auto 0;
    max-width: 560px;
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-tertiary);
  }

.whatsnew-more a {
    color: var(--blue);
    text-decoration: none;
    font-weight: 500;
  }

.whatsnew-more a:hover {
    text-decoration: underline;
  }

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

.card {
    background: rgba(255, 255, 255, 0.30);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 8px 32px rgba(30, 44, 56, 0.08);
    border-radius: 18px;
    padding: 28px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    transform: translateY(0);
    transition: transform 0.7s ease,
                box-shadow 0.7s ease,
                border-color 0.7s ease;
    will-change: transform;
  }

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 48px rgba(74, 123, 167, 0.16),
                0 8px 16px rgba(0, 0, 0, 0.05);
    border-color: rgba(74, 123, 167, 0.35);
  }

.card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 18px;
    transition: transform 0.7s ease;
  }

.card:hover .card-icon {
    transform: scale(1.1);
  }

.card h3 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
  }

.card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
  }

.card ul {
    list-style: none;
    margin-top: 14px;
  }

.card ul li {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 5px 0 5px 18px;
    position: relative;
  }

.card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 6px;
    background: var(--blue);
    border-radius: 50%;
    opacity: 0.6;
  }

.command-block {
    background: var(--code-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    font-family: 'SF Mono', 'Menlo', 'Consolas', 'Monaco', monospace;
    font-size: 12.5px;
    line-height: 1.9;
    overflow-x: auto;
    margin-top: 16px;
    color: var(--code-text);
    position: relative;
  }

.command-block::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff5f56;
    box-shadow: 16px 0 0 #ffbd2e, 32px 0 0 #27c93f;
  }

.command-block > div:first-child {
    margin-top: 20px;
  }

.command-block .cmd {
    color: var(--code-keyword);
    font-weight: 600;
  }

.command-block .comment {
    color: var(--code-comment);
    font-style: italic;
  }

.command-block .key {
    color: var(--code-value);
    font-weight: 500;
  }

code {
    background: var(--blue-light);
    color: var(--blue);
    padding: 2px 7px;
    border-radius: 5px;
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    font-size: 0.88em;
    font-weight: 500;
  }

.table-wrap {
    background: rgba(255, 255, 255, 0.30);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 8px 32px rgba(30, 44, 56, 0.08);
    border-radius: 14px;
    border: 1px solid var(--border-light);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--shadow-sm);
    transform: translateY(0);
    transition: transform 0.7s ease,
                box-shadow 0.7s ease,
                border-color 0.7s ease;
    will-change: transform;
  }

.table-wrap:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(74, 123, 167, 0.14);
    border-color: rgba(74, 123, 167, 0.3);
  }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }

thead {
    background: var(--bg-tertiary);
  }

th {
    padding: 14px 20px;
    text-align: left;
    font-weight: 600;
    color: var(--text);
    font-size: 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
  }

td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
  }

tr:last-child td {
    border-bottom: none;
  }

tbody tr:hover {
    background: var(--bg-tertiary);
  }

td code {
    font-size: 12px;
    padding: 3px 8px;
  }

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-top: 40px;
  }

.stat {
    text-align: center;
    padding: 28px 20px;
    background: transparent;
    border-radius: 16px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    transform: translateY(0);
    transition: transform 0.7s ease,
                box-shadow 0.7s ease,
                border-color 0.7s ease;
    will-change: transform;
  }

.stat:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(74, 123, 167, 0.16);
    border-color: rgba(74, 123, 167, 0.35);
  }

.stat-value {
    font-size: 38px;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 4px;
    letter-spacing: -1.5px;
    line-height: 1;
  }

.stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
  }

.flow {
    list-style: none;
    counter-reset: step;
    margin: 0;
    padding: 0;
  }

.flow li {
    counter-increment: step;
    position: relative;
    padding: 18px 24px 18px 68px;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  }

.flow li:hover {
    transform: translateX(4px);
    box-shadow: 0 12px 28px rgba(74, 123, 167, 0.10);
    border-color: rgba(74, 123, 167, 0.3);
  }

.flow li::before {
    content: counter(step);
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: var(--blue-light);
    color: var(--blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
  }

.flow li strong {
    color: var(--text);
    font-weight: 600;
  }

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
  }

.badge-op   { background: var(--blue-light); color: var(--blue); }

.badge-mod  { background: #fff0e6; color: #c44d00; }

.badge-new  { background: var(--green-light); color: #1a6b28; }

footer {
    padding: 48px 0;
    background: var(--bg-secondary);
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    border-top: 1px solid var(--border-light);
  }

footer .footer-brand {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
  }

footer p {
    margin-bottom: 4px;
  }

footer a {
    color: var(--blue);
    text-decoration: none;
    font-weight: 500;
  }

footer a:hover {
    color: var(--blue-hover);
  }

.reveal {
    opacity: 0;
  }

.reveal.visible {
    opacity: 1;
    animation: fadeIn 0.8s ease;
  }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

.nav-toggle {
    display: none;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    position: relative;
    z-index: 1001;
    border-radius: 8px;
    transition: background 0.2s;
  }

/* 汉堡按钮在浅色背景上几乎看不见，给个玻璃底 */
.nav-toggle {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, 0.85);
}

.nav-toggle:hover {
    background: var(--bg-secondary);
  }

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    margin: 4px auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

.nav-toggle.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }

.nav-toggle.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

@media (max-width: 920px) {
  .nav-toggle {
    display: block;
  }

  .nav-links {
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    /* 0.34 太透，背后高对比画面会让每行明暗不同 → 看起来"模糊不均匀"。
       提高到 0.86：仍有一点点透，但文字底下的画面已经均匀了。 */
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(180%) blur(28px);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 12px 32px rgba(15, 25, 35, 0.14);
    padding: 0 24px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .nav-links.open {
    /* 不再写死 500px：导航项已有 10 个，窄屏下每项约 48px，
       写死高度会把最后一项（Nalxer 服务器）裁掉。
       改为按视口高度自适应并允许内部滚动。 */
    max-height: calc(100vh - 52px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 1;
    padding: 12px 24px 20px;
    pointer-events: auto;
  }

  .nav-links li {
    width: 100%;
    border-bottom: 1px solid var(--border-light);
  }

  .nav-links li:last-child {
    border-bottom: none;
  }

  .nav-links a {
    display: block;
    padding: 15px 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
  }

  .nav-links a:hover {
    color: var(--blue);
    background: transparent;
  }

  .nav-links .nav-external {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 15px 20px;
    background: transparent;
    color: var(--blue);
    font-weight: 500;
    border-radius: 0;
    /* 文字不换行、不被压缩，箭头图标固定在右侧 */
    white-space: nowrap;
  }

  .nav-links .nav-external svg {
    flex: 0 0 auto;
  }

  .nav-links .nav-external:hover {
    background: transparent;
    color: var(--blue-hover);
  }

  .nav-links .nav-external svg {
    transform: none;
  }
}

@media (max-width: 768px) {
    .hero {
      padding: 110px 0 70px;
    }

    /* ★ 表头不要 nowrap：窄屏会让列互相挤压 */
    .hero h1,
    .section-header h2,
    .stat-value {
      letter-spacing: 0;
    }

    section {
      padding: 60px 0;
    }

    .card {
      padding: 22px;
    }

    .command-block {
      font-size: 11px;
      padding: 16px;
    }

    .stat-value {
      font-size: 32px;
    }

    .flow li {
      padding: 16px 18px 16px 60px;
    }
    .flow li::before {
      left: 16px;
      width: 30px;
      height: 30px;
      font-size: 12px;
    }

    /* ===== 表格：允许换行，超宽时横向滚动而不是挤压 ===== */
    .table-wrap {
      /* ★ 与正文块对齐：不用负边距做通栏，
         否则卡片会贴住屏幕左边缘，与其它模块错开 */
      margin: 14px 0;
      border-radius: 0;
      border-left: none;
      border-right: none;
    }

    table {
      font-size: 13.5px;
    }

    th,
    td {
      white-space: normal;
      padding: 10px 12px;
      line-height: 1.6;
    }

    th {
      font-size: 12px;
    }

    /* ============================================================
       ★ 窄屏表格卡片化
       ============================================================
       原因：两列表格在手机上，第一列（长命令名）会把第二列的汉字
       挤压成一条竖排的窄缝，完全没法读。

       方案：每行 = 一张卡片
         · 第一列 = 卡片标题（独立一行，加粗、带底边）
         · 其余列 = 说明正文，逐行铺开
       命令自己占一行，解析从下一行开始。桌面端不受影响。 */
    .table-wrap {
      overflow-x: visible;
    }

    .table-wrap table,
    .table-wrap tbody,
    .table-wrap tr,
    .table-wrap td {
      display: block;
      width: auto;
    }

    /* 表头在卡片模式下没有意义（每块自带标题），隐藏 */
    .table-wrap thead {
      display: none;
    }

    .table-wrap tr {
      margin-bottom: 12px;
      border: 1px solid var(--border-light);
      border-radius: 10px;
      background: #fff;
      overflow: hidden;
    }

    .table-wrap tr:last-child {
      margin-bottom: 0;
    }

    .table-wrap td {
      padding: 0;
      border: none;
      white-space: normal;
      word-break: break-word;
    }

    /* ★ 第一列：标题行（命令 / 配置项名） */
    .table-wrap td:first-child {
      display: block;
      padding: 11px 14px;
      background: var(--bg-secondary, #f7f8fa);
      border-bottom: 1px solid var(--border-light);
      font-weight: 600;
      white-space: normal;
    }

    .table-wrap td:first-child code {
      font-weight: 600;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    /* 其余列：正文行 */
    .table-wrap td:not(:first-child) {
      display: block;
      padding: 10px 14px;
      color: var(--text-secondary);
      white-space: normal;
      word-break: break-word;
    }

    .table-wrap td:not(:first-child) + td:not(:first-child) {
      border-top: 1px dashed var(--border-light);
    }

    .table-wrap td code {
      overflow-wrap: anywhere;
      word-break: break-word;
    }
  }

/* ============================================================
   二、帮助页专有
   ============================================================ */

.help-section p, .help-section li, .steps li, .tip-body, .faq-a, .faq-q, .help-table td, .help-table th, .code-block {
word-break: break-word;
    overflow-wrap: break-word;
}

.page-hero {
padding: 120px 0 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
content: '';
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 500px;
    background: radial-gradient(ellipse at center,
                rgba(74, 123, 167, 0.10) 0%,
                rgba(74, 123, 167, 0.03) 40%,
                transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.page-hero > .container {
position: relative;
    z-index: 1;
}

.page-hero .section-label {
display: inline-block;
    color: var(--blue);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.page-hero h1 {
font-size: clamp(36px, 5.5vw, 60px);
    font-weight: 700;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin-bottom: 16px;
}

.page-hero p {
font-size: 18px;
    color: var(--text-secondary);
    max-width: 620px;
    margin: 0 auto;
}

.content-layout {
display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 48px;
    padding: 40px 24px 100px;
}

.sidebar {
position: sticky;
    top: 80px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.sidebar-title {
font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 12px;
    padding-left: 12px;
}

.sidebar ul {
list-style: none;
}

.sidebar li {
margin-bottom: 2px;
}

.sidebar a {
display: block;
    padding: 7px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s;
    border-left: 2px solid transparent;
}

.sidebar a:hover {
background: var(--bg-secondary);
    color: var(--text);
}

.sidebar a.active {
background: var(--blue-light);
    color: var(--blue);
    font-weight: 500;
    border-left-color: var(--blue);
}

.sidebar a.sub {
padding-left: 26px;
      font-size: 12.5px;
      color: var(--text-tertiary);
}

.sidebar a.sub:hover {
color: var(--text);
}

.sidebar a.sub.active {
color: var(--blue);
      border-left-color: var(--blue);
}

.main-content {
min-width: 0;
    width: 100%;
}

.help-section {
margin-bottom: 64px;
    scroll-margin-top: 80px;
}

.help-section h2 {
font-size: 28px;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 10px;
}

.help-section h2 .num {
display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--blue-light);
    color: var(--blue);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.help-section h3 {
font-size: 17px;
    font-weight: 600;
    margin: 24px 0 10px;
    color: var(--text);
}

.help-section p {
font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.faq-item {
background: rgba(255, 255, 255, 0.30);
-webkit-backdrop-filter: blur(18px) saturate(180%);
backdrop-filter: blur(18px) saturate(180%);
box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.9),
  0 8px 32px rgba(30, 44, 56, 0.08);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-q {
padding: 18px 22px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    gap: 12px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.faq-q .faq-icon {
position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-q .faq-icon::before, .faq-q .faq-icon::after {
content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--blue);
    border-radius: 2px;
    transform: translate(-50%, -50%);
}

.faq-q .faq-icon::before {
width: 14px;
    height: 2px;
}

.faq-q .faq-icon::after {
width: 2px;
    height: 14px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
}

.faq-item.open .faq-q .faq-icon {
transform: rotate(180deg);
}

.faq-item.open .faq-q .faq-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.faq-a-wrap {
display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.open .faq-a-wrap {
grid-template-rows: 1fr;
}

.faq-a {
overflow: hidden;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    padding: 0 22px;
    opacity: 0;
    transition: opacity 0.3s ease, padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.faq-item.open .faq-a {
padding: 0 22px 18px;
    opacity: 1;
}

.faq-a ul {
list-style: none;
    margin: 8px 0;
}

.faq-a ul li {
padding: 3px 0 3px 20px;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.faq-a ul li::before {
content: '';
    position: absolute;
    left: 4px;
    top: 12px;
    width: 5px;
    height: 5px;
    background: var(--blue);
    border-radius: 50%;
    opacity: 0.6;
}

.steps {
list-style: none;
    counter-reset: step;
    margin: 16px 0;
    padding: 0;
}

.steps li {
counter-increment: step;
    position: relative;
    padding: 14px 0 14px 52px;
    font-size: 14px;
    color: var(--text-secondary);
    border-bottom: 1px dashed var(--border-light);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.7;
}

.steps li:last-child {
border-bottom: none;
}

.steps li::before {
content: counter(step);
    position: absolute;
    left: 0;
    top: 14px;
    width: 32px;
    height: 32px;
    background: var(--blue-light);
    color: var(--blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
}

.steps li strong {
display: inline;
    color: var(--text);
    font-weight: 600;
}

.table-scroll {
width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 16px 0;
    border-radius: 12px;
    border: 1px solid var(--border-light);
    background: transparent;
}

.table-scroll::-webkit-scrollbar {
height: 6px;
}

.table-scroll::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

.help-table {
width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    background: transparent;
}

.help-table thead {
background: var(--bg-tertiary);
}

.help-table th {
padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text);
    font-size: 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
}

.help-table td {
padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    vertical-align: top;
}

.help-table tr:last-child td {
border-bottom: none;
}

.help-table td:first-child {
white-space: nowrap;
}

.tip {
border-radius: 12px;
    padding: 16px 20px;
    margin: 16px 0;
    font-size: 14px;
    line-height: 1.7;
    border-left: 4px solid;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.tip-icon {
font-size: 18px;
    flex-shrink: 0;
    line-height: 1.4;
}

.tip-body {
flex: 1;
    min-width: 0;
}

.tip-body strong {
display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

.tip-info {
background: var(--blue-light);
    border-left-color: var(--blue);
    color: #33556f;
}

.tip-warn {
background: #fff8e6;
    border-left-color: #ffa500;
    color: #7a4f00;
}

.tip-danger {
background: #fff0f0;
    border-left-color: #ff3b30;
    color: #8b1a1a;
}

.tip-success {
background: #effaf0;
    border-left-color: #34c759;
    color: #1a6b28;
}

.code-block {
background: var(--code-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 16px 20px;
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    font-size: 13px;
    line-height: 1.7;
    color: #1d1d1f;
    overflow-x: auto;
    margin: 12px 0;
    word-break: break-word;
    white-space: pre-wrap;
}

.code-block .comment {
color: var(--code-comment);
    font-style: italic;
}

.code-block .key {
color: var(--code-value);
}

.code-block .cmd {
color: var(--code-keyword);
    font-weight: 600;
}

/* ---- 帮助页专有：媒体查询追加 ---- */

@media (max-width: 920px) {

  .content-layout {
  display: block;
        padding: 16px 24px 60px;
  }
  .sidebar-title {
  display: none;
  }
  .page-hero {
  padding: 90px 0 16px;
  }
  .page-hero h1 {
  font-size: 34px;
        letter-spacing: 0;
  }
  .page-hero p {
  font-size: 16px;
  }
  .help-section {
  margin-bottom: 40px;
  }
  .help-section h2 {
  font-size: 24px;
        gap: 10px;
        margin-bottom: 16px;
        padding-bottom: 10px;
  }
  .help-section h2 .num {
  width: 26px;
        height: 26px;
        font-size: 13px;
  }
  .help-section h3 {
  font-size: 18px;
        margin: 20px 0 8px;
  }
  .help-section p {
  font-size: 16px;
        line-height: 1.7;
  }
  .faq-q {
  padding: 16px 18px;
        font-size: 16px;
        line-height: 1.5;
  }
  .faq-a {
  padding: 0 18px;
        font-size: 15px;
        line-height: 1.75;
  }
  .faq-item.open .faq-a {
  padding: 0 18px 16px;
  }
  .table-scroll {
  /* ★ 与正文块（.tip / 段落）对齐：不用负边距做通栏，
           否则卡片会贴住屏幕左边缘，和下面的提示块错开 14px */
        margin: 14px 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        -webkit-overflow-scrolling: touch;
  }
  .help-table {
  font-size: 14px;
        width: 100%;
  }
  .help-table th, .help-table td:first-child {
  white-space: normal;
  }
  .help-table th {
  font-size: 13px;
        padding: 10px 14px;
  }
  .help-table td {
  padding: 10px 14px;
        font-size: 14px;
        line-height: 1.6;
  }
  .help-table td:first-child code {
  overflow-wrap: anywhere;
        word-break: break-word;
  }
  .steps li {
  padding: 14px 0 14px 46px;
        font-size: 15px;
        line-height: 1.75;
  }
  .steps li::before {
  width: 30px;
        height: 30px;
        font-size: 13px;
  }
  .tip {
  padding: 14px 16px;
        font-size: 15px;
        line-height: 1.7;
        border-radius: 10px;
  }
  .code-block {
  font-size: 13.5px;
        padding: 14px 16px;
        border-radius: 8px;
        white-space: pre-wrap;
        word-break: break-word;
  }
  .table-scroll {
  overflow-x: visible;
  }
  .help-table, .help-table tbody, .help-table tr, .help-table td {
  display: block;
        width: auto;
  }
  .help-table thead {
  display: none;
  }
  .help-table tr {
    margin-bottom: 12px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 8px 32px rgba(30, 44, 56, 0.10);
    overflow: hidden;
  }
  .help-table tr:last-child {
  margin-bottom: 0;
  }
  .help-table td {
  padding: 0;
        border: none;
        font-size: 14px;
        line-height: 1.7;
  }
  .help-table td:first-child {
  display: block;
        padding: 11px 14px;
        background: var(--bg-secondary, #f7f8fa);
        border-bottom: 1px solid var(--border-light);
        font-weight: 600;
        font-size: 14px;
        color: var(--text);
        white-space: normal;
        word-break: break-word;
  }
  .help-table td:first-child code {
  font-weight: 600;
        overflow-wrap: anywhere;
        word-break: break-word;
  }
  .help-table td:not(:first-child) {
  display: block;
        padding: 10px 14px;
        color: var(--text-secondary);
        white-space: normal;
        word-break: break-word;
  }
  .help-table td:not(:first-child) + td:not(:first-child) {
  border-top: 1px dashed var(--border-light);
  }
  .perm-compare td[data-label] {
  display: flex;
        align-items: baseline;
        gap: 8px;
  }
  .perm-compare td[data-label]::before {
  content: attr(data-label);
        flex: 0 0 auto;
        min-width: 4.5em;
        color: var(--text-tertiary);
        font-size: 12.5px;
        font-weight: 500;
  }
  .help-table td code {
  overflow-wrap: anywhere;
        word-break: break-word;
  }
  .help-table td[colspan] {
  display: block;
        background: var(--bg-secondary, #f7f8fa);
        font-weight: 600;
        color: var(--text);
  }
}

@media (max-width: 480px) {
  .page-hero h1 {
  font-size: 30px;
        letter-spacing: 0;
  }
  .help-section h2 {
  font-size: 22px;
  }
  .help-section h3 {
  font-size: 17px;
  }
  .help-section p {
  font-size: 15px;
  }
  .table-scroll {
  margin: 12px 0;
  }
  .help-table {
  font-size: 13.5px;
  }
  .help-table th {
  font-size: 12px;
        padding: 8px 12px;
  }
  .help-table td {
  padding: 8px 12px;
        font-size: 13.5px;
  }
  .faq-q {
  font-size: 15px;
        padding: 14px 16px;
  }
  .faq-a {
  font-size: 14px;
        padding: 0 16px;
  }
  .faq-item.open .faq-a {
  padding: 0 16px 14px;
  }
  .code-block {
  font-size: 12.5px;
        padding: 12px 14px;
  }
  .steps li {
  font-size: 14.5px;
        padding-left: 42px;
  }
  .steps li::before {
  width: 28px;
        height: 28px;
        font-size: 12px;
        top: 13px;
  }
}

/* ============================================================
   三、页面专属组件
   ============================================================ */

/* ---- 插件介绍页 ---- */
.plug-hero-ver {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 980px;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 600;
}

.plug-links {
  display: flex;
  gap: 10px;
  margin-top: 26px;
  flex-wrap: wrap;
  justify-content: center;
}

.plug-links .btn {
  padding: 10px 18px;
  font-size: 13.5px;
}

.plug-ver {
  margin: -6px 0 10px;
  font-size: 12.5px;
  color: var(--text-tertiary);
}

/* ---- 主页卡片里的按钮组 ---- */
.card-links {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.card-links .btn {
  padding: 9px 16px;
  font-size: 13px;
}

/* ---- 关于作者 ---- */
.author-box {
  margin-top: 40px;
  padding: 28px;
  border-radius: 16px;
  /* 底色与边框由下面的玻璃规则提供，这里不再铺实色 */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.34);
}

.author-box h3 {
  margin-bottom: 10px;
  font-size: 19px;
}

.author-box p {
  color: var(--text-secondary);
  line-height: 1.8;
}

/* ---- 更新亮点下方的指引 ---- */
.whatsnew-more {
  margin: 28px auto 0;
  max-width: 560px;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-tertiary);
}

.whatsnew-more a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
}

.whatsnew-more a:hover {
  text-decoration: underline;
}

/* ---- 综合帮助中心 ---- */
.help-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.help-hub-card {
  display: block;
  padding: 26px 24px;
  border-radius: 16px;
  border: 1px solid var(--border-light);
  background: rgba(255, 255, 255, 0.28);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.help-hub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(74, 123, 167, 0.14);
  border-color: rgba(74, 123, 167, 0.32);
}

.help-hub-icon {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 14px;
}

.help-hub-card h3 {
  margin-bottom: 6px;
  font-size: 18px;
  color: var(--text);
}

.help-hub-card .hub-ver {
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--text-tertiary);
}

.help-hub-card p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.help-hub-card .hub-tags {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.help-hub-card .hub-tags span {
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--bg-secondary);
  font-size: 12px;
  color: var(--text-secondary);
}

.hub-note {
  margin-top: 34px;
  padding: 22px 24px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.26);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.8),
    0 8px 24px rgba(15, 25, 35, 0.08);
}

.hub-note h3 {
  margin-bottom: 10px;
  font-size: 16px;
}

.hub-note ul {
  margin: 0;
  padding-left: 20px;
  color: var(--text-secondary);
  line-height: 1.9;
  font-size: 14px;
}

.hub-note a {
  color: var(--blue);
  text-decoration: none;
}

.hub-note a:hover {
  text-decoration: underline;
}

@media (max-width: 920px) {
  .help-hub-grid {
    grid-template-columns: 1fr;
  }
  /* 窄屏：文档页 hero 太高，压缩为一行标题 */
  .page-hero {
    padding: 28px 0 18px;
  }

  .page-hero h1 {
    font-size: clamp(22px, 6vw, 28px);
    letter-spacing: -0.5px;
    margin-bottom: 8px;
  }

  .page-hero p {
    font-size: 14px;
    line-height: 1.6;
  }

  .page-hero .plug-hero-ver {
    margin-bottom: 8px;
  }
}

/* ============================================================
   封面 Hero（主页）—— 视频视差
   ============================================================
   视频固定在视口（position: fixed），页面滚动时视频不动，
   只有文字滚动 —— 即视差效果。

   层级：
     .bg-video         fixed，最底层（z-index: -1）
     .cover-inner      relative（文字，正常滚动）
     .cover-overlay    absolute，只盖封面这段高度（随页面滚动）
   ============================================================ */

/* 视频背景：钉在视口，不随页面滚动 */
.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

.cover {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 24px;
  background: transparent;
}

/* 遮罩：已按要求去掉，视频直接作为背景 */
.cover-overlay {
  display: none;
}

/* 文字内容：正常滚动 */
.cover-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  width: 100%;
}

/* ---- 圆形头像：悬停 3D 翻转 ---- */
.avatar-flip {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 auto 30px;
  perspective: 900px;
}

.avatar-face,
.avatar-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.avatar-face {
  background: linear-gradient(135deg, var(--blue) 0%, #7ba3c9 50%, #8fc0dc 100%);
  color: #fff;
  transform: rotateY(0deg);
  overflow: hidden;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16),
              0 0 34px rgba(74, 123, 167, 0.55);
}

.avatar-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.avatar-back {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  transform: rotateY(-180deg);
}

.avatar-back strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.5px;
}

.avatar-back em {
  margin-top: 6px;
  font-size: 11px;
  font-style: normal;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 1px;
}

.avatar-flip:hover .avatar-face {
  transform: rotateY(180deg);
}

.avatar-flip:hover .avatar-back {
  transform: rotateY(0deg);
}

/* ---- 标题区 ---- */
.cover-title {
  margin: 0 0 6px;
  font-size: clamp(34px, 6vw, 52px);
  font-weight: 300;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  line-height: 1.15;
}

.cover-subtitle {
  margin: 0;
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 400;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
}

.cover-divider {
  width: 120px;
  height: 0;
  margin: 26px auto;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.cover-quote {
  margin: 0 auto 34px;
  max-width: 460px;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.88);
}

.cover-quote strong {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

/* ---- 胶囊按钮组 ---- */
.cover-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 28px;
}

.cover-btn {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  background: rgba(20, 20, 20, 0.4);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  text-decoration: none;
  opacity: 0.85;
  transition: all 0.25s ease;
}

.cover-btn:hover {
  opacity: 1;
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(74, 123, 167, 0.45);
}

/* ---- 底部信息行 ---- */
.cover-social {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
  margin-bottom: 26px;
}

.cover-social a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.28);
  font-size: 12.5px;
  text-decoration: none;
  letter-spacing: 0.4px;
  transition: color 0.2s ease;
}

.cover-social a:hover {
  color: #fff;
}

.cover-social .ico {
  font-size: 7px;
  color: var(--blue);
}

.cover-remark p {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.42);
}

.cover-remark strong {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

/* 主页下方内容区：完全透明，视频直接透出（不加任何模糊） */
#plugins,
#about {
  position: relative;
  background: transparent;
}

/* ---- 主页透明导航（滚动后变实色） ---- */
.nav-home {
  /* 与全站顶栏一致：一样是液态玻璃，不做透明特殊处理 */
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.4),
    0 4px 24px rgba(15, 25, 35, 0.07);
}

.nav-home .nav-logo,
.nav-home .nav-links a {
  color: var(--text);
}

.nav-home .nav-links a:hover,
.nav-home.scrolled .nav-links a:hover {
  color: var(--blue);
}

.nav-home .nav-logo-icon {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.nav-home .nav-links .nav-external {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.nav-home .nav-links .nav-external:hover {
  background: var(--blue);
  border-color: var(--blue);
}

.nav-home .nav-toggle span {
  background: var(--text);
}

.nav-home.scrolled {
  /* 滚动后不做任何变化，保持同一块玻璃 */
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.4),
    0 4px 24px rgba(15, 25, 35, 0.07);
}

.nav-home.scrolled .nav-logo,
.nav-home.scrolled .nav-links a {
  color: var(--text-secondary);
}

.nav-home.scrolled .nav-logo {
  color: var(--text);
}

.nav-home.scrolled .nav-links .nav-external {
  color: var(--blue);
  background: transparent;
  border-color: transparent;
}

.nav-home.scrolled .nav-toggle span {
  background: var(--text);
}

/* ---- 窄屏 ---- */
@media (max-width: 920px) {
  .cover {
    min-height: 100vh;
    padding: 88px 20px 56px;
  }

  .avatar-flip {
    width: 108px;
    height: 108px;
    margin-bottom: 24px;
  }

  .cover-divider {
    margin: 20px auto;
  }

  .cover-btn {
    padding: 9px 18px;
    font-size: 13px;
  }

  .cover-social {
    gap: 6px 14px;
  }

  .nav-home .nav-links {
  /* 与全站汉堡面板统一：足够实，不出现不均匀的透底 */
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
}

  .nav-home .nav-links a {
    color: var(--text);
  }

  .nav-home .nav-links a:hover {
    color: var(--blue);
  }
}

/* ============================================================
   去掉灰罩后的可读性方案
   ============================================================
   不盖灰色遮罩（保留画面清晰），改为：
     · 视频轻微降亮，让白字更突出
     · 文字加硬阴影
     · 按钮/信息条自带玻璃底
   ============================================================ */

/* 文字加阴影 */
.cover-title {
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.75),
    0 1px 3px rgba(0, 0, 0, 0.6);
}

.cover-subtitle {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

.cover-quote {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

.cover-social a {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

/* ============================================================
   手机端背景：改用 mobile.jpg（不加载视频，节省流量）
   ============================================================ */
@media (max-width: 920px) {
  /* 隐藏视频（手机端用 mobile.jpg，省流量） */
  .bg-video {
    display: none;
  }

  /* 手机端：导航项收进汉堡，顶栏只留 logo + 汉堡 */

  /* body 需要成为定位参照 */
  body {
    position: relative;
  }

  /* 封面遮罩：按要求全部去掉 */
  .cover-overlay {
    display: none;
  }

  /* 封面内容要压在遮罩之上 */
  .cover-inner {
    z-index: 1;
  }

  
  /* .cover 自己不再承载背景图，也不再用 aspect-ratio 撑高 */
  .cover {
    min-height: 0;
    aspect-ratio: auto;
    max-height: none;
    background-image: none;
    background-color: transparent;
    /* 高度取「图片比例」与「视口」的较小值，保证文字压在图上 */
    min-height: min(100vw * 1920 / 1080, 100vh);
  }

  .btn-primary {
    background: var(--blue);
    color: #fff;
  }

  .help-table td:first-child {
    background: var(--bg-secondary);
  }

  #plugins .card,
  #about .author-box,
  .help-hub-card,
  .faq-item {
    box-shadow: 0 6px 20px rgba(15, 25, 35, 0.12);
  }
}

/* ============================================================
   液态玻璃：作者卡片 / 帮助卡片 / 按钮
   ============================================================
   注：插件卡片（.card）的玻璃在第 411 行，不在这里重复。
   镜面高光边（inset 0 1.5px 0）是让面板读起来像玻璃的关键。
   ============================================================ */

#about .author-box,
.help-hub-card {
  background: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    0 10px 30px rgba(15, 25, 35, 0.12);
}

.help-hub-card:hover {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2),
    0 16px 40px rgba(15, 25, 35, 0.18);
}

/* 按钮：同一套玻璃，高光更细 */
.btn-primary,
.btn-secondary,
.card-links .btn {
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  box-shadow:
    inset 0 1.2px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 6px 20px rgba(15, 25, 35, 0.16);
}

.btn-primary {
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.52);
  color: var(--blue);
}

.btn-primary:hover {
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.75);
  color: var(--blue-hover);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.44);
  color: var(--text-secondary);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.68);
  color: var(--text);
}

/* ============================================================
   回退：浏览器不支持 backdrop-filter 时，用不透明底保证可读
   ============================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* 不支持模糊时：仍保持半透明观感，只是提高一点不透明度保证可读，
     不要用实心白 —— 那会让卡片完全失去玻璃质感 */
  #plugins .card,
  #about .author-box,
  .help-hub-card {
    background: rgba(255, 255, 255, 0.72);
  }

  .btn-primary,
  .btn-secondary,
  .card-links .btn {
    background: rgba(255, 255, 255, 0.72);
  }

  .btn-primary {
    background: rgba(74, 123, 167, 0.92);
    color: #fff;
  }
}

/* ============================================================
   文档站布局（插件介绍页 / 帮助页）
   ============================================================
   按 GitBook 文档站规范：
     · 三栏：侧栏导航 | 正文 | 本页目录
     · 侧栏分组可折叠，当前项带强调条
     · 长页面提供右侧「本页目录」，随滚动高亮
     · 移动端侧栏变抽屉，由汉堡按钮唤出
   ============================================================ */

/* ---------- 三栏容器 ---------- */
.content-layout,
.content-layout.no-toc {
  display: grid;
  /* 只保留左侧目录栏 + 正文（右侧「本页目录」已去掉） */
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 48px;
  padding: 40px 24px 100px;
  align-items: start;
}

/* 本页目录已移除，保留规则以免残留样式影响 */
.page-toc {
  display: none;
}

/* ---------- 侧栏 ---------- */
.sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  /* 滚动条做细，避免抢视觉 */
  scrollbar-width: thin;
}

.sidebar::-webkit-scrollbar {
  width: 4px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 2px;
}

.sidebar-title {
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* 分组：用原生 details 实现折叠，无需 JS */
.sidebar details {
  margin-bottom: 4px;
}

.sidebar summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 8px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color .2s ease;
}

.sidebar summary::-webkit-details-marker {
  display: none;
}

.sidebar summary:hover {
  color: var(--text-secondary);
}

/* 折叠箭头 */
.sidebar summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
  flex: 0 0 auto;
}

.sidebar details[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.sidebar ul {
  list-style: none;
  padding-bottom: 6px;
}

.sidebar li {
  margin-bottom: 1px;
}

.sidebar a {
  display: block;
  padding: 7px 12px;
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.sidebar a:hover {
  background: var(--bg-secondary);
  color: var(--text);
}

/* 当前项：强调条 + 加粗 */
.sidebar a.active {
  background: var(--blue-light);
  border-left-color: var(--blue);
  color: var(--blue);
  font-weight: 600;
}

.sidebar a.sub {
  padding-left: 24px;
  font-size: 12.5px;
  color: var(--text-tertiary);
}

.sidebar a.sub.active {
  color: var(--blue);
  border-left-color: var(--blue);
}

/* ---------- 右侧「本页目录」 ---------- */
.page-toc {
  position: sticky;
  top: 80px;
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  font-size: 12.5px;
  scrollbar-width: thin;
}

.page-toc h2 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.page-toc ul {
  list-style: none;
  border-left: 1px solid var(--border-light);
}

.page-toc a {
  display: block;
  padding: 5px 0 5px 12px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--text-tertiary);
  text-decoration: none;
  line-height: 1.5;
  transition: color .18s ease, border-color .18s ease;
}

.page-toc a:hover {
  color: var(--text);
}

.page-toc a.active {
  border-left-color: var(--blue);
  color: var(--blue);
  font-weight: 500;
}

.page-toc a.sub {
  padding-left: 26px;
  font-size: 12px;
}

/* ---------- 正文 ---------- */
.main-content {
  min-width: 0;
  width: 100%;
}

/* ---------- 中等屏：收掉本页目录 ---------- */
@media (max-width: 1180px) {
  .content-layout,
  .content-layout.no-toc {
    grid-template-columns: 224px minmax(0, 1fr);
    gap: 36px;
  }
}

/* ---------- 窄屏：侧栏变抽屉 ---------- */
@media (max-width: 920px) {
  .content-layout,
  .content-layout.no-toc {
    display: block;
    /* 这个元素同时有 .container 类，左右 24px 内边距必须保留，
       否则表格卡片会贴住屏幕边缘。 */
    padding: 16px 24px 60px;
  }

  .sidebar-title {
    display: block;
    margin-bottom: 10px;
  }

  .page-toc {
    display: none;
  }
}

/* ============================================================
   插件介绍页布局
   ============================================================
   介绍页是 landing page 性质，不用「侧栏 + 正文」的文档布局，
   而是：hero 通栏 → 下方「本页目录 | 内容」两栏。
   目录只做锚点跳转与跟随高亮，不承载导航职责。
   ============================================================ */

.intro-wrap {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
  padding-top: 0;
}

/* 目录排在左侧，与内容同高 */
.intro-wrap .intro-toc {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 88px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-top: 60px;
  scrollbar-width: none;
}

.intro-wrap .intro-toc::-webkit-scrollbar {
  display: none;
}

.intro-body {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

/* 介绍页里的区块已经是 section，去掉重复的大内边距 */
.intro-body > section {
  padding: 60px 0;
}

.intro-body > section:first-child {
  padding-top: 60px;
}

/* 区块之间的分隔线，让长页面有节奏 */
.intro-body > section + section {
  border-top: 1px solid var(--border-light);
}

/* 介绍页的区块头改为左对齐（原本是居中，长页面居中会显得散） */
.intro-body .section-header {
  text-align: left;
  margin-bottom: 36px;
}

.intro-body .section-header p {
  margin: 0;
}

/* ---------- 中等屏：目录移到顶部横排 ---------- */
@media (max-width: 1100px) {
  .intro-wrap {
    display: block;
  }

  .intro-wrap .intro-toc {
    position: static;
    max-height: none;
    padding: 24px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 14px;
    margin-bottom: 8px;
  }

  .intro-wrap .intro-toc h2 {
    margin: 0 6px 0 0;
  }

  .intro-wrap .intro-toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-left: none;
  }

  .intro-wrap .intro-toc a {
    padding: 4px 12px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    border-left: 1px solid var(--border-light);
    margin-left: 0;
    font-size: 12.5px;
  }

  .intro-wrap .intro-toc a.active {
    background: var(--blue-light);
    border-color: var(--blue-border);
    color: var(--blue);
  }

  .intro-body > section {
    padding: 44px 0;
  }
}

/* ---------- 窄屏 ---------- */
@media (max-width: 920px) {
  .intro-wrap .intro-toc {
    padding-top: 16px;
  }

  .intro-body > section {
    padding: 36px 0;
  }

  .intro-body .section-header {
    margin-bottom: 24px;
  }
}

/* ============================================================
   介绍页样式（重写版）
   ============================================================
   设计：
     · 背景完全透明 —— 视频 / mobile.jpg 直接就是页面背景，不加任何遮罩
     · 文字用浅色 + 阴影（压在图上能读）
     · 所有控件与模块用液态玻璃
   ============================================================ */

/* ---------- 封面：结构沿用主页 .cover，只是不占满整屏 ---------- */
.cover-page {
  min-height: auto;
  padding: 128px 24px 64px;
}

.cover-page .cover-title {
  font-size: clamp(30px, 5vw, 46px);
}

.cover-page .cover-quote {
  margin-bottom: 24px;
}

.cover-page .cover-btn {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.cover-page .cover-btn:hover {
  background: var(--blue);
  border-color: var(--blue);
}

/* ---------- 正文标题与文字：浅色，压在背景上 ---------- */
.intro-body h2,
.intro-body h3,
.intro-body h4,
.intro-body .section-label,
.intro-body .section-header p,
.intro-body > section > .container > p {
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.5);
}

.intro-body .section-label {
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- 通用玻璃：所有控件与模块 ---------- */
.glass,
.bento,
.bento-item,
.tile,
.stat-row,
.stat-cell,
.card,
.zz-panel,
.faq-item,
.table-wrap,
.table-scroll,
.intro-split .split-points li,
.cta-band {
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(6px) saturate(190%) brightness(0.94);
  backdrop-filter: blur(6px) saturate(190%) brightness(0.94);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2),
    0 10px 30px rgba(15, 25, 35, 0.14);
}

.bento-item:hover,
.tile:hover,
.card:hover,
.faq-item:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* 表格本体透明，让外层的玻璃透出来 */
.help-table,
.help-table thead,
.help-table tbody,
.help-table tr,
.help-table td,
.help-table th {
  background: transparent;
}

.help-table td:first-child {
  background: rgba(255, 255, 255, 0.10);
}

/* ---------- Bento 网格 ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  background: none;
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.bento-item {
  grid-column: span 2;
  padding: 26px 24px;
  border-radius: 18px;
}

.bento-item.wide { grid-column: span 3; }
.bento-item.full { grid-column: span 6; }

.bento-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.75);
}

.bento-item h3 { margin-bottom: 8px; font-size: 17px; }

.bento-item p,
.bento-item li {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-secondary);
}

.bento-item ul { margin: 12px 0 0; padding-left: 18px; }

.bento-item.wide .bento-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

/* ---------- 彩色 tile 网格（头衔页） ---------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.tile {
  position: relative;
  padding: 16px 16px 14px;
  border-radius: 14px;
  overflow: hidden;
}

.tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--tile-accent, var(--blue));
  opacity: 0.85;
}

.tile-emoji { font-size: 20px; line-height: 1; margin-bottom: 7px; }
.tile-name  { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.tile-cond  { font-size: 12px; line-height: 1.45; color: var(--text-tertiary); }

.tile--growth { --tile-accent: #4a7ba7; }
.tile--skill  { --tile-accent: #7a6cb0; }
.tile--social { --tile-accent: #4f9d8a; }
.tile--event  { --tile-accent: #c07a4a; }
.tile--daily  { --tile-accent: #b0567a; }

/* ---------- 大数字统计条 ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  border-radius: 18px;
  overflow: hidden;
}

.stat-cell {
  padding: 24px 18px;
  text-align: center;
  background: none;
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.stat-cell:last-child { border-right: none; }

.stat-cell b {
  display: block;
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 6px;
  color: var(--blue);
}

.stat-cell span { font-size: 12.5px; color: var(--text-tertiary); }

/* ---------- 编号章节（主插件页） ---------- */
.chapter {
  position: relative;
  padding: 52px 0 52px 32px;
  border-left: 2px solid rgba(255, 255, 255, 0.4);
}

.chapter:last-of-type { border-left-color: transparent; }

.chapter::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 58px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--blue);
}

.chapter-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }

.chapter-no {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
}

.chapter-title {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  letter-spacing: -0.4px;
  color: #fff;
}

.chapter-lede {
  max-width: 620px;
  margin-bottom: 24px;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.92);
}

/* ---------- 左右交错 ---------- */
.zigzag {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 38px;
  align-items: center;
}

.zigzag.reverse .zz-text  { order: 2; }
.zigzag.reverse .zz-panel { order: 1; }

.zz-text h4 { margin-bottom: 10px; font-size: 17px; font-weight: 600; color: #fff; }
.zz-text p  { font-size: 14.5px; line-height: 1.8; color: rgba(255, 255, 255, 0.9); }
.zz-text ul { margin: 12px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.85; color: rgba(255, 255, 255, 0.9); }

.zz-panel {
  padding: 22px 24px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text-secondary);
}

.zz-panel .panel-title {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.zz-panel ul { margin: 0; padding-left: 18px; }
.zz-panel li + li { margin-top: 6px; }

/* ---------- 色带小标题 ---------- */
.band-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.band-title::before {
  content: '';
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--blue);
}

/* ---------- 对比条 ---------- */
.compare-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 18px;
  overflow: hidden;
}

.compare-col { padding: 28px 26px; background: none; }

.compare-col.ours { border-left: 1px solid rgba(255, 255, 255, 0.5); }

.compare-col h3 {
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.compare-col.typical h3 { color: var(--text-tertiary); }
.compare-col.ours h3 { color: var(--blue); }

.compare-col ul { list-style: none; display: grid; gap: 11px; }

.compare-col li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.compare-col li::before { position: absolute; left: 0; font-weight: 700; }
.compare-col.typical li::before { content: '✕'; color: var(--text-tertiary); }
.compare-col.ours li::before { content: '✓'; color: var(--blue); }

/* ---------- 底部 CTA ---------- */
.cta-band {
  max-width: 1080px;
  margin: 0 auto;
  padding: 52px 38px;
  border-radius: 24px;
  text-align: center;
}

.cta-band .cta-wordmark {
  margin: 0 0 10px;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 300;
  letter-spacing: 1px;
  color: var(--text);
}

.cta-band p {
  margin: 0 auto 26px;
  max-width: 460px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-secondary);
}

.cta-band .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ---------- 双栏说明 ---------- */
.intro-split {
  display: grid;
  grid-template-columns: 1.14fr 1fr;
  gap: 52px;
  align-items: center;
}

.intro-split h2 {
  font-size: clamp(23px, 3vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
  color: #fff;
}

.intro-split p {
  font-size: 16px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.9);
}

.intro-split .split-points {
  list-style: none;
  display: grid;
  gap: 14px;
}

.intro-split .split-points li {
  padding: 16px 18px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.intro-split .split-points strong { color: var(--text); }

/* ---------- 入场动画 ---------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stagger > * { animation: rise-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(n+6) { animation-delay: 300ms; }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .intro-split { grid-template-columns: 1fr; gap: 30px; }
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento-item, .bento-item.wide { grid-column: span 2; }
  .bento-item.full { grid-column: span 4; }
}

@media (max-width: 920px) {
  .cover-page { padding: 96px 20px 52px; }
  .bento { grid-template-columns: 1fr; }
  .bento-item, .bento-item.wide, .bento-item.full { grid-column: span 1; }
  .bento-item.wide .bento-cols { grid-template-columns: 1fr; gap: 14px; }
  .zigzag { grid-template-columns: 1fr; gap: 22px; }
  .zigzag.reverse .zz-text, .zigzag.reverse .zz-panel { order: initial; }
  .chapter { padding: 40px 0 40px 24px; }
  .chapter::before { top: 46px; }
  .compare-band { grid-template-columns: 1fr; }
  .compare-col.ours { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.5); }
  .cta-band { padding: 38px 22px; border-radius: 18px; }
  .stat-cell { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
  .stat-cell:last-child { border-bottom: none; }
  .tile-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
}

/* 玻璃很淡，卡片内的深色文字需要一点白晕才清楚 */
.bento-item,
.bento-item *,
.tile,
.tile *,
.stat-cell,
.stat-cell *,
.card,
.card *,
.zz-panel,
.zz-panel *,
.faq-item,
.faq-item *,
.help-table,
.help-table *,
.cta-band,
.cta-band *,
.intro-split .split-points li,
.intro-split .split-points li * {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.75);
}

.bento-item h3,
.tile-name,
.card h3,
.zz-panel .panel-title,
.stat-cell b {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
}

/* ============================================================
   介绍页：body 不能有实白底，否则视频被挡住
   ============================================================ */
body.intro-page {
  background: transparent;
}

/* 介绍页的 section 一律透明，背景交给视频 + 各模块的玻璃 */
body.intro-page section,
body.intro-page .intro-body,
body.intro-page .container {
  background: transparent;
}

/* ============================================================
   顶栏：文字与汉堡图标任何状态下都是黑色
   ============================================================
   覆盖普通页 / 主页透明导航 / 滚动后三种状态，
   以及 Nalxer 服务器那个外链（原来滚动后是 transparent）。
   ============================================================ */
nav .nav-logo,
nav .nav-logo:hover,
nav .nav-links a,
.nav-home .nav-logo,
.nav-home .nav-links a,
.nav-home.scrolled .nav-logo,
.nav-home.scrolled .nav-links a {
  color: #000 !important;
  -webkit-text-fill-color: #000;
}

/* 外链的胶囊底也去掉，免得看着像按钮 */
nav .nav-links .nav-external,
.nav-home .nav-links .nav-external,
.nav-home.scrolled .nav-links .nav-external {
  background: transparent !important;
  border-color: transparent !important;
}

/* 悬停仍用蓝色，便于区分可点 */
nav .nav-links a:hover,
.nav-home .nav-links a:hover,
.nav-home.scrolled .nav-links a:hover,

/* ============================================================
   动画：让页面不那么死板
   ============================================================
   三部分：
     ① 统一的悬停过渡（控件浮起 + 阴影加深）
     ② 入场关键帧（滚动到就播）
     ③ 细节微动（图标、数字、遮罩）
   ============================================================ */

/* ---------- ① 过渡：所有控件与模块统一节奏 ---------- */
.bento-item,
.tile,
.card,
.stat-row,
.stat-cell,
.help-hub-card,
.zz-panel,
.table-wrap,
.table-scroll,
.faq-item,
.cta-band,
.intro-split .split-points li,
.help-table tr,
.btn,
.cover-page .cover-btn,
.nav-links a,
nav .nav-toggle,
.sidebar a,
.tip,
.hub-note {
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.24s ease,
    border-color 0.24s ease,
    color 0.2s ease,
    opacity 0.24s ease;
}

/* 悬停：整体浮起 + 阴影加深 */
.bento-item:hover,
.tile:hover,
.card:hover,
.help-hub-card:hover,
.zz-panel:hover,
.table-wrap:hover,
.table-scroll:hover,
.faq-item:hover,
.intro-split .split-points li:hover,
.help-table tbody tr:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    0 18px 42px rgba(15, 25, 35, 0.20);
}

/* 图标在悬停时轻微放大并抬起 */
.bento-item:hover .bento-icon,
.card:hover .card-icon,
.tile:hover .tile-emoji,
.stat-cell:hover b {
  transform: translateY(-2px) scale(1.08);
}

.bento-icon,
.card-icon,
.tile-emoji,
.stat-cell b {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 按钮：按下有回弹 */
.btn:active,
.cover-page .cover-btn:active,
.help-hub-card:active {
  transform: translateY(0) scale(0.97);
}

/* 导航项：下划线滑入 */
nav .nav-links a {
  position: relative;
}

nav .nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

nav .nav-links a:hover::after {
  transform: scaleX(1);
}

/* 汉堡按钮：悬停轻微放大 */
nav .nav-toggle:hover {
  transform: scale(1.08);
}

nav .nav-toggle:active {
  transform: scale(0.94);
}

/* ---------- ② 入场关键帧 ---------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slide-left {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-right {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 滚动到位后播放（.visible 由现有脚本添加） */
.reveal.visible {
  animation: rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bento-item.reveal.visible,
.tile.reveal.visible,
.card.reveal.visible,
.help-hub-card.reveal.visible {
  animation: scale-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.zigzag .zz-text.reveal.visible  { animation: slide-left 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.zigzag .zz-panel.reveal.visible { animation: slide-right 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* 同组元素错开出现 */
.bento > *:nth-child(1), .tile-grid > *:nth-child(1) { animation-delay: 0ms; }
.bento > *:nth-child(2), .tile-grid > *:nth-child(2) { animation-delay: 55ms; }
.bento > *:nth-child(3), .tile-grid > *:nth-child(3) { animation-delay: 110ms; }
.bento > *:nth-child(4), .tile-grid > *:nth-child(4) { animation-delay: 165ms; }
.bento > *:nth-child(5), .tile-grid > *:nth-child(5) { animation-delay: 220ms; }
.bento > *:nth-child(n+6), .tile-grid > *:nth-child(n+6) { animation-delay: 275ms; }

/* ---------- ③ 细节微动 ---------- */

/* 章节编号与节点圆点 */
.chapter::before {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chapter:hover::before {
  transform: scale(1.35);
  box-shadow: 0 0 0 5px rgba(74, 123, 167, 0.16);
}

/* 统计数字悬停时用主题色 */
.stat-cell {
  transition: background-color 0.26s ease, transform 0.26s ease;
}

.stat-cell:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* 外链箭头 */
.nav-links .nav-external svg {
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-links .nav-external:hover svg {
  transform: translate(2px, -2px);
}

/* 表格行淡入 */
.help-table tbody tr {
  transition: background-color 0.2s ease, transform 0.2s ease;
}

/* 手风琴展开过渡 */
.faq-a-wrap {
  transition: max-height 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease;
}

/* 侧栏胶囊指示条 */
.sidebar a {
  transition: background-color 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, padding-left 0.22s ease;
}

.sidebar a:hover {
  padding-left: 16px;
}

/* 平滑锚点滚动 */
html {
  scroll-behavior: smooth;
}

/* ---------- 减少动态效果：只关持续运动，保留入场 ---------- */
@media (prefers-reduced-motion: reduce) {
  .bento-item:hover,
  .tile:hover,
  .card:hover,
  .help-hub-card:hover,
  .zz-panel:hover,
  .table-wrap:hover,
  .table-scroll:hover,
  .faq-item:hover,
  .intro-split .split-points li:hover,
  .help-table tbody tr:hover {
    transform: none;
  }

  nav .nav-toggle:hover,
  nav .nav-toggle:active,
  .btn:active,
  .cover-page .cover-btn:active {
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ============================================================
   页面切换动画
   ============================================================ */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 内容区进入 */
body > main,
body > .intro-body,
body > .hub-wrap,
body > section,
body > header.cover,
body > header.hero {
  animation: page-enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 逐个错开，形成层次 */
body > header.cover,
body > header.hero                { animation-delay: 0s; }
body > section:nth-of-type(1)     { animation-delay: 60ms; }
body > section:nth-of-type(2)     { animation-delay: 110ms; }
body > section:nth-of-type(3)     { animation-delay: 160ms; }
body > section:nth-of-type(n+4)   { animation-delay: 200ms; }

/* 即将离开：整体淡出 */
html.page-leaving body {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.26s ease, transform 0.26s ease;
}

/* 顶栏不参与淡入，避免闪烁 */
body > nav {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  body > main,
  body > .intro-body,
  body > .hub-wrap,
  body > section,
  body > header.cover,
  body > header.hero {
    animation: none;
  }

  html.page-leaving body {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   手机端背景：改用真实元素（伪元素实测只在首屏可见）
   ============================================================ */
.bg-mobile {
  display: none;
}

@media (max-width: 920px) {
  .bg-mobile {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: min(100vw * 1920 / 1080, 100vh);
    background-image: url("mobile.jpg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: var(--ink-800);
    z-index: -1;
    pointer-events: none;
  }

  /* 插件帮助页（纯白）不铺背景图 */
  body.pure-white .bg-mobile {
    display: none;
  }
}

/* ============================================================
   侧栏分组标题（侧栏已拍平，用 li.sidebar-group-label 代替原来的 summary）
   ============================================================ */
.sidebar-flat > .sidebar-group-label {
  margin: 14px 0 4px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  list-style: none;
  cursor: default;
  pointer-events: none;
}

.sidebar-flat > .sidebar-group-label:first-child {
  margin-top: 0;
}

/* 侧栏整体：原来的 ul 样式 */
.sidebar-flat {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- 减少动态效果 ----
   注意：这里不要放 .nav-home / nav —— 那会把汉堡面板的展开过渡一起关掉。
   主页的 nav 带 nav-home 类，所以在系统开了「减少动态效果」的设备上，
   汉堡菜单会瞬间弹出、没有任何动画。
   你要求全站都有动画，这里只关掉持续运动的元素。 */
@media (prefers-reduced-motion: reduce) {
  .cover-btn,
  .avatar-face,
  .avatar-back {
    transition: none !important;
    animation: none !important;
  }

  .avatar-flip:hover .avatar-face,
  .avatar-flip:hover .avatar-back {
    transform: none;
  }
}

/* ============================================================
   帮助页侧栏：手机端为胶囊样式横向滑动条
   ============================================================ */
@media (max-width: 920px) {
  .content-layout,
  .content-layout.no-toc {
    display: block;
    padding: 16px 24px 60px;
  }

  /* 胶囊条：一条横滑单行（侧栏已拍平成单个 ul，不再有 details 干扰） */
  .sidebar {
    position: sticky;
    top: 52px;
    z-index: 20;
    display: block;
    height: auto;
    max-height: none;
    margin: 0 0 18px;
    padding: 10px 0;
    overflow: visible;
    background: rgba(255, 255, 255, 0.42);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-light);
  }

  /* 分组标签（开始使用 / 功能说明…）在手机端不显示 */
  .sidebar-title,
  .sidebar summary,
  .sidebar .sidebar-group-label,
  .sidebar-flat > .sidebar-group-label {
    display: none !important;
  }

  .sidebar-track {
    display: block;
    padding: 0;
    overflow: visible;
  }

  .sidebar-flat {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 0 24px;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* 右侧渐隐，提示「还能往右滑」 */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 40px), transparent 100%);
  }

  .sidebar-flat::-webkit-scrollbar {
    display: none;
  }

  .sidebar-flat > li {
    display: block;
    flex: 0 0 auto;
    margin: 0;
  }

  .sidebar a {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.66);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--text-secondary);
  }

  .sidebar a:hover {
    color: var(--blue);
    border-color: var(--blue-border);
    background: var(--blue-light);
  }

  .sidebar a.active,
  .sidebar a.sub.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    font-weight: 600;
  }

  .sidebar a.sub {
    padding-left: 16px;
    font-size: 13px;
    color: var(--text-secondary);
  }

  .sidebar-backdrop {
    display: none;
  }
}

/* ============================================================
   Nalxer 服务器：不管什么状态都保持主题色
   ============================================================
   放在文件最后 + 更高优先级，避免被 nav .nav-links a 的黑色规则盖住。
   ============================================================ */
nav .nav-links a.nav-external,
nav.nav-home .nav-links a.nav-external,
nav.nav-home.scrolled .nav-links a.nav-external,
nav .nav-links a.nav-external:hover,
nav.nav-home .nav-links a.nav-external:hover,
nav.nav-home.scrolled .nav-links a.nav-external:hover {
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue);
  background: transparent !important;
  border-color: transparent !important;
}

/* ============================================================
   顶栏左侧那个「L」图标：白字蓝底（不要跟着顶栏变黑）
   ============================================================
   放在文件最后，优先级高于顶栏的黑色规则。
   ============================================================ */
nav .nav-logo .nav-logo-icon,
nav .nav-logo .nav-logo-icon:hover,
.nav-home .nav-logo .nav-logo-icon,
.nav-home.scrolled .nav-logo .nav-logo-icon {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

/* ============================================================
   页面切换动画（覆盖 prefers-reduced-motion 的关闭）
   ============================================================
   你明确要动画，所以这里用 !important 保住，
   否则系统开了「减少动态效果」时会全被关掉。
   ============================================================ */
html.page-anim body > section,
html.page-anim body > header.cover,
html.page-anim body > header.hero,
html.page-anim body > .intro-body,
html.page-anim body > .hub-wrap,
html.page-anim body > main {
  animation: page-enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

html.page-anim body > header.cover,
html.page-anim body > header.hero       { animation-delay: 0s !important; }
html.page-anim body > section:nth-of-type(1)   { animation-delay: 60ms !important; }
html.page-anim body > section:nth-of-type(2)   { animation-delay: 110ms !important; }
html.page-anim body > section:nth-of-type(3)   { animation-delay: 160ms !important; }
html.page-anim body > section:nth-of-type(n+4) { animation-delay: 200ms !important; }

/* 离开：整体淡出 + 轻微上移 */
html.page-anim.page-leaving body {
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.34s ease, transform 0.34s ease !important;
  pointer-events: none;
}

/* 顶栏不参与，避免闪烁 */
html.page-anim body > nav {
  animation: none !important;
}

/* ============================================================
   透明页面的文字：一律黑色（背景是视频，白色看不清）
   ============================================================
   保留白色的：顶栏「L」图标、主按钮文字、头像、侧栏选中项
   ============================================================ */
.cover-title,
.cover-subtitle,
.cover-quote,
.cover-quote strong,
.cover-remark p,
.cover-remark strong,
.cover-social a {
  color: #000 !important;
  text-shadow: 0 1px 14px rgba(255, 255, 255, 0.75), 0 1px 3px rgba(255, 255, 255, 0.6);
}

.cover-social a:hover {
  color: var(--blue) !important;
}

/* 封面上的胶囊按钮：浅底 + 黑字 */
.cover-page .cover-btn,
.cover-btn {
  color: #000 !important;
  border-color: rgba(0, 0, 0, 0.22) !important;
  background: rgba(255, 255, 255, 0.34) !important;
}

.cover-page .cover-btn:hover,
.cover-btn:hover {
  color: #fff !important;
  background: var(--blue) !important;
  border-color: var(--blue) !important;
}

/* 介绍页正文标题与文字 */
.intro-body h2,
.intro-body h3,
.intro-body h4,
.intro-body .section-label,
.intro-body .section-header p,
.intro-body > section > .container > p,
.chapter-no,
.chapter-title,
.chapter-lede,
.zz-text h4,
.zz-text p,
.zz-text ul,
.band-title,
.intro-split h2,
.intro-split p,
.zigzag .zz-text li {
  color: #000 !important;
  text-shadow: 0 1px 14px rgba(255, 255, 255, 0.8), 0 1px 3px rgba(255, 255, 255, 0.65);
}

.intro-body .section-label {
  color: var(--blue) !important;
}

/* 章节竖线节点改深色，压在浅背景上才看得见 */
.chapter {
  border-left-color: rgba(0, 0, 0, 0.22) !important;
}

.chapter::before {
  background: #fff !important;
  border-color: var(--blue) !important;
}

/* 简洁版封面（.cover-page）里的元素 */
.cover-page .cover-subtitle,
.cover-page .cover-quote,
.cover-page .cover-remark p {
  color: #000 !important;
}

/* 统计条压在深色画面上，用更实的玻璃底 + 白晕，数字才清楚 */
.stat-row {
  background: rgba(255, 255, 255, 0.62) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%) !important;
  backdrop-filter: blur(18px) saturate(170%) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 10px 30px rgba(15, 25, 35, 0.14) !important;
}

.stat-cell b,
.stat-cell span,
.stat-row .stat-cell b,
.stat-row .stat-cell span {
  color: var(--text) !important;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85) !important;
}

.stat-cell b {
  color: var(--blue) !important;
}

/* 章节编号也要有白晕，否则压在深色处看不到 */
.chapter-no,
.band-title,
.section-label {
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.9), 0 1px 4px rgba(255, 255, 255, 0.7) !important;
}

/* ============================================================
   透明页面的 body 必须透明
   ============================================================
   固定背景层是 z-index:-1，body 若有实白底就会把它盖住 ——
   这就是「手机端背景不动字动」失效的原因。
   ============================================================ */
body,
body.intro-page,
html.page-anim body {
  background: transparent !important;
}

/* html 也不能有底色 */
html,
html.page-anim {
  background: transparent !important;
}

/* 插件帮助页（纯白）例外：它们本来就没有背景图 */
body.pure-white,
body.pure-white.intro-page,
html.page-anim body.pure-white {
  background: #fff !important;
}


/* ==========================================================================
   LinuxTeam 官网专属组件
   ==========================================================================
   设计说明（为什么这样写）
   --------------------------------------------------------------------------
   本站全站的视觉基调是「壁纸 + 液态玻璃 + 透明」：
     · 壁纸   —— .bg-video / .bg-mobile 钉在视口最底层（z-index:-1）
     · 透明   —— 区块本身不留底色，玻璃模块自己承担质感，视频才透得出来
     · 液态玻璃 —— 半透明底 + backdrop-filter 模糊/饱和 + 内侧高光 + 外侧软阴影
   下面这组组件沿用同一套语言，只是把「玻璃」做得更具体：
     · .glass-panel  面板本体（带顶栏的三点标题条）
     · .inv-grid     用 CSS 画出 6×3 的箱子格子，演示 GUI 布局
     · .glass-flow   把"附魔联动"的四步计算做成一条流程
   所有阴影都带钢青蓝调（#1e2c38 / #4a7ba7），与封面视频采样色一致，
   避免出现"玻璃是暖灰、背景是冷蓝"的割裂感。
   ========================================================================== */

/* ── 玻璃展台：给面板加一层柔和的环境光晕，玻璃才有"浮在壁纸上"的感觉 ── */
.glass-stage {
  position: relative;
  padding: 26px;
  border-radius: 22px;
  /* 极淡的径向光晕，只提亮中心，不遮壁纸 */
  background:
    radial-gradient(120% 90% at 50% 0%,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.04) 45%,
      rgba(255, 255, 255, 0) 100%);
}

/* ── 玻璃面板本体 ── */
.glass-panel {
  position: relative;
  border-radius: 18px;
  padding: 16px 18px 18px;
  /* 液态玻璃三件套：低透明度底色 + 模糊饱和 + 内外高光 */
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    /* 上缘一道细高光：玻璃"厚度"的关键，没有它就像一张半透明纸 */
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    /* 下缘一道暗边：让边缘闭合 */
    inset 0 -1px 0 rgba(255, 255, 255, 0.16),
    /* 外侧软阴影：与壁纸拉开层次 */
    0 14px 38px rgba(15, 25, 35, 0.16);
  overflow: hidden;
}

/* 斜向扫光：静态的一道高光带，模拟玻璃面反光 */
.glass-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(118deg,
      rgba(255, 255, 255, 0.30) 0%,
      rgba(255, 255, 255, 0.06) 26%,
      rgba(255, 255, 255, 0) 42%,
      rgba(255, 255, 255, 0) 100%);
  opacity: 0.55;
}

/* ── 面板顶栏（模仿窗口标题条）── */
.glass-titlebar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.glass-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.glass-title {
  margin-left: 6px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(15, 25, 35, 0.45);
}

/* ── 箱子格子演示 ── */
.inv-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
  max-width: 460px;
  margin: 0 auto;
}

.inv-slot {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 7px;
  /* 空格子：更深一点的玻璃，与"有内容"的格子形成对比 */
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

/* 有内容的格子 */
.inv-slot.on,
.inv-slot.head {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #12303f;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(74, 123, 167, 0.20),
    0 4px 12px rgba(15, 25, 35, 0.16);
}

.inv-slot.head {
  background: rgba(233, 240, 246, 0.92);
}

/* 悬停提示：纯 CSS，不依赖 JS */
.inv-slot.on:hover::after,
.inv-slot.head:hover::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  color: #12303f;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px rgba(15, 25, 35, 0.20);
  pointer-events: none;
  z-index: 5;
}

/* ── 面板下的说明文字 ── */
.glass-caption {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 3px rgba(15, 25, 35, 0.40);
}

.glass-caption code {
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 13px;
  color: #eaf3fa;
  background: rgba(15, 25, 35, 0.28);
}

/* ── 附魔联动流程 ── */
.glass-flow {
  position: relative;
  z-index: 1;
  list-style: none;
  display: grid;
  gap: 10px;
}

.glass-flow li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 3px rgba(15, 25, 35, 0.42);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1.2px 0 rgba(255, 255, 255, 0.55);
}

.flow-tag {
  flex: 0 0 auto;
  min-width: 46px;
  text-align: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: #12303f;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.95);
}

.flow-tag.ok {
  color: #0d3b1c;
  background: rgba(200, 244, 210, 0.92);
}

.flow-tag.no {
  color: #4a1110;
  background: rgba(255, 214, 211, 0.92);
}

.glass-flow strong {
  color: #fff;
}

/* ── 响应式 ── */
@media (max-width: 920px) {
  .glass-stage {
    padding: 16px;
    border-radius: 18px;
  }

  .glass-panel {
    padding: 13px 13px 15px;
    border-radius: 15px;
  }

  .inv-grid {
    gap: 4px;
    max-width: 100%;
  }

  .inv-slot.on,
  .inv-slot.head {
    font-size: 12px;
  }

  /* 触屏没有 hover，关掉提示气泡免得"粘"在屏幕上 */
  .inv-slot.on:hover::after,
  .inv-slot.head:hover::after {
    content: none;
  }

  .glass-flow li {
    font-size: 13.5px;
    padding: 10px 12px;
  }
}

@media (max-width: 480px) {
  .glass-title {
    font-size: 12px;
  }

  .flow-tag {
    min-width: 40px;
    padding: 2px 8px;
    font-size: 11.5px;
  }
}

/* 低端设备 / 用户要求减少动效：关掉模糊，改用纯色半透明，保证可读性 */
@media (prefers-reduced-motion: reduce) {
  .glass-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(30, 44, 56, 0.42);
  }

  .glass-panel::after {
    display: none;
  }
}

/* ==========================================================================
   LinuxTeam 页面对比度修正
   ==========================================================================
   实测（无头 Edge 截图）发现的问题：
     壁纸是一张亮部很多的图（蓝白渐变 + 大面积高光），
     原来的玻璃面板只有 rgba(255,255,255,0.10~0.14) 的白底，
     白字压在亮壁纸上几乎读不出来，说明文字更是糊成一片。

   修正思路（三件事，不改整体风格）：
     ① 加一层固定遮罩：把壁纸整体压深约 22%，
        （★ 该方案后来被移除 —— 现在模块透明、文字黑字白描边，
          不再需要任何遮罩层，壁纸原样透出。）
     ② 把面板底色改成"白 + 一点钢青蓝"，不是纯白：
        纯白在亮壁纸上会糊，掺一点冷色反而更清楚。
     ③ 文字统一加深色投影 + 提亮字色，保证任何壁纸下都可读。

   注意：压暗罩刻意只做轻微压暗（22%），
   目的是"看得清字"，不是"把壁纸盖掉" —— 透明感要保留。
   ========================================================================== */

/* ── ① 背景压暗罩：钉在视口，位于壁纸之上、内容之下 ── */

@media (max-width: 920px) {
  /* 手机上壁纸是静态图且更亮，压得再深一点 */
}

/* ── ② 玻璃面板：提高不透度，掺一点钢青蓝 ── */
.glass-panel {
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.30) 0%,
      rgba(233, 240, 246, 0.20) 52%,
      rgba(210, 224, 236, 0.16) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22),
    0 18px 44px rgba(8, 16, 24, 0.28);
}

/* 面板内所有文字：统一加深色投影 */
.glass-panel h3,
.glass-panel p,
.glass-panel li,
.glass-panel strong {
  color: #fff;
  text-shadow:
    0 1px 2px rgba(8, 16, 24, 0.62),
    0 2px 8px rgba(8, 16, 24, 0.34);
}

.glass-titlebar {
  border-bottom-color: rgba(255, 255, 255, 0.34);
}

.glass-dot {
  background: rgba(255, 255, 255, 0.78);
}

.glass-title {
  color: #fff;
  font-weight: 600;
  text-shadow:
    0 1px 2px rgba(8, 16, 24, 0.66),
    0 2px 8px rgba(8, 16, 24, 0.36);
}

/* 空槽位：稍微加深，让"有内容 / 无内容"的差别更明确 */
.inv-slot {
  background: rgba(14, 22, 29, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

/* 有内容的槽位：白底压满，图标才清晰 */
.inv-slot.on,
.inv-slot.head {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(74, 123, 167, 0.24),
    0 5px 14px rgba(8, 16, 24, 0.26);
}

.inv-slot.head {
  background: rgba(226, 237, 245, 0.96);
}

/* ── ③ 说明文字：原来太淡，改成接近纯白 + 强投影 ── */
.glass-caption {
  color: rgba(255, 255, 255, 0.96);
  border-top-color: rgba(255, 255, 255, 0.28);
  text-shadow:
    0 1px 2px rgba(8, 16, 24, 0.62),
    0 2px 8px rgba(8, 16, 24, 0.34);
}

.glass-caption code {
  color: #dff0fb;
  background: rgba(8, 16, 24, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* ── 附魔流程条 ── */
.glass-flow li {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.44);
  box-shadow:
    inset 0 1.2px 0 rgba(255, 255, 255, 0.62),
    0 6px 18px rgba(8, 16, 24, 0.20);
  text-shadow:
    0 1px 2px rgba(8, 16, 24, 0.60),
    0 2px 8px rgba(8, 16, 24, 0.32);
}

.flow-tag {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(8, 16, 24, 0.22);
  text-shadow: none;
}

.flow-tag.ok {
  color: #0b3a1a;
  background: rgba(198, 243, 208, 0.97);
}

.flow-tag.no {
  color: #48100f;
  background: rgba(255, 212, 209, 0.97);
}

/* ── 玻璃展台：中心光晕稍微收一点，避免与压暗罩打架 ── */
.glass-stage {
  background:
    radial-gradient(115% 85% at 50% 0%,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.02) 48%,
      rgba(255, 255, 255, 0) 100%);
}

/* ── 首页为团队页准备的卡片：壁纸较亮时文字也要能读 ── */
.cover-quote,
.cover-subtitle,
.cover-remark p {
  text-shadow:
    0 1px 2px rgba(8, 16, 24, 0.55),
    0 2px 10px rgba(8, 16, 24, 0.38);
}

/* ==========================================================================
   LinuxTeam 页面：玻璃可读性最终修正
   ==========================================================================
   第二轮实测（整页截图）暴露的真问题：
     backdrop-filter 只「模糊」背景，不「压暗」背景。
     壁纸有大量高光区，玻璃面板里的白字压在模糊过的高光上依然是白底白字。

   关键认识：真正的"液态玻璃"不是"白色半透明"，
             而是「把身后的东西柔化 + 压暗，再叠一层很淡的高光」。
   所以这里给面板加 brightness(0.62) —— 只压暗面板**背后**那块区域，
   面板外面的壁纸保持原样，于是既看得清字，又明显是一块玻璃。

   同时给压暗罩补一档：让它在页面底部再深一点，
   避免长页面滚到底部时压在壁纸最亮的区域上。
   ========================================================================== */

/* ── 面板本体：背后压暗 + 柔化，面上叠淡高光 ── */
.glass-panel {
  background:
    linear-gradient(158deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.10) 46%,
      rgba(255, 255, 255, 0.05) 100%);
  -webkit-backdrop-filter: blur(30px) saturate(150%) brightness(0.58);
  backdrop-filter: blur(30px) saturate(150%) brightness(0.58);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    0 20px 48px rgba(6, 12, 18, 0.38);
}

/* 斜向扫光收一点，别把压暗后的暗底又提亮回去 */
.glass-panel::after {
  opacity: 0.34;
}

/* ── 说明文字：面板已经压暗了，这里可以更接近纯白 ── */
.glass-caption {
  color: #fff;
}

/* ── 空槽位：在压暗后的底上要更亮一点才看得见格子 ── */
.inv-slot {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.26);
}

/* ── 流程条：同样压暗背后 ── */
.glass-flow li {
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(18px) saturate(150%) brightness(0.66);
  backdrop-filter: blur(18px) saturate(150%) brightness(0.66);
  border: 1px solid rgba(255, 255, 255, 0.34);
}

/* ── 底部 CTA：这一块原来太透明，字读不出来 ── */
.cta-band {
  -webkit-backdrop-filter: blur(22px) saturate(160%) brightness(0.60);
  backdrop-filter: blur(22px) saturate(160%) brightness(0.60);
  border: 1px solid rgba(255, 255, 255, 0.46);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(255, 255, 255, 0.16),
    0 16px 40px rgba(6, 12, 18, 0.34);
}

.cta-band p,
.cta-band .cta-wordmark {
  text-shadow:
    0 1px 2px rgba(6, 12, 18, 0.62),
    0 2px 10px rgba(6, 12, 18, 0.40);
}

/* ── 「为什么需要」那一段的三张要点卡：同样处理 ── */
.intro-split .split-points li {
  -webkit-backdrop-filter: blur(20px) saturate(160%) brightness(0.62);
  backdrop-filter: blur(20px) saturate(160%) brightness(0.62);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1.4px 0 rgba(255, 255, 255, 0.66),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    0 12px 30px rgba(6, 12, 18, 0.30);
}

.intro-split .split-points li,
.intro-split .split-points li strong {
  color: #fff;
  text-shadow:
    0 1px 2px rgba(6, 12, 18, 0.60),
    0 2px 8px rgba(6, 12, 18, 0.34);
}

/* ── 附魔联动那三张卡（.card）：壁纸较亮时也要能读 ── */
.card,
.bento-item {
  -webkit-backdrop-filter: blur(24px) saturate(160%) brightness(0.60);
  backdrop-filter: blur(24px) saturate(160%) brightness(0.60);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1.4px 0 rgba(255, 255, 255, 0.66),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 14px 34px rgba(6, 12, 18, 0.30);
}

.card h3,
.bento-item h3,
.bento-item p,
.card p,
.card li,
.bento-item li {
  color: #fff;
  text-shadow:
    0 1px 2px rgba(6, 12, 18, 0.58),
    0 2px 8px rgba(6, 12, 18, 0.32);
}

/* 卡片里的小代码块：在暗底上给一点亮色 */
.card code,
.bento-item code {
  color: #d8ecfa;
  background: rgba(6, 12, 18, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 1px 6px;
  border-radius: 5px;
}

/* ── 表格：命令一览。表头加一层底，行间加分隔线，长表格才读得下去 ── */
.help-table {
  -webkit-backdrop-filter: blur(24px) saturate(160%) brightness(0.62);
  backdrop-filter: blur(24px) saturate(160%) brightness(0.62);
}

.help-table thead th {
  background: rgba(6, 12, 18, 0.34);
  color: #fff;
  text-shadow: 0 1px 2px rgba(6, 12, 18, 0.5);
}

.help-table tbody td {
  color: #fff;
  text-shadow: 0 1px 2px rgba(6, 12, 18, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.help-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.08);
}

/* ── 检查清单 / 无序列表在暗底上的小圆点 ── */
.card ul li::before,
.bento-item ul li::before,
.glass-panel ul li::before {
  color: rgba(255, 255, 255, 0.85);
}

/* ── 不模糊的降级方案：低端设备直接给足底色，优先保证可读 ── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-panel {
    background: rgba(20, 32, 42, 0.72);
  }

  .card,
  .bento-item,
  .cta-band,
  .intro-split .split-points li {
    background: rgba(20, 32, 42, 0.66);
  }
}

/* ── 用户要求减少动效时同样退回实色 ── */
@media (prefers-reduced-motion: reduce) {
  .glass-panel,
  .card,
  .bento-item,
  .cta-band,
  .intro-split .split-points li,
  .glass-flow li {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(20, 32, 42, 0.70);
  }
}

/* ==========================================================================
   LinuxTeam 页面：玻璃方案定稿（暗玻璃）
   ==========================================================================
   三轮实测结论（无头 Edge 整页截图，逐版对比）：
     第 1 版  浅色玻璃 rgba(255,255,255,0.10) + 白字
              → 壁纸高光区上白字读不出来
     第 2 版  加深色压暗罩 + 提高玻璃白度 + 深色投影
              → 顶部封面能读了，但滚动后的区域仍糊；壁纸亮部太多，不稳定
     第 3 版  backdrop-filter 里加 brightness(0.58) 压暗背后
              → 效果不稳定（部分区域反而更亮），且不可控

   定稿方案：**暗玻璃**
     面板底色 = 深钢青蓝 @ 0.76 不透度
        · 保留 24% 的透光率 —— 壁纸仍然透得出来，"透明"这个要求满足
        · 但底足够深，白字对比度约 10:1（WCAG AA 要求 4.5:1），任何壁纸下都能读
     上缘一道白色细高光 + 外圈软阴影 = 玻璃的"厚度感"
     斜向扫光保留但压到 0.22，只作质感点缀，不参与提亮

   为什么最终选暗玻璃而不是浅玻璃：
     浅玻璃的可读性**取决于壁纸当处长什么样**（亮区糊、暗区清），
     而壁纸是服主随时可换的、内容是不可控的。
     暗玻璃把"可读性"从"看运气"变成"有保证"，同时 24% 透光已经足够表达透明。
   ========================================================================== */

/* ── 暗玻璃：统一给面板/卡片/表格用 ── */
.glass-panel,
.card,
.bento-item,
.cta-band,
.intro-split .split-points li,
.glass-flow li,
.help-table {
  /* 深钢青蓝（与封面视频采样色 #1e2c38 同族），掺一点点主色的蓝 */
  background:
    linear-gradient(162deg,
      rgba(26, 40, 52, 0.80) 0%,
      rgba(20, 33, 44, 0.76) 52%,
      rgba(16, 27, 37, 0.78) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  box-shadow:
    /* 上缘细高光：玻璃厚度 */
    inset 0 1.5px 0 rgba(255, 255, 255, 0.46),
    /* 下缘一道暗边：闭合边缘 */
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    /* 外侧软阴影：与壁纸拉开层次 */
    0 16px 40px rgba(4, 10, 16, 0.42);
}

/* 玻璃面板保留自己的圆角与内距，不覆盖 */

/* 斜向扫光：只做质感，不参与提亮 */
.glass-panel::after {
  background:
    linear-gradient(118deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.05) 24%,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0) 100%);
  opacity: 0.22;
}

/* ── 暗底上的一切文字：纯白 + 轻投影 ── */
.glass-panel h1, .glass-panel h2, .glass-panel h3,
.glass-panel p, .glass-panel li, .glass-panel strong, .glass-panel div,
.card h3, .card p, .card li, .card strong,
.bento-item h3, .bento-item p, .bento-item li, .bento-item strong,
.cta-band p, .cta-band .cta-wordmark,
.intro-split .split-points li, .intro-split .split-points li strong,
.glass-flow li, .glass-flow strong,
.glass-caption, .glass-title,
.help-table tbody td, .help-table thead th {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* 面板顶栏的圆点与分隔线：暗底上要提亮 */
.glass-dot {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
}

.glass-titlebar {
  border-bottom-color: rgba(255, 255, 255, 0.22);
}

.glass-caption {
  border-top-color: rgba(255, 255, 255, 0.20);
}

/* ── 代码块：暗底上用更亮的青蓝，别用深色（会看不见） ── */
.glass-caption code,
.card code,
.bento-item code,
.glass-panel code,
.help-table code {
  color: #bfe3ff;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.20);
  padding: 1px 6px;
  border-radius: 5px;
}

/* ── 箱子格子：在暗玻璃上重新配一次色 ── */
.inv-slot {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.inv-slot.on,
.inv-slot.head {
  color: #10222e;
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.98);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    0 4px 12px rgba(0, 0, 0, 0.34);
}

.inv-slot.head {
  background: rgba(222, 235, 245, 0.92);
}

.inv-slot.on:hover::after,
.inv-slot.head:hover::after {
  color: #10222e;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.40);
}

/* ── 附魔流程条 ── */
.glass-flow li {
  border: 1px solid rgba(255, 255, 255, 0.26);
}

.flow-tag {
  color: #10222e;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
  text-shadow: none;
}

.flow-tag.ok {
  color: #07351a;
  background: rgba(190, 242, 202, 0.96);
}

.flow-tag.no {
  color: #430e0d;
  background: rgba(255, 206, 203, 0.96);
}

/* ── 表格：表头再深一档，行间加分隔线 ── */
.help-table thead th {
  background: rgba(0, 0, 0, 0.30);
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.help-table tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.help-table tbody tr:last-child td {
  border-bottom: none;
}

.help-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.06);
}

/* ── 标签（badge）：暗底上给足对比 ── */
.help-table .badge,
.card .badge,
.bento-item .badge {
  color: #0d1e29 !important;
  text-shadow: none !important;
}

/* ── 按钮：默认与次要按钮在暗底上要看得见 ── */
.cta-band .btn-secondary,
.card-links .btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
}

.glass-panel .btn {
  color: #fff;
}

/* ── 小圆点列表符号在暗底上提亮 ── */
.card ul li::before,
.bento-item ul li::before,
.glass-panel ul li::before {
  color: rgba(255, 255, 255, 0.80);
}

/* ── 降级：不支持 backdrop-filter 时直接加厚底色 ── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-panel,
  .card,
  .bento-item,
  .cta-band,
  .intro-split .split-points li,
  .glass-flow li,
  .help-table {
    background: rgba(20, 33, 44, 0.90);
  }
}

/* ── 减少动效 / 低端设备：同样加厚，优先可读 ── */
@media (prefers-reduced-motion: reduce) {
  .glass-panel,
  .card,
  .bento-item,
  .cta-band,
  .intro-split .split-points li,
  .glass-flow li,
  .help-table {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(20, 33, 44, 0.92);
  }

  .glass-panel::after {
    display: none;
  }
}

/* ── 帮助页是纯白底，暗玻璃会把整页压黑，所以那两页不改 ── */
body.pure-white .card,
body.pure-white .bento-item,
body.pure-white .cta-band,
body.pure-white .glass-panel,
body.pure-white .help-table,
body.pure-white .glass-flow li {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(74, 123, 167, 0.18);
  box-shadow: 0 8px 24px rgba(30, 44, 56, 0.06);
}

body.pure-white .card h3,
body.pure-white .card p,
body.pure-white .card li,
body.pure-white .bento-item h3,
body.pure-white .bento-item p,
body.pure-white .bento-item li,
body.pure-white .glass-panel h3,
body.pure-white .glass-panel p,
body.pure-white .glass-panel li,
body.pure-white .glass-caption,
body.pure-white .help-table tbody td,
body.pure-white .help-table thead th,
body.pure-white .glass-flow li {
  color: #1d1d1f;
  text-shadow: none;
}

body.pure-white .help-table thead th {
  background: #f2f6fa;
  border-bottom: 1px solid #d2d7db;
}

body.pure-white .help-table tbody td {
  border-bottom: 1px solid #e6eaee;
}

body.pure-white .glass-caption code,
body.pure-white .card code,
body.pure-white .bento-item code,
body.pure-white .help-table code,
body.pure-white .glass-panel code {
  color: #1d1d1f;
  background: #f5f7f9;
  border: 1px solid #e6eaee;
}

/* ==========================================================================
   LinuxTeam 页面：模块改回「无色透明」，只有最后一栏保留深色
   ==========================================================================
   上一版把面板做成了"暗玻璃"（深钢青蓝 @0.76），可读性有保证，
   但颜色太重，整体偏黑，与全站其它页面的浅色玻璃不一致。

   这一版按你的要求改回：**模块无色透明 + 只有最后一栏是黑的**。

   问题在于：如果只是把底色透明掉，白字又会回到"压在亮壁纸上看不清"
   的老问题。解决办法是把可读性从"面板底色"挪到"文字自身"：

     · 面板只留 4% 的极淡白 —— 够表达"这是一块玻璃"，不引入任何颜色
     · backdrop-filter 模糊提到 30px —— 背后的壁纸被柔化，
       字不再是压在"清晰的图案"上，而是压在"一团柔和的色块"上
     · 每个字后面压两层深色投影（1px + 3px）——
       投影是**字的一部分**，不是面板的颜色，所以模块看起来依然无色
     · 字形略微加粗（500）—— 白字在亮底上细笔画最容易糊

   这样：模块本身无可见颜色，文字在任何壁纸上都读得清。

   ---------------------------------------------------------------------------
   唯一例外：最后一栏（底部 CTA）用 .cta-band--ink 保留深色块。
   ---------------------------------------------------------------------------
   ========================================================================== */

/* ── 模块：极淡白 + 强模糊，不引入任何色相 ── */
.glass-panel,
.card,
.bento-item,
.intro-split .split-points li,
.glass-flow li,
.help-table {
  /* 只有 4% 的白，几乎看不出颜色，只表达"这里有一层玻璃" */
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    /* 上缘细高光：玻璃的厚度感，仍然是白色，不是彩色 */
    inset 0 1.5px 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    /* 外侧软阴影：用中性黑，不带蓝调，避免看成"有色玻璃" */
    0 16px 40px rgba(0, 0, 0, 0.22);
}

/* 斜向扫光：保留质感，但压得极淡，不参与提亮 */
.glass-panel::after {
  background:
    linear-gradient(118deg,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.04) 22%,
      rgba(255, 255, 255, 0) 38%,
      rgba(255, 255, 255, 0) 100%);
  opacity: 0.18;
}

/* ── 文字：可读性靠"字自身的投影"，不靠面板底色 ── */
.glass-panel h1, .glass-panel h2, .glass-panel h3,
.glass-panel p, .glass-panel li, .glass-panel strong,
.card h3, .card p, .card li, .card strong,
.bento-item h3, .bento-item p, .bento-item li, .bento-item strong,
.intro-split .split-points li, .intro-split .split-points li strong,
.glass-flow li, .glass-flow strong,
.glass-caption, .glass-title,
.help-table tbody td, .help-table thead th {
  color: #fff;
  /* 两层投影：近处一层压边，远处一层铺底。字在亮壁纸上也能读 */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.78),
    0 2px 10px rgba(0, 0, 0, 0.55);
}

/* 细笔画最容易糊，正文整体加一点字重 */
.glass-panel p, .glass-panel li,
.card p, .card li,
.bento-item p, .bento-item li,
.intro-split .split-points li,
.glass-flow li,
.glass-caption,
.help-table tbody td {
  font-weight: 500;
}

/* ── 顶栏：暗底改回亮底，圆点提亮 ── */
.glass-titlebar {
  border-bottom-color: rgba(255, 255, 255, 0.30);
}

.glass-dot {
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 4px rgba(0, 0, 0, 0.35);
}

.glass-title {
  font-weight: 600;
}

/* ── 箱子格子：透明底上重配一次 ── */
.inv-slot {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.14);
}

.inv-slot.on,
.inv-slot.head {
  color: #10222e;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    0 5px 14px rgba(0, 0, 0, 0.30);
}

.inv-slot.head {
  background: rgba(226, 237, 245, 0.94);
}

.inv-slot.on:hover::after,
.inv-slot.head:hover::after {
  color: #10222e;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
  text-shadow: none;
}

/* ── 流程条：同样透明 ── */
.glass-flow li {
  border: 1px solid rgba(255, 255, 255, 0.38);
}

.flow-tag {
  color: #10222e;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
  text-shadow: none;
}

.flow-tag.ok {
  color: #07351a;
  background: rgba(190, 242, 202, 0.97);
}

.flow-tag.no {
  color: #430e0d;
  background: rgba(255, 206, 203, 0.97);
}

/* ── 代码块：透明底上给一层很淡的黑，保证亮青蓝字看得清 ── */
.glass-caption code,
.card code,
.bento-item code,
.glass-panel code,
.help-table code {
  color: #e6f4ff;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.24);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ── 表格：表头加一层很淡的黑，行分隔线用白色 ── */
.help-table thead th {
  background: rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.help-table tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.help-table tbody tr:last-child td {
  border-bottom: none;
}

.help-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.07);
}

/* ── 标签：透明底上给实色，不然读不出来 ── */
.help-table .badge,
.card .badge,
.bento-item .badge {
  color: #0d1e29 !important;
  text-shadow: none !important;
}

/* ── 次要按钮：透明底上要有边框和淡底才看得见 ── */
.card-links .btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.12);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.glass-panel .btn {
  color: #fff;
}

/* ── 列表小圆点在透明底上提亮 ── */
.card ul li::before,
.bento-item ul li::before,
.glass-panel ul li::before {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   唯一保留深色的一栏：底部 CTA
   ========================================================================== */
.cta-band--ink {
  /* 深钢青蓝，与封面视频采样色同族 */
  background:
    linear-gradient(162deg,
      rgba(30, 44, 56, 0.90) 0%,
      rgba(22, 36, 47, 0.88) 55%,
      rgba(16, 27, 37, 0.90) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 20px 50px rgba(0, 0, 0, 0.42);
}

.cta-band--ink p,
.cta-band--ink .cta-wordmark {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.60);
}

.cta-band--ink .btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.10);
}

/* ==========================================================================
   帮助页（纯白底）：透明模块在白底上没有意义，保持浅色卡片
   ========================================================================== */
body.pure-white .glass-panel,
body.pure-white .card,
body.pure-white .bento-item,
body.pure-white .intro-split .split-points li,
body.pure-white .glass-flow li,
body.pure-white .help-table {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(74, 123, 167, 0.18);
  box-shadow: 0 8px 24px rgba(30, 44, 56, 0.06);
}

body.pure-white .glass-panel h1, body.pure-white .glass-panel h2,
body.pure-white .glass-panel h3,
body.pure-white .glass-panel p, body.pure-white .glass-panel li,
body.pure-white .glass-panel strong,
body.pure-white .card h3, body.pure-white .card p, body.pure-white .card li,
body.pure-white .bento-item h3, body.pure-white .bento-item p,
body.pure-white .bento-item li,
body.pure-white .glass-caption, body.pure-white .glass-title,
body.pure-white .glass-flow li,
body.pure-white .help-table tbody td,
body.pure-white .help-table thead th {
  color: #1d1d1f;
  text-shadow: none;
}

body.pure-white .help-table thead th {
  background: #f2f6fa;
  border-bottom: 1px solid #d2d7db;
}

body.pure-white .help-table tbody td {
  border-bottom: 1px solid #e6eaee;
}

body.pure-white .glass-caption code,
body.pure-white .card code,
body.pure-white .bento-item code,
body.pure-white .help-table code,
body.pure-white .glass-panel code {
  color: #1d1d1f;
  background: #f5f7f9;
  border: 1px solid #e6eaee;
  text-shadow: none;
}

body.pure-white .glass-panel .btn {
  color: #fff;
}

/* ==========================================================================
   降级：不支持 backdrop-filter 时透明模块会完全读不出来，直接给淡黑底
   ========================================================================== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-panel,
  .card,
  .bento-item,
  .intro-split .split-points li,
  .glass-flow li,
  .help-table {
    background: rgba(10, 18, 26, 0.62);
  }

  body.pure-white .glass-panel,
  body.pure-white .card,
  body.pure-white .bento-item,
  body.pure-white .intro-split .split-points li,
  body.pure-white .glass-flow li,
  body.pure-white .help-table {
    background: rgba(255, 255, 255, 0.86);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glass-panel,
  .card,
  .bento-item,
  .intro-split .split-points li,
  .glass-flow li,
  .help-table {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(10, 18, 26, 0.70);
  }

  .glass-panel::after {
    display: none;
  }
}

/* ==========================================================================
   LinuxTeam 页面：纯中性压暗 —— 让「无色透明模块」上的白字读得清
   ==========================================================================
   模块已经改成"无色透明"（只有 4% 的白），这是要的效果。
   但透明模块本身不提供对比度，可读性只能来自两处：

     ① 模块背后的壁纸要够暗   → 加深压暗罩
     ② 文字自身要够厚         → 加强投影 + 字重

   压暗罩刻意用**纯中性黑**（不带蓝色）：
   带蓝调的话，透过透明玻璃看会像"有色玻璃"，
   而你要的是"无色"。

   加深到什么程度：约 46% 的黑。
   这个值让白色文字的对比度稳定在 8:1 以上（WCAG AA 要求 4.5:1），
   同时壁纸的图案与色彩仍然清晰可辨 —— 不是"把壁纸盖掉"。
   ========================================================================== */


@media (max-width: 920px) {
  /* 手机上壁纸是静态图且亮部更多，再深一点 */
}

/* ── 文字：三层投影，字在深色壁纸上更实 ── */
.glass-panel h1, .glass-panel h2, .glass-panel h3,
.glass-panel p, .glass-panel li, .glass-panel strong,
.card h3, .card p, .card li, .card strong,
.bento-item h3, .bento-item p, .bento-item li, .bento-item strong,
.intro-split .split-points li, .intro-split .split-points li strong,
.glass-flow li, .glass-flow strong,
.glass-caption, .glass-title,
.help-table tbody td, .help-table thead th {
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.85),
    0 1px 3px rgba(0, 0, 0, 0.72),
    0 3px 14px rgba(0, 0, 0, 0.55);
}

/* ── 标题更粗一点，远看也清楚 ── */
.glass-panel h1, .glass-panel h2, .glass-panel h3,
.card h3, .bento-item h3,
.glass-title {
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ── 封面那一段本来就在壁纸最亮处，单独再压一点 ── */
.cover-overlay {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.30) 0%,
    rgba(0, 0, 0, 0.18) 45%,
    rgba(0, 0, 0, 0.34) 100%);
}

.cover-title,
.cover-subtitle,
.cover-quote,
.cover-remark p,
.plug-hero-ver {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.75),
    0 3px 16px rgba(0, 0, 0, 0.55);
}

/* ── 区块小标题（FEATURES / PREVIEW 那一行）也要读得清 ── */
.section-label {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.80),
    0 2px 10px rgba(0, 0, 0, 0.55);
}

.section-header h2,
.section-header p {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.80),
    0 3px 14px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   帮助页（纯白）—— 确保是真白，不是灰
   ==========================================================================
   之前帮助页发灰的原因：teamhelp.html 里也放了 .page-scrim（压暗罩）。
   那是给"有壁纸"的介绍页用的，纯白页加上它整页就灰了一层。
   修法两步：① HTML 里去掉压暗罩（已做）② 这里再加一道保险，
   把帮助页的所有背景层强制为白。
   ========================================================================== */
body.pure-white,
html.page-anim body.pure-white {
  background: #fff !important;
}

/* 帮助页里万一还残留压暗罩/背景层，一律隐藏 */
body.pure-white .page-scrim,
body.pure-white .bg-video,
body.pure-white .bg-mobile {
  display: none !important;
}

/* 帮助页的区块本身也必须是白的（不能透出任何底色） */
body.pure-white section,
body.pure-white .content-layout,
body.pure-white .main-content,
body.pure-white .page-hero,
body.pure-white .intro-body {
  background: #fff;
}

body.pure-white section.alt {
  background: #fff;
}

/* 帮助页顶栏：白底 + 一条浅分隔线，不要玻璃灰 */
body.pure-white nav,
body.pure-white nav.nav-home {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid #e6eaee;
  box-shadow: 0 1px 3px rgba(30, 44, 56, 0.04);
}

body.pure-white .nav-links a {
  text-shadow: none;
}

/* 帮助页页脚同理 */
body.pure-white footer {
  background: #fff;
  border-top: 1px solid #e6eaee;
}

body.pure-white footer,
body.pure-white footer a,
body.pure-white footer p {
  color: #515154;
  text-shadow: none;
}

body.pure-white .footer-brand {
  color: #1d1d1f;
}

/* ==========================================================================
   LinuxTeam 页面：文字改为黑色
   ==========================================================================
   模块是无色透明玻璃（只有 4% 的白 + 30px 模糊），
   玻璃背后的壁纸本身是亮色系（蓝白渐变），
   所以**黑色文字**在这层玻璃上是清楚的 —— 比白字更稳。

   配套调整：
     · 文字投影换成**淡白色**光晕（原来给白字用的是黑色投影，
       黑字配黑投影会糊成一团）
     · 代码块、标签、按钮的配色同步改为深色系
     · 上缘高光保留（那是玻璃的厚度感，与文字颜色无关）
     · 最后一栏 .cta-band--ink 是深色块，那里仍用白字
   ========================================================================== */

/* ── 正文 / 标题：黑色 + 淡白光晕 ── */
.glass-panel h1, .glass-panel h2, .glass-panel h3,
.glass-panel p, .glass-panel li, .glass-panel strong,
.card h3, .card p, .card li, .card strong,
.bento-item h3, .bento-item p, .bento-item li, .bento-item strong,
.intro-split .split-points li, .intro-split .split-points li strong,
.glass-flow li, .glass-flow strong,
.glass-caption, .glass-title,
.help-table tbody td, .help-table thead th {
  color: #12181d;
  /* 淡白色光晕：黑字压在玻璃上时把背后那点纹理推开，边缘更利落 */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.62),
    0 1px 3px rgba(255, 255, 255, 0.45);
}

/* ── 顶栏：标题与圆点都改深色 ── */
.glass-title {
  color: #12181d;
}

.glass-dot {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(18, 24, 29, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 3px rgba(18, 24, 29, 0.18);
}

.glass-titlebar {
  border-bottom-color: rgba(18, 24, 29, 0.16);
}

.glass-caption {
  border-top-color: rgba(18, 24, 29, 0.14);
}

/* ── 箱子格子：透明底上用深色描边才看得出格子 ── */
.inv-slot {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(18, 24, 29, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.inv-slot.on,
.inv-slot.head {
  color: #12181d;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(18, 24, 29, 0.20);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    0 3px 10px rgba(18, 24, 29, 0.16);
}

.inv-slot.head {
  background: rgba(226, 237, 245, 0.88);
}

.inv-slot.on:hover::after,
.inv-slot.head:hover::after {
  color: #fff;
  background: rgba(18, 24, 29, 0.92);
  border: 1px solid rgba(18, 24, 29, 0.92);
  box-shadow: 0 8px 22px rgba(18, 24, 29, 0.30);
  text-shadow: none;
}

/* ── 代码块：黑字 + 淡底 ── */
.glass-caption code,
.card code,
.bento-item code,
.glass-panel code,
.help-table code {
  color: #0f3b57;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(18, 24, 29, 0.14);
  text-shadow: none;
  font-weight: 600;
}

/* ── 表格：表头与行分隔线改深色 ── */
.help-table thead th {
  color: #12181d;
  background: rgba(255, 255, 255, 0.46);
  border-bottom: 1px solid rgba(18, 24, 29, 0.20);
}

.help-table tbody td {
  color: #12181d;
  border-bottom: 1px solid rgba(18, 24, 29, 0.10);
}

.help-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.34);
}

/* ── 标签：白底深字 ── */
.help-table .badge,
.card .badge,
.bento-item .badge {
  color: #10222e !important;
  background: rgba(255, 255, 255, 0.88) !important;
  text-shadow: none !important;
}

/* ── 按钮：次要按钮改深色描边 ── */
.card-links .btn-secondary {
  color: #12181d;
  border-color: rgba(18, 24, 29, 0.34);
  background: rgba(255, 255, 255, 0.44);
  text-shadow: none;
}

.glass-panel .btn {
  color: #fff;
}

/* ── 列表小圆点：黑字旁边要用深色 ── */
.card ul li::before,
.bento-item ul li::before,
.glass-panel ul li::before {
  color: rgba(18, 24, 29, 0.62);
  text-shadow: none;
}

/* ── 流程条：黑字，标签保留实色以便区分 ── */
.glass-flow li {
  color: #12181d;
  border: 1px solid rgba(18, 24, 29, 0.16);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.60),
    0 1px 3px rgba(255, 255, 255, 0.42);
}

.glass-flow strong {
  color: #0b1217;
}

/* 最后一条是"拦截"，给一点红调提示；其余用中性 */
.flow-tag {
  color: #10222e;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(18, 24, 29, 0.18);
  box-shadow: 0 2px 6px rgba(18, 24, 29, 0.14);
  text-shadow: none;
}

/* ==========================================================================
   例外：最后一栏（深色块）仍然用白字
   ========================================================================== */
.cta-band--ink p,
.cta-band--ink .cta-wordmark,
.cta-band--ink .cta-actions a {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.60);
}

.cta-band--ink .btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.10);
}

/* ==========================================================================
   页面上的非模块文字（区块标题、封面）也统一黑字
   ========================================================================== */
.section-label {
  color: #0f3b57;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.60);
}

.section-header h2,
.section-header p {
  color: #12181d;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.62),
    0 1px 3px rgba(255, 255, 255, 0.45);
}

/* 封面：压在壁纸最亮处，用深色文字 + 淡白光晕，不再用白字 */
.cover-title,
.cover-subtitle {
  color: #0f1519;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 14px rgba(255, 255, 255, 0.40);
}

.cover-quote,
.cover-remark p {
  color: #16202a;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 12px rgba(255, 255, 255, 0.40);
}

.cover-quote strong {
  color: #0b1217;
}

.plug-hero-ver {
  color: #16202a;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(18, 24, 29, 0.16);
  text-shadow: none;
}

.cover-divider {
  background: rgba(18, 24, 29, 0.24);
}

/* 封面上的三个按钮：改深字浅底，壁纸亮处不再靠发光取胜 */
.cover-page .cover-btn {
  color: #12181d;
  border: 1px solid rgba(18, 24, 29, 0.28);
  background: rgba(255, 255, 255, 0.58);
  text-shadow: none;
}

.cover-page .cover-btn:hover {
  color: #0b1217;
  background: rgba(255, 255, 255, 0.80);
  border-color: rgba(18, 24, 29, 0.42);
}

/* ── 压暗罩：黑字方案下不需要那么深，减到约 26% ──
   （太深会让黑字读不出来；压暗罩只负责把壁纸的极亮处压平一点） */

@media (max-width: 920px) {
}

/* ==========================================================================
   帮助页（纯白）：黑字本来就是默认，这里只兜底一次
   ========================================================================== */
body.pure-white .glass-panel h1, body.pure-white .glass-panel h2,
body.pure-white .glass-panel h3,
body.pure-white .glass-panel p, body.pure-white .glass-panel li,
body.pure-white .glass-panel strong,
body.pure-white .card h3, body.pure-white .card p, body.pure-white .card li,
body.pure-white .bento-item h3, body.pure-white .bento-item p,
body.pure-white .bento-item li,
body.pure-white .glass-caption, body.pure-white .glass-title,
body.pure-white .glass-flow li,
body.pure-white .help-table tbody td,
body.pure-white .help-table thead th {
  color: #12181d;
  text-shadow: none;
}

body.pure-white .section-header h2,
body.pure-white .section-header p,
body.pure-white .section-label {
  color: #1d1d1f;
  text-shadow: none;
}

body.pure-white .page-hero h1,
body.pure-white .page-hero p {
  color: #1d1d1f;
  text-shadow: none;
}

/* ==========================================================================
   LinuxTeam 页面：黑字 + 白色描边（定稿）
   ==========================================================================
   你的选择：黑字 + 文字加白色描边。

   这是三种方案里唯一"壁纸随便换都读得清"的做法：
     黑字在亮壁纸上有对比，白描边在暗壁纸上有对比 ——
     壁纸亮或暗，总有一边撑着。

   实现细节（为什么不直接用 -webkit-text-stroke）：
     text-stroke 画在字形**中心线上**，会把笔画吃掉一半，
     小字号直接糊成一团；而且它画在文字**下面**，压在深色壁上依然看不清。
     Chrome / Edge 对 paint-order: stroke 的支持也不完整。

     所以改用 8 方向 text-shadow 描边 ——
     上下左右 + 四个斜角各投一道白色阴影，视觉上就是一圈白描边，
     而且不占用字形本身，字号多小都不会糊。

       ↖ ↑ ↗
       ← 字 →
       ↙ ↓ ↘

   加两层软白光晕（1px / 3px），让描边外缘柔和过渡，不是硬边。
   代码块排除在外 —— 它们有自己的浅色底，再加描边反而脏。
   ========================================================================== */

/* ── 主体文字：黑字 + 八向白描边 + 两层柔光 ── */
.glass-panel h1, .glass-panel h2, .glass-panel h3,
.glass-panel p, .glass-panel li, .glass-panel strong,
.card h3, .card p, .card li, .card strong,
.bento-item h3, .bento-item p, .bento-item li, .bento-item strong,
.intro-split .split-points li, .intro-split .split-points li strong,
.glass-flow li, .glass-flow strong,
.glass-caption, .glass-title,
.help-table tbody td, .help-table thead th {

  color: #0d1216;

  text-shadow:
    /* ↖ ↑ ↗ ← → ↙ ↓ ↘ 八向白描边 */
    -1px -1px 0 rgba(255, 255, 255, 0.95),
     0   -1px 0 rgba(255, 255, 255, 0.95),
     1px -1px 0 rgba(255, 255, 255, 0.95),
    -1px  0   0 rgba(255, 255, 255, 0.95),
     1px  0   0 rgba(255, 255, 255, 0.95),
    -1px  1px 0 rgba(255, 255, 255, 0.95),
     0    1px 0 rgba(255, 255, 255, 0.95),
     1px  1px 0 rgba(255, 255, 255, 0.95),
    /* 两层柔光：描边外缘过渡，避免硬边 */
    0 0 2px rgba(255, 255, 255, 0.85),
    0 0 6px rgba(255, 255, 255, 0.55);
}

/* ── 大标题描边放宽一点，远看更整体 ── */
.glass-panel h1, .glass-panel h2,
.card h3, .bento-item h3,
.section-header h2,
.cover-title {
  text-shadow:
    -2px -2px 0 rgba(255, 255, 255, 0.96),
     0   -2px 0 rgba(255, 255, 255, 0.96),
     2px -2px 0 rgba(255, 255, 255, 0.96),
    -2px  0   0 rgba(255, 255, 255, 0.96),
     2px  0   0 rgba(255, 255, 255, 0.96),
    -2px  2px 0 rgba(255, 255, 255, 0.96),
     0    2px 0 rgba(255, 255, 255, 0.96),
     2px  2px 0 rgba(255, 255, 255, 0.96),
    0 0 4px rgba(255, 255, 255, 0.80),
    0 0 12px rgba(255, 255, 255, 0.45);
}

/* ── 区块小标题（FEATURES / PREVIEW …）── */
.section-label {
  color: #0b4f74;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.92),
     1px -1px 0 rgba(255, 255, 255, 0.92),
    -1px  1px 0 rgba(255, 255, 255, 0.92),
     1px  1px 0 rgba(255, 255, 255, 0.92),
    0 0 6px rgba(255, 255, 255, 0.70);
}

.section-header p {
  color: #101820;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.92),
     1px -1px 0 rgba(255, 255, 255, 0.92),
    -1px  1px 0 rgba(255, 255, 255, 0.92),
     1px  1px 0 rgba(255, 255, 255, 0.92),
    0 0 6px rgba(255, 255, 255, 0.70);
}

/* ── 封面：同样黑字白描边，壁纸再亮也不怕 ── */
.cover-title,
.cover-subtitle,
.cover-quote,
.cover-quote strong,
.cover-remark p {
  color: #0b1015;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.94),
     0   -1px 0 rgba(255, 255, 255, 0.94),
     1px -1px 0 rgba(255, 255, 255, 0.94),
    -1px  0   0 rgba(255, 255, 255, 0.94),
     1px  0   0 rgba(255, 255, 255, 0.94),
    -1px  1px 0 rgba(255, 255, 255, 0.94),
     0    1px 0 rgba(255, 255, 255, 0.94),
     1px  1px 0 rgba(255, 255, 255, 0.94),
    0 0 10px rgba(255, 255, 255, 0.55);
}

/* 封面版本号徽标：白底黑字，不用描边 */
.plug-hero-ver {
  color: #101820;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(13, 18, 22, 0.16);
  text-shadow: none;
}

/* 封面按钮：白底黑字，最稳 */
.cover-page .cover-btn {
  color: #0d1216;
  background: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(13, 18, 22, 0.22);
  text-shadow: none;
}

.cover-page .cover-btn:hover {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(13, 18, 22, 0.36);
}

/* ── 代码块：排除描边（它们有自己的浅底），只保证黑字清楚 ── */
.glass-caption code,
.card code,
.bento-item code,
.glass-panel code,
.help-table code {
  color: #0b3a52;
  text-shadow: none;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(13, 18, 22, 0.14);
  font-weight: 600;
}

/* ── 表格：表头白底黑字，行线用深色 ── */
.help-table thead th {
  color: #0d1216;
  background: rgba(255, 255, 255, 0.66);
  border-bottom: 1px solid rgba(13, 18, 22, 0.22);
  text-shadow: none;
}

.help-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.40);
}

/* ── 标签：白底深字，不用描边 ── */
.help-table .badge,
.card .badge,
.bento-item .badge {
  color: #0b1217 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(13, 18, 22, 0.14) !important;
  text-shadow: none !important;
}

/* ── 列表小圆点：深色，看得见即可 ── */
.card ul li::before,
.bento-item ul li::before,
.glass-panel ul li::before {
  color: rgba(13, 18, 22, 0.60);
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.80);
}

/* ── 流程标签：实色底，不用描边 ── */
.flow-tag,
.flow-tag.ok,
.flow-tag.no {
  text-shadow: none;
}

/* ==========================================================================
   例外：最后一栏是深色块，那里仍然用白字（不加白描边，否则糊）
   ========================================================================== */
.cta-band--ink p,
.cta-band--ink .cta-wordmark,
.cta-band--ink .cta-actions a {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.60);
}

.cta-band--ink .btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.10);
}

/* ==========================================================================
   帮助页（纯白底）：黑字不需要描边，全部关掉
   ========================================================================== */
body.pure-white .glass-panel h1, body.pure-white .glass-panel h2,
body.pure-white .glass-panel h3,
body.pure-white .glass-panel p, body.pure-white .glass-panel li,
body.pure-white .glass-panel strong,
body.pure-white .card h3, body.pure-white .card p, body.pure-white .card li,
body.pure-white .bento-item h3, body.pure-white .bento-item p,
body.pure-white .bento-item li,
body.pure-white .glass-caption, body.pure-white .glass-title,
body.pure-white .glass-flow li,
body.pure-white .help-table tbody td,
body.pure-white .help-table thead th,
body.pure-white .section-header h2,
body.pure-white .section-header p,
body.pure-white .section-label,
body.pure-white .page-hero h1,
body.pure-white .page-hero p {
  color: #1d1d1f;
  text-shadow: none;
}

/* ==========================================================================
   主页封面信息行（github / 插件链接）—— 黑字白描边，与 LinuxTeam 页统一
   ========================================================================== */
.cover-social a,
.cover-social a .label,
.cover-social a .ico {
  color: #0d1216;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.95),
     0   -1px 0 rgba(255, 255, 255, 0.95),
     1px -1px 0 rgba(255, 255, 255, 0.95),
    -1px  0   0 rgba(255, 255, 255, 0.95),
     1px  0   0 rgba(255, 255, 255, 0.95),
    -1px  1px 0 rgba(255, 255, 255, 0.95),
     0    1px 0 rgba(255, 255, 255, 0.95),
     1px  1px 0 rgba(255, 255, 255, 0.95),
    0 0 6px rgba(255, 255, 255, 0.60);
}

.cover-social a:hover,
.cover-social a:hover .label,
.cover-social a:hover .ico {
  color: #0b4f74;
}

/* 封面上其它裸露在壁纸上的小字 */
.cover-remark strong {
  color: #0b1015;
}

.cover-quote strong {
  color: #0b1015;
}

/* ==========================================================================
   LinuxTeam 页面：移动端适配
   ==========================================================================
   实测（390 CSS px 宽，deviceScaleFactor 2）发现的问题：
     ① 手机上壁纸是 mobile.jpg，全程铺在内容后面，图案比桌面端的视频更花
     ② 面板只有 4% 的白底，桌面端靠大屏留白还能看，
        手机屏窄、行数多、字挤在一起 → 黑字虽然清楚，但面板边界几乎看不出来
     ③ 封面那一行按钮在 390px 宽下会挤成两行，间距太紧
     ④ 触屏没有 hover，箱子格子的提示气泡会"粘"在屏幕上（已单独处理）

   修法：
     · 手机上给面板加到 34% 的白底 —— 仍然是玻璃（看得到壁纸纹理与流动），
       但边界清楚、黑字对比度从"勉强"提到"舒服"
     · 触屏把字号与行高稍微放大（手机上默认字太小）
     · 面板内距收紧一点，把省下的空间还给文字
     · 封面按钮变成等宽两列，不再挤成参差不齐的两行
     · 底栏、表格、流程条各自的窄屏形态单独调
   ========================================================================== */

/* ── 平板（≤920px）── */
@media (max-width: 920px) {

  /* 面板：白底加到 34%，边界清楚但仍是玻璃 */
  .glass-panel,
  .card,
  .bento-item,
  .intro-split .split-points li,
  .glass-flow li,
  .help-table {
    background: rgba(255, 255, 255, 0.34);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow:
      inset 0 1.4px 0 rgba(255, 255, 255, 0.85),
      0 10px 28px rgba(13, 18, 22, 0.16);
  }

  /* 描边收细一点：小屏上 1px 已经很显眼，不要用桌面端的大标题描边 */
  .glass-panel h1, .glass-panel h2, .glass-panel h3,
  .card h3, .bento-item h3,
  .section-header h2,
  .cover-title {
    text-shadow:
      -1px -1px 0 rgba(255, 255, 255, 0.96),
       1px -1px 0 rgba(255, 255, 255, 0.96),
      -1px  1px 0 rgba(255, 255, 255, 0.96),
       1px  1px 0 rgba(255, 255, 255, 0.96),
      0 0 5px rgba(255, 255, 255, 0.70);
  }

  /* 正文字号放大：手机上 14px 偏小，行高也放开 */
  .glass-panel p, .glass-panel li,
  .card p, .card li,
  .bento-item p, .bento-item li,
  .intro-split .split-points li,
  .glass-flow li,
  .help-table tbody td, .help-table thead th {
    font-size: 15px;
    line-height: 1.78;
  }

  .glass-panel p, .card p, .bento-item p {
    line-height: 1.8;
  }

  /* 面板内距收紧，把空间还给文字 */
  .glass-panel {
    padding: 16px 16px 18px;
  }

  .card,
  .bento-item {
    padding: 18px 17px;
  }

  /* 列表：手机上缩进小一点，避免右侧被挤 */
  .card ul,
  .bento-item ul,
  .glass-panel ul {
    padding-left: 18px;
  }

  .card ul li,
  .bento-item ul li,
  .glass-panel ul li {
    padding-left: 14px;
    margin-bottom: 7px;
  }

  /* 代码块允许换行，不要横向溢出 */
  .glass-caption code,
  .card code,
  .bento-item code,
  .glass-panel code,
  .help-table code {
    word-break: break-word;
  }

  /* ── 封面：小屏居中，按钮等宽两列 ── */
  .cover-page {
    padding: 104px 18px 48px;
  }

  .cover-title {
    font-size: clamp(34px, 10vw, 46px);
  }

  .cover-quote {
    font-size: 16px;
    line-height: 1.75;
    padding: 0 4px;
  }

  .cover-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    max-width: 380px;
    margin: 20px auto 0;
  }

  .cover-page .cover-btn {
    width: 100%;
    text-align: center;
    padding: 11px 10px;
    font-size: 14.5px;
  }

  .cover-remark p {
    font-size: 13.5px;
    line-height: 1.7;
  }

  /* ── 区块标题：小屏收紧留白 ── */
  .section-header {
    margin-bottom: 22px;
  }

  .section-header h2 {
    font-size: clamp(24px, 7vw, 32px);
  }

  .section-header p {
    font-size: 14.5px;
  }

  /* ── Bento：手机上全部单列，不要"宽卡占 3 列"的桌面网格 ── */
  .bento {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .bento-item.wide,
  .bento-item.full {
    grid-column: span 1;
  }

  .bento-cols {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* ── 附魔联动那三张卡：单列 ── */
  .grid-3 {
    grid-template-columns: 1fr;
  }

  /* ── 流程条：标签换到上行，文字换行不挤压 ── */
  .glass-flow li {
    flex-wrap: wrap;
    gap: 8px 10px;
  }

  .flow-tag {
    min-width: 44px;
  }

  /* ── 表格：窄屏上允许横向滚动，并给一句提示 ── */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }

  .help-table {
    min-width: 520px;
  }

  .help-table tbody td,
  .help-table thead th {
    padding: 9px 10px;
    font-size: 13.5px;
    line-height: 1.6;
  }

  /* ── 底栏：深色块在窄屏上收紧 ── */
  .cta-band--ink {
    padding: 26px 18px;
    border-radius: 16px;
  }

  .cta-band--ink .cta-wordmark {
    font-size: clamp(26px, 8vw, 34px);
  }

  .cta-band--ink .cta-actions {
    flex-direction: column;
    gap: 10px;
  }

  .cta-band--ink .cta-actions .btn {
    width: 100%;
    text-align: center;
  }

  /* ── 页脚：链接行允许换行，不要溢出 ── */
  footer p {
    line-height: 1.9;
    word-break: break-word;
  }

  footer a {
    display: inline-block;
  }

  /* ── 压暗罩：手机壁纸更亮更花，提亮一层，黑字更清楚 ── */
}

/* ── 小手机（≤480px）── */
@media (max-width: 480px) {

  /* 面板白度再上一档，小屏上字占比更大 */
  .glass-panel,
  .card,
  .bento-item,
  .intro-split .split-points li,
  .glass-flow li,
  .help-table {
    background: rgba(255, 255, 255, 0.42);
  }

  .cover-page {
    padding: 96px 14px 40px;
  }

  .cover-nav {
    max-width: 100%;
  }

  .cover-page .cover-btn {
    font-size: 14px;
    padding: 10px 8px;
  }

  .glass-panel,
  .card,
  .bento-item {
    padding: 15px 14px;
  }

  .glass-panel p, .glass-panel li,
  .card p, .card li,
  .bento-item p, .bento-item li,
  .intro-split .split-points li,
  .glass-flow li,
  .help-table tbody td, .help-table thead th {
    font-size: 14.5px;
  }

  /* 手机竖屏：顶栏 logo 字号收一点，别把汉堡挤掉 */
  .nav-logo {
    font-size: 15px;
  }

  .nav-logo-icon {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }
}

/* ── 超窄屏（≤360px，老机型）── */
@media (max-width: 360px) {
  .cover-title {
    font-size: 30px;
  }

  .cover-nav {
    grid-template-columns: 1fr;
  }

  .glass-panel p, .glass-panel li,
  .card p, .card li,
  .bento-item p, .bento-item li,
  .intro-split .split-points li,
  .glass-flow li,
  .help-table tbody td, .help-table thead th {
    font-size: 14px;
  }
}

/* ── 移动端补丁：封面三个按钮改等宽三列，避免第三个单独占一行 ── */
@media (max-width: 920px) {
  .cover-nav {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 420px;
  }

  .cover-page .cover-btn {
    padding: 11px 6px;
    font-size: 14px;
    white-space: nowrap;
  }
}

@media (max-width: 430px) {
  /* 超窄屏上三个按钮并排会挤，改成"前两个一行、第三个通栏" */
  .cover-nav {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
  }

  .cover-nav .cover-btn:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 360px) {
  .cover-nav {
    grid-template-columns: 1fr;
  }

  .cover-nav .cover-btn:last-child {
    grid-column: auto;
  }
}

/* ── 移动端封面标题：壁纸亮处要更厚的白描边（2px）── */
@media (max-width: 920px) {
  .cover-title,
  .cover-subtitle {
    text-shadow:
      -2px -2px 0 rgba(255, 255, 255, 0.98),
       0   -2px 0 rgba(255, 255, 255, 0.98),
       2px -2px 0 rgba(255, 255, 255, 0.98),
      -2px  0   0 rgba(255, 255, 255, 0.98),
       2px  0   0 rgba(255, 255, 255, 0.98),
      -2px  2px 0 rgba(255, 255, 255, 0.98),
       0    2px 0 rgba(255, 255, 255, 0.98),
       2px  2px 0 rgba(255, 255, 255, 0.98),
      0 0 6px rgba(255, 255, 255, 0.85),
      0 0 16px rgba(255, 255, 255, 0.50);
  }

  .cover-quote,
  .cover-quote strong,
  .cover-remark p {
    text-shadow:
      -1.5px -1.5px 0 rgba(255, 255, 255, 0.98),
       1.5px -1.5px 0 rgba(255, 255, 255, 0.98),
      -1.5px  1.5px 0 rgba(255, 255, 255, 0.98),
       1.5px  1.5px 0 rgba(255, 255, 255, 0.98),
      0 0 8px rgba(255, 255, 255, 0.70);
  }
}

/* ==========================================================================
   LinuxTeam 封面：排版修正（最终）
   ==========================================================================
   上一版在手机上把封面排坏了，具体三处：

     ① 按钮 2+1 —— .cover-nav 是"两列网格"，但封面上有三个按钮，
        第三个被挤到第二行单独占一格，看起来像排版错误。
     ② 副标题被拉长 —— letter-spacing: 3px 让 "TEAM SYSTEM" 超出屏宽后折行。
     ③ 底部那行长句折成两行且居中，末尾"联动"孤零零掉到第二行。

   修正：
     · 按钮改成 flex + 自动换行：三个按钮**同一行**（窄屏才折行，
       而且折行后是"两个一行 + 一个居中的一行"，不是错位的网格）
     · 副标题手机上缩小字号与字距，强制单行
     · 底部那句话手机上给足宽度、字号缩小，尽量一行放完；
       放不下时正常左对齐折行，不再出现"孤字居中"
     · 主标题去掉 letter-spacing（手机上 2px 字距会让长单词显得散）
   ========================================================================== */

/* ── 所有尺寸：封面元素统一"不许意外折行" ── */
.cover-subtitle {
  white-space: nowrap;
}

/* ── 平板 / 手机 ── */
@media (max-width: 920px) {

  /* ① 按钮：flex 一行三个，放不下才折行，折行后居中 */
  .cover-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 9px;
    width: 100%;
    max-width: 460px;
    margin: 22px auto 0;
  }

  .cover-page .cover-btn {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    padding: 11px 14px;
    font-size: 14.5px;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
  }

  /* ② 主标题 / 副标题：字距收紧，副标题强制单行 */
  .cover-title {
    font-size: clamp(30px, 9vw, 42px);
    letter-spacing: 0.5px;
    line-height: 1.18;
  }

  .cover-subtitle {
    font-size: clamp(11px, 3.1vw, 14px);
    letter-spacing: 2px;
    white-space: nowrap;
  }

  /* ③ 标语：字号与行高收敛，居中但不散 */
  .cover-quote {
    font-size: 15.5px;
    line-height: 1.7;
    padding: 0 6px;
    max-width: 30em;
    margin-left: auto;
    margin-right: auto;
  }

  /* ④ 底部那句：给足宽度、缩小字号，尽量一行放完 */
  .cover-remark {
    padding: 0 4px;
  }

  .cover-remark p {
    font-size: 12.5px;
    line-height: 1.65;
    letter-spacing: 0.2px;
    text-align: center;
    word-break: keep-all;      /* 中文不按字断行，整词换行 */
    overflow-wrap: break-word;
  }

  /* 分隔线跟着内容宽度走，不要比文字长出一截 */
  .cover-divider {
    width: min(120px, 40vw);
    margin: 14px auto;
  }
}

/* ── 小手机（≤520px）：三个按钮改竖排通栏，最稳 ── */
@media (max-width: 520px) {

  .cover-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: 100%;
    gap: 9px;
  }

  .cover-page .cover-btn {
    width: 100%;
    padding: 12px 10px;
    font-size: 14.5px;
  }

  .cover-title {
    font-size: clamp(28px, 8.6vw, 35px);
  }

  .cover-remark p {
    font-size: 12px;
    line-height: 1.7;
  }
}

/* ── 超窄屏（≤360px）── */
@media (max-width: 360px) {
  .cover-title {
    font-size: 27px;
    letter-spacing: 0;
  }

  .cover-subtitle {
    font-size: 11px;
    letter-spacing: 1.4px;
  }

  .cover-quote {
    font-size: 14.5px;
  }

  .cover-remark p {
    font-size: 11.5px;
  }
}

/* ==========================================================================
   LinuxTeam 移动端：修掉一处把整页撑宽的元凶
   ==========================================================================
   上一版我给 .cover-remark p 加了：

       word-break: keep-all;   /* 中文不按字断行，整词换行 */

   本意是"别再出现末尾孤零零两个字"，实际效果是反的：
   中文之间没有空格，keep-all 会禁止在字与字之间断行，
   于是一整句中文变成一个**不可分割的长块**，
   它把 .cover-remark / .cover-inner / .container / body 一路顶宽：

       视口 390px  →  body.scrollWidth = 492px（实测）

   body 上又有 overflow-x: hidden，超出的 102px 直接被裁掉 ——
   表现就是页面上所有文字右边被切一刀，看起来"排版坏了"。

   修法：
     · 去掉 word-break: keep-all，改用正常换行（中文按字断行是正确行为）
     · 顺手给全局兜一层防溢出：长单词 / 长 URL 不许顶破容器
     · 给 body 加 max-width: 100% 的保险，任何元素都不该把页面撑宽
   ========================================================================== */

/* ① 去掉那个 keep-all */
@media (max-width: 920px) {
  .cover-remark p {
    word-break: normal;           /* 恢复中文正常断行 */
    overflow-wrap: break-word;
    hyphens: none;
  }
}

/* ② 全局防溢出：任何时候都不许有元素把页面撑得比视口宽 */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
svg,
table,
pre {
  max-width: 100%;
}

/* 中文正文里出现长英文 / 长命令时按需断行，不要顶破容器 */
.cover-remark p,
.cover-quote,
.glass-panel p,
.card p,
.bento-item p,
.bento-item li,
.card li,
.help-table td,
footer p {
  overflow-wrap: break-word;
  word-break: normal;
}

/* ③ 表格容器：确保自己不会跟着表格一起变宽 */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* ==========================================================================
   LinuxTeam 封面按钮：移动端必须撑满整行
   ==========================================================================
   实测（用 iframe 精确控制视口宽，逐档量）发现：
     390 / 520 / 768px 三档下，按钮虽然已经竖排（flex-direction: column），
     但宽度只有内容宽（158 / 138 / 118px），
     排出来是三个居中的小胶囊，点按区域很小，也不整齐。

   原因：.cover-btn 是 <a>（display: inline-block），
         它在 flex 容器里当 flex item 时，宽度由内容决定，
         我上一版写的 width: 100% 被 flex-basis 与 min-width: 0 的组合抵消了。

   修法：在竖排档位里明确给 align-self: stretch（flex 的交叉轴拉伸），
         并把 flex 设为 0 0 auto（不参与放大缩小），宽度就稳了。
   ========================================================================== */

@media (max-width: 520px) {
  .cover-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;      /* 交叉轴拉伸，子项撑满 */
    max-width: 100%;
    gap: 9px;
    padding: 0;
  }

  .cover-page .cover-btn {
    flex: 0 0 auto;
    align-self: stretch;       /* 竖排时撑满整行 */
    width: auto;
    min-width: 0;
    max-width: 100%;
    display: block;
    padding: 12px 10px;
    font-size: 14.5px;
    text-align: center;
  }
}

/* 横排档位（521–920px）：让三个按钮等宽平分一行 */
@media (min-width: 521px) and (max-width: 920px) {
  .cover-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 9px;
    max-width: 460px;
    margin: 22px auto 0;
  }

  .cover-page .cover-btn {
    flex: 1 1 0;               /* 等宽平分 */
    min-width: 0;
    padding: 11px 8px;
    font-size: 14px;
    white-space: nowrap;
    text-align: center;
  }
}

/* ==========================================================================
   LinuxTeam 封面按钮：撑满整行（最终修正）
   ==========================================================================
   前两版为什么没生效：
     · align-self / align-items: stretch 只对"交叉轴尺寸为 auto"的 flex item 生效；
       .cover-btn 是 <a>（inline-block），它自身有内容宽度，
       stretch 就管不到它 —— 所以量出来一直是 158 / 138 / 118px（内容宽）。
     · 上一版写的 width: 100% 被同段里更靠后的 flex 简写覆盖掉了。

   这一版用**最高优先级的选择器**直接写死宽度，不再跟 flex 简写打架：
       .cover-nav .cover-page .cover-btn   →  改用元素+类组合提高特异性
   ========================================================================== */

/* 竖排档（≤520px）：按钮撑满整行 */
@media (max-width: 520px) {
  .cover-nav {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    gap: 9px;
    margin: 22px auto 0;
  }

  .cover-nav a.cover-btn,
  .cover-page .cover-nav a.cover-btn {
    display: block;
    width: 100%;              /* 放在 flex 简写之后，不再被覆盖 */
    min-width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    padding: 12px 10px;
    font-size: 14.5px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }
}

/* 横排档（521–920px）：三个按钮等宽平分整行 */
@media (min-width: 521px) and (max-width: 920px) {
  .cover-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    max-width: 460px;
    gap: 9px;
    margin: 22px auto 0;
  }

  .cover-nav a.cover-btn,
  .cover-page .cover-nav a.cover-btn {
    display: block;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 11px 8px;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }
}

/* ==========================================================================
   封面文字：白描边 / 白底光晕全部改成深色投影（最终）
   ==========================================================================
   之前几版我给封面文字叠了大量白色 text-shadow 当"描边 + 光晕"，
   实际渲染出来像给文字套了一层白底/白边，糊成一团 —— 这是要修掉的东西。

   现在只保留**深色投影**：
     · 近处一层 1px 压边，把字从壁纸上"撕"出来
     · 中间一层 8px 铺开，给字一点体积
     · 远处一层 18px 淡淡晕开，和背景拉开层次
   没有任何白色描边、白色光晕、白色底。

   字色保持黑色。壁纸亮时黑字本身就有对比，深色投影再补一层底，
   亮暗两种壁纸下都读得清。

   这段放在文件最后，优先级高于前面所有同名规则，直接把旧的覆盖掉。
   ========================================================================== */

:root {
  /* 统一的一组深色投影，封面所有文字共用 */
  --ink-shadow:
    0 1px 2px rgba(0, 0, 0, 0.75),
    0 2px 8px rgba(0, 0, 0, 0.50),
    0 4px 18px rgba(0, 0, 0, 0.30);
}

/* ── 主标题 / 副标题 ── */
.cover-title,
.cover-subtitle,
.cover-page .cover-title,
.cover-page .cover-subtitle {
  color: #0b1015;
  text-shadow: var(--ink-shadow);
  -webkit-text-stroke: 0;
}

/* ── 标语 / 底部长句 ── */
.cover-quote,
.cover-quote strong,
.cover-remark p,
.cover-remark strong {
  color: #0b1015;
  text-shadow: var(--ink-shadow);
  -webkit-text-stroke: 0;
}

/* ── 封面信息行（github / 插件链接）── */
.cover-social a,
.cover-social a .label,
.cover-social a .ico {
  color: #0b1015;
  text-shadow: var(--ink-shadow);
  -webkit-text-stroke: 0;
}

.cover-social a:hover,
.cover-social a:hover .label,
.cover-social a:hover .ico {
  color: #0a4666;
}

/* ── 版本号徽标：白底黑字的小胶囊，不用投影 ── */
.plug-hero-ver {
  color: #101820;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(11, 16, 21, 0.16);
  text-shadow: none;
  -webkit-text-stroke: 0;
}

/* ── 封面按钮：白底黑字，不用投影 ── */
.cover-page .cover-btn,
.cover-page .cover-btn:visited {
  color: #0b1015;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(11, 16, 21, 0.20);
  text-shadow: none;
  -webkit-text-stroke: 0;
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
}

.cover-page .cover-btn:hover {
  color: #08202e;
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(11, 16, 21, 0.34);
}

/* ── 主标题在窄屏再压一档投影，小字上更干净 ── */
@media (max-width: 920px) {
  .cover-title,
  .cover-subtitle,
  .cover-quote,
  .cover-quote strong,
  .cover-remark p,
  .cover-social a,
  .cover-social a .label,
  .cover-social a .ico {
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.78),
      0 2px 7px rgba(0, 0, 0, 0.52);
  }
}

/* ==========================================================================
   右侧三张要点小卡：给一点白色底衬（不是给字加白底）
   ==========================================================================
   实测：壁纸右侧有块深色玩偶，白色玻璃在它上面几乎不起作用，
   黑字压上去读不清。

   注意区分：
     · "给字加白底/白描边" —— 你明确不要，已经全部去掉
     · "给卡片加一点白衬"   —— 这次加的，作用于卡片本身，
       字仍然是黑字 + 深色投影，没有白边

   白度只提到 52%：卡片还是玻璃（看得到壁纸的流动与纹理），
   但已经足够把背后那块深色压平，黑字读得清。
   ========================================================================== */

.intro-split .split-points li,
.bento-item,
.card {
  background: rgba(255, 255, 255, 0.52);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  backdrop-filter: blur(26px) saturate(155%);
  border: 1px solid rgba(255, 255, 255, 0.70);
  box-shadow:
    inset 0 1.4px 0 rgba(255, 255, 255, 0.90),
    inset 0 -1px 0 rgba(255, 255, 255, 0.20),
    0 12px 32px rgba(11, 16, 21, 0.16);
}

/* 卡片里的标题 / 正文：黑字 + 深色投影，不要白边 */
.intro-split .split-points li,
.intro-split .split-points li strong,
.bento-item h3,
.bento-item p,
.bento-item li,
.bento-item strong,
.card h3,
.card p,
.card li,
.card strong {
  color: #0b1015;
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.55),
    0 1px 4px rgba(0, 0, 0, 0.22);
  -webkit-text-stroke: 0;
}

/* 卡片里的小代码块：浅底深字 */
.card code,
.bento-item code {
  color: #0b3a52;
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(11, 16, 21, 0.10);
  text-shadow: none;
}

/* 手机上卡片再实一点（窄屏字占比大，背景更干扰） */
@media (max-width: 920px) {
  .intro-split .split-points li,
  .bento-item,
  .card {
    background: rgba(255, 255, 255, 0.62);
  }
}

@media (max-width: 480px) {
  .intro-split .split-points li,
  .bento-item,
  .card {
    background: rgba(255, 255, 255, 0.70);
  }
}

/* ── 补：右侧要点卡的白衬要压过前面更具体的选择器 ── */
.intro-split .split-points li,
.intro-split ul.split-points li,
.intro-split .split-points li.reveal,
.intro-split .split-points li.reveal.visible {
  background: rgba(255, 255, 255, 0.56);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  backdrop-filter: blur(26px) saturate(155%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1.4px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22),
    0 12px 32px rgba(11, 16, 21, 0.18);
}

.intro-split .split-points li,
.intro-split .split-points li strong {
  color: #0b1015;
  text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.60),
    0 1px 4px rgba(0, 0, 0, 0.22);
  -webkit-text-stroke: 0;
}

@media (max-width: 920px) {
  .intro-split .split-points li,
  .intro-split ul.split-points li {
    background: rgba(255, 255, 255, 0.66);
  }
}

/* ==========================================================================
   手风琴（FAQ）：展开动画改用 max-height 方案
   ==========================================================================
   原实现用 .faq-a-wrap { display: grid; grid-template-rows: 0fr → 1fr }
   来做展开过渡。这是最优雅的写法，但：
     · grid-template-rows 的 fr 插值在部分浏览器/内核版本上不生效，
       会变成"瞬间展开"，看起来就是没有动画
     · .faq-a 上还挂着 opacity/padding 过渡，两者混在一起容易出现
       "文字先出来、容器后撑开"的错位

   改法：容器用 max-height 过渡（兼容性最好），配合 opacity 做淡入。
   上限给 1200px —— 比最长的答案还长不少，够用且不会出现"撑开后回弹"。
   缓动沿用站内那套 cubic-bezier(0.22, 1, 0.36, 1)（先快后缓，像抽屉拉出）。
   ========================================================================== */

.faq-a-wrap {
  display: block;
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.24s ease;
  opacity: 0;
}

.faq-item.open .faq-a-wrap {
  max-height: 1200px;
  opacity: 1;
}

/* 答案本体：只保留淡入，padding 由 open 状态给 */
.faq-a {
  overflow: hidden;
  transition: opacity 0.26s ease, padding 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item.open .faq-a {
  opacity: 1;
}

/* 问句里的文字块：占满剩余宽度，左对齐 —— 
   否则 flex 会把多个子项（文字 + <code>）撑开成分散的几块 */
.faq-q > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

/* 图标：固定在右侧，展开时旋转 180° */
.faq-q .faq-icon {
  flex: 0 0 auto;
}

/* 问句里的小代码块不要因为 flex 而被拉长 */
.faq-q code {
  white-space: nowrap;
}

/* 减少动态效果：直接开合，不做过渡 */
@media (prefers-reduced-motion: reduce) {
  .faq-a-wrap,
  .faq-a {
    transition: none;
  }
}

/* ==========================================================================
   FAQ 窄屏修正
   ==========================================================================
   实测 420px 一张截图时发现：问句右边的 ＋/－ 图标被挤出屏幕外。

   原因：展开的那一条里，答案文字很长，把 .faq-q 里那个
   flex: 1 1 auto 的文字 span 撑到超过容器宽度，图标被顶出去。

   修法：
     · 文字 span 加 min-width: 0（flex 子项默认 min-width 是 auto，
       内容长了就不肯收缩 —— 这是 flex 里最经典的一个坑）
     · 窄屏把问句字号与内距收一点，并允许在必要时折成两行
       （单行放不下时折行，比把图标挤出去好）
   ========================================================================== */

.faq-q > span:first-child {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

@media (max-width: 520px) {
  .faq-q {
    padding: 14px 14px;
    font-size: 14.5px;
    line-height: 1.55;
    gap: 8px;
  }

  .faq-q > span:first-child {
    /* 窄屏内容优先：问句太长就折行，不再强行挤成一行 */
    white-space: normal;
    text-overflow: clip;
  }

  .faq-q .faq-icon {
    align-self: flex-start;
    margin-top: 2px;
  }

  .faq-item.open .faq-a {
    padding: 0 14px 14px;
  }

  .faq-a {
    padding: 0 14px;
    font-size: 13.5px;
    line-height: 1.72;
  }
}

/* 桌面端：问句一行放得下就一行，放不下也不许把图标挤出去 */
@media (min-width: 521px) {
  .faq-q > span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* ============================================================
   顶栏下划线：只画在文字下面
   ============================================================
   /Nalxer 服务器/ 那个外链带左右内边距，下划线如果挂在整条 <a> 上，
   会比文字两边各长出去一截、还贴在框底。这里把下划线挂到文字本身
   （.nav-text），宽度就等于文字宽度，位置也贴着文字。
   ============================================================ */
nav .nav-links a .nav-text {
  position: relative;
  display: inline-block;
}

nav .nav-links a .nav-text::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  /* 贴着文字下沿：1px 是给中文字形留的一点呼吸，不压到笔画上 */
  bottom: -1px;
  height: 2px;
  background: var(--blue);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

nav .nav-links a:hover .nav-text::after,
nav .nav-links a:focus-visible .nav-text::after {
  transform: scaleX(1);
}

/* 外链的箭头不要跟着下划线一起被拉长 */
nav .nav-links a .nav-text + svg {
  flex: 0 0 auto;
  margin-left: 4px;
}

/* 去掉可能残留的文字下划线（外链在部分浏览器会被 UA 样式加下划线） */
nav .nav-links a.nav-external,
nav .nav-links a.nav-external:hover {
  text-decoration: none;
}


/* ============================================================
   外链（Nalxer 服务器）：内边距归零 + 只保留文字下面那条下划线
   ============================================================
   量测过：原来 padding 5px 12px 让 <a> 宽 127px，而文字只有 83px，
   挂在 <a> 上的下划线自然比文字两边各长 12px、还离得远。
   内边距去掉后 <a> 宽度就等于文字宽度，几何上直接对齐。
   ============================================================ */
nav .nav-links a.nav-external,
nav.nav-home .nav-links a.nav-external,
nav.nav-home.scrolled .nav-links a.nav-external {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* 外链不再用挂在整条 <a> 上的下划线（那是给无 span 的项兜底的） */
nav .nav-links a.nav-external::after {
  content: none !important;
}

/* 只保留文字下方这条 */
nav .nav-links a.nav-external .nav-text::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--blue);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

nav .nav-links a.nav-external:hover .nav-text::after,
nav .nav-links a.nav-external:focus-visible .nav-text::after {
  transform: scaleX(1);
}


/* ============================================================
   顶栏下划线：普通项与外链项几何完全一致
   ============================================================
   CDP 量测确认：
     普通项  a 无内边距，a::after  bottom:2px height:1.5px
     外链项  已把内边距归零，下划线在 .nav-text::after
   两条线都用「距所在盒子底边 2px、高 1.5px」，看起来就是同一条线。
   ============================================================ */
nav .nav-links a::after,
nav .nav-links a .nav-text::after {
  height: 1.5px !important;
  bottom: 2px !important;
  border-radius: 1px;
}

nav .nav-links a.nav-external {
  padding: 0 !important;
}


/* ============================================================
   全站顶栏统一（10 个页面同一套）  [FINAL]
   ============================================================
   量测出的差异：
     7 页（nav.nav-home）  bg=rgba(255,255,255,.62) backdrop=blur24
     3 个帮助页(pure-white) bg=#fff backdrop=none
   帮助页那几条规则在文件更后面，所以这里必须带 !important 才压得住。
   ============================================================ */
nav,
nav.nav-home,
nav.nav-home.scrolled,
body.pure-white nav,
body.pure-white nav.nav-home,
body.pure-white nav.nav-home.scrolled {
  background: rgba(255, 255, 255, 0.66) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.4),
    0 4px 24px rgba(15, 25, 35, 0.07) !important;
}

/* 帮助页是纯白底：透明一点会显脏，抬到 0.78 并补一条浅分隔线 */
body.pure-white nav,
body.pure-white nav.nav-home,
body.pure-white nav.nav-home.scrolled {
  background: rgba(255, 255, 255, 0.78) !important;
  border-bottom: 1px solid rgba(206, 215, 224, 0.85) !important;
}

/* 顶栏文字统一黑色（玻璃上发灰就不好看） */
nav .nav-links a,
body.pure-white nav .nav-links a,
body.pure-white .nav-links a,
nav .nav-logo,
body.pure-white nav .nav-logo {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text);
  text-shadow: none !important;
}

/* 外链保持主题蓝（必须在黑色规则之后） */
nav .nav-links a.nav-external,
nav.nav-home .nav-links a.nav-external,
nav.nav-home.scrolled .nav-links a.nav-external,
body.pure-white nav .nav-links a.nav-external,
body.pure-white .nav-links a.nav-external {
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue);
}

/* 「L」图标：白字蓝底，不跟着顶栏变黑 */
nav .nav-logo .nav-logo-icon,
.nav-home .nav-logo .nav-logo-icon,
.nav-home.scrolled .nav-logo .nav-logo-icon,
body.pure-white nav .nav-logo .nav-logo-icon {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}


/* ============================================================
   顶栏色调统一（全站唯一一套）  [UNIFIED TONE]
   ============================================================
   原来用 0.66 / 0.78 两档半透明白，结果顶栏颜色由"背后是什么"决定：
     壁纸页 rgb(182,186,195)，帮助页 rgb(224,224,225)，差 47 级。
   现在把色调钉死成一个固定的极浅冷白（0.94 不透明度）：
     壁纸页透上来 ~6% 的深色插画，帮助页透上来 ~6% 的白，
     两者算下来只差几级，全站看起来是同一个色调。
   ============================================================ */
nav,
nav.nav-home,
nav.nav-home.scrolled,
body.pure-white nav,
body.pure-white nav.nav-home,
body.pure-white nav.nav-home.scrolled {
  background: rgba(247, 249, 251, 0.94) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  border-bottom: 1px solid rgba(214, 222, 230, 0.9) !important;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.6),
    0 2px 16px rgba(15, 25, 35, 0.05) !important;
}

/* 顶栏文字：统一的深墨色（比纯黑柔和一点，和浅底更搭） */
nav .nav-links a,
nav .nav-logo,
body.pure-white nav .nav-links a,
body.pure-white .nav-links a,
body.pure-white nav .nav-logo {
  color: #111820 !important;
  -webkit-text-fill-color: #111820;
  text-shadow: none !important;
}

/* 外链保持主题蓝 */
nav .nav-links a.nav-external,
nav.nav-home .nav-links a.nav-external,
nav.nav-home.scrolled .nav-links a.nav-external,
body.pure-white nav .nav-links a.nav-external,
body.pure-white .nav-links a.nav-external {
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue);
}

/* 「L」图标：白字蓝底 */
nav .nav-logo .nav-logo-icon,
.nav-home .nav-logo .nav-logo-icon,
.nav-home.scrolled .nav-logo .nav-logo-icon,
body.pure-white nav .nav-logo .nav-logo-icon {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}


/* ============================================================
   顶栏定色（全站唯一色）  [SOLID]
   ============================================================
   实测：透明度 0.55~0.97 时，顶栏颜色都会被背后的内容带偏
   （浅底与深底最多差 99 级，0.94 也还差 14 级）。
   只有实色才能保证 10 个页面顶栏完全同色 —— 故取实色。
   ============================================================ */
nav,
nav.nav-home,
nav.nav-home.scrolled,
body.pure-white nav,
body.pure-white nav.nav-home,
body.pure-white nav.nav-home.scrolled {
  background: rgb(247, 249, 251) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid rgb(226, 232, 238) !important;
  box-shadow: 0 1px 2px rgba(15, 25, 35, 0.04) !important;
}

/* 文字：统一深墨色 */
nav .nav-links a,
nav .nav-logo,
body.pure-white nav .nav-links a,
body.pure-white .nav-links a,
body.pure-white nav .nav-logo {
  color: #10161d !important;
  -webkit-text-fill-color: #10161d;
  text-shadow: none !important;
}

/* 外链：主题蓝 */
nav .nav-links a.nav-external,
nav.nav-home .nav-links a.nav-external,
nav.nav-home.scrolled .nav-links a.nav-external,
body.pure-white nav .nav-links a.nav-external,
body.pure-white .nav-links a.nav-external {
  color: var(--blue) !important;
  -webkit-text-fill-color: var(--blue);
}

/* 「L」图标：白字蓝底 */
nav .nav-logo .nav-logo-icon,
.nav-home .nav-logo .nav-logo-icon,
.nav-home.scrolled .nav-logo .nav-logo-icon,
body.pure-white nav .nav-logo .nav-logo-icon {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}


/* ============================================================
   插件卡片：版本号改成徽章
   ============================================================
   原来是 <p class="plug-ver">26.11.5-Alpha</p> —— 一行灰色小字，
   和正文挤在一起分不出来。改成主题蓝胶囊：
     · 等宽字体（版本号本来就该对齐着看）
     · 与卡片里其它 .badge 同一套圆角与内边距
     · 左对齐独立成行，不跟标题挤
   ============================================================ */
.card .plug-ver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* 固定一个下限宽度，让并排卡片的版本徽章左右对齐 */
  min-width: 132px;
  margin: 2px 0 12px;
  padding: 3px 11px 3px 9px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  /* 等宽字体本身字距偏开，这里收一点更紧凑 */
  letter-spacing: -0.01em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
               "Liberation Mono", Menlo, monospace;
  color: #2f5f8a;
  background: rgba(74, 123, 167, 0.12);
  border: 1px solid rgba(74, 123, 167, 0.26);
  border-radius: 980px;
  text-shadow: none;
  white-space: nowrap;
}

/* 前面加一个 "v"，版本号看起来才完整 */
.card .plug-ver::before {
  content: 'v';
  font-weight: 700;
  opacity: 0.72;
}

/* 小圆点：像状态灯，一眼看出这是版本信息 */
.card .plug-ver::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  margin-left: 1px;
}

/* 悬停卡片时徽章稍微提亮，和卡片的 hover 呼应 */
.card:hover .plug-ver {
  background: rgba(74, 123, 167, 0.18);
  border-color: rgba(74, 123, 167, 0.38);
}

/* Alpha / Beta 这类预发布版：用暖色区分，免得和正式版混淆 */
.card .plug-ver.is-prerelease {
  color: #8a5a1f;
  background: rgba(214, 158, 61, 0.14);
  border-color: rgba(214, 158, 61, 0.32);
}

/* 帮助页顶部的版本号（hub-ver / plug-hero-ver）也顺手统一成同款 */
.hub-ver,
.plug-hero-ver {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
               "Liberation Mono", Menlo, monospace;
  letter-spacing: 0.02em;
}


/* ============================================================
   版本号样式统一（全站一套）  [VER BADGE]
   ============================================================
   三类位置原本各不相同：
     .plug-ver      主页卡片      灰字，无徽章
     .plug-hero-ver 介绍页封面    白底黑字胶囊（在壁纸上看还行，但和卡片不同色）
     .hub-ver       帮助中心卡片  灰字，无徽章
   统一为：浅蓝胶囊 + 等宽 + 前置 v + 小圆点；预发布用琥珀色。
   颜色按所在地的底色分两套，保证对比度都够：
     浅底（卡片）  文字 #2f5f8a，底 rgba(74,123,167,.12)
     深底（封面）  文字 #16202a，底 rgba(255,255,255,.86)（同原来，够清楚）
   ============================================================ */

/* ---- 浅底：卡片 / 帮助中心 ---- */
.card .plug-ver,
.help-hub-card .hub-ver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 132px;
  margin: 2px 0 12px;
  padding: 3px 11px 3px 9px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.01em;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
               "Liberation Mono", Menlo, monospace;
  color: #2f5f8a !important;
  background: rgba(74, 123, 167, 0.12) !important;
  border: 1px solid rgba(74, 123, 167, 0.26) !important;
  border-radius: 980px !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  white-space: nowrap;
}

.card .plug-ver::before,
.help-hub-card .hub-ver::before {
  content: 'v';
  font-weight: 700;
  opacity: 0.72;
}

.card .plug-ver::after,
.help-hub-card .hub-ver::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  margin-left: 1px;
}

.card:hover .plug-ver,
.help-hub-card:hover .hub-ver {
  background: rgba(74, 123, 167, 0.18) !important;
  border-color: rgba(74, 123, 167, 0.38);
}

/* 预发布版（Alpha / Beta）用琥珀色区分，别和正式版混淆 */
.card .plug-ver.is-prerelease,
.help-hub-card .hub-ver.is-prerelease {
  color: #8a5a1f !important;
  background: rgba(214, 158, 61, 0.14) !important;
  border-color: rgba(214, 158, 61, 0.32) !important;
}

/* ---- 深底（介绍页封面）：保持白底深字，只统一字体与结构 ---- */
.page-hero .plug-hero-ver,
.cover .plug-hero-ver,
.plug-hero-ver {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
               "Liberation Mono", Menlo, monospace;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #16202a !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(13, 18, 22, 0.14);
  border-radius: 980px;
  text-shadow: none !important;
  -webkit-text-stroke: 0;
  white-space: nowrap;
}

.plug-hero-ver::before {
  content: 'v';
  font-weight: 700;
  opacity: 0.66;
}

.plug-hero-ver::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  margin-left: 1px;
}

/* ==========================================================================
   紧凑化补丁 v2（服主 2026-11-01：框小一点 / 别横着排 / 一屏别装不下）
   --------------------------------------------------------------------------
   两个真问题：
   1) .tip 原本是 display:flex。大量页面把提示写成
        <div class="tip tip-warn"><strong>标题</strong>正文…</div>
      （没有 .tip-body 包裹）—— flex 会把 <strong> 和正文当成两个 flex 项
      横着并排：标题被挤成一条窄柱、正文在剩下的宽度里被拉散，
      看起来就是"横着来的 / 八股文"。这里改成块级流，标题独占一行。
   2) 提示框 / 表格 / 步骤 / FAQ / 代码块的内边距、字号统一收小一号，
      区块间距也收一点，同一个屏幕能多装 30%~40% 的内容。
   ========================================================================== */

/* ---------- ① 提示框：块级流，禁止横排 ---------- */
.tip {
  display: block !important;
  position: relative;
  padding: 11px 15px;
  margin: 10px 0;
  font-size: 13.5px;
  line-height: 1.62;
  border-radius: 10px;
  border-left-width: 3px;
}

.tip > .tip-icon {
  float: left;
  margin: 2px 8px 0 0;
  font-size: 15px;
  line-height: 1.3;
}

/* 旧规则 .tip-body strong{display:block} 会把正文里加粗的词（"包含"、"可直接加入"）
   顶到单独一行。这里改成：只有「整块最前面的那个 <strong>」是标题，其余一律行内。 */
.tip-body > strong:first-child,
.tip-body > b:first-child,
.tip > strong:first-of-type,
.tip > b:first-of-type {
  display: block;
  margin-bottom: 2px;
  font-size: 13.5px;
  font-weight: 600;
}

.tip-body > strong:not(:first-child),
.tip-body > b:not(:first-child),
.tip > strong:not(:first-of-type),
.tip > b:not(:first-of-type) {
  display: inline;
  margin: 0;
}

.tip-body {
  display: block;
  flex: none;
  min-width: 0;
}

.tip p {
  margin: 0 0 4px;
}

.tip p:last-child {
  margin-bottom: 0;
}

.tip code {
  font-size: 12.5px;
}

/* 有图标时给它一个固定位置（支持的浏览器才加左侧留白，不支持的只是图标内联） */
@supports selector(:has(*)) {
  .tip:has(> .tip-icon) {
    padding-left: 41px;
  }

  .tip:has(> .tip-icon) > .tip-icon {
    position: absolute;
    left: 14px;
    top: 11px;
    float: none;
    margin: 0;
  }
}

/* ---------- ② 表格：更矮的行、更小的字 ---------- */
.table-scroll {
  margin: 12px 0;
}

.help-table {
  font-size: 13px;
}

.help-table th {
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 0.2px;
}

.help-table td {
  padding: 8px 12px;
  line-height: 1.55;
}

.help-table td code,
.help-table th code {
  font-size: 12px;
}

/* ---------- ③ 步骤 / 代码块 ---------- */
.steps {
  margin: 12px 0;
}

.steps li {
  padding: 11px 0 11px 44px;
  font-size: 13.5px;
  line-height: 1.65;
}

.steps li::before {
  width: 28px;
  height: 28px;
  font-size: 12px;
  top: 11px;
}

.code-block {
  margin: 10px 0;
  padding: 12px 16px;
  font-size: 12.5px;
  line-height: 1.62;
  border-radius: 9px;
}

/* ---------- ④ FAQ 手风琴 ---------- */
.faq-item {
  margin-bottom: 8px;
  border-radius: 11px;
}

.faq-q {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
}

.faq-item.open .faq-a {
  padding: 0 16px 12px;
}

.faq-a {
  font-size: 13.5px;
  line-height: 1.68;
}

/* ---------- ⑤ 区块与首屏间距 ---------- */
/* ★ 关键：全局 `section { padding: 80px 0 }` 会落到帮助页每个小节上，
   一个 9 节的长页面白扔 1440px 高度。这里清零，只留 margin 当间距。 */
.help-section {
  padding: 0;
  margin-bottom: 46px;
}

.help-section h2 {
  font-size: 24px;
  margin-bottom: 14px;
  padding-bottom: 9px;
}

.help-section h2 .num {
  width: 24px;
  height: 24px;
  font-size: 12.5px;
  border-radius: 7px;
}

.help-section h3 {
  font-size: 15.5px;
  margin: 18px 0 7px;
}

.help-section p {
  font-size: 14px;
  line-height: 1.72;
  margin-bottom: 10px;
}

.page-hero {
  padding: 96px 0 40px;
}

.page-hero h1 {
  margin-bottom: 10px;
}

.content-layout,
.content-layout.no-toc {
  padding: 32px 24px 72px;
}

/* ---------- ⑥ 窄屏：再收一档，确保不横向溢出 ---------- */
@media (max-width: 920px) {
  .tip {
    padding: 10px 13px;
    font-size: 13px;
  }

  @supports selector(:has(*)) {
    .tip:has(> .tip-icon) {
      padding-left: 38px;
    }
  }

  .page-hero {
    padding: 84px 0 32px;
  }

  .help-section {
    margin-bottom: 36px;
  }

  .help-section h2 {
    font-size: 21px;
  }

  .content-layout,
  .content-layout.no-toc {
    padding: 16px 18px 56px;
  }
}

/* ---------- ⑦ 窄屏表格：一行一张卡，去掉格子里的细线 ---------- */
@media (max-width: 920px) {
  .table-scroll {
    margin: 10px 0;
    border: none;
  }

  .help-table thead {
    display: none;
  }

  .help-table tr {
    margin-bottom: 8px;
    padding: 9px 12px;
    border-radius: 10px;
  }

  .help-table td {
    display: block;
    width: auto;
    padding: 1px 0;
    border-bottom: none;
    line-height: 1.5;
  }

  .help-table td:first-child {
    font-weight: 600;
    color: var(--text);
    white-space: normal;
  }
}

/* ---------- ⑧ 介绍页的裸表格（.reg-table）：以前完全没有样式 ----------
   chest.html / sync.html 里的 <div class="reg-table"><table> 一直没人写样式，
   表格直接铺在封面大图上，深色字压在深色画面里基本看不见。
   这里给它一块白玻璃底 + 深色字，横向还能滚。 */
.reg-table {
  margin: 18px 0;
  padding: 2px 14px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 10px 30px rgba(30, 44, 56, 0.10);
  overflow-x: auto;
}

.reg-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.reg-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #4a5a68;
  border-bottom: 1px solid rgba(30, 44, 56, 0.14);
  white-space: nowrap;
}

.reg-table td {
  padding: 9px 12px;
  line-height: 1.6;
  color: #22303c;
  border-bottom: 1px solid rgba(30, 44, 56, 0.08);
  vertical-align: top;
  text-shadow: none;
}

.reg-table tr:last-child td {
  border-bottom: none;
}

.reg-table strong {
  color: #16202a;
}

.reg-table code {
  color: #0f3b57;
  background: rgba(18, 24, 29, 0.06);
  border: 1px solid rgba(18, 24, 29, 0.12);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 12px;
  text-shadow: none;
}

/* 配置表：键 / 默认值 / 说明 三列固定比例，说明别被挤成一条缝 */
.help-table.config-table { table-layout: fixed; width: 100%; }
.help-table.config-table th:nth-child(1), .help-table.config-table td:nth-child(1) { width: 34%; }
.help-table.config-table th:nth-child(2), .help-table.config-table td:nth-child(2) { width: 20%; }
.help-table.config-table th:nth-child(3), .help-table.config-table td:nth-child(3) { width: 46%; }
.help-table.config-table td { overflow-wrap: anywhere; }
@media (max-width: 920px) {
  .help-table.config-table { table-layout: auto; }
  .help-table.config-table td:nth-child(1), .help-table.config-table td:nth-child(2),
  .help-table.config-table td:nth-child(3) { width: auto; }
}