/* ============================================================
   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 respond CSS only. Need follow constraints. We have original CSS snippet small media query. Need refresh visually. Must preserve selectors, layout, typography. Can change colors, shadows, radius, transitions, gradients etc. But there aren't many. Need output rewritten CSS preserving all. But perhaps likely need include original entire file? User provided only block #2/2? Need possibly requested "File: assets/css/saishi.css#块2/2" but original CSS snippet only a media query. We must only output rewritten CSS preserving all? Could maybe add some visual properties within existing rules and maybe not add new selectors? The instruction says keep selectors exactly. We can modify values within these selectors. Original has no colors. We can add color/shadow/gradient/radius/transition properties to those rules? Since visual identity refresh, but layout unchanged. Need not add new properties? It says only colors, shadows, decorative properties may change. Adding background or color to existing rules isn't changing layout. But HTML selector covers. Could. However "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Since original has only styles in media query. We can preserve the media query and these selectors. Need target dense-dashboard, gradient-rich. Need maybe use cool grays, accent blue, gradient. But existing rules: text-align center, font-size, padding. Could add transition, border-radius, background? The media query overrides. Need be careful not change layout. Add color/background maybe within article/card. But perhaps in mobile, card padding changes. Need maintain.

Question: User's request has "块2/2" maybe means second CSS chunk. Need maybe process only chunk shown. Need output exactly. Need perhaps "CSS custom properties --space-md" remains? Can't change custom prop? Values can change. It's used var(--space-md) in original; changing value at root would be needed if we wanted. But no root block. Could include? No selectors. Need not.

Need decide how to rewrite. We can add transition and gradients in the media query rules. But "Never change layout" okay. However "Keep all selectors and layout exactly as-is": adding declarations to existing rule is okay because selector preserved; layout values unchanged? If we add background etc no layout. But could adding border affect layout? use box-shadow or outline not border maybe. Use background gradient no layout. Use border-radius no layout. Good.

Need maybe avoid changing font-size? They said font-size unchanged, but original has font-size in badge rule. We should keep fontSize exactly? "Typography: font-size, font-weight..." must not change. But they said can change visual identity and allowed no typography. Original .badge font-size: 0.85rem; keep. Maybe change color? Need no.

Need maybe include a comprehensive set of declarations? But maybe the original CSS file has earlier part? We only see this chunk. Could be from a larger file, but "块2/2" means block 2 of 2. Need maybe rewrite entire file? It says Original CSS only media query. So output that.

Need target palette: cool grays #1e293b, #334155, accent blue #3b82f6; White cards on slate background. Gradient-rich. Could rewrite:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(30,41,59,0.02) 60%);
        -webkit-background-clip: text? No would hide if text? Better not.
    }
    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
        color: #ffffff;
        box-shadow: 0 8px 20px -8px rgba(59,130,246,0.6);
        border-radius: 999px;
        transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1);
    }
    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff, #eef2f7);
        border-radius: 16px;
        box-shadow: 0 12px 32px -12px rgba(30,41,59,0.25), inset 0 1px 0 rgba(255,255,255,0.8);
        transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1), background-color .5s ease;
        border: 1px solid transparent;
        background-clip: padding-box;
    }
}

Need be cautious with .badge.bg-warning original bootstrap bg-warning maybe background-color. Adding background and color. But "background" no layout. Using `!important`? original no. Could use because original class maybe? We can use `background: linear-gradient(...) !important;` to override .bg-warning. Since current rule inside media query has only font-size, but Bootstrap .badge.bg-warning background might apply with same specificity? Actually .badge.bg-warning specificity 0,2,0 if both classes; our selector same. Later order? If Bootstrap CSS order before/after? This custom file likely later, but if not? Original didn't override background. We should avoid relying? But desired visual. Using `!important` maybe acceptable. It changes styling. Keep font-size unchanged. Also color, border etc. Fine.

Need examine "first char = first CSS char": when output media query starts `@`. no markdown. Need output only CSS.

But let's think deeply: Maybe the task expects processing an entire file but only gave snippet; possible system doesn't include full css due chunking. Need maybe preserve exactly and rewrite. But output only snippet is okay.

Need maybe include "dense-dashboard" style? Our snippet is mobile, not dashboard. Need perhaps use slate and card white.

Need maybe adjust border-radius and transitions. Need not change padding? Original padding `var(--space-md) !important;` Keep exactly. We can add. Since padding already included. Should not alter. Good.

Need maybe also add `border-radius` to `.app-hero-section .row .col-lg-7`? Maybe not.

Need maybe add `background: linear-gradient(...)` to `.app-hero-section`? We don't have parent rule and cannot add selectors. Could within `.app-hero-section .row .col-lg-7`, but if text-align center, gradient background on the col might be okay. But background-clip? no.

Need maybe think about "text-shadow" allowed. Could add to hero text? But selector col div, no. If we set color, not type. However maybe there is a heading inside. But cannot select child? Adding descendant new selector not allowed. So no.

Need maybe include CSS variables? Could set `--space-md` not relevant.

Need maybe if we add `background` to article and `background-clip`, make padding. Fine.

Need maybe override `border-radius` but original layout? `border-radius` visual only. Good.

Need perhaps use `outline` etc. Good.

Need maybe use `accent-color`, `caret-color` not relevant.

Need perhaps use `@media (prefers-reduced-motion)` not allowed? New media query selector? It's a media query not matching original breakpoints? They forbid @media breakpoints? "Media query @media breakpoints (conditions only)" in never change; we can't add new @media. So no.

Need perhaps use `transition` property. Fine.

Need perhaps set `.contact-channels-section article, .contact-quick-section .contact-card` { border: 1px solid transparent; } — Does transparent border preserve layout? Border-width 1 changes layout? Wait border-width is layout? It is not in prohibited layout? Border-color and border-style can change, border-width NOT. Adding border width 1 would change dimensions/size because `box-sizing` maybe border-box? The original padding with border-box? Not certain. Adding border width invalid per "border-color and border-style (NOT border-width)" -> Never change border-width. That implies don't add border-width. If we add `border: 1px solid transparent`, that's a border-width change. Avoid. Use `box-shadow` for border effect instead. Could use `outline` but outline doesn't layout maybe allowed. Better not add border. If using gradient border via `border-image`, need border-width. Not allowed. So no.

Need maybe adding `box-sizing` no. no.

Need maybe `background-clip` okay. But if no border, no issue.

Need maybe `transform` transition? Transitioning transform but not setting transform? Could in hover? But no :hover. Adding transform to existing always could affect layout? transform visual only but can affect visually. Better avoid transform unless not. We can just transition box-shadow and background. But target "smooth long transitions" can add transition property, but without hover/state change not much. It might apply to changes. Fine.

Need maybe not add `color` to badge? `.bg-warning` is background, text color from badge maybe default. If background becomes blue, text should be white to maintain contrast. That is okay. But is changing text color from warning-yellow to blue? It's a visual identity refresh. It might affect text contrast. Fine.

Need maybe "avoid `!important`" maybe use same specificity and file order, no. To override Bootstrap `.bg-warning`, if custom CSS follows Bootstrap, no need. But we don't know. Original CSS in file did not override background maybe because only font-size. It could be because in mobile they just need adjust font size. If we add background without important, maybe bootstrap wins? Need determine specificity:
- Bootstrap `.badge.bg-warning` has both classes = 0,2,0.
- Our selector `.app-hero-section .badge.bg-warning` = two classes in first (app-hero-section? actually .app-hero-section is one class) plus .badge and .bg-warning = total three classes = 0,3,0. Thus higher. No important needed.
The background from Bootstrap `.bg-warning` maybe a class with `background-color: #ffc107 !important`? Bootstrap utility `.bg-warning { background-color: #ffc107 !important; }` indeed has !important. If so, same specificity but important needs important. In Bootstrap 4/5, `.bg-warning` background-color uses `!important`. So to override, need `background: ... !important` or `background-color`. Yes. So use important.

Need maybe if we use `background: linear-gradient(...) !important`, also `background-color` maybe not. Good.

Need perhaps not change background of `.contact-*` with !important? Original `padding ... !important`, but background no important needed.

Need maybe use CSS custom properties? Could set `--space-md`? But not.

Need perhaps "layout pattern (Aggressive only)" says Tight multi-column grids: repeat... This is to guide if original has. We cannot change if not. Fine.

Need perhaps "gradient-rich variant: Multiple stops for richness". Need use 135deg.

Potential final CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 45%, #2563eb 100%) !important;
        color: #ffffff;
        box-shadow: 0 10px 24px -10px rgba(59, 130, 246, 0.65), 0 2px 6px rgba(30, 41, 59, 0.08);
        border-radius: 999px;
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
        background-color: #ffffff;
        box-shadow: 0 16px 40px -16px rgba(30, 41, 59, 0.28), 0 4px 12px -8px rgba(51, 65, 85, 0.12);
        border-radius: 14px;
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

Need consider if `padding` property appears, but added `box-shadow`, `border-radius`, etc. okay.

Need maybe use `filter`? no.

Need maybe there is exact requirement `border-radius (visual rounding only)` — yes.

Need maybe "transition timing, easing, duration" — yes.

Need maybe "Multiple stops for richness" — yes.

Need maybe "White cards on slate background" — card gradient white to slate. Good.

Need maybe "Cool grays #1e293b, #334155" — use via text color, shadows. But if change `.col-lg-7` color to #334155, might override inherited colors? But okay. However original rule only text-align. Adding color could affect text. But hero may have headings with their own color? The col itself text color maybe. If inheriting, could alter. It's visual. But not necessary. Could use `color: #334155`? Allowed, but might make hero text same slate. But target. Fine.

Need maybe not set `.app-hero-section .badge.bg-warning` color because badge likely has color inherited; adding white good. But if `.badge.bg-warning` original `color: #212529` from Bootstrap? Our selector has high specificity, no important? To override color, no important maybe. But if `.text-dark` etc no. For accessibility, white on blue. Good.

Need perhaps `border-radius: 999px` gives pill for badge. Visual only. Good.

Need maybe `transition: transform` but no transform. If hover state changes? Could be no. But okay.

Could use `transition: box-shadow .5s..., background .5s...` no layout.

Need maybe if no `:hover` there, transitions don't matter. But target says smooth long transitions. Could include. No harm.

Need maybe "Aggressive only" layout pattern but we can't. Fine.

Need ensure no pseudo classes added. no.

Need maybe "selector lists commas" preserve exactly. yes.

Need maybe "First character = first CSS character" If final starts with `@media`, good.

Need maybe no blank line? It can have blank. Fine.

Need maybe "No markdown fences" no.

Let's think if use of `!important` is allowed? It's a CSS declaration. Layout unchanged. Fine.

Need maybe if output only this media query, user might expect entire original file with other chunks? The file fingerprint "块2/2" means "part 2/2", but only original code block is the media query. The user specifically provided original CSS snippet. We rewrite that. It's acceptable. But perhaps the original full CSS is bigger and they split into two chunks; our chunk from mid-file maybe part 2. They want "File: assets/css/saishi.css#块2/2". They included original CSS as a media query at the end maybe. We should not generate missing first part. The instruction says "Output the rewritten CSS now" for provided original. Good.

Need maybe if `--space-md` custom property value changes? no.

Potential issue: `background: linear-gradient(...) !important` sets `background-image` and `background-color` initial. If we also need `background-color` fallback? Since gradient important, but old browser? no. We can include `background-color: #3b82f6 !important;` before gradient? But if `background` shorthand in same declaration resets. We could:
background-color: #3b82f6 !important;
background-image: linear-gradient(135deg, ...) !important;
Maybe easier. Or `background: linear-gradient(...) !important;` But for override `.bg-warning` utility with !important, any `background` declaration with !important overrides. Good. But if using `background: linear-gradient(...) !important`, it sets background-color transparent; old browsers no gradient. But target modern. Could include fallback separately:
background-color: #3b82f6 !important;
background-image: linear-gradient(135deg, #60a5fa 0%, #3b82f6 45%, #2563eb 100%) !important;
This is robust. Both are important. Need maybe line numbers.

Need maybe `.contact-channels-section article` background gradient into card. But if background shorthand not important. Fine.

Need maybe "border-image" gradient borders variant suggests use border-image. But cannot change border-width. Could use background gradient with `outline`? Maybe we can use `box-shadow: inset 0 0 0 1px transparent`? But `box-shadow` with spread 0 0 0 1px color border-like, no layout. Could simulate gradient border via two backgrounds? Example:
background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #e2e8f0, #f8fafc) border-box;
border: 1px solid transparent; 
But border-width change prohibited. However target variant says "Gradient borders via border-image". But constraint forbids border-width. We shouldn't. Use box-shadow as border; not actual border. Since original doesn't have border, adding 1px box-shadow no layout. Could use `box-shadow