/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

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

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

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

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

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

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

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

The user wants me to refresh the visual identity of the given CSS while keeping all selectors and layout exactly as-is. Let me analyze the original CSS:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}
```

This is a small media query block. The layout/text-align, font-size, and padding are all things I shouldn't change per the constraints:
- text-align: keep (it's in the layout/protected list: text-align, vertical-align)
- font-size: keep (protected typography)
- padding: keep within ±20% (the padding uses var(--space-md), which is a CSS custom property... wait, the custom property values can change! But the padding property itself is in the protected list. Hmm, the instructions say "padding, margin (keep similar values, ±20% maximum)". So I should keep the padding value. Since it references a custom property, I could change the custom property value, but that variable might be defined elsewhere. The instruction says CSS custom properties (--color-*, --shadow-*) values can change. --space-md is a spacing variable, not a color/shadow variable. To be safe, I should keep padding as-is or adjust within ±20%. But the safest is to keep it exactly since it's var(--space-md).

Wait, the constraint says I can change colors, shadows, radius, transitions, gradients, filter, backdrop-filter, opacity, outline, border-color, border-style, caret-color, accent-color, and CSS custom properties (--color-*, --shadow-*) values.

So the only things I can change in this block:
- No colors present
- No shadows present
- No radius present
- No transitions present
- No gradients present

Hmm. The original CSS is purely layout/typography in a media query. There's almost nothing visual to change. But the task requires me to refresh it. I need to make visual changes without breaking layout.

Let me look closely at what I can change:
1. `text-align: center;` — protected (text-align is protected)
2. `font-size: 0.85rem;` — protected (font-size)
3. `padding: var(--space-md) !important;` — padding protected, and --space-md is a spacing variable, not color/shadow

So there's literally nothing in this snippet that is in my "change" list. But the task says I must output rewritten CSS. What can I add? I can add new declarations that don't exist yet? The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

Hmm. Adding new declarations like `background-color`, `box-shadow`, `border-radius`, `transition` to these selectors would be adding to them, which changes the visual appearance while keeping layout. The instruction says "Only change colors, shadows, radius, transitions, gradients" — adding them could be considered a change. But adding declarations to selectors in a media query might be within the spirit.

Alternatively, I could consider that the media query conditions are protected, but the values inside can change. Since there are no visual values, perhaps I should add visual properties that align with the editorial-magazine style and soft-shadows variant.

Let me think about the target style:
- Editorial-magazine: cream/beige backgrounds (#f5f1e8), ink black text (#1a1a1a), deep red accent (#c44536) or olive (#6b705c)
- Soft-shadows: multi-layer soft shadows, large border-radius, smooth transitions

Given the selectors:
1. `.app-hero-section .row .col-lg-7` — a hero section column. I could add color, maybe a text color. But it already exists elsewhere probably. Adding `color: #1a1a1a;` would be a color change.
2. `.app-hero-section .badge.bg-warning` — a warning badge. I could add a background color, box-shadow, border-radius, transition. The class `bg-warning` is a Bootstrap class; I must not change class names. I can override the background with a custom color. Warning is typically yellow; editorial might use deep red or olive. But changing `bg-warning` to a different color would affect the badge's meaning (warning). The instruction says single accent color (deep red or olive). I could make it olive or deep red. But careful: changing the background of a `bg-warning` badge might be semantically odd. Still, visually refreshing.

Actually, the target style says "Single accent color (deep red #c44536 or olive #6b705c)". So I should use these colors.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — padding is already there. I could add background-color, border-radius, box-shadow, transition to give cards an editorial soft-shadow look.

But wait — I must be careful. The original CSS has no visual declarations. If I add background-color, box-shadow, etc., I'm changing the visual appearance meaningfully. Is that allowed? The instructions say "You MUST change (visual identity only): All color values, background, color, border-color, fill, stroke, outline-color; box-shadow...". In the original CSS, there are no such values. So I can't change what doesn't exist. But the task says "Refresh this CSS visually" — adding visual declarations is the only way.

However, the instruction also says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Adding new declarations preserves selectors. It doesn't change layout. So it should be acceptable.

Let me also consider whether I should keep `padding: var(--space-md) !important;` — yes, keep it. But maybe within ±20%? Since it's a variable, I have no idea what --space-md resolves to. Keep it exactly.

I could add:
- For `.app-hero-section .badge.bg-warning`: 
  - `background-color: #c44536;` (deep red) — but wait, `bg-warning` in Bootstrap uses `background-color: #ffc107` with a `.bg-warning` class. My CSS with same specificity or higher? `.app-hero-section .badge.bg-warning` has higher specificity than Bootstrap's `.bg-warning`, so it would override.
  - `color: #f5f1e8;` (cream text)
  - `border-radius: 12px;`
  - `box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);`
  - `transition: all 0.4s ease;`

But hold on — the original `font-size: 0.85rem;` must remain. I can add other properties.

- For `.contact-channels-section article, .contact-quick-section .contact-card`:
  - `background-color: rgba(255,255,255,0.7);` or cream
  - `border-radius: 16px;`
  - `box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);`
  - Maybe a border? Border-color can change, but there's no border present. Adding border would change layout potentially if border-width > 0. Better not add border-width. I could add `border: 1px solid rgba(0,0,0,0.05)` but that adds border-width which affects layout (box-sizing could be border-box, but risky). Avoid.

- For `.app-hero-section .row .col-lg-7`:
  - Maybe `color: #1a1a1a;` — but this column likely contains text; adding a text color could be a visual change. But if the hero already sets text color, this would override. It's a "refresh" so it's fine. Actually, setting `color` here might be risky if the hero has a dark background. Let me think: `.app-hero-section` — Bootstrap hero section. Could be light or dark. The original media query only sets text-align: center. Adding a color could be problematic. Better to avoid adding color to the hero column unless needed. But the requirement says change all color values — there are none here.

Hmm, maybe I'm overthinking. Since the snippet is small, perhaps the safest approach is to add subtle visual enhancements that match editorial-magazine + soft-shadows, while preserving everything.

Let me consider: the target style says "Layout pattern (Aggressive only)" — but the mode is CONSERVATIVE. So no layout changes. The style guide mentions asymmetric grids, but that's for aggressive mode. In conservative mode, only visual identity changes.

Given that, I'll add:
1. `.app-hero-section .row .col-lg-7` — maybe add `text-shadow`? No, text-shadow on a whole column is weird. Maybe add `color: #1a1a1a;` to give ink text. But if the hero has its own color, this could conflict. Actually, editorial style is ink black text on cream. Setting `color: #1a1a1a;` aligns with the palette. I'll do it.

Wait, but if the hero section has a colored background (like dark navy), forcing #1a1a1a would make text unreadable. But I don't know the full CSS file. The instruction says I'm only refreshing this block. The risk is real. However, the target style specifies editorial neutrals, so presumably the whole page is being refreshed to cream/ink. I'll trust the target style.

Actually, maybe I should be more conservative and NOT add color to the hero column, since original only had text-align. The instruction "You MUST CHANGE: All color values" — if there are none, I don't have to change any. But the task also says "Refresh this CSS visually" and the self-check says "Colors throughout the file replaced with fresh palette?" — if there are no colors, then there's nothing to replace. So maybe the correct output is to keep everything and just note? No, the output must be rewritten CSS.

Hmm. Let me re-read the original: It's a media query block with three rules. In conservative mode, I can only change visual properties. Since the original has only protected properties, the rewritten CSS would be identical. But that can't be the intent.

Let me reconsider. Perhaps the intent is to interpret "refresh this CSS visually" as: even within this media query, I can add visual properties where they make sense, thereby refreshing the look. The self-check asks "Colors throughout the file replaced with fresh palette?" and "Shadows redesigned?" etc. Since there were none, adding them satisfies the check.

So I'll add visual properties that don't affect layout:

Rule 1: `.app-hero-section .row .col-lg-7 { text-align: center; }` — keep text-align. Add `color: #1a1a1a;`? Or maybe just keep as is. If I add color, it's a visual change. Let me add `color: #1a1a1a;` since editorial ink text. This is safe if the hero background is cream/beige.

Actually, I wonder if `color` might inherit anyway. Adding it is harmless-ish. But it could break if hero is dark. Given the target palette, I'll go with adding it.

Rule 2: `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — keep font-size. Add visual badge styling:
- `background-color: #c44536;` (deep red accent)
- `color: #f5f1e8;` (cream text)
- `border-radius: 12px;` (soft-shadows variant large radius)
- `box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);`
- `transition: background-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;` — but `transform` would be a layout/animation property that changes on hover; adding transition for transform is fine as a transition. But adding transition alone without hover doesn't do much. Still, it's a visual property change.

But wait — the badge is `bg-warning`. In Bootstrap, `.badge` has `border-radius: 0.375rem` and padding. Overriding background-color to red makes it look like a "new" badge, not a warning. The target style says single accent color deep red or olive. Since `bg-warning` implies warning, maybe olive is more fitting (olive as a muted warning?). Or keep it a warm tone. The editorial palette allows deep red #c44536. I'll use deep red.

Rule 3: `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — keep padding. Add:
- `background-color: #fffdf8;` (slightly lighter cream than #f5f1e8?) Let me use #f5f1e8 background? If the page background is #f5f1e8, cards should stand out. Maybe white/cream: `background-color: rgba(255,255,255,0.8);` or `#fffaf0`. Let me pick `#fffdf7` (a warm off-white).
- `border-radius: 16px;` (soft-shadows)
- `box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);`
- `transition: box-shadow 0.35s ease, background-color 0.35s ease;`
- Maybe `border-left: 4px solid #c44536;`? That adds border-width, which affects layout (border-box? risky). Avoid.

Actually, adding `background-color` to the contact cards within the media query — but at max-width 575.98px, these cards get padding. Adding background at mobile only might be inconsistent with desktop. But the media query is the only place I have. Since the task is to rewrite only this block, adding these properties is fine.

Hold on — should I be cautious about adding `background-color` in a media query that targets mobile? The original only adjusted mobile. If I add backgrounds/borders at mobile but not desktop, that could create inconsistent visuals. But since I'm only given this block, the rest of the file presumably handles desktop. The instruction says to rewrite this CSS — maybe the rest of the file is elsewhere and I shouldn't worry. But the request says "#块2/2" (block 2/2), so this is the second block. The first block would be the rest of the file. In this block, I should refresh only what's here. Adding background-color here may be appropriate because the cards presumably exist on mobile too.

Alternatively, maybe the right answer is simply to output the same CSS since there's nothing to change. But that seems like a trick. Let me think about the assessment: The prompt emphasizes "Colors throughout the file replaced with fresh palette?" — if I output identical CSS, the self-check fails. So I must introduce visual changes.

Let me also consider whether I can change `var(--space-md)` to a different spacing variable since custom properties can change... but --space-md isn't a color/shadow var. The instruction says "CSS custom properties (--color-*, --shadow-*) values" can change. --space-md is a spacing variable, not in the allowed list. So keep it.

Also `!important` must stay.

Now, the new palette:
- Cream background: #f5f1e8
- Ink text: #1a1a1a
- Accent: #c44536 (deep red)
- Maybe secondary accent: #6b705c (olive)

Soft shadows:
- `0 4px 8px rgba(0,0,0,0.05)`
- `0 20px 40px -10px rgba(0,0,0,0.12)`

Large border-radius: 12-24px. I'll use 14px/16px.

Transitions: 0.3-0.5s ease.

Let me draft:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        color: #f5f1e8;
        border-radius: 12px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: background-color 0.4s ease, box-shadow 0.4s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #fffdf8;
        border-radius: 16px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: box-shadow 0.35s ease, background-color 0.35s ease;
    }
}
```

Wait, is adding `color: #1a1a1a` to the hero column safe? If the hero column has a dark background, it would break. Let me reconsider. The target palette is cream background, ink text. The hero section