/* ============================================================
   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 has provided a small CSS snippet inside a media query and asked me to refresh it visually according to the target style (asymmetric-blocks) and effect variant (tight-rhythm).

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;
    }
}
```

Constraints:
- 🏷️ SELECTORS: Keep EXACTLY. So `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article`, `.contact-quick-section .contact-card` all stay.
- 📐 LAYOUT: display, position, grid, width, height, padding/margin (within ±20%), gap, etc. can't change. In the original, there's `text-align: center` (text-align is in the typography list — can't change). `font-size` can't change. `padding: var(--space-md)` — can't change much. var(--space-md) is a custom property value, but the padding value itself is layout. Actually, I can't change `padding` beyond ±20%. var(--space-md) is a custom property; changing it would affect layout. The instructions say CSS custom properties (--color-*, --shadow-*) values can change, but --space-* is a spacing token, not color/shadow, so I should not change it.

Hmm. The original snippet has no colors, no shadows, no border-radius, no transitions. It's just a mobile media query with text-align, font-size, and padding.

So what can I actually change visually?

The instructions say:
- ✅ You MUST change: colors, box-shadow, text-shadow, border-radius, gradients, transition timing, filter, backdrop-filter, opacity, outline styles, border-color/style, caret-color, accent-color, CSS custom properties (--color-*, --shadow-*) values.
- 🔒 NEVER change: selectors, layout properties, typography.

Given the original CSS is so minimal, I need to add visual properties to these selectors — but wait, the instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

Actually, re-reading: I should "rewrite the CSS" preserving layout and selectors. Since the original doesn't have colors/shadows, I can add declarations for colors, shadows, border-radius, transitions, etc. to those selectors. That would be a visual refresh without breaking layout.

But I need to be careful: adding `padding` changes to these selectors would be layout changes. The original has `padding: var(--space-md) !important;` — I shouldn't change that value, or at most adjust within ±20%. But --space-md is a custom property reference; I can't know its value. Changing it would be risky. Since the instruction says only --color-* and --shadow-* can change, I should leave --space-md alone.

Also `text-align: center` is typography... it's in the NEVER change list under typography: "text-align, vertical-align". So keep it.

`font-size: 0.85rem` is typography, keep it.

So what visual properties can I add/change?

1. `.app-hero-section .row .col-lg-7` — I can add `color`, maybe `caret-color`, text-shadow? But text-align stays center. Actually adding a color works. But this is a hero section column; adding a background might be too much. Perhaps just set a color value (though it would inherit anyway). Hmm.

Actually, the task is a bit odd: the original CSS has no visual properties except typography/layout. To "refresh" it visually, I'd need to add new declarations. The instruction says "Only change colors, shadows, radius, transitions, gradients" — it also allows adding? The output must "preserving ALL selectors and layout exactly" and "Same layout, fresh color palette + shadow/radius identity". So adding color/shadow/radius/transition/gradient declarations is exactly what's asked.

Let me think about the target style: "asymmetric-blocks" with "tight-rhythm":
- Compact spacing (padding 8-16px, gap 8-12px)
- Small border-radius (2-6px)
- Subtle shadows or none
- Information-dense feel

So in the mobile media query, I can:
- Add border-radius: 4px to the contact cards and badge.
- Add subtle box-shadow to cards.
- Add transitions on hover/focus? But adding :hover selectors would violate "keep pseudo-classes exactly"? Actually pseudo-classes are in the never-change list, meaning I shouldn't add new pseudo-class selectors? It says "Pseudo-classes (:hover, :focus, ::before, ::after)" — keep exactly. So I shouldn't add new :hover rules; only keep existing pseudo-classes. The original has none, so I don't add any.

- Add background colors: The target says "Bold contrasting blocks: each section different background, high contrast borders." But the selectors available are limited. I could add background to `.contact-channels-section article` and `.contact-quick-section .contact-card` to make them distinct blocks, with border and small radius.

- Add `border: 1px solid ...` (border-color/style can change; border-width not changed — but if there's no border, adding border-width is a layout change? Border-width affects box size (with default box-sizing content-box), but box-sizing could be border-box. Risky. The instruction says "border-color and border-style (NOT border-width)". So I shouldn't add a new border with width? Actually adding a border of 1px would change layout dimensions. To be safe, I could use a box-shadow inset line instead of a border, or use `outline` (outline doesn't affect layout). `outline: 1px solid color` — outline styles are allowed to change, and outline doesn't affect layout. But adding an outline that wasn't there before is adding; the rule says "outline styles (color, type)" can change. Adding a new outline is a visual change that doesn't affect layout. That seems acceptable.

Actually, let me reconsider. The safest approach: add background colors, border-radius, box-shadow, transitions to the existing selectors (adding new declarations is fine; it preserves layout since these properties don't affect layout). For borders, use outline or box-shadow that mimics border without layout change.

Let me go selector by selector:

1. `.app-hero-section .row .col-lg-7` — it's a centered column in hero. I could add a color to text, maybe a text-shadow for subtle depth. Target is tight/information-dense, so maybe no big shadow. Maybe: `color: #1a1a2e;`? But changing text color might not be desired since it inherits. But it's allowed. Hmm, but if we set a color, we'd be overriding inherited colors — could actually be a visual refresh. I'll add a deep ink color and maybe a subtle text-shadow.

Actually, "asymmetric-blocks" wants bold contrasting blocks. On mobile, the hero column centered — maybe I give it a subtle background block with a border-radius and shadow. But wait, `.col-lg-7` is a grid column; adding a background to it would create a block. That matches "asymmetric-blocks" on mobile. Tight-rhythm says padding 8-16px — but I can't change padding, and adding padding would change layout. So I can't add padding. I could add a background but without padding it looks cramped. Better not.

Maybe set `color: #0f172a` and `caret-color: #f59e0b`. That's a minimal visual change.

Hmm, but honestly, the safest and most sensible "visual refresh" is to limit changes to what the original selectors already do, plus adding colors/shadows/radius/transitions that don't affect layout.

2. `.app-hero-section .badge.bg-warning` — badge with bg-warning (Bootstrap utility). I can't change the class (bg-warning is a class selector... wait, ".app-hero-section .badge.bg-warning" is the selector; bg-warning is part of it). The background color of `.bg-warning` might come from Bootstrap elsewhere. In this media query, I can override `background-color` for the badge. But the selector includes `.bg-warning`, and the rule "Colors: background, color, border-color..." can change. So I could set `background-color: #fbbf24;` and `color: #451a03;` (dark amber text), plus `border-radius: 4px`, `box-shadow: none` or a subtle shadow. Font-size stays 0.85rem.

Actually, as a refresh, I can change the badge to a high-contrast look: dark background with amber text? But `.bg-warning` implies warning color. Since the target is high contrast blocks, I could make the badge background bold amber with dark text, small radius, subtle shadow. That's a nice visual shift.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — these are cards. I can give them a distinct background (e.g., white with a slight tint), a small border-radius (4px per tight-rhythm), a subtle box-shadow (or none per tight-rhythm — "Subtle shadows or none"), and maybe a transition. Adding `background-color`, `border-radius`, `box-shadow`, `transition` won't affect layout.

The original sets `padding: var(--space-md) !important;` — keep exactly.

But if I set a background color, it'd be nice to have a border. Since border-width can't be added (layout), use `box-shadow: inset 0 0 0 1px rgba(...)` to simulate a 1px border without layout impact. Box-shadow doesn't affect layout. That's a great trick for "high contrast borders" without changing layout.

Actually, box-shadow is explicitly allowed to be redesigned, and using inset 0 0 0 1px creates a border-like line. That's safe.

Let me design the palette for "asymmetric-blocks" + "tight-rhythm":

Palette: bold contrasting blocks. Since these are on a page (saishi.css — likely a sports/competition event page, given "app-hero-section", "contact-channels", "contact-quick"), I'll pick:

- Deep ink: `#0f172a` (slate-900)
- Off-white background: `#f8fafc`
- Accent amber: `#f59e0b`
- Accent orange/coral: `#ea580c`
- Surface white: `#ffffff`
- Muted border: `#e2e8f0`
- High contrast border: `#0f172a` or `#f59e0b`

For the badge (bg-warning), I'll use a bold amber with dark text:
- `background-color: #f59e0b;`
- `color: #1e1b04;` or `#451a03`
- `border-radius: 4px;`
- `box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);`
- Maybe a redraw of the warning to a "brand" look: `background-color: #ea580c;`? Warning is usually yellow/amber. Let me keep amber but more vivid: `#fbbf24` → `#f59e0b` with dark text for contrast.

For the hero col:
- `color: #0f172a;`
- Maybe `text-shadow: 0 1px 0 rgba(255,255,255,0.6);`? That's a subtle tactile shadow. Or per tight-rhythm "subtle shadows or none" — keep minimal.

For the contact cards:
- `background-color: #ffffff;` (or a tinted block to create contrast per asymmetric-blocks)
- Since target is asymmetric-blocks: "each section different background". The two different selectors (contact-channels article vs contact-quick .contact-card) could get different backgrounds:
  - `.contact-channels-section article`: `background-color: #f1f5f9;` (slate-100)
  - `.contact-quick-section .contact-card`: `background-color: #fffbeb;` (amber-50) — or `#ffffff`
- `border-radius: 4px;` (small radius per tight-rhythm)
- `box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);` or a combination: `box-shadow: 0 1px 2px rgba(15,23,42,0.05), inset 0 0 0 1px rgba(15,23,42,0.08);` — the inset ring gives a border look.
- `transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;` — wait, transform? transition of transform is allowed (transition timing/easing/duration can change), but adding a transform property elsewhere would be layout-ish. I won't add transform; just transition background-color and box-shadow.

Should I add a transition to the hero column? It has no interactive change, so transition is pointless. But transitions are listed as allowed to change. The original has no transitions. Adding a transition without a state change is harmless but dead code. I'll add a subtle transition to cards since they may be interactive links.

Now, about `text-align: center` and `font-size: 0.85rem` — keep as is.

Let me also consider: The instruction says "pad margins within ±20%" — I'm not touching them. `padding: var(--space-md) !important;` stays exactly.

Also, I should be careful with `!important` — keep it in the original declaration. Adding new declarations with or without !important doesn't matter much. If I add `background-color` to the card rule, it would be overridden by any other CSS with higher specificity, but that's fine.

One concern: The media query breakpoint `(max-width: 575.98px)` — that's a condition; must keep exactly. The @media name/breakpoint conditions are in the never-change list.

Now, about the "asymmetric-blocks" pattern: "Unequal columns: 1fr 2fr..." — that's for grid layouts, but I can't change grid-template-columns. So I only apply the color/block concept.

Let me write the rewritten CSS:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #0f172a;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #f59e0b;
        color: #1c1500;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 0 0 1px rgba(15, 23, 42, 0.06);
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }
}
```

Wait — should the two card selectors get different backgrounds (asymmetric-blocks: each section different background)? Since they're in one rule, I can't give them different backgrounds unless I split the selector list. Splitting a selector list — is that allowed? The rule says "Selector lists (commas)" must be kept exactly. Hmm, "Combinators (>, +, ~, descendant spaces) • Selector lists (commas)" — keep exactly. Does that mean I can't split `.contact-channels-section article, .contact-quick-section .contact-card` into two separate rules? That would change the selector list structure. To be safe, I should keep the selector list as one comma-separated list in one rule. That means they get the same background. That's fine — same block style.

Alternatively, I could keep the combined rule and add a separate rule for one of them — but that would add a new selector, which changes selectors ("keep EXACTLY"). It says keep every selector character-for-character preserved. Adding new selectors? The self-check says "Every selector character-for-character preserved?" — if I add new selectors, the original ones are still preserved, but is adding new selectors allowed? The mission says "Refresh the visual identity WITHOUT changing layout structure or class names." Adding new class selectors that target existing classes might be okay, but the safest interpretation: don't add new selectors; only rewrite the given CSS. The instruction "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" — implies I keep the same selector set. I'll keep the two selectors in one rule.

So both cards get the same background. That's fine.

But maybe to play into "asymmetric-blocks", I can make the cards darker (e.g., slate-900 with white text) to contrast with the page. Since the hero has `.bg-warning` badge amber, and cards are on contact sections, high contrast cards would be bold. Target says "Bold contrasting blocks: each section different background, high contrast borders". On mobile, cards could be dark blocks:

- `.contact-channels-section article, .contact-quick-section .contact-card` → `background-color: #0f172a; color: #f8f