/* ============================================================
   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, keeping selectors and layout exactly. The original CSS is a small media query block. We need to change only visual properties: colors, shadows, radius, transitions, gradients, etc. But note that the original CSS has only font-size and padding, but padding is layout, but we can modify within ±20%? Actually the rules say padding, margin keep similar values, ±20% maximum. But the target style asks for editorial-magazine and glow effects. However, we must not change layout structure. The selectors are exactly:

@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 need to output rewritten CSS. Since there are no color values, shadows, radius, etc. We need to add visual properties? The instruction: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." We can add new properties that are visual? But we must not change layout. We can add color, background, box-shadow, border-radius, transitions, etc. But need to be careful with selectors: we can add declarations inside existing rules. Also we can add new rules? The instruction says "Keep ALL selectors and layout exactly as-is." That implies we cannot add new selectors? But we might need to add @keyframes for pulsing animations? The effect variant says "Subtle pulsing animations" but we can't add keyframes without adding selectors? Actually @keyframes is not a selector list? It's an at-rule. The "selector characters" must be preserved? We need to preserve existing selectors and layout. We can probably add @keyframes because it doesn't affect HTML layout. But the original file snippet may be just a fragment, so we should only output the CSS that corresponds to this block, preserving the existing media query and selectors. We can add visual declarations within those rules.

We must not change text-align? text-align is layout? It says typography: text-align is listed under layout? Actually it says "text-align, vertical-align" under layout, but in the "NEVER CHANGE" list under layout, yes: "text-align, vertical-align". So we cannot change text-align. It is already center, keep. Font-size is under typography, cannot change font-size. But original font-size is 0.85rem, keep. Padding: we can adjust within ±20% but probably keep same. Actually we can add new visual properties like color, background, border-radius, box-shadow, transition.

Let's consider the context: this is a mobile responsive block for a "saishi.css" file. We need to apply editorial-magazine style with glow effects. The target palette: cream/beige background, ink black text, deep red accent. But we don't have any existing colors. We can add background-color to the elements? For example, .app-hero-section .badge.bg-warning: this is a badge with Bootstrap bg-warning. We could override background with a deep red? But that would change the visual. However, we need to be careful: adding background-color to the badge may conflict with Bootstrap's .bg-warning. But that's okay. But does it change layout? No.

We also need to consider the .contact-channels-section article, .contact-quick-section .contact-card: these are cards. We can add border-radius, box-shadow, background, maybe a subtle glow.

But the original CSS only has these rules inside a media query. We can add a new rule? The instruction "Keep ALL selectors" means we cannot remove or modify selectors, but can we add additional selectors? The prompt says: "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Typically in these challenges, we should not add new selectors because that would alter the CSS structure. But we can add declarations to existing rules. However, to implement glow effects, we might need to add box-shadow to existing rules. That's fine. For animations, we could add a transition property to existing rules. But pulsing animations might require @keyframes and a animation property. We could add a transition to the existing rules, but no animation. The effect variant says "Subtle pulsing animations" but it's optional? It says "✨ EFFECT VARIANT: glow-effects" includes "Subtle pulsing animations". We can implement a pulsing animation by adding @keyframes and an animation property. But the at-rule is not a selector, so we can add it. But is that allowed? The "NEVER CHANGE" list includes "animation-name (values like duration/timing CAN change)". It says animation-name must not change? Actually under "🎬 ANIMATION & MEDIA": "@keyframes names (values inside CAN change)" and "animation-name (values like duration/timing CAN change)" – Wait, they say @keyframes names cannot change? It says "@keyframes names (values inside CAN change)" meaning the names of keyframes must be preserved? Actually the "NEVER CHANGE" list says "@keyframes names (values inside CAN change)" – so keyframe names should not be changed? The original CSS has no keyframes. So we could add new @keyframes with a new name. But the rule says "animation-name" under "NEVER CHANGE"? Let's re-read:

NEVER CHANGE:
🎬 ANIMATION & MEDIA:
  • @keyframes names (values inside CAN change)
  • @media query breakpoints (conditions only)
  • @import, @font-face, @supports, @charset
  • animation-name (values like duration/timing CAN change)

Hmm, this is confusing. It says "@keyframes names" are never changed, but "animation-name" (the property) is never changed? Then "values like duration/timing CAN change" – so animation-name property value likely cannot change? Actually it says animation-name (values like duration/timing CAN change) – maybe they mean the animation-name property itself cannot change? But then duration and timing can change. That implies if there is an animation-name, you must keep the same name, but can change duration/timing. Since original has none, we could add animation-name? That would be adding a property that wasn't there, which might be allowed? But if we add animation-name, we change the animation-name property value from none to something, which violates "animation-name" never change? Better to avoid adding animations if not necessary. The prompt offers "Subtle pulsing animations" but it's part of the variant, not mandatory. The primary task is to refresh colors, shadows, radius, gradients. We can just add glow shadows and radius. Let's keep it simple and not add keyframes.

But we need to ensure the output contains all original selectors and declarations, plus new visual properties. The original declarations:
- text-align: center;
- font-size: 0.85rem;
- padding: var(--space-md) !important;

We must keep those exactly because they are layout/typography. However, can we add additional declarations inside the same rules? Yes.

Let's craft:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        /* add color? */
        /* Maybe add a subtle text-shadow? But text-align is layout, but adding text-shadow is visual. */
        /* We can add color: #1a1a1a? But that might affect text if it was already something. But okay. */
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        /* original bootstrap warning background is yellow. We can override with deep red accent and glow. */
        background: linear-gradient(135deg, #c44536, #a4332a);
        color: #f5f1e8;
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(196, 69, 54, 0.4);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        /* add background cream, border-radius, box-shadow */
        background: #fdfbf7; /* lighter cream */
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(26, 26, 26, 0.08), 0 0 24px rgba(196, 69, 54, 0.12);
        transition: box-shadow 0.3s ease;
    }
}

But wait: the original selectors might be used to target elements that already have backgrounds, and adding background might be okay. However, we need to preserve layout, and padding unchanged. Adding border-radius doesn't change padding. Box-shadow doesn't affect layout. Background doesn't affect layout. Color doesn't affect layout. Transition is fine.

But we need to be mindful of the target style: editorial-magazine uses cream/beige backgrounds, ink black text, deep red accent. The badge is bg-warning. We can override. The cards could get cream background with subtle border? We can add border: 1px solid rgba(196,69,54,0.15) but border-style and color are allowed. Border-width is not allowed to change? Actually "border-color and border-style (NOT border-width)" can change. So we can add border-width? It says "border-color and border-style (NOT border-width)" – border-width must not change. Adding border-width might alter layout (box size) if box-sizing isn't border-box. But since the elements likely already have border-width? If none, adding border-width will change layout. So we should not add border-width. We can add border if border-width is not set? No, border shorthand includes width. Better avoid border to be safe. Use box-shadow instead.

But we also need to consider that the original CSS is inside a media query; we should keep the media query exactly. The media query condition "max-width: 575.98px" is a breakpoint, must be exactly the same.

Now, do we need to modify all colors in the file? The "original CSS" has no colors. We can add visual properties. The instruction says "Only change colors, shadows, radius, transitions, gradients." Since there are none, we are adding them. That's within scope.

But we must "Output the rewritten CSS now (no markdown, no preamble)". So final answer should be the CSS.

Let's make sure we don't include any extra comments. No AI marker comments. First character = '<' for media query? Actually CSS starts with @media. We'll output exactly.

Potential issue: The .badge.bg-warning might rely on Bootstrap's .bg-warning to set background-color. Our new background gradient overrides. That's fine.

Should we add a subtle pulsing animation? To implement without keyframes, we could use transition on hover? But no interaction? We can add `@keyframes` but the instruction says not to add new selectors? @keyframes is an at-rule, not a selector. But it might affect the CSS output but not layout. However, the "NEVER CHANGE" list says "@keyframes names" – we don't have any to preserve. Adding new @keyframes might be considered changing the CSS structure? But the output must preserve all selectors character-for-character. The list of selectors in the original doesn't include @keyframes, so adding @keyframes doesn't violate preserving selectors. But it might be considered extra. To avoid potential violation, we can skip animation.

The effect variant says "Glow shadows in accent color: 0 0 24px rgba(accent, 0.4)" and "Halo on hover: 0 0 32px rgba(accent, 0.6)" and "Medium radius (8-16px)". We can add hover rules? But adding new selectors like `.contact-card:hover` would change selector list and might be disallowed. So we cannot add hover selectors. We can only add declarations to existing selectors. But we can set transition so that if there were an existing hover rule elsewhere, it would transition. But not necessary.

We can add box-shadow with 0 0 24px rgba(accent,0.4) to cards. Good.

Let's verify the padding: the original has `padding: var(--space-md) !important;`. If we add `padding: var(--space-md) !important;` again, that's the same. We must keep it exactly. We can add visual properties before or after. It doesn't matter.

Let's craft the output with indentation matching original.

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

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

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

We'll output:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #c44536, #a4332a);
        color: #f5f1e8;
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(196, 69, 54, 0.4);
        transition: box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #fdfbf7;
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(26, 26, 26, 0.08), 0 0 24px rgba(196, 69, 54, 0.12);
        transition: box-shadow 0.3s ease;
    }
}

But wait: The first rule `.app-hero-section .row .col-lg-7` is a column containing hero section. Adding color: #1a1a1a might override inherited color, but that's visual. text-shadow is visual. Fine.

Should we add background to the col-lg-7? Could but not necessary.

We need to ensure we don't use any "border" because border-width may change layout. Using box-shadow is safe.

We also need to consider that `.contact-channels-section article` might already have padding, and adding background/border-radius might be okay. The `!important` on padding stays.

Now, the original CSS has no color values. We have added color values. Are these within the target palette? Yes. Cream background #f5f1e8 for page background maybe. We use #fdfbf7 for cards (a lighter cream). Ink black text #1a1a1a. Deep red #c44536. Good.

Glow shadows: `0 0 24px rgba(196, 69, 54, 0.4)` exactly as specified. `0 0 32px` on hover would require hover rule. But we can add `0 0 32px` in a transition? No, transition only animates changes. But if no hover, no need. We could add a subtle pulsing animation using `animation` but perhaps not.

We might add `@keyframes glowPulse { from { box-shadow: ... } to { box-shadow: ... } }` and apply `animation: glowPulse 3s ease-in-out infinite;` to the badge or cards. That would introduce a new at-rule and new property. But the instruction "animation-name (values like duration/timing CAN change)" suggests the property `animation-name` is not to be changed/added? Actually the phrase is under "NEVER CHANGE": "animation-name (values like duration/timing CAN change)". That is contradictory: "NEVER CHANGE" list includes "animation-name" but then says values like duration/timing can change. It probably means the animation-name itself must stay the same, but the duration/timing can change. Since we have no existing animation-name, adding one would not be "keeping". To be safe, avoid animation.

We can add `transition: box-shadow 0.3s ease, transform 0.3s ease;` but transform is a layout property? Transform doesn't affect layout, but it can change visual position. It's okay? But adding transform property could affect element if a hover/focus on an ancestor? Not without a trigger. But maybe avoid transform to be conservative.

Let's refine:

- For the hero column, maybe we don't need to add color/text-shadow as the original didn't. But we can add if it helps visual identity. However, if the element already has text color from other CSS, adding a specific color might alter text appearance. That's allowed. But we need to ensure no layout change. text-shadow is fine.

- For the badge, Bootstrap's .bg-warning sets `--bs-bg-opacity: 1; background-color: rgba(...)` maybe with !important? Actually .bg-warning uses `background-color: var(--bs-warning-rgb) !important;`? In Bootstrap 5, `.bg-warning` is `background-color: rgba(var(--bs-warning-rgb), var(--bg-opacity)) !important;` So our `background` without !important might be overridden by `.bg-warning` because of `!important`. We need to add `!important` to our background to override. Same for border-radius? .badge has its own border-radius. It is `--bs-badge-border-radius: 0.375rem;` not important. But with Bootstrap, `.badge` sets border-radius. Our rule has higher specificity