/* ============================================================
   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 CSS in conservative mode. The file is "assets/css/saishi.css#块2/2" (block 2/2). The original CSS is:

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

I need to keep all selectors and layout exactly. The target style is "horizontal-strips" and variant "glow-effects".

Constraints:
- Only change colors, shadows, radius, transitions, gradients, etc.
- Cannot change layout: display, position, width, height, padding, margin (can change within ±20%), gap, etc.
- Cannot change typography: font-size, font-weight, etc.
- Cannot change selector names.

The original CSS has:
- `text-align: center;` — this is a layout/text-align property. Can I change it? The forbidden list includes text-align? Let me check: "📐 LAYOUT ... text-align, vertical-align" is in the NEVER CHANGE list. So text-align must stay.
- `font-size: 0.85rem;` — typography, cannot change.
- `padding: var(--space-md) !important;` — padding is layout, keep similar ±20%. Original uses a CSS variable `--space-md`. I shouldn't change padding much. Maybe can adjust slightly or keep as is.

Since only visual properties may change, there's not much to change here. But I can add things like:
- Custom properties? The original uses `var(--space-md)`. I can't change that padding? Actually padding is in the "NEVER CHANGE" list with "padding, margin (keep similar values, ±20% maximum)". So I need to keep padding similar. Changing from `var(--space-md)` to another value might change layout. Better keep it.

What can I change:
- Add `box-shadow` to elements? Adding shadows to existing selectors is a visual change. But would that affect layout? No, box-shadow doesn't affect layout.
- Add `border-radius`?
- Add `background`, `color`? But these are typography/layout? color is fine to change.
- Add `transition`?

The media query selects:
1. `.app-hero-section .row .col-lg-7` - currently text-align center. I cannot change text-align. Could add color, but hero section text color might be inherited. Adding color could be a visual change but maybe risky? It's allowed: "All color values: background, color, border-color..." — so I can add color. But do I want to? It would be a visual change.

2. `.app-hero-section .badge.bg-warning` - font-size cannot change. Could add background, color, box-shadow, border-radius, etc. The badge has class `bg-warning` which typically is a Bootstrap warning color. I can add box-shadow glow, maybe override background with a gradient. But careful: `bg-warning` is a Bootstrap utility that sets background-color. If I set `background:` it would override. That's allowed - changing color values.

3. `.contact-channels-section article, .contact-quick-section .contact-card` - padding is var(--space-md) !important. Keep padding. Could add border-radius, box-shadow, transition, background.

Given the target "horizontal-strips" with alternating backgrounds and "glow-effects" with medium radius and pulsing animations, but limited to these three selectors inside a small media query.

Also note file is "块2/2" (block 2/2), meaning there may be a block 1 with more complete CSS. But I only have this chunk. The instruction says output ONLY the rewritten CSS preserving all selectors.

I should be careful: The media query has `@media (max-width: 575.98px)`. That's fixed.

What can I realistically do?

For `.app-hero-section .badge.bg-warning`:
- Add `background: linear-gradient(...)` - changing background color. Allowed.
- Add `box-shadow: 0 0 24px rgba(accent, 0.4)` - glow effect.
- Add `border-radius: 50rem` or medium radius? Badge is typically pill-shaped. Border-radius is "visual rounding only" so allowed. But changing pill shape to medium radius may be a visual identity change. Target says medium radius 8-16px. But for a badge, maybe keep pill or set 0.5rem. Hmm.
- Add `transition`.
- Could add `animation`? The variant says "Subtle pulsing animations". I could add an animation but @keyframes would need to be defined... in this chunk? I could add keyframes inside the media query? Keyframes names and values can change but defining new keyframes is adding CSS. The instruction says "@keyframes names (values inside CAN change)" and "animation-name (values like duration/timing CAN change)". Adding new @keyframes might be acceptable, but the original CSS had none. Adding new declarations is fine as long as selectors preserved. But to be conservative, maybe avoid keyframes and just use transitions/glows.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- Add `border-radius: 12px;` (medium radius)
- Add `box-shadow: 0 4px 24px rgba(...)` - but box-shadow doesn't affect layout.
- Add `transition: box-shadow 0.3s ease, transform 0.3s ease;` - transition is visual. But transform on hover would need :hover selector which isn't in original. I shouldn't add new selectors? The rule says keep pseudo-classes as they are; adding new ones isn't preserving. Avoid adding :hover rules not originally present. Instead maybe add transition for box-shadow so if there's a hover elsewhere it transitions.
- Also can add `background` to these cards.

For `.app-hero-section .row .col-lg-7`:
- Add `color`? Not necessary. Maybe nothing.

Since the original has `!important` on padding, if I add other properties without !important they won't conflict.

Let me think about the "horizontal-strips" style. It describes full-width sections with alternating backgrounds. In a 575px media query, these elements are on mobile. But I'm limited.

Perhaps I can set:
- `.app-hero-section .badge.bg-warning` background to a gradient orange/amber glow with box-shadow.
- The contact cards get a cream/white background with glow shadows and medium radius.

Also custom properties: The original uses `var(--space-md)`. I can't change the padding value, but I could add custom property definitions? That would be global and not tied to a selector. But output only rewritten CSS — adding `:root { --space-md: ... }` would change layout? It would affect padding. Risky. Don't.

Given the limited scope, I'll do minimal visual changes:

Keep everything, add visual properties.

Let me write:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd166, #f4a261);
        color: #3d2b00;
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(255, 173, 51, 0.4);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #fffdf7, #fdf6e3);
        border-radius: 16px;
        box-shadow: 0 8px 30px rgba(244, 162, 97, 0.18), 0 0 24px rgba(244, 162, 97, 0.12);
        transition: box-shadow 0.3s ease, background 0.3s ease;
    }
}
```

Wait: `color` on `.col-lg-7` — might be okay but changes text color of hero text. That's a visual change allowed. But "text-align" cannot change — I keep it.

However `transform` in transition — the transition property refers to transform, but no transform is applied. It's harmless but maybe unnecessary. Better keep transition simple: `transition: box-shadow 0.3s ease;`

The original `font-size: 0.85rem;` — I must keep it exactly. Good.

`border-radius: 12px` for badge — target medium radius 8-16px. But badges are usually pills; changing to 12px is a visual identity shift. That's fine, we're refreshing identity. But should I override? In a media query max-width 575px, on small screens the badge pills could become rounded squares. It's allowed. I'll use 10px.

Also use of `!important` on padding — keep.

Now, is adding `background` to `.contact-channels-section article` etc. okay? The target palette says alternating white/cream/dark. So cream background with dark text? Adding background might change appearance but allowed. Should I add `color`? If I set a cream background, text might still be dark or light depending on theme. Safer to not set color unless needed. If original theme is dark, adding cream background would require setting text color. But I don't know. Since this is a "saishi.css" (赛事 = competition), might be a dark theme? The original code doesn't show colors. To be safe, I could set a translucent/soft background or use `color` to ensure contrast. But adding color could be wrong.

Actually let me reconsider: The instructions say "All color values: background, color, border-color..." may change. It doesn't require me to add colors to every element. Since the visible output could become unreadable if I set background without color, maybe set both for the cards:

```css
background: #fffdf7;
color: #2d2a32;
```

But if original text is white on dark, this would be a significant but intended re-skin. However, within a media query on mobile only, changing card text to dark might be okay if background is light. It's a re-skin.

Alternatively, use a subtle glow shadow without changing background. That's safer. But the target style wants alternating white/cream/dark strips. Since we can only modify a few selectors, I'll add cream backgrounds.

Hmm, but the original selectors include `.contact-channels-section article` and `.contact-quick-section .contact-card`. These are likely cards with existing backgrounds from other CSS files (block 1). By adding background in this media query, I override just on mobile. Fine.

I need to be careful about the badge: `bg-warning` in Bootstrap sets `background-color: #ffc107` and color maybe `#000`. If I add a gradient background with `background` shorthand, it overrides. Good.

Let's also consider adding `animation` with pulsing glow. That requires keyframes. The variant says "Subtle pulsing animations". I could define `@keyframes glow-pulse` inside the media query and set `animation: glow-pulse 2s ease-in-out infinite;` on the badge. But is adding new @keyframes allowed? The instructions: "@keyframes names (values inside CAN change)" — meaning if @keyframes exist, I can change values but not names. But adding new @keyframes isn't in the list. Adding new selectors/rules isn't forbidden explicitly? Actually "EVERY selector character-for-character preserved" — if I add a keyframe rule, it's a new at-rule, not a selector. It doesn't affect HTML layout. It might be acceptable but could be seen as overstepping. To be safe, I'll avoid keyframes and use static glow.

But the "glow-effects" variant includes "Halo on hover: 0 0 32px rgba(accent, 0.6)". That requires a :hover rule. Original CSS has no :hover. Adding :hover pseudo-class would be adding a selector — not preserving. The instruction says pseudo-classes keep exactly; adding new ones is not allowed ("Every selector character-for-character preserved"). So no :hover.

I can still include transition so any existing hover (from block 1) transitions smoothly. That's a good compromise: `transition: box-shadow 0.3s ease, background 0.3s ease;`

Now colors: choose an accent. For a "saishi" (competition/tournament) site, an energetic orange/amber accent fits. Palette:
- Accent: #f4a261 (orange) or #ffb703
- Cream: #fffdf7 / #fef9ef
- Dark text: #2b2118 or #3a2e2a

Badge gradient: `linear-gradient(135deg, #ffd166, #ef8354)` with shadow `rgba(239, 131, 84, 0.45)`.

Cards: background `#fffdf7`, shadow `0 10px 30px rgba(239, 131, 84, 0.15), 0 0 24px rgba(239, 131, 84, 0.10)`, radius `16px`.

Also for `.col-lg-7`, maybe add nothing or just a subtle `color`? Let me not add color there because it might conflict with theme. Instead, could add `text-shadow`? "text-shadow" allowed. If hero has heading text inside col-lg-7, adding text-shadow might affect readability. Leave it as is — no changes except keep text-align. Actually if I make no change to that rule, it's still "preserved". I'll include it with maybe `color` omitted, or add a `color` to maintain dark text. Hmm.

The task expects me to "Refresh this CSS visually". If the first rule has no changes, it's still output but unchanged. That's fine but maybe they want something. I could add `color: #2b2118;` to the hero column to ensure dark text. But on a dark background, it would break. Since the original media query sets text-align center for mobile, likely the hero content is a block. Without knowing the theme, safer to not change color.

Another option: Add `text-shadow: 0 2px 12px rgba(43, 33, 24, 0.12);` to the col — a soft shadow on text. That is a decorative change. But text-shadow on a large hero text could look odd. Still it's visual only. I'll maybe add nothing risky.

Let me think about "horizontal-strips" — "Alternating background colors per strip: white / cream / dark / white pattern". In the media query, the sections themselves (`.app-hero-section`, `.contact-channels-section`, `.contact-quick-section`) are not selected. Only children. So I can't change section backgrounds without adding selectors. Adding selectors is not allowed.

Therefore the only way to introduce the palette is via the elements we have.

Final plan:

```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;
        background: linear-gradient(135deg, #ffe08a, #f4a261);
        color: #3b2a14;
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(244, 162, 97, 0.45);
        transition: box-shadow 0.25s ease-in-out;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #fffdf7, #fdf3e3);
        color: #2b2118;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(43, 33, 24, 0.08), 0 0 24px rgba(244, 162, 97, 0.18);
        transition: box-shadow 0.3s ease-in-out, background 0.3s ease-in-out;
    }
}
```

Wait — the instruction says "transitions timing, easing, duration" can change, and we can add transitions. Good.

But "font-size: 0.85rem" — I must not change. Good.

"padding: var(--space-md) !important;" — keep exactly. Good.

Should I keep the blank line formatting? It doesn't matter. Output only CSS.

Double-check: The first rule unchanged is fine — but the instruction says "Refresh ALL color values" and "Shadows redesigned". Since there were no colors/shadows originally, adding them is a refresh.

One concern: Adding `color: #2b2118` to `.contact-card` might override existing theme text color, and if the card had a dark background from block 1, this could make text unreadable. But we also set a light cream background, so it should be fine. However, the `background` shorthand might override an existing gradient/image from block 1. That's intended re-skin.

Another concern: `border-radius: 16px` on `.contact-card` might break if the card already has a border-radius from block 1, but changing radius is allowed.

Now the badge: Bootstrap `.badge.bg-warning` default has `border-radius: 50rem` (pill). Changing to 12px is allowed. But mobile small screens, 12px could look nice.

Should I use `!important` on the added properties? Original `padding` has `!important`. Some utilities like `bg-warning` have