/* ============================================================
   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 CSS with a conservative mode, but the original CSS is very minimal. It's a media query with just a few rules. 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;
    }
}
```

Wait — the rules here are layout/typography only:
- text-align: center (layout - never change)
- font-size: 0.85rem (typography - never change)
- padding: var(--space-md) !important (padding - within layout, can change ±20% but it's a var reference...)

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

Hmm, this is tricky. The original CSS has no colors, no shadows, no border-radius, no transitions, no gradients. It's a media query with layout/typography rules only.

In conservative mode:
- text-align: must stay (layout)
- font-size: must stay (typography)
- padding: var(--space-md) - padding can change by ±20% max, but it's a var reference. I should keep it as-is since we can't change layout much. Actually the instructions say "padding, margin (keep similar values, ±20% maximum)". var(--space-md) is a custom property reference. I could keep it. Changing it would require defining the variable, which isn't in scope.

The target style is editorial-magazine with sharp-edges variant. But the original CSS has nothing visual to transform. The media query only contains layout/typography.

Given the constraints, I should preserve the selectors and the properties that are layout/typography. But I need to add visual changes? The task says "Only change colors, shadows, radius, transitions, gradients." If there are none, then there's nothing to change.

Wait — maybe I should interpret this differently. The media query blocks target elements. Perhaps I should add visual properties (colors, shadows, radius) to these elements within the media query? But that would add new declarations, not just change existing ones. The instructions say "Refresh the visual identity WITHOUT changing layout structure or class names." and "ONLY the rewritten CSS, preserving ALL selectors and layout exactly."

Hmm, but adding new properties like color, background, box-shadow wouldn't change layout. It would enhance the visual. But is that within the scope? The instruction says "Only change colors, shadows, radius, transitions, gradients." Adding them could be considered "changing" from nothing to something.

Let me think about what makes sense. The original CSS is a small fragment. The task is to refresh it visually. Since there are no visual properties, the safest conservative approach is to output essentially the same CSS, perhaps with minor padding adjustments (within ±20%). But padding is var(--space-md) — I can't change the var value without defining it, and the selector list must stay.

Actually, let me reconsider. Could the "visual-only" changes be applied? The elements targeted are:
- .app-hero-section .row .col-lg-7 — in the hero section on mobile, centered text
- .app-hero-section .badge.bg-warning — warning badge on mobile
- .contact-channels-section article and .contact-quick-section .contact-card — contact cards, padding

For editorial-magazine sharp-edges, I could add:
- background colors (cream)
- text colors (ink)
- accent color for badge
- box-shadow hard offset for cards
- border-radius 0-4px
- border 2-3px solid
- transitions 0.15s

But adding these would change the appearance significantly. However, the instruction says "ONLY colors, shadows, and decorative properties may change" — meaning those are the things I'm allowed to change. It doesn't say I must add them if absent. But the goal is to "refresh the visual identity."

Hmm, there's a conflict. Conservative mode says "layout structure and class names" are fixed. Adding visual properties doesn't break HTML.

Let me look at the exact output constraints:
- "ONLY the rewritten CSS, preserving ALL selectors and layout exactly"
- "No markdown fences, no explanations"

So I should output CSS that preserves all selectors. The layout properties (text-align, font-size, padding) must stay. But I can add visual properties.

Actually, wait. Let me re-read the mandatory changes list:
"✅ YOU MUST CHANGE (visual identity only): All color values, background, color, border-color, fill, stroke, outline-color; box-shadow; text-shadow; border-radius; gradient colors; transition; filter; opacity; outline styles; border-color/border-style; caret-color, accent-color; CSS custom properties."

The original CSS doesn't contain any of these. So there's nothing mandatory to change. The "NEVER CHANGE" list includes text-align and font-size, which are present — so keep them. Padding is layout — keep it (within ±20%).

So technically, the correct conservative output would be nearly identical. But that seems unsatisfying for a "refresh" task. However, the instructions are strict: only change visual properties. Adding new declarations could be acceptable — adding a box-shadow to the contact card is a visual change.

Let me think about what a careful AI would do. The system prompt says "Refresh the visual identity WITHOUT changing layout structure or class names." The target style is editorial-magazine with sharp-edges. The "EFFECT VARIANT: sharp-edges" specifies "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 the task wants me to apply this visual style. Since the original fragment is purely responsive layout adjustments, I should add the visual style to these mobile-specific rules. This is reasonable — on mobile, the contact cards would get a hard offset shadow, border, etc.

But wait — adding box-shadow to .contact-channels-section article within the media query could be problematic if the desktop version already has shadows. But in conservative mode, I shouldn't worry about the broader file; I only have this fragment.

Let me consider: maybe the file is just this fragment (it says 块2/2, file fingerprint). The file "assets/css/saishi.css" block 2 of 2. So this is the entire block I need to rewrite. The original has only this media query. So I need to produce a visually refreshed version of this media query.

Given the instructions, I'll:
1. Keep the @media query and all selectors exactly.
2. Keep text-align, font-size, and padding (layout/typography).
3. Add visual properties matching editorial-magazine sharp-edges:
   - For .app-hero-section .badge.bg-warning: background-color deep red (#c44536), color cream (#f5f1e8), border 2px solid ink or dark red, border-radius 0, maybe a hard offset shadow. But the class already has .bg-warning (Bootstrap warning yellow). Overriding background-color is a visual change — allowed.
   - For .contact-channels-section article and .contact-quick-section .contact-card: background cream (#fff or #f5f1e8), border 2px solid #1a1a1a, box-shadow 4px 4px 0 #1a1a1a, border-radius 0 or 4px, transition 0.15s. But adding a background to cards could change their appearance. That's fine visually.
   - For .app-hero-section .row .col-lg-7: text-align center stays. Maybe add nothing else, or maybe add a color? Hmm, the hero section text color could be ink. But changing color of a column might override hero text color — that's a visual change. I could add color: #1a1a1a. But that's risky without knowing the context. The target palette says ink black text (#1a1a1a). Adding color to the col could be fine.

However, I'm worried about overreach. The instructions say "Only change colors, shadows, radius, transitions, gradients." Adding new declarations like background-color, border, box-shadow to elements qualifies as changing/adding these visual properties. But it might break the original design if the original had Bootstrap classes with their own colors.

Let me reconsider. The safest interpretation that still fulfills the task: The original CSS has no colors/shadows/radius to change. So the rewritten CSS will be nearly identical. But the task explicitly says to refresh. If I output identical CSS, that fails the "refresh" goal.

Maybe the right approach is to add visual enhancements to the selectors in the media query, using the target palette and sharp-edge variant. This is a common pattern in these CSS rewriting tasks: take a fragment and apply the new visual identity, preserving layout mechanics.

Let me look at the selectors:

1. `.app-hero-section .row .col-lg-7` — a column in the hero. In the media query it's centered. I could add `color: var(--ink, #1a1a1a)` or just `color: #1a1a1a`. But the hero section might have a dark background. Hmm. Without context, adding color is risky. The target style is editorial-magazine: cream backgrounds, ink text. Maybe the hero has a cream background. I'll add a color that matches editorial ink. Actually, I might leave this rule as-is because text-align is a layout property, and there's nothing visual to change. But I could add a transition? That doesn't make sense for text-align.

2. `.app-hero-section .badge.bg-warning` — a Bootstrap warning badge. I can restyle it: background-color: #c44536 (deep red accent), color: #f5f1e8, border: 2px solid #1a1a1a, border-radius: 0, box-shadow: 3px 3px 0 #1a1a1a. This gives the editorial sharp-edge look. The font-size stays 0.85rem.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — contact cards. I can add: background-color: #fffdf7 or #f5f1e8, border: 2px solid #1a1a1a, border-radius: 0, box-shadow: 4px 4px 0 #c44536 (accent shadow) or #1a1a1a, transition: box-shadow 0.15s ease, transform 0.15s ease. But transition of transform — transform is a visual property? It's not layout per se, but it could be considered animation. The instructions say transitions can change. Adding a transition is fine.

Hmm, but the padding declaration uses `var(--space-md)`. I must keep padding the same (or within ±20%). It's a var reference, so I can't change the value without defining the variable. I'll keep `padding: var(--space-md) !important;` as-is. Actually, I could change it to a different padding value like `padding: 1.25rem !important;` but that changes the layout property value, and the original used a variable. Conservative says keep similar values within ±20%. var(--space-md) is unknown, so safest to keep it.

Wait, but the instructions say "padding, margin (keep similar values, ±20% maximum)". So I can modify padding slightly. But since it's a var, keeping it is safest.

Let me draft the rewritten CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        color: #f5f1e8;
        border: 2px solid #1a1a1a;
        border-radius: 0;
        box-shadow: 3px 3px 0 #1a1a1a;
    }

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

Hmm, adding `color: #1a1a1a` to the hero column might be risky. Maybe I should not add anything to that selector since it only had text-align. The rule `text-align: center` is a layout property and must stay. Adding color is optional. To be safe and still "refresh," I could leave the first rule unchanged.

Actually, let me reconsider the whole thing. The instructions emphasize "Refresh the visual identity." If I only touch the badge and cards, the hero column rule stays identical. That's acceptable — not every selector needs changes.

But wait, adding `background-color: #fffdf7` to contact cards might override a background set elsewhere. In context, this is a media query for small screens, so overriding the card background on mobile is fine.

Another consideration: `.bg-warning` is a Bootstrap utility that sets `background-color: #ffc107 !important` (in Bootstrap 5). My override without !important would lose to Bootstrap's !important. Bootstrap's `.bg-warning` uses `background-color: #ffc107 !important`. So to override, I'd need `background-color: #c44536 !important;`. Hmm. But is Bootstrap loaded? The class `bg-warning` suggests Bootstrap. To be safe, I should add `!important` to the background-color and maybe color for the badge. But that changes the "visual identity" correctly.

Similarly, Bootstrap `.badge` sets padding, border-radius, font-size. My border-radius: 0 would override since Bootstrap's badge uses `border-radius: .375rem` without !important. So that's fine.

Let me think about the shadow variant. "Hard offset shadows: 4px 4px 0px solid color" — this is a box-shadow with 0 blur, hard offset. For the badge, 3px 3px 0 is reasonable on a small element. For cards, 4px 4px 0.

Colors: editorial neutrals: cream/beige backgrounds (#f5f1e8), ink text (#1a1a1a), accent deep red (#c44536) or olive (#6b705c). I'll use cream as the page background? But the fragment doesn't set body background. The cards could be cream (#f5f1e8) with ink border and red shadow.

Let me refine:

```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: #c44536 !important;
        color: #f5f1e8 !important;
        border: 2px solid #1a1a1a;
        border-radius: 0;
        box-shadow: 3px 3px 0 #1a1a1a;
    }

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

Should I use !important on the badge? The original rule for the badge only had font-size. Adding !important to background-color would ensure it overrides Bootstrap's `.bg-warning`. However, in conservative mode, adding !important is allowed (it's not a layout property). But it changes specificity/behavior. Hmm. I think it's fine.

Actually, let me reconsider whether to add !important. The original `padding: var(--space-md) !important` uses !important. For the badge, since `.bg-warning` in Bootstrap has `background-color: #ffc107 !important`, my `background-color: #c44536` without !important would NOT override it. So to achieve the visual change, I need !important. I'll add it.

But wait — is Bootstrap definitely loaded? The class names `.badge.bg-warning`, `.row`, `.col-lg-7` are Bootstrap classes. So yes, likely Bootstrap. The `bg-warning` utility in Bootstrap 5: `.bg-warning { background-color: #ffc107 !important; }`. So !important is needed.

For color, Bootstrap's `.badge` sets `color: #fff`, but `.bg-warning` sets background only. So text color default is likely inherited or #fff from badge. To ensure cream text, I'll add `color: #f5f1e8 !important` or just `color: #f5f1e8`. Since badge color might be set by `.badge` without !important, a normal color declaration would override it. But to be safe, use !important? Hmm, in Bootstrap 5, `.badge` sets `color: #fff` (in older versions) or in BS5, badge doesn't set color by default; it uses `--bs-badge-color: #fff` maybe. Let me not overcomplicate. I'll use !important on both to guarantee.

Actually, maybe I'm overthinking. Let me read again: "Only change colors, shadows, radius, transitions, gradients." Adding a new declaration is changing it. Adding !important is a fine mechanism.

Let me also consider the "sharp-edges" variant: "