/* ============================================================
   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;
    }
}

The user wants me to rewrite the CSS for the file `assets/css/saishi.css` block 2/2, targeting a "card-mosaic" style with "flat-solid" effect variant.

Let me analyze the original CSS:

```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;
    }
}
```

This is a media query block. The selectors are:
1. `.app-hero-section .row .col-lg-7` - with `text-align: center` (layout, cannot change)
2. `.app-hero-section .badge.bg-warning` - with `font-size: 0.85rem` (typography, cannot change)
3. `.contact-channels-section article, .contact-quick-section .contact-card` - with `padding: var(--space-md) !important` (padding, can change within ±20%)

Now, the task says to refresh the visual identity WITHOUT changing layout structure or class names. But this CSS block has very little to work with - it's mostly typography and padding within a media query.

Wait, let me re-read the instructions:

✅ YOU MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)
  • text-shadow
  • border-radius (visual rounding only)
  • gradient colors and stops in linear/radial/conic-gradient
  • transition timing, easing, duration
  • filter, backdrop-filter
  • opacity
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
  • caret-color, accent-color
  • CSS custom properties (--color-*, --shadow-*) values

🔒 NEVER CHANGE (would break HTML layout):
  • font-size, font-weight, font-style (typo)
  • padding, margin (keep similar values, ±20% maximum)

So I can't change `text-align` or `font-size`. I can change `padding` within ±20%. The original padding is `var(--space-md)`. I could change the custom property value, but `--space-md` might be defined elsewhere. Since I'm only rewriting this block, I should be careful.

Actually, the instructions say I can change CSS custom properties (--color-*, --shadow-*) values. `--space-md` is a spacing variable, not a color/shadow one. And padding must stay within ±20%. So I should keep `padding: var(--space-md) !important` as-is, or adjust the padding value slightly (e.g., `calc(var(--space-md) * 1.1)` would be within 20% but that's risky).

Given the constraints, this particular CSS block is very layout/typography focused. The only things I could potentially change:

1. `text-align: center` - NO, that's layout/text-align (text-align is in the NEVER CHANGE list)
2. `font-size: 0.85rem` - NO, that's typography
3. `padding: var(--space-md) !important` - I could adjust padding slightly, but since it uses a variable, and I don't know the value of `--space-md`, changing it to something like `calc(var(--space-md) * 1.1)` keeps it within 20%.

But wait - the target style is "card-mosaic" with "flat-solid". This means:
- box-shadow: none everywhere
- Solid background colors only (no gradients)
- Defined by color contrast and borders
- Minimal radius (0-6px)

Since the original CSS has no colors, shadows, borders, or radius, there's nothing to change for those properties.

However, the instructions say "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

Hmm, but if there are no colors/shadows/radius in this block, what am I supposed to do? The instructions say I must output the rewritten CSS. But I can't just output the same thing because that would be "no changes."

Let me think about this differently. The file is `saishi.css` block 2/2. This is only a portion of the whole file. The instructions say "Output the rewritten CSS now" - meaning I should rewrite THIS block.

But the ONLY changeable properties in this block are:
- `padding: var(--space-md) !important` → could adjust within ±20%

Actually, wait. Let me reconsider. The instructions say "padding, margin (keep similar values, ±20% maximum)". So I can change padding by up to 20%. 

`var(--space-md)` - I don't know the value, but if I change it to `calc(var(--space-md) * 1.1)` that's +10%, within the 20% limit. Or I could use `var(--space-sm)` if that's smaller... but I don't know what's defined.

Hmm, this is tricky. The spirit of the task is to apply a visual refresh. But this particular block has almost nothing visual to work with.

Let me reconsider - maybe I should add color/shadow properties to these selectors since the target style is flat-solid with vibrant card colors? But the instructions say I can only change properties that exist... Actually no, it says "All color values" must change, and I can add decorative properties. Wait, re-reading:

"Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

This could mean I can ADD new color, shadow, radius, transition properties to the existing rules. But I need to be careful not to break anything.

Actually, the instruction says: "✅ YOU MUST CHANGE (visual identity only)" - listing properties to change. And "🔒 NEVER CHANGE" - listing properties to keep. It doesn't say I can't add new visual properties.

But the flat-solid variant says:
- box-shadow: none everywhere
- Solid background colors only (no gradients)
- Defined by color contrast and borders
- Minimal radius (0-6px)

So for flat-solid, box-shadow should be none. But the original CSS doesn't have box-shadow, so there's nothing to remove.

For the card-mosaic target style: "Vibrant card colors on neutral background, Each card type a different accent" - but this is inside a media query for mobile. The selectors are for hero section badge and contact cards.

Let me think about what makes sense:

1. `.app-hero-section .badge.bg-warning` - A warning badge. I could change its background to a solid vibrant color. But `bg-warning` is likely a Bootstrap class that sets background-color. Since I shouldn't change class names, I could add a custom background-color with a solid color to override it. But this would affect color contrast.

Wait, but the instruction says "All color values: background, color, border-color..." must change. If the original has no color values, then there are none to change. Maybe I should just preserve the original CSS exactly?

But the task says "Refresh the visual identity" - this is one block of a larger file. Perhaps this block simply doesn't have much to refresh, and the correct output is essentially the same CSS with maybe minor adjustments to padding (within 20%).

Let me re-read the user's request:

"🚀 TASK: Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients. Output the rewritten CSS now (no markdown, no preamble):"

So the task is clear: only change colors, shadows, radius, transitions, gradients. In this block:
- There are NO colors
- There are NO shadows
- There are NO radius values
- There are NO transitions
- There are NO gradients

The only property that could potentially be adjusted is `padding: var(--space-md) !important`, which is a layout property that should stay within ±20%.

Given that there's nothing to change, the honest output would be the original CSS unchanged. But that seems like it might not satisfy the user.

Hmm, however, I could add some visual properties to these selectors. For example:

1. `.app-hero-section .badge.bg-warning` - I could add a solid background color (vibrant) to match the card-mosaic palette. But `bg-warning` from Bootstrap already sets `--bs-badge-bg` or `background-color`. Adding a custom background could work.

2. `.contact-channels-section article` and `.contact-quick-section .contact-card` - I could add flat-solid card styling: solid background, no shadow, minimal radius, border.

But wait - the instruction says "NEVER CHANGE (would break HTML layout): border-width" - it says border-color and border-style CAN change, but border-width cannot. Adding a new border would introduce a border-width, which could potentially affect layout (box-sizing might be content-box).

Actually, in the NEVER CHANGE list:
- "padding, margin (keep similar values, ±20% maximum)"

Adding a border doesn't change padding/margin, but it could affect layout if box-sizing is content-box. However, modern CSS resets usually set `box-sizing: border-box`, so adding a 1px border wouldn't change layout.

But the instructions say "NEVER CHANGE (would break HTML layout)" and list "box-sizing" as never change. Adding a border changes the visual appearance but with border-box it doesn't affect layout.

Hmm, I think the safest interpretation is:
- I should NOT add new properties that would affect layout
- I SHOULD apply the visual identity refresh where possible

Given that this block has no visual properties to refresh, I think the correct output is to keep the selectors and the layout properties, and perhaps add subtle visual properties that align with the flat-solid variant.

Actually, let me reconsider the whole thing. The "card-mosaic" style description says:
- "Grid with mixed spans" - this is a layout pattern, but we can't change grid
- "Medium gap (20-32px)" - gap
- "Cards with distinct elevation" - but flat-solid says no elevation
- "Vary card sizes via grid-row span"

These are all layout things that the NEVER CHANGE list protects. The color palette says:
- "Vibrant card colors on neutral background"
- "Each card type a different accent"

The flat-solid variant says:
- "box-shadow: none everywhere"
- "Solid background colors only (no gradients)"
- "Defined by color contrast and borders"
- "Minimal radius (0-6px)"

So for this media query block, I can:
1. For `.app-hero-section .badge.bg-warning`: Give it a solid vibrant color background. But since the original doesn't have color properties, adding one would be new. Let me check - the class is `bg-warning` which in Bootstrap means `background-color: var(--bs-warning)` or similar. I could override it with a fresh color. Since I'm changing the color palette, a warning badge could be a solid vibrant orange/amber.

2. For the contact cards: Add solid backgrounds, no shadow, minimal radius, maybe a border.

But wait - the constraint says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Adding color properties to existing selectors preserves selectors. Adding border-radius to cards is in the "must change" list (border-radius visual rounding only). Adding box-shadow: none to cards aligns with flat-solid.

However, I need to be careful: the media query is `(max-width: 575.98px)`. This is a mobile viewport. Adding too many styles here might be risky.

Let me also consider: the instruction says "All color values: background, color, border-color, fill, stroke, outline-color" MUST change. If there are no color values in the original, there's nothing to change. But the self-check says "Colors throughout the file replaced with fresh palette?" - if there are no colors, that's vacuously true.

I think the best approach is:
1. Keep all three rules exactly as-is for their layout properties
2. Add/override visual properties to match the flat-solid card-mosaic style:
   - Badge: solid vibrant background color, no shadow, minimal radius
   - Contact cards: solid background, no shadow, minimal radius, border

But hold on - adding background colors to contact cards could be problematic if the original design didn't have them. The original design might rely on the `!important` padding only. Adding a background color would change the visual appearance significantly.

Actually, that's the point of the task! "Refresh the visual identity." So adding new colors is expected.

Let me be strategic. Inside the media query:

```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;
    }
}
```

For flat-solid: box-shadow: none. But if the original design had shadows on these elements from other rules, and this media query is overriding them... Adding `box-shadow: none` would be consistent with flat-solid.

Let me draft:

```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;
        background-color: #f5a524;
        color: #1e1e1e;
        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 #e8e0d8;
        border-radius: 6px;
        box-shadow: none;
    }
}
```

Wait, but I'm adding properties. Is that allowed? The task says "Only change colors, shadows, radius, transitions, gradients" - adding color/radius/shadow properties is changing those values (from default to specified). I think that's fine.

But actually, I need to be careful about the `!important` on padding. If I add other properties without `!important`, they might not override existing styles. But since this is a media query block, these rules will apply at the same specificity as other rules. Adding `!important` to colors might be too aggressive.

Also, the badge with `bg-warning` - Bootstrap's `.bg-warning` sets `background-color: var(--bs-warning) !important` in some versions. In Bootstrap 5, `.bg-warning` does NOT have `!important` by default. Actually, in Bootstrap 5, background utilities don't have `!important`. Let me not assume. I could add `!important` to be safe, but that's a declaration-level choice.

Hmm, actually, since I'm not 100% sure about the Bootstrap behavior, and since the task says "preserving ALL selectors and layout exactly", maybe I should be conservative and only modify what's there.

But there's literally nothing visual to modify in this block. Let me reconsider the entire task.

The file name is `assets/css/saishi.css#块2/2` - this is block 2 of 2. The fingerprint is `ee30457a9ca4`. Maybe block 1 contains the main styles, and block 2 is just this media query. If block 1 has the visual properties, block 2 might just have these overrides.

Given that the user explicitly asked to "Refresh this CSS visually" and to output the rewritten CSS, I think they expect to see something different from the original. 

Let me look at this from the perspective of the flat-solid card-mosaic style:

Card-mosaic:
- Vibrant card colors on neutral background
- Each card type a different accent

In this media query, the "cards" would be the contact cards (`.contact-channels-section article` and `.contact-quick-section .contact-card`). I can give them solid backgrounds with different accent colors.

Flat-solid:
- box-shadow: none everywhere
- Solid background colors only (no gradients)
- Defined by color contrast and borders
- Minimal radius (0-6px)

So:
- No shadows
- Solid colors
- Borders for definition
- 0-6px border radius

Let me craft a fresh palette. The target says "Vibrant card colors on neutral background." For a conservative but fresh look:

Neutral background (page-level, but this block doesn't set page background) - I won't touch page background.

For the badge (warning):
- Since it's a warning badge, a vibrant amber/ochre: `#f59e0b` or `#f6a821`
- Text color: dark brown/black for contrast: `#3a2a1a` or `#1f2937`
- Border-radius: 6px (minimal, per flat-solid)
- box-shadow: none

For contact cards:
- Card 1 (`article`): one accent color
- Card 2 (`.contact-card`): another accent color
- Since they're in a comma-separated selector, I need to style them together or separately. The original groups them with a comma. I can keep the comma and give them both a neutral white/off-white card background, OR split them to give different accents.

But the instruction says "Selector lists (commas)" must be preserved exactly. So I cannot split the selector list. Therefore, `.contact-channels-section article` and `.contact-quick-section .contact-card` must have the same styles. That means they can't have different accent colors from this rule.

Hmm, "Every selector character-for-character preserved?" - yes, the comma list must stay. So both will get the same visual treatment.

For a neutral card on a neutral background, I could use:
- Background: `#ffffff` (white card on neutral page background)
- Border: `1px solid #e5ddd5` (warm neutral border)