/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need to rewrite the CSS in the file, keeping all selectors and layout properties unchanged, but changing visual properties: colors, shadows, radius, transitions, gradients, etc. However, the given CSS is very small, contains only a media query with some rules that are mostly layout/text-align/padding. We must only change visual properties, but there are almost none. We need to output the same CSS but with refreshed visual identity. The instructions say "Only change colors, shadows, radius, transitions, gradients." In this snippet, we have text-align and padding. Those are layout, cannot change. We have font-size, cannot change. Forbidden to change font-size. So we can't change anything? But we must output something. The rule for .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; } - padding is layout, but we can adjust within ±20%? However, 'padding' is in the "NEVER CHANGE" list, but it says "keep similar values, ±20% maximum". We could adjust padding slightly to be within ±20%. But that doesn't refresh visual identity. Also, var(--space-md) is a custom property reference; we could change the value of --space-md only if defined elsewhere, but not here. In this file, we don't have the custom properties definition. We cannot add definitions because that would be adding selectors? Actually, we are allowed to change CSS custom properties (--color-*, --shadow-*) values. But we cannot add new rules? The task: "Rewrite this CSS visually". Only the provided CSS. So we must output the same selectors/rules, but with changed visual properties where possible.

The media query includes:
- text-align: center; (can't change)
- font-size: 0.85rem; (can't change)
- padding: var(--space-md) !important; (could change to a similar value, e.g., maybe change the custom property name? But that would break if the variable isn't defined? Actually we can change the value to something else, maybe a literal value within ±20%? But we don't know --space-md's value. Changing to a literal might be ok? But the instruction says keep HTML structure, class names, but CSS custom properties can have value changes. But we don't have the definitions. So maybe we can add a fallback? e.g., padding: 1rem !important; But that changes the value and might be within ±20%? Unknown.

We need to think more broadly. Perhaps the user expects us to output the same CSS, but with some added glow effects or color properties that don't affect layout. However, the given CSS has no color or shadow properties. We could add box-shadow, text-shadow, transition, etc. to these elements without changing layout (box-shadow doesn't affect layout). Adding new declarations is allowed because we are changing visual properties. The instruction says "Only change colors, shadows, radius, transitions, gradients" but also "Refresh this CSS visually" — we can add shadow/glow effects to these elements. We can also add a text-shadow to .app-hero-section .badge.bg-warning? That would be a visual change. And we can add hover effects? But we shouldn't add new selectors. We can only add declarations to existing rules.

But the file is "saishi.css" block 2/2. Possibly there is more CSS elsewhere, but we only see this snippet. We should transform this snippet into a visually refreshed version, staying conservative.

Since the target style is editorial-magazine with deep red/olive accent and glow effects, we can incorporate those into the existing selectors, even though the original didn't have color. We can add, for example:
- .app-hero-section .badge.bg-warning: add background-color, color, box-shadow, text-shadow? But careful: .badge.bg-warning has a Bootstrap class. Changing its background-color may affect the badge. That's allowed. But we might not want to change background because the class bg-warning implies yellow. However, we can override to a deep red accent to match editorial palette. That's a visual change.

- On the contact cards, add border-radius, box-shadow, transition, maybe background gradient? But padding is with !important.

We must output exactly the same media query with the same selectors. We can add declarations inside each rule. But we must ensure we don't change display/position/font-size etc. We can change font-size? It's forbidden. So keep 0.85rem. We can change font-size only if within? No, font-size cannot change. So keep.

But maybe we can change text-align? No, that's layout. Keep.

We can add color, background-color, box-shadow, text-shadow, opacity, transition, filter, backdrop-filter, outline, border? But these elements may not have borders; we can add border-radius, etc.

We need to add glow effects: box-shadow 0 0 24px rgba(accent, 0.4). For hover, we would need a :hover selector, but that would be adding a selector, which is forbidden? Actually, the instruction says selectors must be preserved exactly. It doesn't say we cannot add new selectors? It says "Selector lists (commas)" must be preserved, but adding new selectors might change HTML? No, adding a :hover pseudo-class is allowed? The NEVER CHANGE list includes "Pseudo-classes (:hover, :focus, ::before, ::after)" meaning we must keep them exactly if present, but not that we can't add new ones? However, the task says "The HTML is FIXED — only colors, shadows, and decorative properties may change." Adding a :hover rule is not changing HTML, but it would add a selector. The output directive says "preserving ALL selectors and layout exactly". That could mean we should not add or remove selectors. It says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". That implies the set of selectors should be identical. So we should not add new selectors. We can only edit existing rules.

Thus we can only modify the declarations within the existing three rules.

Let's look at existing rules:
1. .app-hero-section .row .col-lg-7 { text-align: center; }
We can add color, text-shadow, maybe filter? We could add a text-shadow for glow. Since it's a container, maybe not.

2. .app-hero-section .badge.bg-warning { font-size: 0.85rem; }
We can add color, background-color, box-shadow, border-radius, text-shadow, transition, etc.

3. .contact-channels-section article,
   .contact-quick-section .contact-card {
       padding: var(--space-md) !important;
   }
We can add background-color, border-radius, box-shadow, transition, maybe backdrop-filter, border? But be careful: adding background-color might change the visual look. The selector is for articles and contact cards. We can add a box-shadow glow, maybe a gentle border, etc.

Also, we can change the value of the padding? It's var(--space-md). We could change it to a different custom property, but that might affect layout. Better to keep. We can add a fallback? No.

But the instruction on padding: "keep similar values, ±20% maximum". Since it's a var, we can't know. Keep it.

The main goal is to refresh the visual identity. Since the original is tiny, we need to inject editorial-magazine/glow styling into these few declarations. That means adding color, background, shadow, radius, transition.

We should also add a media query? Original is within a media query. We keep the @media line exactly.

We should also ensure the output is only CSS, no markdown.

Let's construct a visually refreshed version:

For .app-hero-section .badge.bg-warning:
- Change background-color to deep red (#c44536), color to #f5f1e8, box-shadow glow, border-radius, text-shadow, transition.

But be careful: .badge.bg-warning is originally yellow with dark text. Overriding to red is a visual change. Good.

For .contact-channels-section article, .contact-quick-section .contact-card:
- Add background-color: rgba(255,255,255,0.03) or cream? But the editorial palette has cream background. Since we don't know the page background, we can add a subtle warm off-white background, border-radius: 12px, box-shadow glow in olive, transition. But the original had no background; adding one will change appearance but not layout. OK.

We could also add border: 1px solid rgba(107,112,92,0.2) but border-width must not change? Actually border-width is forbidden to change? "border-color and border-style (NOT border-width)" means we can change color and style, not width. Adding a border would introduce border-width, which is forbidden. So better avoid adding a border. But border-radius is allowed.

We can add opacity: 0.98? That's allowed.

Also, for .app-hero-section .row .col-lg-7, we can add a subtle text-shadow? But it's a container for text. We can add color? But that might affect text color globally. Better not. We can add a background? Maybe not. Perhaps add a filter: drop-shadow? That's visual.

But we must "refresh visual identity" — only adding decorative properties. I think we should add a text-shadow to the col-lg-7? Hmm.

Since the original rule has only text-align, we can add color to the text inside? But color is not layout. For example:

.app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #1a1a1a;
    text-shadow: 0 2px 8px rgba(194, 69, 54, 0.15);
}

This doesn't change layout. Good.

Also, for the badge, add:

.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background-color: #c44536;
    color: #f5f1e8;
    box-shadow: 0 0 24px rgba(196, 69, 54, 0.4), 0 4px 12px rgba(26, 26, 26, 0.25);
    border-radius: 999px;
    text-shadow: 0 1px 2px rgba(26, 26, 26, 0.2);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

Wait, transition on transform is allowed? transition timing/duration/easing can change, but adding transition on transform might not affect layout. Transform is not in forbidden list? Actually, transform is not listed. But we shouldn't add transform property itself, only transition for a property that isn't there? That's pointless. We can add transition for box-shadow, background-color. But transition only matters if there's a hover state, which there isn't. So not needed. Maybe add a subtle glow animation? But animations require @keyframes, adding that would be new selectors? @keyframes names can change, but adding new @keyframes would be adding a rule. Probably not allowed. So no.

For the contact cards:

.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    backdrop-filter: blur(8px);
    border-radius: 16px;
    box-shadow: 0 0 24px rgba(107, 112, 92, 0.4), inset 0 1px 0 rgba(245, 241, 232, 0.1);
    transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.4s ease;
}

But adding background gradient might change the look. It's allowed because gradients can change/added. However, adding backdrop-filter might affect performance but not layout. Allowed.

But we need to be careful: The target style "editorial-magazine" says "Asymmetric grids..." but that's aggressive only, not relevant here. We just need to apply the color palette and glow.

We should also consider that the original CSS is part of a responsive media query for small screens (max-width: 575.98px). So these styles apply on mobile. Overriding the badge to red is fine.

One issue: The selector .app-hero-section .badge.bg-warning includes a Bootstrap badge with bg-warning. Changing background-color could be overridden by Bootstrap's own !important? Bootstrap uses .bg-warning { background-color: #ffc107 !important; } in some versions. Our rule has no !important. To ensure the change, we might need to add !important? But the instruction doesn't forbid adding !important? It says preserve the CSS. We can add !important, but that might be considered changing "important" which is not listed. However, adding !important could be seen as a change to the declaration's priority, which is not visual? It's a CSS property characteristic. But generally allowed? The instruction says "only colors, shadows, and decorative properties may change." Importance is not a decorative property, but it's used to ensure the color applies. We can add !important to the background-color if needed. But maybe not necessary; this is an app-hero-section, likely custom CSS after Bootstrap. The original file might have specificity higher? Actually `.app-hero-section .badge.bg-warning` (0,3,0) vs `.bg-warning` (0,1,0), so our rule wins despite Bootstrap's !important? No, Bootstrap's `.bg-warning` has `!important` in Bootstrap 4? Let's recall: Bootstrap 4's `.bg-warning` is `background-color: #ffc107 !important;`. Then our rule without !important cannot override. To be safe, add `background-color: #c44536 !important;`. That's a common practice. The instruction didn't forbid changing !important, but it says "Only change colors, shadows, and decorative properties" — adding !important to a color is still about color. I think acceptable.

Similarly, for padding, it already has !important. We keep it.

Now, let's craft the final output.

We must preserve the original selectors exactly, including indentation? The original has indent of 4 spaces? Actually:

@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 should keep the same structure, but add declarations. Also keep blank lines between rules. We can add properties in a reasonable order.

We must not add any comments. Output only CSS.

Let's decide on exact values:

- Accent deep red: #c44536
- Olive: #6b705c
- Cream: #f5f1e8
- Ink: #1a1a1a

For .app-hero-section .row .col-lg-7:
- color: #1a1a1a; (ink)
- text-shadow: 0 2px 12px rgba(196, 69, 54, 0.18); (glow subtle)

For .app-hero-section .badge.bg-warning:
- font-size: 0.85rem; (unchanged)
- background-color: #c44536 !important; (accent)
- color: #f5f1e8; (cream)
- box-shadow: 0 0 24px rgba(196, 69, 54, 0.4), 0 4px 16px rgba(26, 26, 26, 0.3); (glow)
- border-radius: 999px; (pill)
- text-shadow: 0 1px 2px rgba(26, 26, 26, 0.25);
- transition: box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1); (halo on hover? but no hover, still ok)

For the contact cards:
- padding: var(--space-md) !important; (unchanged)
- background: linear-gradient(145deg, rgba(245, 241, 232, 0.12), rgba(245, 241, 232, 0.03));
- border-radius: 16px;
- box-shadow: 0 0 32px rgba(107, 112, 92, 0.35), 0 8px 24px rgba(26, 26, 26, 0.08);
- backdrop-filter: blur(10px); (maybe too much for mobile? but ok)
- transition: box-shadow 0.3s ease, background-color 0.3s ease;

But note: adding background with gradient and backdrop-filter will change the visual identity significantly. Since the target is editorial-magazine with glow effects, that's good.

However, we must ensure that "box-shadow offsets, blur, spread, color — fully redesign with multi-layer effects" — we are doing that.

We should not add any property that is in the forbidden list. None of these are.

Let's check: text-align remains. font-size remains. padding remains. Good.

Potential issue: The contact cards might not have a background originally; adding a background could make them visible as cards, but that's a visual change. The instruction allows changing "background" values? It says "All color values: background, color, border-color, fill, stroke, outline-color". Background is a shorthand for background-color, background-image, etc. We are allowed to add a gradient background. Yes.

But in "NEVER CHANGE" there is no background property. So allowed.

We should also perhaps change the opacity? We can add opacity: 1? Not needed.

We need to ensure that the output starts with '@media' and no extra spaces. Use consistent indentation.

Now, the instruction says "The HTML is FIXED — only