/* ============================================================
   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. Need process. Need rewrite original CSS visually. Original is minimal media query with selectors. We must preserve selectors exactly, layout properties. We can add visual properties? They said only colors, shadows, decorative properties may change. We have no colors currently except badge font-size and padding. Need refresh. Since HTML fixed, class names same. Need target masonry flow but impossible at 575 media maybe. We can modify padding values within ±20%. Selectors preserved. We can add box-shadow, border-radius, background, color? We need be careful not break layout? For .badge.bg-warning font-size unchanged? Typography unchanged. We can add? The instruction says only colors shadows decorative may change. Could add border-color? But if add display etc not allowed. Need perhaps "Only change colors, shadows, radius, transitions, gradients." We can add color/background/box-shadow/border-radius/transition etc to elements. Need retain existing declarations? Original only has text-align, font-size, padding. We need maintain those exact values maybe. Need use target palette: white cards, soft shadows on light gray bg, accent strips. But file seems maybe only media query bottom. We output only CSS with same selectors and add visual styles.

Need determine robust output. We can add for:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        /* visual additions? */
    }
    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(...?); color; box-shadow; border-radius; transition? 
    }
    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #fff; border: 1px solid...; border-radius; box-shadow; transition...
    }
}

Need preserve selector list exactly. Padding: var(--space-md) !important; cannot change? It is padding, must keep similar ±20% but user says keep similar, maybe cannot change custom property. We can keep. Add other visual properties. But if add transition property? It's allowed (transition timing etc). Need maintain selector no changes. Fine.

Need choose colors. "Pinterest-like: white cards, soft shadows on light gray bg; accent color; glow effects 0 0 24px rgba(accent,0.4), hover 0 0 32px rgba(accent,0.6); medium radius 8-16px; subtle pulsing animations." In media query likely mobile. We can set card background white, border-radius 14px, box-shadow 0 8px 24px rgba(...,0.08) plus 0 0 18px rgba(accent,0.1). But accent maybe coral/pink? Pinterest red. Use --pinterest-accent: #e60023? Since var? We can use rgba(230,0,35,.35). Soft gray bg: #f5f1ef maybe. But for articles/cards themselves. Need maybe no background body. We can add background to cards. 

Need ensure in media query, .contact-card etc have !important padding. Can add `background: #fff` etc before/after. Need CSS order doesn't matter? We can add custom props? Maybe not necessary.

Need perhaps add `box-shadow: 0 10px 25px -8px rgba(190, 24, 60, 0.25), 0 0 18px rgba(244, 63, 94, 0.12);` and border. Hover? Original has no hover, but can add transition. In media query (touch) hover maybe not applicable but okay.

Need maybe `background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px);` allowed backdrop-filter. But target says white card. Could add for contact cards. Need maybe border-left accent strip: `border-left: 4px solid #e11d48`? But border-width cannot change? It says NEVER change border-color and border-style (NOT border-width). Actually they disallow changing border-width because layout. Can we add border-left-width? They specifically say "border-color and border-style (NOT border-width)" i.e. can change color/style, not width. So don't add `border-left: 4px solid...` because width changed? Could use `box-shadow: inset 4px 0 0 #e11d48` or `outline`? Outline maybe style/color can change, but width? They said outline styles (color, type) can change; not width. So avoid outline width. Use background gradient to create accent strip without changing dimensions? Yes `background: linear-gradient(90deg, #e11d48 0, #e11d48 4px, #ffffff 4px, #ffffff 100%);` But this changes background, not layout. For articles, if padding and background, the strip appears. Better for .contact card maybe. Need not overdo.

Need perhaps add `border-radius: 14px;` no layout? It changes corner visual only. Good.
Need add `box-shadow` soft + glow.
Need add `transition: transform .2s ease, box-shadow .2s ease;` transform not in allowed? They didn't list transform in preserve? They didn't explicitly allow/disallow. "only colors, shadows, radius, transitions, gradients, filter, opacity..." Transform not included; avoid. Hover maybe not allowed because no pseudo selector additions? Selector lists must preserve; can't add `:hover` selectors because "Selectors preserved" and no new? It says "Pseudo-classes (:hover, :focus, ::before, ::after)" keep exactly, not add maybe. So no hover rule. But transition on base could animate hover? Yet no hover. Fine.
Need "subtle pulsing animations" if add `@keyframes`? Original has no @keyframes; adding keyframes would require selector? Could add not necessary. But target says effect variant. But we cannot add `@keyframes`? They say @keyframes names preserved; values inside CAN change. Could add new keyframe? It doesn't change layout. But "selector" constraints? @keyframes is not selector list. Could add if wanted. But with conservative mode, maybe avoid. However "Glow shadows in accent color, halo on hover, medium radius, subtle pulsing animations." Since no hover selectors, but we can add animation to cards with `animation: cardGlow 3s ease-in-out infinite;` and keyframes that only animate box-shadow/opacity/background? Keyframe names new. Is that allowed? They said @keyframes names preserved? "animation-name (values like duration/timing CAN change)" means if original had animation-name, values can change. But adding new keyframes might be okay? Need think. They say only visuals, can add @keyframes? The unchanged includes @keyframes names; maybe can add new? To be safe, perhaps no new @keyframes to avoid selector/name constraints. Could still use transition only on base. But target demands. Yet user says previous attempt didn't change enough. We need make more distinct. Need perhaps add color values to all possible. Since original only two declarations, we need dramatically refresh with background, gradients, shadows, radius. We can add `transition` and maybe not animation. But "glow-effects" variant: use shadows. Good.

Need maybe include `@media (max-width: 575.98px)` exactly. Need preserve line.

Need potentially include `--pinterest-accent` in a `:root` block? That would add selector not in original. Should not. We can hardcode.

Need perhaps update `.app-hero-section .row .col-lg-7` with text-align and maybe `background: transparent;` or `color`? But if set color, okay. Maybe no. Need perhaps add `text-shadow`? For hero? Might be okay but not required. Need ensure no layout change.

Let's craft CSS with three rules:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2b1b25;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #6d1a2f;
        background: linear-gradient(135deg, #ffe1e6 0%, #ffd0d8 50%, #fecdd3 100%);
        border-radius: 999px;
        box-shadow: 0 4px 16px -4px rgba(225, 29, 72, 0.25), 0 0 14px rgba(244, 63, 94, 0.18);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #fff9fa 0%, #ffffff 60%, #fff1f3 100%);
        border: 1px solid rgba(255, 228, 230, 0.85);
        border-radius: 14px;
        box-shadow: 0 10px 24px -10px rgba(190, 18, 60, 0.18), 0 0 24px rgba(244, 63, 94, 0.10), inset 0 -2px 0 rgba(255,255,255,0.8);
        backdrop-filter: blur(6px);
        transition: box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 240ms ease;
    }
}

Need perhaps add `border-radius` on badge; `.bg-warning` has bg-warning utility maybe bootstrap background, our gradient overrides. But is color enough? Need maybe `border: 0`? No border-width not allowed. Could set `border-color: transparent`? Fine but original maybe no border. Avoid.

Need maybe not use `border: 1px solid` because border-color/style change? This adds border-width 1px, which is not allowed? The instruction: "border-color and border-style (NOT border-width)" means they can modify border-color and border-style, but not border-width. It doesn't necessarily say "add border-width"; but adding border-width could affect layout by 1px. To be safe, avoid explicit border. Use box-shadow only. But target says each card may have own accent strip; can use background. No border.

Need maybe `padding` stays same, so background extends within padding. Good.

Need maybe "white cards, soft shadows on light gray bg" but we don't set body. The card background itself can be near-white. If original contact card already has background? We can override. Need not add `background-color` to body because selector doesn't exist. Could set on hero col? no. Maybe contact article background as card. Good.

Need perhaps "accent strip" using `background: linear-gradient(90deg, rgba(225,29,72,0.9) 0, rgba(225,29,72,0.9) 4px, #fff 4px, #fff 100%);` if cards have padding; but padding may be inside background, creating strip at left edge if `background-origin: border-box` but no border. Since no border, background covers padding and content. `4px` strip at left edge can work. But then white card with pink left strip. We can combine with soft gradient? Use hard linear gradient. That is more striking. For `.contact-channels-section article` and `.contact-quick-section .contact-card`, we can set `background: linear-gradient(90deg, #fb7185 0, #fb7185 4px, #ffffff 4px, #ffffff 100%);` But if article has border-radius and box-shadow. Nice. However if left edge at 4px but border-radius 14, it clips. Fine. But the target also says white cards; accent strip. Good.

Need maybe use fixed color not custom prop. Need choose accent #f43f5e (rose). Let's pick.
- Soft shadows: `0 12px 28px -12px rgba(30, 15, 25, 0.25), 0 0 18px rgba(244, 63, 94, 0.12)`.
- Halo on hover impossible; no hover. But we can set transition for box-shadow. However if no hover, transition useless. We can still set "transition" property allowed. Could perhaps set `transition: box-shadow .3s ease;` in original (not using hover). Fine.
- "subtle pulsing animations": Could add `animation` property on cards using keyframes if we also add keyframes. Is adding keyframes okay? The constraints: "Animation & Media:
  • @keyframes names (values inside CAN change)
  • @media query breakpoints (conditions only)
  • @import, @font-face, @supports, @charset
  • animation-name (values like duration/timing CAN change)" They list @keyframes names as preserve? It says @keyframes names (values inside CAN change). If original has no @keyframes, adding one is likely okay because animation-name values can change; but "Selectors preserved" doesn't apply to keyframes. Yet output should preserve all selectors, adding keyframes not a selector? Could be okay. But to be safest, maybe don't add `@keyframes`, because they might compare with input selectors? However user specifically requests "subtle pulsing animations". We can create animation without @keyframes? Can't pulse without keyframes. Could use CSS `transition` only, not pulse. But target effect variant says "Subtle pulsing animations"; maybe should include.

Let's examine the original file: It only has a media query. No keyframes. If we add @keyframes named `contactCardGlow`, we are adding new CSS construct. The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It does not say don't add keyframes. It says in constraints: "@keyframes names (values inside CAN change)" maybe because if original had them. But "animation-name (values like duration/timing CAN change)" Could add animation-name on elements. Since this is visual, likely acceptable. Need perhaps add "subtle pulsing" as a glow animation. Let's include to satisfy target. But need be careful: "animation-name (values like duration/timing CAN change)" Actually they say "animation-name (values like duration/timing CAN change)" maybe means `animation-name` is in "Animation & Media", and values can change. That suggests we can set animation-name. We can add `animation: cardGlow 3.2s ease-in-out infinite;` and define `@keyframes cardGlow`. Is that preserving selectors? New keyframes name not in HTML; okay.

Need maybe also add `@keyframes pulseGlow` outside media query? Since media query includes only block; should the @media contain @keyframes? CSS allows @keyframes nested inside @media. But if output entire CSS is just media query, adding keyframes inside media query is valid. Better to include inside the same @media? The output "rewritten CSS" can have @media query and maybe @keyframes inside. Need preserve original @media. We can add `@keyframes cardGlow` after or within. If within, selector? Fine. But maybe user said no new @media, but adding keyframes okay. The constraints say @media query breakpoints only conditions, so don't add/change breakpoints. We won't.

Need maybe "glow shadows in accent color: 0 0 24px rgba(accent, 0.4)", hover "0 0 32px rgba(accent, 0.6)"—we cannot add hover, but can use animation to pulse from 0.15 to 0.35 maybe. Need maybe apply `animation: glowPulse 2.8s ease-in-out infinite alternate;` with `box-shadow` frames. But if we also set box-shadow, keyframes override while animating. Good.

Need include `transition` in base. Fine.

Potential issue: If adding `background` to `.contact-channels-section article` and `.contact-quick-section .contact-card` with `background: linear-gradient(90deg, #fb7185 0, #fb7185 6px, #fff 6px, #fff 100%);`, box-shadow etc. This will make cards visually distinct. Need perhaps also set for `.app-hero-section .badge.bg-warning` with background gradient.

Need maybe `text-align: center` remains. Could add `text-shadow: 0 1px 2px rgba(255,255,255,0.6);` but not needed. Could add `color: #3b1a2a` and `text-shadow` maybe. Need include minimal.

Need perhaps change `font-size`? Not allowed. Keep exactly.

Need consider `!important` on padding. We keep exact. If we add `background` with `!important`? Not necessary. But Bootstrap's `.contact-card` might have background. In media query, later? To override we may need `!important`? Not necessary if specificity similar? `.contact-quick-section .contact-card` specificity 0,2,0 vs Bootstrap likely `.contact-card` 0,1,0 so wins. But if media query no issue. Need maybe add `!important` to box-shadow? Not necessary.

Need "border-radius: 14px;" maybe Bootstrap has card radius; override okay.

Need "box-shadow" should be multi-layer and distinct. Good.

Need perhaps "backdrop-filter: blur(6px);" but if background white none translucent. If we use `rgba(255,255,255,0.85)` with blur, backdrop-filter works but no backdrop? Fine. However target says white cards, so maybe `background: rgba(255, 255, 255, 0.86);` plus backdrop-filter. But accent strip via background gradient. If using backdrop-filter, need semi-transparent background. Use `background: linear-gradient(90deg, rgba(244,63,94,0.9) 0, rgba(244,63,94,0.9)