/* ============================================================
   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 this CSS file with a fresh visual identity. The file is quite small — just a media query with a few rules. Let me analyze it:

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

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

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

Constraints:
- Cannot change selectors
- Cannot change text-align, font-size, padding (well padding can change ±20%)
- text-align is in the "never change" list (text-align, vertical-align) — so keep `text-align: center`
- font-size is in "never change" (font-size, font-weight, font-style) — keep `font-size: 0.85rem`
- padding can change ±20%, but `var(--space-md)` — the custom property value could change? It says CSS custom properties values (--color-*, --shadow-*) can change. But --space-md is a spacing variable, not color/shadow. I should be careful. Padding must stay within ±20%. `var(--space-md)` value unknown. Changing the custom property could affect layout elsewhere. Better keep padding as is.

The rest — there are no colors, shadows, radius, transitions in the original. This file is just a responsive tweak file. So there's not much to visually refresh.

I could add decorative properties within the existing rules, but I must not change layout. Adding box-shadow to these elements would be visual-only. But adding shadows to a hero section article/card might be risky? The instruction says only colors, shadows, and decorative properties may change. It says "Refresh the visual identity WITHOUT changing layout structure or class names."

Since the original has no color values, I need to add colors/shadows in a way that's consistent with the "sidebar-classic" target style and "sharp-edges" variant without changing layout properties.

But adding text-shadow to a badge, adding box-shadow to the contact cards... Hmm. Adding properties not present in the original is allowed as long as it's decorative and doesn't break layout (box-shadow doesn't affect layout).

However, `!important` is there for padding — I shouldn't add new properties with !important maybe.

Let me think about what I can do:
- `.app-hero-section .badge.bg-warning` — I can add a background color? Wait, bg-warning is a Bootstrap class that sets background. I could override the background-color with a new warning color that fits the palette. Also add box-shadow and border-radius, color, text-shadow.
- `.contact-channels-section article`, `.contact-quick-section .contact-card` — add background-color, border, box-shadow, border-radius. But the `!important` only applies to padding. Adding border would change box-sizing? No, border adds to element size unless box-sizing: border-box. Adding a border could shift layout. That's risky. Maybe use box-shadow with 0 0 0 as a border replacement (outline-like) — but box-shadow doesn't take layout space, so it's safe.

Actually the "sharp-edges" variant says "Hard offset shadows: 4px 4px 0px solid color" — wait, box-shadow offset with 0 blur and spread 0 gives a hard shadow. "4px 4px 0px" means offset-x 4px, offset-y 4px, blur 0 — a hard shadow. That doesn't take layout space, so safe.

- `.app-hero-section .row .col-lg-7` — add nothing? text-align is fixed. Could add color for text? The col contains the hero text. Adding color could work but risky since it's a wrapper. Maybe just keep it.

Given the file is tiny and has no visual properties, perhaps the best approach is to add decorative properties that are consistent with the target:

1. For the hero section col-lg-7 — maybe add text-shadow? That could be decorative but might be ugly. I'll leave it as-is, or add a subtle text-shadow? Actually adding text-shadow to a whole column could affect readability of headings. Better leave.

2. Badge: add background-color, color, shadow, border-radius (but border-radius small 0-4px), maybe a hard shadow. Change font-size? No — font-size is fixed at 0.85rem. But I can add line-height? line-height is typography, fixed. Add padding? padding can change ±20%, but bad idea.

3. Contact cards: add background, border (via box-shadow to avoid layout shift), hard offset shadow with palette.

The instructions require output ONLY the rewritten CSS, preserving all selectors. Since the original has no colors to "replace," I'll inject new decorative declarations.

Let me design the palette:
- Sidebar darker (#252e3a), but for these elements:
- warning badge: a functional accent, maybe a warm amber #e6a23c or #f0b429. Since "bg-warning" is a Bootstrap warning, I can override with a fresh warning color: background: #e8a13a maybe.
- Contact cards: lighter background #f8f9fb or a paper color with a dark sidebar-ish shadow. Since target is sidebar-classic: sidebar darker (#252e3a), main lighter. The contact section is main content, so lighter background. Hard offset shadow: 4px 4px 0px #252e3a.

Let me also consider: `.contact-channels-section article, .contact-quick-section .contact-card` — these are cards. I could give them a white/light background, a strong border of 2px, and a hard shadow.

But adding border changes sizing... box-shadow with 0 0 0 2px color acts as a border without affecting layout. Actually box-shadow spread 2px creates a ring; safe for layout. In border-box it doesn't matter since box-shadow doesn't affect box size.

sharp-edges: "Strong borders (2-3px solid)" — but adding border to the cards might break layout slightly, but since padding ±20% allowed... Adding a border would reduce content box by 2px each side. Since padding is !important var(--space-md), content space shrinks by 4px. That's a layout change. Better use box-shadow to simulate border: `box-shadow: 0 0 0 2px #252e3a, 4px 4px 0 0 #252e3a;` Wait, box-shadow order matters: first shadow is on top. If I use a ring shadow 0 0 0 2px, then a hard offset shadow 4px 4px 0 0. But the ring would also appear under the offset? Actually shadows are painted in order; the first is on top. So `box-shadow: 0 0 0 2px #2b3542, 4px 4px 0 0 rgba(37, 46, 58, 0.9);` The ring appears around the element, and offset shadow behind? The offset shadow will be painted behind the element but in front of the ring? Shadows are painted in order declared, first on top, so ring will overlay offset shadow where they overlap, giving a clean look. That's fine.

For the badge: background-color, color, text-shadow? A subtle text-shadow maybe none. Box-shadow hard offset: `box-shadow: 3px 3px 0 0 rgba(37, 46, 58, 0.9);` Wait 3px offset maybe. Also small border-radius 2px. Font size stays 0.85rem.

The hero col: I can leave just text-align: center. But to ensure "visual identity refresh" — maybe add nothing. That's fine, the file is small.

Actually wait — the task says "Refresh the visual identity" and lists many properties. But this file contains none of them. So I need to add them. Adding to the hero col-lg-7 could be inappropriate. I'll keep it minimal there.

Let me craft:

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

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

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

Hmm, but "sharp-edges" says small or zero radius (0-4px). Good.

But wait — padding is `var(--space-md) !important`. I must not change padding. Good. But adding background-color and box-shadow to articles could be okay.

Also the instruction says "CSS custom properties (--color-*, --shadow-*) values" can change. The original references `--space-md`. I shouldn't change --space-md definition since it's not in this file, and changing it would alter padding globally.

Should I add hover states? The rules don't have pseudo-classes but I'm not allowed to add new selectors? Actually "Pseudo-classes (:hover, :focus, ::before, ::after)" — preserve — meaning I shouldn't add new ones? Adding new pseudo-class rules would be new selectors, which are not present. The instruction says keep selectors exactly. So no adding :hover rules.

Transitions: adding transition property is allowed ("transition timing, easing, duration"). But without a hover rule, transition does nothing. Still, it's decorative and allowed. Though maybe unnecessary. I'll include a transition on the badge/cards to satisfy the "snappy transitions (0.15s)" variant.

Wait, but adding `transition` to elements without a state change is pointless but harmless. Fine.

Also, target style "sidebar-classic" requires "Functional accent for actions" — the warning badge bg can be the accent. Good.

Now, should the badge use `!important`? Bootstrap's `.bg-warning` has `background-color: #ffc107 !important` in some versions. To override, I may need `!important`. But the instruction says never change layout — adding `!important` to a new property? It's a color property, allowed. But the "Output" says preserve selectors; `!important` isn't a selector. I think it's fine to add `!important` to override Bootstrap. Actually, to be safe and effective, I'll add `!important` to the background-color. And color too maybe.

Wait — but the rule is `.app-hero-section .badge.bg-warning` with `font-size: 0.85rem`. Bootstrap's `.badge` has no color; `bg-warning` sets background. Bootstrap 5's `.bg-warning` is `.bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; }`. So yes need `!important` to override. Adding it is safe.

Also, `.text-warning` etc not relevant.

Now hero col-lg-7 — maybe there's nothing to change. But the instruction says "All color values" in the file must be replaced with fresh palette. There are no color values. I could add a `color` to the hero col? The col contains heading and paragraph; setting a color would affect them. That's a visual change but could be risky. The target palette doesn't specify text colors for main. I'll leave it.

Hmm, but the instruction "Colors throughout the file replaced with fresh palette" — there were none, so nothing to replace. It's fine.

Let me also reconsider the contact card shadow: two shadows `0 0 0 2px #252e3a, 4px 4px 0 0 #252e3a` — the first creates a solid 2px border; the second a hard offset shadow. That gives a nice sharp-edged neo-brutalist look. But wait, with `border-radius: 0`, the ring shadow corners are square — fine.

But maybe background of cards should be slightly off-white to distinguish from page bg? Since main is lighter, white is fine. Could also add `background-color: #faf9f7` a warm paper tone. Let me go with a clean white `#ffffff` or maybe `#fefdf9`. The palette: main lighter — I'll use `#fcfbf7` maybe. But cards generally white; page background probably already light. Keep white.

Set the badge: background `#f2b134` (accent), color `#252e3a` (dark text on amber), box-shadow offset `3px 3px 0 0 #252e3a`, radius `2px`. Also add a subtle `text-shadow: none`? Not needed.

Actually text-shadow: The variant doesn't mention text-shadow. The instructions say I may change text-shadow; adding a subtle one to badge text could be nice but unnecessary and might reduce readability. Skip or add `text-shadow: 1px 1px 0 rgba(255,255,255,0.3)`? That adds depth. Eh, amber on dark text — a slight highlight could look retro. I'll add a subtle one.

Let me also consider the transition values: "Snappy transitions (0.15s)" → `transition: background-color 0.15s ease, box-shadow 0.15s ease;`. Fine.

Also should I apply to the hero section col a text-shadow? No.

One more consideration: the `@media (max-width: 575.98px)` breakpoint must remain unchanged. Yes.

Now, double-check "layout properties within ±20%": padding unchanged. font-size unchanged. text-align unchanged. Good.

Output only CSS, no markdown. Also note the file fingerprint and request id — I don't output those.

Let me finalize:

```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: #f0b429 !important;
        color: #252e3a;
        border-radius: 2px;
        box-shadow: 3px 3px 0 0 #252e3a;
        text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.25);
        transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    }

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

Wait — adding `transform` transition is fine but there's no transform change. OK.

But is `box-shadow: 0 0 0 2px #252e3a, 4px 4px 0 0 #252e3a;` correct syntax? `box-shadow: inset? offset-x offset-y blur-radius spread-radius color`. `0 0 0 2px #252e3a` → offset 0,0, blur 0, spread 2px — solid ring. `4px 4px 0 0 #252e3a` → offset 4,4, blur 0, spread 0 — hard shadow. Good.

Should border-radius for cards be 0 (sharp edges) — I can omit it, default 0. But maybe cards already have radius from Bootstrap? Adding `border-radius: 0;` would override bootstrap's rounded corners. That's a visual change allowed. But is it safe? Yes visually only. But if Bootstrap applies border-radius via `.card` class, overriding is fine. But the selector `.contact-quick-section .contact-card` — might be a custom class, not Bootstrap `.card`. Either way setting border-radius: 0 aligns with sharp-edges. I'll add `border-radius: 0;`.

Actually, the target style says "Small or zero border-radius (0-4px)". Zero is fine.

Also for the badge, override `border-radius` from Bootstrap's `.badge` (which is 0.375rem). Setting 2px.

Hmm, "preserve all selectors exactly" — I did. Good.

One concern: overriding `.bg-warning` background with `!important` might be considered "changing a color value" — that's exactly the goal.

Also should I add `filter` or `backdrop-filter`? Not necessary.

Let me also think: maybe adding a border via box-shadow ring on cards could look odd if the card already has a border. But since it's a visual refresh, fine.

Another approach: use `outline: 2px solid #252e3a;` instead of ring shadow — outline also doesn't affect layout. But outline isn't supported with border-radius in older browsers (modern browsers do follow radius now). Box-shadow ring is safer and listed. I'll keep box-shadow.

Wait, per instructions "outline styles (color, type)" can change — but the original has no outline. Adding outline is allowed. But box-shadow ring works too.

Let me reconsider whether to include the hero col rule unchanged. Since I can't change text-align and there's nothing decorative to add safely, keep it as-is. That satisfies "preserve selectors."

Now output. Only CSS