/* ============================================================
   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;
    }
}

The user wants me to rewrite the CSS in "assets/css/saishi.css" file, block 2/2. The original CSS is a media query block. However, the task is to refresh visual identity without changing layout structure or class names. But the original CSS contains only layout/font properties: text-align and font-size, plus padding. These are things I'm not supposed to change (text-align is in the layout category, font-size is in typography, padding is in layout but can vary ±20%).

Wait, let's look at the original CSS:

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

This is a responsive block. The properties inside are:
- text-align: center → This is under "text-align" which is in the NEVER CHANGE list.
- font-size: 0.85rem → This is under font-size in NEVER CHANGE.
- padding: var(--space-md) !important → padding can vary ±20%. But var(--space-md) is a custom property reference. I could keep it or change the value. However, changing padding might affect layout.

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

But this particular CSS block has no colors, shadows, radius, transitions, or gradients. It's all layout/typography. So there's nothing to change per the rules. But the user expects me to output rewritten CSS.

Hmm. In "Aggressive mode" the target style is "centered-stage" but the instructions say "Layout pattern (Aggressive only)" — meaning those layout changes are only for Aggressive mode. We are in Conservative mode. The variant is "glow-effects".

So the question is: what can I change in this block?

The padding: var(--space-md) !important — I could change the padding value. Padding can change within ±20%. But it's a var reference. I could change it to a different value or a different custom property. However, I don't know what --space-md is. Changing it could break the layout. But the instruction says keep padding similar, ±20% maximum. Since I don't know the base value, I could define a new value using calc or a different var. But that's risky.

Alternatively, I could leave the media query mostly intact but add visual properties? The instruction says "Only change colors, shadows, radius, transitions, gradients." I can't add properties? The output should be the same CSS but with refreshed visual properties. But there are none here.

Wait — maybe the file has multiple blocks and this is just block 2/2. The original CSS file "saishi.css" might have a lot more content, and this block is just the media query at the end. My job is to rewrite this block. But since there are no visual properties, I should perhaps add some? No, that would change behavior.

Let me re-read the instructions carefully. The task says: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

Given that the original CSS has no colors, shadows, radius, transitions, or gradients, I have two options:
1. Output the CSS unchanged, since there is nothing to change.
2. Make minimal adjustments within the allowed ±20% for padding.

The self-check says: "Every selector character-for-character preserved? display, position, grid-template-*, flex-direction unchanged? width, height, padding, margin within ±20% of input? font-family, font-size, font-weight, line-height unchanged? Colors throughout the file replaced with fresh palette? Shadows redesigned? Border-radius adjusted? No AI marker comments?"

If I output unchanged, then colors and shadows are not refreshed. But the rule says only change certain properties; if none exist, the identity doesn't change.

But maybe I can change the padding from var(--space-md) to something else. The original padding is var(--space-md). I don't know its value. But I could keep the var but maybe the value can be adjusted? No, the var is a reference.

Actually, "padding: var(--space-md) !important" — I can change it to a specific value that is within 20% of what --space-md probably is. But I don't know what --space-md is. Common values: 1rem, 1.5rem, 2rem. For contact cards, --space-md is likely 1rem or 1.5rem. Changing this is risky.

Alternatively, I can add a box-shadow to the .contact-card elements? No, that would be adding properties not in the original, which changes the visual but might be acceptable? The rule says "Only change colors, shadows, radius, transitions, gradients." It doesn't say "only change existing properties." Actually it says "visual identity only" changes: colors, box-shadow, text-shadow, border-radius, gradient colors, transition timing, filter, opacity, outline, border-color, caret-color, accent-color, CSS custom properties values.

So I could add a box-shadow to the .contact-card? But that changes the visual identity. However, the selector list includes `.contact-quick-section .contact-card` which is an `<article>` or card. Adding a glow effect would fit the "glow-effects" variant.

But the HTML is fixed, and the CSS is fixed-selector-wise. I can add new declarations to existing rules. The instruction: "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." I interpret this as: only modify the declaration values related to visual identity; you may not change layout values. Adding a new declaration for box-shadow is allowed since it's a visual property.

But wait — the original block is inside a media query for max-width: 575.98px. Adding glow shadows on mobile might be fine.

However, there's also `.app-hero-section .row .col-lg-7 { text-align: center; }` — I can't change text-align. But I could add a color? That would be weird. Actually the rule says change colors. But adding color to a container that has text could affect text color. The original doesn't specify text color, so it inherits. Adding a color declaration would change the text color in that section on mobile. That might be a visual refresh. But it might be inappropriate.

Hmm. Let me think about what's expected. The user gave a specific block of CSS. The instruction is to "Refresh this CSS visually." The most conservative interpretation: since there are no visual properties, and we cannot change layout/typography, the output should be identical. But that seems pointless.

Wait, maybe the instruction expects me to change the padding value. The padding is `var(--space-md)`. I could replace the custom property reference with a literal value that is within 20% of the likely value. But that's a guess. Or I could change it to `var(--space-lg)`? That would change padding more than 20% probably.

Another option: I can change the `!important`? No, that's not visual.

Let me re-read the instructions for "✅ YOU MUST CHANGE" — "All color values... box-shadow... text-shadow... border-radius... gradient colors and stops... transition timing, easing, duration... filter, backdrop-filter... opacity... outline styles... border-color and border-style... caret-color, accent-color... CSS custom properties (--color-*, --shadow-*) values."

Note: "--space-*" custom properties are NOT in the list. The list explicitly says --color-* and --shadow-*. So --space-md is a spacing custom property, which affects layout. We should NOT change --space-md. So the padding declaration should stay exactly as is.

So what's left to change? Nothing. The block cannot be visually refreshed without violating the constraints.

Hmm, but maybe I should add visual properties to make it fit the glow-effects variant without changing layout.

Let me consider: The media query is for mobile. On mobile:
- .app-hero-section .row .col-lg-7 is centered text. We could add a text-shadow? That's a visual property. But text-shadow might look bad on mobile.
- .app-hero-section .badge.bg-warning — this is a warning badge. We could change its colors? But the original doesn't specify colors; it's using Bootstrap classes .badge.bg-warning. In Bootstrap, .bg-warning sets background-color. We could override with a different background color? But that changes colors, which is allowed. But the selector is `.app-hero-section .badge.bg-warning`, and it only has font-size currently. We could add a box-shadow or change the background color via a custom property? Actually, adding `background: var(--color-accent)` would override Bootstrap's .bg-warning. But is that desirable? The target style is "centered-stage" with gold/purple accent. Maybe.

- .contact-channels-section article, .contact-quick-section .contact-card — these are cards. We could add visual properties like box-shadow, border-radius, background, etc.

But the instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." This could be interpreted as: for each rule, you may modify the values of visual properties, and you may add visual properties if they don't exist. But the self-check says "Colors throughout the file replaced with fresh palette? Shadows redesigned (different offsets, colors)? Border-radius adjusted for new visual style?" This suggests the output should have shadows and radius. So maybe I'm expected to add them.

But wait — the original CSS block #2/2 is only these three rules. There might be a block #1 that has the main styles. The user only gave me block #2. So the rest of the file (block #1) probably contains the main visual styles. My job is to rewrite this block consistently with the refreshed design. The rest of the file has been or will be rewritten by someone else. So I should add visual properties here that align with the target style, using the same selectors, without changing the existing declarations.

Given the "glow-effects" variant, I should add glow shadows and radius to the cards. And perhaps the badge.

But the instruction also says "Only change colors, shadows, radius, transitions, gradients." Adding a background color to the badge or article is a color change. Is adding a background color to an element that didn't have one "changing a color"? It's adding a new color declaration. I think it's allowed because it's a visual identity change.

Let me be careful: The HTML is fixed. The CSS selectors are fixed. The existing declarations are:
1. text-align: center — cannot change.
2. font-size: 0.85rem — cannot change.
3. padding: var(--space-md) !important — can change padding ±20%, but since it's a var, better keep it. Actually I could change it to a slightly different value with calc? E.g., `padding: calc(var(--space-md) * 0.9) !important;` That would be within 20% (10% reduction). But the rule says "padding, margin (keep similar values, ±20% maximum)" — calc(var(--space-md) * 0.9) is 90% of the original, which is within ±20%. That is a safe change. But does it count as a visual refresh? Barely.

However, the instruction "✅ YOU MUST CHANGE" lists things to change. It doesn't say "you must change at least one thing." It says "visual identity only" — I must change these categories. But if the original has none, maybe I should add.

Let me think about the centering-stage target. The "centered-stage" style: dark stage #0f0f1a, bright content area, premium gold or deep purple accent. Glow effects.

The original block is for mobile. Adding a dark background to the hero section? But that might be too aggressive. Actually, on mobile, the hero section could have a different visual treatment, e.g., a subtle glow behind the badge, or a glowing card.

Let me propose an output that:

- Keeps .app-hero-section .row .col-lg-7 { text-align: center; } — but adds maybe a text-shadow? That's visual. But text-shadow on the whole column will affect all text inside, which could be a lot. Maybe not.

- Keeps .app-hero-section .badge.bg-warning { font-size: 0.85rem; } — but adds a box-shadow in accent color, border-radius, maybe a background gradient? But the badge already has Bootstrap styles. Overriding background color might be okay. But the badge is ".bg-warning" — Bootstrap's warning color is yellow. The target palette is gold/deep purple. Gold and yellow are close. We could add a glow shadow to make it premium. We could also change the background to a gold gradient. That would be a color/gradient change.

- For the cards, adds box-shadow glow, border-radius, maybe a subtle background (but the cards probably already have backgrounds from block #1). If we add a background, we might override block #1. That could be fine.

Actually, adding box-shadow to the cards in the mobile media query: the cards might already have box-shadow from base styles. Overriding in the media query is allowed. Adding border-radius too.

But there's a risk: The contact section might have multiple articles in a grid. On mobile, they're probably stacked. Adding glow shadows is fine.

Let me look at the selectors more carefully:

- `.contact-channels-section article` — articles inside a channels section. These are contact method cards (phone, email, etc.).
- `.contact-quick-section .contact-card` — quick contact cards.

Both are likely card-like elements. Adding a glow shadow in a purple/gold accent would fit "glow-effects".

What about the badge `.badge.bg-warning`? It's a warning badge — usually yellow. To make it premium gold, I can add a linear-gradient background and a glow shadow. But the selector doesn't include :hover. The variant says "Halo on hover: 0 0 32px rgba(accent, 0.6)". I could add a :hover rule? But the original selector list doesn't have :hover, and adding pseudo-classes is allowed? Wait, the NEVER CHANGE list includes "Pseudo-classes (:hover, :focus, ::before, ::after)" — meaning pseudo-classes must be kept exactly? Actually it says "Pseudo-classes (:hover, :focus, ::before, ::after)" under "NEVER CHANGE: Selectors". So I cannot add or remove pseudo-classes. If the original selector didn't have :hover, I can't add it. So no hover effect in this block. That's fine.

So my output could be:

```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;
        background: linear-gradient(135deg, #f5c842, #d4af37);
        box-shadow: 0 0 24px rgba(212, 175, 55, 0.4);
        border-radius: 0.5rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: calc(var(--space-md) * 0.9) !important;
        border-radius: 1rem;
        box-shadow: 0 0 24px rgba(106, 90, 205, 0.35);
        background: linear-gradient(145deg, #1a1a2e, #0f0f1a);
    }
}
```

Wait, but adding background to the cards might be too much and could conflict with existing backgrounds. Also, the "dark stage" is #0f0f1a, but the content area should be bright. Hmm.

Actually, "Spotlight feel: dark stage #0f0f1a, bright content area" — this could mean the page background is dark and content is in a bright container. If the cards are on a dark stage, they could be bright. But the cards in contact sections usually have light backgrounds. Let me think.

The target style "centered-stage" suggests a stage-like dark background with content centered. But this block only has mobile overrides. The main layout (block #1) probably handles the desktop centered stage. For mobile, we just need consistent visuals.

Maybe I should not add background colors at all, just shadows and radius. That's safer.

Let me consider the palette:
- Dark stage: #0f0f1a
- Bright content area: maybe #f8f9fa or white
- Premium gold: #d4af37 or #f5c842
- Deep purple: #6a5acd (slate blue) or #7b2ff7 or #8a2be2

For glow effects:
- Accent color glow: rgba(212, 175, 55, 0.4) for gold, or rgba(138, 43, 226, 0.4) for purple.

Let me decide on the accent. The variant says "Premium gold or deep purple accent." I'll use a gold accent for the badge (since it's bg-warning, gold fits), and purple for the cards? Or I can use one consistent accent. Let me use deep purple as the main accent for glow. Actually, the badge is warning — gold makes sense. But mixing gold and purple might be inconsistent. Maybe use gold for everything since it's "premium gold".

Hmm, let me think about a cohesive design: A dark "stage" with gold accents. The badge glows gold. The cards glow gold too. That's consistent.

But on mobile, a big gold glow around every card might be too much. However, the variant explicitly requests glow shadows.

Let me also consider transitions. The original has no transitions. "transition timing, easing, duration" is a category I must change. I can add `transition: box-shadow 0.3s ease;` to the cards. But without a hover, a transition on box-shadow still applies when