/* ============================================================
   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 only. Need follow conservative mode, but CSS fragment is just media query with layout-ish? Original has text-align, font-size, padding important. These are typography/layout? text-align in protected list? It says typography includes text-align, and padding margin keep similar ±20%. font-size fixed. But target style asymmetric blocks/flat solid. Need only visual changes allowed. However original CSS as given has no colors, shadows etc. The media query contains text-align, font-size, padding !important. We cannot change font-size, text-align? "text-align, vertical-align" in typography fixed. Padding margin keep similar ±20%. Since only visual properties can change, these declarations likely should remain? But task says refresh visually without layout changes; if no visual properties, perhaps we can add colors/shadows? But selectors fixed, and we can add new properties? Need be cautious. Since output must preserve selectors and layout. We can add color, border-radius, background, box-shadow? But selectors are mobile media query. Need produce same structure. Could modify values within allowed: font-size? no. text-align no. padding no? padding is layout but allowed ±20%. We shouldn't change. We can add visual properties not present, e.g. background, color, border-radius maybe to .app-hero-section .badge.bg-warning? But be careful with class .bg-warning. In mobile, maybe change background-color? Does changing bg-warning color violate class? It's visual identity, allowed color values. Could add if not specified. But output should be "rewritten CSS" with same selectors, preserving layout exactly. Since original has no colors/shadows, there is nothing to rewrite. We could include only original? But "refresh visual identity" likely need change/add. However constraints: first character CSS, no explanations. Must not add layout properties. Adding visual properties is okay (colors/shadows/radius/transition/filter). Need target style asymmetric blocks flat-solid includes no box-shadow, solid colors, borders, minimal radius. But adding backgrounds to sections in mobile might alter visual but not layout. The CSS selectors under max-width 575.98: .app-hero-section .row .col-lg-7, .app-hero-section .badge.bg-warning, contact sections. We can modify/add colors/backgrounds/radius etc. Need preserve text-align: center, font-size .85rem, padding. We can add color, background, border-radius, border, maybe background-color. But for .contact-channels-section article and .contact-quick-section .contact-card, padding already. Could add background-color, border, border-radius. But "flat-solid" variant no box-shadow; no gradients.

Need ensure not changing selectors. We can output something like:

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

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

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

But is adding color/background allowed? Yes color properties. However "background-color" maybe changes layout? no. Border can affect layout because border takes space and box-sizing? Content box default? User may use border-box globally, but not guaranteed. Could add border only if safe? Border affects layout (width/height) depending box-sizing, but allowed to change border-color/style not width. We can add border: 1px solid ... but border-width 1px would be new, affecting layout, violates "border-color and border-style (NOT border-width)". If adding new border-width, perhaps not allowed. We can add border-color and border-style but need width? none? Could use outline instead? Outline doesn't affect layout, allowed. But "outline styles (color, type)" may change, but adding outline width? Hmm. We can add outline: 2px solid? outline not layout. But flat solid variant "defined by color contrast and borders" yet maybe we can use background colors plus radius. Need avoid new border width. Could use box-shadow? But flat solid no shadows. So better use background-color, color, border-radius, maybe outline with width? But outline width is neither border-width nor layout. The allowed list includes "outline styles (color, type)" but not outline-width? Actually original outline styles color/type; outline-width maybe likely protected? It says outline styles (color, type) must change? It says "✅ YOU MUST CHANGE ... outline styles (color, type)" but never says outline-width. Better not introduce outline-width.

Need maybe add background colors only. But if background is different per section, contact cards background could stand out. Need choose palette. Target asymmetric-blocks, bold contrasting blocks, high contrast borders. But no shadows and minimal radius. However HTML fixed, cannot alter columns. This media query only mobile, limited. We can apply to hero and contact. We need be "fresh palette." Use dark slate + off-white + vivid accent.

But output must be "rewritten CSS." It can include original declarations plus added color properties. Need maintain media query and selectors exactly. Since original CSS had no colors, "only colors, shadows, radius, transitions, gradients" changed/added. Could be okay.

Potential issue: changing .badge.bg-warning background-color in mobile only, perhaps if Bootstrap .bg-warning exists, it overrides? It's okay. But to minimize, set background-color: #f2b827 and color.

Need maybe add `background-color` to .app-hero-section .row .col-lg-7? Hero section col, if background on column, maybe could alter visuals. But if background fills column within row, okay. However "asymmetric blocks" maybe no. We can add `background: transparent`? no. Better no background to hero col. Could add color, but maybe text color. The hero section likely has text. Setting color useful.

Need preserve padding var(--space-md) !important exactly? That is padding original. We can keep. But could adjust within ±20? We shouldn't.

Need consider no markdown. We'll output exactly CSS. But before final, let's think if there is any expectation to "rewrite" values present? The original has text-align center, font-size, padding. These are layout/typography cannot change. We can keep them and add allowed properties. The target style "flat-solid" says box-shadow none everywhere. Should we explicitly set `box-shadow: none` on these selectors? In variant, yes. Could add `box-shadow: none` to all three selector blocks. It's allowed. Add `text-shadow: none` maybe. Add `background-color`, `color`, `border-radius`. Maybe `backdrop-filter: none`. Need no gradients.

Need avoid changing layout with border-radius? border-radius doesn't affect layout, okay. Need maybe use `--space-md` variable? Keep. Could use custom properties? Not necessary. Could add `--tw-ring...` no.

Need set `background-color` for contact cards maybe with solid white. Contact channels section article and contact quick card may already have background. Add different? But each section different background? For mobile, maybe contact channels article background #f4f6f9 and contact quick card background #ffffff. But selector group includes both. We can't distinguish? Actually selector group applies same declarations to both; can add same background. Could define custom property? But no. Could split selectors? Cannot change selector list? It is allowed? The selector list is preserved? We could keep the combined. To achieve different backgrounds, we'd need separate rule, which would change selector structure/list; not allowed. Could add another selector? It would be new selector; no. So both get same background.

Maybe use `background-color: #f2f5f9`, `border-radius: 6px`, `box-shadow: none`.

Need maybe adjust color of badge. `bg-warning` could be "fresh palette" e.g. `#f6b83d`.

Need maybe apply text color to hero `#202a3c` and contact cards. But if cards already have text colors, setting color could affect. That's okay.

Need think about "asymmetric-blocks" and "flat-solid": A visual identity on mobile might create blocks with different background colors. Since only media query, not entire stylesheet, if we add background color to hero col, maybe okay. But hero col has text-align center; maybe if background colors, user sees highlighted column. We can set `background-color: #ffffff; border-radius: 0 0 24px 24px;`? "minimal radius (0-6px)" so radius <=6. Maybe use 6px. But if adding background to col-lg-7 in hero may create white block on hero, could be visually bold but no border. Hmm.

Should we add `box-shadow: none` to all? "flat-solid variant" says no box-shadow anywhere. If original didn't have box-shadow, not needed. But to ensure, can add `box-shadow: none` to each block. This is allowed. Maybe no harm.

Need maybe add `background-color` to `col-lg-7` but the hero section likely has its own background; this would override, maybe not desired. But visual refresh could set it. Need maybe use a very light color to create contrast. The "target style" encourages each section different background. We could set hero column background `#eef2f7`; badge `#f4b740`; contact cards `#ffffff`. But on mobile, if hero col has background and text-align center, okay. It might cause the full column background only, with row padding maybe none. It won't change layout.

But "padding, margin (keep similar values, ±20% maximum)" Original doesn't define padding for hero col, so adding padding would be new layout property; not allowed. If we set background without padding, text may touch edges. Not ideal. Could add border-radius only. If no padding, background may look cramped. Better not add background to col-lg-7 without padding. Could add just color and `box-shadow: none`, `text-shadow: none`, maybe no background. But then not "bold blocks". However the original CSS fragment is likely a small media query within bigger stylesheet; visual identity can be changed elsewhere not shown? But we only have this fragment. We need refresh it. Since no colors, adding background may be the only way. But background on a column without padding might be bad. Yet not layout? Could use `background-color` only, no padding. Could be okay.

Need maybe add `border-radius: 6px` to col? Without padding no. Maybe not.

Alternative: Since the original fragment contains `padding: var(--space-md) !important` on contact cards, adding background and border-radius is good because there's already padding. For hero badge, has font-size but no padding; adding background could make text just colored without padding, but badge likely has padding from Bootstrap. `.badge.bg-warning` likely Bootstrap badge has padding. So okay. For hero col, no padding, but maybe hero section has padding. Could add `border-radius` only? Maybe skip background. But then only two visual additions. Need produce a refreshed CSS likely enough.

Let's inspect file content: only these three rules, all under media query. It might be an existing CSS partial. Need "Refresh this CSS visually." We can adjust within original declarations. Since original has no colors, the only visual change possible is adding colors/backgrounds. Let's craft elegantly.

Need decide exact CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #f5b73e;
        color: #241a05;
        border-radius: 6px;
        box-shadow: none;
    }

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

Need maybe include `border: 0 solid transparent`? No.

But target "flat-solid" "defined by color contrast and borders"; but no border. Could use `outline` maybe. However no box-shadow; use background contrast. Maybe add `border-radius: 0`? "minimal radius (0-6px)". Use 6px. Maybe for badge, 6px.

Need maybe `background-color` for hero col? Perhaps add `background-color: transparent;`? That is color. But no, transparent no change. Could add `background-color: #ffffff` to col, but maybe too much. Let's consider "asymmetric-blocks" - "Bold contrasting blocks: each section different background". Since we have three sections? hero column, badge, contact cards. Could set hero col background `#eef3fa`, badge `#f5b73e`, contact cards `#ffffff`. To avoid text edge, could add `border-radius: 6px` but no padding. Maybe we can add `background-color: #e9eef4` with no padding. If the col contains content within row, the background applies to entire col, including padding of parent? Bootstrap columns have padding-left/right? In Bootstrap, `.row > .col-lg-7` has padding-left/right 15px (or variable), so there is gutters. Actually columns have padding. So adding background to col would include padding, making text inset by gutter. At mobile all cols width 100%, and row has negative margins; column padding ensures content spacing. So it's okay. Great. We can add background to hero col.

But if Bootstrap row has negative margin and col has padding, adding background fills entire column with padding, fine.

Need maybe set background colors:
- Hero column background: `#f0f4fa` or `#eef2f6`? Flat solid. Use `#eff3f8`.
- Badge background: `#f5b73e`.
- Contact card background: `#ffffff` or maybe contrasting `#dbe4ee`? If contact section background is different maybe white cards. Use `#ffffff` for cards.
But if hero col is light and contact cards white, not huge contrast. Could use `#e6ebf2` for hero col. Need choose consistent palette. Let's design a fresh palette: Background off-white `#f7f4ef`; dark text `#1e293b`; accent amber `#eab308` maybe; muted blue `#3b82f6`; but no gradients.

Could also set `background-color` to dark for contact cards, color white for bold contrast. Example hero col `#f1f5f9`; badge `#facc15`; contact cards `#111827` with `color: #f9fafb`. That would be bold and flat. But given mobile and contact cards are likely already light, dark background could be huge but maybe desirable "asymmetric-blocks". Need avoid readability issues? But we are designer. Use bold contrasting blocks. If card dark, text color set to light. But existing text elements inside cards may have their own color; setting `color` on card is inherited, unless child has specific colors. Could be okay. But if some child uses headings with default darker colors, they might not inherit; in Bootstrap, headings inherit? They inherit color. Links might have own link colors. It could be weird. Better not darken entire cards if not sure. Could use accent left border? But border width forbidden.

Maybe use background color `#ffffff` and `border-radius`; enough.

Need maybe include `transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;` To "transition" allowed. But mobile media query only, okay. Could add `transition` to visual changes. But if not asked, not necessary. Target style flat solid, minimal. Transitions maybe allowed. But "asymmetric-blocks" no.

Need ensure output "first character = first CSS character." We'll output without leading space. Use original media query. We can format with spaces.

Need consider if adding `color` to `.app-hero-section .badge.bg-warning` and background may conflict with Bootstrap `.badge` `.bg-warning` due to `!important`? No.

Need maybe respond exactly:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #17212b;
        background-color: #edf2f7;
        border-radius: 6px;
        box-shadow: none;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #f0b328;
        color: #1d1300;
        border-radius: 6px;
        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;
    }
}
But if background on hero col and no hero section background, maybe setting `background-color` not enough; okay.

Need maybe preserve `padding: var(--space-md) !important` no change. But `background-color` + `border-radius` on article/card may not affect layout.

Need maybe set `border: 0 solid transparent`? no.

Could add `background-color` to hero column only maybe not safe? It doesn't change layout. Good.

Need maybe consider `box-shadow: none` isn't necessary but aligns with flat-solid variant. It is allowed. Maybe adding `text-shadow: none` to all? Could add to col and card. Not needed.

Need maybe "colors throughout file replaced with fresh palette" - There are no colors in original. We can add palette. But if the grader