/* ============================================================
   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 refresh the CSS visually while keeping selectors and layout. The provided CSS is a small media query block. It only has some properties: text-align, font-size, padding. These are layout/typography, not visual colors/shadows. In conservative mode, we cannot change text-align, font-size, padding? Actually padding can change up to ±20%. But the task says "Only change colors, shadows, radius, transitions, gradients." But the original CSS has none of those. We must output the same CSS with selectors preserved. Since there are no visual properties to change, we just output the same? But we need to refresh visual identity. The original has no colors, shadows, etc. We could add color, background, border-radius, but that would change behavior? Actually adding properties is allowed as long as layout unchanged. But the instructions say "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." The original contains padding !important, font-size, text-align. We cannot change font-size, text-align. Padding can change slightly but not needed. The new CSS could include the same selectors with same declarations, but maybe add visual properties? However, the media query is targeting small screens. The target style "symmetric-grid" and "airy-rhythm" suggests we might want to add border-radius, shadows, background, etc. But the original selectors are for hero section, badge, contact cards. We can add visual properties to those elements. But careful: The selectors include `.badge.bg-warning` — a Bootstrap badge. Adding background, color, box-shadow would be visual identity changes. We can add new declarations as long as selectors are identical. But the instruction says "Output the rewritten CSS now" and "preserving ALL selectors and layout exactly." It doesn't prohibit adding new declarations. It says "Only change colors, shadows, radius, transitions, gradients." That means we can add or modify those types of properties. The original didn't have any, so we can add them.

But there is also a risk: The user's original CSS is a fragment, likely part of a larger stylesheet. They asked to "refresh" it. We should rewrite the given rules with visual improvements. Since the original declares only layout/typography, we can keep those and add visual properties. But we must not change the existing declarations. For example, in the first rule `.app-hero-section .row .col-lg-7 { text-align: center; }` — we can't change text-align, but we can add color, background, shadow? Actually adding background to col-lg-7 might be unwanted. The request is to "refresh visual identity without changing layout structure or class names." We should respect the context. The safest is to output the same CSS exactly, because there are no visual properties to change. But that would fail the "creative" instruction. The user likely expects a transformation, but the input has no color properties. The instructions say "All color values ... box-shadow ... border-radius ... etc." If there are no color values, you cannot change them. However, we can add visual properties within the existing rules. The target style suggests adding rounded corners, soft shadows, generous spacing. We can add box-shadow, border-radius, background, etc., to the contact cards and hero section.

But note the media query is max-width 575.98px, i.e., mobile. Adding large border-radius and shadows might be okay. "airy-rhythm" variant says generous spacing, large border-radius, soft pillowy shadows, breathing room. For mobile, padding 32-56px might be too large but the variant says aggressive. However we must respect existing padding !important; we can change it by ±20%. Original `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — `--space-md` unknown. To maintain layout, we shouldn't change padding drastically. The rule says padding may change ±20%. But if it's a CSS variable, we don't know its value. Changing to a fixed value might be risky. Better keep as is.

The instruction says "NEVER CHANGE ... padding, margin (keep similar values, ±20% maximum)". For the existing rule, padding is var(--space-md). We can leave it. We could add `border-radius: 24px;` to those cards, and `box-shadow: ...` — that is visual only, no layout impact. That aligns with airy-rhythm.

For the `.app-hero-section .row .col-lg-7` rule, we can add text-shadow? But that's overkill. We can add `color` but that could change text color in hero. The original didn't specify color, so inheriting. Adding color might be okay. But the target palette? We don't know. We need to choose a balanced harmonious palette. Maybe use a soft neutral background? But the rule is for col-lg-7 within hero section on mobile; adding background could be weird. Better to avoid adding properties that could disrupt. However, the task explicitly wants visual changes. We can add a subtle text-shadow to hero text on mobile to enhance airy feel. But the original only text-align center. We can add `text-shadow: 0 2px 8px rgba(...)`.

For the `.badge.bg-warning` rule, we can add `box-shadow`, `border-radius`, maybe change `background-color`? But note `bg-warning` is Bootstrap class. Changing background-color in the CSS can override Bootstrap warning color. Since it's allowed (color values), we can set `background: linear-gradient(...)`, but that might be too much. The badge has font-size 0.85rem; we can add `border-radius: 999px;` (pill) and a soft shadow. The original had font-size only. Add visual updates.

Let's construct a response. We need to output only CSS, no markdown. We must preserve the @media query, selectors, and existing declarations exactly. We can add new declarations after existing ones inside each rule.

We should ensure we don't change text-align, font-size, padding. We'll add properties like background, border, border-radius, box-shadow, text-shadow, transition, etc. Also maybe backdrop-filter? But avoid.

Let's develop a palette. Target "symmetric-grid" palette suggests balanced harmonious, consistent shadows. "airy-rhythm" suggests large border-radius (16-28px), soft pillowy shadows. Since this is mobile, maybe still okay.

Let's choose a palette: a soft indigo/slate background? But we're not changing backgrounds of entire page, only these elements. For contact cards, adding a background could help. But the original cards likely have their own backgrounds. If we set `background: var(--surface-color)` it might override. Better to not set background unless necessary. Instead use `box-shadow` and `border-radius`.

Let's craft:

- For `.app-hero-section .row .col-lg-7`, add `text-shadow: 0 2px 16px rgba(99, 102, 241, 0.15);` (soft, airy). Might be nice.

- For `.app-hero-section .badge.bg-warning`, add `border-radius: 999px; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #78350f; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);` But changing background might override Bootstrap warning; but the class `bg-warning` sets background-color. A gradient is a visual refresh. It's allowed. But need to be careful that the badge is a `span` with class `badge bg-warning`. Adding `display: inline-flex; align-items: center;` would change layout? display can change but we shouldn't affect flex? It's inside hero; adding inline-flex might change alignment but not major. However, instructions say never change display. So don't change display. Just use visual.

- For `.contact-channels-section article, .contact-quick-section .contact-card`, add `border-radius: 24px; box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.12), 0 4px 16px rgba(15, 23, 42, 0.08); transition: box-shadow 0.3s ease, transform 0.3s ease;` But transform is an animation/property? transform not listed in allowed or prohibited? The prohibited list includes display, position, grid, flex, width, height, padding, margin, gap, justify-content, align-items, align-self, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, object-position, text-align, vertical-align. Transform is not listed. But adding transform might affect layout? Usually transform doesn't affect layout, but it can visually move. The target style "airy-rhythm" might include hover transform, but we shouldn't add pseudo-classes because selectors must be identical. We can add `transition` but no hover state. Adding transition is allowed. Could add `transform` to the base? That would shift the element, not good. So don't.

Better to add `transition: box-shadow 0.3s ease, border-radius 0.3s ease;` (transition property values can change). Border-radius transition is odd but fine. Or just `transition: box-shadow 0.35s ease;`.

Also add `border: 1px solid rgba(255,255,255,0.6);`? But border-style is allowed to change, border-color allowed. But border-width is not allowed? Actually "border-color and border-style (NOT border-width)" means we cannot change border-width. Adding a border where none existed would create layout shift because width? If border adds width, it counts as width? The instruction says not to change border-width, but adding border-width from 0 to 1px is changing border-width and adding to element size. That would break layout. So avoid adding border-width. If we want a border effect, use `box-shadow: inset 0 0 0 1px rgba(...)` which is shadow, not border. That's safe. So use inset ring shadows.

For card: `box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 24px 48px -16px rgba(30, 41, 59, 0.15), 0 8px 24px -8px rgba(30, 41, 59, 0.1);` This creates a soft ring and pillowy depth. The first inset shadow doesn't affect layout.

Border-radius: 24px is fine.

For badge: `box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 0 8px 16px -6px rgba(245, 158, 11, 0.4); border-radius: 999px;` Also maybe `background-color` change? If we set `background` it overrides bg-warning. But to keep semantic, maybe add `filter: saturate(1.1);`? Filter allowed. But background color is a color value; original had no background, but Bootstrap provides `.bg-warning` with `background-color: #ffc107 !important;` in Bootstrap. If we add `background-color: #fbbf24`, it won't override Bootstrap's !important? Bootstrap's `.bg-warning` has `background-color: #ffc107 !important;` so our rule without !important won't override. Unless we add !important. But user's original CSS uses !important on padding; that indicates they are overriding Bootstrap. For badge, to override Bootstrap, we'd need `!important`. We can add `background-color: #f59e0b !important;`? But that's a color change. However, the instruction says "only change colors" — but there was no color in original, so adding color is a change. But is it safe? It might be intended. The rule `.app-hero-section .badge.bg-warning` is specific, but Bootstrap's `.bg-warning` has equal specificity? Actually `.bg-warning` is a single class, while `.app-hero-section .badge.bg-warning` has 3 classes, so it's more specific but still less than !important. Bootstrap uses !important, so we need !important to override. We can add `background: linear-gradient(...) !important;` but that changes the badge appearance drastically. The task wants refresh. Let's do a soft modern gradient. But if we set `background` (shorthand), it resets background-image, etc. Use `background-image: linear-gradient(135deg, #fcd34d, #f59e0b);` and `background-color: #f59e0b !important;`? Actually to create gradient over Bootstrap yellow, we can use `background-image: linear-gradient(...)` without !important, since Bootstrap doesn't set background-image. That will work. The background-color remains #ffc107, but gradient overlays? A gradient is an image; if semi-opaque, yellow shows through. Better to use full gradient. So `background-image: linear-gradient(135deg, #fcd34d, #f59e0b);` no !important needed. However, background-image could be overridden by other styles? Bootstrap doesn't set background-image on .bg-warning. So okay.

Also add `color: #78350f;` to badge? That changes text color from Bootstrap's default (likely dark). Bootstrap badge text color is inherited unless `text-dark` etc. So setting color is allowed. But if the badge has custom color already, safer not to set? The task allows color changes. Let's set.

For the hero col, adding `text-shadow` only. Could also add `color` but might conflict. So just text-shadow.

Now, we need to maintain "padding: var(--space-md) !important;" exactly. We can add `border-radius: 24px;` after. Also, if we add `border-radius` to `article` and `.contact-card`, it will round corners. That's visual.

Should we add `background-color` to cards? If cards already have background (e.g., light), adding a tinted background changes look. Since we don't know, maybe avoid. Use shadow and border-radius only.

Also, for the hero col, perhaps add `padding: var(--space-md) !important`? No, that's for contact cards. The hero col doesn't have padding. We can add `padding-left: 0; padding-right: 0;`? That could change layout. Avoid.

Add a transition to hero badge? Maybe.

Let's also consider the target "symmetric-grid": maybe we can add `backdrop-filter: blur(8px);`? That's visual but might not work. Could add `-webkit-backdrop-filter`? But no.

We should preserve the @media query with the same condition. Add a space before? Just same.

Output only the rewritten CSS. No markdown.

Let's formulate final CSS:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 2px 16px rgba(99, 102, 241, 0.15);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 999px;
        background-image: linear-gradient(135deg, #fcd34d, #f59e0b);
        color: #78350f;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 8px 16px -6px rgba(245, 158, 11, 0.4);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 24px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 24px 48px -16px rgba(30, 41, 59, 0.15), 0 8px 24px -8px rgba(30, 41, 59, 0.1);
        transition: box-shadow 0.35s ease, border-radius 0.35s ease;
    }
}
```

But check: The second rule originally has one selector line `.app-hero-section .badge.bg-warning { ... }`. We added border-radius, background-image, color, box-shadow, transition. That's okay.

However, adding transition to badge with `transform` but no transform property might be odd. Could remove transform. Keep `transition: box-shadow 0.25s ease, background-color 0.25s ease;` Since background-image doesn't transition smoothly, better omit. Use `transition: box-shadow 0.3s ease;`. But adding transition does nothing if no hover. It's allowed but maybe not needed. We can include for consistency.

Wait, the instruction says "transition timing, easing, duration" are allowed to change. It doesn't say we must add. But adding transition is a visual change. Fine.

One issue: The first rule has text-shadow which might create an unwanted effect on all text inside that column. But it's a soft airy color. Could use a more neutral color: `rgba(15, 23, 42, 0.08)` — very subtle. But the target style is airy; use soft indigo.

Another issue: `border-radius: 24px` on article cards: if articles are grid items with overflow hidden? It should be fine. But if article has background, rounded corners clip. Good.

Now, the instruction says "only colors, shadows, radius, transitions, gradients." We used those. We didn't change font-size, text-align, padding. Good.

We must ensure selectors are character-for-character preserved? Original selectors:
- `.app-hero-section .row .col-lg-7`
- `.app-hero-section .badge.bg-warning`
- `.contact-channels-section article, .contact-quick