/* ============================================================
   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 provided CSS with visual changes only. The original CSS is a media query with rules. We need to preserve selectors and layout properties. The rules contain:

- text-align: center; (layout/typography? text-align is listed under "TEXT ALIGNMENT" in never change? Actually in the instructions: "text-align, vertical-align" are in the never change list under layout? Let's check: Under "Layout" section: "text-align, vertical-align" are listed as never change. So we must keep text-align: center.

- font-size: 0.85rem; is typography font-size, never change. So keep.

- padding: var(--space-md) !important; padding is allowed to change ±20% but we can keep. It uses CSS variable --space-md. We are allowed to change CSS custom property values? The allowed changes include "CSS custom properties (--color-*, --shadow-*) values" but specifically those related to color/shadow. --space-md is a spacing variable, not color or shadow. Better not change it. So keep padding as is.

Thus, there is very little to change visually. The only possible changes: maybe background colors? But there are no colors specified. So essentially the original CSS is layout/typography only. We need to produce something? The task is "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." But there are no such properties in the input. We cannot add properties? We can add visual properties? The instruction says "Only change colors, shadows, radius, transitions, gradients." It doesn't say we cannot add new visual properties. But the output should preserve selectors and layout. We can add new visual declarations inside the existing rules, as long as we don't change layout. For example, we could add color, background, border-radius, box-shadow, etc., to these elements. But would that break layout? It could affect appearance but not layout if we are careful. However, the target is "flat-solid" with no box-shadow. The original has no box-shadow. Adding box-shadow: none would be meaningless but allowed? The "flat-solid" variant says box-shadow: none everywhere, but that would be a state. We might add `box-shadow: none;` to ensure. But that's not necessary.

The instruction is to refresh the visual identity. Since the original block is a media query with only responsive tweaks, we might need to introduce some visual properties? But the selectors are specific: `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article`, `.contact-quick-section .contact-card`. We could add colors, backgrounds, etc. But the original didn't have any, so "refresh" would be adding new visual styles. However, the prompt says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". If we add new declarations, we are changing the CSS but not the original declarations. Is that allowed? The original CSS is a snippet within a larger file. The task says "Refresh this CSS visually." That implies modifying existing color declarations and adding/replacing them. But there are no color declarations. We could perhaps redefine CSS variables if the original uses var(--space-md). But we shouldn't change --space-md.

Maybe the best approach is to add visual enhancements that don't affect layout: e.g., for the badge, we could set a new background color, border-radius, box-shadow none, etc. But the target style is editorial-magazine, flat-solid. The color palette: cream/beige backgrounds, ink black text, accent deep red. We could apply these to the elements. But we need to be careful: the selectors are within a max-width media query for mobile. Adding colors there might be okay, but we don't know the context. It could be risky.

However, the instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." That suggests we should output CSS that includes the same selectors and at least the original declarations (maybe with adjusted values) plus possibly new visual declarations. But "Only change colors, shadows, radius, transitions, gradients" means we are allowed to alter those properties if present, and perhaps add them? The word "change" could imply modify existing values. Since there are none to modify, we could add new ones, but that would be "adding" not "changing". But the mission says "Refresh the visual identity WITHOUT changing layout structure or class names." Adding colors is part of refreshing visual identity. So it's acceptable.

Still, we must ensure we don't change any layout properties. We can add `color`, `background-color`, `border-radius`, `box-shadow: none`, etc. But we must be careful with `padding` etc. The original uses `padding: var(--space-md) !important;` we keep exactly.

Perhaps the intended transformation is to preserve the existing declarations and add a new visual style. However, since the original CSS in this snippet has no visual props, the rewrite would look almost identical. That might be okay.

Let's read the original carefully:

```
@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 must keep the media query conditions unchanged. Inside, we can add visual properties. But note that `.app-hero-section .badge.bg-warning` is a badge with Bootstrap class `bg-warning` which sets background-color: #ffc107 (Bootstrap warning). We could override that with a new accent color. Since target palette deep red #c44536 or olive #6b705c, we might set `background-color: #c44536; color: #fff;` etc. But would that be "changing" the existing color? The original doesn't set a color, but Bootstrap's class does. In the compiled CSS, `.bg-warning` from Bootstrap would be outside this media query. Our CSS can override it within the media query. That seems plausible.

Similarly, the hero section text alignment center is layout, keep. The contact cards padding keep. We could add `background-color: #f5f1e8; border-radius: 6px;` etc. But we must be careful not to affect layout.

Maybe we should only "refresh" by adding a color/background to each rule. But the task is "visual identity" for the entire file? The file fingerprint suggests this is block 2/2, perhaps another block elsewhere. We only have this snippet. So our output should be the rewritten CSS for this snippet.

Given the target style "editorial-magazine", with "flat-solid", no box-shadow. We can add `box-shadow: none;` to each rule, even though there was none. That is a visual declaration, but harmless. Also add `border-radius: 0;` or `6px` for minimal radius. But the target says "Minimal radius (0-6px)" so we can set `border-radius: 6px` on the cards and badge.

Also transition timing can be added, but that would be new. We can add `transition: background-color 0.2s ease;` but that might be considered adding a visual property. However, transitions are in the allowed change list.

Let's think about what is the "right" output. The prompt says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It says "change" not "add", but we can only change existing. Since there are no existing color declarations, we could add some "overrides" but that's adding. However, the mission is about "visual identity refresh", so adding is needed.

But the output requirements: "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". That implies we should include the original selectors and layout declarations unchanged, and we may include modified/added visual declarations. So our output will be the media query with the same three rules, but each rule may have additional visual properties.

I need to choose a coherent style. Let's design:

- For `.app-hero-section .row .col-lg-7`: Maybe add `color: #1a1a1a;`? But the hero already has text color inherited. We could add `background-color: transparent;`? Not useful. Better to add `color: #1a1a1a;` to ensure ink black text. But that's a color change. Also maybe `text-shadow: none;`? Could add `text-shadow: none;` to comply with flat-solid. But original has none. Adding is fine.

- For `.app-hero-section .badge.bg-warning`: Override Bootstrap warning background with accent deep red. Set `background-color: #c44536; color: #ffffff; border-radius: 4px; font-size: 0.85rem;` but font-size is already there. Also `box-shadow: none;` maybe. Add `text-transform: uppercase;`? That would change typography (text-transform is in never change). So no. Add `letter-spacing`? No, typography. So only visual: background-color, color, border-radius.

- For `.contact-channels-section article, .contact-quick-section .contact-card`: Add `background-color: #ffffff;`? Or `#f5f1e8`? The editorial palette has cream/beige backgrounds. The page background is probably beige, cards could be white or cream. Maybe set `background-color: #fffdf8;` and `border: 1px solid #e5ded1;`? Border-color is allowed. But adding a border could affect layout? Border-width is not to be changed? Actually border-width is layout? The never-change list includes "border-color and border-style (NOT border-width)" under allowed changes. But adding a border would change layout if it wasn't there before because it adds to box size if box-sizing isn't border-box. Since we don't know, better avoid adding border-width. We can set `border: none` or `border-color` but not add width. But if original has border properties elsewhere, we can change color. But we don't know. Safer to avoid border entirely.

Maybe set `background-color: #f5f1e8; border-radius: 6px; box-shadow: none;` but box-shadow none. Also maybe `padding` already set.

But the padding is `var(--space-md) !important;` we keep. Adding background and border-radius won't affect layout if no border. Border-radius doesn't affect layout.

Let's consider the "flat-solid" variant: "box-shadow: none everywhere". So we can add `box-shadow: none;` to each rule. This is explicitly a visual change (shadow) and aligns with the variant.

Also "Minimal radius (0-6px)" so add `border-radius` to cards/badge.

We also need to consider the `!important` on padding. We keep.

Now, for the hero text alignment, we might want to add `color` but that might be too generic. Perhaps not needed.

Another thought: The original CSS block is within a media query for mobile. If we add background-color to the hero col, it might make a colored block on mobile, which could be undesirable. But the target style may call for it.

Maybe the best is to only change what we can: add `box-shadow: none;` to all rules, add `border-radius` to badge and cards, add `background-color` and `color` to badge. For hero col, maybe add `color` to set ink text. But if the hero already has a color, overriding at mobile to ink black is fine. But we don't know.

Let's produce something reasonable.

Let's define a palette:
- Background cream: #f5f1e8
- Card background: #fffdf6 (slightly lighter)
- Ink: #1a1a1a
- Accent deep red: #c44536
- Accent olive: #6b705c (maybe not needed)

For the badge:
```
background-color: #c44536;
color: #ffffff;
border-radius: 4px;
box-shadow: none;
```

For the contact cards:
```
background-color: #fffdf6;
border-radius: 6px;
box-shadow: none;
```

For hero col:
```
color: #1a1a1a;
box-shadow: none;
```

But `box-shadow: none` is redundant, but okay.

Also, we could add a transition:
```
transition: background-color 0.25s ease, color 0.25s ease;
```
to cards and badge. That's a visual change. But transitions may not be needed. The variant says "flat-solid", no shadows, solid colors, minimal radius. Transition not specified, but allowed. Could add to badge to smooth hover? But no hover rules here. Still, transition property can be set.

However, adding transitions to a mobile media query might affect performance, but fine.

We need to be careful not to change any "layout" properties. `color` is fine. `background-color` is fine. `border-radius` fine. `box-shadow` fine. `transition` fine.

Let's decide final CSS.

Original selectors:
1. `.app-hero-section .row .col-lg-7`
2. `.app-hero-section .badge.bg-warning`
3. `.contact-channels-section article,
   .contact-quick-section .contact-card`

We keep each selector exactly, including the comma list.

Within rule 1:
```
text-align: center;
color: #1a1a1a;
box-shadow: none;
```
Maybe no need to add color if not specified, but okay.

Within rule 2:
```
font-size: 0.85rem;
background-color: #c44536;
color: #ffffff;
border-radius: 4px;
box-shadow: none;
```

Within rule 3:
```
padding: var(--space-md) !important;
background-color: #fffdf6;
border-radius: 6px;
box-shadow: none;
```

But note: The third rule has two selectors. Adding background-color to both is fine.

Should we add `border: 1px solid #e0d6c5;`? Since border-color is allowed, but adding border width might affect layout. Avoid.

What about `outline`? Not needed.

Now, the task says "Only change colors, shadows, radius, transitions, gradients." We changed colors (color, background-color), shadow (box-shadow), radius (border-radius). No gradients. No transitions. That's fine. We didn't change layout properties.

But is adding `color` and `background-color` allowed if they weren't there? The phrase "change colors" could imply altering existing color values; but since there are none, adding is a change to the visual style. Should be acceptable.

Let's also consider whether `box-shadow: none` is a "shadow" change. It is. Good.

Let's ensure the media query condition remains identical: `@media (max-width: 575.98px)`. The selector list `.contact-channels-section article,\n    .contact-quick-section .contact-card` preserved exactly. The indentation? The output requirements don't specify indentation, but preserve selectors. We can keep the same formatting style.

One potential issue: Adding `background-color: #fffdf6;` to the contact cards could alter the look of cards that may have had transparent background. But that's the point.

Let's also think about the editorial-magazine style: maybe the hero col text should remain default, not forced to ink. But to use the palette, we can set it.

Alternatively, we could set `background-color: #f5f1e8;` to the hero col, but that might create a giant cream block. Not sure.

Given the "flat-solid" variant says "Solid background colors only (no gradients)" and "Defined by color contrast and borders". So adding solid backgrounds is good.

I think the output above is acceptable.

But wait: The "file fingerprint" and "block 2/2" might indicate there is another block that contains base variables. This snippet is just a media query. Adding color values directly here is okay, but might be better to use CSS variables? We could define new variables? Not necessary.

Let's consider if `color` on hero col is appropriate. The selector `.app-hero-section .row .col-lg-7` targets a column. If we set color to #1a1a1a, it will affect all text inside that column, maybe including headings. That's fine, but could override existing heading colors. In editorial style, headings are often ink black. So okay.

But the target style specifies "ink black text (#1a1a1a)" so this is consistent.

Maybe add `background-color: transparent;`? No.

Let's also consider that `box-shadow: none` is not necessary but satisfies the variant.

Maybe we can add `appearance: none;`? No, not in allowed list.

Let's finalize.

Output must be only CSS, no markdown. So:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        box-shadow: none;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        color: #ffffff;
        border-radius: 4px;
        box-shadow: none;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #fffdf6;
        border-radius: 6px;
        box-shadow: none;
    }
}
```

This preserves all selectors, layout properties (text-align, font-size, padding). We added visual properties.

Check: Did we change any "font-size" or "text-align"? No. Did we change padding? No. Did we change selector? No. Good.

Is `#fffdf6` a cream/beige? It's a slightly warm off-white. Good. Maybe use `#f5f1e8` for card background? The target says "