/* ============================================================
   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 visually while preserving selectors and layout. The given CSS is a media query with three rules. We need to refresh colors, shadows, radius, transitions. But these rules have minimal visual properties: text-align, font-size, padding. Padding can change within ±20%. But font-size cannot change? Wait, typography: font-size, font-weight, font-style, line-height, letter-spacing, word-spacing, text-transform, white-space, word-break are "Typography (font system fixed)" and must NOT change. text-align is layout? It says text-align, vertical-align under layout? Let's check: under LAYOUT, the list includes text-align, vertical-align. So text-align remains. padding can change within ±20%. But the original padding is var(--space-md) !important. We can change the CSS variable value? Actually the CSS uses var(--space-md). We can change --space-md value if defined elsewhere? But the given file only has this media query. We can't define new variables? We can change the value of var(--space-md) by overriding it? But we are only to rewrite this CSS block. We could alter padding to a different value but must remain similar ±20%. However we don't know the value of --space-md. It's a custom property. We can change the padding declaration to a literal value? That would be changing the value, but we need to keep layout similar. We can set padding: 24px !important maybe? But we don't know original. The instruction says colors, shadows, radius, transitions, gradients can change. Also CSS custom properties (--color-*, --shadow-*) values. But --space-md is not color/shadow. It's a spacing variable. We probably should leave padding as is, since it's a custom property and changing its value might affect layout. We can keep it.

But the task is to refresh "visually". The only visually changeable properties in this media query are: font-size? No, typography fixed. text-align? Fixed. padding? margin? Can be changed ±20%. But that's it. There's no color, shadow, border-radius, etc. So how to refresh? We could add properties? The instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". We can add new properties? It says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." If the original rules don't have those, we might need to add them? But that might change layout? Adding box-shadow or color won't change layout. Adding border-radius to elements? Could be okay. But we need to be careful: The selectors target .app-hero-section .row .col-lg-7, .app-hero-section .badge.bg-warning, and .contact-channels-section article, .contact-quick-section .contact-card. We can add color, background, box-shadow, border-radius, transition, etc. But the original CSS may already have those properties in base rules, not in this media query. However we are only rewriting this snippet. The instruction says "URL: File: assets/css/saishi.css#块2/2" meaning this is one block from the whole file. We need to output the rewritten CSS for this block. We can add visual properties to these elements within the media query. But is that allowed? The task says "Only change colors, shadows, radius, transitions, gradients." It doesn't explicitly say "only modify existing declarations". It says "Keep ALL selectors and layout exactly as-is." Adding new visual properties is fine as long as layout doesn't change. But we need to ensure not to alter font-size etc. We can also change the `padding` within ±20%: e.g., var(--space-md) !important to 24px !important? But that changes from var to literal, but if --space-md is e.g. 16px, 24px is +50% which exceeds ±20%. Safer to keep as is.

Given the target style "editorial-magazine" with cream backgrounds, ink black text, deep red accent. We can set color, background-color, border-left maybe, box-shadow, border-radius, transition. But we need to ensure these are appropriate.

Let's analyze selectors:

1. `.app-hero-section .row .col-lg-7` - a column in hero section. In mobile, text-align center. We can add maybe color: #1a1a1a? But that might be inherited. Could add `color: #1a1a1a;` but if the base already has a color, we can override. That's okay. Add `background: transparent`? Not necessary.

2. `.app-hero-section .badge.bg-warning` - a badge with background warning (yellow). We can override background to deep red? But the class name `.bg-warning` implies Bootstrap warning yellow. We can override with our accent color: background-color: #c44536; color: #f5f1e8; border-radius: 50rem? But border-radius is visual. But we must preserve layout? Border-radius doesn't affect layout. Also font-size is already set to 0.85rem, can't change. We can add box-shadow, transition.

3. `.contact-channels-section article, .contact-quick-section .contact-card` - these are cards. In mobile, padding is var(--space-md) !important. We can add background: #fff? Or cream? Add border-radius: 16px; box-shadow: multi-layer soft shadows; transition. But we must be careful: The selector is a comma list. We can add properties to both.

However, the instruction says "ORIGINAL CSS" is exactly that media query. We need to output it with visual refresh. Since there are no colors/shadows originally, we have latitude to add them. But we must ensure "No layout changes" - adding border-radius, box-shadow, transition, color, background-color does not affect layout (except background-color no, box-shadow no, border-radius no, transition no). Adding border? If we add border, it will affect box-size unless box-sizing border-box; but it could affect layout. Better avoid border. Adding border-radius is fine. Adding padding? Keep same. Adding margin? No.

We also should consider the editorial-magazine style: cream/beige backgrounds, ink black text, deep red accent. We can set the badge background to deep red and text to cream; cards to white or cream with soft shadows; hero text to ink black.

But the original media query is only for max-width 575.98px. So these changes apply on mobile. That's fine.

Let's craft a refresh:

- For `.app-hero-section .row .col-lg-7`: add `color: #1a1a1a;` maybe with `transition: color 0.35s ease;` But there's no hover. Could add `background-color: transparent;` Not needed. Maybe just keep text-align center, add `color`? But text-align center is layout, keep. We can add `padding: 1rem;`? That would be extra padding maybe okay. But padding already from base. Avoid.

- For `.badge.bg-warning`: Override the background to deep red: `background-color: #c44536; color: #f5f1e8; box-shadow: 0 2px 6px rgba(196, 69, 54, 0.25), 0 8px 20px -6px rgba(196, 69, 54, 0.35); border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease;` But adding transform? If we add `transform` to transition but not change transform, okay. But adding transform property with value none? Not needed. We can just transition box-shadow, background-color. But transition on badge maybe no hover. Fine.

- For contact cards: `background-color: rgba(255,255,255,0.8); backdrop-filter: blur(8px); border-radius: 16px; box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12); transition: box-shadow 0.4s ease, background-color 0.4s ease;` But adding backdrop-filter could be okay. However `backdrop-filter` may not be supported but it's visual. Need to keep layout.

But we need to be careful: The selector `.contact-channels-section article, .contact-quick-section .contact-card` — we are adding `background-color`. If the original cards already have a background color from base CSS, this is an override. That's okay.

But the instruction says "Only change colors, shadows, radius, transitions, gradients." It does not allow adding `backdrop-filter`? Actually filter, backdrop-filter are listed in "✅ YOU MUST CHANGE" as can change. So adding backdrop-filter is allowed. But adding `background-color`? That's a color, allowed. Adding `transition` allowed.

We should also consider that this media query is for small screens, and cards might be in a row? Adding background to cards could change layout? No.

We need to preserve the `!important` on padding. Keep that.

Let's also consider the `font-size` on badge: cannot change. Keep `font-size: 0.85rem;`.

We need to output only CSS with no markdown.

Let's write:

@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: #f5f1e8;
        border-radius: 12px;
        box-shadow: 0 2px 6px rgba(196, 69, 54, 0.25), 0 8px 20px -6px rgba(196, 69, 54, 0.35);
        transition: box-shadow 0.35s ease, background-color 0.35s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #fffdf8;
        border-radius: 16px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
        transition: box-shadow 0.4s ease, background-color 0.4s ease;
    }
}

But wait: we added `color` to hero col. Is that allowed? It's a color change. The original didn't set color, but adding it is fine. However, we must ensure we don't change font-size etc. Good.

We added `background-color: #fffdf8` to cards. That's a near-white cream. Good.

But we should also consider the target style "editorial-magazine" with generous outer padding? Not relevant here.

Should we add a `border-left` accent to cards? That would be a border, which affects layout? Border width would affect layout unless box-sizing border-box, but we don't know. Better avoid.

Maybe add `border-radius` to the hero column? Not needed.

Maybe for `.app-hero-section .badge.bg-warning` we can add `letter-spacing`? No, typography fixed.

The instruction says "border-radius (visual rounding only)" so adding is fine.

We should also ensure we don't violate "transition timing, easing, duration" - we set transitions.

Now, is there any need to adjust the padding within ±20%? We kept it exactly. Good.

We must ensure "Selectors character-for-character preserved" - yes.

Comma list formatting? Original has:

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: ...;
    }

We keep same.

Now, the output must start with `@media`. No markdown fences. We'll output exactly.

But we should think: The file fingerprint and request ID are given, but not needed.

We need to be "CONSERVATIVE MODE" so avoid radical changes. Adding background colors to cards and badge is a visual refresh but not layout changing.

Potential issue: `.app-hero-section .badge.bg-warning` - if Bootstrap's `.bg-warning` sets `--bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;` Our override without `!important` might not take effect due to specificity? Class `.bg-warning` has same specificity as `.app-hero-section .badge.bg-warning`? Actually `.app-hero-section .badge.bg-warning` has 3 classes vs `.bg-warning` one class, so our specificity is higher. Good. But to be safe, we could add `!important`? The instruction doesn't require. But if base uses `!important` on bg-warning, then we need `!important` to override. In Bootstrap, `.bg-warning` often has `!important`. Actually Bootstrap 5 `.bg-warning` is `background-color: #ffc107 !important;` So to override, we need `background-color: #c44536 !important;`. But the original CSS did not use `!important` on background. In mobile media query, if we want to change the badge from warning yellow to deep red, we need `!important` to beat Bootstrap's `!important`. Should we add `!important`? It's a color declaration, allowed. It doesn't change layout. It's safe. The instruction says "ALL color values" may change, including `!important`? We can add `!important` to the background-color and color. But the original did not have it. We can add it if needed. However, we don't know if this CSS is used with Bootstrap. But the class `bg-warning` strongly suggests Bootstrap. To ensure visual change, use `!important`. Also for color, Bootstrap badges have `color` maybe not important. But we can use `!important`.

Similarly, `.contact-channels-section article` might have existing background colors. No `!important` needed.

But adding `!important` to background-color of badge might be okay. Let's do:

background-color: #c44536 !important;
color: #f5f1e8 !important;

But note: The original CSS in this media query already uses `!important` on padding for cards. So using `!important` is consistent.

Should we also add `!important` to card background and border-radius? Not necessary.

Let's refine:

For editorial style, deep red accent #c44536, cream #f5f1e8, ink #1a1a1a. The cards could be a slightly different cream: #fffdf8. That's fine.

For hero col, if we add `color`, it might be overridden by base? But we can leave it out because it doesn't change anything visible if the base already has color. But adding ink color reinforces editorial. We'll include.

Also add `accent-color`? Not relevant.

Transition on hero col? Could add `transition: color 0.4s ease;` but no color change on hover. Not needed.

Let's consider the badge radius: Original Bootstrap badge has border-radius: 0.375rem. We can change to 12px for editorial rounded. That's okay. But it might be too round for a magazine style? 12px is fine.

Box-shadow on badge: subtle red glow.

Cards: multi-layer soft shadows as requested: `0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)` exactly from the variant. Add border-radius 16px. For editorial, maybe `background: #fffdf8;` with a subtle `border: 1px solid rgba(0,0,0,0.04)`? But border could affect layout. Avoid border.

What about `backdrop-filter`? Not necessary.

Let's finalize.

But wait: The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It might imply that we should not add new properties that weren't originally there, because that could be considered changing the CSS beyond visual. But "only change colors, shadows, radius, transitions, gradients" means those categories are allowed to be added/modified. So adding box-shadow, border-radius, transition, background-color, color is within those categories. Good.

Could we change `padding` to a fixed value? It's allowed ±20%, but we don't know base. Keep.

Now output:

@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 !important;
        color: #f5f1e8 !important;
        border-radius: 12px;
        box-shadow: 0 2px 6px rgba(196, 69, 54, 0.25), 0 8px 20px -6px rgba(196, 69, 54, 0.35);
        transition: background-color 0.35s ease, box-shadow 0.35s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #fffdf8;
        border-radius: 16px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: background-color 0.4s ease, box-shadow 0.4s ease;
    }
}

Should we add `-webkit-backdrop-filter`?