/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need to rewrite the given CSS, preserving selectors and layout values, but changing visual properties (colors, shadows, radius, transitions, gradients). The original CSS is a media query block for max-width: 575.98px. There are three rules:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — text-align is layout/typography? Actually text-align is listed under typography? It says "text-align, vertical-align" under typography, which is "NEVER CHANGE" because font system fixed? Wait, in the "Typography" section: "font-family, font-size, font-weight, font-style, line-height, letter-spacing, word-spacing, text-transform, white-space, word-break" — but does not list text-align? Actually it lists "text-align, vertical-align" under Layout? Let's check: Under Layout: "display, position, grid-template-*, ..., text-align, vertical-align" — yes, text-align is in layout section, so it must NOT change. We must keep text-align: center.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — font-size is typography, must not change. Keep as is.

3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — padding is layout, but we can adjust by ±20%. Here it uses `var(--space-md)`. The CSS variable `--space-md` is a spacing variable. Changing it would affect layout globally? It says "CSS custom properties (--color-*, --shadow-*) values" can change, but --space-md is not color/shadow. It's a spacing value. In general, padding must be kept similar (±20%). If we change --space-md, it might affect other elements not in this file? But we are only rewriting this snippet. The variable value is defined elsewhere. We should not add new definitions. We must keep the padding property value exactly `var(--space-md)` because changing to a different length would alter layout. The rule allows "padding, margin (keep similar values, ±20% maximum)". But var(--space-md) is a reference; we don't know its value. To be safe, keep it as is. Since it's a spacing variable, not color/shadow, we cannot change it. The instruction says "CSS custom properties (--color-*, --shadow-*) values" may change. Only those prefixed with color or shadow. So we keep --space-md unchanged.

So essentially, this CSS block has no colors, shadows, radius, transitions, gradients, etc. The only visual-changing opportunity is maybe there are none. But we are asked to refresh visually. However, we must not change selectors, layout, typography. We cannot just add properties? The instruction says "Only colors, shadows, and decorative properties may change" — so we may add decorative properties? We must preserve structure, but we can alter existing color values. There are no color values. Could we add text-shadow? That would be a new property but not change layout. The original CSS doesn't have any visual properties besides text-align, font-size, padding. Text-align and font-size are fixed. Padding is fixed. We could add color, text-shadow, background, border, border-radius, transition to those selectors, but that might change the visual appearance and then we're "refreshing" without changing layout. Is that allowed? The task says "Refresh the visual identity" and "Only colors, shadows, and decorative properties may change." That implies we can replace existing ones or add new decorative properties. We should not change layout-affecting properties. Adding background-color, border, box-shadow, etc., would not affect layout unless box-shadow with spread could overlap but not layout. It's allowed.

But we need to be careful: we output the rewritten CSS, preserving selectors and layout exactly. We can add lines within the rules. The original rules are:

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

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

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

We can add decorative properties to each rule. But the first rule `.app-hero-section .row .col-lg-7` is a column container; adding color or background might not be appropriate. The target style editorial-magazine: cream background, ink black text, deep red accent, sharp edges, hard offset shadows, strong borders, small radius. We could apply a text color, maybe text-shadow? But don't want to overdo.

However, the instruction says "You must change all color values: background, color, border-color, fill, stroke, outline-color" but there are none. We may add some? Since the task demands a visual refresh, we can enhance with the specified target style. But also "NEVER CHANGE: ... color? Wait, color is a color value that we must change if present. But no color present. The safest approach is to produce a CSS that remains identical in structure but adds decorative properties that align with the target. But is that expected? The user says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." So yes, we can add those properties. But we must not change existing values that are layout/typography. Since text-align and font-size are preserved, padding preserved.

Let's think about what visual properties to add:

- For the hero section centered column, maybe add `color` and `text-shadow`? Editorial style: ink black text on cream background, but we don't know the background. Could set `color: #1a1a1a; text-shadow: none;` but text-shadow none doesn't add. Could add `text-shadow: 2px 2px 0 rgba(...)`? That might be too aggressive. But "sharp-edges" variant suggests hard shadows. Yet text-shadow with hard offset might be an editorial accent. We can set `color: #1a1a1a;` but since the HTML may have inherited color, setting it is a visual change. Add `text-shadow: 2px 2px 0 #e0d6c8;`? Hmm.

- For badge.warning, it's a badge likely has background from .bg-warning. We might override with a red accent? But `bg-warning` is a Bootstrap class; changing its background here would be visual. The selector `.app-hero-section .badge.bg-warning` is scoped. We could set `background-color: #c44536;` and `color: #f5f1e8;` and `box-shadow: 3px 3px 0 #1a1a1a;` But that would remove the warning semantics. But the task is visual refresh, okay. Also border-radius: 0; transition: 0.15s. But font-size unchanged.

- For contact cards, we can add `background-color`, `border`, `box-shadow`, `border-radius`, `transition`, but padding must remain var(--space-md). Adding borders might affect box-sizing? If box-sizing is border-box, adding border reduces content area, potentially layout. But padding is fixed, adding a 2px border could slightly alter layout, but with border-box it's okay if box-sizing already border-box from global. Since we don't know, adding border could change width/height. However, border-width is allowed to change? The instruction says "border-color and border-style (NOT border-width)" can be changed. So we must NOT change border-width, but we can add border? Adding border with a width would be changing border-width. Wait: "NEVER CHANGE: ... border-color and border-style (NOT border-width)" in the "You must change" list. The "NEVER CHANGE" section includes "border-width"? Actually in the "NEVER CHANGE" list under Layout, it doesn't list border-width explicitly, but in the "YOU MUST CHANGE" list it says "border-color and border-style (NOT border-width)" meaning we can change color/style but not width. That implies border-width must remain exactly as original. If original has no border-width (0), we cannot add a border because that would change border-width from 0 to something. So we cannot add border on selectors that didn't have one. So avoid adding border properties. Similarly, box-shadow doesn't affect layout, so we can add box-shadow. Background-color doesn't affect layout, so okay. Border-radius doesn't affect layout if no border. Adding border-radius to elements without background only affects when background exists. It's okay.

- Background-color can be added; it doesn't change layout. But if an element already has a background-size? Not relevant.

- Color can be added.

- Box-shadow with hard offset uses offsets, no layout effect.

- Transition can be added; no layout.

So we can add decorative properties. But we must be careful: The instruction says "Only change colors, shadows, radius, transitions, gradients." We can add these. Keep the same selectors. For the first rule, maybe we set `color: #1a1a1a; text-shadow: 2px 2px 0 #e8e2d5;`? But text-shadow may be considered a shadow, okay.

But the media query is for small screens (max-width 575.98px). The style target "editorial-magazine" may have generous padding as aggressive layout, but we cannot change layout because HTML fixed. But we can still apply colors/shadows.

We need to ensure output is exactly CSS with no markdown. The original has `!important` on padding. Keep it.

Maybe we should not add unnecessary properties if the original rules only contain layout and typography; the instruction's goal is to "Refresh the visual identity WITHOUT changing layout structure or class names." Adding new decorative properties is a visual refresh. But also there is a "SELF-CHECK" that says "Colors throughout the file replaced with fresh palette?" — there were no colors, so perhaps we need to add them to all selectors? The palette is cream/ink/red. We can set colors on the relevant elements.

Let's craft a rewrite:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        color: #f5f1e8;
        border-radius: 2px;
        box-shadow: 3px 3px 0 0 #1a1a1a;
        transition: all 0.15s ease-in-out;
    }

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

But wait: "sharp-edges" says "Hard offset shadows: 4px 4px 0px solid color" — box-shadow with 4px 4px 0 0 color. Also "Small or zero border-radius (0-4px)". Strong borders (2-3px solid) but we cannot add border-width. So we won't.

Also the original media query only applies to max-width 575.98px. We could add `transform` on hover? But there is no hover rule. Adding transition on transform without transform rule may not be useful. But transition property is allowed and doesn't affect layout. However, if there is a global hover transform, this transition would affect it. That's fine.

Need to be careful: The instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must change. We add background-color and color to badge and contact cards, but not to the first rule? We add color to the first. Also perhaps we should add a background color to the column? Background-color could influence layout? No. Add `background-color: transparent;`? That is a color value. But "change" doesn't require every selector to have color; it says all color values in the file must be replaced with fresh palette. Since there are none, we can add. But we need to avoid changing the visual in weird ways. For `.col-lg-7`, adding background might make a block background. We might not want. But color and text-shadow are enough.

Let's consider if `text-align: center` is a layout property? It's under layout section: text-align is in Layout's list? Actually the layout list includes "text-align, vertical-align". Yes. So we keep it. Good.

What about `font-size`? It's typography, keep.

What about `padding`? Keep value exactly or within ±20%. We keep exactly var(--space-md).

Now, we should ensure that our added properties don't conflict with the target "editorial-magazine" colors. Use cream #f5f1e8, ink #1a1a1a, deep red #c44536. The badge bg-warning originally yellow; overriding to red is a fresh palette. That is fine.

However, `box-shadow: 3px 3px 0 0 #1a1a1a;` — for sharp edges, use offset without blur. `box-shadow: 3px 3px 0 #1a1a1a;` is valid. It creates solid shadow. On text? No, box-shadow on badge. Good.

We also could add `outline: none`? Not needed. But "outline styles" can be changed, but no original.

We should not add `transform` because it is layout-affecting? Transform can affect visual layout (paint) but not document flow; however, it's not listed as allowed to change? Actually the "Never change" list includes "transform"? It is not explicitly listed. In general, transform doesn't change layout, but can affect visual position. The instruction says "Only colors, shadows, and decorative properties may change." Transform is decorative? Usually yes, but maybe not. Better avoid to be safe. We'll not add transform property, only transition on box-shadow if you want. But transition of transform may be harmless. Yet to be conservative, only include transitions for color/background-color/box-shadow. We can use `transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;` but no hover rule. It's okay, but not necessary. Since the variant says "Snappy transitions (0.15s)" — we can add transition to all elements. Good.

Let's craft final output:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        text-shadow: 2px 2px 0 rgba(245, 241, 232, 0.6);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        color: #f5f1e8;
        border-radius: 2px;
        box-shadow: 3px 3px 0 0 #1a1a1a;
        transition: background-color 0.15s ease-in-out, box-shadow 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: 2px;
        box-shadow: 4px 4px 0 0 #1a1a1a;
        transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
}

But wait: Is adding `background-color: #f5f1e8` to contact cards okay? If there was already a background-color defined globally, we override it at this breakpoint. That's a visual change. But the original rule only set padding; now we're adding background. That could cause cards to have a distinct background only on small screens. That's okay. But should we add a subtle border? No because border-width not allowed. Hard offset shadow compensates.

Could we include `-webkit-text-stroke`? No, not needed.

Need to ensure we don't add comments, no markdown.

Let's double-check selectors:

- `.app-hero-section .row .col-lg-7`
- `.app-hero-section .badge.bg-warning`
- `.contact-channels-section article`
- `.contact-quick-section .contact-card`

Preserved exactly. The comma list preserved.

Original had blank lines between rules; we can keep similar formatting. The output should be just CSS.

Potential issue: The `box-shadow` syntax "3px 3px 0 0 #1a1a1a" — 4 values: offset-x, offset-y, blur-radius, spread-radius. That's valid. `box-shadow: 3px 3px 0 #1a1a1a` is 3 values, blur=0. To get a hard offset, `box-shadow: 3px 3px 0 0 #1a1a1a` or `box-shadow: 3px 3px 0 #1a1a1a`. For editorial sharp edge, you often want `4px 4px 0 0`. Fine.

But in CSS, if you specify `box-shadow: 3px 3px 0 0 #1a1a1a` — the two zeros are blur and spread. It's okay. Some old browsers? Fine.

The target style "sharp-edges" says "Hard offset shadows: 4px 4px 0px solid color" — Actually shadows don't have "