/* ============================================================
   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 rewrite CSS only. Need obey conservative mode, target style flat-solid etc. Need examine original CSS snippet. It's a media query block with several rules. Need refresh visual identity without changing selectors/layout. Colors, shadows, radius, transitions, gradients. But original has no colors/shadows except font-size padding. Hmm. Need output rewritten CSS preserving selectors and layout, "only colors, shadows, decorative properties". But there are no colors currently. Need perhaps add color properties? However input rules only define text-align, font-size, padding. We can alter padding by ±20%? It has padding: var(--space-md) !important; layout property padding allowed similar ±20%. Need preserve selector exactly. Need maybe no visual changes possible except could change font-size? No, typography fixed. text-align fixed. Could maybe change padding to slightly different? But target says all color values etc. "You must change" maybe but original no visual rules. We should output same selectors with perhaps updated colors? Need not change class names. We can add declarations? Need preserve layout structure; HTML fixed. Can add color, background, border, radius, box-shadow? But we must not change typography or layout. The TARGET style flat-solid: no box-shadow, solid background colors, borders, minimal radius. The media query rules are responsive tweaks. We can add visual decorative properties inside existing rules perhaps. But must be careful: selectors are combined; adding background to .app-hero-section .badge.bg-warning could affect layout? Fine visual. But original likely only has this fragment? User asks "File: assets/css/saishi.css#块2/2" and original CSS snippet. Need rewrite this CSS file? likely only this block. Need preserve @media. Could include same media query and rule selectors. Need perhaps add accent strip? But layout not change. Need "masonry-flow" target? Perhaps for entire file? But only block. Need output CSS that is valid. Since original has no colors, maybe output same with minimal changes to colors? "Every color values ... replaced with fresh palette?" There are no color values. Maybe need add background/color declarations while retaining existing declarations. Is that allowed? The task states "You must change all color values ...". If none, cannot. Could include non-layout visual properties to match style. But "HTML is fixed" doesn't forbid adding declarations. It says "Refresh visual identity WITHOUT changing layout structure or class names." So adding color/background/border/box-shadow okay. But also "ONLY colors, shadows, and decorative properties may change." Actually they may change; no requirement to add. Need maybe modify padding within ±20% to adjust. But not necessary.

Need think: The original CSS snippet uses CSS variables --space-md. We can use that. Maybe set visual identity within this media query:
@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; ... maybe background solid, border-radius 4px, color? }
    .contact-channels-section article,
    .contact-quick-section .contact-card { padding: calc(var(--space-md) * 0.9) !important; border: 1px solid #e5e7eb; background: #fff; border-radius: 4px; }
}

But this might add border to cards, not necessarily desired. Need fresh palette: Pinterest-like white cards, soft shadows on light gray bg, but variant flat-solid means no shadows, solid backgrounds, minimal radius. So maybe set background-color: #fff, border: 1px solid #eee? Minimal radius.

However, if there are existing cards with shadows in other CSS, this fragment might not override. We can override box-shadow: none. But if original doesn't, adding is okay. Need ensure selectors unchanged.

Need consider "text-align: center" maybe class with .app-hero-section .row .col-lg-7; in media query, maybe add color: #4b5563; maybe no. Need not.

The exact original has three declarations. Need "rewritten CSS" maybe should preserve those declarations and add only visual. Let's create a refreshed version:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #fef3c7;
        color: #92400e;
        border: 1px solid #fcd34d;
        border-radius: 4px;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: calc(var(--space-md) * 0.9) !important;
        background-color: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        box-shadow: none;
    }
}

Does this violate layout? padding is var(--space-md) -> changed to calc(var(--space-md)*0.9) = 90% within 20%. Fine. But "padding, margin (keep similar values, ±20%)" yes 10% down. Need not. If we keep var(--space-md) exactly perhaps safer. But we want visual identity. We can keep padding same. Adding background/border etc. But "box-shadow: none" aligns flat-solid. Should we include box-shadow none, though original none? Yes to remind.

But adding "background-color: #ffffff" to contact article may conflict if they already have background. But target style white cards. Good.

Could use CSS variables? Maybe define custom properties? But within media query perhaps no :root. We can use literal values. Need maybe no comments.

Need consider "colors throughout the file replaced with fresh palette?" There were none. Added fresh. Need "no AI marker comments".

Could output exactly this. But maybe there is a trick: "Request ID #ba1e0a7b", "block 2/2" maybe only this block from a larger file? The request expects us to rewrite only CSS fragment. Need not include variable definitions.

Maybe need match target "masonry-flow" but this block doesn't have grid/flex. We shouldn't add layout because conservative mode forbids. Only visual. So ignore target layout pattern; apply variant flat-solid.

Need ensure no @media breakpoints changed: max-width:575.98px preserved. Selector lists preserved. No display etc.

Need "Minimal radius (0-6px)" so border-radius 4px or 6px. Use 6px for cards maybe.

Need "Deep red BOKEH mode"? no.

Need maybe not add `color` to .app-hero-section .row .col-lg-7 because text-align is in media for center, adding color doesn't hurt. But maybe changes if otherwise. Fine.

Need perhaps preserve font-size:0.85rem exactly? Typography fixed. It's currently in original, so keep exactly. Add background etc. Good.

Potential issue: .badge.bg-warning background-color overrides .bg-warning if using Bootstrap. That's visual. Good.

Need "flat-solid: box-shadow none everywhere." Add box-shadow: none to cards and badge? Could add to badge too. But if badge has shadow, add none. Fine.

Need maybe "solid background colors only (no gradients)" no gradients anywhere. Good.

Need output no markdown fences. Let's craft.

But before final, let's think if there is an issue with `.app-hero-section .badge.bg-warning` selector combined: Could adding `border-radius: 4px` conflict with Bootstrap badge pill? It might be class .bg-warning. But visual.

Need maybe maintain all existing declarations and no extra layout. The original had `padding: var(--space-md) !important`; if we keep exactly, then no layout change. But to refresh, maybe change to `padding: calc(var(--space-md) * 0.95) !important;` within tolerance. But if --space-md undefined, calc invalid? Actually if --space-md is not defined, the property invalid, same as before? var() with no fallback makes property invalid at computed-value time, so maybe no padding. If use calc, invalid too. Better keep `var(--space-md)`. Could use padding: var(--space-md) !important; no refresh but okay. Yet need "change padding or margin within ±20%" optional. We can set `padding: calc(var(--space-md) - 2px) !important;` but if --space-md maybe a length, okay. But if --space-md is e.g. 1rem, calc works. The original used var(--space-md), so --space-md defined. We can use `calc(var(--space-md) - 0.125rem)` = minus 2px. But if --space-md is in px? calc accepts. But maybe risky. Since "keep similar" we can simply preserve padding to avoid layout. But visual refresh doesn't need padding change.

Need maybe add `border-radius: 6px` to contact cards. If this media query is applied on small screens, all cards get border/background. Could be desired. But if original CSS snippet doesn't include the card's base style, adding background/border in media query might override at small screens only, creating inconsistency. However rewriting this block is supposed to refresh entire visual identity maybe only this block. We can't see other blocks, but request says block 2/2; maybe base styles are elsewhere. Adding visual declarations here only affects small screens. That's okay.

Need maybe use CSS custom properties for color palette? Could add `--card-surface: #ffffff;` not in this media perhaps no. But literal colors fine.

Need perhaps choose palette according to target: Pinterest-like white cards, soft shadows on light gray bg but flat-solid variant no shadows. Use white cards with subtle gray border plus perhaps colored accent strip. "Each card may have its own accent strip" from target style but flat-solid. We can add `border-top: 3px solid #f59e0b` to contact cards? But that changes border style/width? The rule forbids "border-color and border-style (NOT border-width)"? Wait, "never change border-width" means don't alter border widths. Adding border-top-width 3px would violate? It says border-color and border-style can change, NOT border-width. So we should avoid adding border width that didn't exist? But adding a border entirely introduces width. Is that allowed? It says "never change border-width"; if there is no border, adding one could be a layout change. Better not add borders with widths? Hmm.

Important: The "NEVER CHANGE" list includes "border-color and border-style (NOT border-width)" in the "Can change" list: Actually it lists under "You must change": "border-color and border-style (NOT border-width)". Under "never change": "width, height", not border-width explicitly? Wait, original says: "border-width" not in "never change" list? Let's reread: Under ✅ MUST CHANGE: "border-color and border-style (NOT border-width)" means don't change border width. Under 🔒 NEVER CHANGE: "padding, margin", "width, height", etc. It doesn't explicitly list border-width in never change, but "border-color and border-style (NOT border-width)" implies border-width should remain same. If adding new border, you add width, which is technically adding to box dimensions if box-sizing content-box; if border-box, no layout? But in CSS, border width affects layout unless box-sizing border-box. Good to avoid adding new border widths. But original cards maybe already have border? No. Could we add accent strip via `background` gradient? But target flat-solid no gradients. Could use `outline`? Outline doesn't affect layout but "outline-color can change", not width. Can't change outline width. Adding outline with width might be considered new visual, but outline doesn't affect layout. Is outline-width allowed? It's a visual property but not listed; safer not.

Could use `box-shadow: none` as required. But flat-solid says no shadows, so don't add. If adding shadow, not.

Could use background colors only. Maybe add `background-color: #f9fafb` to `.app-hero-section .row .col-lg-7`? But that could change entire hero. Fine. But no need.

Need perhaps change `border-radius` only, no new border. We can add border-radius to existing elements if they have backgrounds/borders. If no radius before, it's visual. Good.

Could set `border-radius: 4px` on badge. If badge is block? It may have border-radius from Bootstrap. Good.

Could set `border-radius: 0 0 6px 6px`? Minimal.

Need perhaps set background colors with `!important`? Not necessary.

Need maybe use exact rule order. Let's simulate output:

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

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

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

Need consider if `.contact-channels-section article` may be a semantic element; adding white background to article while parent has light gray? Good. But if it had margin etc no.

Would "flat-solid" require "defined by color contrast and borders"; we have no border. Could use background and maybe existing border? Maybe add `outline: 1px solid #e5e7eb`? Outline doesn't affect layout? It may draw outside without affecting layout; can use outline-color and outline-style. But "outline styles (color, type)" are allowed; outline-width not. Adding outline-width 1px maybe not allowed? Hmm.

Maybe use `border: 1px solid #e5e7eb` with `box-sizing: border-box`? But cannot change box-sizing? It is allowed? In "never change" list, box-sizing is forbidden (shouldn't change). If we add border with box-sizing default content-box, padding + border changes element width inside flex/grid, could alter layout. So avoid border.

The target style "flat-solid" often uses no border, just solid backgrounds with contrast. Could add a colored top strip via `background-clip: padding-box` no.

Could use `box-shadow: none` and `border-radius` as only visual changes. But "flat-solid" says minimal radius, so use 4px, 6px. Good.

Need maybe "Colors throughout file replaced with fresh palette" but output has colors. Good.

Should we include color #374151 in hero text? It might darken text.

Could perhaps set `.app-hero-section .row .col-lg-7 { text-align: center; background-color: transparent; }` but no.

Need maybe use "Pinterest-like" palette: off-white background #f7f7f7, white card #fff, subtle warm gray border #e5e5e5, accent #e60023. In flat-solid no shadow. We can set badges background #fde8e8 and color #c81e1e etc. But original badge is `.bg-warning` (Bootstrap warning yellow). Maybe preserve warning style but refined. Actually `bg-warning` likely originally yellow background; in flat-solid, use solid yellow `#f59e0b` or softer `#fef3c7`. Since class `bg-warning` should remain warning-ish. Use `background-color: #fbbf24; color: #78350f;`. But if badge text small, contrast. Could use `background-color: #f59e0b; color: #111827; border-radius: 4px;`. However with bootstrap .badge.bg-warning, default color is dark? `bg-warning` uses `--bs-warning-rgb`. We can override.

Need maybe add `border-radius: 999px`? But target flat-solid minimal 0-6px, so keep 4px.

Need maybe set `.contact-quick-section .contact-card` background #fff; but if contact-card already has shadow, adding `box-shadow: none` ensures flat. However if existing style uses box-shadow, this media query might not override due specificity? `.contact-quick-section .contact-card` same. But `box-shadow: none` with no !important maybe same specificity, source order likely this block after base? Since this file block 2/2 likely after base, so okay. To override existing shadow robustly, add `!important`? But original used `!important` on padding. Could add `box-shadow: none !important` to force flat. Is that too aggressive? It's visual only. Could do. But output should not overdo. Maybe `box-shadow: none !important;` to ensure no shadow. The target "no shadows everywhere" maybe good. But adding !important could be seen as visual. Fine.

Need perhaps set `background-color: #fff !important`? Might override background. But no need.

Let's see self-check: selectors preserved; no display changes; no width changes; no font-size changes except keep; colors added; shadows none; radius adjusted; no comments. Good.

Need maybe output only CSS no fences. Let's final with robust version.

But let's explore if there is an alternative request: They provided original CSS with @media (max-width:575.98px) block; maybe they want whole block "块2/2" from a file. The CSS is tiny. Could the "Target style: masonry-flow" mean we should convert this block to masonry-flow? But conservative mode says HTML fixed, no layout changes. So no.

Need maybe include `padding: calc(var(--space-md) * 0.9) !important;` to "change padding within ±20%" but maybe no. We can keep exactly to avoid layout change. Target says "padding, margin (keep similar values, ±20% maximum)" means you can change but not necessary. Better not alter layout properties at all. However "visual identity" can be achieved via