/* ============================================================
   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 small CSS file with visual changes only. Let me analyze the original CSS:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}
```

This is a media query with three rules. I need to keep:
- The media query breakpoint (max-width: 575.98px)
- Selectors exactly
- text-align: center (that's layout/text-align - can't change)
- font-size (can't change)
- padding (can change within ±20%, but it's using var(--space-md) which I could change by redefining the variable... but the variable is likely defined elsewhere. Actually I could change the padding value slightly, but it's using a CSS custom property. I could redefine --space-md within this media query, but that might affect other things. Or I could just keep it. Actually, padding is allowed to change by ±20%. But `var(--space-md) !important` - I could keep it or change to a specific value. Hmm.

The instructions say:
- Colors: all color values can change
- box-shadow: redesign
- text-shadow
- border-radius
- gradients
- transition timing
- filter, backdrop-filter
- opacity
- outline styles
- caret-color, accent-color
- CSS custom properties (--color-*, --shadow-*) values

So the original CSS doesn't have any colors, shadows, radius, etc. It only has media query with text-align, font-size, and padding.

What can I change?
- text-align: center — this is layout/text-align, forbidden ("text-align, vertical-align" in forbidden list)
- font-size: 0.85rem — typography, forbidden
- padding: var(--space-md) !important — padding allowed ±20%. So I can adjust padding value. But it uses a custom property `--space-md`. I could redefine `--space-md` inside the media query to a slightly different value, or replace it with a calc or a literal value within ±20%.

Given that the task is to "refresh visual identity" but the original CSS has almost no visual properties, I have minimal changes to make. The only thing I can change:
- padding value: could change `var(--space-md)` to something. If --space-md is defined elsewhere, I don't know its value. I could use calc(var(--space-md) * 1.1) or just change to a literal value. Actually the instruction says "padding, margin (keep similar values, ±20% maximum)". Since I don't know the value of --space-md, maybe I should keep it but... hmm.

Actually, maybe I can add visual properties to the selectors within the media query? The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

But these selectors already have declarations. I could add new declarations like border-radius, box-shadow, background-color, etc. to make a visual change without changing layout. The selectors stay the same, the existing declarations stay (or adjusted within constraints), and I add decorative properties.

Wait — is that allowed? The instructions say in the self-check:
"✓ Every selector character-for-character preserved?
✓ display, position, grid-template-*, flex-direction unchanged?
✓ width, height, padding, margin within ±20% of input?
✓ font-family, font-size, font-weight, line-height unchanged?
✓ Colors throughout the file replaced with fresh palette?
✓ Shadows redesigned (different offsets, colors)?
✓ Border-radius adjusted for new visual style?
✓ No AI marker comments?"

"Colors throughout the file replaced with fresh palette" — but there are no colors in the file. So maybe the intent is that I add colors? Hmm, but "replaced" implies there were colors.

Let me think about this more carefully. The original CSS here is quite minimal. The mode is "sidebar-classic" with "airy-rhythm" variant. The target style wants:
- Sidebar darker (#252e3a), main lighter
- Functional accent
- Large border-radius 16-28px
- Soft pillowy shadows
- Generous spacing

But this CSS is a responsive media query for small screens. It doesn't contain layout, colors, or shadows. 

Given that I can only modify existing declarations (and add decorative ones), I should:

1. Keep the media query and selectors exactly.
2. Keep text-align: center (forbidden to change).
3. Keep font-size: 0.85rem (forbidden to change).
4. Adjust padding: I can change `var(--space-md)` to a value within ±20%. Since --space-md is unknown, I could replace with a literal like `1.1rem` or `1.25rem`? But that might be a big change. Alternatively, I can keep the var reference but... Actually the safest is to keep `var(--space-md)` since changing to an arbitrary literal could violate the ±20% rule relative to the unknown --space-md value. Hmm.

Wait, the rules say padding can change within ±20%. If I don't know the value of --space-md, I shouldn't replace it with a random literal. I could redefine `--space-md` inside the media query but that would change the variable globally within that media query, affecting any element. Actually redefining --space-md at the media query level would affect all rules that use it inside the media query. But only these selectors use var(--space-md) here. Still risky.

Better approach: Since the original media query has no visual identity, I can add visual properties (border-radius, box-shadow, background, etc.) to the selectors to give them the "airy-rhythm" style while keeping all layout declarations intact. Adding properties doesn't change existing layout. The selectors remain the same. This aligns with "Refresh this CSS visually" — since there are no colors/shadows to change, I add them.

Actually, let me re-read the task: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients. Output the rewritten CSS now."

"Only change colors, shadows, radius, transitions, gradients" — this suggests I should only modify those types of properties, not add completely new properties. But the original has none of those. So perhaps the output should just be the same CSS? That seems useless.

Hmm, maybe the intent is that I can adjust what's there. Let me check each declaration:

1. `text-align: center;` — text-align is in the forbidden list. Keep as is.
2. `font-size: 0.85rem;` — font-size forbidden. Keep as is.
3. `padding: var(--space-md) !important;` — padding can change ±20%. The --space-md is a custom property. I could change the value to `calc(var(--space-md) * 1.15)` or keep it. Or maybe I can replace it with a literal padding that's within ±20% of a typical --space-md. But that's guessing.

Actually, I think the practical answer here: Since the file has no visual properties to refresh, the honest rewrite keeps everything unchanged, possibly with a minor padding tweak. But that would produce identical CSS, which might be acceptable per instructions (no changes needed if none possible).

But wait — the instructions are explicit: "ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." This is a constraint on what I CAN change. It doesn't say I MUST change everything. If there are no colors to change, then there's nothing to change. But the self-check says "Colors throughout the file replaced with fresh palette?" — implies expectation of color replacement.

Let me look at this from a different angle. Perhaps the original file is supposed to have more content, but the "File: assets/css/saishi.css#块2/2" indicates this is block 2 of 2. So the full file has another block. This block only has the media query. The other block presumably has the main styles.

Given the target style "sidebar-classic" and "airy-rhythm", and this media query affects:
- `.app-hero-section .row .col-lg-7` (text-align center on mobile)
- `.app-hero-section .badge.bg-warning` (font size)
- `.contact-channels-section article` and `.contact-quick-section .contact-card` (padding)

For small screens, "airy-rhythm" wants generous spacing (padding 32-56px on aggressive), large border-radius. But the padding here is on contact cards. Since I only can change padding ±20%, I can't go to 32-56px unless --space-md is already close. Unknown.

I think the safest approach that produces a meaningful refresh:

1. Redefine the padding to use a slightly adjusted value. Since `--space-md` is typically 1rem or 1.25rem in many design systems, I could replace `var(--space-md)` with `1.15rem` and `1.25rem`? That's risky.

Better: Use `calc(var(--space-md) + 0.125rem)` — this changes padding by a fixed ~2px, well within ±20% for typical values. But it's odd.

Alternatively, keep `var(--space-md)` as is since padding is "keep similar values" and I can't know the value. The instruction says "padding, margin (keep similar values, ±20% maximum)" — this is a guardrail, not a mandate to change.

Actually, re-reading: "✅ YOU MUST CHANGE (visual identity only): ... border-radius (visual rounding only)" — it says I MUST change border-radius. So for the selectors, I should add border-radius.

Hmm, "MUST CHANGE" for colors, shadows, radius, etc. If the original has none, then adding them fulfills the mandate. Let me add decorative properties to each selector:

For `.app-hero-section .badge.bg-warning`:
- Add border-radius, maybe a subtle box-shadow to make the badge pillowy.
- Don't change font-size.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- Add border-radius, box-shadow, maybe background? But adding background might alter appearance significantly and the selector already has padding. Adding background is a color change (adding color). This seems in spirit.

But wait — if I add a background to these cards only inside the media query (max-width 575.98px), then on mobile they'd have a background, but on desktop they wouldn't. That could be intentional for mobile. But it might be an unwanted change.

Let me think about what "conservative mode" means: "HTML fixed, visual changes only". Adding background-color is a visual change, allowed. Adding border-radius is explicitly required. Adding box-shadow is explicitly required.

The original selectors don't have visual identity in this block, so adding visual properties is the only way to "refresh" this block. I'll add subtle, tasteful visual properties that align with "airy-rhythm" (large border-radius, soft pillowy shadows) and "sidebar-classic" palette (darker sidebar, lighter main).

But I must be careful:
- `.app-hero-section .row .col-lg-7` — this is a column; adding border-radius/shadow to a grid column could look weird. It has text-align: center. I probably shouldn't add box-shadow to a full-width column. Maybe add nothing extra here, or just leave as is.
- `.app-hero-section .badge.bg-warning` — a badge; adding border-radius (pill shape), a subtle shadow, maybe a soft gradient or background tint. The class is `bg-warning` which is a Bootstrap class that sets background color. I should not change background-color because that would override Bootstrap's warning color... Actually, in this media query, the only declaration is font-size. Adding border-radius and box-shadow is fine. Adding background-color would override the .bg-warning utility — not great. I'll skip background-color, add border-radius and box-shadow.
- `.contact-channels-section article, .contact-quick-section .contact-card` — contact cards; adding border-radius, box-shadow, perhaps a subtle background or border-color. But adding background might conflict with existing styles. Since it's inside the media query, this would only apply on mobile. Hmm.

Actually, you know what? Let me reconsider. The instructions are strict: "Only change colors, shadows, radius, transitions, gradients." This can be interpreted as: you may modify these types of properties. Adding a new property that wasn't there could be considered "adding", not "changing". However, the self-check says "Border-radius adjusted for new visual style?" — if there's no border-radius in the original, adding one could be seen as "adjusting" (from none to something).

I think the most defensible output is:

1. Keep everything as-is, except:
2. Modify padding using calc to stay within ±20% (or keep it).
3. Add border-radius, box-shadow, transition to the selectors as decorative enhancements.

But adding properties to `.app-hero-section .row .col-lg-7` (a column) with border-radius could make the column background not visible unless background is set, so it's harmless. Actually adding only border-radius with no background has no visual effect. So it's pointless.

I think the right approach is to add meaningful visual properties:

For the badge:
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(214, 158, 46, 0.18);
}
```

For the contact cards:
```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(37, 46, 58, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
```

Wait — transition on transform? transform is layout? No, transform is not in the forbidden list. But adding a transition that references transform when there's no transform change is fine. Actually, I shouldn't add transform animation since the selector might be used elsewhere... transitions are allowed to change.

But careful: the rule targets `.contact-channels-section article` and `.contact-quick-section .contact-card` inside the media query. Adding a transition there means on mobile only. That's odd but allowed.

Also padding: I'll keep it as `var(--space-md) !important` to respect the "keep similar values" rule since I don't know the value. Changing it to calc might be a change but could look weird. Actually, let me use `calc(var(--space-md) * 1.1) !important` to give a slight bump in spacing (10% increase, within ±20%). That aligns with "airy-rhythm" generous spacing. But using calc with var inside a media query is fine.

Hmm, but the "padding" rule says "keep similar values, ±20% maximum". `calc(var(--space-md) * 1.1)` is a 10% increase. That's within ±20%. Good.

For the hero column: I'll leave text-align as is. Should I add anything? Maybe nothing; it's a text column. I could add nothing to avoid weird visuals.

Actually, wait. Let me reconsider the whole thing. The target style is "sidebar-classic" — but this media query doesn't involve sidebar layouts. It's about hero section and contact cards. The "airy-rhythm" variant wants large border-radius (16-28px). So I'll use 20-24px radius on cards.

Colors: sidebar-classic palette:
- Sidebar darker (#252e3a)
- Main lighter
- Functional accent

For shadows, I can use rgba(37, 46, 58, ...) which comes from #252e3a. That's clever and ties to the palette.

Let me craft the output:

```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;
        border-radius: 999px;
        box-shadow: 0 4px 14px rgba(214, 158, 46, 0.2);
        backdrop-filter: blur(4px);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: calc(var(--space-md) * 1.1) !important;
        border-radius: 24px;
        box-shadow: 0 16px 40px rgba(37, 46, 58, 0.08), 0 4px 12px rgba(37, 46, 58, 0.04);
        transition: box-shadow 0.35s ease;
    }
}
```

Wait — adding `backdrop-filter` to a badge might not make sense since the badge background is already opaque. And `border-radius: 999px` on a badge with `.bg-warning` will make it pill-shaped, which is a nice visual refresh. But Bootstrap's `badge` already has `border-radius: 0.375rem` by default; changing to 999px is a visual change. Good.

But hold on — the rule says "Only change colors, shadows, radius, transitions, gradients." Adding `backdrop-filter` is in the allowed list ("filter, backdrop-filter"). But on a badge with warning background, backdrop-filter has no effect unless the background is semi-transparent. So I should drop that to avoid meaningless code.

Also, `transition: box-shadow 0.35s ease` — is a transition change. In the media query context, there's no hover state defined, so the transition won't trigger anything visible within this block. But it's harmless and allowed. Actually, it might be better to remove it since there's nothing to transition to. Or keep it minimal.

Let me think about what's truly valuable:

1. `.app-hero-section .row .col