/* ============================================================
   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, while preserving the layout, selectors, media query, etc. The original CSS is:

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

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

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

We must only change colors, shadows, radius, transitions, gradients, etc. But here we have no colors, shadows, radius, transitions, gradients to change. We need to add visual properties? The instructions say "Refresh the visual identity WITHOUT changing layout structure or class names." However the original CSS is minimal, only layout/typography. We can add visual properties like color, background, border, box-shadow, etc. But careful: we must not change layout properties. We can add new properties that are not in the original, as long as they don't change layout. For example, we can add color, background-color, border-radius, box-shadow, transition, etc. We need to preserve the existing selectors exactly, including the media query.

The target style is editorial-magazine with glow effects. So we should add accent colors, glow shadows, medium radius, subtle pulsing animations? But we can't change layout or add keyframes? Actually we can add @keyframes? The instructions say "animation-name (values like duration/timing CAN change)" but also "Animation & Media: @keyframes names (values inside CAN change)" and "Only visual properties". We can add new keyframes only if we don't change existing ones? The original CSS doesn't have any, so we can add. But the output should be rewritten CSS preserving all selectors and layout exactly. We can add new rules within the media query for the same selectors? We can augment with visual properties.

We need to ensure that selectors are character-for-character preserved. So we keep the media query, keep `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, and the grouped selector `.contact-channels-section article, .contact-quick-section .contact-card`. We can add additional declarations within those rules.

But note: padding is layout property; we must not change it. It currently says `padding: var(--space-md) !important;`. We should keep that exactly as is. But maybe we can add other properties like border-radius, background, box-shadow, transition, etc.

However, we need to ensure visual identity refresh. Perhaps we can add a new rule? No, the instruction says ONLY the rewritten CSS preserving ALL selectors and layout exactly. We cannot add new selectors. But we can add properties to existing selectors. That seems fine.

Let's plan: The target style editorial-magazine: Neutrals: cream/beige backgrounds, ink black text, accent deep red #c44536 or olive #6b705c. Glow effects: accent color glow shadows, halo on hover, medium radius 8-16px, subtle pulsing animations.

Given the existing mobile media query, we should apply fresh colors, shadows, radius, transitions to those elements.

Let's craft:

For `.app-hero-section .row .col-lg-7`:
- It's a column in hero section. Add text-align: center? That is already there. We can add color: #1a1a1a; background: maybe transparent; border-radius? Not needed. Maybe add a subtle text-shadow? But since it's a container, text-shadow might not apply. Could add a subtle glow? Better to add color and maybe a background gradient? But be careful not to affect layout. Adding background-color may affect look but not layout. Could add border-radius and box-shadow, but that might create visible box. We want editorial magazine style: cream background, ink text. But this is a column, not a card. Maybe we can just set color: #1a1a1a; and font smoothing? Not visual enough.

For `.app-hero-section .badge.bg-warning`:
- Badge with class `badge bg-warning`. We can override the background-color to accent deep red, color to white, border-radius, box-shadow glow, transition.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- These are like cards. We can add background: cream/beige, border-radius: 12px, box-shadow: glow, transition, maybe accent border.

But note: The original rule sets padding: var(--space-md) !important. We can keep that and add other properties.

However, adding box-shadow and background to `.contact-channels-section article` and `.contact-quick-section .contact-card` may significantly alter appearance but not layout (since box-shadow, background, border-radius don't affect layout dimensions if box-sizing border-box? Actually border-radius no layout, box-shadow no layout, background no layout). Adding border? If we add border-width, it changes layout. So avoid border property entirely, unless it's border-color or border-style? The instructions say better not change border-width; adding border-width would change layout. So avoid. Use box-shadow to simulate border: 0 0 0 1px rgba(...). That's fine.

We also can add transition for hover glow. But we need a hover state? The original selectors have no :hover. We cannot add new selectors? We can add pseudo-class? Instructions say pseudo-classes must keep exactly; but we can add new pseudo-class? Actually "Selectors: keep exactly" likely means existing selectors must remain, but we can add additional selectors? The instruction: "Every selector character-for-character preserved?" It says preserve all selectors exactly. Adding new selectors might be considered changing. But adding a `:hover` variant of an existing selector could be permissible? The input didn't have it, but we can add new rules? The output should be the rewritten CSS; adding new rules might change behavior but not layout. However, the strict instruction says "HTML is FIXED — only colors, shadows, and decorative properties may change." So we can add decorative properties to existing selectors. It doesn't explicitly forbid adding new selectors, but "Keep ALL selectors and layout exactly as-is" implies we should not alter the selector list. Adding new selectors would alter it. So better to avoid adding new rules. But we can use `transition` property to enable hover effect even without a hover rule? No, transition only animates changes when a property changes, but without a hover rule, no change occurs. So we might skip hover states. But we can still add box-shadow glow that is always visible, and transition for potential hover states from other existing CSS. Since the original file only has this block, but there might be other CSS in the file that we are not seeing? The file is "assets/css/saishi.css#块2/2" - likely this is block 2 of 2. So we only rewrite this block. There may be other CSS elsewhere. So adding transition is okay, it won't affect layout.

The target style wants glow-effects. We can add glow shadows to the cards and badge.

We also need to add a subtle pulsing animation. We could add `animation` property to the badge. But we need @keyframes. The instruction says @keyframes names preserved, values inside can change. We can add new @keyframes if we also add animation-name. That is allowed because it's decorative. But adding @keyframes means adding new at-rule. The instruction says "Animation & Media: @keyframes names (values inside CAN change)" and "No @keyframes changes required" perhaps. We can add a new one. However, output should be "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Adding @keyframes is not a selector, it's an at-rule, but it's okay to add. But to be safe, we can keep it simple and avoid adding @keyframes if not necessary. The target style has "subtle pulsing animations" as part of glow effects. We could add an animation to the badge using an existing keyframe? But we don't know existing ones. We can define a new one with a unique name. But that adds new code. The task says "You are an expert CSS designer", "Refresh the visual identity WITHOUT changing layout structure or class names." Adding @keyframes is fine.

Let's decide on final output:

We will produce:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        color: #fff8f0;
        border-radius: 8px;
        box-shadow: 0 0 16px rgba(196, 69, 54, 0.35);
        transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #f5f1e8;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(26, 26, 26, 0.08), 0 0 24px rgba(107, 112, 92, 0.15);
        transition: box-shadow 0.3s ease;
    }
}

But wait: `.app-hero-section .badge.bg-warning` originally had `font-size: 0.85rem;` which is typography, must preserve exactly. We can add color, background-color, etc. Good.

Should we add `accent-color`? Not necessary.

We also need to consider the target palette: cream/beige backgrounds (#f5f1e8), ink black text (#1a1a1a), accent deep red (#c44536) or olive (#6b705c). We used both deep red and olive. Good.

We also need "halo on hover" but no hover. We can add a `:hover`? Hmm.

To fully satisfy "glow-effects", perhaps we can add a rule for `.contact-channels-section article:hover`? But that would be a new selector, and the instruction says preserve all selectors exactly. Adding a pseudo-class to an existing selector creates a new selector, which might be considered changing the selector list. But the original had no hover. However, the instruction specifically lists "Pseudo-classes (:hover, :focus, ::before, ::after)" as things to keep exactly. That could mean if they exist, keep them; but adding new ones is not necessarily forbidden? "Keep ALL selectors and layout exactly" suggests no new selectors. But the "selectors" in the input are the ones we see. Adding a hover variant is not altering the existing ones; it's adding new. To be safe, we should not add new selectors. But the target style explicitly includes "Halo on hover". We can still achieve by setting the base box-shadow to a glow, and not worry about hover. Or we can include `@media (hover: hover)`? That's a media query, not a selector. But adding a media query would be new at-rule. Eh.

Given the constraints, I think it's acceptable to add a hover rule if we keep all original selectors untouched and append new ones? But the instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". It doesn't say "do not add selectors", but in "Selectors" section it states "Class names: keep EXACTLY", "IDs: keep exactly", etc. It implies we should not change selectors, but we can add new ones? The "SELF-CHECK" says "Every selector character-for-character preserved?" That could mean every selector present in the input is preserved, not that you can't add. However, "Only the rewritten CSS" based on original CSS, so additions may be okay as long as original selectors preserved. But to be conservative (mode is conservative), we should not add new selectors. Keep changes within existing blocks.

Thus, we can add transition but no hover state. We can still have glow effect visible. The "halo on hover" cannot be implemented without hover rule. Maybe we can use `transition` and rely on existing hover styles elsewhere (other block) that may set backgrounds. But we don't know.

Given the instruction "conservative mode", we should be very faithful. I think adding a hover rule is acceptable? Let's read the user prompt: "You are an expert CSS designer in 🛡️ CONSERVATIVE MODE. ... Refresh the visual identity WITHOUT changing layout structure or class names. The HTML is FIXED — only colors, shadows, and decorative properties may change." This means we can change decorative properties, but we can also add new decorative rules for existing selectors. Adding `:hover` is still about the same class name, not changing layout. But it does add a pseudo-class, which is a selector extension. However, the "Never change selectors" lists pseudo-classes as things to keep exactly, but not necessarily to not add. The phrase "Selectors (CRITICAL - HTML is fixed): Class names: keep EXACTLY (.post-card stays .post-card)" indicates the selectors in the original must remain. Adding new rules doesn't change the original ones. But it does change the CSS structure. The "Output" says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". I interpret as: you must not rename/remove/restructure selectors; adding new selectors might be considered "not preserving" because now there are more selectors. But they said "preserving ALL selectors" not "only existing selectors". Hmm.

Given the target style explicitly asks for halo on hover, I think we should add a hover rule. But to be safe, we can include a `:hover` on the same selectors? However, the original selectors are within a media query. We can add nested hover rules? For example:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        color: #fff8f0;
        border-radius: 8px;
        box-shadow: 0 0 16px rgba(196, 69, 54, 0.35);
        transition: box-shadow 0.3s ease, background-color 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #f5f1e8;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(26, 26, 26, 0.08), 0 0 24px rgba(107, 112, 92, 0.15);
        transition: box-shadow 0.3s ease;
    }
}

But no hover. The effect variant says "Halo on hover: 0 0 32px rgba(accent, 0.6)". We could include a `:hover` rule for the cards and badge. But that would add new selectors. Maybe we can use `@media (hover: hover)` nesting? Still new selectors.

Let's think about the structure: The input is a media query block. If we add a new media query for hover, that's new. But the instructions forbid changing @media breakpoints, but adding a new one? "Media: @media query breakpoints (conditions only)" - preserving existing conditions, but adding new could be considered a change? They said "No changes to layout structure". Adding @media not layout.

Given the "conservative mode", I'd rather not add new rules. The prompt says "Target Style: ... Effect Variant: glow-effects". It's a style guide to apply, but not strictly every detail. The important part is "Glow shadows in accent color: 0 0 24px rgba(accent, 0.4)" and "Medium radius (8-16px)". We can satisfy that with base state.

However, "Halo on hover" is explicit. Maybe we can implement it with `transition` plus `filter: drop-shadow`? No, hover needed.

Maybe we can add a `:hover` rule using the exact same selector with `:hover` appended. Since the instruction says preserve class names, and `:hover` is a pseudo-class, adding it is okay? Let's look at the self-check: "Every selector character-for-character preserved?" It doesn't say "no new selectors". It says every selector in the original file must appear unchanged. Adding extra selectors doesn't violate that. The original selectors are still present. The layout properties in those original rules are unchanged. Additional rules are purely additive decorative changes. I think it's acceptable.

But there is a risk: The "Never change" list includes "Selector lists (commas)" and "Pseudo-classes (:hover, :focus, ::before, ::after)" but that's under "Never change" meaning don't remove/alter existing ones. Adding a new hover rule is not changing existing.

I think we can add hover rules to deliver the glow halo. But to be conservative, perhaps we can include them with `@media (hover: hover)` and inside the same mobile media query? That's messy.

Alternative: Use `transition` and rely on the fact that there may be other CSS definitions for these cards that already have hover. But we don't know.

Let's decide to add hover rules for the card and badge, because the effect variant explicitly requests it. We'll keep them inside the same media query to be relevant on mobile? Actually hover on mobile is not common, but it's okay. Or we can add them outside? But the original block is entirely within media query. To maintain same structure, we can add the hover rules inside the media query as additional rules.

Wait, the original media query has three rules. We can add additional rules after them, still inside the media query. That preserves the original rules and adds new ones. The "ALL