/* ============================================================
   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 refresh the CSS visual identity in conservative mode. Let me analyze the file:

```
@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 block. The rules inside it are mostly layout/typography:
- `text-align: center` — this is a typography/alignment property, in the "never change" list under `text-align, vertical-align` — so I cannot change it.
- `font-size: 0.85rem` — font-size is also in the never change list.
- `padding: var(--space-md) !important` — padding is in the "keep similar values, ±20% maximum" category. I need to keep it similar.

Wait — in conservative mode, I can only change:
- colors, border-color, fill, stroke, outline-color
- box-shadow, text-shadow
- border-radius
- gradients
- transitions
- filter, backdrop-filter
- opacity
- outline styles
- caret-color, accent-color
- CSS custom properties values

In this CSS file, there are no color values, no shadows, no border-radius, no gradients, no transitions, no filters, no opacity, no outline, no caret-color, no accent-color, and no custom property definitions (only usage `var(--space-md)`).

So there's virtually nothing to change here that would satisfy the constraints. The rules as written only set layout/typography properties that are forbidden to change.

The instructions say: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

But there are no colors, shadows, radius, transitions, or gradients in this CSS. Hmm.

What should I do? Options:
1. Output the CSS unchanged since there's nothing to change.
2. Add visual properties (like colors) to these selectors that don't currently exist? That would be adding new declarations, which changes the visual identity. The task says "refresh the visual identity" — maybe I could add color, background, etc. But wait — the HTML is fixed and layout is fixed, but adding color declarations to elements that didn't have them before... is that allowed? The instruction says "Only change colors, shadows, radius, transitions, gradients." It doesn't say "add" them. Typically in these CSS rewriting tasks, adding new visual-only declarations is allowed since it doesn't break the layout. But the conservative mode says "visual changes only" — colors are visual. Adding a color to `.app-hero-section .badge.bg-warning` would be a visual change but would override the Bootstrap `.bg-warning` background? Actually, this is a Bootstrap-based site. The `.bg-warning` class sets `background-color: #ffc107` (or similar). Changing it to an editorial palette color would be a visual update.

However, I need to be careful. The file is a partial file (块2/2, "Part 2/2"). The original CSS is a media query. The safest approach is to add visual properties (color, background-color, border-radius, etc.) that fit the editorial-magazine flat-solid style, while keeping the existing declarations intact.

But wait — the self-check says "Every selector character-for-character preserved?" and "display, position, grid-template-*, flex-direction unchanged?" etc. Adding new declarations to existing rules doesn't change selectors. It adds visual properties. The instruction says "Only change colors, shadows, radius, transitions, gradients." Adding colors/radius is consistent with the target style's effect variant.

Hmm, but there's a risk: if I add `background-color: #c44536` to `.app-hero-section .badge.bg-warning`, I'd be overriding Bootstrap's warning color. That might be intended for the editorial refresh. But the badge might be used as a "warning" badge semantically. In an editorial-magazine style with deep red accent, a news/announcement badge in deep red would look fine.

Alternatively, the safest strictest interpretation: since none of the existing declarations are in the changeable set, output the CSS exactly as-is. But that seems like a cop-out and the task explicitly wants a refresh.

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."

Given the file has no visual properties, I think the intended behavior is to add visual properties that meet the requested style. The target style says:
- Editorial neutrals: cream/beige backgrounds (#f5f1e8), ink black text (#1a1a1a)
- Single accent color (deep red #c44536 or olive #6b705c)
- flat-solid: box-shadow none everywhere, solid backgrounds only, no gradients, minimal radius (0-6px)

So for the selectors:
1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — I could add color? But text-align center stays. Adding `color: #1a1a1a` would be a visual change (ink black text). That's within the allowed properties. But is it safe? It could override inherited colors. In an editorial refresh, ink black text on cream is the goal. Adding `color: #1a1a1a` here aligns.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — I can add `background-color: #c44536; color: #f5f1e8; border-radius: 0;` or maybe `border-radius: 2px;`. Wait, the variant says "Minimal radius (0-6px)". Flat-solid: "box-shadow: none everywhere". Adding `box-shadow: none` — that's allowed but the instruction says "box-shadow: none everywhere" as part of the effect variant. I can add `box-shadow: none;` to make sure there's no shadow. Hmm, but adding box-shadow:none changes nothing visually if there wasn't one. It enforces the style though.

3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — I could add background-color, border, etc. For flat-solid editorial, cards could have a solid cream/white background with a 1px border and no radius. But wait — the original CSS file doesn't have those. Adding `background-color: #fff;` or `#f5f1e8; border: 1px solid #e0d6c8; border-radius: 0;` would be a visual refresh. But I need to be careful about the `!important` on padding — it's only on padding, not on other properties.

Actually, hold on. Let me think about whether adding properties violates "conservative" mode. Conservative mode says "HTML fixed, visual changes only" — adding visual properties is a visual change, not a layout change. It doesn't change the HTML. It might change the rendered layout if, for example, adding a border changes box sizing — but box-sizing is likely border-box in Bootstrap, so a 1px border wouldn't change layout much. But to be safe, I should be cautious about adding borders to elements where it could affect layout. Bootstrap uses `box-sizing: border-box` globally, so borders don't affect width/height. But borders do affect visual size. Hmm.

Actually, the safest approach: add only properties from the allowed set that won't affect layout: color, background-color, border-color (not width), border-radius, box-shadow, etc.

Let me think about the editorial-magazine look:
- `.app-hero-section .row .col-lg-7` — center-aligned text on mobile. Add `color: #1a1a1a;` — ink black text. Safe.
- `.app-hero-section .badge.bg-warning` — the badge. Bootstrap's `.bg-warning` sets `background-color: #ffc107 !important`? Let me check... In Bootstrap 4/5, `.bg-warning` sets `background-color: #ffc107 !important`. Actually in Bootstrap 5, utilities like `.bg-warning` use `!important`. So if I want to override, I'd need `!important` too, or use a more specific selector. Adding `background-color: #c44536 !important;` would work. Hmm, but that's aggressive. Actually, in Bootstrap 5, `.bg-warning { background-color: #ffc107 !important; }`. To override, I need `!important` as well, and equal or higher specificity. The selector `.app-hero-section .badge.bg-warning` has specificity (0,3,0)? Let me count: `.app-hero-section` (class) + `.badge` (class) + `.bg-warning` (class) = 3 classes = specificity (0,3,0). Bootstrap's `.bg-warning` has (0,1,0). So actually `.app-hero-section .badge.bg-warning` has higher specificity, so without `!important` it would override even Bootstrap's `!important`? No — `!important` declarations beat normal declarations regardless of specificity. Bootstrap's `.bg-warning` declaration has `!important`. So I need `!important` in my rule, or higher specificity with `!important`. My selector has higher specificity but both have `!important`? If I add `background-color: #c44536 !important;`, then both have `!important`, and specificity decides: mine has higher specificity, so mine wins. Good.

But should I override `.bg-warning`? The class name `bg-warning` semantically means "warning" — yellow. Changing it to deep red changes semantics. But the task says "Colors throughout the file replaced with fresh palette" and the target style has "Single accent color (deep red #c44536 or olive #6b705c)". A badge in deep red suits editorial style. I'll do it, using `!important` to override Bootstrap.

Alternatively, I could set `background-color: #c44536;` without `!important`, but Bootstrap's `!important` would win. So I need `!important`.

Hmm, but wait — the original CSS file didn't have `!important` on any color. Adding `!important` is fine for visual properties; it doesn't change layout.

Let me also consider: is it within scope to change the badge color? The badge is inside the hero section. The hero presumably has a cream background (from the body or section). A deep red badge with cream text looks editorial. Let's do:
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background-color: #c44536 !important;
    color: #f5f1e8 !important;
    border-radius: 2px;
    box-shadow: none;
}
```

Wait — `color: #f5f1e8 !important;` might override the badge text color. Bootstrap badge default color is inherited (or specified by `.badge`?). In Bootstrap 4+, `.badge-warning` would set color: #212529, but `.bg-warning` utility only sets background-color. The text color would be inherited. Setting it to cream for contrast is good. But with `!important`, it forces it. That's fine.

Actually, `border-radius: 2px` — Bootstrap `.badge` has `border-radius: 0.375rem` (pill-ish). Changing to 2px matches flat-solid minimal radius (0-6px). Good.

- `.contact-channels-section article, .contact-quick-section .contact-card` — these are contact cards/articles. For an editorial flat look, I could give them a solid background, a border, no shadow, and minimal radius. Something like:
```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background-color: #fff;
    border: 1px solid #e8e2d5;
    border-radius: 4px;
    box-shadow: none;
}
```

Hmm, but wait — the padding is `var(--space-md) !important`. I must keep that exactly. I can add other properties. But adding `background-color: #fff` — the contact cards might already have a background from other CSS in part 1. Adding here would override. Is that a problem? It's a visual change, intended.

However, there's a subtlety: the media query is `@media (max-width: 575.98px)` — mobile only. So these visual changes would only apply on mobile. On desktop, the cards would keep their original look. That's a bit odd for a "visual identity refresh" — but the file is only part 2, and part 1 presumably has the desktop styles. The instruction says "File: assets/css/saishi.css#块2/2" — so maybe this is just the second chunk of a larger file that was split. I only see this chunk, so I can only modify this chunk. The other chunk probably has the full desktop styles and I should have modified it, but the user only gave me this chunk. Wait — the user gave one file with this content. So I must work with what's here.

If I add colors only to this mobile media query, the mobile look changes but desktop doesn't. That's inconsistent. But given the constraints, it's the best I can do. Alternatively, I could add the visual properties without media query... no, I must keep the media query and selectors exactly.

Actually, maybe the safest and most correct interpretation given a file with no visual properties: since there are no allowed-property declarations to change, the output should be the CSS with the same declarations plus new visual declarations added to the existing rules. This "refreshes" the mobile view. The desktop part (chunk 1) would presumably be handled separately with the same palette. Since the user asked me to output only this chunk's CSS, I'll add the visual properties to these rules.

Let me also consider not adding anything to `.app-hero-section .row .col-lg-7` because text-align is the only property and adding color there might be unnecessary. But the editorial palette wants ink black text. If the hero text is already black on cream, no change needed. But adding `color: #1a1a1a;` ensures ink black. It's a visual-only property. I'll add it.

Wait, actually — is `color` a safe property to add? Yes, `color` is in the "must change" list (all color values). It doesn't affect layout.

Let me think about the flat-solid variant: "box-shadow: none everywhere". So for cards, badges, etc., I should explicitly set `box-shadow: none`. But adding `box-shadow: none` to elements that never had a shadow — harmless.

Also the effect variant says "Solid background colors only (no gradients)". I won't add gradients.

Now, let me design the exact output:

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

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

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

Hmm wait, should I use `border` — the border-width would be added at 1px. The instruction says "border-color and border-style (NOT border-width)" — border-width is in the never-change list? Let me check: "🔒 NEVER CHANGE ... border-color and border-style (NOT border-width)" — so border-width must not change. But this rule didn't have a border at all. Adding a border introduces a border-width (1px). Is that allowed? The rule says not to change border-width — but there was no border-width to begin with. Adding a new border creates a new border-width. With `box-sizing: border-box`, it won't change the layout size, but it does add a visual border. Hmm, is that a "visual change only"? Yes, a border is decorative/visual. But strictly, "border-width" is listed as something never to change. Adding a border where none existed could be seen as changing border-width from 0 to 1px.

To be safe, I could avoid adding borders entirely and use background-color only, plus border-radius. But flat-solid editorial style benefits from borders. Alternatively, use `outline` instead of `border`? Outlines don't affect layout at all. The allowed changes include "outline styles (color, type)". So I could use `outline: 1px solid #e8e2d5;` — but that changes outline-width from 0 to 1px. The never-change list says "outline styles (color, type)" can change — but outline-width isn't mentioned as allowed or forbidden. Hmm.

Actually, re-reading the allowed list: "outline styles (color, type)" — this suggests I can change outline color and outline style, but not width. Adding an outline that didn't exist introduces a width. To stay strictly conservative, I should avoid adding new border or outline widths.

So better to use only `background-color`, `color`, `border-radius`, `box-shadow`, `opacity`, etc. — no new borders.

But wait, `border-radius` on an element without a border or background does nothing. On cards with a background, it rounds corners. That's fine.

Let me reconsider: The `padding: var(--space-md) !important` — the `!important` only applies to that declaration. I can add more declarations without `!important`.

For the contact