/* ============================================================
   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 CSS in a "conservative mode" where HTML is fixed and only visual changes are allowed. The original CSS is quite small:

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

Wait, but the constraints say I cannot change text-align, font-size, padding (well, padding can change ±20%), etc. Actually, looking at the original CSS:

- `.app-hero-section .row .col-lg-7 { text-align: center; }` — text-align is in the NEVER CHANGE list, so I keep it.
- `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — font-size is in NEVER CHANGE list, so keep it.
- `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — padding can change within ±20%. var(--space-md) is a CSS custom property value. I could change the value of --space-md if it were defined here, but it's not. Since padding can vary ±20%, I could replace `var(--space-md)` with a concrete padding value, but that might be risky. Actually, since it's a media query for small screens, changing `var(--space-md)` to a slightly different value might be okay. But the rule says "padding, margin (keep similar values, ±20% maximum)". I don't know the value of --space-md. I could keep it as is since it's a custom property reference. However, the task says to refresh visual identity — colors, shadows, radius, transitions, gradients. This CSS has none of those.

Hmm, this is tricky. The original CSS is just a small media query with layout/typography rules. There are no colors, shadows, or gradients to change. The instructions say to output rewritten CSS preserving all selectors and layout exactly.

Since there are no visual properties to change (colors, shadows, etc.), I should output the same CSS essentially, perhaps with minimal adjustments. But I need to be careful — my mission is to refresh visual identity, but I cannot change the restricted properties.

Wait — maybe I can add visual properties? The instructions say "Only change colors, shadows, radius, transitions, gradients" — but the original has none. Could I add new visual properties to these selectors? For instance, add a box-shadow or border-radius to `.app-hero-section .badge.bg-warning`? That might be within scope since I'm adding decorative properties without changing layout.

But the rule says: "Refresh the visual identity WITHOUT changing layout structure or class names." Adding box-shadow or border-radius to the badge would be a visual change that doesn't affect layout. Similarly, adding a background gradient to the hero section column?

However, the instruction also says "Keep ALL selectors and layout exactly as-is." Adding new declarations to existing selectors doesn't change selectors or layout properties. But could adding a background color to `.col-lg-7` affect layout? No, background doesn't affect layout. Box-shadow doesn't affect layout. Border-radius doesn't affect layout (unless combined with overflow, but just radius alone doesn't change box size). Transitions don't affect layout.

But wait — the media query is for max-width: 575.98px. Adding visual decorations there is fine.

Yet, I need to be careful: adding a background color to a column might make a visual block that wasn't there before. That's a visual identity refresh. I think it's acceptable.

Alternatively, maybe the safer approach is to keep the CSS essentially identical, since there are no visual properties to change. But the task explicitly demands a refresh with colors/shadows/radius. Since the original file is tiny, perhaps I should add subtle visual enhancements to the existing selectors, while preserving all existing declarations.

Let me consider the target style: "symmetric-grid", "airy-rhythm". This suggests generous spacing, large border-radius, soft pillowy shadows. But the spacing is governed by padding, which I can only change ±20%. And the original has `padding: var(--space-md) !important;` — I don't know what --space-md resolves to. Changing it to a fixed value could be risky if --space-md is used elsewhere, but within this media query it's okay to override with a concrete value? Actually, if I set `padding: 1.25rem !important;` that might be roughly equivalent (20px). But ±20% of an unknown value... Hmm.

Since the original uses `var(--space-md)`, I could keep it as `var(--space-md)` to avoid breaking custom property usage. But then I haven't changed anything.

Let me re-read the constraints:

"📐 LAYOUT (HTML cannot adapt to changes):
  • padding, margin (keep similar values, ±20% maximum)"

So padding can change by up to 20%. If --space-md is, say, 1.5rem (24px), then a 20% change would be 28.8px or 19.2px. I could replace `var(--space-md)` with a value like `1.25rem` or `1.75rem`. But without knowing the base value, it's hard to be within ±20%.

Actually, because this is within a media query for small screens, the `!important` suggests it's overriding a base padding. A common value for `--space-md` in design systems is 1rem–1.5rem (16–24px). Let me pick something safe like `1.25rem` (20px), which is likely within ±20% of whatever --space-md is (assuming it's between 16 and 24px). But this is a guess.

Alternatively, I could keep `var(--space-md)` but add other visual properties like background, border-radius, box-shadow, transitions. That's safer — no layout change at all.

Let me think about what the user really wants. The file is `assets/css/saishi.css` and this is block 2/2. The original CSS is minimal. The target style is "symmetric-grid" with "airy-rhythm". The output must contain the same selectors. I think the intended task is to add visual flair to these selectors — e.g., making the badge more visually appealing with a softer warning color, adding a subtle card-like treatment to the contact cards, and maybe adding a text-shadow or something to the hero section.

But the instructions under "YOU MUST CHANGE" include:
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow ...
  • text-shadow
  • border-radius
  • gradient colors and stops
  • transition timing, easing, duration
  • filter, backdrop-filter
  • opacity
  • outline styles
  • caret-color, accent-color
  • CSS custom properties (--color-*, --shadow-*) values

The original CSS has none of these. So there's nothing to change — unless we add them. The instruction "Refresh this CSS visually" with "Only change colors, shadows, radius, transitions, gradients" implies that if the original has no such properties, we might add them to achieve the target style.

Given the "conservative mode", I think the best approach is to augment the existing selectors with new visual declarations while preserving the existing declarations exactly. This refreshes the visual identity without changing layout.

Let me design the additions:

For `.app-hero-section .row .col-lg-7`:
- Add a subtle drop shadow? No, that might create a weird box around a column. Better to leave it as-is, or add a text shadow? The hero section typically has text. Adding `text-shadow` could improve readability. But text-shadow would apply to all text inside the column, including headings and paragraphs. That might look odd. Hmm.

Actually, since this is a media query for small screens, the hero section text is centered. Adding a soft text-shadow could be nice for an "airy" feel, but risky.

Maybe I shouldn't touch the first selector beyond what's there. But the instructions say I must output rewritten CSS. If I keep it identical, is that a violation? The instruction says "Refresh this CSS visually." If there's nothing to refresh, I can at least rewrite it with the same content. But the self-check asks: "Colors throughout the file replaced with fresh palette?" — there are no colors in the file. So maybe I should add colors.

Let me look at the selectors:
1. `.app-hero-section .row .col-lg-7` — a column in the hero section.
2. `.app-hero-section .badge.bg-warning` — a warning badge in the hero section. `bg-warning` is a Bootstrap class that gives it a yellow background. We can override with a fresh warning color (e.g., softer amber) plus a border-radius and shadow.
3. `.contact-channels-section article, .contact-quick-section .contact-card` — contact cards. We can give them a soft background, rounded corners, and a pillowy shadow.

These additions are purely visual (background, border-radius, box-shadow, transition) and don't affect layout.

Let me craft the new CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffe8a3 0%, #ffd166 100%);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(255, 200, 87, 0.35);
        color: #6b4e00;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 24px;
        box-shadow: 0 12px 32px rgba(80, 90, 140, 0.12), 0 4px 12px rgba(80, 90, 140, 0.08);
        transition: box-shadow 0.4s ease, transform 0.4s ease;
    }
}
```

Wait — but I'm adding `transition: transform`. If the card later has a hover transform defined elsewhere, this could conflict. But within this media query, it's fine. Actually, the instruction says "transition timing, easing, duration" can change — so adding transitions is allowed.

But hold on: `border: 1px solid rgba(...)` — border-width is not in the NEVER CHANGE list? Actually, the NEVER CHANGE list says "border-color and border-style (NOT border-width)". So border-width must be preserved? Wait, the original has no border-width. Adding a 1px border will change the box size, which could affect layout slightly. Box-sizing might be border-box (Bootstrap default), so adding a border won't change layout if box-sizing: border-box. But it's risky. The instruction says border-color and border-style can change, but NOT border-width. Since there's no original border, adding a border introduces a border-width of 1px. Is that allowed? The rule says "border-color and border-style (NOT border-width)" — meaning you can change color and style, but not width. Adding a border where none existed adds width, which might be considered a layout change. To be safe, I should avoid adding borders.

Similarly, `backdrop-filter` is allowed (filter, backdrop-filter). `background` is allowed. `border-radius` is allowed. `box-shadow` is allowed. `text-shadow` is allowed. `transition` is allowed. `color` is allowed.

So let me drop the `border` declarations.

For the badge, original Bootstrap `.bg-warning` has `background-color: #ffc107 !important;` (in Bootstrap 5, `.bg-warning` uses `--bs-warning-rgb`). Our override can set a gradient background. Also add `box-shadow`, `border-radius: 999px` (pill shape), and `color` for text contrast. But changing text color could affect readability, and color is allowed.

For the contact cards, add background, border-radius, box-shadow, backdrop-filter, transition. Avoid border.

For the hero column, text-shadow could be added. But text-shadow might affect text reading. Given "airy-rhythm", a soft white glow could be nice. However, text-shadow applies to all text in the column, including headings and body text. On small screens, text-shadow may look blurry. Maybe better to leave it without text-shadow, or add a very subtle one.

Another idea: add `padding` change? The original has no padding on the hero column, so adding padding could change layout. Avoid.

Let me also consider the target "symmetric-grid" — uniform gaps, baseline alignment. But since we have no grid in this code block, it doesn't apply directly.

Let me think about what CSS custom properties I might define. The instructions say CSS custom properties (--color-*, --shadow-*) values can change. I could define a few custom properties within the media query? That might be overkill. Actually, if the base file (block 1) defines custom properties like `--space-md`, I can't change them here because they're defined elsewhere. But I could reference them.

Hmm, let me reconsider. The file fingerprint and "block 2/2" suggests this is a fragment of a larger file. The original fragment has three rules. I must preserve the selectors exactly and the existing declarations. I can add visual declarations.

Actually, wait — should I preserve the existing declarations exactly? The instructions say "Keep ALL selectors and layout exactly as-is." The existing declarations `text-align: center`, `font-size: 0.85rem`, and `padding: var(--space-md) !important` are layout/typography, so they must stay. I can add new declarations.

Let me also consider: should I adjust `padding: var(--space-md) !important`? The target style says "Generous spacing (Aggressive: padding 32-56px, gap 32-48px)". But in conservative mode, padding can only change ±20%. Since I don't know `--space-md`, I'll leave it as-is. Actually, I could replace it with a larger value like `calc(var(--space-md) * 1.2)` — that would be exactly +20%. Interesting. That preserves the custom property reference while increasing spacing by 20%. That's within the ±20% limit. Nice.

Similarly, for the badge, I can't change font-size. That stays.

Let me write the final CSS:

```css
@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.4), 0 8px 24px rgba(50, 70, 120, 0.12);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffe5a3 0%, #ffc94d 55%, #f5a623 100%);
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(245, 166, 35, 0.35), 0 2px 4px rgba(120, 80, 10, 0.2);
        color: #5c4300;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: calc(var(--space-md) * 1.2) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(244, 247, 252, 0.78));
        backdrop-filter: blur(14px);
        border-radius: 24px;
        box-shadow: 0 16px 40px rgba(75, 95, 155, 0.14), 0 6px 16px rgba(75, 95, 155, 0.10);
        transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.45s ease;
    }
}
```

Wait — I used `background-color` in transition but set `background` as a gradient. The transition of background-color won't affect a gradient. Better to transition `box-shadow` and `transform`. But adding a transform transition when no transform is defined elsewhere might be okay. Actually, if a hover state elsewhere defines `transform: translateY(...)`, this transition would smooth it. Let me keep `transform` in the transition list.

Also, I need to be careful: `border-radius: 999px` on the badge — if the badge has padding and is displayed inline-flex, a pill shape is fine. Border-radius is a visual change, allowed.

For the contact cards, `border-radius: 24px` matches "large border-radius (16-28px)" from airy-rhythm. Box-shadow is soft and pillowy.

But wait: `backdrop-filter: blur(14px)` requires a semi-transparent background to have an effect. I have `rgba(255, 255, 255, 0.86)` and