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

We need to rewrite the CSS according to the instructions. The original CSS is:

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

We must preserve selectors, and all layout-related properties. The only properties present are text-align, font-size, and padding. These are in the "never change" list? Let's check:

- text-align: listed under typography? Actually typography says: font-family, font-size, font-weight, font-style, line-height, letter-spacing, word-spacing, text-transform, white-space, word-break. It doesn't explicitly list text-align, but under layout: "text-align, vertical-align" are listed under NEVER CHANGE? Actually the output says "📐 LAYOUT (HTML cannot adapt to changes): ... text-align, vertical-align". Yes, text-align is in the layout section, so we must not change text-align. The original has text-align: center; we must keep it exactly.

- font-size: listed under typography, must not change. So keep font-size: 0.85rem.

- padding: listed under layout, keep similar values, ±20% maximum. The original padding: var(--space-md) !important. We can adjust the value within ±20%? But it's a CSS variable reference. If we change it, we need to be careful. The instructions say "padding, margin (keep similar values, ±20% maximum)". We could change the padding to something like calc(var(--space-md) * 0.9) or just var(--space-md) to preserve. But since the target style is symmetric-grid and soft-shadows, maybe we should add visual properties like border-radius, box-shadow, background, etc. But we must ensure the selectors remain exactly the same. We can add new declarations inside the existing rules? The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It implies we can add new visual properties to the existing selectors, but not change the layout properties. Since the HTML is fixed, adding declarations is allowed as long as they don't alter layout? Actually the "NEVER CHANGE" list includes layout properties, but adding new ones like background, border-radius, box-shadow, transition is fine. However, we need to be cautious: adding box-shadow to a container could change visual overflow? But that's okay, it's visual.

But wait: the original CSS is only a media query. We should keep the media query. We can add visual enhancements within these selectors, but we must not change the selector structure.

Also, the request ID and file fingerprint are just identifiers. We need to output only the rewritten CSS.

Let's analyze each rule:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }`
   We can add nothing? We could add a transition? But text-align is not transitionable? It is not animatable typically. But we can add color? The selector targets a column; adding background could change appearance but might be intended. However, we must be conservative: the original has no color, so adding a background might be acceptable but might alter the design. The target style "symmetric-grid" suggests equal grids, but there is no grid here. We should only add visual properties that don't affect layout. For a column, adding a border-radius and box-shadow would be weird. So maybe we should not add extra properties to this rule unless necessary. But the instruction says "Only change colors, shadows, radius, transitions, gradients" – we can add them if they fit. But it's a media query for small screens, so maybe we should keep it minimal.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }`
   This is a badge with warning background. We can add background gradient, border-radius, box-shadow, transition. But we must preserve font-size. We could change the background color/gradient? The class includes `bg-warning`, so the background is likely defined elsewhere via Bootstrap's `.bg-warning`. We could override it here with a gradient or a different warning color. Since it's a media query for small screens, we can add a soft shadow and larger border radius. But we need to keep the selector exactly.

3. `.contact-channels-section article,
   .contact-quick-section .contact-card { padding: var(--space-md) !important; }`
   This is a grouped selector. We can add border-radius, box-shadow, background, transition. We must preserve padding, but we can adjust the padding value slightly? The instruction says "keep similar values, ±20% maximum". We could change `var(--space-md)` to `calc(var(--space-md) * 0.95)` or just keep it. Since the target style wants large border-radius (12-24px) and soft shadows, we can add those. But we must be careful: adding padding? No, we keep padding as is or adjust slightly.

But the main goal is to "Refresh the visual identity WITHOUT changing layout structure or class names." So we should probably add a fresh palette and shadow styles across the entire file. However, the file only contains this media query. We are limited to these selectors. We cannot add new selectors? The output should preserve all selectors character-for-character. We can add declarations to existing rules, but we cannot create new rules unless we duplicate? The instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". It doesn't say we can't add new rules, but that would be changing the structure. Usually in this exercise, we are expected to output the same CSS structure but with modified values. Adding new selectors would be "aggressive" mode, not conservative. Conservative mode says "HTML fixed, visual changes only" and the "NEVER CHANGE" list includes selectors and layout. It doesn't explicitly forbid adding new rules, but it says "preserving ALL selectors" which implies all existing selectors must be there. It doesn't say "only these selectors". But to be safe, we should not add new selectors. We can only modify the existing rules.

So our output should be the same three rules inside the media query, with some visual properties added to the existing selectors where appropriate. But we must ensure we don't alter layout. Let's think about what we can change:

- For `.app-hero-section .row .col-lg-7`: we could add `background: transparent;` or `border-radius: 0;` but that's not refreshing. Maybe we can add a subtle text-shadow? But the rule only has text-align: center; adding text-shadow is visual and doesn't affect layout. Could be nice: `text-shadow: 0 1px 2px rgba(255,255,255,0.5);` But the background? Not known. Better not add irrelevant properties.

- For `.app-hero-section .badge.bg-warning`: add `border-radius: 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12); transition: all 0.3s ease;` But the badge might already have border-radius from Bootstrap. Overriding is fine. Also maybe a gradient background: `background: linear-gradient(135deg, #ffd54f 0%, #ffb300 100%);` But the class `bg-warning` sets background-color; using `background` shorthand with gradient will override. That changes color, allowed. We can add `color: #1a1a1a;` or keep inherited.

- For the grouped selector: add `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: all 0.4s ease;` Also maybe a background color: `background: rgba(255,255,255,0.8);` or a gradient. But the original doesn't have background, so adding a semi-transparent white could be okay. But it might change the look significantly. We should choose a harmonious palette.

The target style says "symmetric-grid" with equal grids and uniform gap. But there is no grid in this snippet. We can't change grid-template-columns. So we just apply soft shadows and border radius.

The color palette should be balanced and harmonious. We can choose a neutral palette with soft shadows.

Let's craft the output:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffe082 0%, #ffb300 100%);
        color: #1a1a1a;
        border: 1px solid rgba(255, 183, 77, 0.4);
        border-radius: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: all 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #f8f9fc 100%);
        border: 1px solid rgba(99, 102, 241, 0.1);
        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: all 0.4s ease;
    }
}
```

But we need to be careful: The selector `.contact-channels-section article, .contact-quick-section .contact-card` is a grouped selector. We are adding background, border, border-radius, box-shadow, transition. That's fine. But padding remains var(--space-md) !important. However, the instruction says "Keep ALL selectors and layout exactly". The padding value we kept exactly. The `!important` preserved. Good.

For the badge, we changed background to a gradient and added border, color, etc. But note: `.badge.bg-warning` might have display: inline-block and padding from Bootstrap; we are not changing those. We added border: 1px solid ... which changes box-sizing? In Bootstrap, `border-box` is set globally, so adding a border doesn't change layout except it occupies space. But border-width was previously 0? Actually Bootstrap's badge might have border: 1px solid transparent? Not sure. Adding border of 1px could increase size by 2px, thus altering layout slightly. The instruction says "border-color and border-style (NOT border-width)" can change. It says "border-color and border-style (NOT border-width)" are allowed to change, but border-width is not specifically listed? Wait, the "NEVER CHANGE" list includes "border-color and border-style (NOT border-width)"? Let me re-read:

From the original prompt (user's message): 
"✅ YOU MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)
  • text-shadow
  • border-radius (visual rounding only)
  • gradient colors and stops in linear/radial/conic-gradient
  • transition timing, easing, duration
  • filter, backdrop-filter
  • opacity
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
  • caret-color, accent-color
  • CSS custom properties (--color-*, --shadow-*) values"

So border-style and border-color can change, but border-width is NOT mentioned as allowed to change. That implies border-width is part of layout? The NEVER CHANGE list does not explicitly mention border-width, but it says "border-color and border-style (NOT border-width)" under "MUST CHANGE" means you can change color and style but not width. So we must not set border-width to a new value. If we add `border: 1px solid ...`, we are introducing a border-width of 1px, which is a change. So we should avoid adding borders with width unless the original already had a border. The original rule for badge has no border property. So adding a border is disallowed (because it sets border-width). We could use `outline` instead? Outline is also mentioned: "outline styles (color, type)" can change, but outline-width not? It says "outline styles (color, type)" – not width. So adding outline with width is risky. Better to avoid borders entirely.

Similarly, for the contact-card, we added border: 1px solid. We should remove that.

We can add background gradient, border-radius, box-shadow, transition, text-shadow, color. That's safe.

But background property with gradient: it doesn't affect layout. Border-radius: visual only. Box-shadow: visual. Transition: visual. Color: visual. Text-shadow: visual.

So let's remove border properties.

For the badge, we have `color` and `background` gradient. We might also keep `border-radius` and `box-shadow`. But note: `.badge` in Bootstrap often has `border-radius: 0.375rem` etc. We can override with larger radius. Since it's inside media query, it's fine.

Also, for the contact card, we added background gradient. That's okay.

But let's check the target style "symmetric-grid" – maybe we should use a consistent border-radius like 20px for all cards. And soft shadows as specified: `0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)`. We used that.

Now, should we modify the padding slightly? The instruction allows ±20%. But keeping exactly is also fine. To show a refresh, we could change `var(--space-md)` to `calc(var(--space-md) * 0.9)`? That might be unnecessary. Better keep same to avoid any risk.

Now, there is a question: The original CSS has only these properties. We are adding new declarations, but the instruction says "Only change colors, shadows, radius, transitions, gradients." It doesn't say "only change existing declarations"; adding new declarations is a change. That's allowed as long as they are visual. So yes.

But we must be careful not to add `transition: all 0.3s ease` to a badge if it might affect other properties? It's fine.

Now, the output should be exactly the rewritten CSS. No markdown fences, no explanations.

Let's craft the final CSS.

We'll preserve the media query and selectors exactly.

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffe066 0%, #ffb300 100%);
        color: #1a1a1a;
        border-radius: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: all 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #f2f4f8 100%);
        border-radius: 18px;
        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 we must ensure `text-shadow` is a visual property. It is allowed. Good.

Maybe we should add `backdrop-filter`? Not necessary.

The "symmetric-grid" target might imply equal grid columns, but we don't have grid here. So not applicable.

Now, self-check:
- Selectors preserved: yes.
- display, position, grid-template-* none present.
- width, height, padding, margin: padding kept same; no other.
- font-family, font-size, font-weight, line-height: font-size kept same.
- Colors throughout replaced? We only added new colors; original had no colors. So yes, fresh palette.
- Shadows redesigned: yes.
- Border-radius adjusted: yes.
- No AI marker comments.

One concern: The original `.app-hero-section .row .col-lg-7` had no visual property besides text-align. Adding text-shadow might be considered "visual identity" refresh. That's okay.

Another concern: The contact card background gradient uses `#ffffff` and `#f2f4f8` which might conflict with existing background. But it's a visual change.

Should we also change the `var(--space-md)` to a different value? Not necessary.

Let's think if adding `background` to `.contact-channels-section article` might cause it to have an opaque background that covers underlying content? It could,