/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need respond only rewritten CSS, no markdown. Need examine original CSS. It's a media query block with three rules. Need keep selectors, layout, typography? But properties present only text-align, font-size, padding. These are layout/typography? text-align is layout? It is in forbidden "text-align, vertical-align" — cannot change. font-size is typography — cannot change. padding is layout — keep within ±20%. Original only has text-align: center; font-size: 0.85rem; padding: var(--space-md) !important. But task says refresh visual identity changing colors/shadows/radius/transitions etc. But there are no colors. Need maybe add visual properties to same selectors? We can add color, background, border-radius, box-shadow, transitions, etc, while preserving original properties. But must not change layout structure. We can add visual properties. Need choose palette card-mosaic, soft-shadows. The target style says aggressive layout but mode conservative. We need visual changes only. Since original has no colors, we can add color properties to these selectors, and maybe adjust font-size? Cannot font-size. padding can vary ±20%. But should preserve.

Need output CSS starts with media query. We can include same selectors, then declarations. Need ensure no selector changes. We can add color/background etc within media query.

Potential issue: If we add background to .contact-card etc, likely okay visual. Need "vibrant card colors on neutral background", "each card type a different accent". For the three rules:
1 .app-hero-section .row .col-lg-7 { text-align: center; } can add color? hero section maybe text color. But could add text-shadow? Maybe not necessary.
2 .app-hero-section .badge.bg-warning { font-size: 0.85rem; } Could add background gradient? It has .bg-warning utility class. Changing background color could conflict with utility class? We're rewriting CSS file only, no utility? We can add background: linear-gradient(...); color; border-radius; box-shadow; padding? But padding layout maybe not. Badge likely can accept new visual. But adding background may override .bg-warning. Fine.
3 .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; } Can add background, border-radius, box-shadow, border, color etc.

Need consider media query max-width 575.98px, all mobile. We can add effects.

Need "card-mosaic" color palette: vibrant card colors on neutral background. But mobile contact cards could have colorful cards. Use variables? We can define custom properties? Need no new selectors? We can include :root? Wait original file is "块2/2" maybe snippet only. We can output only this media query, no root. We can use CSS variables existing? Not know. Better use direct colors. Need likely using existing CSS vars? But we can use hsl/rgba.

Need "All color values" should be changed? Original has none, so adding colors is okay. Need "border-radius adjusted" where border radius maybe none. Add. "Multi-layer soft shadows". "Smooth transitions". We can add transition properties. But transition should not alter layout. Add transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease? Wait transform is not listed forbidden? Actually under layout? position etc. Transform not listed explicitly, but it can affect visual/layout? Transform can move/scale but not layout. Is it allowed? The instructions say NEVER CHANGE list includes many but not transform. But "display, position, grid-template-*, etc" no transform. But safer not to change transform? We can add transition but not animate transform. Need ensure no hover rules? Original has no :hover. Could add? Rule says pseudo-classes selectors preserve if existing; cannot add new selectors? Probably must keep selectors exactly, so cannot add new selectors like :hover. We can include transition for future hover though. No new selectors.

Need maybe add background to .col-lg-7? That might create huge colored area? Not necessarily. Better add text-shadow and color to hero text. "text-shadow" allowed. Use color accent. Since mobile center text, could add color and text-shadow. But not background.

Need decide declarations.

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

Need output equivalent but with added visual declarations. Need maintain the padding exactly? Could keep var(--space-md) !important. It's layout but same. Maybe add margin? margin not in original; adding margin could alter layout; avoid. Add padding? Not. Add border-radius? border-radius doesn't affect layout. Add background, box-shadow, border, transition, backdrop-filter maybe.

Need ensure "border-width" not changed? We can set border: 1px solid rgba(...)? Border adds layout dimension (border-box maybe? box-sizing not known). Setting border can alter dimensions unless box-sizing border-box; but likely border-box globally. To be safe, avoid border-width. Could use outline instead, outline doesn't affect layout. But outline may overlay. Use box-shadow as border substitute. Or use `background` and `box-shadow`.

Need "outline styles (color, type)" allowed, but outline can affect? No layout. Could add outline: none? not necessary.

Need maybe use `background` with gradients. Since selectors:
- `.app-hero-section .row .col-lg-7 { color: #...; }` maybe visual.
- `.app-hero-section .badge.bg-warning { font-size: 0.85rem; color: #...; background: linear-gradient(...); border-radius: 999px; box-shadow: ...; }`
- `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; background: ...; border-radius: ...; box-shadow: ...; transition: ...; }`

Need "each card type a different accent". Could set article and .contact-card different background? Since selector list applies same. To differentiate card types while preserving selectors? Could split selector? No, selector list preserved? If split into two separate rules, selectors still preserved but selector list changed. Instructions: keep selector lists. Better keep combined. But we can use `:nth-child`? That would be new selector. Not allowed. Could not differentiate. Could instead use gradient background that has multiple colors? Maybe apply a colorful gradient to both. Or use CSS custom properties if card types have different type? But no selectors. Could use `&`? no.

Maybe use `.contact-channels-section article` with its internal structure? But we can't add selectors. We can keep combined and set same vibrant background. "Each card type a different accent" is target style, but not possible without new selectors. Could maybe set same accent per medium via perhaps `background: linear-gradient(135deg, #ff8a5c, #ff4d6d);`. For contact channels article and contact quick card, same visual but okay.

Need maybe include `backdrop-filter`? On mobile can be okay.

Need perhaps use variables but not define. Could use `var(--space-md)` existing. We can set `padding: var(--space-md) !important` unchanged.

Need "box-shadow redesign" at mobile: `0 2px 4px rgba(0,0,0,0.04), 0 12px 24px -6px rgba(0,0,0,0.12)` etc.

Need "large border-radius (12-24px)" so set `border-radius: 18px;`.

Need "smooth transitions (0.3-0.5s ease)" for contact cards: `transition: background 0.4s ease, box-shadow 0.4s ease, border-radius 0.4s ease;` but no state. Hmm.

Need maybe set `accent-color` on badge? accent-color applies to form controls, not relevant. Could set `caret-color`? no.

Need maybe change badge `font-size` unchanged. We can add `padding: 0.4em 0.9em`? That's layout? Padding is layout, original doesn't have padding so adding may alter. Avoid.

Need maybe include `line-height`? typography forbidden. Don't.

Need maybe include `color` in hero col. Use `color: #282c34` (neutral dark) maybe changes if original had different. But okay.

Need maybe set `background` for all three selectors? The first rule could add `color: #fff; text-shadow: ...`? But if hero-section col-lg-7 background not set, white text might be invisible. Better keep original text color or make it darker. Could set `color: #3a2e39` etc. But on mobile hero may already have dark background? We don't know. But we can choose dark text. Could also set `background: rgba(255,255,255,0.7); backdrop-filter: blur(8px); border-radius: 20px; padding: ...` But adding padding changes layout. Avoid.

Maybe for first rule, just add `text-shadow: 0 2px 8px rgba(255,255,255,0.35);` and maybe color? If text is dark, white shadow visible but okay. But "hero col" text shadow maybe subtle. We can add `color: #1c2333;`? Might override hero title color unexpectedly. Better not change original text color? But task says change all color values in file. There are none, but adding is okay. Could add only `text-shadow` and `transition` perhaps. Need use color values. Could set `caret-color`? no.

Potential better approach: For first rule, add `color: #fff; text-shadow: 0 2px 12px rgba(63, 18, 82, 0.35);` assuming hero background is dark. But original CSS likely from theme with dark hero. Not sure. Since .app-hero-section maybe dark; white text common. But if original already white, re-setting is fine. It changes text color if not white? Risk. Since visual refresh, okay.

Need maybe target "card-mosaic" via colored card backgrounds. For .contact-channels-section article and .contact-quick-section .contact-card, set `background: linear-gradient(135deg, #fff5f6 0%, #ffe3e8 100%);` or vibrant? "Vibrant card colors on neutral background. Each card type a different accent." Could set background color to a soft tinted card rather than fully vibrant. But target says vibrant card colors. Let's choose saturated gradients:
- `background: linear-gradient(135deg, #ffd166, #ff6b6b);` too much? On contact cards, might be okay but text readability? Could set `color: #2b1a3a;` maybe.

Maybe differentiate with `box-shadow` color? Same.

Need maybe use `--space-md` unchanged, but perhaps also add `padding: 1rem`? no.

Need perhaps make use of `border-radius` on badge and cards. Badge `border-radius: 999px`. Cards `border-radius: 20px`.

Need maybe add `box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);` exactly from variant, but could customize: `0 2px 8px rgba(0,0,0,0.04), 0 18px 32px -12px rgba(0,0,0,0.14)`.

Need "all colors, shadows, radius" more distinct. Since original none, any addition is distinct.

Need maybe change "font-size" cannot. Keep 0.85rem.

Need maybe include `transition` in first rule too? `transition: color .35s ease, text-shadow .35s ease;` no state. Fine.

Need maybe include `outline`? Not needed.

Need maybe include `filter`? Could set `filter: drop-shadow(0 6px 12px rgba(...))` but that plus box-shadow maybe. `filter` allowed. But filter can create containing block for fixed? not on these. Could add to cards: `filter: drop-shadow(0 8px 16px rgba(0,0,0,0.08));` This changes visual. But box-shadow with border-radius already enough. Multiple shadows are required.

Need maybe include `background` on badge as gradient. But .bg-warning utility sets background-color: #ffc107. Our `background` property with gradient overrides entire background. Good.

Need maybe set `color` on badge: `color: #3d1c04;` ensures contrast on gradient.

Need maybe background on article/card as gradient and color. If original text color inherited perhaps dark. Set `color: #2e1a47;` maybe dark purple. Good.

Need maybe use CSS variables? we could use `--card-shadow` in local rules? Not needed. But we can set `--safe-radius: 20px;`? That would be a custom property on selector, but no need.

Need maintain "Selector lists (commas)" exactly: The third rule selector list includes line break and comma. We'll preserve exactly same formatting? It's okay if formatting changes? "selectors preserved" likely exact names; whitespace can change. But to be safe, output same structure.

Need perhaps output only the CSS. No markdown.

Need decide final code with perhaps comments? No comments.

Let's craft:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #fff;
        text-shadow: 0 2px 12px rgba(74, 12, 92, 0.35);
        transition: color 0.35s ease, text-shadow 0.35s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #4a1c0d;
        background: linear-gradient(135deg, #ffd166 0%, #ff9f1c 100%);
        border-radius: 999px;
        box-shadow: 0 4px 10px rgba(255, 159, 28, 0.3), 0 12px 24px -8px rgba(74, 28, 13, 0.25);
        transition: background 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        color: #2b1a3d;
        background: linear-gradient(145deg, #fdfcfb 0%, #f4e9f9 55%, #e7d4f0 100%);
        border-radius: 22px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(87, 45, 115, 0.15);
        transition: background 0.4s ease, box-shadow 0.4s ease, border-radius 0.4s ease;
    }
}

But target wanted vibrant card colors. Maybe the background is too muted. Need more vibrant? Maybe first two are vibrant but cards muted. Could make cards soft pastel "vibrant card colors on neutral background" maybe okay. But target "Each card type a different accent" not possible. Maybe make cards gradient with a stronger accent:

`background: linear-gradient(145deg, #ffedf2 0%, #ffe1ec 50%, #ffd6e8 100%);` or `#e8f4fd`? Hmm.

Contact channels article vs contact quick card may be different elements; could use same rule but perhaps we can use different background if we split? Let's think if we can preserve selector list exactly? The instruction says "Selector lists (commas)" in NEVER CHANGE. "keep EXACTLY" likely means don't add/remove selectors. Splitting probably violates. Can't use `:is`? no. Could use `background` on individual selectors? We could add two separate rules inside media query? That would change structure and duplicate selectors. Not allowed.

Alternative: Use `background` and rely on descendant elements maybe? No.

Maybe output only the same combined rule. Fine.

But maybe to achieve "each card type a different accent", we can use custom properties that might be defined on parent? no. Could use `background: linear-gradient(...)` with accent colors from CSS variables for both, but same. Not "different".

Could we use `@media` and `&:nth-child`? No.

Need maybe include `border-radius` in badge and cards. Good.

Need maybe adjust padding within ±20%? We keep exactly.

Need maybe ensure no "AI marker comments". fine.

Need maybe "block2/2" might refer to just final chunk of a larger file? The original CSS snippet is only this media query. We should output only that. But perhaps there is more CSS in file unknown? The user gave one block only. We must rewrite this block. Use same media query.

Need maybe "font-size: 0.85rem" cannot change. Keep.

Need maybe "text-align: center" cannot change. Keep.

Need maybe "padding" remains with !important. Keep.

Need maybe "background" changes only existing? Original did not have background. Fine.

Need maybe include `-webkit-backdrop-filter`? not necessary.

Need maybe "transition timing, easing, duration" changed? We add. Good.

Need maybe "filter, backdrop-filter" could be added to cards as decorative effect. But too many might affect performance. Could add `backdrop-filter: blur(6px)` to badge? no.

Need maybe "opacity" can add? Not needed. Could set `opacity: 1`?