/* ============================================================
   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. Need follow instructions. Need output only CSS no fences. Need analyze original CSS: one media query max 575.98 with three rules. Visual changes only, colors/shadows/radius/transitions etc. But original has no colors, shadows etc. We can add? Need "Refresh visual identity WITHOUT changing layout structure or class names." Need preserve selectors. For each rule, can we add visual properties that aren't in original? It says only colors, shadows, and decorative properties may change. HTML fixed. We can add? The output should be rewritten CSS preserving selectors and layout. If original just sets text-align and font-size and padding. Those are layout/typography constraints: font-size fixed? Actually font-size is font property, cannot change. Padding in original: contact cards padding var(--space-md) !important. Since layout cannot change significantly, must keep. But can add color, background, border-radius, box-shadow? Need be careful adding background-color to elements may alter visual but not layout. It's allowed? The mission is to refresh visual identity, so probably yes. Need maybe add background/backdrop-filter/border-radius within existing rules. But if output has extra decorative properties, okay. Need maintain selectors exactly. Also original has @media query; preserve conditions. "Only change colors, shadows, radius, transitions, gradients." So add visual properties. Need adapt to target style horizontal-strips with soft shadows, alternating backgrounds. But HTML unknown; this media query small mobile. Could set `.app-hero-section .row .col-lg-7` maybe background? Hmm.

Need inspect original file? The provided snippet is block 2/2. Need rewrite only given CSS. Need preserve all. Could maybe add `background: transparent`? Original no visual. Need choose palette matching horizontal strips / soft shadows. But limited selectors.

Need consider constraints:
- Do not change padding, margin except ±20%; padding var(--space-md) !important remains. Could set `padding: var(--space-md) !important;` exactly. Could change `--space-md`? Can't because custom property perhaps defined elsewhere. We shouldn't define custom property? Could maybe use same variable. Need not change.
- font-size: `.badge.bg-warning { font-size: 0.85rem; }` must remain same? Typography fixed. So output must keep same font-size. Could add color? But badge classes may have existing bg-warning. We can set color, background, border, box-shadow. Need be careful because `.badge.bg-warning` likely already has bootstrap background; adding background-color overrides warn color maybe. We can use `background: linear-gradient(...)`? But if adding, changes visual identity. Fine. Colors fresh. Need maybe horizontal strips style: alternating cream/dark and white. For mobile, maybe each section strip with background. But since only mobile, perhaps set `.app-hero-section .row .col-lg-7` background? That might make hero content section strip. Need not break layout.

Also soft-shadows: multi-layer shadow and border-radius 12-24px. Need add to contact cards etc.

Let's produce CSS:
```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: rgba(255, 253, 245, 0.6);
        border-radius: 20px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
        backdrop-filter: blur(6px);
        transition: background-color .35s ease, box-shadow .35s ease, border-radius .35s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #4a3b1e;
        background: linear-gradient(135deg, #ffe9a8 0%, #ffd166 100%);
        border: 1px solid rgba(214, 158, 46, 0.3);
        border-radius: 999px;
        box-shadow: 0 2px 6px rgba(180, 130, 30, 0.15), 0 6px 16px -4px rgba(120, 80, 10, 0.12);
        transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #fdf8ef 100%);
        border: 1px solid rgba(236, 225, 208, 0.6);
        border-radius: 18px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
        transition: background .4s ease, border-color .4s ease, box-shadow .4s ease, border-radius .4s ease;
    }
}
```
Need check "No AI-REWRITTEN comments" okay.

But potential issue: "background" is allowed? Yes colors. "backdrop-filter" allowed. "transition" values can change, but adding is okay. However original file may not have transition; adding is okay. "border-radius" allowed. "border: 1px solid..." This changes border-color and border-style but not width? Actually width is 1px. Original no border width. Allowed? The instruction says border-color and border-style (NOT border-width) may change. So can add border-width? It says NOT border-width. It says "border-color and border-style (NOT border-width)" under 🔒 NEVER CHANGE? Wait need parse: In "NEVER CHANGE" list includes:
- padding, margin (keep similar values, ±20% maximum)
- ...
- border-color and border-style (NOT border-width)

Actually original "border-color and border-style (NOT border-width)" under "✅ YOU MUST CHANGE" maybe? Let's reread user text:

```
✅ YOU MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow ...
  • border-radius ...
  • gradient colors and stops...
  • transition...
  • filter...
  • opacity
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
  • caret-color...
  • CSS custom properties...
```
So border-color/style can change, not width. So adding border with width 1px? Is that changing border-width from original? Original no border, so perhaps adding border-width 1px violates "NOT border-width"? But if original had no border, adding border could create 1px, which is a border-width change. Need avoid adding border-width? But visual changes can include border-color and border-style only, not width. We can add border-color/style if existing border-width is 0? CSS border shorthand sets width; not allowed. Could use `border-color: ...` and `border-style: ...`, but if element has default border-style none and border-width medium? Yet if border-style none, width irrelevant. To add visible border without changing border-width? impossible unless border-width already >0. Better avoid adding border-width. We can set `outline`? Outline style/color may change but width not listed? "outline styles (color, type)" under must change. Could use outline with 1px? It says outline styles color/type, not width. Better avoid.

Need maybe not add borders. But can add box-shadows.

Need also "background: rgba(...)" okay. "border-radius" okay. "transition" okay. Need not add border.

Need consider "font-size: 0.85rem" fixed; adding color etc possible. But if adding `background` to `.badge.bg-warning`, this overrides Bootstrap bg-warning--but mobile only. Fine.

Need maybe maintain exact selectors, including commas. Original uses `.contact-channels-section article,\n    .contact-quick-section .contact-card` with line break? In output can preserve same comma and selector. Need ensure no markdown.

Need perhaps include only CSS block with original @media. No comments. Need maybe no custom properties? We can keep `var(--space-md)`.

Potential issue: `transition: transform .3s ease...` includes `transform`, but transform isn't visual-stripes? The instruction says transition timing/easing/duration can change, but properties can be added? It says "transition timing, easing, duration" only, not transition-property. But adding transition property with transform and box-shadow okay? Under TARGET "Smooth transitions (0.3-0.5s ease)". We can set transitions for visual properties. Need not include transform transitions if no transform.

Need perhaps use `color` and `background` in mobile to create horizontal-stripes pattern. But given CSS is only media query, maybe full horizontal strips without full-width sections. Could set sections background? There are no section selectors except contact. We could set `.contact-channels-section article, .contact-quick-section .contact-card` as cream cards with soft shadows; `.app-hero-section .row .col-lg-7` as white/cream; `.badge` as strong color zone.

Need maybe include `text-shadow`? Could set for hero text: `text-shadow: 0 1px 4px rgba(0,0,0,0.08);`, but text-align center. Maybe not necessary.

Need maybe use `transition: all`? Could be considered not preserving? no.

Need maybe include "will-change"? no.

Need ensure "box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)" exactly match variant. Good.

Need use border-radius 12-24px. We have 20, 999, 18. Good.

Need maybe preserve `padding: var(--space-md) !important;` exactly. We have.

Need maybe use `background-color` rather than `background` to avoid resetting? Use `background-color` and `background-image` separately perhaps.

Need maybe use custom properties values? Could define `--space-md`? no.

Need perhaps "whitespace/indentation" not relevant.

Need output exactly CSS. Let's craft final polished CSS. Could include:
```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(180deg, #fffdf8 0%, #f8f2e7 100%);
        border-radius: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        backdrop-filter: blur(8px);
        transition: background-color 0.35s ease, box-shadow 0.35s ease, border-radius 0.35s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #3b2f14;
        background-color: #ffd166;
        background-image: linear-gradient(135deg, #ffe9a8, #ffd166);
        border-radius: 999px;
        box-shadow: 0 2px 6px rgba(180, 130, 30, 0.14), 0 6px 18px -4px rgba(120, 80, 10, 0.12);
        transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #fdf6ec 100%);
        border-radius: 18px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: background 0.4s ease, border-radius 0.4s ease, box-shadow 0.4s ease;
    }
}
```
Need perhaps add `text-shadow` to hero? Not required. Could add `-webkit-backdrop-filter`? Not necessary but nice. Should we avoid backdrop-filter because it's visual and allowed. It doesn't affect layout. But could create stacking context, but okay.

Need maybe target "horizontal-strips" with alternating backgrounds. Since this is small media query, maybe we can add `background` with striped pattern? "horizontal-strips" aggressive target: full-width sections and alternating white/cream/dark/white. But our selectors are not section-level. Could set `.app-hero-section .row .col-lg-7` background white/cream, `.contact-channels-section article` background dark? But on mobile, dark backgrounds could alter text accessibility. However original likely has white text? unknown. Better use cream/dark? The target palette says alternating white/cream/dark/white. Strong color zones. We need maybe contact card dark? Let's think.

Original CSS only mobile media query. Maybe HTML has `contact-channels-section article` and `contact-card`; they might already have padding dark? We don't know. A conservative refresh shouldn't set dark background without knowing text color. Better use light cream backgrounds, not dark, to avoid accessibility. But target says dark strip. Yet the mobile CSS is just for mobile stacking; we can set the badge as strong color. Maybe okay.

Need maybe preserve font-size on badge. no changes.

Need think about adding border-radius to `.app-hero-section .row .col-lg-7`. If this element is full-width in hero, border radius 20px may show background behind content; no layout change. But if it has no padding, background only surrounds content? It's a grid column containing content, perhaps full height. Could be okay. Background could show only behind content if parent has padding; but no layout? It's visual. It might create a "strip" card.

Should we add `padding` to hero column? Original didn't have padding, adding would affect layout, and padding changes allowed ±20% but no original. Better not.

Could add `margin: 0 -?`? no.

Need check "Every selector character-for-character preserved?" We need ensure no added nested selectors or pseudo. Good.

Need maybe include `@media (max-width: 575.98px)` exactly. Good.

Need maybe use `.contact-channels-section article, .contact-quick-section .contact-card` with combo. Good.

Need perhaps use `filter: drop-shadow()`? no need.

Need perhaps "color: inherit" to not alter. no.

Could include custom properties? no.

Need maybe "background" on `.contact-channels-section article, .contact-quick-section .contact-card` with white gradient. That is fresh.

Need maybe "transition: background-color ..." rather than background due to shorthand. Use `transition: background-color 0.4s ease, box-shadow 0.4s ease, border-radius 0.4s ease;` But we set `background` shorthand gradient; transition of background not smooth unless background-color. Fine.

Need perhaps "backdrop-filter" on hero only. okay.

Need maybe add `-webkit-backdrop-filter` too. But on mobile Safari. Could include; no layout. `-webkit-backdrop-filter: blur(8px);` allowed as filter/backdrop-filter. It is decorative. Should we include? It's extra property not in original. Fine.

Need maybe "background-color: #fffcf5;" and `background-image: linear-gradient(...)` to set both. Good.

Let's consider if adding `border-radius` on `.app-hero-section .row .col-lg-7` could cause issue with text-align: center. No.

Need maybe padding of contact card unchanged exactly. Good.

Potential issue with "border-radius: 999px" on a badge. A badge may have high aspect ratio; pill shape. Good.

Potential issue: "box-shadow" on `.app-hero-section .badge.bg-warning` using `0 6px 18px -4px rgba(...)` okay.

Need maybe "backdrop-filter" is not supported and may be ignored. Fine.

Need maybe "color: #3b2f14" on badge changes text color; okay. But if background is white/cream? Text is dark, okay. But the original may have dark text on yellow, okay.

Need maybe "transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;" Since background-image gradient doesn't animate. okay.

Need maybe no `filter` changes.

Need perhaps include `opacity`? no.

Need ensure no changing media query. Good.

Need perhaps use `@media (max-width: 575.98px)` with `@media` exactly. Good.

Need maybe "Output only CSS no markdown fences." We'll deliver.

But need be careful: User asks "File: assets/css/saishi.css#块2/2" and "Request ID". We need respond with CSS only. No explanations.

Let's also think of "conservative mode" in exact instructions: "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". So yes.

Let's perhaps include no blank line before code? First character should be CSS. Good.

Let's formulate final with original structure plus new visual properties. Should we add spaces inside rgba? It's fine.

Need maybe "horizontal-strips" maybe use strip backgrounds through `article` background alternating? We can't add nth-child selectors because selectors would change? Could use `:nth-child`? No, adding selectors changes? The instruction says every selector preserved; if we add, violates? Better not.

Could use gradients on article to simulate "stripes" with repeating-linear-gradient? That is a gradient, allowed, but too aggressive. No.

Maybe to satisfy horizontal strips, we can style `.contact-channels-section