/* ============================================================
   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 CSS according to the target style and variant, while adhering to conservative mode constraints. However, the original CSS is a @media block with only three rules. It's a small block. The target style is editorial-magazine with gradient-rich effect. We must preserve selectors exactly, and any layout properties (padding, font-size, text-align) must remain within ±20% or unchanged? For padding: in the original, padding is var(--space-md) !important. Since --space-md is a custom property, we can change its value? Actually the rule says "CSS custom properties (--color-*, --shadow-*) values" can change, but --space-md is a spacing variable, not color or shadow. It's a layout related custom property. The instruction says "padding, margin (keep similar values, ±20% maximum)" — but here padding is defined via var(--space-md). Changing the value of --space-md globally might affect other things, and it's not allowed if it changes layout. Better to keep padding as is. Also font-size: 0.85rem is typography, must remain unchanged. text-align: center is layout / text-align, remains unchanged. So the only changes we can make are add new visual properties to existing rules? But the task says "Refresh this CSS visually" — meaning we can add properties like background, border, box-shadow, border-radius, transition, gradients, etc. However, the rules are inside a media query. We can add new declarations to existing selectors, and possibly add new selectors? No, we must keep all selectors exactly. We can add declarations to existing rules. But if the original has no color-related properties, we can introduce them.

We must ensure that output preserves all original declarations and selectors, and adds new visual declarations. But careful: The original CSS block is only three lines. To transform it to editorial-magazine with gradient-rich, we might need to add background, color, border, etc. But the selectors are specific elements: .app-hero-section .row .col-lg-7, .app-hero-section .badge.bg-warning, .contact-channels-section article, .contact-quick-section .contact-card. We can add decorative styles to these.

Given the target style, we might want to add subtle backgrounds, gradients, border-radius, box-shadows, transitions. But we must not change layout. For example, for .contact-channels-section article, .contact-quick-section .contact-card, the original sets padding var(--space-md) !important. We can add background: linear-gradient(...), border: 1px solid, border-radius, box-shadow, transition. That would refresh the visual.

For the hero badge, add gradient background, text color, border, box-shadow, etc. The badge currently has class bg-warning which is a Bootstrap class. In editorial style, we should probably override the background color with a cream/ink palette and accent deep red. But we must preserve the layout and typography. We can add background: linear-gradient(...) and color: #1a1a1a etc. But note: if we change background of a badge, it might affect reading. We can do it.

For .app-hero-section .row .col-lg-7, we can add a background gradient with subtle cream? But this is a column containing text; adding background might change visual but not layout. However, we must be careful not to affect the layout. Adding background, padding? padding would change layout. We cannot add padding if not in original? The rule says "padding, margin (keep similar values, ±20% maximum)" — but adding padding to an element that previously had no padding would change layout, which is disallowed. So we should not add padding. We can add background, border-radius, box-shadow, maybe border but border takes up space and affects layout if border-width is non-zero. The instruction says "border-color and border-style (NOT border-width)" — border-width is a layout property? It does affect layout. So we cannot add a border with width. We can only change existing border-color/style, not add border-width. But if no border existed, adding border-width would change layout. So avoid adding border-width. We can use box-shadow which doesn't affect layout. So use box-shadow as a "border-like" effect. For gradient-rich, we can use background gradients on elements that don't have background. But does adding background to a column change layout? No, background doesn't affect layout. So that's fine.

We can add border-radius to elements; that doesn't affect layout? It rounds corners, no layout change. So ok.

We can add transitions; ok.

Thus, our strategy: For each existing selector, add decorative visual properties consistent with editorial-magazine and gradient-rich. Keep all original declarations intact.

Let's parse 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 need to output the same @media and selectors, with added declarations. The @media conditions must remain exactly. The selectors must remain exactly. We can add declarations after the existing ones inside the blocks.

Let's design the visual updates:

Target editorial-magazine color palette: cream/beige backgrounds #f5f1e8, ink black text #1a1a1a, accent deep red #c44536 or olive #6b705c. Gradient-rich: linear-gradient on most backgrounds, multiple stops, smooth long transitions (0.4-0.6s cubic-bezier).

For .app-hero-section .row .col-lg-7:
- text-align: center; (keep)
- Add background: a subtle radial gradient or linear gradient from cream to slightly darker beige? Since it's a column, maybe add a subtle gradient background to highlight the hero text area. Could use a soft radial gradient from #f5f1e8 to #eaded0 or something. But if the parent already has background, adding to column might create sections. We can do something like:
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(245,241,232,0.2));
  border-radius: 8px; (rounding visual)
  box-shadow: 0 4px 20px rgba(26,26,26,0.05);
But adding background might affect readability if the column is full of text. The hero section likely already has a background. To stay safe, perhaps we can add a subtle linear-gradient overlay using ::before? But we cannot add pseudo-elements because we can only change values, not selectors? Wait, pseudo-classes and pseudo-elements in selectors: "Pseudo-classes (:hover, :focus, ::before, ::after)" are listed as selectors that must be preserved. It says "Keep EXACTLY" — meaning if they are present in the original, keep them. It doesn't say we cannot add new pseudo-elements. But the instruction "Selectors (CRITICAL - HTML is fixed): ... Pseudo-classes (:hover, :focus, ::before, ::after)" — "Class names: keep EXACTLY (.post-card stays .post-card)" "Pseudo-classes" are selectors. Adding new pseudo-element selectors would change the CSS structure, which might be disallowed because we must keep "ALL selectors exactly as-is" and "Every selector character-for-character preserved?" The output should contain the same selectors, not necessarily only those? The instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" — that implies we should not add new selectors. So we cannot add new pseudo-element selectors. We can add declarations to existing selectors only.

Thus for .app-hero-section .row .col-lg-7, we can add background, border-radius, box-shadow, transition, but no new selectors.

Maybe we shouldn't add background to the column because it might affect the design negatively. But the task demands a refresh. We can add a gradient background that is very subtle.

For .app-hero-section .badge.bg-warning:
- font-size: 0.85rem; (keep)
- Add color: #1a1a1a or #f5f1e8? In editorial style, accent deep red. Let's make the badge background a gradient of deep red and maybe olive, with ink text. Since it's a warning badge, we can override its background entirely using CSS. Use:
  background: linear-gradient(135deg, #c44536 0%, #8e2f21 100%);
  color: #f5f1e8;
  border-radius: 2rem; (pill shape, but if it was already a pill? If not, adding border-radius changes visual only)
  box-shadow: 0 2px 12px rgba(196,69,54,0.3);
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
But note: The original .badge.bg-warning may have Bootstrap styles; our overrides will apply. We must not change padding (Bootstrap badge has padding), but that's okay because we're not changing it. Adding border-radius to 2rem might make it a pill if not already; if already pill, no layout change. Good.

For .contact-channels-section article, .contact-quick-section .contact-card:
- padding: var(--space-md) !important; keep.
- Add background: linear-gradient(145deg, rgba(245,241,232,0.9), rgba(230,220,200,0.6));
- border-radius: 12px;
- box-shadow: 0 8px 24px rgba(26,26,26,0.06), 0 2px 6px rgba(26,26,26,0.04);
- transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
But we also need to set border-color/style? We could add a border-style: solid with border-color, but border-width would be 0 by default, so adding border-style without width won't affect layout. Actually if border-style is set but border-width is 0, no visual. If Bootstrap sets border-width, then border-style would apply. We can set border: 1px solid? That changes width and layout. We should avoid. We can use box-shadow instead. Maybe use outline: none or something? Not necessary.

We need to consider gradient-rich: "Linear-gradient or radial-gradient on most backgrounds". For the article and card, use background gradients. For the hero column, use a gradient. For the badge, use a gradient. Good.

We also need "Smooth long transitions (0.4-0.6s cubic-bezier)". Use transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) or similar.

We need to ensure that the original declarations are preserved. Since we are outputting the entire CSS file, we should include the @media block and the original declarations plus new ones.

Let's craft the output:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: radial-gradient(circle at 70% 20%, rgba(245, 241, 232, 0.95), rgba(222, 210, 190, 0.4));
        border-radius: 16px;
        box-shadow: 0 4px 24px rgba(26, 26, 26, 0.04);
        transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #c44536 0%, #7a251d 70%, #6b705c 130%);
        color: #f5f1e8;
        border-radius: 4rem;
        box-shadow: 0 2px 16px rgba(196, 69, 54, 0.35);
        transition: all 0.6s 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, rgba(250, 247, 240, 0.9), rgba(235, 225, 205, 0.7));
        border-radius: 12px;
        box-shadow: 0 8px 28px rgba(26, 26, 26, 0.05), 0 2px 6px rgba(196, 69, 54, 0.08);
        transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

Wait, the original CSS is a fragment of a stylesheet, but we are to output the rewritten CSS. The input is a file with only this @media block? The user provided "File: assets/css/saishi.css#块2/2" and then the original CSS is exactly that @media block. So output that block.

We need to ensure that we don't violate the "all colors replaced with fresh palette" — we are adding new colors. The original had no colors. So yes.

But the instruction says "border-radius (visual rounding only)" — we can change. Good.

We need to consider "background" property: we are adding it. That's allowed. "box-shadow" added. "transition" added. All allowed.

Check if any of our additions violate "padding, margin keep similar ±20%". We didn't change padding/margin.

Check typography: We added color but didn't change font-size etc. For badge font-size is original 0.85rem, unchanged. Good.

Check that we didn't change selector list: The selectors are exactly the same. Yes.

Potential issue: The original `.app-hero-section .row .col-lg-7` is a layout column. Adding a background with border-radius may not be desired. But okay.

Another issue: For `.app-hero-section .badge.bg-warning`, Bootstrap's `.badge.bg-warning` likely has `color: #000` and `background-color: #ffc107`. We are overriding with a gradient. The `color: #f5f1e8` changes text color to cream, which might be okay. In editorial style, a deep red badge with cream text is elegant.

For `.contact-channels-section article, .contact-quick-section .contact-card`, we've added a light gradient background. The original might have had its own background; our addition overrides or sets it. Good.

But we must consider "custom properties (--color-*, --shadow-*) values" — we are not changing custom properties. Our values are hardcoded. That's fine.

Let's also consider if we should use `border-image` for gradient borders? The variant says "Gradient borders via border-image" but we cannot add border-width. We can use `border-image` only if a border-width exists. Since original has no border, adding border-width would change layout. So we skip border-image. Maybe `box-shadow` can simulate borders.

Should we use `backdrop-filter`? Not necessary.

Now, ensure the output is only CSS with no markdown. We'll output exactly that.

Double-check that we didn't add any comments. No.

One nuance: In the target style, "generous outer padding (40-80px)" cannot be applied because changing padding would break layout. So ignore.

Also "Asymmetric grids" cannot be changed. Ignore.

"Large gaps" cannot be changed. Ignore.

"Wide max-width" cannot be changed. Ignore.

Thus the output is only the media query block.

But wait: The task says "File: assets/css/saishi.css#块2/2" meaning this is part 2 of 2? It might be a fragment from a larger file. The user wants us to rewrite this fragment. So output only this fragment.

Let's finalize the CSS. We need to be careful about the order of rules. Original has blank lines. We can preserve similar formatting.

Now, let's check the gradient for badge: `linear-gradient(135deg, #c44536 0%, #7a251d 70%, #6b705c 130%)` — 130% is a valid position? In CSS gradient, color stop position can be >100%. Yes, but it's unusual. Better use `100%` for olive or maybe just two colors. Let's use `linear-gradient(135deg, #c44536 0%, #7a251d 100%)` but we want olive accent. Could use `linear-gradient(135deg, #c44536 0%, #8e2f25 55%, #6b705c 120%)` — perhaps avoid over-optimization. Simpler: `linear-gradient(135deg, #c44536 0%, #6b705c 100%)` — but that's red to olive, maybe muddy. Let's do a rich red gradient with a dark stop: `linear-gradient(135deg, #c44536 0%, #a1362b 60%, #6b2e24 100%)`. That keeps within red family. But to incorporate editorial olive as accent, we could add a subtle olive tint in the shadow or background. The target palette says "Single accent color (deep red #c44536 or olive #6b705c)" — so we can pick deep red as the primary accent and use cream/ink neutrals. The olive might appear in the background gradients. For example, the article background could include a hint of olive.

Let's adjust:
- Hero column background: `radial-gradient(circle at 20% 30%, rgba(255, 253, 248, 0.9), rgba(230, 220, 200, 0.4))`
- Badge background: `linear