/* ============================================================
   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;
}

The user wants me to rewrite the CSS with a fresh visual identity based on "asymmetric-blocks" style with "flat-solid" effect variant. Let me analyze what I need to change:

1. Colors - fresh palette with bold contrasting blocks
2. Box shadows - none everywhere (flat-solid)
3. Solid background colors only (no gradients)
4. Minimal radius (0-6px)
5. Keep all selectors and layout exactly

Let me look at the original CSS and identify what needs to change:

Original CSS has:
- `.footer a` - transition
- `.footer a:hover` - color accent
- `.footer-copyright` - font-size (keep)
- `.footer-beian` - font-size, line-height, opacity
- `.footer-beian a:hover` - color, text-decoration
- `.footer-beian img` - margin, transition
- `.footer-beian a:hover img` - transform scale
- `.footer-beian li` - white-space
- Media query for footer-beian
- `.form-control:focus, .form-select:focus` - border-color, box-shadow
- `.btn-primary` - background-color, border-color
- `.btn-primary:hover, .btn-primary:focus` - background-color, border-color
- `.input-group-text` - background-color, border-color
- Reduced motion media query
- Grid layout defaults (this is layout, keep the same structure)
- Media queries for responsive

The target style is:
- Asymmetric-blocks: bold contrasting blocks, high contrast borders
- Flat-solid: no box-shadow, solid colors, minimal radius (0-6px)

So I need to:
1. Change color variables referenced: `--color-accent`, `--color-primary`, `--color-bg-muted`, `--color-border`, `--transition-fast`, `--space-xs`
2. Remove box-shadow from `.form-control:focus` (or replace with border-color only)
3. Change border-colors to high contrast
4. Keep radius minimal (if any radius values exist in the original)

Let me look at what variables are referenced but not defined in this file:
- `--color-accent`
- `--color-primary`
- `--color-bg-muted`
- `--color-border`
- `--transition-fast`
- `--space-xs`

Since these are custom properties likely defined in a root, I can update their values... but wait, the instructions say "CSS custom properties (--color-*, --shadow-*) values" CAN change. But since they're not defined in this file, I should be careful. The instructions say I can change custom properties' values, but if they're not defined here, I could either:

1. Keep the var() references (they're not colors themselves, they're references)
2. The instruction says "CSS custom properties (--color-*, --shadow-*) values" can be changed. Since they're not defined in this file's snippet, I can't change their definitions here.

Wait, but the instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must change. But if they're var() references, changing them would alter the code pattern. Let me think...

The instruction says selectors must be preserved exactly. But the declaration values can change. The `var(--color-accent)` is a value. I could replace `var(--color-accent)` with an actual hex color value to create a new palette. But is that allowed? The instruction says "CSS custom properties (--color-*, --shadow-*) values" can change - meaning I can change the values of custom properties. But since they aren't defined here, I need another approach.

Actually, re-reading: "All color values: background, color, border-color, fill, stroke, outline-color" - these need to change. If a color value is `var(--color-accent)`, that's a color reference. I could change it to a different color hex directly. But that changes the use of the custom property.

Hmm, but the instruction says "CSS custom properties (--color-*, --shadow-*) values" are things I MUST change. Since they're not defined in this snippet, maybe I should keep the var() references but... wait, I can't change their values if they're not here.

Actually, I think the safest interpretation: The values in this file that reference var() should be changed to new colors OR I could keep var references but the actual color values in this file (like `#2563eb`, `rgba(59, 130, 246, 0.15)`) need to change.

Let me look at actual color values in this file:
- `rgba(59, 130, 246, 0.15)` - box shadow color
- `#2563eb` - btn-primary hover background
- `var(--color-primary)` - multiple
- `var(--color-accent)` - multiple
- `var(--color-bg-muted)` - input-group-text background
- `var(--color-border)` - input-group-text border

Since `--color-*` variables are referenced, and the instruction says I can change CSS custom property values, but they're not defined here... I think the approach should be:

Option A: Keep var() references but since I can't change their definitions, the visual change would be limited. This might not satisfy "previous attempt didn't change enough."

Option B: Replace var() color references with direct hex colors from a new palette. This changes the visual identity but keeps the same class names/selectors. The instruction says "All color values" must change - replacing a var() with a hex is changing the value.

I think Option B is safer for achieving visible change. Let me use a fresh palette.

New palette for "asymmetric-blocks" + "flat-solid":
- Bold contrasting blocks: each section different background
- High contrast borders
- No shadows
- Minimal radius

Let me pick a palette. Since the target is asymmetric blocks with high contrast, I'll use something bold:

- Primary/accent: A deep orange/burnt sienna like `#d9480f` (orange-900) or `#c2410c`
- Accent for links/hover: `#ea580c` or a contrasting teal `#0f766e`
- Background muted: `#e7e5e4` (stone-200)
- Border: `#292524` (stone-800) for high contrast borders
- Form focus: something like a vivid blue or keep it bold

Actually, let me think about the palette differently. The target is "asymmetric-blocks" with "flat-solid". The key visual changes:
1. High contrast borders
2. No shadows (remove the focus box-shadow)
3. Minimal radius

Fresh palette idea:
- Primary: `#b45309` (amber-700) - warm bold
- Accent: `#7c2d12` (orange-900) - darker for hover
- bg-muted: `#f5f5f4` (stone-100) or `#d6d3d1` (stone-300)
- border: `#1c1917` (stone-900) - high contrast dark borders
- Focus border: `#b45309`

Let me also change:
- `rgba(59, 130, 246, 0.15)` → remove box-shadow entirely, or change border-color
- `#2563eb` → new hover color

For flat-solid:
- box-shadow: none everywhere. The original only has one box-shadow on `.form-control:focus`. I should remove it or set it to none.

For minimal radius:
- The original CSS doesn't seem to have border-radius rules in this snippet. But the instruction says border-radius can change. Since there are no radius values, I don't need to add new ones... Actually wait, I could add border-radius. The instruction says "border-radius (visual rounding only)" CAN change. But it's not in the original. Hmm, adding border-radius would be a new property. The instruction says I MUST change certain things but also lists border-radius as changeable. I think it's fine to add or remove border-radius as part of the visual refresh.

Actually, re-reading: "⚠️ Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette."

So I should make radius changes MORE distinct. But I shouldn't add new declarations that aren't in the original... Well, adding border-radius would change the visual identity. Since the target is "minimal radius (0-6px)", and the original has no explicit radius, I could add `border-radius: 0` or small values to relevant elements like `.btn-primary`, `.input-group-text`, `.form-control:focus`.

Wait, but the original CSS doesn't have `.btn-primary` radius in this snippet. If it's defined elsewhere, changing it here would override. The instruction says I can change border-radius. So I can add border-radius declarations.

But careful: "NEVER CHANGE" section doesn't mention border-radius, so it's safe to change. And "✅ YOU MUST CHANGE" includes border-radius.

Let me also update the transition values. The original has `var(--transition-fast)` for transitions. I could change to a different easing/duration. But it references a custom property. I can replace with a direct transition value like `all 0.15s ease-out` or similar.

For the reduced motion media query, that should stay (it's about accessibility, not visual identity). The animation-duration values are already minimal.

Let me now write the CSS:

```css
.footer a {
    transition: color 0.15s ease-out;
}

.footer a:hover {
    color: #c2410c !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: #9a3412 !important;
    text-decoration: underline !important;
}

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

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

.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: #b45309;
    box-shadow: none;
}

.btn-primary {
    background-color: #b45309;
    border-color: #1c1917;
    border-radius: 4px;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #92400e;
    border-color: #1c1917;
}

.input-group-text {
    background-color: #e7e5e4;
    border-color: #1c1917;
}

/* ============================================
   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 sẽ override các rules này
   ============================================================ */

/* 新闻网格 (默认 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%; }
}
```

Wait, there's a typo in the original: `.footer-beian li` first has a comment `/* Beian */` in the middle. Let me keep that comment.

Also I need to be careful about the original comment `/* 步 骤网格 (默认 4 列) */` - it has a space in "步 骤". I should preserve comments? The instruction doesn't say to preserve comments, but to preserve selectors. Comments aren't selectors. But to be safe, I'll keep the structure similar.

The "other files already used: editorial-magazine+soft-shadows" note means I need to make sure this file's values differ from that style. Since this is "asymmetric-blocks" + "flat-solid", I'm using no shadows, high contrast borders, and a warm orange/amber palette. That's quite different from soft shadows.

Let me also reconsider the color palette. "asymmetric-blocks" suggests bold contrasting blocks. Since this CSS is mostly grid layouts, the actual color changes are limited to footer links, forms, and buttons. I should make those colors bold and contrasting.

Let me choose:
- Primary: `#b45309` (amber-700) — warm bold orange
- Hover: `#7c2d12` (orange-900) — darker
- Accent: `#dc2626`? No,