/* ============================================================
   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 answer rewritten CSS. Need inspect original CSS. It's an @media max-width 575.98px block with three rules. Must preserve selectors and layout. Visual changes only. Need apply target style editorial-magazine and sharp-edges. But original has no colors/shadows except text-align and padding/font-size. Layout/typography cannot change: text-align? It is not listed in allowed or prohibited? Actually text-align listed under typography fixed? "text-align, vertical-align" under typography cannot change. Ah text-align cannot change. Padding can keep similar ±20%. font-size under typography cannot change. So original CSS basically constraints: keep text-align center; padding var(--space-md)!important maybe don't change? Need visual refresh possible only add properties? But selectors retained, maybe can add colors? But no color values existing. In conservative mode, every color values can change/add? Need rewrite with same selectors, same property declarations? Could add properties? The instruction says "Refresh this CSS visually" and "Only change colors, shadows, radius, transitions, gradients." But original is media query with typography and padding. Cannot change text-align or font-size or padding beyond ±20%. We can add new declarations that are visual, like color, background, box-shadow, border-radius, transition. But within this media query? Maybe add to these selectors: .app-hero-section .badge.bg-warning maybe add background-color, color, border-radius, box-shadow; .contact cards maybe background, border, box-shadow. Need be careful with existing .bg-warning class (Bootstrap). We can add background-color but maybe override? Colors: editorial neutrals cream/beige #f5f1e8 background, ink #1a1a1a text, accent deep red #c44536 or olive #6b705c. Sharp edges: hard offset shadows 4px 4px 0px solid color, small zero radius, strong borders 2-3px solid, snappy transitions 0.15s.

Need output only CSS. But must preserve all selectors and layout exactly. Original has only @media block; output likely same selectors, same rules, with perhaps added visual declarations. But need not change text-align and font-size. We can add color, background-color, border, box-shadow, transition, border-radius. Padding cannot change. The CSS custom properties? Not present.

Need interpret "text-align, vertical-align" fixed under typography, so no text-align modifications. Original text-align center remains exactly. So:

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

Maybe we can add "color" and "background" in .app-hero-section .badge.bg-warning? But .bg-warning class by Bootstrap has background-color var(--bs-warning); override is visual. Need "colors throughout file" replaced but no colors. Should add accent? Let's design:

@ editor: Cream background no need if not in selection? Perhaps no background at body. We have selectors. We could add to .app-hero-section .badge.bg-warning: color: #1a1a1a; background-color: #c44536; border: 2px solid #1a1a1a; border-radius: 0; box-shadow: 4px 4px 0 #1a1a1a; transition: background-color .15s ease-in-out, transform .15s ease-in-out, box-shadow .15s ease-in-out; But transform would be layout? Not layout? It doesn't change layout? Could change visual but not necessary. Avoid transform. Use transition on background-color, box-shadow, color. But no hover? Could use transition anyway. Hard offset shadows.

For contact cards: background-color: #f5f1e8; border: 2px solid #1a1a1a; border-radius: 0; box-shadow: 4px 4px 0 rgba(26,26,26,1); transition: box-shadow .15s ease-in-out, background-color .15s ease-in-out; But "contact-channels-section article" and "contact-quick-section .contact-card" are article/card; adding background maybe okay.

For .app-hero-section .row .col-lg-7: text-align center fixed. Could maybe add background-color? But no, would be weird. Add no visual? Need "all colors replaced" but no colors. We can add maybe color? It's a hero column, color: #1a1a1a; maybe not necessary. But don't change typography? color is allowed. Might be safe. But if .col-lg-7 contains headings etc, inherited color maybe. Accent? Maybe set color: #1a1a1a. But "ink black text" okay.

Need ensure we don't remove existing declarations. We can add additional declarations to each rule. But "All color values" maybe original none, but we need output refreshed. Maybe we can include declarations with CSS variables? No.

Let's consider if adding properties violates "Only change colors, shadows, radius, transitions, gradients"? It says can add visual properties? Yes.

Need maybe use inset? "Hard offset shadows: 4px 4px 0px solid color" In CSS box-shadow syntax "4px 4px 0px <color>" no spread. Sharp edges: zero radius or 4px. Strong borders 2-3px solid. Snappy transitions 0.15s.

Need choose border widths. Border-width is layout? It is listed under "border-color and border-style (NOT border-width)" cannot change? Wait "NEVER CHANGE" includes? It says "border-color and border-style (NOT border-width)"? Actually under row "border-color and border-style (NOT border-width)"? Let's read: In target original instructions: "border-color and border-style (NOT border-width)"? Actually item under NEVER CHANGE: "border-color and border-style (NOT border-width)"? Wait re-read user top: 
- ✅ You MUST CHANGE: border-color and border-style (NOT border-width)
And in Never change list: "border-color and border-style (NOT border-width)"? Need parse: It says under ✅ You MUST CHANGE (visual identity only): border-color and border-style (NOT border-width). So border-width not to change? But target style says strong borders 2-3px solid. However original no borders. Could add border-width? "NOT border-width" implies cannot change existing border-width but may add? Hmm. Grid item "border-color and border-style (NOT border-width)" included under must change? Let's inspect exact in prompt:

```
✅ YOU MUST CHANGE (visual identity only):
  • All color values: ...
  • box-shadow ...
  • text-shadow
  • border-radius
  • gradient ...
  • transition ...
  • 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
```

So "border-color and border-style (NOT border-width)" says may change border color and border style but not width. But target effect variant says "Strong borders (2-3px solid)" because default maybe border widths? Yet "NOT border-width" seems conflict. In conservative mode "HTML fixed, visual changes only"; border-width can affect layout if added/removed, so never change. But original has no border property, so adding a border would add border-width and affect layout by 2px. However box-sizing maybe border-box, if original no border, adding border could change content area? Since box-sizing likely border-box? Not known. The instruction says "border-color and border-style (NOT border-width)" maybe we should not add border-width. But target style "Strong borders" might be expected. Hmm. Need decide. Since original CSS has no border, adding border will alter element's border-width and potentially layout. But "visual change only" and target style asks strong borders. The strict output requirements say "border-color and border-style (NOT border-width)" but specifically lists border-width as not allowed in never? Wait maybe "NEVER CHANGE" in user prompt includes "border-color and border-style (NOT border-width)" inadvertently? Let's look:

Original long prompt:
```
✅ YOU MUST CHANGE (visual identity only):
  • All color values...
  • border-radius (visual rounding only)
...
  • border-color and border-style (NOT border-width)
```
Never change section:
```
📐 LAYOUT (HTML cannot adapt to changes):
  • display values ...
  • width, height...
  • padding, margin...
...
  • aspect-ratio
  • object-fit...
  • text-align...
```
No border-width there explicitly, but "border-color and border-style (NOT border-width)" probably means don't change width when changing colors/style. But target style asks strong borders. We might use box-shadow as border to avoid layout change: hard offset shadows can act as border. But "Strong borders (2-3px solid)" maybe via box-shadow? Could use `border: 2px solid` if no original border. Is that allowed? The category "border-color and border-style" not width; maybe changing from no border to 2px border adds width. Conservative would avoid. But effect variant says strong borders. Need choose.

The output should not include comments. We can include `border: 2px solid #1a1a1a;`? Since original card had no border maybe it's okay? But "NEVER change border-width" perhaps "border-width" is not listed under never but "NOT border-width" in must change. It says "border-color and border-style (NOT border-width)" means you may change `border-color` and `border-style` but not `border-width`; if there is no border width, cannot set it. Hmm.

Let's look at "File: assets/css/saishi.css#块2/2" likely Chinese site CSS segment. Original is only mobile media query. If we add border to elements, it might affect padding and sizes. But target style "sharp-edges" often includes 4px offset shadow and borders; perhaps acceptable.

Need maybe preserve `!important` on padding. Need not alter padding. But adding `background-color` etc to same selector doesn't change layout.

Need perhaps set `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; ... }`. If we add box-sizing? No.

Need perhaps add to `.badge.bg-warning` a `box-shadow: 4px 4px 0px rgba(26,26,26,1);` and `transition: box-shadow .15s ease-in-out, background-color .15s ease-in-out;`. Also maybe `border: 2px solid #1a1a1a;` could wrap badge. But no.

Need perhaps use `outline` to create border without affecting layout: `outline: 2px solid #1a1a1a; outline-offset: 2px;` Since outline doesn't affect layout. That meets "outline styles (color, type)" allowed. Great! Use outline instead of border to preserve layout. But target says strong borders 2-3px solid; outline could be similar. But outline can overlay content; anyway.

We can use box-shadow for offset. Use `outline: 2px solid #1a1a1a; outline-offset: 2px;`? Hard offset shadow plus outline? Could be editor. But if no border? Good.

Need maybe use `background-color` and `color` on badge. `.badge.bg-warning` is a Bootstrap warning badge; override with deep red background and ink text? But bg-warning typically yellow; using background-color #c44536 plus color #fff? But editorial palette "deep red accent" with ink text. Need contrast: on #c44536, white text is better but ink black could be weird. Maybe use cream background #f5f1e8 and deep red text? Since badged is "warning" maybe accent deep red with cream text? But "single accent color deep red or olive". Use #c44536 background, #f5f1e8 text. But "ink black text" not required on all elements. Could use `color: #f5f1e8;` because red background. If we add `background-color: #c44536;` then `color: #f5f1e8;`. Shadow #1a1a1a. This is visual.

Contact cards: on cream background, cards maybe `background-color: #f5f1e8;` but if page background cream, need borders/shadow. Use `background-color: #fffaf3` or #f5f1e8? Editorial neutral. Since page likely #f5f1e8, cards should be white? But target palette has cream/beige backgrounds. Could make cards `background-color: #fffaf2; border: 2px solid #1a1a1a; border-radius: 0; box-shadow: 4px 4px 0 #c44536;` But border width layout issue; use `outline: 2px solid #1a1a1a; outline-offset: -2px;`? Outline inside (offset negative) to simulate border without layout. But outline with negative offset might clip? Outline doesn't affect layout; okay. However if outline-offset -2px, outline is drawn inside element. It can overlap content edges but only 2px. For cards with padding, okay. Maybe use `box-shadow: inset 0 0 0 2px #1a1a1a, 4px 4px 0 #c44536;` This avoids layout changes and gives border effect. Yes, use inset box-shadow to simulate 2px border and hard offset shadow. This is pure visual and doesn't change layout. Great. For badge, use `box-shadow: inset 0 0 0 2px #1a1a1a, 4px 4px 0 #1a1a1a;` Maybe too much.

Need maintain original declarations:
- media query exact
- .app-hero-section .row .col-lg-7 { text-align: center; } maybe add color: #1a1a1a. Does adding `color` affect typography? It's allowed.
- .app-hero-section .badge.bg-warning { font-size: 0.85rem; } Add background-color, color, border-radius? But border-radius changes visual. Sharp edges: border-radius: 0. But Bootstrap badge has rounded-pill by default? `.bg-warning` doesn't set radius? Bootstrap badge class `.badge` has `border-radius: .375rem`. We can override border-radius: 0. Good. Add box-shadow and transition.
- contact card rule: padding unchanged, plus background-color, border-radius, box-shadow, transition.

Need maybe "transition timing, easing, duration" must change? Original has no transitions. Add `transition: box-shadow .15s ease-in-out, background-color .15s ease-in-out;` Good. But if no hover, transitions on `.badge` only maybe no effect; still visual. Could also add `transition: box-shadow .15s ease-in-out, background-color .15s ease-in-out, color .15s ease-in-out;` for card.

Need maybe `filter`/`backdrop-filter`? Could add? Not needed.

Need perhaps include `-webkit-`? no.

Need maintain exact selector list and property original values. We can add `color: #1a1a1a;` to col-lg-7 but text-align remains. Could maybe not add because not necessary. But task says "Refresh all visual identity" and "All color values ... replaced". There are no colors, so maybe acceptable to add. Should we add to first rule maybe `background-color: rgba(245,241,232,0.4);`? no.

Let's think about "target style editorial-magazine" in a small media query. Since only mobile, cannot create asymmetric grid. We can apply accent and paper background to elements. Use cream `#f5f1e8` and ink `#1a1a1a`, deep red `#c44536`.

Need perhaps set `--space-md` value? Not in CSS; no.

Need output no markdown. Let's construct final 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-radius: 0;
        box-shadow: inset 0 0 0 2px #1a1a1a, 4px 4px 0 #1a1a1a;
        transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
    }

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

Need check "layout unchanged" with background color, color, border-radius, box-shadow. Box-shadow doesn't affect layout. `transition` no layout. `font-size` unchanged. `padding` unchanged. `text-align` unchanged. Great. But "strong borders (2-3px solid)" achieved with inset shadow 0 0 0 2px; no border property. Sharp edges radius 0; offset shadows 4px 4px 0. Good.

Need perhaps be careful with `color: #f5f1e8` on