/* ============================================================
   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 only rewritten CSS. Need follow instructions. Need output CSS for given snippet. Need change visuals only. Original CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}

We must preserve media query, selectors, layout. Allowed change colors/shadows/radius/transitions. But this CSS only layout-oriented. Maybe we can add visual properties within same selectors? Should refresh visual identity: add colors, shadows, radius, transitions. Need maintain text-align center and font-size 0.85rem, padding. Could add properties. But maybe "ONLY rewritten CSS preserving all selectors and layout exactly". Need not change font sizes. We can add color/gradient/background/border-radius/box-shadow/transition/backdrop-filter? Need likely deliver same selectors, perhaps augment with visual changes. However if original CSS only a media query for layout mobile, visual changes could include setting color? But .col-lg-7 text-align center; perhaps add color to hero? But that could disrupt? Yet only visual. We need produce CSS with same selectors and layout. Must not change font-size. Could add box-shadow etc to badge/card? Since padding only. Need conservative. We can add perhaps color variables? But no root? Can't add variables? We can add CSS properties to existing blocks.

Need consider "goal: same layout, fresh color palette+shadow/radius identity". Since only a snippet, perhaps should transform slightly: For `.app-hero-section .row .col-lg-7`, text-align center, add maybe color? But that may be too broad. Similarly badge bg-warning background gradient? But class bg-warning already defines background; can override in media query.

Need output only CSS. Must avoid comments. Need keep selectors. We can add visual properties in same blocks. But user requested "refreshed visual identity" for entire file but input only 3 rules. Perhaps we should output same CSS but with visual changes within allowed. Let's think.

Potential output:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #e0f2fe;
        text-shadow: 0 0 24px rgba(56, 189, 248, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        box-shadow: 0 0 24px rgba(251, 191, 36, 0.4), 0 4px 12px rgba(0, 0, 0, 0.1);
        border-radius: 999px;
        transition: box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(125, 211, 252, 0.2);
        border-radius: 16px;
        box-shadow: 0 0 24px rgba(56, 189, 248, 0.2), 0 8px 24px rgba(2, 6, 23, 0.25);
        transition: box-shadow 0.3s ease, background 0.3s ease, transform 0.2s ease;
    }
}

Need check "padding: var(--space-md) !important" unchanged. OK. But adding background/border to articles/contact-card could affect layout? No, box-sizing? Could affect element dimensions? Border and backdrop filter no layout width? It's visual. transition transform? Not changing transform property. OK.

But the instructions say keep layout exactly, "only colors, shadows, decorative properties". Adding border etc decorative. Could be acceptable.

Need consider "animation" allowed values? We can include @keyframes but HTML fixed selectors no. But not needed.

Need perhaps include "pulsing animations" effect variant: subtle pulsing animations. Could add animation to badge or cards with keyframes? But media query only? It says effect variant subtle pulsing animations. We can add `animation: pulse 2s ease-in-out infinite;` and define keyframes. However @keyframes names can be new? Maybe allowed because keyframe values can change, not name. But instruction output only CSS with existing selectors? It says keep selector lists etc; @keyframes names preserve? Since original CSS has no keyframes. Adding new @keyframes perhaps okay? But "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Adding @keyframes would add selectors? @keyframes has a name, not a CSS selector. We can add. But "output only CSS" no markdown. Could include keyframes and media. But given snippet is just media query, maybe not necessary.

Need perhaps no extra global rules? Could include keyframes outside media. But then maybe modifies original file with new names. Fine.

Need choose palette: likely blue/amber glow. Already.

Need ensure no forbidden changes: don't change font-size, padding values, text-align. Don't change selectors. Don't change `font-size` from 0.85rem? We keep. Don't change `padding: var(--space-md) !important`. Good. Don't change `media max-width`. Good.

Need perhaps not add `color` to `.col-lg-7` because that changes text color? allowed. But maybe text-align center only. Add `color` and `text-shadow` may be okay.

Need maybe not use `!important` in visual properties? Fine.

Need include hover? In mobile, hover less relevant. Could add `:hover`? Since pseudo-classes allowed, but need preserve? Original lacks. If add new selector with pseudo? Rule says "Selectors: keep exactly" but you can add? Actually "Every selector character-for-character preserved?" This is about original selectors, not necessarily no new selectors? It says "selectors: Class names: keep EXACTLY... Pseudo-classes: (:hover, :focus, ::before, ::after)" likely means when using selectors, don't change classes. But adding new pseudo rules might be okay? However CSS output likely intended to replace same file. Adding new selector for hover in media could alter layout but okay. But to be safe, maybe use `transition` only and no new pseudo. But effect variant glow on hover requires hover styles. Since no original hover, but can add `:hover` rule? Yet "HTML fixed" not "CSS selector fixed"? Actually never change selectors likely means the selectors from input cannot be altered, but we can add new selectors? It says "SELECTORS (CRITICAL - HTML is fixed): Class names: keep EXACTLY" not "don't add". But then in output self-check: "Every selector character-for-character preserved?" That suggests each selector in input must appear exactly. New selectors may not be checked? To be safe, avoid adding selectors not in input. But then how to do hover? Could use `@media (hover: hover)`? That adds a media query, not selector. Maybe no need.

Could add `:hover` to existing selector by extending? But selector list must be same? If we add pseudo to one selector: `.app-hero-section .badge.bg-warning:hover` is new selector. I'd avoid.

Could use `transition` no hover. "Halo on hover" not directly possible without new selectors; but we can instead set base glow enough. Maybe "effect variant" target style, not mandatory every subfeature. But user specifically variant "glow-effects" includes halo on hover. We can add `@media (hover: hover)` rule with `.app-hero-section .badge.bg-warning:hover { ... }`? That's a media query with new selector. Does that violate? Hmm.

Let's examine original file maybe only media query block. If we output only exactly those three rules with visual properties, likely sufficient. The instruction is from an AI CSS restyler that likely expects no new selectors except maybe keyframes? We need comply strictly.

Let's read user prompt carefully:

"Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

"Output the rewritten CSS now"

"Every selector character-for-character preserved?"

So likely we must not add new selectors. So no hover rule. We can include `transition` on the element so when hovered existing style changes? But if no hover property, no change. Yet maybe external existing hover rules in full file? The snippet only includes these; user says file assets/css/saishi.css #块2/2, only a block? Maybe original entire file has more CSS not shown? We are only rewriting this block. The rest of styles exist, including maybe hover rules. We don't need add hover. The visual effects can be applied via base shadows/glow. Since block only media query, adding glow shadows. Fine.

Need considered "Only change colors, shadows, radius, transitions, gradients." We can add only those. We won't change `background`? Background is color, okay. `backdrop-filter` is decorative but not listed? It says filter, backdrop-filter in allowed. Fine. `border` with color only? We may add `border` width? Border-width should not change. If adding border where original no border, we are setting border width? Any border set uses width. It could affect layout because border width adds to box size. But likely box-sizing border-box? Not guaranteed. To avoid layout shift, use `outline`? But outline also color/type, not width? It says outline styles (color, type) allowed, but "border-width" never change. We can set outline, but it may overlap. Or use `box-shadow` for border effect as inset shadow to avoid layout. Use `background` gradient. But adding border changes layout if box-sizing content-box. To be safe, avoid `border` in elements that have padding. Use `box-shadow: inset 0 0 0 1px rgba(...)` to simulate border without layout. But shadow is visual, allowed. Good.

Similarly adding `border-radius` doesn't affect layout. Good.

`backdrop-filter` and background color/shadow.

Need perhaps use `color` etc.

Now need create coherent CSS.

Need maybe maintain `font-size` property as original, but since it's in allowed typography no change. We'll keep exactly.

Original:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}

We can rewrite:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f0f9ff;
        text-shadow: 0 0 24px rgba(14, 165, 233, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fde047, #f59e0b);
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.4), 0 4px 12px rgba(0, 0, 0, 0.1);
        border-radius: 999px;
        transition: box-shadow 0.3s ease, transform 0.2s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.06);
        box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.2), 0 0 24px rgba(14, 165, 233, 0.2), 0 8px 24px rgba(2, 6, 23, 0.25);
        border-radius: 16px;
        backdrop-filter: blur(12px);
        transition: box-shadow 0.3s ease, background 0.3s ease;
    }
}

Need perhaps "badge bg-warning" already has `background-color` from Bootstrap, but override with gradient. `badge.bg-warning` likely has border radius already. Need no issue.

But wait: `.app-hero-section .badge.bg-warning` in a media query max 575.98 only changes font-size. If we add `background` gradient, in mobile view badge might become gradient. Good.

Could add `color: #1f2937` for badge? Badge bg-warning already likely dark? Maybe Bootstrap badge with bg-warning has `color: #000` if using bootstrap? Actually `.bg-warning` sets background-color, doesn't set color. Badge inherits body color. If we set background to amber, dark text maybe still. Could add `color: #1e293b`? But that's additional property maybe okay. Might not need.

Need "symmetric-grid" target style: Strict equal grids, uniform gap 24px, items aligned baseline. But original snippet doesn't have grids. We can't change layout. However maybe we can apply `gap` via margin? no. Not relevant. This is only block2 of 2; perhaps previous block handles grid. Our role is visual.

Need "glow-effects" with medium radius 8-16. We set 16 for cards, 999 for badge. Badge pill, not medium. Could use 12px instead, but badge often pill. Effect variant says medium radius 8-16; perhaps all primary elements use 12-16. But badge pill may be changed to 12px? Is that okay? The original badge likely already pill due Bootstrap. Could leave as `border-radius: 0.375rem`? Better to use `border-radius: 12px` for "medium radius". But visual identity maybe with pill? The prompt says medium radius, so use 12px for card, maybe badge 12px too. But badge as pill is common. "Medium radius (8-16px)" likely expect 12px. Let's set 12px for badge? `.badge` could be small, 12px looks rounded rectangle. We can set `border-radius: 999px`? That is larger than 16. Hmm. To align with variant, maybe `border-radius: 0.75rem` (12px). But `.badge` with rounded-pill? We can override. Let's choose 12px for cards and `border-radius: 0.5rem` (8px) for badge? Medium radius starts 8. Good.

Need perhaps add pulsing animations. Could include `@keyframes softPulse` and apply `animation: softPulse 3s ease-in-out infinite;` to `.badge.bg-warning` or cards. But new keyframes name isn't a selector. Is that allowed? It says `@keyframes names (values inside CAN change)` maybe existing keyframes names preserved? If adding new keyframes, perhaps okay. But output only media query? We can include outside. However "Every selector ... preserved?" Keyframes not selectors. Could be safe. But maybe the instruction "only colors, shadows, decorative properties" includes subtle pulsing animations. Need maybe use `animation` property. But if we add `animation` to element, it may override existing animation? It could affect layout? no. But adding keyframes outside media query may make animation run always even outside media, or inside media? If property inside media query then animation applies only under 575px. Good.

Need define keyframes inside media? Keyframes can be defined inside media, yes, but then available? According CSS, @keyframes inside media are allowed and apply only if media matches? I think keyframes are global? Actually @keyframes rules are not conditional? CSS Conditional Rules spec says @media can contain @keyframes, and they should only be active when media matches? I think yes. But to be safe and no extra top-level? Better not include pulsing if complexity.

Given variant includes "Subtle pulsing animations"; we can implement with animation. Need choose which element. Maybe `.app-hero-section .badge.bg-warning` pulse glow. Add:

.app-hero-section .badge.bg-warning {
    animation: softGlowPulse 3s ease-in-out infinite;
}

@keyframes softGlowPulse {
    0%, 100% { box-shadow: 0 0 24px rgba(245, 158, 11, 0.35); }
    50% { box-shadow: 0 0 32px rgba(245, 158, 11, 0.6); }
}

But if we already set box-shadow on badge, animation overrides it. That's okay. However adding `transition` together with animation not issue.

For `contact-channels-section article` and `.contact-quick-section .contact-card`, perhaps `animation: cardGlowPulse 4s ease-in-out infinite;`? Could be too much. Maybe subtle.

Need ensure no markdown fences, no comments. Include keyframes after/before media? We can include before media? Since output should be CSS. But if original file has @media block, adding keyframes might be outside. If user only wants rewrite of block, adding keyframes extra is likely okay? But "ONLY the rewritten CSS" could include new keyframes. Yet "selectors character-for-character preserved" with media query selects all selectors; adding keyframes may be seen as harmless.

Let's see "File: assets/css/saishi.css#块2/2" maybe only second chunk. It might be expected to output entire