/* ============================================================
   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 respond with rewritten CSS. Need follow constraints. Need output only CSS. Need analyze original CSS: media query max-width 575.98px with rules. There are no colors etc. Need refresh visual identity without changing selectors/layout. Since original contains only layout-ish rules text-align/font-size/padding. We can change visual properties? Need keep selectors and property names? Important: We can change only colors/shadows etc. But original has font-size, padding, text-align. Those are in never-change typography/layout. However we can maybe adjust? We must preserve selectors exactly, and not change layout. Should we output same CSS? But task says refresh visual identity. Maybe can add visual properties within same selectors? Need careful: "HTML fixed only colors, shadows, decorative properties may change." Since original has no color, perhaps output should preserve original but maybe add border-radius/background etc. But selectors and existing properties should remain. But "Keep ALL selectors and layout exactly as-is. Only change colors..." If we add properties, not changing layout. But adding background? Could alter visual but not layout. However output should be rewritten CSS. Need maybe change color properties if present. None. We might need adapt in "tight-rhythm" style? Hmm.

Let's read user prompt in Chinese? They want file block 2/2. Original CSS is @media block with three rules. Need "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It says only change properties that are decorative. But original includes font-size/padding/text-align which are forbidden. So we must leave those exactly. Could alter? "Never change: font-size, font-weight ... padding, margin ... text-align." Therefore leave exactly. Since no visual property in original, the only compliant output is identical CSS. But then no refresh. Maybe we can add visual rules within same media query? Since adding selectors or properties? We can add properties that are visual and not layout? But if adding properties to existing selectors, okay? But "Only change colors..." maybe addition is change? The instruction says "colors, shadows, and decorative properties may change"; could add decorative properties. But output should preserve original, plus decorative enhancements. However "Keep ALL selectors and layout exactly as-is." We can add properties in same rules. Need not use property names from never-change list. Could add background-color, box-shadow, border-radius, transition, etc. But for mobile small screens, adding shadows maybe okay. Need align with "vertical-flow" and "tight-rhythm". However original selectors are about hero section centered, badge font size, contact cards padding. Could add subtle background to contact cards, card radius, border-left accent, etc. But careful to not alter layout. We can add box-shadow (visual), background (visual), border-radius. Might change visual identity.

Need output no markdown. We should include media query with same exact selector lists. Need preserve all original declarations exactly? Maybe can add new declarations after existing ones. Also can change CSS variables? There are no variables. Could use rgba. Need target style: vertical-flow maybe irrelevant because only these sections; palette warm minimal with sage/terracotta. Need visual variant tight-rhythm: compact spacing, small borders radius, subtle shadows.

Need decide exact CSS.

Let's parse original:

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

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

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

Need possibly handle selector list preserving with line break. We can add declarations:
- For .app-hero-section .row .col-lg-7: maybe color: #2d2d2d; maybe text-align center already. Could add background? Hmm col-lg-7 is a column inside row; adding background might not be desired. But could add subtle color? "vertical-flow" navigation maybe no.

- For .app-hero-section .badge.bg-warning: Badge. Could style as terracotta/sage? Existing class bg-warning probably bootstrap yellow background. We can override background, color, border-radius, font-size stays. Maybe use muted terracotta #c47b5a with off-white text; border-radius: 999px? But tight-rhythm says small radius 2-6px. Badge typically pill, but we can use 4px. Add transition? But transition maybe not relevant mobile. Could add box-shadow.

- For contact cards: existing padding var(--space-md). Need maybe add background: #fffdf9; border-radius: 4px; box-shadow: 0 1px 2px rgba(45,45,45,0.06); border-left: 2px solid #87a878; transition: ...? Also "padding: var(--space-md) !important;" keep. Add border-left creating width? border doesn't affect content? It uses border-box? If not, width increases by 2px, but layout maybe maybe no issue? However "never change layout", border affects box if box-sizing border-box? Unknown. But could use box-shadow inset to avoid layout, or border with box-sizing? We can use background and box-shadow. Use box-shadow inset horizontal line? Need not.

Could also add background to body? Cannot add selectors. Could add declarations to existing selectors only. Maybe for .app-hero-section .badge.bg-warning: `background-color: #c47b5a; color: #faf8f3; border-radius: 4px; box-shadow: 0 1px 2px rgba(45,45,45,0.08);` This changes warning badge to terracotta. But note "bg-warning" may have !important? no.

Could add to contact card: `background-color: #fffdf9; border-radius: 4px; box-shadow: 0 1px 2px rgba(45, 45, 45, 0.05);` But if each card has padding and background, could look good. Also `border-left: 2px solid #87a878;` may alter width. If box-sizing not border-box, width increases. Could use `box-shadow: inset 2px 0 0 #87a878;` no layout impact. Also add `transition: box-shadow 0.2s ease;` but mobile no hover. That's fine.

For hero col: maybe add `color: #2d2d2d;` but text color maybe inherited. Could add `caret-color: #87a878;` weird. Maybe not.

Need preserve `font-size`, `padding`, `text-align` unchanged. The added properties are visual. But do we need include original declarations? Yes. We can modify "bg" color. But "background-color" is visual property. Good.

Need think about output from "target style: vertical-flow" - maybe board? The file is assets/css/saishi.css block 2/2 likely a section from a bigger CSS? Need not add selectors. Could maybe include separate media query? No, only one given. Need output exactly all CSS under media query. No comments.

Need maybe change padding? But can't. Could increase gap? not relevant. Tight-rhythm says compact spacing; original `var(--space-md)` maybe 16px. okay.

Need perhaps change `border-radius` of badge to 6px. Add transition using `transition-duration`? Use "transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;" but if no hover, not needed. Some mobile maybe links hover? Badge not interactive. Maybe no.

Need maybe use `accent-color` and `caret-color`? Not applicable.

Need ensure not changing `font-size: 0.85rem` (exact). Good.

Need perhaps use `font-family`? no.

Need maybe use new color palette: off-white #faf8f3, soft black #2d2d2d, sage #87a878, terracotta #c47b5a. Let's incorporate.

Need maybe add `background-color` to `.app-hero-section .row .col-lg-7`? Maybe if hero section has own background? not likely. Could add `color: #2d2d2d;` but inherited body maybe. Adding `color` is visual only, but could override theme. Better not.

Could add to `.app-hero-section .badge.bg-warning`: "background" property instead of background-color? Bootstrap `.bg-warning` sets `--bs-warning-rgb` and background-color. Using `background-color` enough. Could also use `border: 1px solid rgba(196,123,90,0.15)`? Border width? "border-color and border-style can change, not border-width." We can set `border: 1px solid`? Wait never change border-width, but original has no border. Adding border from nothing is maybe changing border-width (0 to 1px) affecting layout. Better avoid border. Use box-shadow inset.

Could use `outline`? Also visual, no layout if outline doesn't affect. But not needed.

For `.contact-channels-section article, .contact-quick-section .contact-card`: If add `background-color`, okay. But `article` might already have background. Overriding okay. If there are many contact channel articles, adding background + shadow on mobile only. Fine. "tight-rhythm" subtle shadows.

Need maybe include `border-radius: 4px;` with box-shadow. Use 3px or 4px. Good.

Should we change `padding: var(--space-md) !important;` to maybe `padding: 16px !important;`? That would be changing a property value. But layout in never-change: padding can change ±20% maximum. The original uses variable. But "font-size, ... padding, margin (keep similar values, ±20% maximum)" It says can change within ±20? But earlier "Never change" includes padding. It says in output requirements: "width, height, padding, margin within ±20% of input?" in self-check. This suggests we may adjust padding within 20%. But "Never change" table says "padding, margin (keep similar values, ±20% maximum)" means can modify moderately. However input's `var(--space-md)` unknown. Need not modify. Keep exact to be safe.

But "font-size" no change. We keep exactly.

Potential issue: If we output added properties, it may not be "rewritten" enough? But okay.

Let's craft final CSS.

Possible final:

@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;
        box-shadow: 0 1px 2px rgba(45, 45, 45, 0.08);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #faf8f3;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(45, 45, 45, 0.05), inset 2px 0 0 #87a878;
    }
}

Need think about "background-color: #faf8f3" on cards may not make cards visible if parent bg same off-white. Maybe use white `#fffdf9`. Good. Use `#fffaf4` maybe. Warm off-white. For badge, terracotta color #c47b5a with off-white. But bootstrap badge text might have color default dark; we set color.

Could include transitions? Maybe no. But "transition timing, easing, duration" as allowed. Add `transition: background-color 160ms ease, box-shadow 160ms ease, border-radius 160ms ease;` But no hover. Could still apply to cards if :hover inherited? not required. But the brief says "Only change colors, shadows, radius, transitions, gradients." Maybe we should add transitions. Let's add to badge and cards. But transitions on mobile may cause no effect. Could use `@media (prefers-reduced-motion: reduce)`? That would add new media, not allowed? avoid.

Could add `transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;` to badge. And `transition: background-color 160ms ease, box-shadow 160ms ease;` to cards. But "transition" doesn't affect layout. Good.

Need maybe use `filter: drop-shadow`? no.

Potential issue: `box-shadow: inset 2px 0 0 #87a878;` plus outer shadow maybe okay. But if `article` elements are grid children with background, inset left bar gives accent. It's visually decorative, doesn't affect layout. Good.

Need perhaps include `.app-hero-section .row .col-lg-7` with `color` because target style soft black. Maybe okay. But if text-align center already; adding color can override text color inherited. Visual only. Could add `text-shadow: none`? no.

Maybe include `background-color: transparent`? no.

Need maybe add `border-radius: 3px` to col? no.

Let's examine whether use "background-color" with badge might conflict with Bootstrap's `.bg-warning` which has `background-color: var(--bs-warning-bg) !important`? Typically `.bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; }` So our background-color without !important won't override. Need use `background-color: #c47b5a !important;`? That may be required. But if we're preserving original, adding `!important` visual override is okay. Could use `background: #c47b5a !important;` to override Bootstrap. But "background" shorthand with color? yes. However "background" is visual, no layout. Should we use `background-color: #c47b5a !important;`? The original `.app-hero-section .badge.bg-warning` specificity 0,3,0? Bootstrap `.bg-warning` specificity 0,1,0 maybe our selector wins anyway. Actually `.bg-warning` class only specificity same? Our selector has 3 classes -> higher. So no need !important. But if Bootstrap uses `!important`, ours could lose. Bootstrap v5's `.bg-warning` doesn't use `!important`? I think `.bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; }`? Let's check memory: In Bootstrap 5.3, `.bg-warning` uses CSS variables with `!important`? Let's recall: 
.bg-warning {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}
Yes, likely `!important`. To be safe, add `!important` to our background-color. But in these tasks, not necessary. But "colors may change" maybe need ensure. Could use `background-color: #c47b5a !important;` and `color: #faf8f3 !important;`? color might be from badge default with no !important, our specificity likely enough. But adding !important not layout. Fine.

Need maybe avoid changing `.badge.bg-warning` warning semantics? Target color palette wants terracotta accent. Yes.

Potential issue with `box-shadow` on cards with `padding: var(--space-md) !important`: if cards are `article` elements, adding box-shadow may create larger visual size but no layout. Fine.

Could choose `border-radius: 2px` due tight-rhythm. Maybe 4px. "Small border-radius (2-6px)". Use 4px. Badge could use 6px. Cards 4. Good.

Need maybe include line breaks preserving original? Yes.

Let's decide 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 !important;
        color: #faf8f3;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(45, 45, 45, 0.08);
        transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #fffdf9;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(45, 45, 45, 0.05), inset 2px 0 0 #87a878;
        transition: background-color 160ms ease, box-shadow 160ms ease;
    }
}
```

Need think about constraints "No @media breakpoints changed". We kept. Selectors exact, including whitespace? okay. "First char = first CSS character." okay.

But perhaps "text-align" in hero col is "typography" and we must keep same. We did. "font-size" in badge keep same. "padding" keep. Good.

Need maybe include "line-height" unchanged? no.

Should we avoid `color: #2d2d2d` in hero col if text-align only? It is a visual change. But maybe it's okay. However if the original page body has color, adding color is allowed? The list of never-change doesn't include color; yes. But "