/* ============================================================
   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 while keeping all selectors and layout properties exactly the same. The target style is "sidebar-classic" with "tight-rhythm" variant.

Key requirements:
1. Keep ALL selectors exactly as-is
2. Keep ALL layout properties (display, position, grid-template-columns, width, height, padding, margin, etc.)
3. Change colors, shadows, border-radius, transitions, gradients
4. Use a fresh palette that differs from previous attempts
5. Small border-radius (2-6px) for tight-rhythm
6. Subtle shadows or none
7. Compact spacing feel

Let me analyze the original CSS:

- `.footer a` - transition color
- `.footer a:hover` - color accent
- `.footer-copyright` - font-size
- `.footer-beian` - font-size, line-height, opacity
- `.footer-beian a:hover` - color, text-decoration
- `.footer-beian img` - margin-inline-end, transition
- `.footer-beian a:hover img` - transform scale
- `.footer-beian li` - white-space
- `@media (max-width: 575.98px)` - footer-beian ul flex-direction, gap; li white-space, text-align
- `.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
- `@media (prefers-reduced-motion: reduce)` - animation/transition durations
- Grid layout defaults - various grid classes with display, grid-template-columns, gap
- Responsive defaults - media queries with grid-template-columns changes

The grid section is mostly layout. I need to preserve grid-template-columns, gap, etc. But I can add colors/shadows/radius to these if I want, though it's better to keep changes minimal where there are no visual properties to change.

Since the file doesn't have many colors to change, I need to be creative. The CSS variables referenced (--color-accent, --color-primary, --color-bg-muted, --color-border, --transition-fast, --space-xs) are defined elsewhere. I can't change those variable definitions since they're not in this file. But I can change the values used in this file.

Wait, the instructions say "CSS custom properties (--color-*, --shadow-*) values" can be changed. But if they're defined in another file, changing them here would only matter if they're redefined in this file. Since they're not defined in this file, I can only change how they're used or add new rules.

Hmm, but the task says to refresh the visual identity. Since this file references variables like var(--color-primary), var(--color-accent), etc., I can't change those variable values directly. However, I can:

1. Change the hardcoded color values in this file (e.g., `rgba(59, 130, 246, 0.15)`, `#2563eb`, `rgba(59, 130, 246, 0.15)`)
2. Add new visual properties like border-radius, box-shadow, etc. to existing selectors
3. Modify transitions

But I need to be careful not to change layout. Adding border-radius is fine. Adding subtle shadows is fine.

Given the target style "sidebar-classic" with "tight-rhythm":
- Colors: sidebar darker (#252e3a), main lighter, functional accent
- Compact spacing (but padding/margin can only change ±20%... actually the instructions say keep similar values ±20% maximum, so I should avoid changing padding/margin much)
- Small border-radius (2-6px)
- Subtle shadows or none

Since this file doesn't have a grid-template-columns with 280px 1fr or 1fr 320px, the "sidebar-classic" layout pattern probably doesn't apply here. The grid defaults use 3-column, 4-column etc. But I can still apply the color palette: darker tones for secondary elements, functional accent.

Let me think about a fresh palette. Since previous attempts used colors that "didn't change enough", I'll go with something distinctly different. Let's use a warm/earthy or cool/teal palette.

Original colors in file:
- rgba(59, 130, 246, 0.15) - blue tint for focus shadow
- #2563eb - blue for btn-primary hover
- var(--color-primary), var(--color-accent), etc. - these are variables

Since I can't change the variables, but the file uses them, I should perhaps add new declarations that override or supplement. But I shouldn't change the structure.

Actually, I can change the hardcoded hex values and rgba values to a new palette. Let's go with a teal/emerald + warm accent palette:

- Focus shadow: rgba(13, 148, 136, 0.15) (teal-600)
- btn-primary hover: #0f766e (teal-700)
- Or use a plum/burgundy palette: #7c3aed (violet) or #be123c (rose)

Let me pick something fresh: "sidebar-classic" suggests a classic sidebar look - maybe deep navy/charcoal sidebars with lighter content. The accent could be a warm amber/gold for classic feel, or a muted teal.

Let me go with:
- Primary accent: a deep teal `#0f766e` (teal-700) or classic blue `#1e40af`
- Since the original was blue (59, 130, 246 = blue-500), let's shift to a violet/purple or teal to be distinct.

Fresh palette idea:
- Accent: `#c2410c` (orange-700) - warm and distinct
- Focus shadow: rgba(194, 65, 12, 0.12)
- Hover: `#9a3412` (orange-800)
- Input group bg: a warm gray
- Border: warm gray

Or a more "classic sidebar" feel could be:
- Deep slate sidebar: #252e3a as mentioned
- Main area: #f8fafc
- Accent: #d97706 (amber-600)

Since this file is mostly the footer, forms, and grid defaults, I'll apply:

1. `.footer a` - keep transition but change timing/duration
2. `.footer a:hover` - can't change the color var, but I can add text-shadow or something
3. `.footer-beian` - opacity adjustment, add color
4. `.footer-beian a:hover` - keep color var, change text-decoration style
5. `.footer-beian img` - margin stays, transition changes
6. `.form-control:focus, .form-select:focus` - change border-color, box-shadow to new color
7. `.btn-primary` - add box-shadow or border-radius
8. `.btn-primary:hover` - change background to new hex
9. `.input-group-text` - add background/border colors
10. Reduced motion - keep
11. Grid defaults - add subtle border-radius, background, shadow to grids? Actually, modifying grid classes with visual properties is allowed since it doesn't affect layout.

Wait, but adding background colors to grid containers would change visual identity significantly. Let me add subtle visual polish to the grid containers: background, border-radius, padding (but padding within ±20% of original? The original doesn't have padding, so if I add padding from 0, that's technically not "keep similar values" - but the instruction says padding/margin keep similar values ±20% maximum. Adding padding where there was none could change layout. I should avoid adding padding/margin to elements that don't have them, or only add very small padding. Actually, adding padding to a grid container changes the layout of the children. Hmm. The instruction says "padding, margin (keep similar values, ±20% maximum)" - meaning if original has 1.5rem gap, I can change to 1.25rem-1.8rem. But adding padding to something that had 0 padding would be adding a new value, which changes layout. To be safe, I'll avoid adding padding/margin to elements that don't have them.

But I can add:
- border-radius (visual only, doesn't change layout box since it's just rounding)
- background-color (doesn't change layout)
- box-shadow (doesn't change layout)
- border-color (doesn't change layout as long as border-width stays the same)
- outline, opacity, transitions, etc.

Important note: `border-radius` is allowed. `box-shadow` doesn't affect layout. `background-color` doesn't affect layout. So I can add these freely.

Let me rewrite the CSS:

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

.footer a:hover {
    color: var(--color-accent) !important;
    text-shadow: 0 1px 2px rgba(37, 46, 58, 0.2);
}

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

/* Beian */
.footer-beian {
    font-size: 0.8rem;
    line-height: 1.8;
    opacity: 0.85;
    color: #94a3b8;
}

.footer-beian a:hover {
    color: var(--color-accent) !important;
    text-decoration: underline dotted !important;
    text-underline-offset: 3px;
}

.footer-beian img {
    margin-inline-end: 4px;
    transition: transform 0.25s ease, opacity 0.25s ease;
    border-radius: 3px;
}

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

.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: #0f766e;
    box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.12);
    border-radius: 4px;
}

.btn-primary {
    background-color: #0f766e;
    border-color: #0f766e;
    box-shadow: 0 2px 4px rgba(15, 118, 110, 0.2);
    border-radius: 4px;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #115e59;
    border-color: #115e59;
    box-shadow: 0 4px 8px rgba(15, 118, 110, 0.25);
}

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

/* ============================================
   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, I need to be more aggressive in changing the visual identity. The instructions say "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette."

So let me go with a distinctly different palette. Original was blue-based. Let's go with:

- Deep plum/violet accent: `#6d28d9` (violet-700) or `#7e22ce` (purple-700)
- Hover: `#5b21b6` (violet-800)
- Focus ring: rgba(109, 40, 217, 0.12)

Or a warm amber/bronze:
- Accent: `#b45309` (amber-700)
- Hover: `#92400e` (amber-800)
- Focus ring: rgba(180, 83, 9, 0.15)

Actually, "sidebar-classic" with "#252e3a sidebar darker" suggests a slate/charcoal look. The accent should be functional. Let me pair slate with a warm amber or a muted teal.

Let me use:
- Sidebar dark: #252e3a (given in prompt)
-