/* ============================================================
   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 refresh the given CSS visually, preserving selectors/layout. Original CSS only has a media query with three rules:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — text-align is layout/typography? Actually text-align is allowed? It's in the "never change" list: text-align is listed under typography? Wait typography includes text-align, but we only need colors, shadows, radius, transitions. Text-align should stay same. So no visual change possible here? Maybe we can add something? But we should not change layout. We can add color, background, etc. But we need to preserve selectors and layout. However, the rule has no visual properties except text-align. The instruction says "Only change colors, shadows, radius, transitions, gradients." We could add a property? But adding properties could change layout? For example, color doesn't affect layout. We can add text-shadow, color, etc. But is it allowed to add properties? The output should be rewritten CSS preserving selectors and layout. Adding a color property is okay because it doesn't alter layout. Adding box-shadow is okay. But careful: the rule applies to .app-hero-section .row .col-lg-7 on mobile. We can add e.g. color, text-shadow, background? However, adding background might change appearance but not layout. The instruction: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Means we can modify existing colors, shadows, radius, transitions, gradients, and possibly add them where they don't exist? Usually "change" suggests modifying existing values, but if none exist, we can add decorative properties. The output should be the whole CSS block.

But we must be careful: The original media query has three rule blocks. We need to output the full CSS, preserving selectors and media query. We can add new declarations within existing rules? That might be okay, but only visual. However, for `.badge.bg-warning` font-size is typography (font-size) and we should not change it. Keep font-size. For `.contact-channels-section article, .contact-quick-section .contact-card` padding is layout (padding) and we should keep similar values. Original: `padding: var(--space-md) !important;`. That is padding. We can keep it. But we can add background, border-radius, box-shadow, etc. Since the target style is editorial-magazine with glow effects. Need to refresh with new colors, shadows, radius. But original CSS doesn't have colors. So we can add decorative properties to these elements in the mobile media query. But should we? The task: "Refresh this CSS visually" and the file is assets/css/saishi.css. But the provided original CSS is only a small snippet. We just output rewritten snippet. We need to respect constraints: "ALL selectors preserved exactly." So for each rule, we preserve selector and the existing declarations (maybe modify only allowed properties). We can add new declarations to each rule, but we must be careful not to change layout properties. Since `padding` is layout, but we are allowed to keep within ±20%. Here it's a var, we can't change, keep. `font-size` is typography, keep. `text-align` is layout? Actually text-align is under typography in instructions? They list "text-align, vertical-align" in the NEVER change list. So keep.

Now, how to "visually refresh" with editorial-magazine palette and glow effects? For a mobile media query, we might not want to add too much. But we can add color, background, border-radius, box-shadow, transition properties. Need to ensure we don't change layout. Adding box-shadow doesn't change layout (unless it causes overflow? no). Adding background color to existing elements is visual. Adding border-radius is visual rounding.

We need to choose colors: cream/beige background #f5f1e8, ink #1a1a1a, accent deep red #c44536 or olive #6b705c. For glow effects: accent color glow shadows.

Since target style is editorial-magazine, we can set the hero section text to ink color with a subtle text-shadow? But text-shadow may affect readability. Use glow sparingly.

Maybe we should restructure? No, only this snippet.

Let's interpret the existing rules:

1. `.app-hero-section .row .col-lg-7` on mobile: text-align center. We could add `color: #1a1a1a;` and maybe `text-shadow`? But if the existing text color is already set elsewhere, changing here could override. That's okay. Add a subtle text shadow? For "editorial-magazine" with glow effects, maybe `text-shadow: 0 2px 12px rgba(196, 69, 54, 0.15);`. But text-shadow is visual. We can also add `background` to the col? That could create a box. But on mobile, it might affect layout? Background doesn't affect layout. But it may be undesirable. We should be conservative.

2. `.app-hero-section .badge.bg-warning` on mobile: font-size 0.85rem. We can add `background-color`? But the class `bg-warning` is a Bootstrap class. Changing its background color would affect the badge. The target palette has accent deep red. But `bg-warning` is normally yellow. We can override to accent color or olive. But the selector `.app-hero-section .badge.bg-warning` includes a Bootstrap utility class. If we override background, it may lose the warning semantics, but visually okay. We can add `color`, `box-shadow`, `border-radius`. However, the rule already has font-size. We can change `background-color` from warning to something else? But original CSS didn't have background-color. We can add it. Is that allowed? Yes, colors. We should add a glow shadow. Maybe set `background-color: #c44536; color: #f5f1e8; box-shadow: 0 0 18px rgba(196, 69, 54, 0.35);` etc. But wait, Bootstrap `bg-warning` is often used with dark text. Overriding to accent red could be a visual refresh. But we must be cautious: if the badge is inside hero section, it might be a "new" badge. The target style editorial-magazine: a deep red accent on cream background works.

3. `.contact-channels-section article, .contact-quick-section .contact-card` on mobile: padding var(--space-md) !important. We can add `background-color`, `border-radius`, `box-shadow`, `border`? But border adds to box size? It can affect layout because box-sizing might be border-box; but if we add border, it might alter size if box-sizing is content-box. Better avoid border or use `outline`/`box-shadow` to simulate border. We can add background, border-radius, box-shadow. Also maybe `backdrop-filter`? But not necessary.

We need to output the entire CSS with the media query. The original uses `var(--space-md)`. We should keep that. We can use the existing custom properties? The instruction says we can change CSS custom properties values. But we are only given a snippet; we don't know where they are defined. We can't change them here. We can add new declarations using colors.

We need to ensure not to change font-size or padding. We can add `transition` for hover effects, but in media query, maybe for small screens not needed. But "transition timing" can be changed. Since no transitions exist, we can add `transition: box-shadow 0.3s ease, background-color 0.3s ease;`? But that's adding. Is that okay? It doesn't affect layout. But for a media query, transitions on mobile can be acceptable. However, we might not want to add hover effects on touch devices. But it's okay.

The "glow-effects" variant says "Subtle pulsing animations". We could add `animation` but @keyframes are not in the snippet, and we shouldn't add new keyframes? The instruction says @keyframes names can be changed, but we don't have any. Adding a new keyframe would require adding the full keyframes block, which is not a "change" to existing CSS but an addition. The task says "Only change colors, shadows, radius, transitions, gradients." Adding keyframes is animation, but the "Animation & Media" section says @keyframes names preserved, not necessarily cannot add. However, to be conservative, we should avoid adding new keyframes, because it would be a new selector @keyframes. Also, in the media query, adding animations might be undesirable. Better stick to glow shadows and radius, maybe transition.

Let's craft the output.

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

Rewrite with visual refresh. Need to preserve exact selectors, declarations? We can add/alter declarations. But if we add e.g. `background` to the first rule, we change visual. Let's do minimal but fresh.

Potential rewriting:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        text-shadow: 0 1px 0 rgba(245, 241, 232, 0.6), 0 0 20px rgba(196, 69, 54, 0.12);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        color: #f5f1e8;
        border-radius: 999px;
        box-shadow: 0 0 14px rgba(196, 69, 54, 0.4), 0 2px 8px rgba(26, 26, 26, 0.18);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: rgba(245, 241, 232, 0.85);
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(26, 26, 26, 0.06), 0 0 24px rgba(196, 69, 54, 0.08);
        transition: box-shadow 0.3s ease, background-color 0.3s ease;
    }
}
```

But check constraints: `border-radius` can be changed/added. `box-shadow` added. `background-color` added. `color` added. `text-shadow` added. `transition` added. We didn't change `padding`, `font-size`, `text-align`. Good.

But we must be careful: `.contact-channels-section article` is in contact section. Adding `background-color` to article might create boxes around the contact channels, which could be okay. But it might conflict with existing styles from outside the media query. The instruction is to refresh visual identity, so adding these is intended.

However, there is a risk: The selector `.app-hero-section .row .col-lg-7` is a grid column. On mobile, it's centered. Adding `color` and text-shadow is fine. But `text-shadow` could look weird on a large hero text. The target style is editorial-magazine with glow. Could be okay.

Need to ensure `box-shadow` on `.badge.bg-warning` doesn't clash with Bootstrap's `bg-warning` background-color. We're overriding to deep red. Good.

But maybe "editorial-magazine" would prefer olive as accent instead of red? We can choose one. The instruction says "deep red #c44536 or olive #6b705c". We can use deep red for accents. Need to be consistent.

Also "cream/beige backgrounds (#f5f1e8), ink black text (#1a1a1a)". We used cream background on contact cards, ink text on hero. Good.

The contact cards background `rgba(245, 241, 232, 0.85)` is cream with transparency. But if the page background is also cream, it may blend. Maybe use a slightly different tone like `#efe8d8`? But we can use the cream. To add editorial feel, we might add a subtle border-left of accent? But border affects layout? We could use `box-shadow` inset to simulate a left bar. But adding `box-shadow` is fine. Maybe we can use `box-shadow: 3px 0 0 #c44536`? But that would be a hard edge. However, the variant is glow, not hard border. Maybe use glow.

We could also add `backdrop-filter: blur(8px)` but not needed.

Should we keep the original declarations first? The order doesn't matter. We can output with our added declarations after the original ones. We must not remove original declarations.

Let's check if any of the added properties might be considered layout-affecting. `color`, `background-color`, `border-radius`, `box-shadow`, `text-shadow`, `transition` are visual only. `background-color` does not affect layout. `border-radius` affects appearance only. `box-shadow` does not affect layout (if overflow visible; it may visually extend but not cause scroll? box-shadow doesn't cause overflow? Actually box-shadow can cause scrollbars if it extends outside viewport and overflow is visible? Some browsers may create scrollbars, but typically no, box-shadow doesn't affect layout dimensions. It may be clipped by overflow hidden. But to be safe, we can keep shadows moderate. Since this is inside a media query, okay.

Need to ensure we don't change `!important` on padding. We keep it.

Potential issue: We are overriding `.bg-warning` background-color, but Bootstrap uses `.bg-warning` with `background-color` property. Our rule specificity: `.app-hero-section .badge.bg-warning` is more specific than `.bg-warning`, so it wins. Good.

We need to output only CSS, no markdown. Let's produce the final code.

But wait: The file is assets/css/saishi.css#块2/2, meaning it's a chunk of the file. We should output exactly the rewritten chunk. We shouldn't add new lines? It's okay.

Let's consider if we can further refine the shadows with multi-layer effects. For the contact cards, we can do "glow shadows in accent color: 0 0 24px rgba(accent, 0.4)" but perhaps too strong on mobile. Could use `0 0 16px rgba(196, 69, 54, 0.12)` as subtle. The variant says "Glow shadows in accent color: 0 0 24px rgba(accent, 0.4)". But that's for elements. For a mobile card, 24px glow at 0.4 might be too much. We can use smaller to be conservative, but the target style expects glow. Let's follow the variant more closely.

Maybe for `.app-hero-section .badge.bg-warning`, use `box-shadow: 0 0 24px rgba(196, 69, 54, 0.45), 0 0 48px rgba(196, 69, 54, 0.2);` to create a halo. And for contact cards, use `0 0 24px rgba(196, 69, 54, 0.08)` subtle.

But since the variant "glow-effects" wants glow shadows, we can make the badge strongly glow. The hero section maybe the text has a soft glow. Let's add a halo on hover? There is no hover in the media query. We can add `@media (hover: hover)`? But that would be a new media query, not allowed? Actually @media conditions can be added? The instruction says @media breakpoints (conditions only) — we can't change the existing condition, but can we add new media queries? The task says keep all selectors exactly. Adding a new media query would be a new selector? Probably not allowed. Better not.

We can add `transition` so if there is a hover state from other CSS, it transitions. But if there is no hover, no effect.

Let's create an output that is visually refreshed but not overdoing.

One more thought: The first rule `.app-hero-section .row .col-lg-7` may contain a heading. Adding `text-shadow` with glow might be okay. But on mobile, perhaps the hero text is already styled elsewhere. We'll add a subtle `text-shadow` that uses cream for a raised editorial look. Maybe `text-shadow: 0 2px 16px rgba(26, 26, 26, 0.12), 0 0 30px rgba(196, 69, 54, 0.08);` But that might muddy. Let's keep it simple.

Let's also consider adding `caret-color` or `accent-color`? Not needed.

Potential addition: `background: linear-gradient(...)`? The instructions say gradient colors can change. But we don't have any gradients. We can add gradients. For the contact cards, we could use a subtle gradient from cream to transparent. But adding a gradient to the article might be nice: `background: linear-gradient(135deg, rgba(245,241,232,0.9), rgba(245,241,232,0.6));` However, the original rule is just padding. If we add background gradient, it could create a card look. But maybe too much. Let's stick with solid cream.

We also might want to add `border-radius` to the badge, using `999px` for pill. The target style says medium radius (8-16px). For a badge, 999px might be okay (pill), but to follow medium radius, we can use `12px`. But `badge` typically is pill. We can use `999px` as visual style. It