/* ============================================================
   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;
    }
}

The user wants me to rewrite the CSS in a "conservative mode" - only visual changes, keeping all selectors and layout exactly as-is. The original CSS is a media query block with three rules:

1. `.app-hero-section .row .col-lg-7` - text-align: center (this is layout, so I should keep it)
2. `.app-hero-section .badge.bg-warning` - font-size: 0.85rem (typography, keep)
3. `.contact-channels-section article, .contact-quick-section .contact-card` - padding: var(--space-md) !important (layout, keep similar)

Wait, but the instructions say I must NOT change:
- display, position, grid-template-*, flex-direction
- width, height, padding, margin (keep similar values, ±20% maximum)
- font-family, font-size, font-weight, line-height

So text-align, font-size, padding should stay. But the task is to refresh visual identity. This is a small snippet with only three rules. There's not much color/shadow/radius to change here.

However, I can still apply visual changes where possible without breaking layout. Let me look at what I CAN change:

1. `.app-hero-section .row .col-lg-7` - text-align: center is layout/text-alignment, listed as "NEVER CHANGE" (text-align, vertical-align). So keep.

2. `.app-hero-section .badge.bg-warning` - font-size is typography, listed as NEVER CHANGE. So keep. But maybe I could add something like background color? No, the selector is `.badge.bg-warning` which has a Bootstrap bg-warning class. I could add a visual enhancement like a soft shadow or border-radius, but the rule only specifies font-size. I shouldn't invent new properties? Actually the task says "Only change colors, shadows, radius, transitions, gradients" - I can add properties that are visual, as long as they don't change layout. But adding box-shadow to a badge could be fine. However, the original rule only has font-size. I could keep font-size and add a box-shadow or something? The instructions say "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

Hmm, but if I add a box-shadow to that selector, it changes the visual. That's allowed. But is it wise? The original had no shadow. I could add one to enhance.

3. `.contact-channels-section article, .contact-quick-section .contact-card` - padding: var(--space-md) !important. Padding is layout, must keep within ±20%. Actually it uses a CSS variable --space-md. I shouldn't change the variable value? Actually changing --space-md value could affect layout. But I could change it within ±20%. But this variable is used elsewhere likely, so changing it globally might affect layout elsewhere. Better keep the padding as-is.

Wait, but there's nothing to change visually in the original CSS except... let me think. The original is only a media query. There are no colors, no shadows, no radius, no transitions. So the safest approach is to keep the original rules as they are, since they're already layout-safe. But the task wants me to refresh visually.

Hmm. Let me re-read: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

Given the original has no visual properties to change, I have a few options:
1. Add visual properties that don't affect layout (e.g., box-shadow, border-radius, transitions).
2. Change the `!important` padding? No, padding is layout.

Let me think about what I can add:

For `.app-hero-section .row .col-lg-7` - it only has text-align: center. I could add a transition? That doesn't make sense for text-align. Maybe add nothing.

For `.app-hero-section .badge.bg-warning` - font-size. I could add a box-shadow and border-radius to make it pop, and maybe a transition. Visual only.

For `.contact-channels-section article, .contact-quick-section .contact-card` - padding. I could add border-radius, box-shadow, transition. Visual only.

Wait but the original padding uses var(--space-md). If I want to keep within ±20%, I should keep the same var() reference. I can keep it exactly.

Actually, the constraint says "padding, margin (keep similar values, ±20% maximum)". So keeping the same is fine.

But adding box-shadow, border-radius, and transition to these cards would change the visual identity. That fits the "dense-dashboard" style with "soft-shadows" effects.

Let me design:

Target style: dense-dashboard
- Cool grays #1e293b, #334155, accent blue #3b82f6
- White cards on slate background

Effect variant: soft-shadows
- Multi-layer soft shadows: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)
- Large border-radius (12-24px)
- Smooth transitions (0.3-0.5s ease)

So I'll add:

```css
@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;
        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2), 0 8px 16px -4px rgba(30, 41, 59, 0.15);
        border-radius: 999px;
    }

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

Wait, but adding `transform` in transition is fine, but adding `transform` on hover would be a new property. I should not add a hover rule because the selector list would change... Actually I could add `:hover` but the instructions say keep pseudo-classes as-is. So I shouldn't add new selectors. But adding `transition` with transform is fine even if I don't add a hover transform.

Actually, let me be careful. The instructions say:
- 🏷️ SELECTORS: keep EXACTLY. Pseudo-classes (:hover, :focus, ::before, ::after) - keep as-is. So I should not add new pseudo-classes.

So I'll keep the selectors exactly as-is and only add visual properties within those rules.

Let me refine:

For badge.bg-warning - a warning badge is typically yellow/amber. Using accent blue for shadow might not match. But the palette says accent blue #3b82f6. However, bg-warning in Bootstrap is a yellowish color. A blue shadow on a yellow badge may look odd. Maybe use a warm shadow: rgba(245, 158, 11, 0.25)? But the instructions want a fresh palette. Hmm, the palette is "cool grays #1e293b, #334155, accent blue #3b82f6". Since the badge already has bg-warning class (yellow), I'll shadow with a neutral dark gray and a touch of amber.

Actually, let's keep it neutral: slate shadows.

For the contact cards, white cards on slate background. Add soft multi-layer shadows and large radius. Those are white cards presumably. Good.

Also the `.app-hero-section .badge.bg-warning` - I could add a soft shadow to make it stand out, and maybe a subtle background gradient? But bg-warning is a Bootstrap utility; adding background would override it. I could add `background: linear-gradient(...)` but that would change the badge color, which might be undesirable since it's a warning badge. Hmm, but the task is visual refresh. Since this is a "warning" badge, changing it to accent blue might lose meaning. Better keep the warning color but add a subtle shadow.

Actually, let me consider the "dense-dashboard" palette more deeply:
- Background slate: #1e293b, #334155
- Cards: white
- Accent: #3b82f6

For a warning badge, Bootstrap's --bs-warning is #ffc107. On a dark slate hero, a yellow badge with a soft shadow would look good.

I'll add:
```css
box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3), 0 8px 16px -4px rgba(30, 41, 59, 0.4);
border-radius: 999px;
```

Hmm, but "soft-shadows" variant says "0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)". I'll adapt those for the small badge.

Also transition: "Smooth transitions (0.3-0.5s ease)". I can add transition to the badge too, though without hover it won't do much. Still fine.

Now, for `.app-hero-section .row .col-lg-7` - there's nothing visual to change. I'll just keep it as-is. I could add a text-shadow? That would be visual. But text-align center is the only property. Adding text-shadow to a hero section text could be nice, but it might affect all text in that column. The rule is for the column itself. Hmm, text-shadow would apply to the text inside. That could be part of the visual identity. But it might look bad on all text. I'll leave it as-is.

Actually, wait - the original file fingerprint shows this is part of a larger file (块2/2 = block 2 of 2). The original CSS snippet only contains this media query. So I only need to rewrite this snippet. The rest of the file is not shown. So I should preserve this media query.

Since the original has no colors to change, I'll add visual properties to the two selectors that can support them (badge and contact cards). And keep the text-align rule intact.

Let me also consider: the padding uses `var(--space-md) !important`. I shouldn't change that. But I could add border-radius, box-shadow, transition.

Should I use CSS variables in the shadows? I could define custom properties, but that might conflict with existing :root or could be scoped. Better to use literal values to avoid affecting other rules.

Let me also consider the "dense-dashboard" layout pattern: "Tight multi-column grids: repeat(4, 1fr)..." but that's for the overall layout, not this media query. This media query is for mobile (max-width: 575.98px). So small screens. I should keep spacing compact.

Let me write the final CSS:

```css
@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;
        border-radius: 999px;
        box-shadow: 0 2px 4px rgba(30, 41, 59, 0.08), 0 8px 16px -4px rgba(30, 41, 59, 0.18);
        transition: box-shadow 0.35s ease;
    }

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

Wait - should I add `transform` in transition without a transform on the element? It's harmless. But to be safe, maybe just `transition: box-shadow 0.4s ease`. The effect variant says smooth transitions. Adding a transition on box-shadow is enough.

Actually, let me reconsider adding border-radius to the badge. Bootstrap badges often have pill shape already (border-radius: 50rem). But the original CSS snippet doesn't include that. Adding it is safe.

Let me think about whether adding border-radius to the contact cards might be considered "layout". Border-radius is purely visual, explicitly allowed. Good.

Also, "Large border-radius (12-24px)" - 16px fits.

Now, for the colors in shadows, the soft-shadows effect uses rgba(0,0,0,...). The dense-dashboard palette uses cool grays #1e293b, #334155. I'll use rgba(30, 41, 59, ...) for a cooler shadow tint. That fits "cool grays".

Let me refine the badge shadow. The badge is on a hero section, likely over a dark background. A subtle dark shadow might be invisible on dark. Maybe a glow with the warning color? Let me use a combination:

```css
box-shadow: 0 4px 8px rgba(255, 193, 7, 0.25), 0 8px 16px -4px rgba(30, 41, 59, 0.2);
```

That gives a warm glow. Hmm, but the instructions emphasize "fresh palette" with cool grays and accent blue. But a warning badge is naturally amber. I think a warm glow is appropriate for a warning badge.

Alternatively, to keep it neutral, I'll use a dark slate shadow plus a subtle amber glow. Let me pick:

`box-shadow: 0 2px 6px rgba(30, 41, 59, 0.15), 0 6px 12px -2px rgba(255, 193, 7, 0.25);`

Actually, let me keep it simpler. I'll use the soft shadow palette as given: `0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)` but scaled down for a small element. Something like `0 2px 4px rgba(30, 41, 59, 0.06), 0 8px 16px -4px rgba(30, 41, 59, 0.15)`.

Also for transitions, the variant says 0.3-0.5s ease. I'll use 0.35s / 0.4s.

Now, should I also add a subtle background or gradient to the contact cards? The cards are likely already white. Adding a gradient background would change the card color. I could add a subtle gradient from white to a very light slate. That would be a visual change without layout impact. But it might look odd if the card already has a background defined elsewhere. Since I don't see the rest of the CSS, adding a background could override a more specific rule. The selector `.contact-channels-section article` has specificity 0,1,1 + element = 0,1,1? Actually `.contact-channels-section article` = 0,1,1. If elsewhere `.card` sets background, mine would apply. But it's in a media query, so it would only apply on mobile. Hmm.

To be safe, I'll only add visual properties that are clearly additive: border-radius, box-shadow, transition. These won't override layout or typography.

Let me also think about whether I need to keep the `!important` on padding. Yes, keep exactly.

Now, the output format: only the rewritten CSS, no markdown fences, no explanations, first character = first CSS character.

Let me also consider whether adding `border-radius` to the badge might conflict. Bootstrap `.badge` has `border-radius: 0.375rem` by default. Adding 999px would make it pill-shaped. That's a visual change. Fine.

Wait, but I need to be careful: the original rule `.app-hero-section .badge.bg-warning` only had `font-size: 0.85rem`. If the badge elsewhere uses `bg-warning` with its own styling, my additions could change it on mobile only. That's the point of a visual refresh. Good.

Let me finalize the CSS:

```css
@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;
        border-radius: 999px;
        box-shadow: 0 2px 4px rgba(30, 41, 59, 0.06), 0 8px 16px -4px rgba(30, 41, 59, 0.15);
        transition: box-shadow 0.35s ease, transform 0.35s ease;
    }

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

Hmm, adding `transform` in transition without a transform property is fine but might trigger a potential transition of transform on hover if there's a global hover rule. That's fine.

Actually, let me reconsider the badge shadow - using cool slate gray