/* ============================================================
   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 answer CSS rewritten only. Need comply. Need inspect original CSS block. It's media query max 575.98 with three rules. Visual changes possible: text-align? Layout? text-align is typography? Constraints says text-align unchanged. font-size unchanged. Padding? cannot change? Here original padding: var(--space-md) !important. We can only change visual props; padding is protected margin? "padding, margin (keep similar values, ±20% maximum)" so can slightly change? HTML fixed but visual? But they say layout no break, padding similar ±20%. Need perhaps change padding from var(--space-md) to var(--space-md)? That's same. Need color refresh maybe no colors. Need output preserve exact selectors and declarations; can modify only colors/shadows/radius/transitions/gradients. However declarations include text-align, font-size, padding. If we omit them would layout/typography change? But task specifically says refresh CSS visually; must keep all selectors and layout exactly. We can add visual declarations? But output should likely include original declarations plus visual changes. Need decide.

We need find opportunities: no colors, shadows, radius. Could add color/border-radius/background? But HTML fixed and target "flat-solid" with shadow none. We can maybe set border-radius: 0? But original no radius. Could change padding to var(--space-md)? no visual. Maybe add color properties to elements? Need preserve selectors exactly. But for media block, target card-mosaic? Original has contact cards. It uses var(--space-md). Could set padding still same. To refresh, maybe add background color, color, border-radius? But if original had none, adding could surprise but visual identity. Need perhaps set for .contact-card: background, border? But original maybe defined elsewhere, overriding. We need only modify given CSS. Since "ONLY colors, shadows, and decorative properties may change." We can add color, background, border-radius, box-shadow: none. "box-shadow: none everywhere" variant. Need likely change appearance. Since target flat-solid: solid colors, no gradients, minimal radius, shadows none. Need choose vibrant card colors on neutral background, each card type differing accent. But in media query only: .app-hero-section .row .col-lg-7 { text-align:center } no visual maybe color? .badge.bg-warning font-size; contact cards padding. We can't add classes. Can alter contact-quick-section .contact-card by adding background, border, color, border-radius, maybe box-shadow none. Also contact-channels-section article. Since selectors preserved. Need ensure no layout change; adding background, color, border can technically alter box size? background no, border can alter padding/width unless box-sizing border-box likely. But could set border. They said border-color and border-style can change NOT border-width. If adding border-width from none? It is not changing existing width but adding new; allowed? Border-style may change; border-width not? Better avoid border to not alter layout. Use background-color, color, border-radius, box-shadow none. background doesn't affect layout. Color. Radius. Could add outline? outline-color/type but not width. Border-radius doesn't affect layout. Flat-solid says shadow none; we can explicitly set box-shadow: none. But "box-shadow: none everywhere" means any existing box shadows removed. Here no box-shadow. If we add background but no original, okay.

Need perhaps adjust padding slightly? max ±20% of var --space-md. Original padding var(--space-md) important. To be safe keep same. But "padding, margin (keep similar values, ±20% maximum)" not required change. Keep.

Need maybe set border-radius: 6px. Flat-solid minimal radius 0-6px. Set 6. Colors? Maybe:
.contact-channels-section article { background-color: #fff8f0; color: #5b4636; border-radius: 6px; box-shadow: none; }
.contact-quick-section .contact-card { background-color: #f3e8ff; color: #4a2c6d; border-radius: 6px; box-shadow: none; }
But target "Vibrant card colors on neutral background, each card type different accent". On narrow mobile maybe not too heavy. Existing article/card perhaps backgrounds. We can choose pastels? Vibrant? flat solid. Could use solid color with white text? If original text dark? Need care with .badge.bg-warning — bg-warning is Bootstrap class. We could override color? The selector includes .badge.bg-warning but declaration only font-size. Could add background color? It already has bg-warning. Could change to different accent? But changing background with Bootstrap may be okay; badge text needs contrast. Maybe add background-color: #ffb347? However .bg-warning already. But "colors throughout file replaced with fresh palette" only original had none. Need maybe no.

Could also color .app-hero-section .row .col-lg-7? It's text-align center. Could add color? That would globally change hero text maybe unwanted. Yet it's visual. Maybe set `background-color: transparent;` no.

Need likely output only rewritten CSS block preserving original declarations and adding some color/radius/shadow declarations. But instructions "first char=CSS char", no markdown. Need include @media and same. We can include:
@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: #ffb347;
        color: #512b1a;
        border-radius: 4px;
        box-shadow: none;
    }

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

    .contact-channels-section article {
        background-color: #fde9d7;
        color: #6b4a2b;
    }

    .contact-quick-section .contact-card {
        background-color: #e7f0ff;
        color: #24425e;
        border-left: 4px solid #3a7ca5;
    }
}
But border-left width is border-width change? Add new border not existing. Could be okay but "Never change border-width". It says "border-color and border-style (NOT border-width)" because existing border-width should not change. Adding border would alter layout. Avoid.

Maybe use outline: 1px solid? No width. Don't.

Need "only colors, shadows, and decorative properties may change" so adding border-radius "decorative" is okay. Padding unchanged.

But target style card-mosaic: "Grid with mixed spans" maybe not applicable at max 575, but maybe existing card grid? Not need.

Let's think: Since variant flat-solid with box-shadow none "everywhere", we should explicitly set box-shadow none? Adding to existing declarations at this media width will disable all shadows on these elements. Good. Also maybe `border-radius: 0`? "Minimal radius (0-6px)" pick 4 or 6. But original likely had some radius. Since given CSS doesn't mention. We can set `border-radius: 4px`. But adding radius can alter visual but no layout. Good.

Maybe set background-color? If no background originally, adding could potentially conflict with existing card visual. But "refresh identity" requires colors. Need choose fresh palette. However if cards already have background from elsewhere, our background will override. That's okay.

Need maybe contact cards background solid vibrant:
- `.contact-channels-section article` background #f7ede2, color #5f4c3b, radius 4, shadow none.
- `.contact-quick-section .contact-card` background #dde7f5, color #1e3a5f, radius 4, shadow none.
But vibrant? Maybe `#ffd8be` and `#cfe3ff`. Use neutral background? We can't change page background. However only these card backgrounds. Could use vibrant accent backgrounds: `#ffd166`, `#06d6a0`? Need ensure text readability. Better pastel with dark text. "Vibrant card colors" on neutral background. Could use `#ffd166` with #333? Not from palette. But if article/card text maybe dark. We can set color.

Need perhaps `.app-hero-section .badge.bg-warning` background-color #f4a261? Actually bg-warning bootstrap is #ffc107. Use fresh yellow. For flat solid, badge bg `#f2b04a`? Add color `#3d2b1f`.

Maybe no need.

Important: output "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." The original has 5 declarations; maybe if we don't change those, no visual refresh. Need add.

Need consider "Colors throughout the file replaced with fresh palette?" There were no colors; we add.

Let's craft final CSS with exact selectors, same indentation, same original declarations. We can separate combined selector? Must preserve selector lists: "contact-channels-section article, .contact-quick-section .contact-card" should remain. We can add declarations in that combined rule (padding, radius, shadow). Backgrounds should be separate for each type; but if selector list remains, fine. To set different background per card, need separate rules. Since original had only combined rule. Can we add new selector rules? Yes, selectors are preserved but new rules with same selectors? That's adding CSS not replacing? We can output with new selectors? The instruction says keep selectors exactly, but can add additional rules? Usually rewrite CSS, can add declarations to existing selectors. Adding separate rules with same selectors is not changing selectors. But might be considered extra. Better combine common visual properties in existing rules and use variables? Need different backgrounds.

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

.contact-channels-section article {
    background-color: #fff1e0;
    color: #5c3f2e;
}

.contact-quick-section .contact-card {
    background-color: #e2edf9;
    color: #1e3c5a;
}
This preserves combined rule plus new rules. Is that okay? Probably.

But "Output ONLY rewritten CSS preserving ALL selectors and layout exactly" adding new selectors that are exact subset maybe okay. Could instead use `:is`? No.

Maybe use CSS variables? Could set in combined:
--card-bg? But variables? Need not.

Need maybe at mobile, padding var(--space-md)!important unchanged. Could maybe viewport background? Could add `background-color` to body? Not in original and no selector? We could add `body { background:#f4f1ec; }` but that is a new selector with element type body. Is "every selector preserved" no? They say selectors preserve exactly, but can we add? Probably output should only contain original selectors, not new. Avoid.

Let's formulate final.

Potential issue: Original declaration `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` If we add `background-color: #f6c04b;` Need "bg-warning" class maybe conflict with Bootstrap and specific? Same specificity .app-hero-section .badge.bg-warning = 0,3,0 vs .bg-warning = 0,1,0, so override works. Use `color: #4b3a2a;` Need maybe border-radius: 0.375rem? But flat-solid minimal. Use 4px. `box-shadow: none`.

But `box-shadow:none` on badge not necessary but variant says no shadows anywhere. If original elements had shadows elsewhere, adding none in this media only no shadows. Should we set for all selectors? Can set `box-shadow: none;` on each rule. Good.

Maybe we should not add background to hero column. But target card-mosaic maybe no.

Let's think if `border-radius: 6px` on article and card might alter if `overflow` etc, no layout. Good.

Need perhaps `transition`? Could add `transition: background-color .2s ease;` but not needed. "transition timing, easing, duration" may change; original no. Don't.

Need maybe `accent-color`, `caret-color` irrelevant.

Could use `filter: none`? no.

Let's ensure "flat-solid" defined "box-shadow: none everywhere; Solid background colors only (no gradients); Defined by color contrast and borders; Minimal radius (0-6px)". So our CSS should not include gradients. Fine.

Could choose colors:
- Main background neutral? Cannot set. But add to cards. 
For `.contact-channels-section article`, base maybe `#faeee2` warm cream. `.contact-quick-section .contact-card` maybe `#e0ecfa` cool blue. That gives variety. But "vibrant card colors on neutral background" maybe choose `#f5c766` and `#7ac7b8`? Let's be more intentional:
Palette as target: vibrant card colors on neutral background. Since mobile, use colors:
- `--article-bg: #ffd98e` amber accent, text `#4d3218`
- `--card-bg: #8ecae6` maybe blue accent, text `#0b2b40`
But text color may be contrast? #8ecae6 with #0b2b40 okay. However original likely light text? Hard to know. Could set `color` on both.

Maybe use more saturated:
- .contact-channels-section article: background #ffd166 (yellow), color #3d2b1f.
- .contact-quick-section .contact-card: background #4c9f70 (green), color #ffffff.
Would be vibrant. But if cards have text, white on green okay. But maybe too aggressive. Target card-mosaic likely okay.

However, the original combined rule includes `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }`. If we add backgrounds separately, at mobile cards are colorful. This is a visual refresh.

Need perhaps `.app-hero-section .badge.bg-warning` background use same amber `#f4a261`, `color: #2d1b0e`, border-radius 4.

Could maybe set `.col-lg-7` `color: #333`? unnecessary.

Need decide final.

But user asked "Request ID etc" and "File: assets/css/saishi.css#块2/2" — maybe they are feeding chunks. Need output exactly rewrite. We can include entire CSS block only. No markdown fences. Need no extra.

Let's craft:

@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: #f2b548;
        color: #402b12;
        border-radius: 4px;
        box-shadow: none;
    }

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

    .contact-channels-section article {
        background-color: #ffd9a0;
        color: #4e3519;
    }

    .contact-quick-section .contact-card {
        background-color: #b7dff5;
        color: #1d3b55;
    }
}

Need check: `contact-channels-section article` background color #ffd9a0, text #4e3519. `contact-quick-section .contact-card` #b7dff5, text #1d3b55. Good.

But perhaps target card-mosaic "each card type a different accent" — yes.

Need think about "flat-solid" "Defined by color contrast and borders" It says borders but we didn't use border. Could use `outline`? border-radius. Since they said border-color/border-style can change, not width. If we add `outline: 2px solid ...` could be considered decorative but width changes. Better not.

Could maybe add `background-image: none;`? No gradient. Not necessary.

Could maybe use `border-left: 4px solid` but no. Good.

Potential critique: We changed `box-shadow: none` on elements, but if original box-shadow defined elsewhere and current media didn't include, we override. Okay.

Potential issue: `.contact-channels-section article` and `.contact-quick-section .contact-card` combined rule plus separate rules after means more lines; order: combined has padding, border-radius, box-shadow. Separate has background/color. Since separate rules appear after combined and have same specificity? Let's calculate:
- `.contact-channels-section article` specificity 0,1,1? Actually classes: 1 (contact-channels-section) + element article = (0,1,1). 
- `.contact-quick-section .contact-card` specificity 0,2,0. Original combined has each. If we put general combined first, then separate background rules after. For `.contact-quick-section .contact-card`, combined (0,2,0) and separate (0,2,0), later wins for background. Fine.

Could perhaps use `background-color` in combined with different color via CSS variable from parent? E.g. .contact-channels-section article { --card-bg:#ffd9a0; } but not needed.

Need perhaps set `color` on article/card could affect child text if inherited, okay.

Need ensure no " comments" — no comments.

Need final only code. Use final. But before final, let's consider if our answer should be "can't change because no colors?" Maybe no.

Let's revisit constraints in exact: "Refresh the visual identity WITHOUT changing layout structure or class names. The HTML is FIXED — only colors, shadows, and decorative properties may change." We changed text-align? no. "font-size unchanged" no. "padding, margin (keep