/* ============================================================
   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 to rewrite the CSS in a conservative mode. The user provided a small CSS snippet with media query and some rules. We are to change only visual properties: colors, shadows, borders, radius, transitions, gradients, opacity, filters, custom properties, etc. But the original CSS is very minimal and includes only:

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

The target style is editorial-magazine with glow effects. We need to "refresh visual identity" keeping layout and typography unchanged. But the original CSS contains only layout/typography properties: text-align, font-size, padding. These are actually layout and typography, which we must NOT change. Wait, the instruction says "YOU MUST CHANGE: colors, shadows, border-radius, gradients, transitions, filter, opacity, outline, border colors, caret color, accent color, CSS custom properties values". But this snippet has no colors or shadows. The challenge is to output a rewritten CSS that preserves all selectors and layout exactly, but changes visual properties. If there are no visual properties in the original, we might need to add new visual properties to the existing selectors without changing layout.

We need to be careful: The original CSS is a media query with three blocks. The properties inside are layout/typography: text-align, font-size, padding. According to the constraints, we cannot change font-size or padding more than ±20%? Actually, font-size is typography and cannot be changed. Padding is layout, we can keep similar values ±20%. The original sets font-size: 0.85rem; padding: var(--space-md) !important. We can't change those, because typography fixed. But we can add new color/shadow/glow properties to these selectors, as long as they don't affect layout. Also we can change the value of --space-md? It is a custom property but its value is used for padding, which is layout. If we change --space-md, padding changes. That's probably not allowed. So we shouldn't define or alter custom properties that affect layout. But we can add custom properties for colors/shadows maybe within the selectors? However, the original does not define --space-md; it's from a broader CSS file. We cannot change that variable.

The task is to "rewrite the CSS visually" but with such a small snippet, we can only add decorative properties that don't alter layout. Since the snippet is inside a media query, perhaps we should add e.g., a new color scheme or glow to the hero badge, contact cards, etc., without affecting layout. But we must preserve the existing declarations exactly? The instruction says "preserving ALL selectors and layout exactly" and "Output the rewritten CSS, preserving ALL selectors and layout exactly". It doesn't explicitly say the existing declarations must be preserved verbatim, only that layout properties must not change. If original has text-align: center, font-size: 0.85rem, padding: var(--space-md) !important, we cannot change them. We can add additional declarations to each rule.

However, the media query is only for mobile max-width 575.98px. The target style is editorial-magazine with glow effects. We can add color, background, borders, box-shadows, text-shadow, backdrop-filter, etc., to the selectors, but we need to be mindful of readability and not break layout. For example, for .app-hero-section .row .col-lg-7, we could add color, text-shadow, maybe? But in mobile, text-align center is set. Setting color could affect text. That's fine. For .app-hero-section .badge.bg-warning, we could add background-color, box-shadow, border, color, etc. But the badge already has class bg-warning, so if we add background-color it may override Bootstrap's warning background. That's a visual change, allowed. For .contact-channels-section article, .contact-quick-section .contact-card, we could add background, border, border-radius, box-shadow, backdrop-filter, etc., keeping padding unchanged.

But is that appropriate? The target style is "editorial-magazine" with "glow effects". The original has no visual identity. We need to infuse it. Since we can't alter layout, we can only decorate the existing elements.

We must output ONLY the rewritten CSS, no markdown. The selectors must remain exactly as-is. We should preserve the media query and the exact indentation? Probably.

Let's craft a rewritten CSS. We need to add visual properties. Since it's a mobile media query, adding heavy shadows might be okay. Use editorial neutrals: cream/beige #f5f1e8, ink black #1a1a1a, accent deep red #c44536 or olive #6b705c. The variant says glow effects, accent color. Let's choose deep red #c44536 as accent.

We can set on the hero column: color: #1a1a1a; maybe a subtle text-shadow? But text-shadow might be weird. Alternatively, we could add a background-color to the column? That would be visual but might affect layout? Background doesn't affect layout. But if we add background to .col-lg-7, it could show as a block background, but the column is inside a row. Might be okay. However, we want editorial-magazine: cream background, ink text, accents. On mobile, the hero section perhaps has background transparent. We could add a subtle background to the column? Or just leave it with text color and a text-shadow? Let's think.

The instructions say "All color values: background, color, border-color, fill, stroke, outline-color" must change. Since the original has no color values, we need to add new color values. That is fine: we add color declarations.

For the badge, we can set background-color: #c44536, border: 1px solid rgba(196, 69, 54, 0.4), box-shadow: 0 0 24px rgba(196, 69, 54, 0.4), color: #f5f1e8. However, the badge is .badge.bg-warning, and bg-warning in Bootstrap has its own background. Overriding with a red accent is a change. That's allowed. But maybe "bg-warning" semantically is yellow warning; changing to red might alter meaning? But the instruction is to change colors to refresh identity. We can.

For contact cards, we can add background: rgba(245, 241, 232, 0.8), backdrop-filter: blur(8px), border: 1px solid rgba(196, 69, 54, 0.2), border-radius: 12px, box-shadow: 0 4px 24px rgba(26, 26, 26, 0.08), 0 0 24px rgba(196, 69, 54, 0.15). Hover glow can't be applied because there is no :hover in original, and we cannot add pseudo-classes? Wait, we can add pseudo-classes? The instruction says "Pseudo-classes (:hover, :focus, ::before, ::after)" are in the "never change" list. That means selectors in the original must be preserved. It does NOT say we cannot add new selectors. But the output should be a rewritten version of the given CSS, preserving all selectors. Adding new selectors might be considered changing the CSS? The task: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Usually we shouldn't add new selectors, only modify existing rules. The prompt says "Preserving ALL selectors and layout exactly" but also "Only change colors, shadows, radius, transitions, gradients." It doesn't explicitly forbid adding new declarations to existing rules, but adding new selectors is probably not allowed. We should avoid adding :hover because the original didn't have it. The "glow-effects" variant wants halo on hover, but since we cannot add :hover selectors, we can only have static glow. Alternatively, we could add a transition and box-shadow base, but no hover. But perhaps we can add @keyframes pulse? The original has no @keyframes, but the instructions allow changing @keyframes values but not names. However, adding new @keyframes would be a new selector? @keyframes is a different at-rule, but we probably shouldn't add new ones. The target variant says "Subtle pulsing animations" but we could apply an animation to an existing selector. That would add an animation property. That's a visual change, not layout. But adding a keyframe would be adding a new at-rule. Is that allowed? The "NEVER CHANGE" list includes "@keyframes names (values inside CAN change)" and "animation-name (values like duration/timing CAN change)". That implies the original may have keyframes; if not, adding new ones? Hmm. The instruction in "YOU MUST CHANGE" doesn't mention adding animation. It says "transition timing, easing, duration" can change. It doesn't say we can add animations. Since the original has no animation, maybe we should not add keyframes. But "glow-effects" variant says "Subtle pulsing animations" — but to stay conservative, we might add a subtle pulse via transition? No, transition requires state change. We can use a CSS animation with existing keyframes? There are none. Could we define a generic keyframe with a name? But the instruction says @keyframes names cannot change, but adding a new name? It says "NEVER CHANGE: @keyframes names (values inside CAN change)". It doesn't say "do not add". But the overall "HTML is fixed — only colors, shadows, and decorative properties may change" — adding keyframes is decorative. I'd avoid adding at-rules because the task is to "rewrite the CSS" not extend it. However, the variant description explicitly includes "Subtle pulsing animations". But this variant applies to the desired effect, and if the original CSS doesn't have animation, we might need to inject it. But the output might not be able to because the CSS snippet is a media query only. I think it's safe to add a subtle animation to existing elements by directly referencing an animation name that could be defined elsewhere? No, that's bad.

Let's read the constraints carefully:

"YOU MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)
  • text-shadow
  • border-radius (visual rounding only)
  • gradient colors and stops in linear/radial/conic-gradient
  • transition timing, easing, duration
  • filter, backdrop-filter
  • opacity
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
  • caret-color, accent-color
  • CSS custom properties (--color-*, --shadow-*) values"

NEVER CHANGE list includes:
"@keyframes names (values inside CAN change)
@media query breakpoints (conditions only)
@import, @font-face, @supports, @charset
animation-name (values like duration/timing CAN change)"

This implies if there were keyframes, we can change the values inside but not the name. It doesn't prohibit adding animation-name to a rule if no animation existed before. But "NEVER CHANGE: animation-name" means the animation-name property value must not change. If an element had animation-name, we can't change it. But if it doesn't have one, adding one could be considered a "change" but not to an existing value. The list is "NEVER CHANGE" so adding is not changing? Hmm.

Given the original snippet has no animation, adding a keyframe would be purely additive, but it would create new CSS output. The instruction says "only the rewritten CSS, preserving ALL selectors and layout exactly" — adding @keyframes is not a selector, but it is an at-rule. It might be acceptable. However, the variant "glow-effects" is specifically requested. We should satisfy it. So we could add a simple pulse animation to the badge and contact cards, with a new @keyframes name like "glowPulse". But the instruction "NEVER CHANGE: @keyframes names" — if we create a new one, we're not changing an existing name. But if the original has no @keyframes, then any new @keyframes is new. Since the output must be the full CSS, it's possible. But the safer route is to not add new at-rules to avoid overstepping. The prompt says "HTML is FIXED — only colors, shadows, and decorative properties may change". Animations are decorative. Let's consider.

Actually, the user says "Refresh the visual identity WITHOUT changing layout structure or class names. The HTML is FIXED — only colors, shadows, and decorative properties may change." Then they list "YOU MUST CHANGE" and "NEVER CHANGE". Under NEVER CHANGE, they include @media breakpoints conditions, @keyframes names, etc. So they assume the original has these. In our original, we have a @media query. We must preserve the media query condition exactly. We don't have @keyframes. Adding a new @keyframes could be okay but not necessary. I'd focus on colors/shadows/radius/transitions, no animation.

But the target variant "glow-effects" says "Subtle pulsing animations". We can implement a subtle pulse using CSS animation with an existing animation? There's none. Could use `transition` on box-shadow? But without a state change, no pulse. We could set a `box-shadow` static glow, which satisfies "glow shadows". The halo on hover cannot be done without :hover. But maybe we can add a :hover? The NEVER CHANGE list says "Pseudo-classes (:hover, :focus, ::before, ::after)" — that means if the original had a :hover selector, we must keep it; it doesn't necessarily prohibit adding one. But the instruction "Keep ALL selectors and layout exactly as-is" implies selectors that exist must be kept; adding new selectors changes the CSS. However, if we add a :hover to an existing selector, we're creating a new selector (compound). That would change the selector list. Probably not allowed. So no hover.

Thus, static glow only. We can add subtle animation via `animation` property using a keyframe defined elsewhere? No, would break. Let's skip animation.

Now, the original CSS is only a small block. We need to output it with decorative properties inserted. But we must be careful not to change the existing declarations. We can add new declarations after existing ones. For example:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        text-shadow: 0 1px 2px rgba(245, 241, 232, 0.8);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        border: 1px solid rgba(196, 69, 54, 0.4);
        box-shadow: 0 0 24px rgba(196, 69, 54, 0.4), 0 4px 12px rgba(26, 26, 26, 0.12);
        border-radius: 16px;
        color: #f5f1e8;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: rgba(245, 241, 232, 0.7);
        border: 1px solid rgba(196, 69, 54, 0.15);
        border-radius: 14px;
        box-shadow: 0 6px 24px rgba(26, 26, 26, 0.08), 0 0 32px rgba(196, 69, 54, 0.12);
        backdrop-filter: blur(8px);
        transition: box-shadow 0.3s ease, background-color 0.3s ease;
    }
}

But wait: The original has no semicolon after the last property? It does. We can add.

However, we need to be cautious about "padding: var(--space-md) !important" — this is a layout property, and we must keep it exactly. We did. But we added `background-color` etc. On mobile, adding background to contact cards might create contrast. The original didn't have backgrounds, but adding them changes visual identity. That's the point.

But is it okay to add `border`? It's a color property, but border-width? We add `border: 1px solid ...` which includes border-width. The NEVER CHANGE list says "border-color and border-style (NOT border-width)". It says don't change border-width. If the original had no border, adding a border with width 1px changes border-width from 0 to 1px. That's a layout-affecting property because border-width contributes to the box's dimensions if box-sizing is content-box, but if box-sizing is border-box, it doesn't affect layout. However, the instruction says "border-color and border-style (NOT border-width)" — meaning we should not change border-width values. If original has `border: none` or `border: 0`, we shouldn't change width. But if original has no border, adding border-width 1px introduces a new width. That may be considered a layout change. Actually, border-width affects layout. The instruction "NEVER CHANGE: border-color and border-style (NOT border-width)" awkwardly says we must change border-color and border-style but not border-width. That implies there is a border to style. If there is no border, adding one with width would violate "NOT border-width". So we should avoid adding `border: 1px solid ...` unless the original had a border of some width. Since the original snippet doesn't have border, we should not add border. Similarly, `outline` might be okay?