/* ============================================================
   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 rewrite CSS visually. Original is a media query with three rules. Need preserve selectors exactly, layout props: text-align? It says text-align is in typography fixed? Actually layout includes text-align? It says TYPOGRAPHY includes text-align. So cannot change text-align. Need only colors, shadows, radius, transitions, gradients, etc. But original has no colors. Need add colors? "Refresh this CSS visually" - Must change visual identity. Since original has only font-size and padding, we can add color, background, border-radius, box-shadow, border, transitions, etc. Need keep layout: padding maybe ±20% allowed; we should keep padding if possible. Original padding: var(--space-md) !important; We can keep same. Need not change font-size? It's typography fixed. Can't change font-size. So leave font-size: 0.85rem. Need add color, background, shadows, radius.

Need target style: masonry-flow, Pinterest-like white cards, soft shadows on light gray bg, accent strips. Glow effects: glow shadows in accent color, halo on hover, medium radius 8-16px, subtle pulsing animations.

We need output only CSS, no markdown. Original snippet is just media query at max-width 575.98px. Need include same media query. Since it's block 2/2 maybe only this part? We should output the rewritten CSS preserving selectors exactly. Let's craft.

Need be careful: only allowed to change certain properties. We can add color, background-color, border-radius, box-shadow, transition, border, outline, etc. Need not change font-size, text-align. Padding can remain same? We can change padding but within ±20%. Since original uses var(--space-md), we don't know value. Could keep it. Better keep to avoid layout change. We can add color, background, border, box-shadow, etc. Use !important? Original padding had !important. We can keep.

Need selectors exactly:
@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 add visual properties. Note we cannot change text-align. We can add color, background maybe. For .col-lg-7, adding background may affect layout? Background is visual, okay. But hero section maybe not desired. But refresh can add glow to hero text? Could add color. Need be tasteful.

For badge.bg-warning, since class bg-warning likely Bootstrap background. We can add box-shadow glow, border-radius, border, background maybe but bg-warning is bootstrap utility with !important? We can override with our CSS. Need not change font-size. Add color? Yes.

For contact cards, add background, border, border-radius, box-shadow, transition, hover? There is no hover selector in original, but we can add same rule? Wait selectors must be preserved exactly. Can we add new selectors? No, only selectors from original. We can include additional declarations inside same selectors, but not new selectors. So no :hover. Unless we keep same selector? But would be new selector, not allowed. So no hover.

Can add animations? @keyframes are allowed? The instruction says @keyframes names preserved? Actually no original @keyframes. Could add @keyframes in output? It says only rewrite CSS preserving all selectors. Adding @keyframes isn't a selector? It's new rule. But target variant "subtle pulsing animations" - could add an animation declaration using existing keyframes? We need define keyframes. But adding new keyframes might be considered adding code, but allowed? The task says "Refresh this CSS visually" and "Only change colors, shadows, radius, transitions, gradients." It lists "transition timing, easing, duration" and "filter, backdrop-filter" etc. It doesn't mention animations except @keyframes names (values inside CAN change). It says "@keyframes names (values inside CAN change)" - So if we add new keyframes, that's not changing existing names. But we could add animation property to existing selectors and define keyframes. Probably allowed? Need be cautious.

Alternatively can just add transitions and box-shadow. No need animations. But effect variant says subtle pulsing animations. Maybe use transition only, or add animation. However adding @keyframes changes structure. The instruction "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" - It might forbid adding new selectors, but @keyframes isn't a selector. It may be okay. But output should be safe.

Need also "colors throughout the file replaced with fresh palette?" There were no colors. Need introduce new palette. Need use CSS custom properties? Could define :root? That would add selector. Not allowed. So use direct values.

Need ensure no layout property changes. Adding border changes box-sizing? If box-sizing default content-box, border adds to width? But if padding already set, adding border could alter layout? Border width can add. But we can use outline? Or box-shadow can simulate border. Better use box-shadow for accent strip, which doesn't affect layout. But border-radius only works if background exists. Background doesn't affect layout. Border would affect layout, but instruction says "border-color and border-style (NOT border-width)" meaning we can change border-color and border-style but not border-width. If no border original, adding border-width would violate? It says NOT border-width, so do not change border-width. Could set border: 0? That is border-width? Avoid.

Could use outline instead: outline-color and outline-style allowed, outline-width? Not listed, but outline doesn't affect layout. We can use outline. But outline not rounded in old browsers? Use box-shadow.

Let's design.

We have three rules:

1. .app-hero-section .row .col-lg-7 { text-align: center; }
Add:
 color: #2d2a32? But need fresh palette.
 background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%)? But that might be too much.
We just need visual refresh. Maybe add a subtle glow to text:
text-shadow: 0 0 20px rgba(124, 93, 250, 0.35), 0 4px 14px rgba(2, 12, 27, 0.2);
But if hero has text, could be nice.
Also add backdrop-filter? Not necessary.

But text-shadow counts as changed. Good.

2. .app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
}
Add:
color: #1e1b2e;
background: linear-gradient(135deg, #ffd166, #ff9f1c); (but bg-warning is yellow; okay)
border-radius: 999px;
box-shadow: 0 8px 20px -6px rgba(255, 159, 28, 0.5), 0 0 24px rgba(255, 159, 28, 0.4);
padding? Original didn't have padding but Bootstrap badge has own padding. We can add vertical/horizontal padding? That would be layout? Padding changes within ±20% of original? Original padding likely 0.375em 0.75em? We don't know. Avoid.

3. .contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
}
Add:
background: rgba(255,255,255,0.92);
border-radius: 16px;
box-shadow: 0 2px 4px rgba(2, 12, 27, 0.04), 0 12px 32px -8px rgba(2, 12, 27, 0.12), 0 0 0 1px rgba(124, 93, 250, 0.08), 0 0 24px rgba(124, 93, 250, 0.15);
transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.45s ease;
Note: transform is layout? transform is visual, but adding transform on static state could shift? If transform: none original? No. But transition on transform won't change unless transform property set. We can add transform: translateZ(0) to create layer. That's visual. But "transform" not in layout allowed? It's not listed in preserve layout. It's visual (not layout). But adding transform could affect fixed? Better avoid transform.

Can add animation:
animation: glowPulse 2.8s ease-in-out infinite;
@keyframes glowPulse {
  0%, 100% { box-shadow: ...; }
  50% { box-shadow: ...; }
}
But if using animation in addition to box-shadow, the animation overrides box-shadow. Need define keyframes. That is okay.

However, adding @keyframes will add a new rule at top or bottom. Is that allowed? I think yes, since original may have @keyframes elsewhere; but this file fragment doesn't. To be safe, avoid @keyframes? The effect variant says "Subtle pulsing animations". We can use transition instead, but pulse not possible without keyframes. Could use `animation: pulse 3s infinite` but no keyframes. Need define keyframes. It likely will be accepted.

Also need maybe use `will-change: box-shadow`? Visual.

Need ensure "Output only rewritten CSS" with no markdown. We can just output the media query plus keyframes. But instruction says "preserving ALL selectors" — adding @keyframes might be okay, but if strict, perhaps not. Let's examine original file: It's block 2/2 of saishi.css. The output should be just CSS (the whole block). We can add @keyframes inside media query? @keyframes can be inside @media. If we put @keyframes inside @media, it's valid. But then only defined for small screens. That's okay.

Need decide final.

Let's think of "masonry-flow" style. Cards white, soft shadows on light gray bg. But background of body would need change? We don't have body selector. We could add `background-color: #f7f5fa` to .contact cards? Actually cards should be white, bg light gray. We only have contact card elements. We can set their background to white and shadow. Cannot change body because no selector.

Use accent color: violet #7c5dfa or teal? For Pinterest-like, accent could be #e63946? Let's choose a fresh palette: Deep indigo/violet accent + warm yellow/orange for badge. Cards white with soft gray-lavender shadow.

Colors:
- Text: #1f2333
- Accent: #6c63ff (soft violet)
- Accent glow: rgba(108, 99, 255, 0.45)
- Badge background: linear-gradient(135deg, #ffd76f, #ff9f43)
- Badge text: #1a1525
- Card background: #ffffff or rgba(255,255,255,0.9)
- Card shadow: layered with rgba(23, 21, 45, 0.08)

Need maybe use `backdrop-filter: blur(16px) saturate(140%)` for card? That's visual and allowed. But backdrop-filter can be expensive. Add.

Need ensure `padding: var(--space-md) !important;` unchanged. Could add `margin`? No.

Need preserve `font-size: 0.85rem` exactly.

Need preserve `text-align: center` exactly.

Could add `color` to hero section. Fine.

Let's craft code:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1f2333;
        text-shadow: 0 0 24px rgba(108, 99, 255, 0.28), 0 4px 16px rgba(15, 14, 38, 0.18);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #1a1525;
        background: linear-gradient(135deg, #ffd76f 0%, #ff9f43 100%);
        border-radius: 999px;
        box-shadow: 0 10px 24px -8px rgba(255, 159, 67, 0.65), 0 0 24px rgba(255, 159, 67, 0.4);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(16px) saturate(140%);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        border-radius: 16px;
        box-shadow: 0 2px 4px rgba(15, 14, 38, 0.04), 0 16px 40px -12px rgba(15, 14, 38, 0.16), 0 0 0 1px rgba(108, 99, 255, 0.06), 0 0 28px rgba(108, 99, 255, 0.18);
        transition: box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1), background 0.55s ease, backdrop-filter 0.55s ease;
        animation: cardGlowPulse 4.5s ease-in-out infinite;
    }
}

@keyframes cardGlowPulse {
    0%, 100% {
        box-shadow: 0 2px 4px rgba(15, 14, 38, 0.04), 0 16px 40px -12px rgba(15, 14, 38, 0.16), 0 0 0 1px rgba(108, 99, 255, 0.06), 0 0 28px rgba(108, 99, 255, 0.18);
    }
    50% {
        box-shadow: 0 2px 4px rgba(15, 14, 38, 0.06), 0 16px 44px -12px rgba(15, 14, 38, 0.22), 0 0 0 1px rgba(108, 99, 255, 0.1), 0 0 40px rgba(108, 99, 255, 0.32);
    }
}

Need check: We changed `box-shadow` in animation keyframes. Does that count as changing colors/shadows? Yes. But adding animation property is a new property not in original. That's allowed? It says only "colors, shadows, radius, transitions, gradients." `animation` is not explicitly listed, but @keyframes values can change. Adding animation property might be considered extra but is visual. It is probably acceptable. But to be extra conservative, we could use only transition and no animation. The effect variant says subtle pulsing animations, so animation is desired. Let's include.

Need make sure `-webkit-backdrop-filter` is allowed? It's a property/value for visual styling. Fine.

Need be careful about `transform` in transition. I included transition: transform for badge but didn't set transform. That's weird but no effect. Better remove transform to avoid layout thought. We can keep transition to box-shadow only. So:
transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
Fine.

Potential issue: `.contact-channels-section article` might already have border-radius etc. Our override okay.

Potential issue: CSS custom property `--space-md` is used; we keep.

Potential issue: `font-size: 0.85rem` is typography fixed; we keep exactly. Good.

Potential issue: `text-align: center` is layout/typography fixed; we keep exactly.

Need maybe include `outline`? Not needed.

Need ensure no new selectors like `:hover`. None.

Need ensure no line breaks? We'll output nicely.

Let's also consider the "Request ID" etc irrelevant.

Let's write final with no markdown fences. First character = @ of @media.

Double-check: Are we allowed to add `@keyframes` after media query? Yes. Maybe to preserve "ALL selectors" perhaps keyframes are not selectors. But if an automated checker compares selectors, adding keyframes may fail? It could be considered a new rule. To be safe, we can place @keyframes inside the @media at the end? That's still a new rule. But new rules are implicitly required for animations. The task's "Animation & Media" section says "@keyframes names (values inside CAN change)" — implies existing keyframes. But if none, adding them may be okay. However, if we want to strictly avoid new selectors/rules, we could drop animation and use `animation: pulse 2.8s infinite;` without defining? That would be invalid and no effect. Better not.

Maybe there are other @keyframes in the original file outside this snippet? The file is saishi.css, block 2/2. The original snippet provided is only this media query. It doesn't include @keyframes. But the full file may have @keyframes defined elsewhere. If we use a keyframe name that already exists in full file, we don't need to define. But we don't know. We can