/* ============================================================
   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 with visual changes only, preserving selectors and layout. The original CSS is inside a media query for max-width 575.98px. It contains:

@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 need to change colors, shadows, radius, transitions, gradients. But the original has no colors/shadows/radius/transitions — only text-align, font-size, padding. We cannot change those layout/typography properties (text-align, font-size, padding). But we can add visual properties? The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Since there are no such properties to change, we might need to add them? But the original CSS only has those rules. The mode is conservative, HTML fixed, visual changes only. We can add color, background, border-radius, box-shadow, transition to these elements? But we must be careful: adding properties might affect layout? Visual only. However, we are told to output only rewritten CSS, preserving selectors exactly. We can augment the existing rules with new visual properties? The original file is just a media query block. The target style "card-mosaic" and effect "soft-shadows" suggests we should apply visual treatment to card-like elements. But the selectors are .app-hero-section, .badge.bg-warning, .contact-channels-section article, .contact-quick-section .contact-card. We can add background, border-radius, box-shadow, transition, etc. But we cannot change padding? We can add border-radius etc.

But note: The instruction says "Only colors, shadows, and decorative properties may change" under "must change". But it also says "All color values ... box-shadow ... border-radius ... transition ...". Since original has none, we can add them. But "NEVER CHANGE" includes width/height/padding/margin etc. We can leave those as they are. But we're allowed to change border-radius. So we can add border-radius.

However, the output must preserve all selectors and layout exactly. The original has a media query. We should output the entire media query with the same selectors, and add visual properties. But we need to be careful: adding background to .app-hero-section .row .col-lg-7 might change the look but not layout. That's fine. But maybe better to add a card-like treatment to the contact cards and article. The target style "card-mosaic" with distinct card colors? The palette suggested: "Vibrant card colors on neutral background", "Each card type a different accent". For soft-shadows: multi-layer shadows, large border-radius, smooth transitions.

Given the selectors:
- .app-hero-section .badge.bg-warning is a badge. Could add background-color? But .bg-warning is a Bootstrap class. Overriding background-color might change it. That's allowed. We can set background-color to a gradient? Or use linear-gradient. But we must be cautious not to change font-size (already set). We can add box-shadow, border-radius, transition.
- .contact-channels-section article, .contact-quick-section .contact-card are card-like. We can add background, border-radius, box-shadow, transition. The original has padding using var(--space-md) !important. We must keep padding exactly (or within ±20%). We cannot change it. But we can add other properties.

Since original has no colors, we need to introduce a fresh palette. Use CSS variables? We can define custom properties? But adding :root block? The original file only has media query. We could potentially add variables inside the media query? But that may affect only within media query. Better to use literal colors.

We need to preserve the media query condition exactly: @media (max-width: 575.98px). We should keep that.

Now, the challenge: The original CSS doesn't contain any declaration blocks with visual properties. We need to add visual refresh. But the instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". So we can add declarations inside the existing rules. We just cannot remove or alter the existing declarations? Actually "rewritten CSS" implies we can rewrite the rules, but maintain the same selectors and layout-affecting properties. We can add new declarations. The original declarations:
- text-align: center;
- font-size: 0.85rem;
- padding: var(--space-md) !important;

These are not visual-only? text-align and font-size are typography/layout? The forbidden list says "text-align" and "text-transform" etc? Actually in the NEVER CHANGE list, under typography: text-align is included? Let's check: "text-align, vertical-align" are in the layout section? In the prompt, the NEVER CHANGE list includes "text-align, vertical-align" under "📐 LAYOUT". So we must keep text-align unchanged. Also font-size, font-weight, line-height etc under "📝 TYPOGRAPHY" are unchanged. So we must keep text-align: center and font-size: 0.85rem as is. Padding: var(--space-md) !important is under layout, can only change within ±20%, but since it's a variable, we can't change it? We should keep it as is.

Thus, we can add new declarations like background, border-radius, box-shadow, transition, backdrop-filter maybe. But we must ensure not to violate any other rules. Also we should not change the media query.

Given the target style "card-mosaic" with "soft-shadows", we can implement:
- For .app-hero-section .badge.bg-warning: add a warm gradient background, soft shadow, rounded pill, transition. But since it's a badge, maybe keep subtle.
- For .contact-channels-section article and .contact-quick-section .contact-card: add card background, border-radius, box-shadow, transition.
- For .app-hero-section .row .col-lg-7: perhaps add a decorative background? But that's a column, might be weird. Better not change it significantly. We can add only if needed. But we could add a subtle background gradient? However, the target style "card-mosaic" might apply to the cards only.

Let's design with a fresh palette. We need to replace colors? Original has none, so introduce palette. Let's pick a modern palette: soft background with vibrant card colors. Since we are in a media query for mobile, cards should look good.

Potential CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        /* maybe add a subtle background? */
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ff9a56, #ff6a3d);
        box-shadow: 0 4px 8px rgba(255, 106, 61, 0.25), 0 8px 20px -6px rgba(255, 106, 61, 0.3);
        border-radius: 12px; /* or 999px pill */
        transition: all 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff, #f0f4ff);
        border-radius: 16px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    }
}

But we must be careful: adding transition with transform could be considered animation value change, which is allowed. But we are not adding :hover rules (we can't add new selectors). So transition alone does nothing. Still fine.

However, we should maybe add a "distinct elevation" and "each card type a different accent". We can set different backgrounds for article vs contact-card? Since the selector list contains both, we can't differentiate unless we split them? But the selector list is " .contact-channels-section article, .contact-quick-section .contact-card { ... }". We must preserve the selector list exactly. We cannot split them into separate rules because that would change the selector structure? The instruction says "Selector lists (commas)" must be preserved. So we cannot separate. We can apply the same styles to both. But we could use CSS variables or additional selectors? We cannot add new selectors. We can only modify the existing rules. So both card types get the same background. That's okay.

Alternatively, we could use nth-child or something? But that would be adding new selectors, not allowed. So keep same.

Also, we might want to add a border or border-color. The original has no border. We can add border: 1px solid rgba(...) but border-width is not allowed to change? Actually the NEVER CHANGE list says "border-color and border-style (NOT border-width)" can change. But we can add border properties. Adding border-width would be adding a new layout property? It says "border-color and border-style (NOT border-width)" can change. That implies border-width is not allowed to change, but adding a border width where none existed might affect layout? It could affect box-sizing? Since box-sizing is not changed and default is content-box, adding border will increase element size, which could affect layout. To be safe, we can avoid adding border. Use box-shadow instead.

We can also add outline? Outline doesn't affect layout. But maybe not needed.

We should also consider the "card-mosaic" layout pattern: "Grid with mixed spans ... Medium gap ... Cards with distinct elevation ... Vary card sizes via grid-row span". But we cannot change grid layout because that would break HTML. The target style is just a style guide, but our constraints are conservative mode. So we cannot modify grid properties. The target style is "Aggressive only" but our mode is Conservative. The prompt says "Layout pattern (Aggressive only)" meaning that pattern is for aggressive mode, not ours. We should ignore that. Our mode is conservative, so we only do visual changes. The effect variant "soft-shadows" is applicable. So implement soft shadows and large border-radius.

Now, since the original CSS has only a media query, we can output the media query with the same selectors and the above declarations. We need to preserve the original declarations exactly? We should keep them. They are text-align, font-size, padding. We'll include them. Then add our new declarations.

But there is a subtlety: The original `padding: var(--space-md) !important` is a declaration. We must keep it, but we could also add `padding` in another declaration? No, duplicate properties could conflict. We should keep it exactly once. We are not allowed to change padding value. So we keep it.

Also, for `.app-hero-section .badge.bg-warning`, we must keep font-size: 0.85rem. We can add background, box-shadow, border-radius, transition. We may also add `color` maybe to ensure contrast. The badge is a warning color, likely has dark text. If we change background to orange gradient, we should set color to white or dark? We can set `color: #fff`? But color is a visual property, allowed. However, we need to think about the badge's existing text color. Since `.bg-warning` from Bootstrap has `color: #000` maybe. Changing to white might improve contrast. But we can set `color: #fff`; however, if the badge has a close icon or something, maybe not. Let's just set a darker text for accessibility? Actually orange background with dark text may be fine. But we can set `color: #3a2e1f`? Hmm.

Given "Vibrant card colors on neutral background", we can choose a vibrant gradient. Let's use a peach-orange gradient with dark brown text for contrast. But the text color is not specified in original. We can add `color: #2d1b0e` maybe. But we must be careful: We are not allowed to change font-weight etc, but color is allowed.

Alternatively, we could set `color: #1f2937` for a dark slate that harmonizes. Let's choose a cohesive palette.

Let's define a palette:
- Neutral background: #f8fafc (light slate)
- Card background: #ffffff with a hint of blue: linear-gradient(145deg, #ffffff, #f1f5f9)
- Accent 1 (badge): orange gradient #ff8a5c to #ff5e3a
- Accent 2 (cards): maybe a soft blue gradient? But both card types same.

Since we're adding background to the contact cards, we can set `background: rgba(255,255,255,0.85)` with `backdrop-filter: blur(10px)`? That would change backdrop-filter, allowed. But on mobile, backdrop-filter can be expensive. However, the target effect "soft-shadows" uses multi-layer shadows. We can use a semi-transparent background with backdrop blur for a glassy card. But then to be safe, use solid background.

Let's craft the output with all the required changes. Also, maybe we should add `border-radius` to all.

We also need to consider the `.app-hero-section .row .col-lg-7` rule. Since it only has text-align, we might add a `text-shadow`? That would be a visual change. But it's a column containing hero content; adding text-shadow might affect readability. We can add `text-shadow` for a subtle soft shadow? That could be nice. Also maybe a `background`? But that might be too much. To keep minimal and safe, we could add `text-shadow` and `transition`. But the instruction says "text-shadow" can change. We can add a subtle text-shadow. Let's add `text-shadow: 0 2px 4px rgba(0,0,0,0.06);` That is soft.

But we must ensure the layout isn't affected. Text-shadow doesn't affect layout.

Now, the original CSS is only a media query. There are no other rules. We need to output the entire file. Since the file fingerprint etc, we output only CSS.

Let's write final:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #451a03;
        border-radius: 999px;
        box-shadow: 0 4px 8px rgba(245, 158, 11, 0.25), 0 8px 20px -6px rgba(245, 158, 11, 0.35);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff, #eef2ff);
        border-radius: 18px;
        box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06), 0 12px 24px -8px rgba(15, 23, 42, 0.12), 0 24px 48px -16px rgba(79, 70, 229, 0.15);
        transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    }
}

Is that acceptable? We added text-shadow, color, etc. But we must check: "transition timing, easing, duration" can change. We can add transitions. But for `.badge.bg-warning`, we used `transition: transform 0.3s ease, box-shadow 0.3s ease;` That implies transform on hover, but no hover rule. It's okay but unnecessary. We can keep it.

However, there is an issue: We added `transform` in transition but no transform property. That's fine. But if a future :hover rule exists in another stylesheet, it will transition. Good.

Also, we used `border-radius: 18px` for cards. That's within 12-24px. Good.

We should also consider adding `-webkit-backdrop-filter`? Not necessary.

Now, we must ensure we didn't alter any forbidden properties. We kept text-align, font-size, padding. We added background, color, border-radius, box-shadow, text-shadow, transition. All allowed.

But there is a potential problem: The original selectors have `.app-hero-section .badge.bg-warning`. We kept it exactly. Good.

Now, the "target style" mentions "Grid with mixed spans" but we cannot change layout. So ignore.

Also, the instruction says "All color values ... must change" but since there were no color values, we introduced new ones. Good.

Let's double-check self-check list:
- Every selector preserved? Yes.
- display, position, etc unchanged? Yes.
- width, height, padding, margin within ±20%? Padding unchanged. No widths.
- font-family, font-size, font-weight, line-height unchanged? We kept font-size, didn't add font-family or font-weight.
- Colors throughout replaced with fresh palette? There were none, now fresh.
- Shadows redesigned? Yes, multi-layer.
- Border-radius adjusted? Yes.
- No AI marker comments? Yes.

One more thing: Should we include `color` for `.contact-channels-section article`?