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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

We need answer CSS rewrite. Need follow mode. Need transform given CSS. Original is small media query with three rules:
@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 refresh visual without layout. But this CSS has only text-align, font-size, padding, CSS var padding. We can change visual properties only. Need keep selectors exactly. Cannot change font-size? "Typography: font-size, font-weight ... unchanged" so leave. text-align unchanged. padding can vary ±20%? Need CSS variable --space-md value? We don't define? The original uses var(--space-md) !important. We can perhaps keep padding variable or adjust? It's in media query. To alter visual identity, can replace padding value? It's layout margin/padding similar ±20% but original uses var. We don't know value. Could rewrite using calc maybe but it's visual? Need maybe keep exactly because paddings forbidden? It says padding margin keep similar ±20%. Since original var unknown, could keep var. But need color/shadows/radius? No elements to affect. We could add new declarations to existing selectors, e.g. color, background? But selectors and properties may be added? It says CSS visual changes; can add color declarations. However in media query under 575.98, adding color could be okay. But target style horizontal strips/glow effects doesn't apply well. We need reflect target style maybe add text-shadow, background? But adding properties within same rules is allowed? It says "Only colors, shadows, and decorative properties may change" and "refresh visual identity WITHOUT changing layout structure or class names." Original has only layout-ish properties. We can transform by injecting visual declarations into each rule? Need ensure not violate "Typography unchanged" and "padding keep similar". But we need output fresh CSS. We can add:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 0 24px rgba(accent, 0.4); 
        color: ...? 
    }
    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        box-shadow: 0 0 24px rgba(255, 193, 7, 0.4);
        ...
    }
    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 12px;
        box-shadow: ...
        background: ...
    }
}

But need be careful: The target style "horizontal-strips" with alternating backgrounds, glow effects. Need perhaps use colors from palette. Need define palette and glow. For very small CSS, we can update second rule with glow on badge, third with card glow/radius. First with text-shadow/color. We should preserve all original declarations. Need not change font-size. But can add.

Need think about selectors exactly original. For selector lists with comma and newline, preserve exactly? Yes. Need output only CSS, no markdown fences. Need ensure it feels "horizontal-strips": maybe add background gradient? But we cannot change layout or dimensions, but can set background only. For each element, maybe:
- Hero col centered: color #1f2937; text-shadow: 0 4px 24px rgba(...).
- Badge: background: linear-gradient(135deg, #fbbf24, #f59e0b); border-radius: 999px; box-shadow: 0 0 24px rgba(245,158,11,.4); Perhaps original class is .badge.bg-warning, Bootstrap warning. If overwrite background it's visual; okay. But need not break functional? It's CSS refresh.
- Contact cards: background #fff; border-radius: 16px; box-shadow 0 0 24px rgba(...); But .contact-card might already have background; adding is okay. Maybe "horizontal-strips" implies each card background alternating? We can't add nth-child if selector original absent. Could leave.

Need perhaps "first character = first CSS character" so include @media. Need no "AI-REWRITTEN".

Need consider "Request ID", "File fingerprint" irrelevant.

Need maybe output exactly original plus new declarations. But is that enough? Let's craft:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1f2937;
        text-shadow: 0 4px 28px rgba(245, 158, 11, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fef3c7, #fbbf24, #f59e0b);
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.4);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 16px;
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.35);
    }
}

Need maybe include hover halo? Need preserve pseudo? No hover selectors in original. Could add transition? But there can't be hover without selector. Could add transition property to cards, but no pseudo. Might not be needed.

Potential issue: Original "padding: var(--space-md) !important" remains. We could modify padding to "calc(var(--space-md) + 2px)"? But no need.

Need consider "text-align center" is layout; keep. "font-size: 0.85rem" font unchanged. Good.

Need perhaps incorporate alternating color strips? Since media query only, no full width strips. Maybe add background to contact cards to create cream/white. But class .contact-channels-section article and .contact-quick-section .contact-card. They may already have cards. Could set "background: #fff" and "box-shadow". Good.

Could maybe add "accent-color: #f59e0b" or "caret-color"? Not applicable.

Need maybe transform variable? Target style uses horizontally striped sections. We could maybe set body? But no body selector. Can't add selector. Must not add selectors? Actually task says keep all selectors exactly, doesn't explicitly forbid adding selectors, but "HTML is FIXED — only colors..." and output preserving all selectors; likely shouldn't add. Safer no new selectors.

Need maybe if we add "background: linear-gradient" to `.badge.bg-warning`, Bootstrap's `.badge` has display inline-block, padding etc; no layout changed. Good.

Need maybe "border-radius: 999px" for badge; original badge may have `border-radius: .375rem` from Bootstrap; changing to pill is visual. okay.

Need ensure all colors match palette. Let's use warm cream/amber/dark:
- Hero color: #1f2937
- text-shadow: 0 4px 30px rgba(245, 158, 11, 0.25)
- Badge gradient #fff7ed -> #fbbf24 -> #d97706? Need warning.
- Badge glow: 0 0 24px rgba(245, 158, 11, 0.45)
- Cards: background rgba(255, 255, 255, 0.92), border: 1px solid rgba(245, 158, 11, 0.12?) Border color is visual property can add. Since "border-color", "border-style" allowed. But adding border would affect box size unless `border-width` must not change? Original no border width? Could add border-width? It says NEVER CHANGE border-width; if original has no border-width, adding 1px could alter layout. Don't add border or if add with same width would alter. Avoid border. We can add background and box-shadow only. Could use box-shadow with inset to mimic border without affecting layout: 0 0 0 1px rgba(245,158,11,0.15). That's shadow allowed. Good.

Need maybe "outline" can also mimic border without layout? Outline doesn't affect layout but can add. But no need.

Need perhaps "filter: drop-shadow" also okay. But keep simple.

Need maybe "transition: background-color 0.3s ease, box-shadow 0.3s ease" allowed? transition timing changes allowed. Could add to cards. But transition property is allowed? Yes "transition timing, easing, duration" can change; adding new maybe okay. But no hover selectors, transition not useful. Could still be native? no.

Need perhaps "animation: pulse" could add but need keyframes. We don't want add @keyframes? allowed? It says @keyframes names preserved; values can change, but adding new keyframes? Not necessary.

Let's review original output: "Output the rewritten CSS now". We need not include comments. Let's ensure no markdown fences. Need maybe only include @media block. Should we include original media query and no extra braces? Yes.

Need maybe ensure "max-width: 575.98px" unchanged. Yes.

Need consider "padding: var(--space-md) !important" is inside contact card rule. Should we set to `calc(var(--space-md) - 3px)`? But "padding keep similar ±20%" and unknown; keeping is safest.

Need maybe "font-size: 0.85rem" unchanged. Good.

Need perhaps "text-align: center" unchanged. Good.

Need maybe add `color` to `.badge`? Bootstrap warning color often dark. We can leave. A warning badge with gradient and text color from original (dark?) Could add `color: #78350f` for contrast. But original text color might be inherited; adding color is allowed. It could improve but no need.

Need maybe "background: linear-gradient(135deg, #fef3c7, #fbbf24, #f59e0b)" uses strong color. But target horizontal strips uses alternating white/cream/dark/white pattern. Could set card backgrounds: first article? But no nth. Could set all contact cards with `background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%)`. It doesn't alternate but okay.

Need maybe more glow: `.app-hero-section .row .col-lg-7 { color: #1e293b; text-shadow: 0 0 24px rgba(245, 158, 11, 0.4), 0 0 48px rgba(245, 158, 11, 0.2); }` But text-shadow on text may look odd. Glow effect variant explicitly "Glow shadows in accent color". Could be okay.

Need maybe add to hero: background? Could set `background: radial-gradient(circle at 30% 30%, rgba(245, 158, 11,0.12), transparent 70%)`; but adding background to column could decorate but maybe cover parent? Background on col only visible if parent no bg? okay. But can alter visual; no layout. Could do. However text-align centered with background radial could create horizontal strip? No.

The target style is "horizontal-strips" though original CSS is media query for mobile. There's no full-width section selectors. We can't add new selectors, so cannot create horizontal strips. We can maybe mention? Not in output. We can still align with "horizontal-strips" by using a background on contact cards and badge. Maybe output only modified CSS, no explanation.

Need maybe better response: The instruction says "No markdown fences, no explanations". So final answer should be pure CSS.

Need decide exact CSS. Let's craft with 3 groups, preserving original declarations plus visual additions.

Potential issue with `!important`: Should preserve in padding. If adding `background` to same rule, no need important. Good.

Need perhaps "only colors, shadows, and decorative properties may change": adding `background` to hero col changes color. Good.

Need maybe "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)" We should include multi-layer shadows for cards/badge. Use:
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06), 0 0 24px rgba(245, 158, 11, 0.35);
for cards. That's two-layer. Badge: `box-shadow: 0 0 16px rgba(245, 158, 11, 0.35), 0 0 32px rgba(245, 158, 11, 0.2);`
Hero: `text-shadow: 0 0 24px rgba(245, 158, 11, 0.3), 0 4px 28px rgba(245, 158, 11, 0.15);`

Need maybe "halo on hover" requires `:hover` selectors, but original media query has no selectors for hover. Could we add `@media (max-width: 575.98px) { .contact-quick-section .contact-card:hover { ... } }` no, adding selectors? We could modify pseudo-classes? It says pseudo-classes keep exactly; if original doesn't include hover, adding would change selectors. Don't add.

Need maybe "subtle pulsing animations": Could add `animation` to badge? Need @keyframes. But we could add an inline `transition` to not. Better not. But target variant says subtle pulsing animations. We might add `animation: glowPulse 2.5s ease-in-out infinite` to badge and cards, and `@keyframes glowPulse` add. But original CSS didn't include keyframes. We can add @keyframes because allowed? "Animation & Media: @keyframes names (values inside CAN change)" but adding new @keyframes maybe not forbidden. Output can include @media and @keyframes, but user said only CSS, all selectors preserved. If we add @keyframes, no HTML layout change. But if we add animation property, it's visual. Could do. However original file fragment only media query; adding top-level @keyframes might be okay. Yet "preserving ALL selectors" means no extra selectors perhaps? @keyframes is not a selector. Could be okay. But simpler to avoid.

Need maybe output with exact original selectors. Let's verify:
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;
    }
}

If we output:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1e293b;
        text-shadow: 0 0 24px rgba(245, 158, 11, 0.3), 0 4px 28px rgba(245, 158, 11, 0.15);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fef3c7, #fbbf24, #f59e0b);
        border-radius: 999px;
        box-shadow: 0 0 16px rgba(245, 158, 11, 0.35), 0 0 32px rgba(245, 158, 11, 0.2);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(180deg, #ffffff, #fff7ed);
        border-radius: 16px;
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06), 0 0 24px rgba(245, 158, 11, 0.3);
    }
}

Need maybe not add border/outline? fine.

Let's think if this could violate "font-size unchanged": we leave. "padding unchanged": we leave. "text-align unchanged": leave. Good.

Need maybe "badge.bg-warning" with `background` gradient changes the class bg-warning background. Fine.

Need maybe "color: #1e293b" on hero col affects text color; okay.

Need maybe "background: linear-gradient(180deg, #ffffff, #fff7ed)" on article/card may conflict with existing if `background-color` applied with important? No important? Original no. Fine.

Need maybe "text-shadow" on hero col changes visual but maybe text-align center. Good.

Need maybe "border-radius" for card isn't necessarily okay if overflow hidden? It's visual. okay.

Should we include "accent-color: #f59e0b"? Not applicable, maybe no need.

Could perhaps add `backdrop-filter: blur(8px)` to cards? That's allowed but may have performance. no.

Need maybe "filter: drop-shadow" could make cards glow around irregular shapes. But box-shadow sufficient.

Need maybe "target style horizontal-strips" could have "background alternating white/cream/dark/white"; our card background gradient white-to-cream fits.

Let's ensure no "AI-REWRITTEN" comments. no.

Need maybe "First character = first CSS character": start with @media no leading whitespace. yes.

Potential issue: If output only CSS, final answer should not include code fences. We'll output raw.

Need maybe include only in final. Done.

Need consider if user expects