/* ============================================================
   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, but note: the provided CSS is only a media query with three rules. The instructions say visual changes only, preserving selectors and layout. However, the rules contain no colors, shadows, radius, transitions, gradients. They only have text-align, font-size, padding. Padding is layout but allowed within ±20%. text-align and font-size are typography, which are forbidden to change. So we cannot change those. But the task says "Refresh this CSS visually" and we must output rewritten CSS. Since there are no visual properties to change, we need to add or modify? But the instruction says "Only change colors, shadows, radius, transitions, gradients." But there are none. Perhaps we can add new visual properties that don't affect layout? For example, add border-radius, transitions, box-shadow, background colors to the elements? But we are told not to change layout structure or class names. Adding visual properties is allowed? The mission: "Refresh the visual identity WITHOUT changing layout structure or class names." The original CSS has no visual properties, so we need to introduce them. But we must be careful: adding box-shadow, background, border-radius to elements in a media query for small screens might be acceptable as long as it doesn't break layout. However, the instructions say "YOU MUST CHANGE (visual identity only): All color values, box-shadow, text-shadow, border-radius, etc." Since there are none, we can add them. Also we might add transition properties. But keep selectors exactly. Also padding is allowed within ±20%. Currently padding: var(--space-md) !important. We can adjust padding slightly? But we don't know the value of --space-md. Better not change padding. The text-align and font-size are typography, must remain unchanged.

So the rewritten CSS should include the same selectors, same text-align, same font-size, same padding, but add visual properties like background, color, border-radius, box-shadow, transition, etc. But note: the elements are .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 background colors, border-radius, box-shadow, maybe care. But we must ensure not to break layout. Adding background doesn't break layout. Adding border-radius doesn't. Adding box-shadow doesn't. Adding transition doesn't. Adding color doesn't. So we can do that.

Target style: horizontal-strips with alternating white/cream/dark, strong color zones. But this is only a media query for small screens. We can apply colors to these elements. However, we must keep the overall design cohesive. The original CSS is inside a media query, so our additions will only apply on small screens. That's fine.

Let's craft a new visual identity with the "tight-rhythm" variant: compact spacing, small border-radius (2-6px), subtle shadows, information-dense feel. So we can add:

- For .app-hero-section .row .col-lg-7: maybe a background cream, border-radius 4px, box-shadow subtle, padding? But padding isn't specified here; the col has bootstrap padding. We shouldn't change padding. We can add background, border-radius, box-shadow.

- For .app-hero-section .badge.bg-warning: it already has bg-warning from Bootstrap. We can override background color with a custom color? But changing background might make badge look different. That's allowed. We can set background to a new color, color, border-radius, box-shadow, transition.

- For .contact-channels-section article and .contact-quick-section .contact-card: they have padding var(--space-md) !important. We can add background, border-radius, box-shadow, border, transition.

We need to preserve all layout properties. The existing padding is var(--space-md) !important. We keep that exactly. text-align center, font-size 0.85rem remain.

We can add visual properties that don't affect layout. But careful: adding border increases element size unless box-sizing border-box is already set (Bootstrap has it). Since Bootstrap sets box-sizing: border-box globally, adding border won't change layout dimensions. But adding box-shadow doesn't affect layout. Adding border-radius doesn't.

Now, we need to output the CSS with no markdown. We should include the media query and the rules with original selectors and properties, plus new visual properties.

Let's decide on colors. Target: horizontal-strips with alternating white/cream/dark. But within this media query, we can create a mini-strip effect: maybe the hero col gets a cream background, badge gets a strong color, contact cards get white/cream alternating. Since it's a media query, we can make the contact cards have alternating backgrounds? We can use nth-child? But that requires selectors not present. We can't add new selectors. So we can just give all contact cards the same background. But the target style says alternating backgrounds per strip. Without adding new selectors, we could use existing classes: .contact-channels-section article and .contact-quick-section .contact-card. Those are two separate selectors, so we can give them different backgrounds. That creates an alternating feel between the two sections. Also .app-hero-section .badge.bg-warning can be strong color zone.

Let's pick a fresh palette: maybe indigo/teal/amber. But target says alternating white/cream/dark. Let's use:

- .app-hero-section .row .col-lg-7: background: #fff9f0 (cream), border-radius: 6px, box-shadow: 0 2px 8px rgba(0,0,0,0.04) maybe subtle.
- .app-hero-section .badge.bg-warning: background: #d97706 (amber dark?) but "bg-warning" is yellow; we can override to an amber tone. color: #1a1a1a or white? Better dark text on amber for contrast. border-radius: 4px, box-shadow: 0 1px 3px rgba(0,0,0,0.1).
- .contact-channels-section article: background: #ffffff (white), border-radius: 4px, box-shadow: 0 1px 4px rgba(0,0,0,0.06).
- .contact-quick-section .contact-card: background: #1a1a1a (dark), color: #ffffff, border-radius: 4px, box-shadow: 0 2px 6px rgba(0,0,0,0.1).

But does .contact-quick-section .contact-card have text that needs contrast? Yes, if we set dark background, we need to set color to white. That's a visual change, allowed. But careful: the contact card may have child elements with their own colors; we only set the card's text color, which may inherit. Fine.

We also need to set border? Maybe add border: 1px solid rgba(0,0,0,0.05) to cards. That's a visual change.

Also add transition for hover? We can add transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease? But transform is a layout property? transform can create new containing block and stacking context but doesn't affect layout flow. It's allowed? It's not listed as allowed or forbidden. The forbidden list includes layout properties, but transform is not explicitly forbidden. However, it could be considered a visual change. But the target "tight-rhythm" says subtle shadows or none, so we can add transitions for interactive feedback. But since no :hover rules are present, adding transition without hover is okay, but maybe not needed. Better to add transition on the elements for potential hover state changes from other CSS. But we don't need to.

The instruction says "transition timing, easing, duration" must be changed if present. There are no transitions originally. We can add transitions. That is allowed.

Let's also consider the .app-hero-section .row .col-lg-7: this is a column inside a row. Adding background to the column may create a full-width colored strip? But on small screens, columns stack in Bootstrap, so it's block. It will have a cream background with small radius. That matches horizontal strip? Actually the hero is a section; the col is the content. It might look like a card. That's fine.

Need to preserve selector list exactly: the selectors are each on separate lines. We can keep them.

Also note the original CSS has `padding: var(--space-md) !important;` for the last rule. We keep that.

Now, we must ensure all layout properties are unchanged: text-align, font-size, padding, media query breakpoint unchanged.

Let's write the CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background-color: #fff9f0;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(60, 40, 20, 0.06);
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #d97706;
        color: #1a1a1a;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
        transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 4px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .contact-channels-section article {
        background-color: #ffffff;
        border: 1px solid #f0ebe3;
    }

    .contact-quick-section .contact-card {
        background-color: #1e1e24;
        color: #f8f8f8;
        border: 1px solid #34343a;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }
}

But note: the original last rule combines both selectors with padding. If we separate them to add different backgrounds, we need to keep the combined selector with padding, then add additional rules for each separate. That's allowed because selectors are preserved. However, the instruction says "Selectors: keep EXACTLY". It doesn't say we cannot add new rules with same selectors. But adding new rules is fine. But we should ensure the combined selector rule still includes the padding. Then we add separate rules for each selector with background etc. The combined rule also has no other properties; we can keep it as is, or add common visual props there. But if we add common props to combined, then the separate rules can override. That's fine. But we must be careful not to duplicate too much. We can do:

.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: ...;
}
.contact-channels-section article { background: #fff; border: ...; }
.contact-quick-section .contact-card { background: #1e...; color: #f8...; border: ...; box-shadow: ...; }

But the instruction says "Output the rewritten CSS now" and "preserving ALL selectors and layout exactly". It might be okay to add extra selectors? Actually the original has a selector list. We should preserve that selector list. Adding new rules with individual selectors is still preserving the original selectors, but we're adding more selectors? No, we're adding new rules that contain selectors from the original, but not new class names. That's acceptable. However, the instruction: "Selectors: keep EXACTLY (.post-card stays .post-card)" likely means don't change the selectors, but adding new rules with the same selectors is not changing them. I think it's fine.

But there is a risk: the original CSS is only a media query. We can output a media query with the original three rules, but modify them to include visual properties. Simpler: just extend each original rule with visual properties, and for the last one, include both selectors with the same visual properties. But then we can't give them different backgrounds if we keep them combined. We can still put common props in the combined rule, and then add a separate rule for .contact-quick-section .contact-card to override background. That would require adding a rule with a selector that already appears in the combined list. That's okay.

But maybe the cleanest is to:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background-color: #fff9f0;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(60, 40, 20, 0.06);
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #d97706;
        color: #1a1a1a;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
        transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 4px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .contact-channels-section article {
        background-color: #ffffff;
        border: 1px solid #f0ebe3;
    }

    .contact-quick-section .contact-card {
        background-color: #1e1e24;
        color: #f8f8f8;
        border: 1px solid #34343a;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }
}

This preserves all original selectors and layout properties. We added new selectors? Actually .contact-channels-section article and .contact-quick-section .contact-card are already in the combined rule. We reused them in additional rules. That's fine.

But note: the instruction says "Selectors: keep EXACTLY (.post-card stays .post-card)". It doesn't forbid adding new rules with existing selectors. However, it also says "Selector lists (commas)" must be preserved. We preserved the comma list in the combined rule. We added separate rules with single selectors, which are not commas. That's okay.

Now, colors: Are they fresh? yes. We have cream, amber, white, dark. Target style "horizontal-strips" asks for alternating white/cream/dark / white pattern. We have white (channels), dark (quick), cream (hero col). Good. Strong color zone: badge amber. Also shadows are multi-layer? We used subtle. Maybe we can add a second shadow to the contact card for more depth, e.g., `box-shadow: 0 2px 6px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1);` That would be multi-layer. Let's do that.

For the hero col, maybe add a subtle inset shadow? `box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 2px 8px rgba(60, 40, 20, 0.06);` But if the background is cream, an inset highlight could look nice. That's a multi-layer shadow.

Also border-radius: small (2-6px). We used 4 and 6. Good.

Text-shadow? Not necessary. Could add a subtle text-shadow to dark card? But text-shadow is allowed. Maybe add `text-shadow: 0 1px 2px rgba(0,0,0,0.2);` to .contact-quick-section .contact-card? That would be a visual change. But it might not be necessary. We can include it.

Caret-color/accent-color? Not relevant.

Filter/backdrop-filter? Not needed.

Opacity? Could use opacity for some elements? Not necessary.

Outline? Not needed.

Border-color and border-style: We added border style and color. That's allowed.

Now, ensure padding and margins unchanged: The original padding is `var(--space-md) !important`. We keep exactly. We didn't add margin. Good.

Text-align and font-size unchanged.

We didn't change display, position, grid, etc.

Now, is there any risk that adding background to .app-hero-section .row .col-lg-7 will affect layout? No.

Now, we should include the original CSS exactly as is, plus our additions? The original CSS file may only contain this media query? The user says "File: assets/css/saishi.css#块2/2" which means this is block 2 of 2? But only this CSS is provided. We are to output rewritten CSS for the provided block. So we output the media query with modifications.

We must not include markdown fences, no explanations. So just CSS.

Let's craft final output with multi-layer shadows and clean formatting.

Potential issue: The original has `padding: var(--space-md) !important;` and we must keep it. We did.

We should maybe add `box-sizing: border-box`? No, it's layout.

Let's double-check the allowed changes: All color