/* ============================================================
   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 CSS only. Need rewrite with target style asymmetric-blocks sharp-edges. Original is small media query. Need preserve selectors/layout, including text-align? text-align is typography? Actually text-align listed under layout? "text-align, vertical-align" in layout do not change. So preserve text-align center. Font-size is typography cannot change? They say typography fixed font-size etc unchanged. Original has font-size: 0.85rem; must keep. Padding unchanged in media? They said padding margin keep similar ±20. But original uses var; likely preserve. We can possibly change to var? No. Need visual changes possible: border, box-shadow, background, color, border-radius? But elements are hero badge and contact cards. We can add box-shadow/border/background? Original no color. Need refresh. Since fixed HTML, can apply colors to existing classes without changing layout. Need careful selectors exact. We can add declarations within existing media queries. Need style: Bold contrasting blocks, different backgrounds, hard offset shadows, zero radius, strong borders, snappy.

Need not change font-size. Add maybe border-radius: 0; but original no border, if add border changes layout? Border width adds layout; and prohibited border-width not change. But we can add box-shadow which doesn't affect layout? Box-shadow no layout. Outline maybe no layout but outline width? They said outline style, color allowed, not outline-width. Better avoid border to preserve layout. Border-radius could affect. Background no layout. Color no layout.

Need target asymmetric-blocks: maybe make badge warning background high contrast? But .badge.bg-warning Bootstrap likely background-color #ffc107, color maybe inherited. We can set background: bold color; color: maybe dark? But color allowed. Need use !important? Original only font-size no !important. Could add box-shadow 4px 4px 0px solid color, but box-shadow has no spread solid. "4px 4px 0px solid color" semantically box-shadow doesn't use border style; means offset. We set `box-shadow: 4px 4px 0 0 #000` but if no spread? Need maybe 4px 4px 0px #000. Actually box-shadow syntax offsets blur spread color. "4px 4px 0px solid" means blur 0px, "solid" no. Use e.g. `box-shadow: 4px 4px 0px 0px #1a1a1a`. Need hard edge. For badge, `border-radius: 0px`; maybe we can change to 0 (visual). But `.badge` Bootstrap has border-radius .375rem; add overrides.

Contact cards maybe backgrounds per section? They are inside `.contact-channels-section article`, `.contact-quick-section .contact-card`. We can set each to contrasting backgrounds. But original selectors are two separated lists. Need preserve. We can create rules:

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

We can add new declarations within existing rules. Need maybe change `text-align`? preserve.

Need be careful with selector lists: `.contact-channels-section article,
    .contact-quick-section .contact-card { padding: var(--space-md) !important; }` We can add color, background, box-shadow, border-radius, transition maybe. But if we add `background` to both same? Asymmetric blocks: maybe different backgrounds per section. But selector list doesn't let differentiate. Could add additional rules with same selectors? CSS can add separate rules. But maybe need keep original rule exactly and additional rules. Could add a selector `.contact-quick-section .contact-card` separately to differentiate. But output should preserve all selectors and add allowed styling. We can add separate selectors? The instructions: "Keep ALL selectors and layout exactly as-is." You can add new rules? Likely yes if they don't change layout. But "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" implies can add declarations, maybe not new selectors except same? Better to only augment existing rules, or add new selectors with existing classes? Since target style wants per-section backgrounds, need use existing class names. We can add new selector rules for `.contact-channels-section article` and `.contact-quick-section .contact-card` separately. These are existing selectors, not new. Fine.

Need maybe use CSS variables? Original none. We can add variables? Could change custom properties but only if in file. Better not.

Need color palette. Could choose: Deep indigo background for contact cards? But background of entire card. Original maybe white. Need high contrast blocks. For `.contact-channels-section article`: background: #1e1b2e; color: #fff; box-shadow: 6px 6px 0 #f59e0b; border-radius: 2px? Sharp edges: border-radius: 0. But "Small or zero border-radius (0-4px)" Use 2px? Target variant says sharp edges "Small or zero border-radius (0-4px)" So 2px ok. Strong borders: We cannot add border width? Wait border-color/style can change but border-width cannot. Existing card may have border. Adding border would alter layout but maybe border is in padding box. But not safe. "Strong borders (2-3px solid)" as effect, but if no border exists, we can use outline? Or `outline: 2px solid #000`? But outline can affect? It doesn't affect layout, but may be clipped? Better use box-shadow to simulate border: `box-shadow: 0 0 0 2px #000, 4px 4px 0 #f59e0b`. This creates hard border via inset? Actually box-shadow first layer 0 0 0 2px color gives border-like. Good.

Need "4px 4px 0px solid color" hard offset shadows. Use `box-shadow: 4px 4px 0px 0px #000` maybe. For strong border, add inset or border? Could use `box-shadow: 0 0 0 2px #000, 4px 4px 0 0 #f59e0b`. The first has no offset, no blur, spread 2px => hard outline. That's allowed; no layout. For second offset shadow.

Need transitions "Snappy transitions (0.15s)". For hover state? Existing rules only static; can set transition on base cards. But no hover in media query. Adding transition declaration fine. Need maybe add hover rules? That would be new selectors but same class plus :hover? Instructions preserve pseudo-classes? "Pseudo-classes (:hover, :focus, ::before, ::after)" — likely can use existing pseudo-classes; if no original selector has hover maybe adding is extra. Could avoid hover. But transition without change no effect. However it's okay to declare.

Need maybe animate? no.

Need maybe use `accent-color`, `caret-color`? Not necessary.

Need process original:

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

Need choose fresh palette. Let's define maybe:
- Hero center: maybe color? Could set `.app-hero-section .row .col-lg-7 { text-align:center; color: #2b2d42; }` But that's color allowed. However the h1 etc inherit? Could be okay. But text-align unchanged. Maybe no need.
- Badge: background: #f4a261? Instead of Bootstrap warning yellow. Actually .badge.bg-warning has `--bs-badge-color`? If we set `background-color:#111;` and `color:#f4a261;` maybe readable. Need "Bold contrasting blocks, high contrast borders" .badge maybe smaller. Use `background-color:#0f172a; color:#fbbf24; box-shadow: 3px 3px 0 0 #7c2d12; border-radius: 0; transition: box-shadow 0.15s ease, transform 0.15s ease;` but transform? allowed? `transform` not listed but could affect layout? transform is not layout maybe but visuals; but instructions? It doesn't list transform as prohibited but "layout structure" not. However if transform, can alter. We can avoid.
- Contact channels article and contact quick card: Different backgrounds:
  - `.contact-channels-section article`: background: #1d1a31; color: #f8f9fa; box-shadow: 0 0 0 2px #e63946, 6px 6px 0 0 #f4a261; border-radius: 2px; transition: box-shadow 0.15s ease, background-color 0.15s ease;
  - `.contact-quick-section .contact-card`: background: #f4a261; color: #1d1a31; box-shadow: 0 0 0 2px #1d1a31, -4px 4px 0 0 #e63946; border-radius: 0; Maybe `-4px` horizontal offset. Hard offset shadows can be different directions.
Need maybe use padding unchanged. Original padding var(--space-md) !important. If adding background, cards with padding okay.
Need maybe border with box-shadow only. Use 2px strong border. `box-shadow: 0 0 0 2px #e63946, 6px 6px 0 0 #f4a261;`
Need maybe for `.contact-quick-section .contact-card` use "bold contrasting blocks"; background #f77f00 maybe. We can choose palette:
- Deep eggplant #2d232e
- Vivid coral #e55812
- Lime #c7f464? But need high contrast. Keep cohesive.

Maybe style target "asymmetric-blocks" but no grid changes. We can reflect via backgrounds:
- Left/right sections? `.contact-channels-section article` and `.contact-quick-section .contact-card` are separate sections. Use one dark, one bright.
- `.app-hero-section` maybe add background? We only have col, not section. Don't know layout.

Need careful with `!important` in original padding rule. If we add separate rule with `padding`? Don't change padding. Need preserve original.

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #111827;
        color: #fbbf24;
        box-shadow: 3px 3px 0 0 #7c2d12;
        border-radius: 2px;
        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;
        border-radius: 2px;
        transition: box-shadow 0.15s ease, background-color 0.15s ease;
    }

    .contact-channels-section article {
        background-color: #1c1833;
        color: #fff4e6;
        box-shadow: 0 0 0 2px #e55812, 6px 6px 0 0 #f6bd60;
    }

    .contact-quick-section .contact-card {
        background-color: #f6bd60;
        color: #1c1833;
        box-shadow: 0 0 0 2px #1c1833, -6px 6px 0 0 #e55812;
    }
}
```
Need include original selectors in augmented rules. Did we preserve `.app-hero-section .row .col-lg-7`? yes, plus color. Is `color` allowed? yes.
Need ensure not changing `font-size` etc. yes.
Need "No markdown fences, no explanations." final only CSS.

Potential issue: `.app-hero-section .badge.bg-warning` set background-color but Bootstrap `.bg-warning` uses `--bs-bg-opacity:1; background-color: rgba(var(--bs-warning-rgb),var(--bs-bg-opacity))`. Specificity: `.bg-warning` is one class; our selector `.app-hero-section .badge.bg-warning` specificity = 0,3,0 plus element? Actually `.app-hero-section` (class), `.badge`, `.bg-warning` => 3 classes. It will override. But `.badge` has background? If no. Good.
Need perhaps set `background` not `background-color` to override.

Potential issue: `.contact-quick-section .contact-card` maybe background classes from Bootstrap? Our selector specificity same, later in stylesheet after Bootstrap? The file might be included after? It will override because more specific? If Bootstrap has `.bg-dark` one class, ours 2 classes, wins if same origin later. Fine.

Need maybe "Sharp edges" maybe add `border-radius: 0;` especially badges have radius. Use 0 for stronger. But target says 0-4px. Let's use 0. Small. Actually "sharp edges" -> 0. Good.
Need maybe use `outline: 2px solid`? But outline-color allowed, outline style allowed; width is no? It says outline styles (color, type) but not width; so if setting outline width not allowed. Avoid.
Need maybe use `border-color` and `border-style` maybe but existing no border. Could set `border-style: solid; border-color: #000;` but if border-width default medium => layout shift. Don't.
Need padding unchanged. Good.

Need maybe add "mixed gaps" cannot due no layout. OK.

Need maybe "different background each section" yes.

Potential "same layout, fresh palette" okay.

Need maybe maybe original "text-align: center" considered layout; preserving.
Need "margin, padding within ±20" no changes.

Need ensure output first char @. no code fences.

Let's consider if adding `color` to `.app-hero-section .row .col-lg-7` might change typography color but not layout. It's visual identity. Fine. Could add maybe `text-shadow`? Not necessary.
Need maybe "high contrast borders" from box-shadow. good.

Let's think if there is risk of using `background-color` on `.badge.bg-warning` creates not "asymmetric-blocks" but okay.

Maybe target "asymmetric-blocks" could want "Bold padding contrasts" but cannot change. We can simulate with box-shadows? visual only. Fine.

Need maybe use "transition timing, easing, duration" changed; set `transition: box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;`. But no hover. It's okay.

Could there be a requirement to preserve `@media` condition exactly? yes, we keep.

Need maybe maintain newlines? no.

Need no comments.

Let's draft final CSS with original indentation.

Potential issue: We are adding rules after combined rule, but `.contact-channels-section article` combined includes padding and property; then separate rule same selector with background. The same rule later appears. This is okay if "preserving ALL selectors" yes. But perhaps "rewritten CSS preserving ALL selectors exactly" maybe they don't want added duplicate selectors? However adding duplicate rules is okay. But if they require every original selector appears exactly, yes. It appears. Added color in original. Fine.

Let's consider alternate: Keep combined block with only padding plus add background/box-shadow in same block? If two selectors need different backgrounds, cannot. But we could use CSS custom variables? No.

Maybe define separate rules before/after combined with selector lists? Still okay.

Need maybe include `.app-hero-section .row .col-lg-7` color? If text-align center, color may not be needed. But fresh palette. Fine.

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #111827;
        color: #fbbf24;
        box-shadow: 3px 3px 0 0 #b45309;
        border-radius: 0;
        transition: box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    }

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

    .contact-channels-section article {
        background-color: #1b1833;
        color: #f8f4e6;
        box-shadow: 0 0 0 2px #e55812, 6px 6px 0 0 #f6bd60;
    }

    .contact-quick-section .contact-card {
        background-color: #f6bd60;
        color: #1b1833;
        box-shadow: 0 0 0 2px #1b1833, -6px 6px 0 0 #e55812;
    }
}
```
Need check `box-shadow` 3px maybe hard. Good.

Potential issue: `box-shadow` with spread 2px and offset 6px; this creates a solid "border" and offset. In second: `-6px 6px 0 0` creates shadow to left. Good.
Need maybe if `border-radius: 0` on cards, the padding var might