/* ============================================================
   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 the user. Need rewrite CSS visual only. Need inspect original CSS. It's a media query block with selectors. Need keep selectors exactly. Only colors, shadows, radius, transitions, gradients. Original has no colors? It uses font-size, padding, text-align. But we must refresh visual identity without changing layout, typography. The CSS has font-size 0.85rem, padding var(--space-md) !important, text-align center. These are typography/layout? Padding can change ±20%? The original padding: var(--space-md) !important; It is a custom property. We can change value? But need keep padding within ±20%. Also maybe we can add visual properties like border-radius, background, color, box-shadow, etc to these selectors without changing layout? But need ensure not changing class names, element etc. We can augment with colors/shadows/radius etc. But user says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is." The original only has media queries. Need rewrite with same selectors and add visual identity? "Only change colors, shadows, radius, transitions, gradients." If no colors present, need introduce fresh palette maybe? But careful: adding properties like background, color, border-radius is allowed? It says only colors, shadows, and decorative properties may change. "All color values" must change. Since original has no color, maybe we should set new colors? The goal is visual identity. However "layout exactly as-is" means can't change layout. Adding background/color might alter text color, but not layout. Should we output only the original plus visual additions? Need not add layout. We can include media query same, with new color declarations maybe. But maybe "rewritten CSS" should preserve all selectors and layout. Since original has only text-align, font-size, padding. We can keep those, and add color, background, border-radius, box-shadow, transition, maybe? But adding background may affect visual. Need ensure "padding within ±20%" from original: padding var(--space-md). Without knowing var value, but if we set padding var(--space-md) !important? Keep same. Could set padding: 1rem? But original uses var. Need keep? "CSS custom properties (--color-*, --shadow-*) values" allowed. We don't have those. But `--space-md` is not a color/shadow. Keep it. Could perhaps add `padding-inline: calc(var(--space-md) * 1.1)`? But not needed. Need maybe use "border-radius" with var? We can add `border-radius: 20px;`? But selectors include article and contact-card. Original `.contact-channels-section article, .contact-quick-section .contact-card` with padding. Adding border-radius may be visual and not layout. But if we add background, could change. Need consider "sidebar-classic" target style. Wait this file is from `assets/css/saishi.css#块2/2` and target style sidebar-classic, effect airy-rhythm. But original snippet is just media query. Could there be more context? They provided only this snippet. Need rewrite snippet only.

Need maybe include same media query and selectors, replacing declarations? The original CSS has:
@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 to first selector color? text-align center remains. Maybe "text-align: center;" is layout? It's text-align, allowed unchanged. Need not change font-size. Add `color: ...`? Might not be desired. But "color palette" from target suggestions "Sidebar darker (#252e3a), main lighter; Functional accent". Maybe we can use background in media? Hmm.

Need perhaps output exactly same CSS but with colors/shadows/radius maybe in new properties? Let's parse "ALL SELECTORS AND LAYOUT EXACTLY" and "No markdown". The original has no colors. To "Refresh visual identity" we could set `:root` or variables? But selectors fixed? We can add new selectors? Not allowed. But can add custom properties? It says output "rewritten CSS", presumably preserve all selectors. Don't add new selectors. Could add `--color-*` values within existing blocks? Not ideal. We need maybe only modify existing declarations: change `text-align: center;`? Not allowed. Could change `font-size: 0.85rem;`? Not allowed (typography fixed). Padding unchanged? Could maybe change `padding: var(--space-md) !important;` to `padding: var(--space-md) !important;` same. But no visual refresh. Need add colors and shadows.

Maybe there are other blocks in original file? The user only gave "块2/2" meaning block 2/2, perhaps this is one chunk of CSS file. They ask refresh this CSS snippet. Need output the same code, maybe enhanced with visual properties but constrained. We can add declarations to the selector blocks but not new selectors. That is likely.

Let's define a fresh palette based on sidebar-classic target: Main lighter `#f5f7fb`, sidebar darker `#252e3a`, accent for actions. But the selectors don't include sidebar. Need maybe set `.contact-channels-section article, .contact-quick-section .contact-card` to have background `#ffffff`, border-radius 20px, box-shadow soft pillowy. That aligns airy-rhythm. In media query phone, cards can have larger radius, shadow. But adding shadows to article could be okay. Need avoid affecting layout? Box-shadow no layout. Background can make article visible. Border-radius. This would refresh. For `.app-hero-section .row .col-lg-7` maybe add color? It is text block; if we set `color` maybe to text color. But original doesn't. Could add `color: #2b3441;`? Could be okay. For `.badge.bg-warning` maybe add background? But class `bg-warning` likely has background; no need. But set color maybe. However background-color on badge could change, but not layout. Should we? Probably can add `background-image: linear-gradient(...)`? Maybe.

Need be mindful: `bg-warning` class from Bootstrap likely already sets background-color. In media query, original sets font-size. Could add `border-radius: 999px; box-shadow: ...` maybe. But these are visual.

However instruction says "Only change colors, shadows, and decorative properties may change." Adding properties is a change; but allowed if decorative. "Keep ALL selectors and layout exactly as-is." adding property does not alter layout. Fine.

Need maybe output with same spacing exactly. But if we add box-shadow to article and card, in phone layout maybe nice. Could include `margin`? not needed.

Need maybe define custom property values? We can use `padding: var(--space-md) !important;` unchanged.

Let's think about target "sidebar-classic" layout pattern: "Two-column structure: grid-template-columns: 280px 1fr or 1fr 320px; Moderate gap". But snippet has no grid. We cannot add grid because would change layout. So don't.

Need maybe adjust `transition` timing? None in original; can add `transition: box-shadow .3s ease, transform .3s ease;` but transform may not layout? It's visual, but could be considered "animation" property? It is not in never change? It says "transition timing, easing, duration" may change, but adding transition is okay. However transform? Not explicitly allowed? It says only colors, shadows, decorative properties, border-radius, transitions, gradients. Transform is a decorative property maybe? But never change list includes "animation-name" value not transform. But "layout" not include transform perhaps. But to be conservative, avoid transform. Use transition for background-color, box-shadow, border-radius. But there's no hover selector, so transition no effect unless other CSS outside. But adding transition to article doesn't hurt.

Need ensure "first character = first CSS character" no markdown.

Let's craft output:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f6b73c 0%, #f5a623 100%);
        color: #252e3a;
        border-radius: 999px;
        box-shadow: 0 6px 16px -6px rgba(245, 166, 35, 0.45);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border: 1px solid rgba(37, 46, 58, 0.08);
        border-radius: 20px;
        box-shadow: 0 12px 32px -12px rgba(30, 40, 55, 0.18), 0 4px 12px -8px rgba(37, 46, 58, 0.08);
        transition: box-shadow 0.25s ease, background-color 0.25s ease, border-radius 0.25s ease;
    }
}

Need verify allowed: border-color is allowed. `border: 1px solid ...` changes border-style? width 1px. Border-width never change? It says "border-color and border-style (NOT border-width)" — likely set border-color/ style but not width. But if original had no border, adding border with width may change layout slightly (box-sizing border-box? unknown) and is border-width. Not safe. Avoid adding border, or use `outline`? Outline also may affect? Outline doesn't layout, but can be visual. But adding `outline: 1px solid rgba(...); outline-offset: -1px;`? This is allowed maybe, but creates border-like. But layout no. However outline affects visual. Yet border-radius on outline? No. Use box-shadow to simulate border if need. Better not add border. Border-radius and box-shadow enough.

Also `background: #ffffff;` on article/card may override existing backgrounds? In mobile maybe bootstrap cards have white background anyway. Fine. `border-radius: 20px` may be large; target airy-rhythm 16-28px. Good.

Need maybe "padding: var(--space-md) !important" same as original. But adding `padding`? We're preserving.

Potential issue: The original CSS's `.contact-channels-section article, .contact-quick-section .contact-card` sets padding: var(--space-md) !important. If we add background etc, okay. But if original has no `display:block` etc, no change.

Potential issue: `color: #2b3441` in first block may not be desired because `.col-lg-7` may contain many child text colors; setting color parent could cascade but maybe fine. Could instead add `text-shadow: 0 1px 0 rgba(255,255,255,0.6);` but that's a shadow. Maybe "text-shadow" allowed. But perhaps not needed. Need visually refresh, but the first selector might just center text, not color. Could add `color` to establish text color. Hmm.

Need maybe set `.badge.bg-warning` `color: #252e3a` and `background: linear-gradient`; but Bootstrap `.bg-warning` background color has property. If both, our rule in media query likely higher source order? It appears later? Unknown. It sets background-image and background-color? `background: linear-gradient` resets background-color transparent? It may override Bootstrap's bg-warning. Fine.

Need maybe use `--space-md` remains. Could we change `padding: var(--space-md) !important;` to `padding: var(--space-md) calc(var(--space-md) * 1.2) !important;`? But "padding, margin (keep similar values, ±20% maximum)" and `var` unknown. Better keep.

Need maybe in output, the original media query selectors exactly preserved? Let's compare:
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;
    }
}
Our output with additions preserves.

Need maybe add comments? Not allowed by "No AI-REWRITTEN comments". We can avoid comments entirely.

Need maybe choose new color palette exactly from target. Sidebar darker #252e3a, main lighter. The palette perhaps: sidebar #252e3a, main lighter #eef2f7, accent #f5a623. We can use those.

Need perhaps include "filter: drop-shadow"? Not necessary.

Could perhaps add `backdrop-filter: blur(12px);` to cards? Decorative, but might affect if background semi-transparent. But if background solid, no. No need.

Need maybe include `accent-color`? Not relevant.

Need maybe include `caret-color`? no.

Need maybe use `outline-color`? no.

Need maybe add `box-shadow` with multiple layers as required. We do.

Need maybe adjust `border-radius` in badge. The badge `border-radius` may already be pill; adding `border-radius: 999px` likely fine. Could be "large radius". Good.

Need maybe add `text-shadow` to first block? Hmm, `text-shadow` on a whole column could be weird. Maybe no.

Could perhaps set `.app-hero-section .badge.bg-warning` to `box-shadow` and `border-radius`. But if the badge already has border-radius from Bootstrap, no issue. `background: linear-gradient` uses background-image and background-color; okay.

Could add `transition` to first block? not necessary.

Need think: Is the output expected to "only changed colors, shadows, radius, transitions, gradients" but not "added new selectors" and no "layout changes." Good.

Potential issue: The instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must change. Since original had none, our addition changes them. Good. But if original had `var(--space-md)` which is custom property; we keep. Should we use `--space-md` in padding unchanged. Good.

Potential issue: "font-size: 0.85rem" can't change, we leave.

Potential issue: "text-align: center" can't change, we leave.

Need maybe after output no markdown fences. Should output just CSS. Before output, no explanation.

But let's think if there is an alternative: Perhaps user expects CSS output exactly same but with colors from "Target style" applied globally by replacing colors in original. Since original snippet has no colors, the only visual changes possible are the ones we add. So likely okay.

Need perhaps include `@media (max-width: 575.98px)` unchanged. Yes.

Need perhaps choose background on contact cards but if parent has background, no issue. The selectors `.contact-channels-section article` and `.contact-quick-section .contact-card` in mobile. With "generous spacing" maybe padding var(--space-md). We might set `padding: calc(var(--space-md) + 0.25rem) !important;` within 20%? But original var could be 1rem; adding 0.25rem would +25%? Actually 1.25rem vs 1rem = +25%, exceeds 20. Better keep exactly.

Need maybe adjust var? no.

Need perhaps add `--color-*` custom property? No.

Let's maybe produce:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f8c15c, #f4a423);
        color: #252e3a;
        border-radius: 999px;
        box-shadow: 0 8px 20px -10px rgba(244, 164, 35, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(12px);
        border-radius: 22px;
        box-shadow: 0 18px 40px -20px rgba(37, 46, 58, 0.28), 0 6px 18px -10px rgba(37, 46, 58, 0.12);
        transition: box-shadow 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease;
    }
}

Need check `backdrop-filter` allowed? It is listed "filter, backdrop-filter". Yes allowed. But with background semi-transparent and blur, nice. On mobile supported? fine. It's decorative.

Need ensure "background-color" in transition: if no background-color property, transition doesn't do. But still okay. Could transition `transform` but avoid. Maybe transition `box-shadow` and `border-radius` only.

Should we set `background: rgba(255,255,255,0.92)`? If there is an underlying colored background, blur shows it. But in target, main lighter. Could maybe use solid `#f9