/* ============================================================
   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 are given a CSS file fragment that is a media query block. The task is to refresh the visual identity without changing layout structure or class names. The original CSS has three rules inside a media query:

@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 be conservative: only change colors, shadows, radius, transitions, gradients, etc. But this CSS block doesn't contain any color or shadow properties. It only has text-align, font-size, and padding. These are typography and layout properties that we are explicitly forbidden to change. Specifically, text-align is listed under layout: "text-align, vertical-align" — cannot change. font-size is under typography — cannot change. padding is under layout with "keep similar values, ±20% maximum" — but here it's using a custom property var(--space-md). We cannot change the value because it might be defined elsewhere, but we could potentially adjust the padding value? The instruction says padding, margin (keep similar values, ±20% maximum). However, we are told to only change colors, shadows, etc. Here there are no color properties. So we need to maybe add something? The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." This block doesn't have any of those. We should not change anything? But maybe we can add color-related properties? That would be adding new properties, not just changing values. However, the instruction says "All color values: background, color, border-color, fill, stroke, outline-color" — we can change them if present. But they are absent. We could add e.g., color, background, border-radius, box-shadow, transitions to these selectors, but that would change the visual appearance without changing layout. The target style is "horizontal-strips" with "airy-rhythm" variant. However, the original CSS is just a mobile media query for a few elements. We could enhance with e.g., border-radius, box-shadow, background, color, etc. But we must be careful: adding properties won't break layout if they are visual only.

But we need to "preserve ALL selectors" and "layout exactly as-is". We can add visual properties. However, we should not alter existing properties like text-align, font-size, padding. So we can leave them unchanged and add e.g., border-radius, box-shadow, background, color, transition, etc.

Let's think about the context. The file is "assets/css/saishi.css", block 2/2. The original is a media query. The target style is "horizontal-strips" with "airy-rhythm". This suggests we might want to add visual styling to match that aesthetic. But since the HTML is fixed and we don't know the rest of the CSS, we need to be minimal. The output should be the rewritten CSS. Since there are no color properties, we might choose to add some to these selectors to fulfill the task. But is that allowed? The rules say "Only change colors, shadows, radius, transitions, gradients." It doesn't say "only change existing properties"; it says "change" these. Adding new properties of those categories is arguably a change. However, the self-check says "Colors throughout the file replaced with fresh palette?" That implies we should replace existing colors. If there are none, maybe we don't need to.

Given the original block is entirely layout/typography, the only safe thing is to output it unchanged. But the task explicitly asks to "Refresh this CSS visually" and "Only change colors, shadows, radius, transitions, gradients." Since there are none, the output could be exactly the same. But that seems anti-climactic.

Let's look at the instruction "Output the rewritten CSS now". The user expects a rewritten version. We need to stay conservative, though. The "Target style: horizontal-strips" mentions "Layout pattern (Aggressive only)" but we are in conservative mode. The "Effect variant: airy-rhythm" wants "Generous spacing, Large border-radius, Soft pillowy shadows, Breathing room everywhere." We could add these visual flourishes to the selectors in the media query. Since it's a mobile media query, adding border-radius and box-shadow could be appropriate.

We must ensure we do not change any of the protected properties. We can add:
- border-radius
- box-shadow
- background, color (maybe)
- transition
- etc.

But we need to be careful: adding display or position or width etc. would break. We will only add visual properties.

Let's examine each rule:

1. .app-hero-section .row .col-lg-7 { text-align: center; }
We can add maybe color, background? But this is a column, likely containing text. Changing color might affect text color. We can add a border-radius? Not meaningful on a column. We could add box-shadow? Could look odd. But it's a hero section column. Maybe we can add a subtle text-shadow? But that's typography? text-shadow is allowed. We can add text-shadow.

2. .app-hero-section .badge.bg-warning { font-size: 0.85rem; }
This is a badge with Bootstrap class bg-warning. We can add background color? But bg-warning sets background. We could override with a new background gradient? However, this is a Bootstrap class; overriding its background-color with a color property is allowed. But note: the selector includes .bg-warning, which is a Bootstrap utility. If we change background, it might conflict. But the instruction says we can change colors. We could add border-radius, box-shadow, transition.

3. .contact-channels-section article,
.contact-quick-section .contact-card { padding: var(--space-md) !important; }
We can add border-radius, box-shadow, background, border, transition, etc.

Given the "airy-rhythm" variant: large border-radius (16-28px), soft pillowy shadows, generous spacing. We can add border-radius: 24px; box-shadow: 0 16px 40px -12px rgba(0,0,0,0.12); etc.

We also need to think about the color palette: "Alternating: white / cream / dark / white pattern" and "Strong color zones". We can introduce a cream background, dark text, etc. But since this is a small block, we can add a cream background to the card/article, dark color for text, etc. However, we must be careful not to override Bootstrap bg-warning too aggressively. But it's fine.

Let's formulate a rewritten version. We'll keep the media query condition exactly the same. We'll keep the three rules and their selectors. We'll keep text-align, font-size, padding unchanged. We'll add visual properties:

Rule 1:
.app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #2c2c2c; /* but this changes text color globally, may be okay */
    /* Maybe not necessary. */
}

Actually, we should be cautious. The style "horizontal-strips" suggests alternating background colors per strip, but this media query is for mobile, and the hero section is probably a strip. We could add a gradient background? But that might affect layout because it's a column. Better to keep it simple.

Maybe it's okay to output the original unchanged because there are no visual properties to change. But the user expects a change. The task says "Refresh this CSS visually." If there is nothing to refresh, we might say so, but the output must be CSS only. We need to rewrite it with the same selectors and layout, adding visual properties.

Let's think of a reasonable transformation:

- For .app-hero-section .row .col-lg-7: add text-shadow? Or maybe just keep.
- For .badge.bg-warning: add border-radius: 20px; box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4); background: linear-gradient(135deg, #ffd54f, #ffb300); color: #1a1a1a; transition: transform .3s ease, box-shadow .3s ease; But adding transform is a layout property? Actually transform is not listed under protected? It says "position" but not transform. But transform could affect visual layout, so maybe avoid. Transition on transform is okay, but no transform property.
- For article/.contact-card: add background: #fff; border-radius: 24px; box-shadow: 0 20px 40px -15px rgba(0,0,0,0.1); transition: box-shadow .3s ease; maybe border: 1px solid #f0e6d2;

But we must ensure we don't change padding. The padding is already var(--space-md), we can leave.

We also need to consider that the media query is inside a larger file, and this block is only a fragment. We should output exactly this fragment with modifications.

Potential output:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffe29a, #ffc94d);
        color: #3d2b00;
        border-radius: 20px;
        box-shadow: 0 6px 18px -6px rgba(255, 193, 7, 0.5);
        transition: box-shadow 0.25s ease, filter 0.25s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #fffdf8;
        border-radius: 24px;
        box-shadow: 0 20px 45px -18px rgba(62, 48, 32, 0.18);
        border: 1px solid #f2e8d8;
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}

But we added transform to transition, not the property. That's fine. However, we added background, color, text-shadow, border, border-radius, box-shadow. All are visual. We did not change padding. We kept font-size. We kept text-align. We kept selectors. We didn't change media query.

But we need to be careful: adding a background to .col-lg-7 could interfere with layout if it's a flex item? It's just background, no layout. But we added color and text-shadow. We can do that.

However, we must not add "border" width changes? Border width is not specified, we set 1px, that's adding a border. The original didn't have border. This changes box-sizing? It could affect layout if box-sizing is content-box, but border is 1px, which could alter dimensions. Since we already have padding, adding border might increase element size. Is that acceptable? The protected property says "border-color and border-style (NOT border-width)". So we should not set border-width. But we set "border: 1px solid #f2e8d8" which includes width. That's forbidden. We should avoid setting border-width. Instead, we can set border-style and border-color only, but if no border-width, it may not show. Or we can use outline, which doesn't affect layout. Better to use outline or box-shadow imitating a border. The protected list says "outline styles (color, type)" can change, but we cannot change outline width? It says "outline styles (color, type)" — "type" means style (solid, dashed), not width. So we can set outline-color and outline-style, but not outline-width? Actually, adding outline-style without width might default to medium width, affecting layout? Outline does not affect layout. So we can set outline: none? But we can set outline-color and outline-style. Let's avoid border.

Use box-shadow to simulate a border: inset 0 0 0 1px rgba(...). That's visual only.

Let's refine:

- For article/card: background: #fffdf8; border-radius: 24px; box-shadow: 0 20px 45px -18px rgba(62,48,32,0.18), inset 0 0 0 1px rgba(240, 230, 210, 0.8); That's a soft border.

- For badge: background gradient; color; border-radius; box-shadow; transition.

- For col: text-shadow and maybe color.

But we need to be mindful of the "horizontal-strips" target: alternating white/cream/dark. Since this is mobile, maybe the hero section should have a cream background, but we don't know the existing background. Adding background to .col-lg-7 might be okay. But maybe the hero section already has a background. We can add a background-color to .contact-card and article to cream.

Let's check the selector: .contact-channels-section article, .contact-quick-section .contact-card. These are likely cards in contact section. We can add border-radius and box-shadow.

Also, we should not change any existing properties like padding. We keep padding: var(--space-md) !important; exactly.

Let's craft the final output. But before finalizing, consider the self-check:

- Every selector character-for-character preserved? Yes.
- display, position, grid-template-*, flex-direction unchanged? We didn't add.
- width, height, padding, margin within ±20%? We didn't change padding.
- font-family, font-size, font-weight, line-height unchanged? We kept font-size.
- Colors throughout the file replaced with fresh palette? We added new colors.
- Shadows redesigned? Yes.
- Border-radius adjusted? Yes.
- No AI marker comments? Yes.

One issue: The instruction says "Only change colors, shadows, radius, transitions, gradients." We also added text-shadow, which is a shadow. We added color. Good. We added transition. Good.

Could we change the existing font-size? No, we left it.

What about the `text-align`? We left it.

Thus, the output seems acceptable.

But let's think: The user asked "File: assets/css/saishi.css#块2/2" which is "block 2/2" in Chinese. It's a fragment. So we should output only this block.

Let's ensure the media query condition is exactly the same. Yes.

Now, let's consider whether to add a media query for the target style "horizontal-strips". But the target style is more of a layout pattern (full-width sections), which we cannot change because it would require changing display and width. The "airy-rhythm" variant fits our additions.

We should also note: "Generous spacing (Aggressive: padding 32-56px, gap 32-48px)" but we cannot change padding more than ±20%. The original uses var(--space-md), which is probably less than 32px. We shouldn't change it. We could add margin? No, keep as is.

Let's output:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffe4a2, #ffc94d);
        color: #483000;
        border-radius: 18px;
        box-shadow: 0 6px 16px -6px rgba(255, 200, 50, 0.45);
        transition: box-shadow 0.25s ease, filter 0.25s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #fffaf2;
        border-radius: 24px;
        box-shadow: 0 22px 40px -18px rgba(80, 60, 40, 0.2), inset 0 0 0 1px rgba(240, 225, 205, 0.9);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}

Is "filter" transition okay? We didn't set filter. We could set transition for box-shadow and transform only. But transition on transform without a transform property might be okay. But if an interaction later adds transform, it would animate. However, we don't want to introduce transform. The transition property itself is a visual change, allowed. We can set transition for box-shadow and background-color. Let's set transition: box-shadow .3s ease, background-color .3s ease.

But we added background gradient, so background-color transition won't apply to gradient. We can set transition: box-shadow .3s ease, transform .3s ease. That's fine.

However, adding transform to the transition list might be considered "changing" transform? No, we're not setting a transform value.

Alternatively, we can omit transition entirely to be safe. But the instruction says we can change transitions. We can add.

Let's think about "Strong color zones": we could give the article a darker background? But that would change appearance drastically. We don't know the surrounding context. Keep it subtle.

One more thing: The original block uses `!important` on padding. We must keep it exactly.

Could we change the `var(--space-md)` to a slightly different value? No, that would be changing padding.

Also, we should not add any property that might be considered layout-affecting, e.g., `width: 100%`, `margin-top`, etc. We won't.

Now, let's ensure we don't change the