/* ============================================================
   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 rewrite a CSS snippet with a new visual identity while keeping selectors and layout properties the same. Let me analyze the input:

```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 mobile-responsive block with three rules:

1. `.app-hero-section .row .col-lg-7` — text-align: center (layout property, can't change)
2. `.app-hero-section .badge.bg-warning` — font-size (typography, can't change)
3. `.contact-channels-section article, .contact-quick-section .contact-card` — padding with important (padding can change ±20%)

Since the original CSS has almost no colors, shadows, or radius, I need to add visual properties that fit the target style "symmetric-grid" with "airy-rhythm" variant.

Wait — the instructions say "Refresh the visual identity WITHOUT changing layout structure or class names." The HTML is fixed. The original has very little to work with. Let me think about what I can add:

- Colors, shadows, border-radius, transitions, gradients can be added as long as they don't break layout.
- The selectors must remain exactly.
- text-align is a layout property (it's in the NEVER CHANGE list: text-align, vertical-align) — so keep it.
- font-size is typography — keep it.
- padding is in the LAYOUT section but allowed ±20%... The original padding is `var(--space-md) !important`. I can't know the value of `--space-md`. Changing it to a different variable could be risky. The instruction says padding margin "keep similar values, ±20% maximum". Since it's a CSS variable reference, I should keep it as-is or adjust within ±20%. I'll keep `var(--space-md)` since I don't know its value and changing it might break the layout.

So what can I actually add here?

For the hero section on mobile:
- I could add a `border-radius` to the badge
- Add `box-shadow` to the badge
- The `text-align: center` stays

For the contact cards:
- Add border-radius, box-shadow, transitions, background colors, etc.

But wait — the instructions say I must change colors, shadows, radius, transitions. The original has NONE. The "Goal: same layout, fresh color palette + shadow/radius identity." So I should ADD visual properties to these elements to establish the new identity.

Let me be careful: I shouldn't change the selectors. I can add new declarations within the existing rules, or add new rules? The instructions say "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". It says selectors must be preserved. Adding new selectors could change the HTML styling. But adding new rules with existing selectors — the selectors are already in the original. Adding declarations to existing rules is the way.

However, I need to be careful that adding `box-shadow` to elements doesn't break layout (shadows don't affect layout). Adding `border-radius` doesn't break layout. Adding `background` doesn't break layout. Adding `transition` doesn't break layout.

Also `padding: var(--space-md) !important;` — I must keep padding value the same since I don't know the variable. The target style wants "Generous spacing (Aggressive: padding 32-56px, gap 32-48px)" but I can't change the padding much. I'll keep it.

Let me think about what the target style "symmetric-grid" and "airy-rhythm" means for these mobile styles:

- Symmetric grid: balanced, harmonious
- Airy rhythm: large border-radius (16-28px), soft pillowy shadows, breathing room

Since this is a mobile media query (max-width: 575.98px), I'll apply:

1. `.app-hero-section .row .col-lg-7` — keep text-align center. Could add nothing else? Maybe add a subtle text-shadow? No, that could look weird on text. Maybe leave this rule as-is but perhaps add `color`? Text color is visual. But the original doesn't set it, so adding color could override inherited colors — risky but allowed. The instructions say change colors. Hmm, but adding color to a container could mess up the design. I'd rather add subtle shadow or leave the rule content but ensure color change. Let me think.

The task says "All color values: background, color, border-color, fill, stroke, outline-color" must be changed. But if the original has no color values, I can add them. I need to introduce the new palette.

Let me design a fresh palette:
- Primary: a calm teal/indigo
- Background accents: soft lavender/cream
- Badge: soft amber with warm glow
- Cards: white with soft sage/indigo tinted shadows

For the hero section, the badge is `.badge.bg-warning` — Bootstrap's bg-warning is yellow/orange. I can override the background with a gradient? The instruction says gradient colors can change/add. I can add a background gradient to the badge. But `bg-warning` sets background-color via Bootstrap; my declaration can override it if it comes after or has specificity. `.app-hero-section .badge.bg-warning` has higher specificity than Bootstrap's `.bg-warning`, so it will override. Good.

So I can:
- For `.app-hero-section .badge.bg-warning`: change background to a gradient, add border-radius, box-shadow, transition. But font-size stays 0.85rem.

- For `.contact-channels-section article` and `.contact-quick-section .contact-card`: add a soft background, border-radius (16-28px per airy-rhythm), box-shadow (soft pillowy), transition. Keep padding var(--space-md) !important.

But wait — `article` is a generic element; adding styling to `.contact-channels-section article` — the selector is already there with padding. Adding background/shadow is fine.

Could I add a `@keyframes` animation? The instructions say @keyframes names preserved, values can change. But the original has no keyframes. Adding new keyframes/animation would be adding new properties — allowed? It says "animation-name (values like duration/timing CAN change)" — implying animation names exist. Adding animation could affect layout if not careful. I'll skip keyframes.

Should I add a `transition` for the cards? Yes: transition: box-shadow 0.35s ease, transform... wait transform is layout? No, transform isn't in the never-change list but changing it could affect visual layout. Actually transition on transform with no transform change on hover — I'd need a :hover rule. The original has no :hover selectors. Adding :hover rules would add new selectors. The instruction says "preserving ALL selectors" — adding selectors isn't preserving, but the HTML is fixed. It says selectors must be kept exactly. Adding new ones might be acceptable but risky. The instruction states "🏷️ SELECTORS (CRITICAL - HTML is fixed): Class names: keep EXACTLY" — it's about not changing existing ones. Adding new selectors in a refresh is typical, but the output section says "preserving ALL selectors and layout exactly". I think it's safer to only modify existing rules and existing declarations. But the file is only 3 rules — very little. If I don't add anything, there's no visual refresh. 

Hmm. The task says "Refresh the visual identity WITHOUT changing layout structure or class names." and "Only change colors, shadows, radius, transitions, gradients." Adding new declarations is how I change those. I'll only add declarations inside existing rules, not add new rules/selectors.

Actually, let me reconsider: the original file is just this snippet — it's "块2/2" (block 2 of 2), meaning the full CSS file was split. This block might be the mobile adjustments section. Other files have the main styles. So my job is to refresh this block's visual properties.

I'll add:
- For the badge: background gradient, border-radius, box-shadow, transition, maybe border-color. Keep font-size.

- For the contact cards: background, border-radius, box-shadow, transition. Keep padding var(--space-md) !important.

- For the hero col-lg-7: only text-align center exists. I could add color? Probably not — that's inherited from parent. I'll maybe leave it exactly as is or add text balance? text-wrap is layout-ish. Keep just text-align.

But the instruction says ALL color values must change — there are none. Since I'm adding colors, that satisfies the refresh.

Let me pick a consistent palette for "symmetric-grid" + "airy-rhythm":

- Badge: warm sunrise gradient: `linear-gradient(135deg, #f6d365 0%, #fda085 100%)` with a soft warm shadow `0 6px 20px rgba(253, 160, 133, 0.35)`, border-radius `50rem` (pill) or 999px. Wait airy rhythm wants 16-28px radius; a pill badge is fine at `999px` — large radius.

Actually for symmetric-grid, a balanced harmonious palette:
- Indigo: #6366f1
- Soft lavender: #eef2ff
- Teal accent: #14b8a6
- Warm amber: #fbbf24

Badge: `background: linear-gradient(135deg, #fbbf24, #f59e0b)`; border: none? Border-width must not change, but border-color can. Bootstrap badge has no border. I can add border: 1px solid rgba(245, 158, 11, 0.3)? Adding border changes layout slightly (border-box? Bootstrap uses border-box so padding adjusts). Actually adding a border could affect layout. To be safe, avoid adding borders where there were none. Instead use box-shadow.

Badge:
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35), 0 2px 4px rgba(255, 255, 255, 0.6) inset;
    transition: box-shadow 0.3s ease;
    color: #78350f;
}
```

Wait — `font-size: 0.85rem` is typography and must stay. Adding `color` to badge text — Bootstrap's `.badge` uses `color: #fff` via `.text-bg-warning` or `.bg-warning` maybe. Actually `.bg-warning` just sets background-color. Badge text color is set by `.badge` class default to `var(--bs-badge-color)` which defaults to white. For bg-warning, Bootstrap recommends `text-dark` on the element for contrast... Actually `.badge.bg-warning` with default white text has poor contrast. Adding `color: #78350f` improves accessibility. That's a visual color change — good.

Contact cards:
```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 24px;
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.35s ease;
}
```

Wait `background` on contact card — if these cards already have backgrounds from other block files, this would override. That's the point of the refresh. But `background: rgba(255,255,255,0.85)` might conflict with a dark theme. Since I don't know the base, using a soft light background with a colored shadow is safe for an airy look.

Also for `.contact-channels-section article` — those are likely `<article>` elements in a grid. Adding bg and radius creates card-like look. Good.

Also the "symmetric-grid" target mentions strict equal grids and uniform gap 24px. The original doesn't set grid stuff here. The other blocks handle the grid. I shouldn't add grid properties assuming.

Now, what about the hero `.col-lg-7`? On mobile, text-align center. Maybe add a subtle `text-shadow: 0 1px 2px rgba(255,255,255,0.6)`? That's a visual change but could affect legibility. Hmm. Text-shadow is allowed. But adding it to a container affects all descendant text. Risky. I'll leave the rule with just text-align but maybe add `--bs-gutter-x`? No, that's layout. I'll leave it exactly. Since there are no colors to change there, that's fine — the constraint is that colors I change must be changed, not that every rule needs new colors.

Actually, let me reconsider the "must change" instructions: "✅ YOU MUST CHANGE (visual identity only): All color values, background, color..." — meaning if the original had color values, change them. None here. So adding new is fine.

Let me also consider adding `backdrop-filter: blur(...)` for the cards? That's allowed and adds airy feel. But backdrop-filter requires background transparency. I set background to rgba — so I can add `-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);`. This adds a frosted glass effect. Careful: backdrop-filter can have performance issues but it's fine.

Also the transition duration — can change. I'll add transitions.

Should I add `@media (prefers-color-scheme: dark)`? That would add new selectors/at-rules. The instructions say @media breakpoints preserved — adding a new media query would be adding, not preserving. I won't.

Now, the layout constraints: padding var(--space-md) !important — must keep. Border-radius: 24px is within 16-28px airy range. Box-shadow: soft pillowy — multi-layer.

Let me write the final 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;
        color: #7c2d12;
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
        border-radius: 999px;
        box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(238, 242, 255, 0.9) 100%);
        border-radius: 24px;
        box-shadow: 0 16px 40px rgba(99, 102, 241, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        transition: box-shadow 0.35s ease, border-radius 0.35s ease;
    }
}
```

Wait — `transform` in transition isn't a property I define anywhere; adding it just means if any transform changes, it transitions. That's harmless but pointless. I'll remove transform to keep it clean. Actually, transition of transform is fine, but since no transform property changes, it does nothing. Remove.

Border-radius transition is odd too. Just box-shadow and maybe background. Keep `transition: box-shadow 0.35s ease, background 0.35s ease;`.

Also — should I worry that `.contact-channels-section article` and `.contact-quick-section .contact-card` shadow overrides in other breakpoints? This is mobile-only within max-width 575.98px. That's fine.

One concern: `background: linear-gradient(...)` on `.contact-channels-section article` might cover images or icons inside? No, background is behind content; fine.

Another concern: Bootstrap's `.bg-warning` — if this snippet's `background: linear-gradient(...)` overrides it, good. But `!important`? Bootstrap's `.bg-warning` uses `background-color` not `!important`. My selector specificity: `.app-hero-section .badge.bg-warning` (0,3,0) vs `.bg-warning` (0,1,0) — mine wins. Good.

Should the badge keep `background-color` rather than gradient for symmetric-grid? Gradient is fine.

Also color contrast: badge text #78350f on amber gradient is readable. Good.

Now let me double check all constraints:

- Selectors preserved exactly: yes, same three rules with same selectors.
- text-align: center — kept (layout property).
- font-size: 0.85rem — kept (typography).
- padding: var(--space-md) !important — kept exactly.
- No display, position, grid, width, height, margin, gap changes.
- Colors: added new palette values (amber, indigo-tinted).
- Shadows: redesigned multi-layer.
- Border-radius: added 24px (airy) and 999px pill for badge.
- Transition: added.
- No keyframes added.
- Media query breakpoint preserved: max-width: 575.98px.
- No markdown fences