/* ============================================================
   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 provided CSS visually, but the provided CSS is a media query with rules that are mostly layout (text-align, font-size) and padding (within ±20% we can adjust slightly). However, we are allowed to change color values, shadows, etc. But this CSS has no colors except maybe none. Let's inspect.

Original CSS:

```
@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 cannot change font-size? Actually, "font-size" is in the typography section that says "font-size, font-weight, font-style" are not to be changed. So keep font-size: 0.85rem. text-align cannot change because it's in typography? Actually "text-align" is listed under layout? It says "text-align, vertical-align" in the layout block under "NEVER CHANGE". Wait, the list says:

📐 LAYOUT (HTML cannot adapt to changes):
  ...
  • text-align, vertical-align

So we must keep text-align: center.

Padding: We can change padding but keep similar ±20%. var(--space-md) is a custom property. We could change --space-md value? But the CSS references a custom property defined elsewhere. We are allowed to change CSS custom properties values. But we shouldn't add new custom property definitions here? We can maybe change the padding to a specific value that is within 20% of var(--space-md) but since we don't know the value, better keep as is. But the instruction says "Only colors, shadows, radius, transitions, gradients" can be changed. In this block, there are no colors. So perhaps we need to add something? But we must not change class names or selectors. We can add new declarations? The instruction says "Rewrite this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It doesn't explicitly forbid adding new color/shadow properties to existing rules. But we must not break layout. So we can add box-shadow, transition, border-radius, etc.

But the target style is "dense-dashboard" with soft shadows. We can apply to those elements. However, need to keep within media query. We can modify the properties that are already there, but we can add properties that are visual (color, background, box-shadow, border-radius, transition) to these selectors.

But the selectors target specific components: .app-hero-section .badge.bg-warning, .contact-channels-section article, .contact-quick-section .contact-card. We can add visual properties to them.

But the rule set is inside a media query. We need preserve the media query condition exactly. We can keep the media query and the selectors, and add new declarations.

However, the instruction says "Output the rewritten CSS now" and "every selector character-for-character preserved". So we need to output the same selectors, same media query. We can add declarations.

We also need to consider the user requested "File: assets/css/saishi.css#块2/2". We only have this snippet. We should output a complete CSS block.

Let's craft new CSS:

For .app-hero-section .row .col-lg-7: text-align: center (keep). We could add color, background? But not necessary. But to make visual change, we can add a subtle background or border? But that might affect layout? Adding background won't affect layout if no padding. But adding box-shadow might affect? box-shadow doesn't affect layout. So we can add box-shadow to the contact cards.

We need to be careful with the .badge.bg-warning: It has font-size. We can add background-color? The class bg-warning likely comes from Bootstrap, but within media query we can override. We can change background to a new color, color, box-shadow, border-radius, padding? But padding would affect layout? For a badge, padding is okay but may change size; but we can keep within ±20% of existing padding? There's no padding in the rule. If we add padding, that changes layout maybe. Better to avoid adding layout-affecting properties. We can add color, background, box-shadow, border-radius.

But the target palette: cool grays #1e293b, #334155, accent blue #3b82f6. White cards on slate background. Soft shadows.

So let's add:

- .app-hero-section .badge.bg-warning: 
  background-color: #3b82f6; (accent blue) maybe the warning becomes blue? But class says warning - likely yellow. We can change to a softer warm amber? But target palette cool gray / blue. We might use #f59e0b? That is amber. But the instruction wants fresh palette. Let's use #3b82f6? But "bg-warning" from Bootstrap is #ffc107. Changing to blue may be misleading. But we are allowed. But target style "dense-dashboard" likely uses blue accents. We can set background to #3b82f6, color: white, box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3), border-radius: 999px.

- .contact-channels-section article, .contact-quick-section .contact-card:
  background-color: #ffffff;
  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; (but transform changes layout? Actually transform does not affect layout, but it's a visual effect. However, transition may be okay. We can also transition box-shadow only.)
  But if we add background-color: #fff, and the parent may be slate. That matches white cards.

Need to consider the padding: original padding: var(--space-md) !important. We can keep. But we can add border-radius after padding? It doesn't matter. Also, if we add background-color, the padding remains.

Also, we must ensure that we don't adjust padding by more than 20%. We aren't.

Need to make sure the output starts with first character = first CSS character. So we output @media (max-width: 575.98px) { ... }

But the media query is part of a larger file? It's block 2/2, maybe there is more CSS. We just output the rewritten block.

We can also adjust the custom property --space-md? No, not in this block.

Let's write the updated CSS with all original rules preserved, plus added visual declarations.

We'll preserve selector formatting exactly: with spacing? The 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;
    }
}
```

We'll output with same indentation, same line breaks. We'll add properties.

Let's decide:

For first rule, .app-hero-section .row .col-lg-7. We can add color: #1e293b; but that might override text color. It's fine. Also maybe text-shadow? But target "soft-shadows" maybe not needed. But to enforce new palette, add color: #1e293b (slate).

For badge:
```
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background-color: #3b82f6;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
    border-radius: 999px;
}
```

For contact cards:
```
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background-color: #ffffff;
    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: box-shadow 0.3s ease, transform 0.3s ease;
}
```

But transform might be a layout property? Actually transform is a visual change but it is not in the "never change" list? The never change list includes display, position, grid, flex, width, height, padding, margin, gap, justify-content, align-items, align-self, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, object-position, text-align, vertical-align. Transform is not mentioned. So we can use transition on transform, but if we don't add a hover transform, it's fine. But transition of transform could cause animation later if another rule adds transform. That might be okay. But to be safe, we can transition only box-shadow, background-color. Or add transform: translateY(0) as a base? Not necessary.

But maybe we should include hover states? We can't add new selectors? The instruction says "Pseudo-classes (:hover, :focus, ::before, ::after)" are selectors to keep exactly. It doesn't say we cannot add them. But "HTML is FIXED" - we can add :hover rules for visual feedback. However, the "never change" list says "Selector lists (commas)" etc. It doesn't explicitly prohibit adding new rules. But the instruction "Keep ALL selectors and layout exactly as-is" could imply we should not add new selectors, because we must keep all selectors. But adding new selectors would add, not change. It says "SELECTORS (CRITICAL - HTML is fixed): Class names: keep EXACTLY (.post-card stays .post-card)". It doesn't say you cannot introduce new selectors, but the conservative mode likely expects to output the same rules with visual changes, not new rules. To be safe, don't add new selectors. We can add properties to existing selectors only.

So for contact cards, we can add a transition on box-shadow and border-radius. But if no hover state, transition has no effect. Still, we can include it as part of visual identity. Or we can omit transition. The style variant says "Smooth transitions (0.3-0.5s ease)". To apply transitions, we need a state change. We can add transition but not hover. It's okay; it's a property. If later there is a hover state in another media query, it'll transition.

But maybe we can add :hover in a new rule? However, the instruction "Selector lists (commas)" and "Pseudo-classes" are listed as things to preserve, not to add. I think it's safer not to add new selectors. We'll just add transition declarations.

Also, we can add border: 1px solid rgba(30, 41, 59, 0.05) maybe? But adding border changes box sizing? Actually with box-sizing: border-box, adding border reduces content width, but if box-sizing: content-box, it expands. We don't know. Better not add border. We can add "outline" maybe? But outline doesn't affect layout. We can add outline: none? Not necessary.

We can add backdrop-filter? Not sure.

Let's consider "Only colors, shadows, radius, transitions, gradients." So allowed to add:
- color, background-color, border-color, fill, stroke, outline-color
- box-shadow, text-shadow
- border-radius
- transition
- gradients (background-image)
- opacity, filter, backdrop-filter, caret-color, accent-color
- custom property values

We can add any of these.

So for first rule:
- color: #1e293b (or #334155)
- maybe background: none? No need.

For badge:
- background-color: #3b82f6
- color: #fff
- box-shadow: 0 4px 8px rgba(59,130,246,0.3)
- border-radius: 999px

For contact cards:
- background-color: #fff
- border-radius: 16px
- box-shadow: multi-layer
- transition: box-shadow 0.3s ease
- maybe color: #1e293b? But the card may already inherit.

Need to also consider that .contact-channels-section article and .contact-quick-section .contact-card may already have padding, but adding background and radius will not affect layout. Good.

Now, what about the body background? Since this is block 2/2, there may be other CSS outside this media query defining the body. We don't need to change it. But if we want the slate background, we can add a property to the hero section? But that's not in this snippet. We can limit to these selectors.

But the target style says "White cards on slate background". Since we don't have a body selector, we can maybe set the .contact-channels-section article background to white, and maybe its parent background to slate? We can't add a parent selector. We could add background-color to .contact-channels-section article to white, which is fine. The slate background may be on body or container; not our problem.

Let's write the output exactly with same formatting and no comments.

We need to ensure no "AI-REWRITTEN" comments. Output only CSS.

One more thing: The original has a comma selector with line break:

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

We'll preserve that exact selector list. We'll add declarations after padding.

Let's craft:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #3b82f6;
        color: #ffffff;
        border-radius: 999px;
        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        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: box-shadow 0.3s ease, transform 0.3s ease;
    }
}
```

But adding transition with transform may be problematic if no transform property. Could transition "background-color" as well. But okay.

Do we need to add "transform: translateZ(0)" to trigger GPU? No.

Should we add a hover state? No.

But maybe the target "soft-shadows" expects large border-radius (12-24px). 16px is good. The dense-dashboard layout uses compact padding; we are keeping.

Now, should we change padding? The original padding is var(--space-md). We could replace with a fixed value like 1rem? But var(--space-md) is likely 1rem. Changing to 1rem could be within 20%. But better keep the variable.

Also, the media query condition should remain exactly: "(max-width: 575.98px)".

Now, the user said "File: assets/css/saishi.css#块2/2". There may be a previous block. We are only outputting this block. Good.

Let's self-check:
- Selectors preserved? Yes.
- Media query preserved? Yes.
- font-size unchanged? yes.
- text-align unchanged? yes.
- padding unchanged? yes.
- Colors replaced? Added new colors.
- Shadows redesigned? yes.
- Border-radius adjusted? yes.
- No AI comments? yes.

But one issue: The original padding uses !important. We preserve it. We add declarations after padding but before closing brace. The !important applies to padding only. Good.

Now, can we use "transform" in transition? We are not allowed to change flex-direction, etc. Transform is not in the never-change list, but transition on transform is a visual property, not a layout. However, if a transform is later applied by a hover rule, the transition will animate. That's fine. But if there is no hover rule, no issue. But to avoid potential side effects, maybe transition only box-shadow and border-radius. But border-radius could be transitioned too. Let's use "transition: box-shadow 0.3s ease, border-radius 0.3s ease;" That's safe.

Also, color can be transitioned? Not necessary.

Let's include "transition: box-shadow 0.3s ease, border-radius 0.3s ease;" That's smooth.

But "0.3s ease" meets the 0.3-0.5s.

Now, the badge background color: "bg-warning" is a Bootstrap class that typically sets background-color: #ffc107 to cards. If we override it inside media query, it will apply at small screens. That is okay.

We could also set "background-image" with a gradient? Maybe not.

Let's consider adding a subtle gradient to the cards, but target style "soft-shadows" not necessarily gradients. But the task says "gradient colors and stops" can change, but not required. We can use a linear-gradient for a subtle background? But white cards on slate, so solid white is fine.

Let's make sure the card on slate: if parent background is slate, white cards stand out. Good.

Now output.

Wait, the instruction says "NO markdown fences, no explanations". So final output should be only CSS. We'll output that.

But