/* ============================================================
   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 CSS file with visual changes only, following the target style "horizontal-strips" with effect variant "flat-solid". The original CSS is a media query block:

@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 keep selectors exactly, keep layout properties mostly (text-align, font-size, padding). But we can change colors, shadows, radius, etc. However, in this media query block, there are no colors, shadows, radius, transitions, gradients. The properties are text-align, font-size, padding. These are layout/typography properties that are in the "never change" list. But we are instructed to refresh visually. Since the original CSS has no visual properties besides those, we might need to add some? The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." So we can add new visual properties? We must preserve the existing layout and typography exactly. We can add color, background, border, etc. But we should be careful not to break the layout. 

The target style is "horizontal-strips" and effect "flat-solid". The media query is for mobile. We can enhance the visual identity by adding colors, borders, shadows (though variant says box-shadow: none everywhere), minimal radius, etc. But we must not change layout. We can add background colors to the elements? The elements are .app-hero-section .row .col-lg-7, .app-hero-section .badge.bg-warning, and .contact-channels-section article / .contact-quick-section .contact-card. We can add visual styling like background, border, border-radius, color, etc. But the target style says "box-shadow: none everywhere" and "Minimal radius (0-6px)". So we can add border-radius to those elements, maybe add background colors for the strips? But that could affect layout? Not layout, but visually. 

The instruction says "You must change all color values ...". Since there are none, perhaps we should add them. However, the prompt says "Only change colors, shadows, radius, transitions, gradients." That implies we can modify existing color values; but if none exist, we might add them? It says "NO AI-REWRITTEN comments" and "Only the rewritten CSS, preserving ALL selectors and layout exactly". The safe approach is to preserve the existing declarations exactly, and add new decorative declarations that do not affect layout. But we need to consider that adding background colors could affect the visual layout? It won't change layout, only paint. Padding remains the same. 

But the target style "horizontal-strips" suggests full-width sections with alternating background colors. In this media query, the elements are inside sections. The .contact-channels-section article and .contact-quick-section .contact-card could get alternating backgrounds? But to maintain consistency, we can add a fresh color palette.

However, the original CSS is very small. We need to output a rewritten version. We must ensure every selector is preserved. We can also adjust the values within the allowed properties. For example, the padding value uses var(--space-md) !important. We should not change padding because it's layout. We can keep it. font-size is typography, keep. text-align is layout/typography? It's in the "Typography" list? Actually text-align is in layout? The list says "text-align, vertical-align" under typography? Let's see: In the "NEVER CHANGE" section, under "📐 LAYOUT" at the end it says "text-align, vertical-align". So text-align is layout. We cannot change text-align: center. So keep.

So our task is simply to add visual properties? The problem statement says "You must change all color values: background, color, border-color, fill, stroke, outline-color" but if there are no color values, then there's nothing to change. However, the instruction "Refresh this CSS visually" implies we should create a new visual identity. Since we cannot change layout, we can add colors and other decorative properties. But is that allowed? The "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" suggests the output should be a full valid CSS file, likely with the same selectors and properties, plus new ones. 

Let's think about the target style. "horizontal-strips" is a layout pattern, but the instruction says "Layout pattern (Aggressive only)" and then describes full-width sections. But we are in conservative mode: HTML fixed, visual changes only. So we cannot change layout to make strips. We can only use colors to create visual strips. For example, we can set background colors on the sections/elements. But the elements we have are not the sections themselves, but components inside sections. We could add background colors to those elements to create contrast.

The effect variant "flat-solid" says box-shadow: none everywhere, solid backgrounds, no gradients, minimal radius. So we should avoid box-shadow. We can add border-radius up to 6px. We can add borders maybe.

We need to ensure the selectors and existing declarations are preserved exactly. Let's parse the original CSS:

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

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

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

We must keep @media max-width: 575.98px. Keep selectors. Keep text-align, font-size, padding. We can add new declarations inside each rule, but we must not change the existing ones. For example, we can add background-color, color, border, border-radius, etc. However, adding `color` to the first rule might be fine. But we need to choose a color palette that fits the target. Since the variant is flat-solid with white/cream/dark alternating. Let's define a palette:

- White: #ffffff
- Cream: #fdf6e3 or #f5f0e6
- Dark: #2d2a26 or #1a1a1a

We can apply:

For .app-hero-section .row .col-lg-7: maybe add `color: #2d2a26;` and `background-color: #ffffff;`? But the hero section might already have background; adding a background to the column could create a strip? Hmm.

For .app-hero-section .badge.bg-warning: the badge has a Bootstrap "bg-warning" class, which gives a yellow background. We can override with a different warning color? We can set background-color and color and border-radius. For example, `background-color: #e67e22; color: #ffffff; border-radius: 4px;` But that might conflict with Bootstrap. That's okay.

For .contact-channels-section article and .contact-quick-section .contact-card: we can add `background-color: #f5f0e6; border: 1px solid #e0d6c8; border-radius: 6px;` But note these elements are being padded with var(--space-md) !important. Adding background and padding will create visual cards. But the target style says "Minimal radius (0-6px)" so 6px is okay. Also no box-shadow.

We should not add `width`, `height`, `display`, etc. We can add `border-radius`, `background-color`, `color`, `border`, maybe `transition`? But the effect variant says flat-solid, but we can still have transitions? The instruction says we can change transition timing, easing, duration. But we shouldn't add new properties? It says "Only change colors, shadows, radius, transitions, gradients." That could mean we can modify existing ones, but adding new ones is plausible. However, to be safe, we should not add transitions because they are not present. The instruction says "Only change ..." meaning the only properties we are allowed to alter are those categories. We can change existing values. If none exist, we might add them? The "✅ YOU MUST CHANGE" list includes "All color values: background, color, border-color, fill, stroke, outline-color". Since there are none, maybe we should introduce them? The phrase "Refresh this CSS visually" implies we should make it visually different. The original is already visual. But the original contains only layout/typography. To refresh visually, we must add visual properties. Otherwise, the output would be identical. 

Given the task, likely the expected output is a new CSS with the same selectors but with added color, border, radius, etc. That is the only way to fulfill "Refresh the visual identity". So we will add visual properties.

We must ensure not to change the values of existing properties. We keep them exactly. We can add new declarations.

Let's craft a style that aligns with horizontal-strips and flat-solid.

Potential output:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #d97706;
        color: #ffffff;
        border-radius: 6px;
        border: 1px solid #b45309;
    }

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

This adds visual style. But we need to consider the "horizontal-strips" pattern: alternating backgrounds per strip. The first element is white, second is dark/orange, third is cream. That doesn't exactly create full-width strips, but gives contrasting elements. 

But maybe we should not add background to the hero column because it might be a full-width strip already? The selector `.app-hero-section .row .col-lg-7` is a column inside a row, not necessarily full width on mobile (col-lg-7 might stack). On mobile, all columns are full width by default. So adding a background to that column could create a strip. But the row itself might have the section background. We don't know. Since we are only changing visual properties, we can set the column to have a background to define a strip.

Target palette says "Alternating: white / cream / dark / white pattern". We can set the hero column to white, the badge to dark/orange, and the contact articles to cream. But the badge is a small element, not a full strip. Maybe for the badge, we can keep the `bg-warning` override with a strong dark color? The palette says "Strong color zones". We could use a dark color for the badge background.

Let's decide on a cohesive palette:

- Color 1: #ffffff (white)
- Color 2: #f5f0e6 (cream)
- Color 3: #1e1e1e (dark)
- Accent: #c2410c (burnt orange) maybe.

For the badge, since it's a warning badge, we might want a warm accent. Let's use `background-color: #c2410c; color: #ffffff; border-radius: 4px; border: none;` But `bg-warning` already sets a background. We can override. The variant says flat-solid, no gradients. Good.

For the contact cards, we can use cream background, dark border? Maybe border: 1px solid #d6c7a8.

For the hero column, we can use white background and dark text. But since it's already on a light background, adding white might not be visible. Maybe use a dark background for the hero column to create a contrasting strip? The pattern is "white / cream / dark / white". The hero section is the first strip, maybe white. But the badge is inside hero. The contact section is later. Let's assign:

- Hero column: background: #ffffff; color: #1e1e1e;
- Badge: background: #1e1e1e; color: #ffffff; border-radius: 4px;
- Contact articles/cards: background: #f5f0e6; color: #1e1e1e; border: 1px solid #d6c7a8; border-radius: 6px;

This gives alternating white, dark (badge), cream. But horizontal strips pattern suggests full sections, not small elements. However, the elements we can style are limited. We could also style the body or sections if there were selectors, but there are not. So this is the best.

We must not add "outline" or "box-shadow" because flat-solid says box-shadow: none. We can add `outline`? No need.

Also, the instruction says "transition timing, easing, duration" - we can change existing transitions, but there are none. We might add transitions to background-color for hover? But we don't have :hover rules. Adding transitions to base rules might be fine. But the "Only change transitions, gradients" maybe means we can modify these categories. Let's add `transition: background-color 0.2s ease-in-out;` to the elements? That would be a new property, but allowed? It says "Only change ... transitions" means if there are transitions, change them. It doesn't necessarily forbid adding. But to be conservative, we can skip transitions. The target variant flat-solid likely doesn't need transitions. But the instruction says "transition timing, easing, duration" under MUST CHANGE. Since none exist, we can't change them. We don't need to add.

Let's review the "NEVER CHANGE" list includes `text-align` and `font-size` and `padding`. We keep them.

We need to ensure margin/padding within ±20% of input. We keep padding exactly the same (var(--space-md)). Good.

Font-size remains 0.85rem. Good.

Now, we must output only the CSS. Let's write it:

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

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

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #f5f0e6;
        color: #1e1e1e;
        border: 1px solid #d6c7a8;
        border-radius: 6px;
    }
}

We should check if we need to preserve the original property order? Not necessary. But preserving existing declarations first is okay. We added new ones after.

One issue: The `.app-hero-section .badge.bg-warning` selector might rely on Bootstrap's `bg-warning` background color. We override it. That's fine.

Another issue: The `.contact-channels-section article` and `.contact-quick-section .contact-card` are two selectors, and we add border-radius and background. That might make cards look different. Good.

Should we add `box-shadow: none;` explicitly? The variant says "box-shadow: none everywhere". To ensure no shadows from other rules, we could add `box-shadow: none;` to each rule. But the instruction says "box-shadow: none everywhere" as part of the variant. Adding it is a color/shadow change. It doesn't break layout. But it might be unnecessary if there are no existing shadows. However, to be safe and comply with "flat-solid", we can add `box-shadow: none;` to each rule. But that would be an added declaration. It's allowed. Let's do it? The target style says "box-shadow: none everywhere". We can add `box-shadow: none;` to each of the three rules. That ensures no shadows. 

But wait, the original CSS didn't have box-shadows, so adding none is redundant. Yet the variant explicitly says that. We might include it to demonstrate compliance. Also, the instruction says "You must change all box-shadow ... fully redesign with multi-layer effects" but the variant says none. Contradiction? The variant overrides. So we should set `box-shadow: none;`.

Let's add `box-shadow: none;` to each rule. Since it's a visual property, okay.

Also, we should consider `border-radius` minimal 0-6px. We have 4 and 6. Good.

Now, what about `outline-color`? We don't have outlines. Could add `outline: none;`? No, we should not because outline might be used for accessibility. Not needed.

Let's finalize.

But wait: The target "horizontal-strips" says "Full-width sections (width: 100%)" and "Each strip with distinct padding (60-100px vertical)" and "Alternating background colors per strip". We cannot change width or padding. So our output doesn't really create horizontal strips. But maybe the media query is for mobile and the existing layout already creates full-width stacked sections. Adding background colors to these elements might create the strip effect for those containers. The `.contact-channels-section article` likely is a full-width card in mobile, so setting background cream creates a strip. The `.app-hero-section .row .col-lg-7` is likely full width on mobile, so white background creates a strip. The badge is small, not a strip, but it's a strong color zone. So it's acceptable.

We could also set the `article` and `.contact-card` to have alternating backgrounds? There are two selectors combined, but they are for different sections. We could set them all to