/* ============================================================
   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 output the rewritten CSS preserving all selectors and layout exactly, but change colors, shadows, radius, transitions, gradients etc. The original CSS is a small snippet within a media query. We need to apply the card-mosaic style and glow effects variant. However, the original CSS is only three rules:

1. .app-hero-section .row .col-lg-7 { text-align: center; }
2. .app-hero-section .badge.bg-warning { font-size: 0.85rem; }
3. .contact-channels-section article,
   .contact-quick-section .contact-card { padding: var(--space-md) !important; }

We cannot change layout properties: text-align is layout/typography? text-align is listed under typography as unchanged? Actually text-align is in the "Typography" section: "text-align, vertical-align" are listed as typography and cannot change. Similarly font-size cannot change. padding can change but within ±20%. But the request says visual identity only. The original CSS has no colors, shadows, radius, transitions, gradients. So we need to add? We cannot add new selectors? We can only rewrite the existing rules? The instruction says "Refresh this CSS visually" but preserve all selectors. We can add visual properties to existing selectors, and change existing values if any. But we cannot add new rules? Usually in these tasks, we output the same CSS with visual tweaks, adding shadows/colors to existing selectors. But we must ensure layout unchanged. Padding can be adjusted within ±20%. Let's calculate: --space-md is a CSS variable. We don't know its value. We could change the padding value slightly? But "keep similar values, ±20% maximum". Since it's a var, we can keep var? Or replace with a concrete value? Maybe we should keep var. But to add visual identity, we can add background, border-radius, box-shadow, transition, etc. to those selectors.

But wait: The target style is "card-mosaic" with glow effects. The selectors are hero section, badge, contact channels article, contact quick card. We can add glow shadows, background colors, border-radius, transition. We must preserve text-align, font-size as is. The padding must remain similar. We can change padding slightly. We can also add new properties like background, color, border-radius, box-shadow, transition, border, etc. We can also change the value of --space-md? No, that's a custom property likely defined elsewhere. We shouldn't redefine it.

We need to be careful: the file is "saishi.css". The snippet is only a media query. We must output the entire CSS? It says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is." So output the same structure with modifications. We cannot add new selectors, but we can add declarations within existing rules.

Let's analyze each rule:

Rule 1: .app-hero-section .row .col-lg-7 { text-align: center; } -> We cannot change text-align. We can add visual properties like color, text-shadow, etc. But careful: adding color might affect text, but that's allowed.

Rule 2: .app-hero-section .badge.bg-warning { font-size: 0.85rem; } -> cannot change font-size. We can add background-color, border, box-shadow, color, border-radius, transition. But note: .bg-warning is a Bootstrap class that sets background-color. We can override it here. That's fine.

Rule 3: .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; } -> We can adjust padding but within ±20%. If we don't know var value, we can keep var. We can add visual properties like background, border-radius, box-shadow, transition, etc.

Also, the media query is max-width: 575.98px. So it's mobile. We need to ensure glow effects don't hurt performance, but okay.

We need to choose a color palette: vibrant accent colors on neutral background. For hero section, maybe a text shadow? For badge, accent glow. For contact cards, distinct accent colors? Since they are the same rule (article and .contact-card), we could style them both. But we cannot differentiate between them without additional selectors. We can only apply the same visual treatment to both. The target says "Each card type a different accent" but we cannot create new selectors. But maybe we can use existing classes? The selector list includes article element and .contact-card. We could style both similarly.

We should also add transitions for hover effects? But no :hover rules exist. We could add transition property to the elements so that if there are hover styles elsewhere, they transition. But we cannot add new selectors like :hover. We can only modify existing selectors. Adding transition is okay.

Let's write a refreshed CSS that keeps everything else.

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

We need to output with same selectors. We can add properties.

For the hero section column, maybe add a subtle text-shadow? But it's a layout container, text-align center. We could add color? Might not be wise. But we can add text-shadow for the text inside? Actually text-shadow on the element applies to text inside. Could be okay. But keep it subtle.

For badge, add background gradient, border-radius, box-shadow glow in warning accent (yellow/orange). Text color maybe dark. Add transition.

For contact articles/cards, add background neutral, border, border-radius, box-shadow with glow accent, transition. But we must be careful: these are inside a section; adding background to article might be okay. Also, the padding should be similar. We can adjust padding to calc? Hmm.

We also need to preserve the !important on padding. If we add other declarations, they don't need !important. We can keep the padding as is. Optionally adjust to 0.9 * var(--space-md) but that's still var. Actually var(--space-md) is a value; multiplying by 0.9 is okay? But that changes the expression. The instruction says "padding, margin (keep similar values, ±20% maximum)". Using calc(var(--space-md) * 0.9) would be within 90%, okay. But perhaps too fancy. Let's keep it simple: padding: var(--space-md) !important; Because we don't know value, adding a calc might be weird. But we can keep it.

However, the task explicitly says "Only change colors, shadows, radius, transitions, gradients." So padding should not change at all? Actually the allowed changes include visual properties, and padding is in the "never change" list but with tolerance ±20%. But the mission statement says "Only colors, shadows, and decorative properties may change." Then in the allowed list, they include "border-color and border-style (NOT border-width)" etc. Padding is not in the allowed list, but in the "never change" list it says "padding, margin (keep similar values, ±20% maximum)". So we can change padding by up to 20% if we want. But since we don't need to, we can leave it. Let's leave padding exactly as is to avoid risk. We can add other declarations.

Now, "card-mosaic" target style: grid with mixed spans etc. But we cannot change layout. So we can only imbue the existing elements with mosaic-like card colors. The contact articles become cards with distinct elevation. We can give them background, border, box-shadow, border-radius.

We need to choose colors. Let's define a fresh palette. Maybe:

- Neutral background: #f4f6fb
- Card background: #ffffff
- Accent for warning badge: #ffaa2b (vibrant orange) with glow.
- Hero section text maybe #1e2b3c? But we can't change font size. We can add color to badge.

For the article/card, perhaps use multiple box-shadows: one for elevation, one for glow. In mosaic style, cards have distinct elevation, so we can use different shadow intensities. But both article and .contact-card get same style. That's okay.

We can add a subtle background gradient to the cards: linear-gradient(135deg, #ffffff, #f0f4ff). But that changes background. Good.

Add border: 1px solid rgba(...). Border-width must not change? Original had no border, so adding border-width is new, but the instruction says "border-color and border-style (NOT border-width)" meaning we should not change border-width. But if original had no border, adding border-width? Hmm. The rule says "border-color and border-style (NOT border-width)" only in allowed changes. It might imply we can change border color/style, but not width. If we add border, we are adding width. That might be considered a layout change? Usually border width affects layout, but we can use outline instead? Or use box-shadow to simulate border. Better avoid adding border-width because it can affect layout. We can use outline? But outline doesn't affect layout. However, outline is allowed: "outline styles (color, type)" but not width. Adding outline-width? Actually "outline styles (color, type)" implies width not to change? Hmm. Original had no outline. To be safe, we can use box-shadow to create a border-like effect: inset 0 0 0 1px rgba(...). That doesn't affect layout. Good.

So for cards, we can add background, border-radius, box-shadow: an outer glow and an inset ring. For badge, similar.

Let's craft the CSS.

Important: Do not add comments. Output only CSS.

Let's write:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 1px 8px rgba(255, 255, 255, 0.25);
        color: #1e2b3c; /* maybe not necessary */
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffb347, #ff8c00);
        color: #1e1e2f;
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(255, 140, 0, 0.4), 0 4px 12px rgba(255, 140, 0, 0.25);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(135deg, #ffffff, #f4f7ff);
        border-radius: 14px;
        box-shadow: 0 0 24px rgba(120, 140, 255, 0.25), 0 8px 24px rgba(18, 24, 64, 0.12);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}

But note: adding text-shadow to the col might affect text inside. Could be okay. But the text-shadow color should match neutral. We need to ensure no AI comments. Also, the original had no color. Adding color to hero section might set text color for all text inside, potentially changing visual identity. That's okay as it's a visual change. But if there are other styles that set color, this could conflict. We can skip color to be safer. Instead just add text-shadow or nothing. But the task wants visual refresh; adding text-shadow is subtle. However, text-shadow is allowed. Let's add a soft glow.

But wait: the hero section row col-lg-7 originally only text-align. If we add a background or color to the col, it might affect layout. We can add text-shadow only, which doesn't affect layout. Maybe add a text-shadow to the hero text to match glow effects? Could be nice.

For badge, we need to override Bootstrap's .bg-warning. We can set background to linear-gradient. Since .bg-warning sets background-color, our background gradient overrides. Good. We also set color. The font-size is unchanged. We set border-radius, box-shadow, transition.

For cards, we set background, border-radius, box-shadow, transition.

We should ensure that the transition uses ease timing. The variant says "glow shadows in accent color: 0 0 24px rgba(accent, 0.4)" and "Halo on hover: 0 0 32px rgba(accent, 0.6)". But we cannot add :hover because selectors must be preserved. We could use transition to allow hover states from existing CSS elsewhere to animate. There's no hover selector in this file, but if hover styles exist in other files, transition will apply. That's okay.

Could we use @media (hover: hover) to add hover? That would be a new @media rule inside the existing one. But the instruction says keep all selectors; adding new selectors inside a media query would be adding selectors, not allowed? It says "Selector lists (commas)" and "Every selector character-for-character preserved?" Adding new selectors would not preserve. So we cannot add :hover. We can only modify existing selectors.

Let's check if we can change the padding value slightly to create a mosaic effect? No, not necessary.

We should also consider the "card-mosaic" target: "Grid with mixed spans" but we cannot change grid. So we just apply visual mosaic: vibrant card colors on neutral background. The cards have distinct accent. Since both share same rule, they have same accent. But maybe we can use a CSS variable that is already defined differently for different card types? We don't know. But we can use `currentColor` or default? Hmm.

Maybe we can use a background that is more colorful: e.g., a conic-gradient? But that might be too aggressive. For mosaic, vibrant card colors on neutral background. We could give the contact cards a vivid accent background, maybe a gradient with amber/teal? But then text readability? The cards likely contain text. If we change background to vibrant, text might need contrast. But we are not changing color of text inside. Possibly not ideal. Better keep cards light with subtle glow.

However, the target says "Each card type a different accent". We cannot separate article vs .contact-card because they share the same rule. But we can use the fact that they are different elements: article and .contact-card can be styled separately if we split the selector list? But the instruction says keep selector lists exactly as-is. We cannot split the list into separate rules because that changes the selector list? Actually, if we break one rule into two rules, each with one selector, the selectors themselves are preserved, but the structure changes. The instruction says "Keep ALL selectors and layout exactly as-is." It doesn't say you can't reorganize rules? But usually these tasks require outputting the same selectors, but you can rewrite the declarations. Splitting a selector list into two rules would preserve the selectors but change combinator? I think we should not split because it might be considered altering the CSS structure. Better to keep the selector list as one rule. So we can't give different accents to article vs .contact-card. We can give them the same accent.

Alternatively, we can use `:where(article)` etc. No, that changes selector.

Thus, we'll apply a single visual style.

Let's craft final CSS with no extra comments.

We need to ensure no markdown fences. Use only CSS.

Possible final:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 1px 12px rgba(255, 255, 255, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffc247, #ff7a00);
        color: #3d1c00;
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(255, 122, 0, 0.45), 0 4px 16px rgba(255, 122, 0, 0.3);
        transition: box-shadow 0.35s ease, transform 0.35s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(135deg, #ffffff 0%, #eef3ff 100%);
        border-radius: 14px;
        box-shadow: 0 0 24px rgba(96, 120, 255, 0.18), 0 8px 24px rgba(20, 30, 80, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        transition: box-shadow 0.35s ease, transform 0.35s ease;
    }
}

But wait: adding text-shadow to col-lg-7 might be applied to the entire column, which could have many children, causing unwanted shadows on text. But likely okay. Could be more specific: .app-hero-section .row .col-lg-7 is a column, text-align center. Text-shadow is inherited? Actually text-shadow is inherited from parent. So it applies to all text inside. That could be a visual effect. But if the hero section has a heading, it'll get a subtle white glow. Good.

However, the original CSS is from "saishi.css" and probably has other rules. We're only outputting this media query block. That's fine.

Let's verify no forbidden changes:
- Selectors preserved exactly.
- text-align unchanged.
- font-size unchanged.
- padding unchanged (kept var).
- Added background, color, border-radius, box-shadow, text-shadow, transition. These are allowed.
-