/* ============================================================
   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;
    }
}

We need to rewrite the CSS portion given, following conservative mode: keep selectors exactly, layout (padding) within ±20%, typography unchanged, but refresh colors, shadows, radius, transitions, etc. The given CSS is a media query with three rules:

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

We need to apply visual changes. But there are limited properties: text-align, font-size, padding. These are typography/layout. We can't change them drastically. But we can add shadows, borders, colors, transitions etc. However, we must preserve selectors exactly. We can add new declarations within existing rules. The instruction says "Only colors, shadows, and decorative properties may change" and "NEVER CHANGE layout structure or class names." We can add color, background, border, border-radius, box-shadow, transition to the existing selectors without changing the existing layout-affecting properties.

But we must be careful: the selectors have specific HTML elements. Adding properties might affect layout? For example, adding padding would change layout, so avoid. But adding border could change layout unless box-sizing is border-box? We can set box-sizing? That might affect layout, but it's allowed? Actually box-sizing is in the "never change" list? The "NEVER CHANGE" list includes "box-sizing" among layout properties. So we shouldn't add box-sizing if it wasn't there. But if we add a border, it might change dimensions. However, these are components like hero section, badge, contact cards. The contact card has padding via var(--space-md). If we add border, it could alter size. But maybe we can use outline instead? Outline doesn't affect layout. But the target style wants strong borders, hard shadows. We can use box-shadow which doesn't affect layout. We can also use border-color but not border-width? Actually we can change border-color and border-style but not border-width. That means we can't add a border if none exists? The instruction says "border-color and border-style (NOT border-width)" — so we can modify existing border color/style, but not add border-width. If original doesn't have border, adding border-width would violate. But could we set border: 2px solid? That changes border-width, not allowed. Better avoid adding border.

We can add box-shadow using hard offset shadows, which doesn't affect layout. We can add background colors, text colors, border-radius if there is no border? Border-radius doesn't affect layout, allowed. We can add transition. But we need to be careful: adding transition to elements might cause transitions on hover states, but it's okay.

The target style: vertical-flow, warm minimal, off-white #faf8f3, soft black #2d2d2d, muted accent sage #87a878 or terracotta #c47b5a. Effekt: sharp edges, hard offset shadows 4px 4px 0px solid color, small/zero border radius (0-4px), strong borders (2-3px solid) but we can't add border width; use box-shadow to emulate border? Or use outline? Outline can be colored but also width. But we could use box-shadow to create border-like effect: inset 0 0 0 2px color? That is a shadow, doesn't affect layout. That can create a strong border visual. But we need to be careful because box-shadow can be multi-layer.

We also can change CSS custom properties? The original uses `var(--space-md)` in padding. We can't change padding value maybe within ±20%, but we can change the custom property definition? The original snippet doesn't define `--space-md`, it's elsewhere. We cannot change variables because they may affect layout elsewhere. The instruction says CSS custom properties (--color-*, --shadow-*) values may change. But `--space-md` is a spacing variable, not color/shadow. So we should not change it. So padding stays as var(--space-md).

We need to add visual identity to these selectors, but not break layout. We can add background, color, box-shadow, border-radius, transition, etc.

Let's inspect each rule:

1. `.app-hero-section .row .col-lg-7` — this is a column inside hero. It likely contains text. We can set color to soft black #2d2d2d, maybe background none, add a subtle text-shadow? But text-shadow might affect readability. We can set color. Also maybe add a border-radius? But no background. We can add `color: #2d2d2d;`. But the existing rule only has text-align: center. We can add more declarations:

```css
.app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #2d2d2d;
}
```

Maybe we can add a background? The col-lg-7 is a column, if we add background it might span the column width. That could be decorative. But might alter appearance but not layout. Could be okay. But we need to ensure it doesn't break grid. Adding background doesn't affect layout if box-sizing border-box? background doesn't alter layout. So we can add a warm off-white background? But maybe the hero already has background. We shouldn't overdo.

2. `.app-hero-section .badge.bg-warning` — this is a badge with Bootstrap's bg-warning class. In Bootstrap, `.bg-warning` sets background-color: #ffc107!important. We can override with a different background using our own rule. We need to set `background-color` to our accent. Since the selector has higher specificity maybe not enough because `.bg-warning` uses !important in Bootstrap. To override, we might need `!important`. But the instruction says we can change colors, and we can use !important? We should preserve the selector, but adding !important is allowed? The original CSS doesn't use !important in this rule, but it's fine. However, changing the background of a badge might require overriding Bootstrap's `.bg-warning` color. We can use `background-color: #c47b5a !important;` to override. But we must be careful: the spec says "Only colors, shadows, and decorative properties may change" — adding !important is fine.

Maybe we can also add box-shadow, border-radius, color, font-weight? But font-weight is typography, not allowed? Actually font-weight is in "Typography (font system fixed)" so cannot change. But we can change color, background, box-shadow, transition, border-radius.

The badge font-size is set to 0.85rem. We cannot change that. But we can change `color: #ffffff;`? The badge text maybe darker. We can set color to off-white for contrast.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — these are contact cards. They have padding var(--space-md). We can add background-color, border-radius, box-shadow, transition. Since sharp edges, we want small radius 4px, hard offset shadow 4px 4px 0px #2d2d2d maybe. But if we add a hard shadow, it's decorative and doesn't affect layout. Also we can add background-color: #ffffff or #faf8f3? If the page background is off-white, cards could be white. We can add border? Instead of border, use box-shadow: 4px 4px 0px #2d2d2d, 0 0 0 2px #2d2d2d? Multi-layer. But the second layer with 0 0 0 2px would act like a border; it doesn't affect layout. That creates strong border.

Need to ensure not adding outline? Outline also doesn't affect layout but can be used.

Let's design:

Palette: background: #faf8f3 (off-white), soft black: #2d2d2d, accent: terracotta #c47b5a or sage #87a878. Let's choose terracotta for badge? Since badge is warning, terracotta fits warm. Contact cards maybe use off-white with dark shadow.

We need to respect "sharp-edges" variant: hard offset shadows 4px 4px 0px solid color, small or zero border-radius (0-4px), strong borders (2-3px solid), snappy transitions (0.15s).

So for contact cards, we can do:

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

But wait: adding transform transition doesn't mean we set transform. We can add a hover rule? No, we cannot add new selectors? We can add pseudo-classes like :hover to existing selectors? The instruction says "Pseudo-classes (:hover, :focus, ::before, ::after)" are in the "NEVER CHANGE" list: "Class names: keep EXACTLY" and "Pseudo-classes" under selectors: actually the "NEVER CHANGE" includes "Pseudo-classes (:hover, :focus, ::before, ::after)" meaning we cannot change the selectors that are present, but we can add new rules with pseudo-classes? The instruction says "Selectors (CRITICAL - HTML is fixed): ... Pseudo-classes (:hover, :focus, ::before, ::after)" as part of selectors that must be preserved exactly. It doesn't explicitly say we can't add new pseudo-class rules, but the output must be a rewrite of the original CSS. The original doesn't have :hover. If we add new selectors, we are adding new selectors, which might violate "SELECTORS - keep EXACTLY"? It says "Every selector character-for-character preserved?" in self-check. So we should not add new selectors or pseudo-classes. We can only add declarations to existing selectors. So no :hover rules.

However, we can set transition on the existing selectors so that if some other CSS defines hover, it transitions. But no new selectors.

Also, adding `transform` property might affect layout? Transform doesn't affect layout, but if we set transform to something, it changes visual position. Not needed. We can add transition but not a transform. We can add `transition: box-shadow 0.15s ease, background-color 0.15s ease;` That's fine.

But we must be careful: adding `background-color` to the contact cards might override existing background from Bootstrap or other CSS. That's okay.

For the hero column, maybe add a color and text-shadow? But text-shadow might not be appropriate. We can add `color: #2d2d2d;` and maybe `text-shadow: 0 2px 0 rgba(0,0,0,0.05);` but that's decorative. But we want sharp edges, so maybe no text-shadow? Or hard text-shadow? Text-shadow doesn't affect layout. Could use `text-shadow: 2px 2px 0 rgba(0,0,0,0.05);` But that's subtle. Since target style is vertical-flow with warm minimal, maybe no text-shadow.

Better to focus on badge and cards.

The badge: `.app-hero-section .badge.bg-warning` — we can set:

```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background-color: #c47b5a !important;
    color: #ffffff;
    border-radius: 0;
    box-shadow: 3px 3px 0 #2d2d2d;
}
```

But note: Bootstrap badge may already have border-radius: 0.375rem. Setting border-radius: 0 is allowed (visual sharp). We can set `box-shadow` hard. We might also set `padding`? No, padding is layout, and we shouldn't change. But the badge might already have padding from Bootstrap. We won't change.

Should we add `transition` to badge? Maybe `transition: box-shadow 0.15s ease;`. But no hover.

Now for the hero column, maybe we add a background to the col? But that might be too much. Since the rule only sets text-align, we can add `color: #2d2d2d;` and maybe `background-color: rgba(255,255,255,0.5);`? No. Better not.

However, the instruction says "Refresh this CSS visually" — the original media query has only three rules; to make a visible visual identity change, we should apply colors/shadows/radius to these selectors. The hero column likely contains heading and text. Setting color to soft black is a change if default is blue from link or black. But it's a safe color change.

We might also set `outline`? No.

Let's check the allowed changes list: "All color values: background, color, border-color, fill, stroke, outline-color" — We can change color and background. "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)" — allowed. "text-shadow" — allowed. "border-radius" — allowed. "transition timing, easing, duration" — allowed. "outline styles" — allowed. "caret-color, accent-color" — not relevant.

So we can add border-radius, box-shadow, transition, color, background.

Need to ensure padding remains var(--space-md) !important. We'll keep it exactly.

Now, we need to output only the rewritten CSS. Let's compose:

```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 !important;
        color: #faf8f3;
        border-radius: 4px;
        box-shadow: 3px 3px 0 #2d2d2d;
        transition: box-shadow 0.15s ease;
    }

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

But the sharp-edges variant wants strong borders (2-3px solid). We cannot add border-width, but we can emulate with box-shadow: `box-shadow: 4px 4px 0 #2d2d2d, 0 0 0 2px #2d2d2d;` This creates a solid 2px border-like stroke around the element, plus offset shadow. This is a multi-layer shadow. It will not affect layout. Let's use that for the cards.

For the badge, we can also do `box-shadow: 3px 3px 0 #2d2d2d, 0 0 0 2px #2d2d2d;` But a badge is small, a 3px offset plus 2px stroke might be heavy. But it fits sharp-edges. Maybe use 2px offset for badge: `box-shadow: 2px 2px 0 #2d2d2d, 0 0 0 2px #2d2d2d;`. Since the badge has font-size 0.85rem, it's small. We can set border-radius to 0 for a sharper look. The target says small or zero border-radius (0-4px). Use `border-radius: 0;` for badge? For badge, Bootstrap has pill shape often via `badge` maybe not rounded-pill. But warning badge in Bootstrap 5 has `border-radius: 0.375rem`. Setting to 0 gives sharp edge. Good.

For the contact cards, border-radius: 4px. But sharp edges prefer 0-4px. 4px is acceptable.

Let's consider color contrast: `color: #faf8f3` on terracotta #c47b5a is off-white, should be okay. But maybe better use white `#ffffff` for badge text? Off-white is fine.

For hero column, maybe `color: #2d2d2d;` could override a link color? The col-lg-7 may contain headings, paragraph, links. Setting color on the container will inherit to all text, but if there are links, they may have their own color. It's okay.

We might also add a `background-color` to the hero column? Not necessary.

Let's also consider the media query: It applies only on max-width 575.98px, meaning mobile. Shadows with 4px offset might be okay. In mobile, if cards have hard shadow, it may look like neobrutalism. That's desired.

We need to ensure we didn't change layout: padding remains var(--space-md). No margin, width, etc. We added no display, position. Good.

Should we add `box-sizing`? No.

Should we add `border: none`? No.

Let's see if we can change `text-align`? No, it's layout/typography. Keep.

Now about the instruction "MAY change transition timing, easing, duration" — we added transition. Good.

Potential issue: The contact cards have `padding: var(--space-md) !important;` — the `!important` is there. We preserve it exactly. Good.

Potential issue: The badge rule might be overridden by Bootstrap's `.bg-warning` with `background-color` property. We use `background-color: #c47b5a !important;`