/* ============================================================
   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 rewrite CSS with conservative mode. Need inspect file fingerprint maybe just snippet? Original CSS only media query with three rules. Need refresh visual identity without changing layout structure/class names. But this CSS has no colors, shadows, radius etc. We need modify? The task says refresh visually, keep selectors exactly, colors, shadows, radius etc. But original CSS only has text-align, font-size, padding. These are layout/typography? In conservative mode: text-align is never change? Actually text-align is in never change list under layout? It says text-align, vertical-align in layout were preserved? Typography fixed includes text-transform, white-space, word-break; font-size etc. But padding can change ±20%. Need output rewritten CSS with "fresh palette". But there are no colors. Maybe we can add visual properties like background? However HTML fixed, class names fixed, but adding new properties to same selectors? The instruction says "Only colors, shadows, and decorative properties may change." So we can add to selectors? It says CSS custom properties values. But HTML fixed. We need preserve selectors exactly. We can add color or border-radius to existing rules? They previously didn't change enough. Need make colors, shadows, radius more distinct. But if we add properties, that changes visual identity without breaking layout. Is adding allowed? It says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It may imply rewrite existing values. But maybe we can augment media query with new declarations, preserving selectors. Need check: In original, text-align center at media. We can add background, border-radius? But layout? Should be okay.

Need produce CSS with same selector structure, maybe same declarations? To be safer, preserve the existing declarations (font-size, padding) maybe with changed padding ±20. But add colors etc. But is it allowed to add declarations? It says "Only colors, shadows, radius, transitions, gradients." So yes, add decorative properties. However, maybe they expect rewrite of CSS file with same selectors and property names layout, but visual values changed. Since no visual properties in this snippet, perhaps we should add `background`, `color`, `border-radius`, `box-shadow`, `text-shadow`, `transition`, maybe `backdrop-filter`. But be careful not to break layout (adding box-shadow doesn't affect layout, border-radius doesn't, background doesn't). Need perhaps adjust padding within +-20%: `--space-md` is custom property? Can't change variable? We can change `padding: var(--space-md) !important` to something within ±20%? The variable value unknown; perhaps leave. But to make more distinct, we could use `padding: calc(var(--space-md) * 0.9) !important`? Is that allowed? It preserves layout within ±20%? Probably. But maybe don't change padding at all? The instruction says keep similar values, ±20% maximum. We can alter padding from var to maybe leave. But to show change, maybe add border-radius.

Need consider target style "horizontal-strips" with alternating backgrounds, soft-shadows. But this media query is for small screens. We can apply backgrounds to `.app-hero-section .row .col-lg-7`? That would be weird to give background to the column. Maybe we can add background colors to contact cards. But need not overdo.

Let's parse original selectors:

```
@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 rewrite same selectors exactly. Could modify each block by adding visual declarations:

- `.app-hero-section .row .col-lg-7` on mobile: maybe background gradient? But that is a column inside row; adding background might visually create strip. Could set `background: rgba(...)`, `border-radius: 20px`, `box-shadow: soft`. But this might affect mobile only. Is that okay? It changes visual identity, no layout.

- `.app-hero-section .badge.bg-warning` on mobile: Could change color, background-color, border-radius, box-shadow, text-shadow. But `.bg-warning` is a Bootstrap class; adding background-color could override? Fine. Need ensure text readable.

- `.contact-channels-section article, .contact-quick-section .contact-card`: Add background, border-radius, box-shadow, transition. The `padding` remains var(--space-md) maybe plus? We could change `padding: var(--space-md)` to `padding: calc(var(--space-md) + 2px)`? That is more than ±20? Unknown. Better leave. Maybe add border.

Need not include extra comments.

Potential issue: In CSS, combining selectors list with comma must preserve exactly. We can keep same.

Need ensure no markdown fences, no explanations. Output only CSS.

But perhaps "Original CSS" is just a snippet; the file fingerprint indicates part? User says File: assets/css/saishi.css#块2/2; maybe this is only section 2/2. The "Original CSS" is entire CSS to rewrite. So we only have that. Need output revised based on that. Might be okay.

Need maybe use a fresh palette. "horizontal-strips": alternating white / cream / dark / white. For mobile, contact cards can be cream background; hero column maybe dark? But text-aligned center. Let's choose an elegant palette.

Let's think of fresh colors: dark navy background? For `.app-hero-section .row .col-lg-7` add `background: #1f2a3a`? That would make background dark; but the text inside may not have contrasting color. We don't know text color. If we add dark background, existing text colors might be dark, unreadable. Better use light transparent background e.g., `rgba(255, 245, 235, 0.6)` cream. Add border-radius and shadow.

For badge `.bg-warning`: Bootstrap bg-warning is yellow. We can override with `background: linear-gradient(135deg, #ff9a56, #ff6a3d)`? Or a fresh "sunset" strong color. Need not maintain "warning" semantics? Maybe okay. But `.bg-warning` often used for badge; if we override to a coral/orange, still warning-like. Add text color `#fff`, border-radius `999px`, box-shadow.

Contact cards: Add background: `#fffaf2` cream, border-radius: `18px`, box-shadow: `0 4px 12px rgba(0,0,0,0.06), 0 18px 32px -12px rgba(0,0,0,0.12)`. Also maybe border: `1px solid rgba(255, 255, 255, 0.5)` to create soft edge. But border-width? We can set border style/color but not width? "border-color and border-style (NOT border-width)" means if adding border, we need default? Actually `border: 1px solid` sets width; not allowed. Could use `border-color`, `border-style`, but without width? If no width, no visible. We can use `outline` instead? Outline styles (color, type) can change; outline-width? Not in never-change list, but only outline styles allowed. We could set `outline: 1px solid` but that sets width. Better avoid. Use box-shadow for border-effect.

Need maybe add `backdrop-filter: blur(8px)` to contact cards? This is decorative; okay. But with background semi-transparent. However backdrop-filter may affect performance, but fine.

Need keep `!important` on padding declaration; must preserve exactly? Yes, property value includes `!important`. If adding other declarations, we can include `padding: var(--space-md) !important;` unchanged. On second thought, to create more change, perhaps adjust padding to `padding: calc(var(--space-md) * 0.9) !important;` because 10% reduction. But var unknown and could be a length; calc works. But "padding" in NEVER CHANGE except ±20% max. We can keep as original to be safe. But then not "visual change"? There are other visual changes. Maybe no need.

Need maybe add transition: `transition: background 0.35s ease, box-shadow 0.35s ease, border-radius 0.35s ease;` to cards. But this is decorative.

Need ensure not change font-size? The rule `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` must remain. Could add line maybe `font-size: 0.85rem;` unchanged. Can't change. Add letter-spacing? That's typography; should not change. Don't.

Need for `.app-hero-section .row .col-lg-7` text-align center; preserve.

Potential issue: adding `background` to `.app-hero-section .row .col-lg-7` could alter the text color? We can set `color: #2b2b2b` maybe but that changes color allowed. We can set if necessary. But existing text color maybe defined elsewhere. We can set color to dark brown to ensure on cream background. Do we know hero text? Better maybe don't set color; just background with `color: inherit`? But to be safe, use very light translucent cream with no text color. However, if text is light, it could be bad. But mobile hero section maybe has background elsewhere. Let's not overrisk. Could just add `background: rgba(255, 248, 240, 0.35);` and `backdrop-filter: blur(4px);` and border-radius. This is subtle.

But "MORE distinct this round" indicates need stronger palette. Use `background: #fdf6e9` maybe solid.

Maybe target "horizontal-strips" means each strip full-width with alternating bg colors. In mobile, `.contact-channels-section article` and `.contact-quick-section .contact-card` get cream; `.app-hero-section .row .col-lg-7` maybe dark ink. But text colors? Let's inspect typical hero section: `.app-hero-section` might have a dark navy bg with white text; adding dark background may harmonize. We can set `.app-hero-section .row .col-lg-7 { background: #202a3a; color: #f5f0e8; border-radius: 24px; box-shadow: ...; }` But if the column is inside hero, and the hero already dark, a dark background and white text might be fine. However, if hero text is already white, okay. But if hero text is dark, not okay. There is no context. Need avoid breaking readability. Maybe don't set color.

Alternative: apply background to pseudo-elements? The selector doesn't include pseudo. We can't add pseudo to existing block? Would change selector? Not allowed. Could use `background-image` on the element itself.

Let's choose colors that are not too heavy, with high compatibility:
- Hero col: `background: rgba(255, 244, 230, 0.5); border-radius: 18px; box-shadow: 0 10px 30px rgba(80, 50, 30, 0.06);`
This is a warm cream overlay. If text white, might be visible but still okay? White text on semi-transparent cream over dark background becomes cream, maybe low contrast. Hmm.

Maybe better to not touch hero col background, only add border-radius and shadow? But shadow with transparent? Could use `border-radius: 20px; box-shadow: 0 8px 24px -8px rgba(0,0,0,0.12);` no background.

But instruction says change colors. Need colors somewhere. Badge and contact cards can have strong colors. That's enough.

Let's design visual identity:
- Palette: "dusk ember": warm cream, deep teal, coral orange.
- Hero col: maybe `border-radius: 24px;` `box-shadow: 0 8px 20px rgba(44, 62, 80, 0.06);` and `background: rgba(44, 62, 80, 0.02);` minimal. But that's barely distinct.
- Badge: background linear-gradient(135deg, #e76f51, #f4a261); color white; border-radius 999px; box-shadow 0 8px 16px rgba(231, 111, 81, 0.28); text-shadow 0 1px 2px rgba(0,0,0,0.12)
- Contact cards: background linear-gradient(145deg, #fffaf2, #fdf0e3); border-radius: 20px; box-shadow multi-layer: `0 4px 8px rgba(90, 73, 60, 0.04), 0 18px 36px -10px rgba(90, 73, 60, 0.12);` transition: `transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;` Wait `transform` is layout? It's not mentioned; could change layout? It may animate transform, but okay? We need maybe not include transform because it can cause movement. Add `transition: box-shadow 0.35s ease, background-color 0.35s ease;` no transform.
- Add `border: 1px solid rgba(255,255,255,0.6)`? Not allowed? border-width if omitted? Actually `border: 1px solid` sets width 1px, so not allowed. We can use `box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7)` as border effect. This is box-shadow allowed. Use inset shadow with 1px? Box-shadow doesn't affect layout. Good.

Need maybe add `padding: calc(var(--space-md) * 0.96) !important;` to slightly change; but `--space-md` may be e.g. 1rem, calc okay. 4% reduction within 20. We can maybe use `padding: calc(var(--space-md) + 2px) !important;` But if --space-md is 0? Not. I'd keep original padding to avoid weird. The instruction says padding keep similar, ±20%. If we leave, exactly same. Fine.

Need maybe add `--radius`? Not needed.

Need preserve media query condition exactly: `@media (max-width: 575.98px)`.

Need output no markdown fences.

Let's craft CSS:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: rgba(255, 244, 230, 0.35);
        border-radius: 24px;
        box-shadow: 0 8px 24px -8px rgba(74, 62, 50, 0.08);
        backdrop-filter: blur(6px);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #fff;
        background: linear-gradient(135deg, #e76f51, #f4a261);
        border-radius: 999px;
        box-shadow: 0 10px 22px -6px rgba(231, 111, 81, 0.45);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #fffaf2, #fae7d6);
        border-radius: 20px;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.7),
            0 4px 8px rgba(93, 75, 60, 0.04),
            0 18px 36px -12px rgba(93, 75, 60, 0.14);
        transition: background-color 0.4s ease, box-shadow 0.4s ease, border-radius 0.4s ease;
    }
}
```

Need check selector exact `.app-hero-section .badge.bg-warning` unchanged. Good. The `.contact-channels-section article, .contact-quick-section .contact-card` unchanged. The media query unchanged.

Potential issue: Changing font-size? no. Changing text-align? no. Padding unchanged. Layout unchanged.

Need maybe "horizontal-strips" alternating dark? We have cream cards and hero col overlay. The badge is orange. Could be okay.

But is `backdrop-filter` allowed? It is decorative. yes.

Need maybe add `-webkit-backdrop-filter`? Not necessary but for Safari? Could add, but it's visual. But adding extra property with vendor prefix okay. However, preserving all selectors doesn't matter. We can include `-webkit-backdrop-filter: blur(6px);` perhaps. But it's a decorative property. Should we? Might be fine. But output should be clean. We can include it for compatibility. It doesn't change layout.

Need maybe add `outline`? Not needed.

Need maybe not add `transition` with border-radius? Transitioning border-radius is okay. Could include `background` rather than background-color because background is gradient; transition background won't animate, but no harm. Better use `transition: background 0.4s ease, box-shadow 0.4s ease;` But `background` transition won't animate gradient. Could use `background-color` but background is gradient. Fine.

Need maybe add hover? Can't because selectors? Could add `:hover` but original didn't have, and adding pseudo-class changes selectors? The rule says pseudo-classes? "Pseudo-classes (:hover, :focus, ::before, ::after)" in never-change list meaning preserve if present, but adding new? Since HTML fixed, adding new pseudo-class to selectors would create new selector,