/* ============================================================
   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 for visual identity only, following the "card-mosaic" target style with "flat-solid" effect variant. 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 with three rules. The constraints:
- Cannot change selectors
- Cannot change layout properties (display, position, etc.)
- Cannot change typography (font-size, etc.)
- Can change colors, shadows, radius, transitions, gradients

Let me look at what's in the original:
1. `text-align: center;` - this is layout/typography, cannot change
2. `font-size: 0.85rem;` - typography, cannot change
3. `padding: var(--space-md) !important;` - padding, can change within ±20% but it uses a CSS variable. Hmm. The variable value could be changed if I define it, but I don't see it defined in this snippet. Actually, padding is a layout property that I should keep similar (±20% maximum). Since it references `var(--space-md)`, I should probably keep it as-is or adjust it slightly. But the instruction says padding/margin must stay within ±20% of input. Changing `var(--space-md)` to something else would be changing the value. But the safest is to keep it as `var(--space-md)` since I don't know the value of `--space-md`.

Actually, wait. The instructions say:
- "padding, margin (keep similar values, ±20% maximum)"

So I can change padding values within 20%. But `var(--space-md)` is a reference. I could change it to a different value, but that might risk breaking layout. Let me think...

Actually the task says "Only change colors, shadows, radius, transitions, gradients." The original CSS has no colors, shadows, radius, transitions, or gradients. It's just text-align, font-size, and padding.

Hmm. This is tricky. The original CSS is purely layout/typography. The target style wants vibrant card colors, flat-solid no shadows, minimal radius.

Since the original has no color-related properties, what can I change? Let me re-read the constraints:

"Refresh the visual identity WITHOUT changing layout structure or class names."

"✅ YOU MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow...
  • text-shadow
  • border-radius
  • gradient colors and stops
  • transition timing, easing, duration
  • filter, backdrop-filter
  • opacity
  • outline styles
  • border-color and border-style (NOT border-width)
  • caret-color, accent-color
  • CSS custom properties (--color-*, --shadow-*) values"

So I could add new visual properties to these selectors, as long as I don't change the layout ones. Adding `border-radius`, `background-color`, `box-shadow: none`, etc. could enhance the visual identity.

But the "flat-solid" variant says "box-shadow: none everywhere". So I should add `box-shadow: none` where shadows might exist.

Also "minimal radius (0-6px)" - so I could add border-radius: 6px to the cards.

Let me think about what's appropriate. The original CSS is inside a media query for max-width 575.98px (mobile). The selectors target:
1. `.app-hero-section .row .col-lg-7` - a column in hero section
2. `.app-hero-section .badge.bg-warning` - a warning badge
3. `.contact-channels-section article` and `.contact-quick-section .contact-card` - contact cards

For the card-mosaic target style: vibrant card colors on neutral background, each card type a different accent. Flat-solid: no gradients, no shadows, minimal radius.

So I could:
- Add `background-color` to the hero column? No, that would be weird since it's a column.
- Add `border-radius` to the badge.
- Add `background-color`, `border-radius`, maybe `border` to contact cards.

But wait - the instruction says "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." This means I should only modify visual properties, but I can add new visual property declarations to existing rules. The selectors must stay exactly.

Let me think about what a reasonable "refresh" would be here:

For `.app-hero-section .row .col-lg-7`:
- It's a text column. Maybe add a background color? That could affect layout appearance but not layout structure. However, adding background to a column might look odd. Maybe add a subtle background or accent. Actually, the target style says "Vibrant card colors on neutral background". So perhaps give the hero column a card-like background with a subtle color and minimal radius.

Hmm, but the column is inside `.row`, likely containing text content. Adding a background could change the look significantly. Let me be conservative but still make visual changes.

For the badge `.app-hero-section .badge.bg-warning`:
- Bootstrap's `bg-warning` typically has a yellow background. I could override with a new accent color and border-radius.

For the contact cards:
- Add background colors, borders, border-radius.

Let me also consider: "CSS custom properties (--color-*, --shadow-*) values" - I can change custom property values. But the original uses `var(--space-md)` which is a spacing variable, not a color/shadow variable. I shouldn't change that since it's a layout value.

Actually, I could alter the padding value slightly. The instruction says padding can vary ±20%. If `--space-md` is, say, 24px (typical Bootstrap spacing md = 24px? Actually Bootstrap's spacer values... let me think. Bootstrap 5: --bs-spacer-* ... Actually `--space-md` isn't a Bootstrap default. It might be a custom property. I don't know its value. Rather than risk it, I should keep `var(--space-md)` as-is. But that means I'm not changing padding at all. That's fine because padding is a layout property that I'm allowed to keep.

Wait, actually I should reconsider. The instructions say under "NEVER CHANGE": "padding, margin (keep similar values, ±20% maximum)". So I can keep them identical. That's acceptable.

So my plan:
- Keep all existing declarations as-is (text-align, font-size, padding).
- Add visual properties to each rule: border-radius, background-color, border, box-shadow: none (per flat-solid variant).

But wait - if I add `background-color` to `.app-hero-section .row .col-lg-7`, would that break anything? It's a color change/add, which is allowed. But it might change the visual appearance in a way that's intended. The target style is "card-mosaic" with vibrant cards on neutral background. Giving the hero column a card-like background could be appropriate.

Actually, let me be careful. The `col-lg-7` is a Bootstrap column. On mobile (max-width 575.98px), this rule applies. Giving it a background might look like a card. That could be a nice touch.

Let me pick a color palette for "card-mosaic" flat-solid:
- Neutral background: something like #f8f9fa or #f5f6f8
- Card accent 1 (hero column): maybe a soft blue #e3f2fd or a vibrant accent? Flat-solid says solid colors, vibrant. But this is a large column, vibrant might be too much. Let me use a muted accent.
- Badge: vibrant accent like #ff6b35 (orange) or #7c4dff (purple)
- Contact cards: different accents each

Let me define a coherent palette:

Target style "card-mosaic" says:
- Vibrant card colors on neutral background
- Each card type a different accent

So:
- `.app-hero-section .badge.bg-warning` → vivid orange/coral: `#f0652f` or `#ff7a45`
- `.contact-channels-section article` → one accent, e.g., teal/cyan: `#0ea5e9` or `#14b8a6`
- `.contact-quick-section .contact-card` → another accent, e.g., violet: `#8b5cf6`

But these elements likely contain text. If I set a solid background color, I need to ensure text contrast. Since I can't change text color? Wait, I CAN change color values. Color is in the "must change" list. So I can set text color to white on vibrant backgrounds.

Hmm, but if these cards have existing text colors (from other stylesheets), overriding with `color: #fff` would ensure readability. But adding `color` might change the look. It's allowed though: "All color values: background, color, border-color..."

Let me also consider border-radius per "flat-solid: minimal radius (0-6px)". So `border-radius: 6px` or `4px`.

Flat-solid also says "box-shadow: none everywhere". So I should add `box-shadow: none` to the card rules.

Let me also consider border: "Defined by color contrast and borders". So I could add a subtle border to cards: `border: 1px solid #e2e8f0` or similar. But wait, "border-color and border-style (NOT border-width)" - can change border-color and border-style, but NOT border-width. So if the original has no border-width, adding `border: 1px solid ...` sets a border-width, which is not allowed? Actually, the instruction says I can change border-color and border-style, not border-width. So adding `border-width: 1px` would be a new property. Hmm.

"border-color and border-style (NOT border-width)" — this means when the original CSS has border declarations, I can change the color and style but not the width. If there are no border declarations originally, adding a border with a width might be considered adding a new property that could affect layout (border takes space in the box model unless box-sizing: border-box). Since the instruction says layout must not change, adding a border-width could change the effective size of the element. But if box-sizing is border-box globally, it wouldn't change layout. Still, to be safe, I should avoid adding border-width. I can use `outline` instead? Outline doesn't affect layout. But outline is also in the changeable list.

Alternatively, I could use `box-shadow: none` and rely on background colors only. That's safer.

Actually, re-reading: "✅ YOU MUST CHANGE (visual identity only)" lists things I should change. It says "All color values: background, color, border-color..." — this seems to say that wherever there are color values in the original, I must replace them with new colors. Since the original has no color values, I'm not strictly required to add any. But the task is to "refresh this CSS visually". Adding visual properties would achieve that. However, I must be careful not to violate the "never change" constraints.

The safest approach:
1. Keep all original declarations exactly.
2. Add new visual property declarations that don't affect layout:
   - `background-color` (doesn't affect layout)
   - `color` (doesn't affect layout)
   - `border-radius` (visual only; doesn't change box size)
   - `box-shadow: none` (visual only)
   - `outline` with color/style (doesn't affect layout)

But adding `background-color` to `.col-lg-7`... let's think if that's weird. The hero section's column with text centered. On mobile, giving it a soft background could make it a card. That aligns with "card-mosaic".

Actually, hold on. Let me reconsider whether adding properties is within scope. The instruction says:

"🎯 YOUR MISSION: Refresh the visual identity WITHOUT changing layout structure or class names. The HTML is FIXED — only colors, shadows, and decorative properties may change."

So "colors, shadows, and decorative properties may change" — this implies I can modify existing color/shadow properties and potentially add new decorative ones. Adding background-color, border-radius, box-shadow are decorative properties. They don't change layout. So it's fine.

Let me now design the new CSS.

Original:
```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;
    }
}
```

New version with visual refresh:

For the hero column:
- Maybe give it a subtle neutral background to make it stand apart? Or a soft accent. Since target palette is vibrant card colors on neutral background, the hero column could be a large card with a pale tint. Let me use a soft peach or cream to complement the vibrant badge.
- Add border-radius: 6px (flat-solid minimal radius)
- Add box-shadow: none (flat-solid)
- Maybe add a subtle border? Can't add border-width. Use outline? Outline won't affect layout. But outlines on a column might look odd. Actually, let's skip border for the column.

For the badge:
- bg-warning default is yellow (#ffc107). Let's override with a vibrant accent: #f97316 (orange) with white text.
- border-radius: 4px
- box-shadow: none

For the contact cards:
- `.contact-channels-section article`: background #0ea5e9 (sky blue) or a vibrant teal. But articles contain content; white text would be needed.
- `.contact-quick-section .contact-card`: different accent, e.g., #8b5cf6 (violet) or #ec4899 (pink).
- border-radius: 6px
- box-shadow: none
- Maybe color: #fff for text contrast.

But wait - if the contact cards contain icons and text, setting `color: #fff` on the entire article/card would affect all text inside, making links white too. That might be fine if the background is dark/vibrant. But this could be a drastic change. However, it's a "refresh" and the target style calls for "vibrant card colors". Flat-solid means solid backgrounds, so contrast matters.

Hmm, but I need to be careful: these elements might already have background colors from other CSS rules that are outside this file. By adding background-color here, I'm overriding them in this media query. That's intended.

Let me also add a `caret-color` or `accent-color`? Not relevant here.

Let me consider opacity/transitions. I can add a transition for visual smoothness. But transitions on mobile... could be nice. "transition timing, easing, duration" is in the changeable list. I could add `transition: background-color 0.3s ease, border-radius 0.3s ease, transform 0.3s ease;` but transform is a layout-ish property? Actually transform doesn't affect layout flow, but the instruction says "position, z-index, overflow..." are protected. Transform isn't listed. But "layout structure" - transform creates a new stacking context and visually moves/transforms elements. Adding transform transitions might be risky. Let me just do background-color and box-shadow transitions. Actually flat-solid has no shadows. So just background-color transition. But wait, flat-solid says "box-shadow: none everywhere" - so no shadows to transition.

Let me keep it simple and safe. Add minimal decorative properties.

Here's my draft:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background-color: #fef3e2;
        border-radius: 6px;
        box-shadow: none;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #f97316;
        color: #ffffff;
        border-radius: 4px;
        box-shadow: none;
    }

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

Wait, but the two selectors share the same rule. If I want each card type to have a different accent color, I need to split them or use separate rules. But the instruction says preserve selector lists. I can't split the selector list because that would change the selector structure? Actually, splitting `A, B { ... }` into `A { ... }` and `B { ... }` changes the CSS structure but not the HTML or the set of matched elements. The instruction says "Selector lists (commas)" must stay unchanged. So I should keep the comma list together. But I can add a separate rule for each specific selector later in the media query. Hmm, but that would add new rules with selectors that are subsets. That might be acceptable, but it also changes the CSS structure.

The instruction: "🏷️ SELECTORS (CRITICAL - HTML is fixed): • Selector lists (commas)" — it's listed under "NEVER CHANGE". So the selector list `A, B { ... }` must remain as-is. I can keep it, but I can also add new rules below. However, adding new rules introduces new selectors that weren't in the original. The requirement says "Preserving ALL selectors" — meaning all original selectors must be preserved, not that I can't add new ones? "Every selector character-for-character preserved?" The self-check says "✓ Every selector character-for-character preserved?" This suggests the selectors in the output must match the input exactly. If I add new rules, those selectors would be additional, not replacing. But "preserved" might mean the original ones are still there. Adding extra ones is probably fine