/* ============================================================
   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 refresh a small CSS block. It's a media query with three rules. The "original CSS" is quite minimal — it doesn't contain many colors, shadows, etc. It's a responsive media query adjusting text-align, font-size, and padding.

The task is to refresh visually while keeping layout. The target style is "card-mosaic" with "tight-rhythm" variant. However, the CSS only has three rules. I need to preserve selectors exactly:
- `@media (max-width: 575.98px)` — the breakpoint must stay.
- `.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; }`

The thing is—there are no colors, shadows, etc. in the original. The instructions say "Only change colors, shadows, radius, transitions, gradients." But the original has none. I could add decorative properties that don't affect layout? But the rule says I must not change layout properties: "width, height, padding, margin (keep similar values, ±20% maximum)". Padding changes allowed within 20%.

Wait — the constraint says "padding, margin (keep similar values, ±20% maximum)". The original uses `var(--space-md)`. I could change padding to a different value? But it's a custom property. Actually, changing padding would violate layout conservatism. The instructions say keep similar values ±20%. But `var(--space-md)` is a variable; I can't know its value. I could keep it.

The "aggressive" style guide for card-mosaic mentions grid spans, but this CSS doesn't have grids. It's just a media query. I should preserve the layout exactly and only adjust visual properties. Since there are no visual properties, I can add new visual properties that don't break layout (e.g., background-color, border-radius, transitions, box-shadow) — but adding box-shadow to elements could alter layout? No, box-shadow doesn't affect layout. Background color doesn't affect layout. Border-radius doesn't affect layout.

However, adding padding changes would be risky. The instruction says "padding, margin (keep similar values, ±20% maximum)". The original `var(--space-md)` — I could replace with a calc? That seems unnecessary and potentially breaking. Better keep `var(--space-md)` as-is.

Hmm, but the task expects me to "refresh" the visual identity. This block essentially has no visual identity. I think the right move is to preserve the selectors and the layout-relevant declarations, and add subtle visual upgrades: transitions on text alignment? Text-align isn't animatable. Transitions on font-size? Font-size is animatable but the instruction says font-size must not change. The font-size value 0.85rem must stay.

I can add things like:
- For `.app-hero-section .row .col-lg-7`: keep text-align: center; maybe add `background`? No, that would change visuals but could look odd. Conservative approach: just add subtle color/transition where safe.
- For badge: keep font-size: 0.85rem; maybe add border-radius, box-shadow, backdrop-filter? But the badge is `.badge.bg-warning` — adding border-radius would change visual only. I could add `border-radius: 6px`? But the original doesn't specify; the component may have its own border-radius. Adding in media query only affects small screens. That's allowed.

But wait — the instruction: "Only change colors, shadows, radius, transitions, gradients." That means I may change/add those properties. It doesn't say I must add them. However, to produce a meaningful rewrite, I should incorporate the target style.

Let me think about what makes sense for the card-mosaic/tight-rhythm style: vibrant card colors on neutral background, compact spacing, small border-radius (2-6px), subtle shadows.

For the hero section col-lg-7 on mobile: centered text. I could add a subtle text color? Text color isn't specified. The original has no color. I could set `color: var(--text-color, #...)`? But that would override inherited color. Could be acceptable as a visual refresh. But risk: the actual site might have its own color variable. Conservative mode: keep minimal.

Alternative: Add a transition for the badge (e.g., `transition: transform 0.2s ease`? But transform changes might be layout-ish but not layout. However, the instructions list "transition timing, easing, duration" as changeable. Adding transitions is fine. But `transform` isn't listed — adding it could affect visual but not layout. I should be careful: the forbidden list doesn't include transform, but the allowed list doesn't either. The allowed list includes "filter, backdrop-filter", "opacity", "outline styles", "caret-color, accent-color". I should stick to those.

Let me craft a refreshed CSS that preserves the exact selectors and declarations:

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

Refreshed — I can:
1. For `.col-lg-7`: keep text-align, maybe add `background: transparent`? Not meaningful. Add `transition: color 0.2s ease`? Hmm.
2. For badge: keep font-size, add `border-radius: 4px; box-shadow: 0 1px 2px rgba(...); padding-inline: 0.5em;` — wait padding changes? The badge may have its own padding; adding padding-inline in media query would change layout slightly. Too risky. Better avoid padding.
3. For contact cards: keep padding: var(--space-md) !important; maybe add `border-radius: 4px;` and `box-shadow`? But box-shadow might be inherited from base card. Adding could be okay.

Actually, the safest "refresh" is to add `border-radius`, `box-shadow`, `transition`, and color accents to the existing rules without touching layout. But since these are mobile-only overrides, adding colors could conflict with base styles.

I think the expected output should demonstrate the visual refresh. Let me write:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(120, 80, 20, 0.18);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(20, 24, 33, 0.08);
    }
}
```

But wait — adding `color` to the col-lg-7 would change text color; is that a "color value change"? Yes, but the original didn't specify. In conservative mode, adding properties not present could be considered changing visual identity, which is the goal. But it might break design if the hero text had a specific color. However, since we're told to refresh, it's acceptable.

Yet, the instruction says "Only change colors, shadows, radius, transitions, gradients." This implies I shouldn't add other properties. So text-align stays, font-size stays, padding stays. Adding border-radius, box-shadow, transition, background-color, etc., is within those categories.

Hmm, but adding `color` would change color — allowed. Adding `background` — allowed. But the col-lg-7 is a full column; setting a background on a column could create a big colored block — that's a visual identity change but maybe undesirable. The target style says "Vibrant card colors on neutral background / Each card type a different accent." But these aren't cards necessarily.

Given the file is `saishi.css` (tournament/competition), the hero section likely has content. I'll make subtle choices.

I should avoid referencing custom properties that don't exist. The original uses `var(--space-md)`, so the site uses CSS variables. I can define colors via variables, but I shouldn't introduce new custom properties? The allowed list includes "CSS custom properties (--color-*, --shadow-*) values" — meaning I can change values of existing ones, but introducing new ones might not apply. Better use literal colors or existing vars? Since I don't know existing vars, I could use a mix.

Actually, I can add a `:root` block? No — the original file fragment is only the media query. Adding a `:root` block would add selectors outside the media query, which changes the structure. The instruction says "Preserving ALL selectors and layout exactly." Adding new selectors is risky. Keep it within the media query.

Let me finalize with a tight-rhythm card-mosaic feel:

- Badge (bg-warning): small border-radius 4px, subtle warm shadow, maybe a soft gradient background? But bg-warning is a Bootstrap class; overriding background in the media query might not be desired. But it's part of visual refresh. I could add `background: linear-gradient(135deg, #ffb347, #ff8c42);` but that would override Bootstrap's warning color. That's a visual change only. Hmm, but the class is `.badge.bg-warning` — the `bg-warning` utility sets background-color. Overriding it with gradient in media query changes visual. Allowed ("gradient colors and stops"). But it might be too aggressive. 

Since the target is card-mosaic with vibrant colors, maybe give the badge a vibrant gradient and the contact cards distinct accent borders.

But the media query is only for tiny screens (≤575.98px). Adding heavy shadows on mobile might look odd; tight-rhythm suggests "Subtle shadows or none."

Let me craft:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 1px 2px rgba(12, 14, 26, 0.08);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 4px;
        box-shadow: 0 2px 6px -2px rgba(214, 122, 34, 0.45);
        background: linear-gradient(135deg, #ffc24b 0%, #ff9f1c 100%);
        color: #3a2407;
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(16, 20, 34, 0.06);
        transition: box-shadow 0.2s ease, border-radius 0.2s ease;
    }
}
```

Wait, `transform` with `transition` — I added transform in transition but not as a property; that's fine, but I shouldn't allow hover transforms if no hover rule. It's harmless. But the instruction says only change transition timing/easing/duration, not animation names. Adding transition is allowed. However, "transform" is not in the allowed property list; adding transition for transform doesn't change layout.

But I added `background` and `color` to badge — allowed (colors/gradients). Added `text-shadow` — allowed.

Is replacing the badge's background a good idea? `.bg-warning` in Bootstrap uses `--bs-warning-bg` and sets `background-color`. Overriding with `background: linear-gradient(...)` in the media query changes only mobile. Fine.

Should I keep `color`? The badge text color in Bootstrap warning is dark (`--bs-warning-text`). Setting `color: #3a2407` is fine but might duplicate. I can keep it minimal.

One issue: "padding, margin (keep similar values, ±20% maximum)" — I'm keeping `padding: var(--space-md) !important` unchanged, good. The badge font-size stays 0.85rem, good.

Also, `.app-hero-section .row .col-lg-7` — adding text-shadow to a col is fine.

But I want to be careful: the instruction says "No AI-REWRITTEN comments, no markdown." Just CSS.

However, is adding `background`, `color`, `text-shadow`, `border-radius`, `box-shadow`, `transition` to these selectors considered "changing" beyond the original? The instruction's allowed list says: "All color values... box-shadow... text-shadow... border-radius... gradient colors... transition timing... filter/backdrop-filter... opacity... outline styles... border-color/style... caret-color/accent-color... CSS custom properties values." So yes, those are exactly the categories. Good.

Now — should I attempt to incorporate "Grid with mixed spans"? No, because the HTML layout is fixed and this media query doesn't involve grid. Adding grid properties would violate layout. The target style is a guide; I should apply the spirit where possible — vibrant accents, small radius, subtle shadows, dense feel.

Let me make it tighter and ensure no layout-affecting changes:

Final:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 4px;
        background: linear-gradient(135deg, #ffd166, #ff9e2c);
        color: #5a3504;
        box-shadow: 0 2px 6px -2px rgba(245, 158, 11, 0.5);
        transition: box-shadow 0.2s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(15, 23, 42, 0.02);
        transition: box-shadow 0.2s ease, border-radius 0.2s ease;
    }
}
```

Wait — text-shadow on col-lg-7: a white text-shadow might look odd on dark background. But the hero might have a light background. Actually, I don't know. A safer choice: `text-shadow: 0 1px 2px rgba(0,0,0,0.06)` is subtle. But if the text is already dark on light background, adding a dark shadow could slightly muddy. Hmm.

Since the goal is a fresh visual identity and the target is "vibrant card colors on neutral background," maybe I shouldn't touch text color/shadows on the hero without knowing. But the instruction requires a refresh; I can keep it minimal but visible.

Let me reconsider: The primary "visual identity" change in this small block is minor. Maybe the safest approach is to preserve everything and add subtle mobile-specific polish:

- col-lg-7: add `color`? No. Keep text-align only; maybe add `transition`? Text-align not animatable. Skip additional properties to avoid weirdness. But then the output looks nearly identical. The task explicitly says refresh visual identity. I'll add something harmless.

Option: add `accent-color`? Not applicable. `caret-color`? Not applicable.

Could set `opacity`? No.

I think adding a soft text-shadow and a subtle background tint to the centered column is okay. Actually, a better fit: `.app-hero-section .row .col-lg-7` could get `color: var(--bs-body-color, #1e2432);` — but that's redundant.

Hmm. Maybe keep rule 1 unchanged except add `transition`? Text-align doesn't transition but transition property still allowed. Not meaningful.

I'll go with a subtle text-shadow + maybe no color change. For the badge, the gradient accent is the "vibrant card" touch. For contact cards, the mosaic style: small radius + subtle layered shadow.

Let me verify each property against the forbidden list:

- `text-shadow: 0 1px 2px rgba(...)` — allowed.
- `border-radius: 4px` — allowed.
- `background: linear-gradient(...)` — allowed (gradient colors/stops).
- `color: #...` — allowed.
- `box-shadow: ...` — allowed.
- `transition: box-shadow 0.2s ease` — allowed (timing/easing/duration).

Forbidden check:
- Selector `.contact-channels-section article, .contact-quick-section .contact-card` — preserved exactly.
- Media query breakpoint preserved.
- `text-align: center` preserved.
- `font-size: 0.85rem` preserved.
- `padding: var(--space-md) !important` preserved.
- `display`, `position`, `width`, `height`, `margin`, etc. — not touched.

One more thought: The target style mentions "Each card type a different accent." I could give articles vs contact-card different left-border accent colors? But that would require separate selectors. The combined selector has them together; splitting would alter selectors. Keep combined.

I could add `border-left: 3px solid #...` — border-color changes allowed, border-width not. Adding a border where none existed changes layout (box-sizing border-box might handle, but border adds