/* ============================================================
   THEME.CSS v3.0 - 主题主样式
   ============================================================
   匹配 Section 模板的 class 名称
   - CSS Variables 设计令牌
   - 所有 Section 主样式 (布局/背景/排版)
   ============================================================ */

/* ============================================
   1. CSS Variables
   ============================================ */
:root {
    /* 品牌色 */
    --color-primary: #3b82f6;
    --color-primary-dark: #1e3a8a;
    --color-primary-darker: #1e293b;
    --color-accent: #fbbf24;
    --color-accent-dark: #f59e0b;
    --color-success: #16a34a;
    --color-danger: #dc2626;

    /* 中性色 */
    --color-text: #334155;
    --color-text-muted: #64748b;
    --color-text-light: #94a3b8;
    --color-bg: #ffffff;
    --color-bg-soft: #f8fafc;
    --color-bg-muted: #f1f5f9;
    --color-border: #e5e7eb;
    --color-border-soft: #f1f5f9;

    /* 渐变 (Section 背景) */
    --gradient-hero: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    --gradient-deep: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    --gradient-dept: linear-gradient(135deg, #312e81 0%, #4f46e5 100%);
    --gradient-security: linear-gradient(135deg, #1e293b, #0f172a);
    --gradient-mission: linear-gradient(135deg, #1e3a8a, #312e81);
    --gradient-trust: linear-gradient(135deg, #0f172a, #1e3a8a);
    --gradient-cta: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    --gradient-accent: linear-gradient(135deg, #fbbf24, #f59e0b);
    --gradient-icon: linear-gradient(135deg, #3b82f6, #1e3a8a);

    /* 玻璃效果 */
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-blur: blur(10px);

    /* 阴影 */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 15px 35px rgba(0, 0, 0, 0.12);
    --shadow-primary: 0 12px 30px rgba(59, 130, 246, 0.15);
    --shadow-accent: 0 10px 25px rgba(251, 191, 36, 0.15);

    /* 圆角 */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 30px;

    /* 间距 */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 5rem;

    /* 过渡 */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================
   2. Base
   ============================================ */
:where(body) {
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

:where(img) {
    max-width: 100%;
    height: auto;
}

/* ============================================
   3. 通用工具
   ============================================ */
.bg-glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
}

.icon-circle {
    width: 60px;
    height: 60px;
    background: var(--gradient-icon);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* ============================================
   4. Header (HeaderSection)
   ============================================ */
.header {
    background: #fff;
    z-index: 1030;
}

.header .navbar-brand img {
    transition: transform var(--transition-fast);
}

.header .navbar-brand:hover img {
    transform: scale(1.05);
}

.header .nav-link {
    font-weight: 500;
    color: var(--color-text);
    transition: color var(--transition-fast);
}

.header .nav-link:hover {
    color: var(--color-primary);
}

/* ============================================
   5. Hero (HeroSection)
   ============================================ */
.hero-section {
    min-height: 480px;
    background: var(--gradient-hero);
    color: #fff;
    padding-block: var(--space-2xl);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 0;
    pointer-events: none;
}

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

.hero-section h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}

.hero-section h2 {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    opacity: 0.9;
    margin-bottom: var(--space-md);

    font-weight: 500;
}

.hero-section .lead {
    font-size: 1.1rem;
    max-width: 700px;
    margin-inline: auto;
    opacity: 0.95;
}

.hero-buttons {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
    margin-block-start: var(--space-md);
}

/* ============================================
   6. Notice Bar (NoticeBarSection)
   ============================================ */
.notice-bar {
    animation: noticeSlideIn 0.5s ease-out;
}

.notice-bar a {
    transition: opacity var(--transition-fast);
}

.notice-bar a:hover {
    opacity: 0.85;
}

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

/* ============================================
   7. Breadcrumb (BreadcrumbSection)
   ============================================ */
.breadcrumb-nav {
    background: var(--color-bg-muted);
}

.breadcrumb-nav .breadcrumb-item a {
    transition: color var(--transition-fast);
}

.breadcrumb-nav .breadcrumb-item a:hover {
    color: var(--color-primary-dark) !important;
}

/* ============================================
   8. Why Us (WhyUsSection)
   ============================================ */
.why-us-section {
    background: var(--color-bg-soft);
}

.whyus-card {
    background: #fff;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    transition: all var(--transition-base);
    height: 100%;
}

.whyus-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   9. About (AboutSection)
   ============================================ */
.about-section {
    background: var(--gradient-deep);
    color: #fff;
}

.about-img-wrap {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.about-img-wrap img {
    transition: transform var(--transition-slow);
}

.about-img-wrap:hover img {
    transform: scale(1.05);
}

.about-card {
    transition: all var(--transition-base);
}

.about-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.12);
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* ============================================
   10. Departments (DepartmentsSection)
   ============================================ */
.departments-section {
    background: var(--gradient-dept);
    color: #fff;
}

.departments-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.departments-subtitle {
    font-size: 1.05rem;
    max-width: 800px;
    margin-inline: auto;
    color: rgba(255, 255, 255, 0.85);
}

.departments-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-block-start: var(--space-lg);
}

@media (min-width: 768px) {
    .departments-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.d-item {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
}

.d-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: var(--space-xs);
}

.d-num span {
    color: #fff;
    font-size: 1.1rem;
    margin-inline-start: var(--space-xs);
}

.d-image {
    margin-bottom: var(--space-sm);
}

.d-image img {
    width: 100%;
    border-radius: var(--radius-md);
}

/* ============================================
   11. Security Network (SecuritySection)
   ============================================ */
.security-section {
    background: var(--gradient-security);
    color: #fff;
}

.security-network {
    position: relative;
    max-width: 800px;
    margin: var(--space-xl) auto;
    min-height: 400px;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
}

@media (min-width: 768px) {
    .security-network {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, auto);
    }

    .core-node        { grid-column: 2; grid-row: 2; }
    .node-top-left    { grid-column: 1; grid-row: 1; }
    .node-top-right   { grid-column: 3; grid-row: 1; }
    .node-bottom-left { grid-column: 1; grid-row: 3; }
    .node-bottom-right{ grid-column: 3; grid-row: 3; }
}

.core-node {
    background: var(--gradient-accent);
    border-radius: 50%;
    width: 140px;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    color: var(--color-primary-darker);
    font-weight: 700;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.4);
}

.node {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    text-align: center;
    color: #fff;
    transition: all var(--transition-base);
}

.node:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.12);
}

.node-title {
    font-weight: 600;
    color: var(--color-accent);
    margin-block: var(--space-xs);
}

@media (max-width: 767.98px) {
    .core-node { width: 120px; height: 120px; }
}

/* ============================================
   12. Honor (HonorSection)
   ============================================ */
.honor-section {
    background: var(--color-bg-soft);
}

.honor-row {
    padding-block: var(--space-sm);
}

.honor-text-card {
    padding: var(--space-md);
    background: #fff;
    border-radius: var(--radius-md);
    border-inline-start: 4px solid var(--color-primary);
    transition: all var(--transition-base);
}

.honor-text-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   13. Mission (MissionSection)
   ============================================ */
.mission-section {
    background: var(--gradient-mission);
    padding-block: var(--space-2xl);
    color: #fff;
}

.mission-list li {
    margin-bottom: var(--space-sm);
    color: #e2e8f0;
}

/* ============================================
   14. Stats (StatsSection)
   ============================================ */
.stats-section {
    background: #fff;
}

.stats-card {
    transition: all var(--transition-base);
    background: var(--color-bg-soft);
}

.stats-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    background: linear-gradient(135deg, #fff 0%, #f0f7ff 100%);
}

.stats-card h3 {
    font-variant-numeric: tabular-nums;
    color: var(--color-primary-darker);
}

/* ============================================
   15. News (NewsSection)
   ============================================ */
.news-section {
    background: var(--color-bg-soft);
}

.news-card {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.news-img-wrap {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.news-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.news-card:hover .news-img-wrap img {
    transform: scale(1.08);
}

/* ============================================
   16. Matches (MatchesSection)
   ============================================ */
.matches-section {
    background: var(--color-bg-soft);
}

.match-card {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.match-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.match-card .team {
    min-width: 0;
}

.match-card .team .small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-card .score {
    font-variant-numeric: tabular-nums;
    color: var(--color-primary-darker);
}

/* ============================================
   17. Trust (TrustSection)
   ============================================ */
.trust-section {
    background: var(--gradient-trust);
    color: #fff;
}

.trust-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-md);
    padding: var(--space-lg) var(--space-sm);
    height: 100%;
    transition: all var(--transition-base);
}

.trust-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.12);
}

/* ============================================
   18. Partners (PartnersSection)
   ============================================ */
.partners-section {
    background: var(--color-bg-soft);
}

.partner-card {
    transition: all var(--transition-base);
}

.partner-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   19. Testimonials (TestimonialsSection)
   ============================================ */
.testimonials-section {
    background: #fff;
}

.testimonial-card {
    transition: all var(--transition-base);
    border-block-start: 4px solid transparent;
}

.testimonial-card:hover {
    border-block-start-color: var(--color-accent);
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   20. C
TA Banner (CtaBannerSection)
   ============================================ */
.cta-banner-section {
    background: var(--gradient-cta);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.cta-banner-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.cta-banner-section > .container {
    position: relative;
    z-index: 1;
}

.cta-banner-section .btn-warning {
    box-shadow: var(--shadow-accent);
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================
   21. Footer (FooterSection)
   ============================================ */
.footer {
    font-size: 0.9rem;
    color: #cbd5e1;
}

让我们一步步来设计新的CSS。

1.  **分析请求:**
    *   **模式:** 🛡️ 保守模式 (布局结构/类名不能变，只能改变视觉/颜色/阴影)。
    *   **目标风格:** `horizontal-strips` (水平条纹: 全宽部分，不同的垂直内边距，交替背景色)。
    *   **效果变体:** `glow-effects` (发光效果: 发光阴影，悬停光晕，中等圆角，微妙脉冲动画)。
    *   **输入文件部分:** `#块2/2` - 包含 `.footer` 样式、表单样式、`prefers-reduced-motion`，以及大量网格布局定义 (`news-grid`, `feature-list` 等)。

2.  **识别视觉元素（可更改与不可更改）：**
    *   **颜色（必须更改）：** 页脚链接颜色、悬停状态、表单控件焦点 (`border-color`, `box-shadow`)、主要按钮 (`background-color`, `border-color`)、输入框组文本背景/边框。
    *   **阴影（必须更改）：** 表单控件焦点阴影 (`box-shadow`)。
    *   **过渡/动画（必须更改）：** 页脚链接、图片过渡，`prefers-reduced-motion`。
    *   *自我修正/细化:* 我需要检查这个块中是否有任何 CSS 变量（`--color-*`, `--shadow-*`, `--transition-*`）被定义或使用。如果有，我需要更改它们的*值*（因为不允许更改变量*名*）。等等，我的指示是：“CSS custom properties (--color-*, --shadow-*) values” *必须*更改。如果这个块使用了其他文件定义的变量，我无法更改实际的定义，但可以更改这个块中特定选择器的使用方式，或者添加新的覆盖规则。但是，等等，这个块确实使用了像 `var(--color-accent)`, `var(--color-primary)`, `var(--color-bg-muted)`, `var(--color-border)`, `var(--transition-fast)`, `var(--space-xs)` 这样的变量。这些变量是在 *这个* 文件中定义的吗？不是，它们是在 `assets/css/theme.css` 中其他地方定义的（我只有这个块的内容）。由于我不能更改变量定义（它们在其他地方），我将为这个块中的特定选择器编写覆盖规则，以应用新的调色板，或者使用内联值来覆盖变量。但等等，更改 CSS 变量的值是在“允许更改”列表中的。如果我在这个块中*重新声明* `--color-accent`，我应该能够更改它。但是，等等，`CSS custom properties (--color-*, --shadow-*) values` 在“必须更改”列表中。我将在这个块的开头添加一个 `:root` 覆盖块（或使用 `body` 或类似选择器）来本地更改这些变量，确保影响整个块的范围。这是最干净的方法。
    *   *布局检查（不得更改）：* `display`, `grid-template-columns`, `gap`, `max-width`, `margin`, `flex-direction`, `position`, `width`, `height`, `padding`, `font-size`, `line-height`, `white-space` 等。所有这些都必须保持不变。

3.  **定义新的调色板（水平条纹 + 发光效果）：**
    *   *主题:* 水平条纹（交替的浅色/深色背景）+ 发光效果（发光的强调色，柔和阴影）。
    *   *主强调色 (Accent):* 一种充满活力的青绿色/蓝绿色，用于发光效果。`#06b6d4` (Cyan-500) 或 `#14b8a6` (Teal-500)。我们使用 `#0d9488` (Teal-600) 作为基础强调色，使用 `#14b8a6` (Teal-500) 用于发光。
    *   *主要按钮 (Primary):* 深靛蓝/紫色。`#6366f1` (Indigo-500)。
    *   *主要按钮悬停:* `#4f46e5` (Indigo-600)。
    *   *表单控件焦点边框:* 强调色 (`#14b8a6`)。
    *   *表单控件焦点阴影:* 发光强调色。`0 0 0 0.2rem rgba(20, 184, 166, 0.25)`。
    *   *页脚链接悬停:* 强调色 (`#14b8a6`)。
    *   *输入框组文本背景:* 柔和冷灰色。`#f1f5f9` (Slate-100)。
    *   *输入框组文本边框:* `#cbd5e1` (Slate-300)。

4.  **逐节重写CSS：**
    *   **CSS变量覆盖（块作用域）：**
        我需要添加一个 `:root` 或 `body` 选择器，或者直接针对使用 `var(--...)` 的特定类。等等，指示说“所有颜色值: background, color, border-color... CSS custom properties values”。我可以重新声明 `--color-accent`, `--color-primary`, `--color-bg-muted`, `--color-border`, `--transition-fast`, `--space-xs`。但是，等等，`--space-xs` 是一个间距值。我不能更改间距（padding/margin ±20% 限制）。如果我更改 `--space-xs`，我可能会破坏布局。所以，我必须非常小心。我将只重新声明颜色变量和过渡变量，以避免影响布局间距。
        我们这样做：
        ```css
        /* 块作用域的视觉覆盖 */
        .footer a,
        .btn-primary,
        .form-control:focus { --color-accent: #14b8a6; --color-primary: #6366f1; --color-bg-muted: #f8fafc; --color-border: #cbd5e1; --transition-fast: 0.2s ease; }
        ```
        等等，在 `:root` 或包含块上设置它们更好。但既然我不能更改其他文件，我会假设这个块中的选择器会处理它。实际上，为这个块添加一个专用的 `:root` 覆盖是最安全的，这样可以确保应用新的颜色。
        ```css
        :root {
            --glow-accent: #14b8a6;
            --glow-accent-dark: #0f766e;
            --glow-primary: #6366f1;
            --glow-primary-dark: #4f46e5;
            --glow-bg-muted: #f8fafc;
            --glow-border: #cbd5e1;
            --glow-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        ```
    *   **页脚链接:**
        *   过渡: `transition: color var(--glow-transition);`
        *   悬停: `color: var(--glow-accent) !important;`
        *   版权/备案字体大小: 不变 (`font-size: 0.85rem`, `0.8rem`)。等等，排版不能变。
        *   备案悬停: `color: var(--glow-accent) !important;` + `text-decoration: underline !important;`
        *   备案图片过渡: `transition: transform var(--glow-transition);`
        *   悬停图片: `transform: scale(1.2);` (不变)。
    *   **表单 (Login/Signup/Contact):**
        *   `.form-control:focus, .form-select:focus`:
            *   `border-color: var(--glow-accent);`
            *   `box-shadow: 0 0 0 0.25rem rgba(20, 184, 166, 0.25);` (发光效果)
        *   `.btn-primary`:
            *   `background-color: var(--glow-primary);`
            *   `border-color: var(--glow-primary);`
            *   悬停/聚焦: `background-color: var(--glow-primary-dark); border-color: var(--glow-primary-dark);`
        *   `.input-group-text`:
            *   `background-color: var(--glow-bg-muted);`
            *   `border-color: var(--glow-border);`
    *   **Reduced Motion:**
        *   将 `animation-duration` 和 `transition-duration` 更改为 `0.05s` 或保留 `0.01ms`。等等，`0.01ms` 是有效的。我会保留 `0.01ms`，但让它们成为 `!important`。等等，我不能更改 `!important` 的存在，但可以更改值。我会保留 `0.01ms`。
        *   等等，`prefers-reduced-motion` 块中的原始值是 `0.01ms !important`。我会保留完全相同的结构。
    *   **网格布局默认值:**
        *   这些都是布局规则（`display: grid`, `grid-template-columns`, `gap` 等）。根据指示，这些**不能更改**。
        *   等等，有没有*任何*颜色或阴影值？没有。它们都是纯布局规则。所以我逐字输出它们。
    *   **响应式默认值:**
        *   同样是布局规则。逐字输出。

5.  **细化输出：**
    *   确保所有选择器完全匹配。
    *   确保布局属性（`display`, `grid-template-columns`, `gap`, `margin`, `padding`, `max-width`, `font-size`, `line-height`, `white-space`, `flex-direction` 等）与原始输入完全匹配。
    *   只更改颜色、阴影、过渡和圆角。
    *   等等，`border-radius` 呢？在原始输入中没有 `border-radius`。所以我不需要更改它。
    *   等等，`opacity` 呢？`.footer-beian` 有 `opacity: 0.85`。我可以更改它，但“必须更改”列表是针对所有视觉属性的。我会把它提高到 `0.9` 或类似的值。我们保持 `0.85` 不变，因为指示说“±20% maximum”。`0.85` 符合要求。或者完全更改它，比如 `opacity: 0.9`。我们把它更改为 `opacity: 0.9`。
    *   让我们仔细检查原始 CSS 中是否有任何其他视觉属性。
        *   `.footer-beian img` 有 `margin-inline-end: 4px`。这是边距，不能改。
        *   `box-shadow` 在 `.form-control:focus` 中。已更改。
        *   `text-shadow`？没有。
        *   `filter`？没有。
        *   `backdrop-filter`？没有。
        *   `outline`？没有。
        *   `caret-color`？没有。
        *   `accent-color`？没有。

6.  **起草 CSS 输出：**
    为了严格遵守“CSS custom properties values”的更改，我将定义块级变量，并用它们替换内联值。

    ```css
    /* 页脚链接和悬停，使用新的发光强调色 */
    .footer a {
        transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .footer a:hover {
        color: #14b8a6 !important;
    }

    .footer-copyright {
        font-size: 0.85rem;
    }

    /* Beian */
    .footer-beian {
        font-size: 0.8rem;
        line-height: 1.8;
        opacity: 0.9;
    }

    .footer-beian a:hover {
        color: #14b8a6 !important;
        text-decoration: underline !important;
    }

    .footer-beian img {
        margin-inline-end: 4px;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .footer-beian a:hover img {
        transform: scale(1.2);
    }

    .footer-beian li {
        white-space: nowrap;
    }

    @media (max-width: 575.98px) {
        .footer-beian ul {
            flex-direction: column;
            gap: var(--space-xs) !important;
        }

        .footer-beian li {
            white-space: normal;
            text-align: center;
        }
    }

    /* ============================================
       22. Form (Login/Signup/Contact)
       ============================================ */
    .form-control:focus,
    .form-select:focus {
        border-color: #14b8a6;
        box-shadow: 0 0 0 0.25rem rgba(20, 184, 166, 0.25);
    }

    .btn-primary {
        background-color: #6366f1;
        border-color: #6366f1;
    }

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: #4f46e5;
        border-color: #4f46e5;
    }

    .input-group-text {
        background-color: #f8fafc;
        border-color: #cbd5e1;
    }

    /* ============================================
       23. Reduced Motion
       ============================================ */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* ============================================================
       Grid Layout Defaults (CSS-Variant-Ready)
       CSSVariantEngine 会覆盖这些规则
       ============================================================ */

    /* 新闻网格 (默认 3 列) */
    .news-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    /* 功能特性列表 (默认 3 列) */
    .feature-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    /* 用户评价 (默认 3 列) */
    .testimonial-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    /* 合作伙伴 (默认 4 列) */
    .partner-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        align-items: center;
    }

    /* 数据统计 (默认 4 列) */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        text-align: center;
    }

    /* FAQ 列表 (默认单列居中) */
    .faq-list {
        max-width: 820px;
        margin: 0 auto;
    }

    /* Hero 内容 (默认居中) */
    .hero-content {
        text-align: center;
        max-width: 800px;
        margin: 0 auto;
    }

    /* Hero 分割布局 (左文右图) */
    .hero-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: center;
    }
    .hero-split-text { }
    .hero-split-img { text-align: center; }

    /* CTA 内容 (默认居中) */
    .cta-inner {
        text-align: center;
        max-width: 800px;
        margin: 0 auto;
    }

    /* 作者团队 (默认 4 列) */
    .authors-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }

    /* 联系渠道 (默认 3 列) */
    .channels-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    /* 文章列表 (默认 2 列) */
    .post-list-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* 相关文章 (默认 3 列) */
    .related-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    /* 赛事列表 (默认 3 列) */
    .matches-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    /* 步骤网格 (默认 4 列) */
    .steps-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }

    /* 二维码网格 (默认 3 列) */
    .qr-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        justify-items: center;
    }

    /* 荣誉列表 (默认 2 列交替) */
    .honor-list {
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }
    .honor-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: center;
    }
    .honor-row-reverse {
        direction: rtl;
    }
    .honor-row-reverse > * {
        direction: ltr;
    }

    /* ============================================================
       Responsive Defaults
       ============================================================ */
    @media (max-width: 1024px) {
        .news-grid,
        .feature-list,
        .channels-grid,
        .testimonial-list { grid-template-columns: repeat(2, 1fr); }

        .partner-grid,
        .stats-grid,
        .authors-grid { grid-template-columns: repeat(2, 1fr); }

        .matches-grid { grid-template-columns: repeat(2, 1fr); }
        .steps-grid { grid-template-columns: repeat(2, 1fr); }

        .hero-split { grid-template-columns: 1fr; }
        .honor-row { grid-template-columns: 1fr; }
        .honor-row-reverse { direction: ltr; }
    }

    @media (max-width: 640px) {
        .news-grid,
        .feature-list,
        .testimonial-list,
        .channels-grid,
        .post-list-grid,
        .related-grid,
        .authors-grid,
        .matches-grid { grid-template-columns: 1fr; }

        .partner-grid,
        .stats-grid { grid-template-columns: repeat(2, 1fr); }

        .steps-grid { grid-template-columns: 1fr; }
        .qr-grid { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; }

        .faq-list { max-width: 100%; }
    }
    ```

7.  **根据约束进行审查:**
    *   **视觉刷新:** 是的，颜色从蓝色/蓝绿色调变为青绿色/靛蓝色调。阴影更新为发光效果。过渡更平滑。
    *   **布局不变:** 所有 `display`, `grid-template-columns`, `gap`, `margin`, `padding`, `font-size`, `line-height`, `white-space`, `flex-direction`, `max-width` 都与原始输入完全相同。
    *   **选择器不变:** 每个类名、ID、伪类、属性选择器、组合子和选择器列表都与原始输入完全相同。
    *   **目标风格:** 水平条纹（这个块本身没有背景，但颜色变量已准备好与条纹一起使用）。等等，我是否需要为“horizontal-strips”添加背景颜色？输入文件没有指定背景颜色。它是一个网格定义文件。所以我*不能*添加背景颜色，因为那会改变视觉布局。等等，“horizontal-strips”布局模式说“Alternating background colors per strip”。既然这个块没有定义背景颜色，我不能添加它们，因为那会改变视觉样式。我将只关注颜色/阴影/过渡。为变量添加 `:root` 覆盖足以满足“CSS-Variant-Ready”的要求。
    *   **效果变体:** 发光效果。是的，`box-shadow` 使用了青绿色 (`rgba(20, 184, 166, 0.25)`)，这创造了一个漂亮的发光外观。`transition` 使用了 `cubic-bezier`，感觉更现代。

8.  **最终代码润色:**
    *   删除任何尾随空格。
    *   确保没有添加像 `` 这样的注释。只输出纯 CSS。
    *   双重检查“必须更改”列表：颜色、盒子阴影、文本阴影、边框半径、渐变、过渡、滤镜、不透明度、轮廓、caret-color、强调色、CSS 自定义属性。
        *   颜色：已更改。
        *   盒子阴影：已更改。
        *   文本阴影：原始没有。保持不变。
        *   边框半径：原始没有。保持不变。
        *   渐变：原始没有。保持不变。
        *   过渡：已更改。
        *   滤镜：原始没有。保持不变。
        *   不透明度：`.footer-beian` 从 `0.85` 更改为 `0.9`。（在 ±20% 范围内：0.85 * 1.2 = 1.02，0.85 * 0.8 = 0.68。0.9 在此范围内）。
        *   轮廓：原始没有。保持不变。
        *   caret-color：原始没有。保持不变。
        *   强调色：原始没有。保持不变。
        *   CSS 自定义属性：我没有显式使用 `--color-accent: #14b8a6;` 重新声明变量，而是直接内联使用了十六进制代码。这样更安全，可以避免干扰其他块的 CSS 变量。等等，指示说“CSS custom properties (--color-*, --shadow-*) values”必须更改。通过在整个代码中使用 `#14b8a6` 而不是 `var(--color-accent)`，我有效地覆盖了它们的使用。为了明确更改 CSS 自定义属性*值*，我应该添加一个 `:root` 块来重新声明它们。这样做。