/* ============================================================
   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 CSS with visual changes only. Let me analyze the original 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;
    }

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

This is a media query, and all the properties inside are layout/typography:
- `text-align: center` — layout (text-align is in the "never change" list)
- `font-size: 0.85rem` — typography (never change)
- `padding: var(--space-md) !important` — padding (can change ±20% but this uses a CSS variable)
- The selectors use CSS custom properties `var(--space-md)` — I can change the value of `--space-md`? No wait, the variables are defined elsewhere. The instruction says "CSS custom properties (--color-*, --shadow-*) values" can change. But `--space-md` is a spacing variable, not a color or shadow variable.

Hmm, this is tricky. The original CSS is only a media query with typography/layout properties. There are no colors, shadows, or radius to change. 

But the task says "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round."

The constraints say:
- ✅ MUST CHANGE: colors, shadows, radius, transitions, gradients, etc.
- 🔒 NEVER CHANGE: text-align, font-size, padding (within ±20%)

But the original CSS only contains `text-align`, `font-size`, and `padding` — all of which are in the NEVER CHANGE category (or constrained).

Wait, there's a nuance. The original CSS references `var(--space-md)`. Since it's a custom property value, but the variable is defined outside this file (probably in a `:root` block that's not shown). I cannot change the variable's definition because it's not in this block. However, I could... no, I can't change the value of `--space-md` in this CSS block because it's not defined here.

The instruction says "CSS custom properties (--color-*, --shadow-*) values" can change. But `--space-md` is not a color/shadow custom property.

So with this file, there is literally nothing I'm allowed to change that would satisfy the "must change" list. The only option is to add decorative properties that don't break layout? But the instructions say "Refresh this CSS visually" and "Keep ALL selectors and layout exactly as-is."

Let me re-read: "All color values: background, color, border-color, fill, stroke, outline-color" — there are none in the original.
"box-shadow" — none.
"text-shadow" — none.
"border-radius" — none.
"gradient colors" — none.
"transition timing" — none.
"filter, backdrop-filter" — none.
"opacity" — none.
"outline styles" — none.
"border-color and border-style (NOT border-width)" — none.
"caret-color, accent-color" — none.

So the original CSS has no visual properties to change. The only approach: I can add new visual properties to the existing selectors (like `border-radius`, `box-shadow`, `background`, `transition`) since that doesn't change layout. But wait — would that be overly aggressive? The task says I must make visual changes.

Hmm, but the system prompt is a framework designed for files that DO have colors. This particular file is a media query with only text-align, font-size, and padding. The safest interpretation: add decorative properties (border-radius, box-shadow, etc.) to the selected elements, while preserving all the original declarations.

But I must be careful: the selector `.app-hero-section .row .col-lg-7` — adding a border-radius or box-shadow to a col could affect layout? No, box-shadow doesn't affect layout. Border-radius doesn't. Background doesn't. Transition doesn't.

However, I need to be conservative. The instructions say "Refresh the visual identity WITHOUT changing layout structure or class names." Adding decorative properties is allowed since it doesn't change layout.

Actually, let me reconsider. Maybe the right move is to keep the existing declarations exactly as-is and add decorative properties. But the constraint "NEVER CHANGE" says padding should be similar ±20%. The original uses `var(--space-md)` — I should keep that reference since the variable is defined elsewhere and I can't know its value.

Let me think about what's the best approach:

Option A: Keep the original CSS unchanged and add decorative properties:
```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        border-radius: 16px;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(...);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 20px;
        box-shadow: ...;
        transition: ...;
    }
}
```

But adding box-shadow to a card might be fine. Adding border-radius to a col-lg-7 — the col has padding inside, so border-radius would show. But it could clip backgrounds? Actually border-radius doesn't clip unless overflow hidden. It just rounds the element's own background. The col-lg-7 might not have a background.

Option B: Change the values that are allowed to change. `font-size` is typography — NEVER CHANGE. `text-align` — NEVER CHANGE. `padding` — can change but within ±20%, and `var(--space-md)` is a reference. I could change `var(--space-md)` to `calc(var(--space-md) * 0.9)`? That changes padding. But padding is in "keep similar values, ±20% maximum." So I could do that. But it's risky and weird.

Hmm. Given the spirit of the task, the user expects the rewritten CSS to have a fresh visual identity. Since the original has no colors/shadows, I should ADD them in a way that enhances the existing elements without changing layout.

Let me check the target style: "masonry-flow" with "airy-rhythm" effect: generous spacing, large border-radius (16-28px), soft pillowy shadows, breathing room.

And the color palette: "Pinterest-like: white cards, soft shadows on light gray bg. Each card may have its own accent strip."

But this is a media query for small screens (max-width: 575.98px). It's the mobile version of presumably a larger CSS file. The elements:
1. `.app-hero-section .row .col-lg-7` — hero section column
2. `.app-hero-section .badge.bg-warning` — warning badge
3. `.contact-channels-section article` — contact channel articles
4. `.contact-quick-section .contact-card` — contact cards

So I can add:
- For the hero col: maybe adjust text-align stays center. Add a subtle text-shadow? No, text-shadow is risky for hero text. Actually text-shadow is allowed but could affect readability. Maybe no.

Actually, let me reconsider the whole thing. This is one "block" of a larger file (块2/2 means block 2 of 2). The file fingerprint is provided. This block only has the media query. The rest of the file presumably has the desktop styles with colors etc. But I only see this block.

Given the input only contains this media query, I should transform exactly this. The way to satisfy "make colors, shadows, radius more distinct" is to add those properties to these selectors.

Let me craft a response:

- Keep the `@media (max-width: 575.98px)` and all selectors exactly.
- Keep `text-align: center;`, `font-size: 0.85rem;`, `padding: var(--space-md) !important;` as-is (they're layout/typography).
- Add visual properties within the rules:
  - `.app-hero-section .row .col-lg-7`: add `border-radius: 24px;` and maybe a soft background? Adding a background to a column could be visually impactful... but the col might not have a background in the original and could look odd. Conservative: add `border-radius` only, or `transition`. Let me add `border-radius: 20px;` and `transition: border-radius 0.3s ease;` Actually transitions don't do much without a state change. 

Wait — maybe better to add decorative-only properties that are safe:
  - For the hero col: nothing really needed. But the mission says change. I could add `text-shadow`? Hmm, risky.

Let me think about the badge `.badge.bg-warning` — this is a warning badge. Original: `font-size: 0.85rem`. I can add `border-radius: 999px; box-shadow: 0 4px 12px rgba(...);` — a pill-shaped badge with shadow. That's a classic visual refresh. The badge typically has a background from `bg-warning`. Adding a shadow and border-radius on mobile is fine.

- For `.contact-channels-section article` and `.contact-quick-section .contact-card`: "Each card may have its own accent strip" — I could add a `border-left: 4px solid` accent? But border-width changes are not allowed (it says border-color and border-style NOT border-width). Actually, adding a new declaration `border-left: 4px solid` would add a border where none existed. The rule says border-width cannot change — but adding a new border that didn't exist is ambiguous. The constraint "NEVER CHANGE: border-color and border-style (NOT border-width)" is about when borders exist. Adding a new border of 4px width would change layout slightly (border is inside the box, so it doesn't change layout if box-sizing is border-box; but it changes the visual appearance). That's too aggressive. Better avoid adding borders.

Instead, for cards: add `border-radius: 24px; box-shadow: 0 8px 30px rgba(...); background: rgba(255,255,255,0.9); backdrop-filter: blur(12px);` — wait, backdrop-filter could affect performance and also changes appearance. But it's allowed. However, changing the card background on mobile might conflict with existing backgrounds. Hmm.

Actually, the safe approach: keep their existing padding, add a soft pillowy shadow and large border-radius, and add `transition: box-shadow 0.3s ease, transform 0.3s ease;` — but `transform` is in the layour list? Let me check: the NEVER CHANGE list includes `flex-direction, flex-wrap...` etc. `transform` is not listed. But adding a transform could change layout? No, transform doesn't affect document flow. But adding a transform to a rule without a hover state does nothing. I shouldn't add transform in the base state.

Let me also consider changing the `padding` slightly within ±20%? `var(--space-md)` — I can't know its value, so I can't compute ±20%. Keep it as is.

Given the target: "airy-rhythm" with large border-radius (16-28px) and soft pillowy shadows. On mobile, large radius still works.

Plan:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 999px;
        box-shadow: 0 6px 20px rgba(236, 147, 55, 0.25);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 28px;
        box-shadow: 0 12px 32px rgba(96, 92, 132, 0.12), 0 4px 12px rgba(96, 92, 132, 0.08);
        transition: box-shadow 0.35s ease, border-radius 0.35s ease;
    }
}
```

But wait — `border-radius: 999px` on a badge could be too much if the badge is shaped like a rectangle; typically badges are pills, so 999px is fine. But if the badge has padding and a background, 999px is a pill. Good.

However, I need to be careful about "transition: border-radius 0.35s ease" — transitions between breakpoints? When resizing, the border-radius would animate. That's allowed. But perhaps transition on box-shadow for cards: if there's a hover state elsewhere that changes shadow, this transition would apply. It's a nice touch.

Actually, I wonder if I should also add an accent strip using a pseudo-element? The instruction says pseudo-classes/elements like `::before` are NEVER CHANGE in terms of selectors, but I could ADD a new pseudo-element rule? The selector list is supposed to be preserved exactly. Adding a new selector like `.contact-card::before` would be adding a new rule that wasn't in the original. The instruction says "Selectors: keep EXACTLY" — meaning all existing selectors must remain unchanged. It doesn't explicitly forbid adding new selectors, but the safer interpretation is: only modify existing rules, don't invent new ones. The mission says "Refresh this CSS visually... Keep ALL selectors... exactly as-is." Adding a new selector isn't keeping one as-is. So avoid.

Also, the `!important` on padding should stay.

Now, the concern: The prompt says "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round." So I need to be decisive. But since the source block has only these three rules, the changes I make to them must be substantial. Adding shadows, radius, and a transition is a decent visual refresh.

But maybe I should also slightly adjust the badge appearance via `box-shadow` using a warm amber tone (matching bg-warning, which is yellow-orange). Let me use a warm gold/amber shadow.

Palette consideration: Pinterest-like: white cards, soft shadows on light gray bg. So shadows should be soft gray/lavender. Use neutral gray shadows `rgba(88, 84, 112, 0.1)`.

For the hero col: maybe add `text-shadow: 0 2px 12px rgba(88, 84, 112, 0.15);`? That's a visual change and doesn't affect layout. But text-shadow on hero text could make it look glow-y. With light gray shadow, it's a subtle depth. Hmm, risky for readability. The instruction says text-shadow MUST CHANGE if present. It's not present, so adding is optional. I'll add a subtle one to the hero column text to justify change.

Actually, let me reconsider: `.app-hero-section .row .col-lg-7` — the `text-align: center` is for text. Adding `text-shadow` to the column would affect all text in that column. Might be okay with a very subtle value. I'll use `text-shadow: 0 2px 16px rgba(45, 50, 80, 0.08);` — very subtle, airy.

Also I could add `caret-color` and `accent-color`? Those rely on form elements; these are not form elements. Adding them would do nothing useful. Skip.

Should I change opacity? Adding `opacity` to elements would require them to fade in/out, which is risky. Skip.

Should I change `transition` from nothing to something? Yes, adding `transition` is a permitted change. But transitions only matter when a property changes (hover, focus, resize). On mobile, `transition` on box-shadow would apply when the element gets hovered (unlikely on mobile). Still, it satisfies the "transition timing" list item and is harmless. Actually, adding a transition for a property that changes at breakpoints (like border-radius) could animate on window resize — that's a nice touch.

Let me also think: should I add `@media (prefers-reduced-motion: reduce)`? That would be adding a new media query, which is an @media query — "conditions only" are never change, but adding new @media? Not in the original, adding would be new. Avoid.

OK here's my final plan:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 2px 16px rgba(45, 50, 80, 0.08);
        border-radius: 24px;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 999px;
        box-shadow: 0 6px 18px rgba(224, 141, 56, 0.28), 0 2px 6px rgba(224, 141, 56, 0.18);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 28px;
        box-shadow: 0 16px 40px rgba(85, 80, 118, 0.12), 0 4px 14px rgba(85, 80, 118, 0.08);
        transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

Wait — should `border-radius` on `.col-lg-7` be there? The column likely contains a container with its own background. Rounding the column itself may have no visible effect, or could look weird if the