/* ============================================================
   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 a CSS snippet with a new visual identity while keeping all selectors and layout properties exactly the same. Let me analyze the original CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

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

Constraints:
- Selectors must stay exactly the same
- `text-align` can't change (it's in the layout/typography category - text-align is listed under "never change")
- `font-size` can't change (typography fixed)
- `padding` can change within ±20% — but `var(--space-md)` is a custom property reference. Actually, I can keep the padding value but the instruction says padding can change within ±20%. However, the original uses `var(--space-md)`, so I should keep that or adjust it. Since the CSS uses a variable, I could change it to a similar value. But wait — the custom property `--space-md` is defined elsewhere, so I shouldn't change its value here necessarily. I could replace it with a value within ±20% of the typical value. But the original references a variable; replacing it with a hard value might be fine too.

Actually, the task says only colors, shadows, border-radius, transitions, gradients, backdrop-filter, opacity, outline, etc. can change. The original CSS here doesn't have many colors — it only has `text-align`, `font-size`, and `padding`. Those are all in the "never change" category.

Hmm, this is tricky. The original CSS snippet has:
- `text-align: center` — must not change (text-align is never)
- `font-size: 0.85rem` — must not change (font-size is never)
- `padding: var(--space-md) !important` — padding can change within ±20%, but it's a variable reference. I could replace it with a hard-coded value within ±20% of a reasonable `--space-md`. But what is `--space-md`? It's typically around 1rem-1.5rem. Actually, in many systems, `--space-md` is around 1rem (16px) to 2rem (32px). I need to be conservative.

Wait, the instructions say: "NO changes to layout structure"— so `padding`, `margin` "keep similar values, ±20% maximum". The padding here is `var(--space-md)`. I can keep it as-is since changing it might break layout. But the task demands I refresh the visual identity. However, if the original snippet has no colors, shadows, or radii to change, then perhaps the correct output is the same CSS or only minimal safe changes.

But the user explicitly says: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

Options:
1. Return the CSS unchanged (since nothing visual can change per constraints).
2. Make minimal acceptable changes: e.g., change `padding: var(--space-md)` to something within ±20%, but that changes layout slightly and might not be desired.
3. Add visual properties to the selectors — but adding new properties like `box-shadow` or `border-radius` wouldn't break layout necessarily. For example, adding a background-color or box-shadow to `.contact-channels-section article` is a visual change that doesn't affect layout. Box-shadow doesn't affect layout. Border-radius doesn't affect layout. So I can add decorative properties.

The task is in "conservative mode" - I should preserve layout. Adding box-shadow, background-color, border, etc. is allowed as long as I don't change layout properties. But the instruction also says "same layout, fresh color palette + shadow/radius identity." So adding new visual decorations to these elements within the media query is acceptable.

However, there's a risk: adding `background-color` might change the appearance but not layout. `box-shadow` doesn't affect layout. `border-radius` doesn't affect layout. `transition` doesn't affect layout. `border` adds to the box size — wait, `border-width` is never change; but adding a border where there was none changes layout because border adds to the element's size (unless box-sizing is border-box). This could break layout. So I should avoid adding borders with width. I could add `outline` which doesn't affect layout. Or `box-shadow` which doesn't affect layout.

Let me think about what's safe to add:
- `background-color`: affects painting but not layout — safe (unless it changes stacking context, but still doesn't shift layout).
- `box-shadow`: doesn't affect layout — safe.
- `text-shadow`: doesn't affect layout — safe.
- `border-radius`: doesn't affect layout — safe.
- `transition`: doesn't affect layout — safe.
- `outline`: doesn't affect layout — safe.
- `opacity`: doesn't affect layout — safe.
- `filter`: doesn't affect layout — safe.
- `backdrop-filter`: doesn't affect layout — safe.

So I can add these decorative properties to the existing selectors. The selectors remain exactly the same. I must not change:
- `text-align: center` — keep.
- `font-size: 0.85rem` — keep.
- `padding: var(--space-md) !important` — keep as-is; changing it is risky and unnecessary.

Target style: vertical-flow with warm minimal (off-white #faf8f3, soft black #2d2d2d, sage #87a878 or terracotta #c47b5a) and sharp-edges effect variant (hard offset shadows: 4px 4px 0px solid color; small radius 0-4px; strong borders 2-3px solid; snappy transitions 0.15s).

Given the original CSS is just a responsive media query tweak, I should add decorative styles that align with the target style. Let me add:

For `.app-hero-section .row .col-lg-7` (the hero text container):
- Could add nothing or a subtle text-shadow. But text-shadow on a text container might be odd. Actually it's a column containing text. Adding a text-shadow would apply to all text inside; might be intrusive. Better to keep minimal.

For `.app-hero-section .badge.bg-warning` (a warning badge):
- Add box-shadow, border-radius, maybe outline. But `.badge.bg-warning` uses Bootstrap classes; adding background-color would override the Bootstrap bg-warning — that's a visual change, allowed. Since this is a responsive media query, maybe the intent is just to adjust font-size... but I'm allowed to add visual flair.

Actually, let me reconsider: the instructions say "Refresh this CSS visually." The final CSS should preserve all selectors and layout, but the appearance should be fresh. Given the original snippet, the simplest interpretation: I must output the same three rules with decorative additions.

Let me craft:

```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-color: #c47b5a;
        border-radius: 2px;
        box-shadow: 4px 4px 0px #2d2d2d;
        outline: 2px solid #2d2d2d;
        outline-offset: -2px;
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #faf8f3;
        border-radius: 2px;
        box-shadow: 4px 4px 0px rgba(45, 45, 45, 0.15);
        transition: box-shadow 0.15s ease;
    }
}
```

Wait — adding `transition: transform` implies a hover state that doesn't exist, which is fine, but transitions only apply on state change. It's fine to add.

But should I be concerned about `outline` on a badge? Outline doesn't affect layout. `outline-offset: -2px` draws inside; safe.

However, there's a risk: the original `.badge.bg-warning` has Bootstrap's `bg-warning` background (yellow). Overriding with `background-color: #c47b5a` is allowed. But the instruction says I must change colors throughout the file with fresh palette. The file has no colors, so I introduce them. Good.

Actually, wait: I should double-check whether adding `background-color` to `.contact-channels-section article` and `.contact-quick-section .contact-card` might cause an issue if those already have backgrounds — it just overrides, fine.

Also, the vertical-flow target style mentions "Single column layout... large vertical gaps (48-72px)... narrow content max-width (680-800px) centered." But this media query only targets small screens; the layout pattern doesn't apply here. I shouldn't add layout properties anyway. The color palette and sharp-edges effect are what I apply.

Let me also consider: should I add `border: 2px solid #2d2d2d`? Border adds to element dimensions unless box-sizing is border-box. Bootstrap sets `box-sizing: border-box` globally, so adding a border might not change layout in Bootstrap. But since I can't guarantee it, and the instruction says border-width never change (i.e., I shouldn't change border-width, but can I add border where there was none? It says "border-color and border-style (NOT border-width)" can change — implying border-width should be left as originally specified. If original has no border, adding a border-width would violate the spirit). Better to use `outline` (which behaves like a border but doesn't affect layout) or `box-shadow` for the hard offset shadow.

The sharp-edges variant says "Strong borders (2-3px solid)" — I can achieve the visual of a border with `box-shadow: 0 0 0 2px #2d2d2d, 4px 4px 0px #2d2d2d;` Wait, a hard offset shadow plus an inset border-like shadow. That gives the offset shadow look without affecting layout. For the badge:

```css
box-shadow: 0 0 0 2px #2d2d2d, 4px 4px 0px #2d2d2d;
```

This creates a crisp 2px border plus a 4px offset shadow. Nice and sharp. No layout impact.

Actually, box-shadow with spread `4px 4px 0px #2d2d2d` — the syntax is `offset-x offset-y blur spread color`. Without spread, it's fine. `0 0 0 2px #2d2d2d` is a border-like shadow. Then `4px 4px 0 0 #2d2d2d` as the offset shadow — but I can combine: `box-shadow: 0 0 0 2px #2d2d2d, 4px 4px 0 0 #2d2d2d;`.

Let me craft the final answer with careful attention to not changing prohibited properties.

Original rules:
1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — keep text-align. Add nothing or maybe `color: #2d2d2d;`? Adding color is allowed. Since the hero section might inherit a light text color, setting `color: #2d2d2d` reinforces the soft-black palette. It doesn't affect layout. Safe.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — keep font-size. Add background-color, border-radius, box-shadow, transition.

3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — keep padding. Add background-color, border-radius, box-shadow, transition.

Should I add `color` to rule 3? That might affect text inside cards, but it's a visual change; allowed. But to be conservative, I'll leave colors of text alone where not needed.

Also, the request says "Only change colors, shadows, radius, transitions, gradients." Adding `color`, `background-color`, `box-shadow`, `border-radius`, `transition` fits.

Now, about the target style "vertical-flow" — it's marked as "Aggressive only" meaning the layout pattern applies only in aggressive mode. I'm in conservative mode, so I shouldn't try to create single column layouts or change grid. I just use the color palette and sharp-edges variant.

Final CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c47b5a;
        border-radius: 2px;
        box-shadow: 0 0 0 2px #2d2d2d, 4px 4px 0 0 #2d2d2d;
        transition: box-shadow 0.15s ease, background-color 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #faf8f3;
        border-radius: 2px;
        box-shadow: 0 0 0 2px rgba(45, 45, 45, 0.15), 4px 4px 0 0 #2d2d2d;
        transition: box-shadow 0.15s ease;
    }
}
```

Wait, should the cards have a strong 2px border in #2d2d2d? The sharp-edges variant says "Strong borders (2-3px solid)" — using `0 0 0 2px rgba(45,45,45,0.15)` plus offset shadow might be too subtle for "strong." Maybe use `#2d2d2d` for the border ring and then the offset shadow in a muted tone. But the target palette uses off-white background and soft black. Let me make the cards have a 2px solid #2d2d2d ring? That might be too harsh for cards. But the style says strong borders. For the badge, terracotta background with soft black ring and offset shadow looks sharp. For cards, maybe a lighter ring and a black offset shadow.

Alternatively, I could use `outline: 2px solid #2d2d2d; outline-offset: -2px;` plus `box-shadow: 4px 4px 0 0 #2d2d2d;`. This keeps the "border" inside and offset shadow outside. Outline doesn't affect layout. That's a clean approach.

Let me use outline for a strong inner border without layout impact:

For badge:
```css
background-color: #c47b5a;
border-radius: 2px;
outline: 2px solid #2d2d2d;
outline-offset: -2px;
box-shadow: 4px 4px 0 0 #2d2d2d;
transition: box-shadow 0.15s ease, background-color 0.15s ease;
```

But outline-offset negative might be clipped if the element is small; it's fine.

Hmm, but for `.contact-channels-section article` and `.contact-quick-section .contact-card`, an outline of 2px solid #2d2d2d might be too heavy. The style wants strong borders, so it fits. Let me do:

```css
background-color: #faf8f3;
border-radius: 2px;
outline: 2px solid #2d2d2d;
outline-offset: -2px;
box-shadow: 4px 4px 0 0 rgba(45, 45, 45, 0.85);
transition: box-shadow 0.15s ease;
```

Wait, but box-shadow with an offset creates an area outside the element — since it's a mobile media query, elements are full width, so an offset shadow of 4px to the right won't cause horizontal scroll because box-shadow doesn't trigger overflow/scrollbars. Actually, box-shadow doesn't create scrollbars (unlike outline? No, outline also doesn't). Shadows are not part of layout and are clipped by overflow hidden if needed, but they don't cause scroll issues. Safe.

One concern: the padding is set with `!important`. My added properties shouldn't need `!important` since they're new. Fine.

Also: should I modify the `--space-md` value? No, it's a variable reference; keep it as is.

Another concern: the original `.badge.bg-warning` rule only had `font-size: 0.85rem`. Adding `background-color` might conflict with Bootstrap's `.bg-warning` which has `background-color: #ffc107 !important` in some Bootstrap versions. Bootstrap's `.bg-warning` utility uses `!important`? Actually in Bootstrap 5, `.bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; }` — it has `!important`. So my `background-color` without `!important` would lose to Bootstrap's utility. Hmm. To be safe and effective, I could add `!important` to my color overrides. But the instruction says I can change colors — overriding a framework color with a custom one is a valid visual refresh. Adding `!important` to the background-color ensures it applies. Since the original rule uses `font-size: 0.85rem` without `!important`, it