/* ============================================================
   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 visual identity while preserving all selectors and layout. The original CSS is small:

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

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

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

This is a media query with some rules. Target style masonry-flow and soft-shadows. But the original CSS has no colors, shadows, border-radius, transitions, gradients. Only text-align, font-size, padding. Those are layout/typography. According to constraints, text-align is layout (can't change), font-size is typography (can't change), padding is layout (can keep similar). But we need to refresh visual identity. Since there are no color properties, we might need to add some? The instructions say "Only change colors, shadows, radius, transitions, gradients." But we can't add new properties? The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Actually we can add decorative properties? The original CSS has no decorative properties. The constraint says "Only change colors, shadows, radius, transitions, gradients." That means we can only modify those property values that already exist? Or we can add these properties to existing selectors? The instruction is ambiguous.

Let's re-read: "Refresh the visual identity WITHOUT changing layout structure or class names. The HTML is FIXED — only colors, shadows, and decorative properties may change." Then "✅ YOU MUST CHANGE (visual identity only): All color values, box-shadow, text-shadow, border-radius, gradient colors, transition timing, filter, opacity, outline styles, border-color/border-style, caret-color, accent-color, CSS custom properties."

So we should change/add those properties where appropriate. But we cannot change layout properties. In the original, there are no visual properties. So we can add visual properties to the existing selectors. The selectors are within a media query. We can add box-shadow, background-color, border-radius, transition, etc. to these elements. The target style: masonry-flow is about layout pattern but aggressive only; we are conservative, so layout unchanged. The effect variant: soft-shadows. We should add multi-layer soft shadows, large border-radius, smooth transitions.

We need to ensure we don't break the layout. Adding background, shadow, border-radius shouldn't affect layout much if box-sizing is border-box? But we don't know. Padding remains same. Border-radius won't affect layout. Box-shadow doesn't affect layout. Background doesn't. Transition doesn't.

But the elements are:
- .app-hero-section .row .col-lg-7 (a column in hero)
- .app-hero-section .badge.bg-warning (a badge)
- .contact-channels-section article (articles in contact channels)
- .contact-quick-section .contact-card (contact cards)

The media query is for max-width 575.98px. At small screens, we might want to give cards a softer look. We can add:
- For .contact-channels-section article and .contact-quick-section .contact-card: background-color: white; border-radius: 16px; box-shadow: multi-layer soft shadow; transition: transform 0.3s ease, box-shadow 0.3s ease; maybe hover? But we can't add pseudo-classes? Actually we can add :hover? The instruction says pseudo-classes are to keep exactly, but can we add new ones? It says "Selectors: keep ALL selectors exactly as-is". That likely means we cannot add new selectors. So we can't add .contact-card:hover. We can only modify existing rules.

Could add background-color, border-radius, box-shadow to existing selectors. Need to be careful with .app-hero-section .badge.bg-warning: it's a warning badge, maybe we can change background color? But bg-warning is a Bootstrap class with !important maybe. The original CSS only changes font-size. We could add border-radius, box-shadow, etc.

But the task says "Only change colors, shadows, radius, transitions, gradients." So we can add those properties. The output should be full CSS, preserving existing properties exactly? "Preserving ALL selectors and layout exactly" - we should keep the original properties and add new decorative ones, or modify values if they are decorative. The original has text-align and font-size and padding. Those are not decorative, so leave unchanged. Add new decorative properties to each rule.

However, the instruction says "Only change colors, shadows, radius, transitions, gradients." That implies we should not add properties that aren't in that list. But we can add those specific properties. So we can add background-color (color), box-shadow, border-radius, transition, etc.

Let's craft a refreshed version:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        /* visual: maybe text-shadow? background? but it's a column, adding background might be undesirable */
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 50rem;
        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.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: rgba(255,255,255,0.9);
        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: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
        backdrop-filter: blur(8px);
    }
}

But note: backdrop-filter adds visual effect, allowed? It's in the list. Good.

Also we could add a subtle background to the column? But adding background to col-lg-7 might change look but not layout. Since it's a column inside hero, adding background might create a card-like block. But the target style is white cards on light gray bg. At small screens, maybe the hero column becomes center-aligned text. Adding background there might be odd. We could add color to text? The original doesn't define color. We could add color: #333; or something. But "color" is allowed. Let's think.

The instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must change. But there are none originally. So we can introduce them. We should produce a fresh palette. The target palette: Pinterest-like: white cards, soft shadows on light gray bg. Since the CSS doesn't control background of body, we can only affect these elements. Add background-color: #fff to cards.

Need to consider that .contact-channels-section article may be a card already; adding border-radius and shadow will enhance.

Also we might add a subtle accent strip? That would require ::before or border-left. But we can't add pseudo-elements? The selectors list says pseudo-classes are to keep exactly. We cannot add new selectors, so no ::before. Could use border-left? That's a visual property, but it changes border style/color. We can add border-left: 4px solid color? But border-width cannot change? The restriction: "border-width" cannot change. Actually it says "border-color and border-style (NOT border-width)" can change. So we can't add a border width if there is no existing border. But we can use box-shadow inset as an accent strip. E.g., box-shadow: inset 4px 0 0 #ff6b6b, 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12); That creates a colored strip effect. Nice.

Let's design a cohesive palette.

Choose:
- Card background: #fff
- Card accent: #ff5a5f or #e84c3d? Pinterest red: #e60023. Let's use #e60023 as accent strip.
- Text color: #333? But we don't need text color.
- Badge background: maybe keep warning yellow but enhance with shadow. We can set background-color: #ffc107 (Bootstrap warning) and color: #212529. But the class bg-warning already sets background. We can override? Might be okay.
- Hero column: maybe add color: #2d2d2d; text-shadow: 0 1px 2px rgba(0,0,0,0.05)? But text-shadow is allowed. However, text-align is center, adding text-shadow could make it weird. Could add a subtle drop shadow.

But let's be careful: The original CSS is only inside a media query for small screens. Adding box-shadow and border-radius to badge and cards is good.

We need to preserve the exact selectors and the existing declarations. We can reorder? Probably fine.

Also, the instruction says "transition timing, easing, duration" can change. We can add transition property.

Let's produce the CSS with new decorative properties.

One thing: The media query already has a rule for .contact-channels-section article and .contact-quick-section .contact-card with padding. We can combine and add more declarations.

Output must contain only CSS, no markdown. First character = CSS. No comments.

Let's write:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ffd166;
        color: #7a4d00;
        border-radius: 50rem;
        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.3s ease, transform 0.3s ease, background-color 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border-radius: 16px;
        box-shadow: inset 4px 0 0 #e60023, 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, transform 0.4s ease, background-color 0.4s ease;
        backdrop-filter: blur(6px);
    }
}

But note: adding inset box-shadow changes visual layout? No, box-shadow doesn't affect layout. It may be clipped if overflow hidden, but okay.

However, the instructions say "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)" so multi-layer is good. Also "border-radius (visual rounding only)" okay.

Need to ensure we don't change padding values. We keep same padding. Good.

But wait: The original .contact-channels-section article and .contact-quick-section .contact-card have padding: var(--space-md) !important. That's a layout property. We keep it exactly. We add background, border-radius, box-shadow, transition, backdrop-filter. Fine.

The hero column: we added color and text-shadow. But is that overreach? It is visual. But maybe adding color to a column could affect text readability. It's okay. However, the target palette is white cards on light gray. The hero section likely already has styles. Adding text-shadow may be odd. Perhaps better to avoid adding text-shadow to the column. Since there were no visual properties, we could add a subtle gradient to the background? But that might create a block. Maybe leave it minimal? But the task asks to refresh visual identity. The hero column may not need changes. But we must change something? "You MUST CHANGE (visual identity only): All color values..." So if there are no color values, we can't change. But we can add.

Let's consider the possibility that this file is only a fragment of a larger CSS. The original file "saishi.css" has many blocks. This is block 2/2. So we are only rewriting this media query. We should only output this media query. The layout at small screens should be preserved. Adding visual properties to the column could be acceptable. But we shouldn't add too much.

Maybe better to add a soft shadow to the badge and cards, and set a subtle background gradient on the cards. For the hero column, we can add a text-shadow with very subtle soft shadow to match "soft-shadows" effect. Let's do that.

One concern: `backdrop-filter` can be expensive and might not be supported. But allowed. We can also omit it to be safe. The target effect is soft-shadows, not glassmorphism. I'll include a very subtle backdrop-filter or skip. Since allowed, it's fine. But to be conservative, maybe skip backdrop-filter to avoid altering background clarity. Actually "filter, backdrop-filter" must be changed if present. Not present, so can add. But adding backdrop-filter to article with background-color makes no sense because the card already has opaque background. If background-color is fully opaque, backdrop-filter won't show. We could use rgba background to let blur show. But then cards would be translucent. Pinterest cards are opaque white. So use solid white. Then backdrop-filter is useless. Remove it.

Let's refine:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2c3e50;
        text-shadow: 0 2px 4px rgba(255,255,255,0.8);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ffe08a;
        color: #6b4e00;
        border-radius: 50rem;
        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.3s ease, transform 0.3s ease, background-color 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border-radius: 16px;
        box-shadow: inset 4px 0 0 #e60023, 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, transform 0.4s ease, background-color 0.4s ease;
    }
}

But wait, if we add color to .col-lg-7, the original CSS doesn't define color. This is okay.

Also the badge: using background-color overrides Bootstrap warning yellow. Maybe better to keep original yellow and just add shadow. But the instruction says change color values, so it's fine to change. We need a fresh palette. The palette: Pinterest-like, with white cards and light gray bg. The warning badge: maybe soft lemon. Let's use #ffd166 with dark text.

Need self-check: selectors preserved exactly? Yes. display, position etc. unchanged. width/height/margin unchanged. Padding kept exactly. Font family/size/weight/line-height unchanged. We changed color properties. Shadows redesigned. Border-radius added. No AI marker comments.

Potential issue: In the media query, the selector `.app-hero-section .badge.bg-warning` is a compound class with bg-warning. Bootstrap's `.bg-warning` has `background-color: #ffc107 !important;`. Our rule has no !important, so Bootstrap's !important wins. To change the background, we'd need !important. But the instruction says we can change color values. We can add !important? That could be considered layout? No, it's fine. But original CSS didn't have !important for badge. If we add !important, that changes specificity/cascade, but not layout. It might be acceptable. But to be safe, maybe avoid trying to override Bootstrap's background. Instead, just add box-shadow and border-radius. But the target style says fresh palette. We could leave badge as is and just enhance with shadow. The instruction says change all color values in the file. There are no color values in the original file. So we don't need to change non-existent values. We can add new colors, but we don't have to override existing external colors. However, adding background-color to badge without !important may not work. That's okay; the shadow and radius still apply.

Maybe better to set background-color with !important to ensure visual change. But the instruction says "preserving ALL selectors and layout exactly" — adding !important doesn't change selector or layout. It might be okay. Let's check: The original `.badge.bg-warning` rule is in a media query and only sets font-size. We can add `background-color: #ffe08a !important;` to ensure it applies. But that might be too aggressive. Yet the task is to refresh the visual identity, so it's appropriate.

Let's decide: Use !important only on background-color? But then we also need color with !important if Bootstrap sets it. Badge default color is white? Actually bg-warning in Bootstrap