/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need to rewrite the given CSS with visual changes only, preserving all selectors and layout properties. The original CSS is:

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

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

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

We need to refresh visual identity: colors, shadows, radius, gradients, etc. But in this snippet, there are only layout-related properties (text-align, font-size, padding). The instructions say we must not change font-size, text-align, padding within ±20%. We can change visual properties only. But there are no colors/shadows here. We can add visual properties? We can add properties like border-radius, box-shadow, background, color, transition, etc., without changing the selector or layout. The task says "Refresh this CSS visually" and "Only change colors, shadows, radius, transitions, gradients". In this limited block, we can introduce new visual properties to the selected elements, while keeping the existing declarations unchanged? Actually the instructions: "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." We must preserve existing declarations? The "never change" list includes text-align, font-size, padding. So we must keep those values exactly. We can add new visual declarations to each rule, and adjust any visual properties if present. But there are none present. So we can add e.g., for `.app-hero-section .badge.bg-warning` a box-shadow, border-radius, background? Wait, background is a color property, but if we set background on a badge that already has `.bg-warning`, it might override Bootstrap's background. That is allowed as visual change? The selector is a compound class, and adding background would change the appearance. But we must be careful: HTML is fixed, but CSS can change visual properties. The original likely relies on Bootstrap classes `.bg-warning`, `.badge`. In a conservative mode, we should avoid changing class semantics but can override colors.

The target style is "sidebar-classic" and "airy-rhythm". That doesn't quite apply to mobile media query? But we can still apply visual refinements within the media query. We need to rewrite the CSS with a fresh palette, shadows, radius, etc. Since original has no visual declarations, we need to add them? The output must be a rewritten CSS. Probably we should add visual properties that fit the target style, but keep the existing layout props.

However, the instruction says "Output ONLY the rewritten CSS, preserving ALL selectors and layout exactly". It doesn't explicitly say we may add new declarations, but it says "Only change colors, shadows, radius, transitions, gradients." That implies we can modify those kinds of properties. In a block with none, we can add them? Maybe yes, to fulfill the task of refreshing visual identity. But in a conservative mode, we should be cautious: adding properties could affect layout indirectly (e.g., box-shadow doesn't affect layout; border-radius doesn't affect layout; background/color don't affect layout). Transition doesn't affect layout. So it's safe.

But we must preserve padding! Padding is in the last rule. We cannot change it beyond ±20%, but we must keep it exactly? The "never change" list says "padding, margin (keep similar values, ±20% maximum)". So we can adjust padding by up to 20%? Actually the table says "padding, margin (keep similar values, ±20% maximum)" under "NEVER CHANGE". That means we can change but keep similar, not more than ±20%. But then the exact original padding is `var(--space-md) !important`. We should probably keep it as-is because we don't know the CSS variable value. Changing to a different value might violate the HTML? To be safe, keep exactly.

Font size: 0.85rem — must keep.

Text-align: center — must keep.

Thus we can add new declarations before or after existing ones.

Now, what visual identity to add? Target: sidebar-classic. But this media query is for mobile, no sidebar. The elements:
- `.app-hero-section .row .col-lg-7` — text-align center. Maybe add color? But a column with text may already have color. We could add a subtle text-shadow? That might be weird. Maybe add a transition? Not necessary.
- `.app-hero-section .badge.bg-warning` — the badge. We can style it with border-radius, box-shadow, backdrop-filter, border, etc. But badge might be inline-flex with padding. Adding box-shadow and border-radius is fine.
- `.contact-channels-section article` and `.contact-quick-section .contact-card` — cards. We can add border-radius, box-shadow, background, border, etc. But these elements probably already have card styles from elsewhere. Within the media query, we can override for mobile. Adding a soft shadow and larger radius fits "airy-rhythm".

We should also consider transitions: for interactive elements? Not really.

The instruction "side-bar-classic" and "airy-rhythm" suggests larger radius, soft shadows, breathing room. But the media query is max-width 575.98px, i.e., small screens. On small screens, sidebars typically collapse, so the "sidebar-classic" doesn't apply. But we can still use the color palette: sidebar darker, main lighter. The main background? We could set `.contact-channels-section article` background to a lighter color, maybe #f8f9fc or a warm white, with shadow. The badge could be a warm amber accent with shadow.

Let's craft a rewritten CSS. We need to output only CSS, no markdown.

We'll keep the media query, selectors, and existing declarations. We'll add new declarations after existing ones? Order matters: In CSS, later declarations override earlier ones if same specificity. If we add after existing, that's fine. We'll use `!important`? Not needed unless we need to override Bootstrap. Since the selectors have high specificity, we can just add declarations without !important, but the original `.contact-channels-section article, .contact-quick-section .contact-card` has padding `!important`. We'll keep that. If we add box-shadow, no need important.

Let's design:

For `.app-hero-section .row .col-lg-7`:
- Could add `color: #2c3e50;`? But that might alter text color. Maybe not necessary. Perhaps add `transition: color 0.3s ease;`? But no color change on hover. Hmm.

Maybe we can add a subtle `text-wrap: balance`? That's not in allowed list? Not a visual property? Not allowed. So avoid.

For `.app-hero-section .badge.bg-warning`:
- Add `border-radius: 999px;` (pill badge)
- `box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);` (soft amber glow)
- `backdrop-filter: blur(4px);` maybe not.
- `border: 1px solid rgba(255,255,255,0.3);` to give glassy feel.
- `background: linear-gradient(135deg, #fbbf24, #f59e0b);` to refresh gradient. But `.bg-warning` in Bootstrap is a solid color; we can override with gradient. Good.
- `color: #1f2937;` for contrast? But badge text color may be inherited. We can set a dark text for contrast. But "background" and "color" are visual. It's safe.
- `transition: transform 0.2s ease, box-shadow 0.2s ease;` but no hover rule. Still ok.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- Add `border-radius: 20px;`
- `background: #ffffff;`
- `box-shadow: 0 12px 32px rgba(30, 41, 59, 0.12), 0 2px 8px rgba(30, 41, 59, 0.06);` multi-layer soft shadow.
- `border: 1px solid rgba(226, 232, 240, 0.8);`
- Maybe `transition: box-shadow 0.3s ease, transform 0.3s ease;` but no hover. Good.
- Maybe `backdrop-filter: blur(8px);`? Not with background solid.

Need to ensure we don't change padding. We keep `padding: var(--space-md) !important;`.

Now, the output must include the original declarations as well. The original has `.contact-channels-section article, .contact-quick-section .contact-card` as a selector list. We'll preserve that exactly.

Also, the media query: `@media (max-width: 575.98px) { ... }`. Keep exact.

Now, about the "side-bar-classic" color palette: Sidebar darker (#252e3a), main lighter. Functional accent for actions. The badge uses amber (warning), so that's an accent. The cards background #ffffff, text maybe #334155. We can set color on the article/card? The text color maybe already set elsewhere. We can add `color: #334155;` to ensure. But if the card has a dark background, we override. However, the article probably contains text, so setting a dark gray is fine. In "sidebar-classic", the main area is lighter, text dark. Let's include `color: #334155;`.

For the col-lg-7, maybe we can add `color: #475569;`? But that might override the hero text color. Not necessary. We can leave it as no additional visual changes? The instruction says refresh visual identity; it's okay if only some elements get styled. But to be thorough, we might add `color` to that rule too. However, the hero section likely has a heading and paragraph. Setting a single color on the column might affect all text, maybe undesirable. Better not.

What about transition? Could add `transition: all 0.3s ease;`? That could affect many properties, but no layout. It's okay. But "all" is a bit broad. We can add targeted transitions to the badge and cards.

Let's write the final CSS with added declarations. We must be careful with commas, semicolons.

Original:

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

Rewritten:

@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;
        background: linear-gradient(135deg, #fcd34d, #f59e0b);
        color: #1f2937;
        border: 1px solid rgba(255, 255, 255, 0.35);
        box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 20px;
        background: #ffffff;
        color: #334155;
        border: 1px solid rgba(226, 232, 240, 0.9);
        box-shadow: 0 12px 32px rgba(30, 41, 59, 0.10), 0 2px 8px rgba(30, 41, 59, 0.06);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}

But note: We added `background` to badge. This will override Bootstrap `.bg-warning`'s background. That's allowed. However, the badge might have `color: #212529` from Bootstrap? Actually `.bg-warning` sets background-color, not color. The text color is likely inherited. Setting `color: #1f2937` ensures contrast. Good.

But the "font-size: 0.85rem" remains. Good.

One concern: Adding `transition` and `transform` in transition without a hover rule. It's fine; transform is not set, so no effect until hover if a rule elsewhere sets transform on the badge. But in the media query, we don't have a hover rule. That's okay.

We should not add `transform` property, just transition. That's allowed.

Now, the instruction says "Only change colors, shadows, radius, transitions, gradients." We changed background (color), border (color), box-shadow, border-radius, transition. All allowed. We didn't change any layout property. Good.

Now, we need to ensure the selector `.contact-channels-section article, .contact-quick-section .contact-card` is written exactly as in original, including comma and newline. Yes.

Output no markdown, no explanation. The first character should be `@` from `@media`.

Let's double-check the allowed "border-radius (visual rounding only)" — yes.

Could we use `var(--space-md)` unchanged. Yes.

Could we use `!important` on padding only. Keep.

Now, about "sidebar-classic" target: "Two-column structure: grid-template-columns: 280px 1fr or 1fr 320px" — not relevant here. We don't need to add grid. "Sidebar darker (#252e3a), main lighter" — We didn't use #252e3a. Maybe we can incorporate that darker tone in the badge? No, badge is accent. For the cards, main lighter #ffffff. For the hero col, maybe a muted color. It's fine.

But to better align with the target palette, maybe add a very subtle background to the entire media query? That would require a selector for body or something, which we don't have. We shouldn't add selectors.

Maybe we can add `background-color` to `.contact-channels-section article, .contact-quick-section .contact-card` as `#f8fafc`? But "main lighter" could be off-white. We used #ffffff. Could use #fdfdfd. Not necessary.

Let's consider "airy-rhythm": generous spacing, large border-radius, soft pillowy shadows, breathing room. The padding is from variable, we can't change. But we can add margin? No, margin is layout and we shouldn't change. We can add `--space-md`? Not allowed because it's a custom property? Actually we can change CSS custom properties values: "CSS custom properties (--color-*, --shadow-*) values" are listed as "must change". But we don't have any custom properties in this snippet. We could define a custom property? That would be adding a variable, not changing existing. The output would be additional CSS. But we're asked to output rewritten CSS for this snippet. Adding a `:root` block would change global, not necessary. Better not.

Maybe we can make the cards more breathable by adding a secondary box-shadow with positive spread to simulate padding? No, that's not layout.

The shadow should be "pillowy": multiple layers with larger blur and subtle offset. We did that.

Now, is there any risk that adding `border-radius` to `.badge.bg-warning` makes it look weird if the badge has no padding? It will just become a pill, nice.

Now, the output should be exactly the CSS block. Let's write it.

We need to be careful with the semicolon after the last declaration before closing brace. We'll include proper formatting.

Final output:

@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;
        background: linear-gradient(135deg, #fcd34d, #f59e0b);
        color: #1f2937;
        border: 1px solid rgba(255, 255, 255, 0.35);
        box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 20px;
        background: #ffffff;
        color: #334155;
        border: 1px solid rgba(226, 232, 240, 0.9);
        box-shadow: 0 12px 32px rgba(30, 41, 59, 0.10), 0 2px 8px rgba(30, 41, 59, 0.06);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}

Is `transform` in transition allowed? Yes, it's a transition property. We didn't set `transform`, just transition. Fine.

One more check: The instructions say "transition timing, easing, duration" may change. We introduced transition. Good.

"filter, backdrop-filter" — not used.

"opacity" — not used.

"outline styles" — not used.

"caret-color, accent-color" — not used.

Now, ensure no "AI-REWRITTEN" comments. None