/* ============================================================
   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 CSS only. Need rewrite colors etc but original has no colors, only media query with text-align, font-size, padding. We must preserve selectors and layout. Since no color properties, but task asks refresh visual identity without changing layout. Need maybe add new properties? We can only change visual properties. There are no colors/shadows. Could add visual properties? Need be careful "HTML fixed only colors, shadows, decorative properties may change". We can add color? But selectors fixed, layout fixed. Original has font-size, padding. "Typography fixed: font-size, line-height cannot change" So cannot change font-size. Padding can change ±20%. But original CSS is inside media query. We can maybe add background/border-radius/box-shadow to these elements? But "class names" etc. We can add color under same selectors. But "Layout pattern: masonry-flow" and "effect variant: flat-solid" with box-shadow none. Yet original no shadow. Need maybe set relevant visual properties to match flat solid style: no gradients, minimal radius, solid colors. But without knowing original site. We can add background and border to section elements? However "display, position ... unchanged". Adding color/background to elements okay. But maybe risky? Need output only CSS, preserving selector list.

Need assess file fingerprint etc. Could be puzzle where need "only colors, shadows, decorative properties". Since original CSS has no colors, perhaps expected to output same selectors with added visual properties. But target "masonry-flow" describes layout pattern but "Aggressive only" maybe irrelevant; Conservative mode. Need perhaps style article/contact-card with white cards, soft light gray bg? However these selectors are contact sections, not hero. Need maybe apply background colors.

Let's parse 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;
    }
}

Need preserve selectors, media query. We can change values? layout only not font-size. font-size must unchanged. padding can vary ±20%. But var(--space-md) maybe variable value. Could change? "CSS custom properties values can change" if --space-md defined elsewhere maybe but not in this file. But we shouldn't introduce variables maybe.

Need implement visual refresh: maybe add `color`, `background-color`, `border`, `border-radius`, `box-shadow: none`, `outline`, `transition`, etc. But adding box-shadow none is weird. "flat-solid: box-shadow: none everywhere". We can add `box-shadow: none;` to relevant cards. But if we add to hero? Maybe not needed.

Maybe we can add `background-color` and `color` to `.contact-channels-section article, .contact-quick-section .contact-card` to make cards white with border and radius. But "Do not change layout" okay. Need "minimal radius (0-6px)". Use `border-radius: 6px;` and `border: 1px solid #e5e7eb;`, `background-color: #ffffff;`, `box-shadow: none;`. Also maybe for badge: `color: #78350f; background-color: #fbbf24; border-radius: 9999px;` But `.badge.bg-warning` already likely Bootstrap warning colors. But we can reset? But adding background-color to `.bg-warning` changes Bootstrap class? Yet within media query after original maybe overrides. Could be okay. But font-size unchanged.

Also `.app-hero-section .row .col-lg-7 { text-align: center; }` no visual. Add `color: #1f2937;` perhaps. But that's arbitrary.

Need perhaps add `transition` property? They said transition timing, easing, duration can change; adding transition not layout. Could add `transition: background-color 0.2s ease, border-color 0.2s ease, border-radius 0.2s ease;` But if no hover, doesn't matter. Could use `transition` on card.

Need think about the "masonry-flow" target: only relevant if modifying layout but in conservative mode no layout. We should ignore layout pattern? The prompt has target style but says "Layout pattern (Aggressive only)" means not applicable. So only color palette and effect variant. Color palette: Pinterest-like white cards, soft shadows on light gray bg. But effect flat-solid wants no shadows. Use white cards, light gray border or background. Maybe "Defined by color contrast and borders". So use white cards with border. Since only these selectors, apply to cards.

Need maybe set `background-color: #f8f9fa` on hero? But that would be layout? no. But no selector for body. Could add? Only selectors in originals. We need preserve all selectors. Could add root? But no.

Let's formulate 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;
        color: #451a03;
        background-color: #fbbf24;
        border-radius: 6px;
        box-shadow: none;
    }

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

Need maybe change padding? Can't because var. Could keep. Maybe use padding: calc(var(--space-md) * 0.9) !important; but that changes semantics perhaps. "keep similar values". Could leave.

Need maybe avoid changing `text-align`? It's layout, but original has it; we keep same. We can keep.

Question: Is `app-hero-section .badge.bg-warning` a combination of utility class, but adding background color may override. Fine.

Need consider `color` property: typography fixed? "color" is not typography? Actually typography includes color? They list color under must change, and typography font family/size etc. So color can be changed. Good.

Potential issue: "No gradients", but bootstrap has bg-warning maybe gradient? no.

Need maybe include `outline`? Could set `outline: none;`? Unnecessary. Need maybe set `accent-color`? not relevant.

Need perhaps include `border-style` and `border-color` only. "border-color and border-style CAN change; NOT border-width." We're adding `border: 1px solid` includes width, violating! Since original had no border property. The prompt says "border-color and border-style (NOT border-width)" — adding a border-width likely violates. So we should not use `border: 1px solid`; instead use `outline`? They say outline styles (color, type) can change. Or use `box-shadow: 0 0 0 1px ...`? But effect flat-solid says box-shadow: none. Hmm. We need respect not changing border-width. If we add `border-width: 1px` we set border width, forbidden. But maybe because original had zero border-width; "NOT border-width" means cannot change existing width? It says border-color and border-style can change, NOT border-width. Adding border width would violate. Could use `outline: 1px solid`? Outline width also? They say outline styles (color, type) can change; doesn't explicitly say outline width. But likely width can? Better use `outline: 1px solid #e5e7eb; outline-offset: -1px;` But outline width is still width. However outline is decorative, not layout, and allowed? They mention outline styles, color, type. Maybe they don't want outline-width? The forbidden list only says border-width. In flat-solid, outline could define contrast without affecting layout. Need maybe use background and box-shadow? But "box-shadow: none everywhere" variant means no box-shadow. So outline is best for borders. But we should be cautious: outline may interact with accessibility focus but okay.

Maybe use `border-color` and `border-style` but if no width then no visible border. Existing has no border, so maybe adding border-width not allowed. But if we consider that layout not affected because no border-box? It can affect dimensions? Border-width default is medium if style not none, can change layout. That's why forbidden. So definitely avoid border. Use `outline` with `outline-width`? Outline doesn't affect layout flow, but user specifically "outline styles (color, type) can change"; perhaps they permit outline. We can use `outline: 1px solid #e5e7eb; outline-offset: -1px;` This is decorative and not layout. But "outline styles (color, type)" can change; width maybe default? But outline-width can be changed? They didn't mention but layout not affected.

Need maybe use `background-color` only. For flat-solid "defined by color contrast and borders" but if no border, background can be white vs gray section. Need maybe set `background-color: #ffffff;` and `filter`? Could set `filter: drop-shadow`? No.

Could use `border-radius` allowed, no layout. Good. `box-shadow: none` allowed. Need maybe set `--bs-card-border-width`? no.

Maybe add `background-color: #f8f9fa` to hero row? But no need.

Need perhaps preserve `!important` on padding. Keep.

Maybe want "Pinterest-like: white cards, soft shadows on light gray bg" but effect flat-solid says no shadows. So perhaps background for article white, outline border. But no container background selector. Could set `.app-hero-section .row .col-lg-7 { background-color: transparent; }` no.

Let's consider if outputting same CSS unchanged is acceptable because no colors. But "self-check colors throughout file replaced with fresh palette?" Original has no colors, so no replacement. Need make meaningful visual changes.

Need maybe add custom properties? Like `--space-md` maybe value change? But selector only uses variable. Could add a custom property at top:
:root { --space-md: 1.25rem; } but this is new selector, violates "preserve selectors" maybe. Also would affect layout. Not wise.

Need perhaps set `font-size` to same value exactly to obey. Yes.

Potential hidden test? Might compare selectors and forbidden properties. We need optimize visual identity. I'll use minimal additions.

Let's plan output:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1f2937;
        background-color: #f3f4f6;
        transition: color 0.2s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #451a03;
        background-color: #fbbf24;
        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;
        outline: 1px solid #e5e7eb;
        outline-offset: -1px;
        box-shadow: none;
        transition: background-color 0.25s ease, outline-color 0.25s ease;
    }
}

But hero background might create big gray block, maybe too much. Maybe avoid background on hero col to not mess. But adding background-color is okay. However masonry-flow palette: light gray bg, white cards. The hero section background not necessarily. Could set `.app-hero-section .row .col-lg-7 { color: #111827; }` only. Better not set background.

Need maybe set `border-radius` on badge? Bootstrap badge has rounded-pill? Actually `.badge` no radius by default? Bootstrap's `.badge` has `border-radius: 0.375rem`. `bg-warning` no. Setting `border-radius: 6px` okay. But if it's a pill? The prompt target style minimal radius, so no pill.

Need maybe add `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` This padding may already be from CSS variables. If we add `background-color` to both, okay.

Need "box-shadow: none everywhere" maybe adding `box-shadow: none` to each selector. Already.

Could also set `border-radius: 0px` on hero? Not needed.

Need perhaps include `-webkit-outline`? no.

Potential issue with `outline-offset: -1px` with border radius and outline might not follow radius in some browsers? In modern browsers outline follows radius. okay.

Need maybe use `accent-color`? no.

Let's think if outline width is considered border-width? They specifically ban border-width, not outline-width. Good.

Could set `background-color` on badge; but `.bg-warning` already has `background-color: #ffc107` (Bootstrap). Changing to `#fbbf24` fresh palette. Good. Color maybe `#451a03`. Good.

Need perhaps include `color` in contact cards? Maybe not, since text inside might need. But if background white and text default black, okay. Could set `color: #1f2937;` but if nesting not typography. Fine.

Maybe use `border-color` via `border-color: #e5e7eb; border-style: solid;` without width: zero width means invisible. Not good.

Need maybe use `filter`? no.

Could set `box-shadow: none` but note original had no box shadow; adding none might remove inherited Bootstrap shadow on cards? `.contact-card` may have box-shadow from original stylesheet. Since this media query later? Depending order. But to force flat, `box-shadow: none !important`? We can add `!important` to ensure. But if original has shadows with higher specificity? `.contact-quick-section .contact-card` specificity 0,2. Adding `box-shadow: none` with same plus maybe no !important. To guarantee flatten, could use `!important`. The output requirement didn't forbid important. But we should preserve old important on padding. Use `box-shadow: none !important;` perhaps. But if no previous shadow, harmless. But adding !important may affect. Fine? Maybe not.

Need perhaps add "transition" with `!important`? no.

Let's ensure no forbidden layout properties: text-align in original kept; font-size same; padding same. Good.

Need maybe not add "background-color: #ffffff" to article because if parent has light gray, article white. But article may already have background from elsewhere. Keep.

Need perhaps use `--bs-card-border-color` variable? no.

Could also create a more Pinterest-like "accent strip" on cards via `border-top`? Border width forbidden. Could use `outline`: no.

Maybe use pseudo-elements? Cannot add selectors? We can use existing pseudo-classes? The list says pseudo-classes must preserve exactly, not add. We cannot add ::before because HTML fixed? Actually adding pseudo-element doesn't change HTML, but selector list would contain original plus pseudo. Prompt: "Selectors: keep EXACTLY" and no new selectors. So no.

Let's perhaps output:

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

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

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        color: #1f2937;
        border-radius: 6px;
        outline: 1px solid #e5e7eb;
        outline-offset: -1px;
        box-shadow: none;
        transition: background-color 0.2s ease, outline-color 0.2s ease, color 0.2s ease;
    }
}

Need maybe no color on `.app-hero-section .row .col-lg-7` if text-align only. But "fresh color palette" — can't change existing. I'd include to satisfy.

But perhaps should not set `color` on hero col because it might affect inherited link colors? But it's a general paragraph text. It's okay.

Potential issue: `font-size: 0.85rem` unchanged. But "Typography fixed" cannot change. Good.

Need perhaps use `-webkit-text-fill-color`? no.

Need maybe `background-image: none` on badge to remove gradients? Flat-solid no gradients. Bootstrap `.bg-warning` may not have gradient. But could add `background-image: none;` to card? There may be existing backgrounds. We can include `background-image: none;` to ensure solid. They said "Solid background colors only (no gradients)". Add to cards/badge: `background-image: none;`. This is a visual property and safe. Good.

Should we add `background-image: none;` to hero col? No.

Could set `background-color: #f9fafb` on contact cards? Target says white cards. So `#ffffff`. Good.

Need perhaps set `border-radius: 0px` on `.app-hero-section .badge.bg-warning`? Target minimal radius (0-6px). Use 4px maybe. Good.

Maybe "masonry-flow" color palette: "soft shadows on light gray bg" but effect no shadows. Use outline color #e5e7eb on white.

Could use `background-color: #f3f