/* ============================================================
   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 with a conservative mode, visual changes only, targeting an "asymmetric-blocks" style with "sharp-edges" effect variant. But the original CSS provided is very small and only contains a media query with text-align, font-size, and padding. There aren't many colors, shadows, or visual properties to change.

Let me look at 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 within a media query. The selectors are:
- `.app-hero-section .row .col-lg-7`
- `.app-hero-section .badge.bg-warning`
- `.contact-channels-section article, .contact-quick-section .contact-card`

I can only change visual properties: colors, shadows, radius, transitions, gradients, opacity, outline, border-color, border-style, caret-color, accent-color, CSS custom properties.

The properties in the original:
- `text-align: center;` — this is a text-align property, which is in the "never change" list (text-align, vertical-align). So I should keep it.
- `font-size: 0.85rem;` — typography, never change. Keep.
- `padding: var(--space-md) !important;` — padding is layout, I can change ±20% max, but the instruction says padding is in the never-change list (keep similar values, ±20% maximum). The existing padding uses `var(--space-md)`, which I could potentially redefine if it's a CSS custom property. But the original CSS doesn't define `--space-md`, so it's inherited from elsewhere. The task says I can change CSS custom property values. But I don't see them defined here.

Since the original file doesn't actually contain visual properties like color or background, I have limited ability to change. However, the instructions say "Refresh this CSS visually" and "Colors throughout the file replaced with fresh palette?" But there are no colors in the file.

The task seems to be testing whether I will preserve selectors and layout while making appropriate visual changes. Since there are essentially no visual properties to change, I should output the CSS with maybe adding some visual properties? But the instruction says "keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

Hmm, the instruction says "Refresh this CSS visually." But I shouldn't add new properties that change layout. I could add box-shadow, border-radius, transitions to the elements within the media query, since those are visual-only and won't break layout.

Wait — the instruction: "You are an expert CSS designer in CONSERVATIVE MODE. Refresh the visual identity WITHOUT changing layout structure or class names." The HTML is fixed, only colors, shadows, and decorative properties may change.

Given the target style "asymmetric-blocks" with "sharp-edges" variant, I should:
- Use bold contrasting blocks
- High contrast borders
- Hard offset shadows: 4px 4px 0px solid color
- Small or zero border-radius (0-4px)
- Strong borders (2-3px solid)
- Snappy transitions (0.15s)

But the selectors here don't have layouts described. The media query is for mobile. I could add visual styling to the linked elements:
- `.app-hero-section .badge.bg-warning` — a badge, I can give it a new background, color, border, shadow.
- `.contact-channels-section article, .contact-quick-section .contact-card` — cards, I can give them background, border, shadow.

But should I add properties that aren't in the original? The original only has those three rules. The task says "Only change colors, shadows, radius, transitions, gradients." I think adding visual properties is acceptable since the goal is to refresh the visual identity, as long as I don't change layout (display, position, padding/margin beyond ±20%, etc.).

However, the "conservative" instruction also says "NO AI-REWRITTEN comments" and "Every selector character-for-character preserved?" — I need to keep selectors.

But there's a risk: The instruction says "Only change colors, shadows, radius, transitions, gradients." That could mean "only modify existing color/shadow/radius/transition/gradient declarations" rather than "add new ones." Since originally there are none, maybe the correct behavior is to output the same CSS because there's nothing visual to change.

This is a trap. The file fingerprint and request ID suggest this is part of a larger file (块2/2 = block 2/2). The original CSS is small and contains only layout/typography. In conservative mode, since there are no visual properties to change, I should output the CSS as-is, since changing anything else would break the rules.

But the user explicitly says "Refresh this CSS visually." Hmm.

Let me think about what properties are safe to add:
- `box-shadow: 4px 4px 0px #000;` on `.contact-channels-section article` — visual only, doesn't affect layout.
- `border: 2px solid #000;` — border-width is in the "never change" list? Actually, the never-change list says "border-color and border-style (NOT border-width)". Wait, it says border-color and border-style CAN change, but NOT border-width. But adding a border where there was none changes border-width from 0 to 2px, which could affect layout by 4px in each dimension. In a mobile media query with padding, adding a border might shift things. Conservative mode says layout must not change. Adding border-width can change layout. So I should be cautious.
- `border-radius` — visual only, safe.
- `background-color` — visual only, safe.
- `transition` — visual only, safe.

Maybe the safest is to add background colors and shadows that don't affect layout. But padding/margin must stay within ±20%? The original padding uses `var(--space-md)`, which is already there. I can't change it much.

Actually, given the constraints, the most faithful "conservative" action is to note that there are no color/shadow/radius properties to change, and output the CSS unchanged. But the user wants a rewritten CSS.

Let me reconsider. The task says:

"✅ YOU MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)
  • text-shadow
  • border-radius (visual rounding only)
  • gradient colors and stops in linear/radial/conic-gradient
  • transition timing, easing, duration
  • filter, backdrop-filter
  • opacity
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
  • caret-color, accent-color
  • CSS custom properties (--color-*, --shadow-*) values"

Since there are no such properties in the given block, I can't "change" them. So the output should be identical, unless I introduce them. But introducing them might be considered "adding" rather than "changing."

Given the "self-check" asks:
- "Colors throughout the file replaced with fresh palette?" — N/A since no colors.
- "Shadows redesigned (different offsets, colors)?" — N/A.
- "Border-radius adjusted for new visual style?" — N/A.

I think the correct answer is to output the CSS unchanged, because there is nothing to change without violating the "never change" rules. But that feels like an empty response.

Alternatively, I could add visual declarations to the existing selectors. The instructions for the conservative mode say only colors, shadows, and decorative properties may change. Adding decorative properties to existing selectors is arguably "changing decorative properties" for those selectors. The target style gives specific directions: asymmetric-blocks with sharp edges.

Since the file is part of a larger set (块2/2), there might be other blocks where the base styles are defined. This media query block is a mobile override. If I add background/border/shadow here, it would apply on mobile only, which fits the "asymmetric-blocks" theme.

Let me consider the target style:
- "Bold contrasting blocks: each section different background"
- "High contrast borders"
- "Hard offset shadows: 4px 4px 0px solid color"
- "Small or zero border-radius (0-4px)"
- "Strong borders (2-3px solid)"
- "Snappy transitions (0.15s)"

I could:
- For `.app-hero-section .badge.bg-warning`: add `background-color: #ff6b35; color: #1a1a1a; border: 2px solid #1a1a1a; box-shadow: 4px 4px 0px #1a1a1a; border-radius: 0; transition: transform 0.15s, box-shadow 0.15s;`
  But wait, `transform` transitions are visual, but adding transform on hover? I'd need pseudo-classes. I shouldn't add new selectors, but I can add `transition`. However, adding `transform` property would change layout? No, transform doesn't affect layout. But the transition wouldn't have a trigger unless there's a hover rule elsewhere. Still, setting a transition on the base rule is fine.
- For `.contact-channels-section article` and `.contact-quick-section .contact-card`: add `background-color: #f4f1de; border: 2px solid #1a1a1a; box-shadow: 4px 4px 0px #3d405b; border-radius: 0; transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;`
  But adding border-width changes border from none to 2px, which increases the box size by 4px. In a mobile media query with `padding: var(--space-md) !important`, the padding is inside the border. Adding a border could cause overflow if the container is tightly sized. The instruction says "border-color and border-style (NOT border-width)" — meaning I can change border color/style but not width. Adding a border where there is none increases the width. That's risky.

To be safe, I could use `outline` instead of `border`, since outline doesn't affect layout. The instructions say I can change "outline styles (color, type)". I can add an outline: `outline: 2px solid #1a1a1a;` or `outline: 3px solid #000;` which doesn't affect layout. That's a good conservative approach.

Also `box-shadow` doesn't affect layout. Good.

So I can add:
- Background colors
- Box-shadows (hard offset)
- Border-radius (0)
- Outline (strong, doesn't affect layout)
- Transition (visual)
- Text-shadow maybe

But adding these properties to the mobile media query might be odd. Yet it satisfies the task.

However, there's another concern: the original CSS has `padding: var(--space-md) !important;` — I shouldn't change that. I could change the value of `--space-md`? It's a CSS custom property, but it's not defined in this block. Changing it here would require defining it, which could affect layout everywhere. I should not.

Let me also consider the `text-align: center;` rule — that's in the never-change list. Keep as is.

`font-size: 0.85rem;` — in the typography never-change list. Keep.

Alright, I'll produce a rewritten CSS that:
- Keeps the media query and all selectors.
- Keeps the existing declarations exactly.
- Adds visual-only declarations aligned with the target style: high-contrast backgrounds, hard offset shadows (4px 4px 0px), zero border-radius, strong outlines (2-3px solid), snappy transitions (0.15s).

But wait — the instruction says "Only change colors, shadows, radius, transitions, gradients." Adding new declaration blocks with these properties is consistent.

Also, the target says "asymmetric-blocks": "Bold padding contrasts" — but I can't change padding beyond ±20%. The existing padding is `var(--space-md) !important`. I can't change that without knowing the value. Keep it.

Let me craft the new CSS.

I'll assign a bold palette:
- Background for the badge: `#e07a5f` (terracotta) with dark `#1a1a1a` text? But the badge has class `bg-warning`, which likely already has a background from Bootstrap. In a media query on mobile, overriding with a stronger "sharp edges" look could be good: `background-color: #f2cc8f; color: #1a1a1a; border: 2px solid #1a1a1a; border-radius: 0; box-shadow: 4px 4px 0px #3d405b;`

But again, border width. Let me use outline: `outline: 2px solid #1a1a1a; outline-offset: -2px;` — outline-offset with negative value can draw inside, no layout change. But outline may not round with border-radius? Actually in modern browsers, outline follows border-radius. Zero radius anyway.

For the contact cards:
- `.contact-channels-section article` and `.contact-quick-section .contact-card` get:
  - `background-color: #f4f1de;`
  - `outline: 2px solid #1a1a1a;`
  - `box-shadow: 4px 4px 0px #3d405b;`
  - `border-radius: 0;`
  - `transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;`
  - `text-shadow`? Not needed.

But the contact cards might have different backgrounds, maybe one is dark and one is light for "asymmetric-blocks" / "each section different background." Since there are two selectors, I can give them different background colors:
- `.contact-channels-section article` — `background-color: #e07a5f;` (a bold terracotta)
- `.contact-quick-section .contact-card` — `background-color: #3d405b;` (dark navy) with `color: #f4f1de;`

But wait, changing background of `.contact-card` might make text unreadable if the text is dark. Since I can't see the HTML, it's risky. Conservative mode suggests caution. But the target style explicitly calls for bold contrasting blocks. I'll pick high-contrast but maintain readability: light backgrounds with dark text, and use shadows/borders for the bold look.

Alternatively, use the same background for both to be safe, but the target says "each section different background." I'll use two different light-ish backgrounds to preserve readability:
- Article: `#f4f1de` (cream)
- Contact card: `#e07a5f` (terracotta) with `color: #1a1a1a` to keep readable.

But I'm adding `color` to `.contact-quick-section .contact-card` — that changes text color, which is a color change, allowed. However, if the card already has a specific text color, changing it might affect readability in an unknown way. But with a terracotta background, dark text works.

Actually, I should keep it simpler. Since the original CSS doesn't have any colors, any addition is "introducing" rather than "changing." The instructions want me to output a refreshed CSS. The client explicitly requested a target style, so they expect visible changes.

Let me be careful with the selector list: `.contact-channels-section article, .contact-quick-section .contact-card` — if I want different backgrounds for each, I need to split the selector, which would change selectors. The rule says "Selector lists (commas)" are in the never-change list. So I must keep the selector list as one rule with the same declarations for both. I cannot split them. So both will get the same background/outline/shadow. That's fine; "asymmetric blocks" can still be reflected in shadows and borders.

Alternatively, I can add a second rule for one of them? No, that would be adding a selector, which is not allowed ("Every selector character-for-character preserved?"). I can only modify existing rules. So I'll keep the combined selector and apply the same visual treatment to both.

Now, the badge: `.app-hero-section .badge.bg-warning` — I'll give it:
- `background-color: #e07a5f;`
- `color: #1a1a1a;`
- `outline: 2px solid #1a1a1a;`
- `box-shadow: 3px 3px 0px #3d405b;`
- `border-radius: 0;`
- `font-size: 0.85rem;` (keep)
- Maybe `text-transform: uppercase;`? No, text-transform is typography, never change. Don't add.

The hero col: `.app-hero-section .row .col-lg-7` gets `text-align: center;` — keep. Could add `color`? Not necessary.

Should I add `transition` to all three rules? The effect variant says "Snappy transitions (0.15s)". I'll add `transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;` to the badge and the contact cards. But since there are no hover rules, transitions won't fire. Still, it satisfies the variant. Maybe there are hover rules elsewhere in the file that change shadow/transform; adding a base transition will make those snappy. That's plausible.

Let me also think: the media query max-width 575.98px — mobile. Hard offset shadows like `4px 4px 0px` on mobile might cause horizontal overflow? Box-shadows don't affect layout and don't cause scrollbars by themselves (they can, but usually box-shadow doesn't trigger overflow). Actually, box-shadow