/* ============================================================
   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 to rewrite the CSS in the file while preserving all selectors and layout properties exactly. The original CSS is a media query with some rules. We need to apply visual changes only: colors, shadows, border-radius, transitions, gradients, etc. But we need to output CSS that matches the original structure.

Since the original CSS is quite minimal and contains no colors, shadows, etc., we still need to "refresh visual identity" but there are actually no visual properties in the original except maybe text-align and padding. However, the instructions say "Only change colors, shadows, radius, transitions, gradients." But the original has no such properties. Also, "Keep ALL selectors and layout exactly as-is." So we need to output the same CSS, possibly with additional visual declarations? Wait, the task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It's likely that the original CSS is a snippet and we should apply the target style "card-mosaic" and "flat-solid" variant. But the original file might be larger? Actually the input provided is exactly this CSS snippet. We need to output the rewritten CSS.

Because the original does not contain any visual declarations, maybe we should add some? But the instruction says "The HTML is FIXED — only colors, shadows, and decorative properties may change." That suggests we can add color, border-radius, box-shadow, etc., but not change layout. However, the original rules target specific elements. We could add color/background to those elements within the media query? But that would change the appearance. But the request is to "refresh the visual identity WITHOUT changing layout structure or class names." So we should produce a CSS file that has the same selectors, but with updated visual properties. Since the original lacks colors, we can introduce them.

But careful: The original is inside a media query. We must preserve the media query condition and the selectors. We can add declarations like background-color, color, border-radius, etc. But we must not change the existing declarations: text-align and padding should remain. We can add new declarations after them.

Let's examine the original:

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

In the target style "card-mosaic" and variant "flat-solid" we are to:
- box-shadow: none everywhere
- Solid background colors only (no gradients)
- Defined by color contrast and borders
- Minimal radius (0-6px)
- Vibrant card colors on neutral background
- Each card type a different accent

But this is a media query for mobile. We need to apply visual changes to the elements targeted. For example, .app-hero-section .col-lg-7 could get a background? Or color? But the original has text-align. We can add maybe background-color? But that might disrupt layout? Background doesn't affect layout, so it's fine. But is it appropriate? The instruction says "only colors, shadows, and decorative properties may change." So yes.

However, the output should be "the rewritten CSS" with the same selectors and layout. We can add new visual properties to the existing rules. But we also need to ensure that the visual identity is refreshed. Since the original has no colors, we need to introduce the new palette. But we have to be cautious: the selectors contain class names like .badge.bg-warning, .contact-channels-section article, .contact-quick-section .contact-card. We can style these with background and color.

Also, the original has font-size, which is a typography property and must not change. We should keep font-size as is. Padding is layout and must be kept (within 20% maybe but it's already there). So we keep padding as is.

Since the variant says "box-shadow: none everywhere", we should explicitly set box-shadow: none on the targeted elements? But the original didn't have box-shadow. Adding box-shadow: none is a safe visual property. But maybe we don't need to add it. However, to be consistent with "flat-solid", we might add box-shadow: none to the elements. But that uses a property that is allowed to change (shadow). So we can add.

Also, the original selectors themselves may already have some styles elsewhere. Our added properties will override in the mobile media query. We need to pick colors that fit the card-mosaic palette: vibrant card colors on neutral background, each card type a different accent.

Let's define a color palette:
- Neutral background: #f4f6f8 or #eef2f5
- Primary accent: #ff6b6b (coral red)
- Secondary accent: #4ecdc4 (teal)
- Tertiary accent: #ffe66d (yellow)
- Dark text: #2d3436
- Perhaps a deep green accent: #26de81

But we need to apply to specific elements:
1. .app-hero-section .row .col-lg-7: This is a container for hero content. In card-mosaic, maybe this becomes a card? On mobile, text-align center. We could give it a background color, padding? But padding is not in the original rule. We can add background-color and border-radius. But changing background of this large container might be too much. Since the target style is card-mosaic, maybe the hero section is a card. But we only have this media query. We'll add a subtle background and border-radius? But variant flat-solid says minimal radius (0-6px). So maybe 6px.

2. .app-hero-section .badge.bg-warning: The badge with Bootstrap warning color (yellow). We can override its background and color to match the new palette. Since the class bg-warning is a Bootstrap class, we can override background-color with our accent, and color for contrast. Also border-radius maybe.

3. .contact-channels-section article and .contact-quick-section .contact-card: These are cards. We can give them vibrant backgrounds, different accents. For "each card type a different accent", within this media query we have two selectors grouped. We can target each separately, but to preserve the selector list exactly, we cannot split them. We can put shared properties in the grouped rule. But if we want different accents, we need separate rules, but that would change the selectors by adding new rules. The instruction says keep selectors exactly. We can add new rules with additional selectors? No, because the output should contain the same selectors. We cannot add new rules. But we can style the grouped selector the same way. Or we could set a CSS variable and then overrides elsewhere? But that would be outside this file? Better to keep grouped and apply same accent. Since there are two types of cards (channels article and quick contact card), we can give them different accents by using separate selectors? But the original has a selector list: `.contact-channels-section article, .contact-quick-section .contact-card`. If we split into two rules, we'd be changing the selectors. Not allowed. We could keep the grouped rule with common styling, and then perhaps the existing class names have different accent colors already? But we need to "refresh" them. We can set CSS custom properties on the grouped rule? For example, --card-accent: ... but that would not differ.

Maybe we can use :nth-child or something? But that would add selectors. The instruction says keep ALL selectors. It doesn't say we cannot add new selectors? Actually "Selectors: keep EXACTLY" means we cannot change existing selectors. But can we add new selectors? The instruction is in the context of rewriting the given CSS. The given CSS is just this media query. We should output a CSS file that contains the same rules, possibly with additional rules? The request says "Output the rewritten CSS now" — meaning rewrite the provided CSS. It would be odd to add entirely new rules. Also, "Every selector character-for-character preserved?" So we need to preserve all selectors that appear. Adding new selectors would be extra, but not necessarily violating "preserved" because existing ones unchanged. But likely we should not add new rules. The safe approach: keep the exact same rules and declarations, plus add visual declarations to those rules.

For the grouped selector, we can set both article and contact-card to the same accent. That's fine. But target style says "Each card type a different accent." In this media query, we have two card types. We can use CSS variables from their parent? No.

Alternatively, we can use the fact that the selectors themselves have different class contexts. We could write a new rule with one of the selectors to override the second card type differently, but that would add a selector not in original. However, the original has a combined selector. If we add a new rule `.contact-quick-section .contact-card { ... }` that comes after the grouped rule, the original selector `.contact-quick-section .contact-card` is still present in the combined selector, and we add a new separate selector. But does that violate? It might be okay because we preserved the original selector. But the instruction "ONLY the rewritten CSS" — likely means output the same CSS with modifications. Adding new rules might be acceptable but could be considered "changing" the structure. Better to avoid.

Another option: use CSS variables with different values by inheritance. For instance, set a variable on .contact-channels-section and another on .contact-quick-section. But those selectors are not in the original. We could set the variable in the root? Not in this media query. Or we could use the grouped rule to set a custom property `--card-bg: ...`; then use the same custom property? That does not differentiate.

We could set the grouped rule to have a common style, and then existing styles elsewhere may differentiate. But we are to refresh the identity, so we need to choose colors.

Maybe we can use `article` and `.contact-card` with different colors by leveraging the cascade: The grouped rule applies both, but if there are existing rules elsewhere with higher specificity? Not relevant.

Given the constraints, I'll apply a consistent accent to both card types, e.g., a vibrant teal background with dark text. But target palette says "Each card type a different accent" in the Aggressive layout pattern. Since we're in conservative mode, we can't change HTML layout. We can still do color differentiation if we can have separate rules, but since the original grouped them, we might be forced to keep them same. However, the "Target Style: card-mosaic" is a "Layout pattern (Aggressive only)" — that's the target style for the visual direction, but we are in conservative mode, so we don't need to fully achieve the layout pattern. The variant flat-solid is more important. So I'll just make them both solid colors with accent, maybe same.

Let's think of the overall file: it's a responsive media query. We must keep the layout exactly. So we only modify/add visual declarations.

Let's craft the output:

- Keep the media query line.
- For .app-hero-section .row .col-lg-7:
  - text-align: center; (keep)
  - Add background-color: #ffffff? Or transparent? If we set background-color, it might create a card. But the hero section container might already have padding and layout. Adding a colored background could be too invasive. But it's allowed. Alternatively, add color: #2d3436? Since text-align is for text, maybe color matters. But there's no color originally. We can set color to a dark neutral.
  - Also border-radius: 6px? But if no background, border-radius does nothing. Better to add background-color: #ffffff; and box-shadow: none; but variant says no shadow. Also maybe border: 1px solid #e0e0e0? But border-color is allowed, border-width cannot change? It says "border-color and border-style (NOT border-width)" — so we can add border-color, but adding border-width would be layout? Actually border-width changes box size, but usually it's not layout if box-sizing border-box? But we cannot add border-width if it's not there? The instruction says "border-color and border-style (NOT border-width)" meaning we can change those but not width. If we add a border, we would be adding border-width. Is adding a new declaration allowed? "only colors, shadows, and decorative properties may change" — border is decorative but width affects layout. To be safe, we can set border-color if a border exists, but we don't know. We can use outline instead, which doesn't affect layout. Outline-style and outline-color are allowed. So we can add outline: none? That's not decorative. Or add outline: 1px solid ...? Outline width not explicitly forbidden? Actually outline-color and outline style allowed, but outline-width is like border-width. The instruction says "outline styles (color, type)" so we can set outline-style and outline-color, but not width? It says "outline styles (color, type)" meaning we can change color and type. Adding a solid outline with default width may be okay. But to avoid layout changes, use `outline: 1px solid` but width is 1px? The forbidden list includes border-width but not outline-width explicitly. Still, to be safe, we can use `box-shadow: 0 0 0 1px` but variant says box-shadow: none. Hmm.

Since the variant flat-solid says box-shadow: none everywhere, we should not add box-shadow at all. So to define by color contrast and borders, we can use border-color but not add border-width. But the elements might already have borders elsewhere. We can change their border-color if they have one. We don't know.

Given the minimal original, perhaps the expected output is just the same CSS with color additions. But what color additions? Let's infer from the target style: card-mosaic, flat-solid. Maybe we should set the card backgrounds to vibrant colors like #ff6b6b, #4ecdc4, #ffe66d, and set text colors to dark or white depending on contrast. Also set border-radius: 6px, and box-shadow: none explicitly.

Let's define:

- .app-hero-section .row .col-lg-7: I'll set `color: #2d3436;` and `background-color: #ffffff;`? Actually hero section on mobile might be full-width; making it white card with rounded corners could be nice. But it might overlap with existing styles. Since we're in a media query, it applies on mobile only. Let's do:
  - background-color: #f8f9fa; (neutral)
  - border-radius: 6px;
  - color: #2d3436;

- .app-hero-section .badge.bg-warning:
  - background-color: #ff6b6b; (coral accent)
  - color: #ffffff;
  - border-radius: 6px;

- .contact-channels-section article,
  .contact-quick-section .contact-card:
  - background-color: #4ecdc4; (teal accent)
  - color: #1a1a2e;
  - border-radius: 6px;
  - box-shadow: none;

But "Each card type a different accent" — we could make article one color and contact-card another by using a single grouped rule that sets a CSS variable? Or we can set both to same. Maybe we can set article to #ffe66d and contact-card to #4ecdc4 if we split. But we must preserve selector list. Could we keep the grouped selector and then add a separate rule for one of them after? This would change the original by adding a new rule, but not modifying the existing selectors. Is that allowed? The instruction: "Keep ALL selectors and layout exactly as-is." It doesn't say "do not add selectors." It says "Every selector character-for-character preserved?" If we add a new rule, the existing selectors are preserved. But the output would be more than the original. The task says "Refresh this CSS visually" so adding a new rule might be okay to achieve the desired accent differentiation. However, the "File: assets/css/saishi.css#块2/2" suggests this is a chunk of a larger file. The chunk is just this media query. We should output the rewritten chunk. Adding new rules within the chunk might be acceptable, but might duplicate selectors. Let's consider.

The original CSS has a selector list: `.contact-channels-section article, .contact-quick-section .contact-card`. If we want different colors, we can create two separate rules, but then the grouped rule becomes unnecessary. But the instruction says preserve selector lists. We can't remove the grouped selector list. We could keep the grouped rule as is and add an override rule for `.contact-quick-section .contact-card` afterward, but that would result in two rules. That might be okay, but the output would have more rules. The instruction says "ONLY the rewritten CSS" — that's fine. It doesn't say "same number of rules."

But "UNCHANGED: Selectors" means the selectors themselves must be unchanged. If we add a rule with `.contact-quick-section .contact-card`, that selector is still present in the grouped rule, and now also standalone. That's not changing the selector; it's adding a new rule. It's arguably fine.

However, in self-check: "Every selector character-for-character preserved?" — If I add a new selector, then not every selector in my output is from the input. But "preserved" means the original ones are still there. I think it's okay.

But to be conservative and avoid adding rules, we could keep one accent for both. The prompt says "Each card type a different accent" under "Layout pattern (Aggressive only)" — since we're in conservative mode, we don't need to implement that layout pattern. The target style section says "Layout pattern (Aggressive only)" and lists properties. But we are not in aggressive mode; we're in conservative. So we should not follow aggressive layout changes. The variant flat-solid is the one we should follow. So we don't need each card type different accent. We can still use the same accent.

Given that, I'll keep the grouped rule with same accent. But maybe we can use CSS variables with clever inheritance: In the grouped rule, set `background-color: var(--card-bg);` and then define