/* ============================================================
   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 for visual refresh while keeping selectors and layout properties. The original 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 change only colors, shadows, etc. But this CSS contains mostly layout/typography: text-align, font-size, padding. There are no colors, shadows, gradients, etc. However the instructions say "You must change all color values, box-shadow, text-shadow, border-radius, gradients, transition timing, filter, opacity, outline styles, border-color, caret-color, accent-color, CSS custom properties". But here there are none. We must not change layout/typography properties: text-align, font-size, padding. But padding can change within ±20%? Wait, the original has padding: var(--space-md) !important; We are allowed to change padding slightly? The instruction says width, height, padding, margin (keep similar values, ±20% maximum). But since HTML is fixed, we should preserve padding exactly? Actually "keep similar values, ±20% maximum" means we can slightly adjust but not necessary. But the request specifically asks visual identity refresh. There's nothing visual in this snippet except maybe we can add visual properties? We must NOT change layout structure or class names. We can add new declarations? It says "Only colors, shadows, and decorative properties may change." We could add box-shadow, background, border, border-radius, etc. But careful: adding properties could affect layout? No, box-shadow doesn't affect layout. background, border might affect layout if not accounted for (border adds to size). But since these are existing elements, adding border could change layout. Better to avoid adding properties that could alter layout? Actually the task says "You may change all color values, box-shadow, text-shadow, border-radius, gradients, transition timing, filter, opacity, outline styles, border-color, border-style, caret-color, accent-color, CSS custom properties." It doesn't explicitly say you can add new properties, but "decorative properties may change" implies we can modify existing or add decorative ones. But to be safe, we can add visual properties that don't affect layout: box-shadow, opacity, filter, transform? Transform might affect layout. Avoid.

The original is a media query for small screens. We need to output a rewritten CSS with same selectors and same media query. Since there are no colors, we can't change them. But we need to refresh visually. Perhaps we can add custom properties? Or add backdrop-filter? But the snippet is about alignment, badge font size, padding. These are layout/typography. The only decorative property possible is maybe background color or border-radius for the badge? But the selector .app-hero-section .badge.bg-warning is a badge with Bootstrap bg-warning. We could add a background color override? But bg-warning already sets background via Bootstrap. We can change that? But we are not allowed to change class names, but we can override background-color. However background-color affects layout? No. But it might be a visual change. But the instruction says "All color values ... must change" but if there are no color values in the original, we don't have to invent? Actually the prompt says "You MUST CHANGE: All color values: background, color, border-color, fill, stroke, outline-color". If there are none, then nothing to change. But then we have no output? We still need to output the CSS.

Perhaps we should maintain the media query and the selectors, and add decorative properties that align with target style "flat-solid" and color palette. For example, we can set background-color on .contact-cards? But that would change their appearance. However we must be careful: the original CSS is only mobile/responsive overrides. We can add additional rules for visual identity within the same media query, but that might be beyond "rewrite". The instruction says "Refresh the visual identity WITHOUT changing layout structure or class names." We can add new declarations to existing selectors, as long as they are visual. We can also add new selectors? No, "SELECTORS (CRITICAL - HTML is fixed): Keep EXACTLY". It doesn't say we cannot add new selectors, but to be conservative, we should not add new selectors. It says "preserving ALL selectors and layout exactly." That implies we keep existing selectors, but can we add extra? Probably not.

Maybe the intended exercise is to output the original CSS with unchanged layout but maybe adjust padding slightly? But padding is not a visual identity? It is spacing, not color/shadow/radius. The target style "vertical-flow" is aggressive only, but we are in conservative mode. We should honor the original.

Let's parse the constraints:

- We must rewrite the CSS visually.
- Only colors, shadows, and decorative properties may change.
- The original has no such properties.
- Therefore the output can be exactly the same? But the task says "You must change all color values" but there are no color values. So no changes needed. But that seems trivial.

Perhaps we need to add decorative properties to these selectors to apply the visual identity. For instance:

- For .app-hero-section .badge.bg-warning, we could change background-color and border-radius, box-shadow? But background-color is a color value. The original has no background-color, but we can add one.
- For .contact-channels-section article and .contact-quick-section .contact-card, we could add background-color, border, border-radius, box-shadow. But padding is already set. Adding background-color would change layout? No, background-color doesn't affect layout. Box-shadow doesn't affect layout. Border would affect layout if width > 0, but border-radius doesn't. So we can add background-color, border-radius, box-shadow. However we must ensure not to break the layout. For the article/card, adding background-color and border-radius won't change layout size. Box-shadow no.

But the instruction says "Only colors, shadows, and decorative properties may change" — maybe adding new properties is allowed. But "change" could be interpreted as modify existing declarations, not add new ones. To be safe, I should not add new properties, but instead keep the existing properties and maybe adjust them? But padding can be adjusted within ±20%, but that would change layout slightly. Not recommended.

Let's look at the original CSS more 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;
    }
}

This is all inside a media query for mobile. The selectors are specific. This likely is a snippet from a larger file. The task is to "Rewrite this CSS for a visual refresh". It might be that we need to preserve the media query and selectors, but update any color-related custom properties used in these declarations. There's var(--space-md) which is a CSS custom property. The instruction says we can change CSS custom properties values. But here it's referencing --space-md, not defining it. We don't have the definition. We can't change it because it's not in the file. We could maybe replace it with a different spacing? But that's layout. Not allowed.

Alternatively, perhaps the expected output is simply the same CSS because there's nothing to change. But the prompt says "Refresh this CSS visually" and "You MUST change..." implying we need to produce different CSS. Could we change the font-size? No, font-size is typography, forbidden. Could we change text-align? No. So the only allowed changes are none. So the correct output is the original CSS.

But this seems too trivial. Let's consider if there are hidden color properties: text-align, font-size, padding are not color. So no color. Maybe we can change the media query breakpoint? No, @media conditions are forbidden to change. So the answer is unchanged.

However, the self-check says "Colors throughout the file replaced with fresh palette?" There are no colors. "Shadows redesigned?" none. "Border-radius adjusted?" none. It might be acceptable to output identical CSS.

Let's read the initial instructions: "Refresh the visual identity WITHOUT changing layout structure or class names." If no visual properties exist, perhaps you can add visual properties while keeping the same layout. For example, we can add a warm minimal background to the article cards, and a soft black text color? But the original selectors are for layout only. Adding color to these selectors would affect visual identity. But we need to be careful: .contact-channels-section article and .contact-quick-section .contact-card already have padding; adding background-color, border, border-radius, box-shadow would change their look. That is allowed because it's visual. Similarly, the badge could get a new background and border-radius. The col-lg-7 could get a text color? But text-align is layout typography, but color is visual. We can add color: #2d2d2d maybe. But the original didn't have color. Adding color might be okay.

But wait, the instructions "Only colors, shadows, and decorative properties may change" means we should only alter those properties that already exist? Actually "change" could mean modify values of these properties. Adding a property that didn't exist before is not "changing" it. But in CSS design, adding a background-color to a selector that had none is a change. I think it's allowed.

Let's examine the target style and palette. Target style is "vertical-flow" (aggressive only, but we are conservative). However, the "vertical-flow" description says single column layout, large vertical gaps, narrow max-width. We cannot change layout, so we won't apply that. The color palette is warm minimal: off-white #faf8f3, soft black #2d2d2d, muted accent sage #87a878 or terracotta #c47b5a. Effect variant flat-solid: box-shadow none, solid backgrounds, minimal radius 0-6px.

Since the original has no box-shadow, we don't need to set none. But we can add backgrounds.

Maybe the optimal output is to add color declarations to each existing rule:

- .app-hero-section .row .col-lg-7 { text-align: center; color: #2d2d2d; } But text-align unchanged.
- .app-hero-section .badge.bg-warning { font-size: 0.85rem; background-color: #c47b5a; color: #faf8f3; border-radius: 4px; } But bg-warning already sets background via Bootstrap, overriding it might be fine.
- .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; background-color: #faf8f3; border: 1px solid #e8e2d8; border-radius: 6px; } But border adds width, potentially altering layout. To avoid layout shift, we can use box-shadow inset? Or outline? Outline doesn't take up space. Or we can use border with same width? But if original had no border, adding border will increase size. Better to avoid border. Use box-shadow: none? That doesn't add visual. Use background-color only. And border-radius.

But the instruction "flat-solid" says defined by color contrast and borders, but we can use background contrast.

Also "box-shadow: none everywhere" - if we add no box-shadow, it's fine. But if there were existing box-shadows in original, we'd set none. There aren't.

Let's consider the test likely expects the output to be exactly the original? But the task says "Refresh visual identity". There must be some visible change. I think we should add color and radius to these selectors.

However, we need to be careful: We are in a "conservative" mode, so we should minimize changes. Adding properties could be seen as changing more than allowed. The original CSS only has layout/typography. The instructions explicitly forbid changing typography and layout, but allow adding decorative. In CSS, adding a property that doesn't exist is not "changing" a disallowed property. So I can add color, background-color, border-radius, box-shadow, etc.

Let's decide on a coherent visual refresh. The selectors:

1. .app-hero-section .row .col-lg-7: This is a column, likely text content. We can set color to #2d2d2d, maybe text-shadow? But text-shadow could be decorative. Use color only.

2. .app-hero-section .badge.bg-warning: This is a warning badge. We can override background to terracotta #c47b5a, text white/off-white, border-radius 4px, maybe a subtle box-shadow? But flat-solid says no box-shadow. So no.

3. .contact-channels-section article, .contact-quick-section .contact-card: These are cards. We can set background-color to #faf8f3, border-radius: 6px, maybe a subtle outline or border? But border affects layout. Instead, we can use outline: 1px solid #e8e2d8; outline-offset: -1px; but that might not be good. Or box-shadow: none already. We can use a light background contrast. Also set color to #2d2d2d.

But we must preserve the padding: var(--space-md) !important. That's there. We'll add background-color and border-radius.

Also, the property order doesn't matter. We need to keep the same selectors and media query. We'll include the original declarations plus new ones.

Let's also consider custom properties: We could define --space-md? No, because it's original reference, not defined here. We should not change it because it's a spacing value, layout.

Maybe we should add a CSS custom property in :root? No, the snippet is a media query, adding :root would add a new selector. Not allowed.

Thus final output:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c47b5a;
        color: #faf8f3;
        border-radius: 4px;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #faf8f3;
        color: #2d2d2d;
        border-radius: 6px;
    }
}

But wait: Does the badge have bg-warning class from Bootstrap. Overriding background-color with #c47b5a is fine. But we didn't change any existing color values because there were none. The task says "All color values ... must change" — there were none, so adding counts as change? Maybe yes.

However, the instruction "You MUST CHANGE: All color values: background, color, border-color, fill, stroke, outline-color" is a checklist, not "if any". We can add.

Let's ensure we don't violate "No box-shadow" effect variant. We don't add any.

But should we set box-shadow: none explicitly? The variant says "box-shadow: none everywhere". If we don't add, it's fine. But to be explicit, we might add box-shadow: none to each rule? That would be redundant but acceptable. However, original did not have box-shadow; adding none is a change? It's a visual property. But it doesn't change appearance. I'd skip.

What about border-radius? We changed from none to 4/6px. That's allowed.

Could we change padding? We could slightly adjust padding from var(--space-md) to calc(...) but no need.

One concern: The selector .contact-channels-section article, .contact-quick-section .contact-card includes two selectors. Adding background-color to both is fine.

Another concern: text-align: center is typography? In the forbidden list: text-align is in layout? Actually "text-align, vertical-align" are in the layout section? Let's check: "text-align, vertical-align" are listed under "Layout" as forbidden? Wait, the "LAYOUT" list says: "text-align, vertical-align" yes, it's forbidden. So we must not change text-align. We keep it.

The "TYPOGRAPHY" list doesn't include text-align, so it's in layout. So keep.

Also font-size is typography, keep.

Padding is layout, keep.

Now, is adding background-color to the col-lg-7 okay? It is visual, not layout. But if you set background-color to #2d2d2d (text color?) Actually I set color, not background. Good.

Let's think if there is a risk of changing the visual hierarchy too much. The "vertical-flow" target is aggressive, but we are conservative, so we only apply color palette and minimal radius.

Another possibility: We could replace var(--space-md) with a fixed value? No, forbidden.

We could add a box-shadow of none to satisfy flat-solid? Eh.

Let's also consider custom properties: "CSS custom properties (--color-*, --shadow-*) values" are allowed to change. The original has var(--space-md) but --space-md is not a color or shadow. So no.

Thus, I will output the modified CSS with added color, background-color, border-radius.

But wait, we need to be careful with the `!important` on padding. If we add background-color to the same rule, it's fine.

Let's craft final output with no extra comments, no markdown fences.

Double-check self-check:

- Selectors preserved exactly? Yes.
- display, position, grid-template-*, flex-direction unchanged? There are none.
- width, height, padding, margin within ±20%? Padding unchanged.
- font-family, font-size, font-weight, line-height unchanged? font-size unchanged.
- Colors throughout the file replaced with fresh palette? Added fresh palette colors. No previous colors