/* ============================================================
   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 with rewritten CSS only, no markdown explanations. Need refresh visual identity while keeping selectors/layout. Original CSS is small:

@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;
    }
}

Need only change visual properties: maybe text-align? That's layout? text-align is allowed? In "Typography" section: text-align under "never change" vertical-align? It lists text-align, vertical-align under Layout? It says NEVER CHANGE: "text-align, vertical-align" under Layout. So cannot change text-align. font-size under typography cannot change. padding cannot change more than ±20%; can keep same or maybe adjust within 20%. But original padding is var(--space-md) !important. We can change variable? It is a custom property? The rules can change custom properties values but only if declared? Could add declarations? Better preserve. Since only existing properties are text-align, font-size, padding. We can add visual declarations like color, background, box-shadow, border-radius, transition, filter, etc. But must keep selectors. Need not change existing properties? "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." We can add new visual properties without breaking layout. But need be mindful of .badge.bg-warning likely has Bootstrap background warning. Could add background-color? This changes color. Need style.

Need produce CSS with same selectors exactly. We can include additional declarations inside media query. Also maybe define colors? Since no root. Could add only within blocks.

Need "editorial-magazine" style: cream backgrounds, ink text, accent deep red/olive. Soft shadows: multi-layer, large radius, transitions.

But original selectors are media query. We can add properties. Need not add new selectors. Need no comments. Need preserve @media condition.

Let's think visually:
- .app-hero-section .row .col-lg-7 centered; maybe add color: #1a1a1a? Actually original inherited. Could set color to ink black. Maybe background? No.
- .app-hero-section .badge.bg-warning: font-size 0.85rem. We can set background-color: #c44536? But "bg-warning" class normally yellow. Editorial magazine accent deep red; badge could be deep red with cream text. But if we set background-color: #c44536 and color: #f5f1e8, that changes visual identity. Also border-radius: 999px? Maybe large border-radius 12px? For badge pill, border-radius 999px okay. Need not change font-size. Add box-shadow. Add transition.
- Contact cards: padding var(--space-md). Add background-color: #fff? Maybe cream, box-shadow multi-layer, border-radius 16px, transition? But need respect background maybe can set background: #f5f1e8? Cards on cream background need white/cream. Use background-color: rgba(255,255,255,0.8), backdrop-filter: blur(12px), border? We can add border: 1px solid rgba(26,26,26,0.08), border-radius: 16px, box-shadow: 0 4px 8px rgba(26,26,26,0.04), 0 20px 40px -10px rgba(26,26,26,0.1). Since selector `.contact-channels-section article, .contact-quick-section .contact-card` applies padding. Could add visual properties. This is fine.

But note: "Only change colors, shadows, radius, transitions, gradients." So adding background-color, box-shadow, border-radius, transition. Also maybe border-color. Need ensure no layout changes.

Could also add "backdrop-filter" but doesn't change layout. Fine.

Need maintain selectors exactly, no changes. For properties existing, cannot change font-size/text-align/padding. Padding variable — keep. Font-size keep. text-align keep.

Need maybe "var(--space-md)" remains. No changing.

Need output only CSS. No code fences. First char = first CSS char.

But consider "text-align" is allowed? It says never change, we keep. Good.

Need perhaps set background-color on `.app-hero-section .badge.bg-warning`: But Bootstrap `.bg-warning` uses `--bs-warning-bg` and background-color. If we override with deeper specificity maybe okay. Use same selector, set background-color. However, "bg-warning" in Bootstrap 5 uses `--bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity))`. Our rule with class specificity (0,3? .app-hero-section .badge .bg-warning = 3 classes) beats Bootstrap `.bg-warning` maybe 1 class, so yes.

Need not change font-size. Add color property. Need decide color: deep red #c44536 or olive #6b705c. Editorial magazine accent single accent. Use deep red for badge; text cream. For cards, maybe olive border? Better one accent. Use #c44536 only as accent? Can also use #6b705c for borders? Target says "Single accent color (deep red #c44536 or olive #6b705c)" choose deep red. Neutral cream/beige bg and ink text. Since selectors don't include background at page level. Could add to cards.

Need maybe set `.app-hero-section .row .col-lg-7` with color? But original maybe text color inherited. We can add color: #1a1a1a; This is visual. Also maybe background: transparent? No need.

Need maybe for .col-lg-7 add text-shadow? Probably not. But can add "text-shadow: 0 1px 0 rgba(245,241,232,0.6)"? Weird. Better not.

Need maybe badge transition and box-shadow:
```
    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        color: #f5f1e8;
        border-radius: 999px;
        box-shadow: 0 2px 4px rgba(196,69,54,0.2), 0 8px 16px -4px rgba(26,26,26,0.15);
        transition: background-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
    }
```
But adding transform in transition? "transition" allowed, values can change. But if transform property not set, no issue. However maybe add `will-change`? Not needed. Adding transform transition might imply changing transform on hover, but no hover selector. Could still. But transition of transform on base doesn't affect layout. Fine.

Need maybe cards:
```
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background-color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(26, 26, 26, 0.06);
    border-radius: 18px;
    box-shadow: 0 4px 8px rgba(26, 26, 26, 0.04), 0 20px 40px -10px rgba(26, 26, 26, 0.12);
    backdrop-filter: blur(10px);
    transition: box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
}
```
Need careful: `.contact-channels-section article` maybe article element has background? It's okay. Could set `background-color` and border. It might alter layout? Border adds 1px to width if box-sizing? Usually box-sizing border-box. But padding/margin unchanged? Adding border can affect layout if box-sizing isn't border-box. Since original didn't have border, adding 1px can change dimensions. Need avoid adding border? Conservative mode says "border-color and border-style" may change, but not border-width. It says "border-color and border-style (NOT border-width)" can change. So adding border-width would violate? It says NOT border-width. So cannot add border-width. But if we add `border: 1px solid` that's border-width. Not allowed. Could use `box-shadow` to simulate border using inset? But shadow allowed. Use `box-shadow: inset 0 0 0 1px rgba(...)`? That's box-shadow, not border. It doesn't affect layout. Good. Need avoid border. Use box-shadow with inset to create border. Or maybe `box-shadow: 0 4px 8px ..., 0 20px ..., inset 0 0 0 1px rgba(26,26,26,0.06)`. This is visual.

Need background-color not layout. Radius no layout. Backdrop-filter no layout. Transition no layout.

Need maybe set `padding: var(--space-md) !important` keep. Can't change padding. But could add margin? Not needed. Avoid layout.

Need maybe `color` property on cards: #1a1a1a. That might impact but okay.

Need maybe for `.app-hero-section .badge.bg-warning` adding border-radius 999px no layout.

Need maybe for `.app-hero-section .row .col-lg-7` with background? no.

Need maybe add `.app-hero-section .row .col-lg-7 { text-align: center; }` and maybe `color: #1a1a1a;` Does this count layout? color okay. Maybe no.

Could also use CSS variables? Since target says custom properties values can change. But no existing. Could introduce custom properties? That might be okay but need not.

Need keep only media query? It might be okay to add outside root? But "ONLY rewritten CSS" can include media query. No new selectors. We should keep same structure. But if adding declarations inside media query only, that's all.

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        color: #f5f1e8;
        border-radius: 999px;
        box-shadow: 0 2px 4px rgba(196, 69, 54, 0.18), 0 8px 20px -6px rgba(26, 26, 26, 0.2);
        transition: background-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: rgba(255, 255, 255, 0.72);
        color: #1a1a1a;
        border-radius: 18px;
        box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.06), 0 4px 8px rgba(26, 26, 26, 0.04), 0 20px 40px -10px rgba(26, 26, 26, 0.12);
        backdrop-filter: blur(8px);
        transition: box-shadow 0.4s ease, background-color 0.4s ease, color 0.4s ease;
    }
}
```
Need consider original file has font-size in media. We keep. text-align keep. padding keep.

Need perhaps target "editorial-magazine" with generous outer padding, etc. But cannot change layout. We can only style within media query. Maybe we should add more visual properties that evoke editorial: maybe use cream color for hero col? Could add `background-color: #f5f1e8`? But not necessarily. Maybe not.

Potential issue: The selector `.contact-channels-section article` could include an `article` element with `.contact-card`? The combined selector applies padding. Adding border-radius might affect if original had maybe border-radius? Fine.

Need maybe "Single accent color deep red or olive". We used #c44536. Good.

Need maybe "soft-shadows" variant: multi-layer soft shadows. We have. "Large border-radius (12-24px)": 18px, badge 999px. Good. "Smooth transitions (0.3-0.5s ease)": 0.35s/0.4s. Good.

Need maybe include `background-color: rgba(255, 255, 255, 0.72)` for cards on cream background. But cards may have their own background. Overriding could be okay.

Need maybe "dark ink text #1a1a1a": use color. Good.

Need maybe "cream/beige backgrounds #f5f1e8": Could add `background-color: rgba(245, 241, 232, ...)` to some? Badge deep red with cream text; cards white. Not enough. Maybe set `.app-hero-section .row .col-lg-7 { background: transparent; }`? no.

Maybe for `.contact-channels-section article, .contact-quick-section .contact-card`, use `background-color: #f5f1e8`? But if page background cream, cards would not stand out. Could use `background-color: #fffdf8` (warm white) maybe. The palette says "cream/beige backgrounds (#f5f1e8)". Could use `#fffaf0` for cards. Let's choose a warm off-white:
`background-color: rgba(255, 253, 248, 0.8);`
This is editorial. Or solid `#fdfaf3`. Need no alpha? We can use `#fdfaf3`. But if cards overlay images, alpha can be nice. No problem.

Need maybe use `box-shadow` with deep red accent shadow? E.g. `0 20px 40px -10px rgba(196, 69, 54, 0.12)` instead of black. Soft-shadows variant says use black rgba. But editorial single accent could be in shadow. We can use both:
`0 4px 8px rgba(26,26,26,0.05), 0 20px 40px -10px rgba(196,69,54,0.15)`? Might be too red. Better neutral.

Need perhaps use "text-shadow" somewhere. Not necessary but allowed. Could set `text-shadow: 0 1px 2px rgba(26,26,26,0.08)` on hero? Hmm not good.

Need maybe "gradient" somewhere. Could add `background-image: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(245,241,232,0.7))` on cards. This is a gradient, visual. Target says gradients allowed. It might not change layout. Use to add editorial texture. Combining background-color and background-image okay. But if using background-image, no layout. Could do:
`background-image: linear-gradient(145deg, rgba(255,255,255,0.85), rgba(245,241,232,0.65));`
But then need `background-color` maybe overall. Use background shorthand? Could use `background: linear-gradient(...)`. This changes display? no. But original didn't have background. It's okay. Since "background-color" allowed? Yes colors. Use background-image maybe allowed under gradients. Good.

Need maybe for hero col could add `background-image: radial-gradient(...)`? But could affect? No. But not wanted.

Need maybe use `filter: drop-shadow`? But box-shadow enough.

Need maybe for `.app-hero-section .badge.bg-warning` add `box-shadow: 0 4px 10px -2px rgba(196,69,54,0.4)` to accent. Good.

Need maybe all declarations sorted? No need.

Need ensure "transition" values can include `transform` even though no transform property. Fine. But perhaps add `transition: background-color 0.3s ease, box-shadow 0.3s ease;`.

Need maybe mention "First character = first CSS character" -> no leading spaces? We can output newline? Need no markdown. First char should be `@` maybe. So start with `@media`. No indentation before.

Need maybe not include closing newline? Fine.

Need perhaps preserve exact formatting with semicolons. Could include comments? No AI comments.

Let's examine original file fingerprint maybe from "assets/css/saishi.css" "块2/2" means this is second block, just the media query. It might be a fragment from larger file. Need output only this block. Good.

But could there be a challenge: "File fingerprint" and "Request ID" maybe from user wants no markdown. We comply.

Let's think if adding `color` to `.app-hero-section .row .col-lg-7` is necessary? It's okay. But target says refresh colors. The hero section in mobile currently likely has default dark text; setting ink black is fine. But if original text was colored via other rule, this rule's specificity is .app-hero-section .row .col-lg-7 = 3 classes. It can override. Maybe okay.

Should we add `background-color: #f5f1e8` to `.app-hero-section .row .col-lg-7`? If hero background inherits, this could make an inner column have cream background, changing visual. But maybe no, because if row has padding, a background on col could create weird block. Avoid.

Need maybe maintain `!important` on padding only. We add declarations no need important. Could if using `background-color` on `.contact-channels-section article` with other specificity okay.

Need maybe use `-webkit-backdrop-filter` for Safari? Could add