/* ============================================================
   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 answer CSS only. Need rewrite visual properties. Need examine original. It's media query with three selectors. Need preserve selectors exactly and layout props. Only visual changes. However original has text-align, padding (!important) which are layout? padding can change ±20%. text-align is typography/layout? Text-align is in layout list? Actually "text-align, vertical-align" in layout? It says typography font etc has text-align? Let's see lists: Layout includes "text-align, vertical-align" under never change? It lists in layout: text-align, vertical-align? Let me re-read user's "NEVER CHANGE" list: 📐 LAYOUT includes ... text-align, vertical-align. Yes, text-align listed under layout, so never change. So keep text-align original. Padding can change ±20%. Since original padding: var(--space-md) !important. Need maybe change? It's padding, can adjust ±20%. But we can keep? Task says refresh visual identity without changing layout; padding can change similar values ±20%. If changed would affect layout slightly. Could keep padding same to be safe. Selectors: media query same, .app-hero-section .row .col-lg-7, .app-hero-section .badge.bg-warning, .contact-channels-section article, .contact-quick-section .contact-card. Need change colors, shadows, radius, transition, gradients maybe included. There aren't many colors. Need add visual-only properties? Cannot add selectors, but can add properties within existing rules? We can add box-shadow, background, border-radius, transition to existing selectors. But if adding background to .app-hero-section .row .col-lg-7, could alter? That's okay visual. Need ensure no layout changed. Need target horizontal-strips/gradient-rich. But this CSS is just media query; perhaps need produce meaningful refresh.

Need preserve exact selectors and media condition. We can change font-size? No, typography font-size fixed. In original font-size: 0.85rem, cannot change. Need maybe add color, background, border-radius, box-shadow, transition. But adding to selectors can change default? Yes okay.

Need be careful with .badge.bg-warning: Bootstrap has background-color warning (yellow). We can set background: linear-gradient(...), color etc. Keep font-size.

Need perhaps set .app-hero-section .row .col-lg-7 { text-align:center; ... } add padding? It already maybe. We can add background? For mobile hero, adding background gradient could be too much. But target horizontal strips: mobile sections alternating. Need visual variants.

Need "horizontal-strips" and gradient-rich. Since original only media query, maybe can add? But user says preserve all selectors. Can't add new selectors. Could add declarations within existing selector blocks only. We can create gradient-rich effects with backgrounds, border, shadows, transitions. Need horizontal strips visual? Could use background gradients on sections.

Let's inspect original:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

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

We need preserve selectors. Could add declarations:

Rule 1: .app-hero-section .row .col-lg-7 { text-align:center; background: linear-gradient(...); border-radius: ...; box-shadow: ...; transition: ...; }

But if .col-lg-7 has background, maybe good. Need ensure not layout.

Rule 2: .badge.bg-warning { font-size:0.85rem; background: linear-gradient(...); color: ...; border: 0; box-shadow: ...; }

Rule 3: .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; background: ...; border-radius: ...; box-shadow: ...; transition: ...; }

Need decide palette. Target horizontal-strips: Alternating white/cream/dark/white. Use cream/ light. But with gradients. Need maybe use CSS custom properties? In media query can set variables? We can add custom properties declarations in existing selectors? But if root not there, variables on selector. Could add `--x: value;` but not needed. Could set custom properties? Yes, CSS variables values can change. But not necessary.

Need create color palette maybe: deep teal/navy, amber, cream, coral? Need not conflict with layout. "fresh palette." Let's choose: dark plum (#2b1b3d), warm peach (#f9e8d9), coral (#ff6b5e), gold (#f7b267), teal? Need horizontal strips with alternating.

Original has `.bg-warning` yellow badge, maybe keep warm gold gradient. Hero center: maybe cream gradient with a subtle bottom border? Contact cards: dark navy with gold shadow? But contact channel sections? Could use dark background for article/card to create contrast strips.

Need consider that `.contact-channels-section article` and `.contact-quick-section .contact-card` share same rule; dark bg could apply both. But adding background to contact-card may override existing theme? okay.

Need ensure not changing padding by more than ±20%. We can keep `padding: var(--space-md) !important;` exactly. The instructions say padding can be similar values ±20%, but keeping is okay. Could maybe change to `calc(var(--space-md) * 1.1)`? But no need. Keep exact layout properties unchanged? It says NEVER change width/height/padding/margin; "keep similar values, ±20% maximum" means can keep. Good.

Need also change border-color/border-style, outline. We can add border? But border adds layout? Border-width can affect box size unless box-sizing border-box. But if adding border, could layout shift. We can avoid adding border-width except maybe use `outline` or `box-shadow` to not affect layout. The instructions say never change border-width. So don't set border-width. If background-clip? no.

Need transition: add `transition: background-color 0.5s cubic-bezier(...), box-shadow 0.5s ...`. But transition on mobile only. okay.

Need maybe text-shadow for hero col? But text-align center, can add text-shadow? It may affect text but visual. Could add `text-shadow: 0 2px 8px rgba(...)`; if it has text. But perhaps not necessary.

Need maybe `backdrop-filter: blur(...)`? Could be too much.

Need ensure not violating selector list. We preserve. Need output no markdown. Let's craft.

But let's parse requirements carefully.

"Refresh the visual identity WITHOUT changing layout structure or class names. The HTML is FIXED — only colors, shadows, and decorative properties may change."

Allowed to change all color values, box-shadow, text-shadow, border-radius, gradients, transition, filter, backdrop-filter, opacity, outline styles, border-color/style, caret-color, accent-color, CSS custom properties. Never change display, position, grid, flex, width, height, padding/margin (similar), gap, etc. Need ensure not change padding. But can change `padding`? The original has padding; keep exactly. However if we add more padding? No.

Need maybe set `background` gradient on `.contact-channels-section article` could be changing background. Good.

Need perhaps use `background: linear-gradient(135deg, ...) padding-box, linear-gradient(...) border-box;` border-image? But no border. Need no layout.

Need "horizontal-strips" visual. On mobile, contact sections could become alternating strips. Maybe `.contact-channels-section article` and `.contact-quick-section .contact-card` with background dark/ cream? But same rule applies both. The next section? There are only these. Could make both gradient-rich. But need alternating background colors per strip? Could use `background` gradient with multiple stops. Could maybe use `background-image` with stripes: horizontal-strips via repeating-linear-gradient? This would match target! "horizontal-strips" pattern. Use `background: repeating-linear-gradient(45deg, ...)`? But horizontal strips means full-width sections with alternating background colors; however at rule-level, can create "barber pole" or horizontal stripes? Hmm.

Maybe "horizontal-strips" style: full-width sections alternating white/cream/dark/white. For gradient-rich variant, use linear-gradient on most backgrounds. For this mobile media query, perhaps add horizontal stripe backgrounds using linear-gradient.

But we need not overdo. The target is general style not strictly applicable.

Need maybe make `.badge.bg-warning` gradient "gold" with box-shadow. Since badge uses `.bg-warning`, setting background gradient overrides. Need also set `color: #2b1b3d` maybe. Add `border-radius: 2rem;`? Original Badge likely has border-radius; but setting is allowed. It might change look. Use `border-radius: 999px;`.

Could add `box-shadow: 0 4px 16px rgba(247, 178, 103, 0.35)`.

Need maybe `.app-hero-section .row .col-lg-7` add `background: linear-gradient(180deg, #fff8f0 0%, #fde8d7 100%); border-radius: 2rem 2rem 0 0; box-shadow: 0 -8px 24px rgba(...);` But if col already has background, okay. But maybe it is a grid column containing text; background gradient may affect readability. We can use only if text color is dark. Need set color? We can set `color: #2b1b3d;` maybe. But if text already colors, could alter. Should be fine. But if `color` not originally inherited, adding color can change text; but okay.

Need maybe add `background-clip: padding-box`.

Need maybe transition: `transition: background 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(...), transform ...` But transform changes layout? It's visual but could affect if not hover? No. But don't add transform if not needed.

Could add `@media (max-width: 575.98px)` exact.

Need ensure all selectors character-for-character preserved? Let's compare:
Original selectors:
`.app-hero-section .row .col-lg-7`
`.app-hero-section .badge.bg-warning`
`.contact-channels-section article,
.contact-quick-section .contact-card`
We can preserve line breaks? Yes.

Need maybe preserve `!important` on padding only. If adding properties, no need important.

Need perhaps use CSS variables? Since custom properties values can change, but not necessary. Could set `--hero-glow`, etc. But no.

Need maybe "gradient-rich" multiple stops for richness. Use three+ stop gradients.

Let's formulate.

Rule 1:

```
.app-hero-section .row .col-lg-7 {
    text-align: center;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 45%),
        linear-gradient(145deg, #fff4e6 0%, #ffe8d6 55%, #fad2b0 100%);
    background-blend-mode: overlay, normal;
    border-radius: 32px 32px 8px 8px;
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.6),
        0 12px 28px -8px rgba(43,27,61,0.18),
        0 4px 12px rgba(43,27,61,0.08);
    transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
```

Need background-blend-mode? allowed? Visual, no layout. Ensure okay.

Rule 2:
```
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background: linear-gradient(120deg, #f7b267 0%, #f79d65 45%, #e87461 100%);
    color: #2b1b3d;
    border-radius: 999px;
    box-shadow:
        0 6px 16px -4px rgba(247, 157, 101, 0.6),
        inset 0 -2px 4px rgba(43, 27, 61, 0.15);
    transition: box-shadow 0.45s cubic-bezier(0.4, 0, 0.2, 1), filter 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
```

Need maybe `filter: saturate(1.1)`? We can add `filter: drop-shadow(0 4px 6px rgba(...))`? But okay. Need not overdo.

Rule 3:
```
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background:
        linear-gradient(135deg, rgba(255,244,230,0.12) 0%, rgba(255,244,230,0) 50%),
        linear-gradient(315deg, #2b1b3d 0%, #3c2a54 45%, #1e132b 100%);
    border-radius: 28px 8px 28px 8px;
    box-shadow:
        0 18px 36px -12px rgba(30, 19, 43, 0.5),
        inset 0 1px 0 rgba(255,255,255,0.12);
    transition:
        background 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
```

Need maybe set `color` for dark cards? If original text is dark, our dark background could make text invisible. We should set color to light for contact cards: `color: #fdf6ec;`. But if sub-elements have own colors, maybe not enough. But okay? However if `.contact-card` contains text elements with fixed color (dark), could become unreadable. But not sure. To be safe, maybe use a light background instead of dark? Need target horizontal strips alternating strong color zones; dark zone requires text color adapt. But changing color on container affects inherited only. Many components might not inherit if child has color set. But could be okay. Alternatively use cream background with deep plum text to maintain readability. Yet target palette dark zones? "Alternating white / cream / dark / white pattern. Strong color zones." If we use cream background for contact cards, less risk. Could use dark gradient with light color though.

Need be mindful of `.contact-channels-section article` maybe contains icon cards with already white background. Our dark background may cover. But that's intended.

Maybe better to make contact cards warm ivory with vibrant shadows and border, not dark. But target says horizontal strips: strong color zones. We can use cream/white for one rule, dark for another. We already use cream for hero col, gold gradient for badge. Contact cards could be deep plum dark to make strong strip. That seems okay.

Need maybe not use `background-blend-mode` because if background shorthand includes multiple backgrounds, blend-mode property okay. Could affect? visual.

Need maybe include `outline: none`? no.

Need maybe change `box-shadow` by multi-layer redesigned. Done.

Need maybe border-radius changed. Done.

Need maybe transition timing. Done.

Need maybe use `filter` on contact cards? Could add `backdrop-filter: blur(12px)`? But on dark background, `backdrop-filter` may not have backdrop. Not necessary.

Need maybe use `background` on hero col with gradient. However `.app-hero-section .row .col-lg-7` is likely inside hero with a background image; applying background could cover? It might have no background. It's okay.

Need ensure not altering `text-align`? We keep text-align center.

Need ensure padding remains exactly `var(--space-md) !important` (not changed). Good.

Need maybe use only declarations allowed. Can we add `color` property? yes.

Need maybe preserve no markdown fences. Need output only CSS.

But let's consider whether "layout structure or class names" includes not adding new declarations? No, visual only. But adding `background` to columns might change layout? No.

Potential issue: The instruction "Only colors, shadows, and decorative properties may change" means we should change existing properties if present. Adding new decorative properties is okay. Need perhaps use `background` with shorthand maybe changes `background-image`/color; fine.

Need maybe change "opacity" — could add but no.

Need perhaps change custom properties values? Not necessary. But if there are custom properties in original? No.

Need maybe "gradient borders via border-image" target. Could add `border: 0`? Can't change border-width. Could use `box-shadow` as border. Fine.

Need maybe "horizontal strips" via `linear-gradient(180deg, white 0%, white 25%, cream 25%, cream 50%...)` to simulate strips. But if used as background for hero col, it would be a striped block, interesting. But maybe too much.

Let's think if the request expects a complete rewrite based on supplied full CSS? It supplied only a media query block. They may expect to rewrite that block. But maybe there were other blocks? User says File: assets/css/saishi.css #块2/2, "Original CSS" is just this media query. We must only output that, preserving selectors. Yes.

Need maybe not include style tags.

Let's make final answer with code. Need no markdown fences,