/* ============================================================
   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 constraints. Need rewrite original CSS visually. Original is short media query block. Need preserve selectors, media conditions, layout properties. Allowed changes: colors, shadows, radius, transitions, gradients, filters, opacity, outline, etc. But note original CSS only has media query with text-align and padding and font-size. These are layout/typography? Let's inspect. Target style horizontal-strips, glow-effects. But under conservative mode we cannot change layout/text stuff. 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; }
}

Allowed to change? text-align is not in allowed? Text-align is listed under Typography? Actually in "Typography" section: font-family, font-size, font-weight, line-height, letter-spacing, word-spacing, text-transform, white-space, word-break. Text-align listed under Layout? It says 📐 LAYOUT includes text-align, vertical-align. So cannot change text-align. Padding can vary ±20%, but original uses var(--space-md) !important. We could change padding value but better preserve? Visual only maybe could adjust padding color? No.

Need "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Since original has no colors/shadows/radius/transitions, perhaps need add these properties to existing rules? Is that allowed? The mode says "Only change colors, shadows, radius, transitions...", but original lacks them. We can add color-related properties to existing selectors without changing layout properties. Need preserve constraints: selectors, display, position, grid, width/height/padding (similar), font-size unchanged? Wait original has font-size: 0.85rem, it's typography, cannot change. Need keep it. Padding is var(--space-md) unchanged? Could change but likely preserve. The media query breakpoint must stay. Need maybe add visual properties like background-color, box-shadow, border-radius, transition, filter, backdrop-filter, outline, color? But careful: adding background to hero col might alter visual but not layout. We need output only rewritten CSS. Since original is tiny, need perhaps expand? The task likely expects transform each rule with visual improvements while keeping selectors. But if only adding colors to same selectors, weird: .app-hero-section .row .col-lg-7 text-align center; maybe add color? Not ideal. Maybe the original file had only this block, but target style would have more? Need follow instructions: output rewritten CSS preserving all selectors. We can inject visual properties only in existing selectors, adding a pseudo-element? But selectors/pseudo-classes? Could add descendant of existing? Not allowed because selectors fixed? We can't add new selectors? It says "Every selector character-for-character preserved?" "Keep ALL selectors exactly" likely don't add selectors. So we can only modify declarations inside those media queries. Need not add new rules.

Let's parse allowed declarations by property categories:
- "All color values: background, color, border-color, fill, stroke, outline-color"
- box-shadow
- text-shadow
- border-radius
- gradient colors and stops
- transition timing, easing, duration
- filter, backdrop-filter
- opacity
- outline styles (color, type)
- border-color and border-style (NOT border-width)
- caret-color, accent-color
- CSS custom properties values

We can add new declarations if visual properties not already present? It doesn't explicitly forbid, but "Refresh this CSS visually" means yes. Need preserve "layout exactly" but visual additions okay.

Need consider target "horizontal-strips" style: full-width sections with alternating backgrounds, strong color zones. But cannot change layout width (100%) because width property existing? Not in original. Could add width? That would be layout change? "NEVER CHANGE display, position, grid-template-*..." but width? It says width is layout "keep similar values", cannot change existing, but adding width? Probably not allowed because would alter layout but maybe width 100% is okay? Yet we shouldn't add width if not present.

Need perhaps create a "glow" visual with box-shadow/background/border-radius in existing selectors. But rules target small elements, not whole sections. Let's examine:
.app-hero-section .row .col-lg-7 is a column, could set background: radial-gradient? But padding? Actually Bootstrap col. Adding background to column maybe okay.
.badge.bg-warning is a badge with warning background; original only font-size. We can add background/color/box-shadow/transition.
.contact-channels-section article and contact-card can get background, border-radius, box-shadow, transition.
But these changes might conflict visually. Need output only CSS, no rationale.

Need decide palette. "Alternating: white / cream / dark / white pattern", "Strong color zones", glow effects accent. Accent maybe amber/orange? Original class bg-warning suggests Bootstrap warning yellow. We can choose accent #f59e0b or #ffb347. Need use dark/cream.

Since original has "bg-warning" but not override background? We can set background-color: #fbbf24? But Bootstrap's bg-warning would set background-color. Changing to custom maybe okay. Need include !important? Original has !important for padding only. If we add background to badge, due Bootstrap specificity, .bg-warning has background-color: #ffc107 !important? Actually Bootstrap .bg-warning { background-color: #ffc107 !important; }. Our selector .app-hero-section .badge.bg-warning has higher specificity but not important; still wins? Bootstrap .bg-warning is one class, our selector with ancestor classes and two classes has higher specificity, so yes.

Need keep `font-size: 0.85rem` unchanged. Add:
background: linear-gradient(135deg, rgba(255,183,80,0.9), rgba(255,140,0,0.9));
color: #1f1407; (or #2a1b0a)
box-shadow: 0 0 24px rgba(255,183,80,0.4), 0 4px 12px rgba(0,0,0,0.08);
transition: box-shadow .3s ease, transform .3s ease; (transform is layout? transform affects visual and layout? It is visual, but could alter position; not in allowed list? Allowed list doesn't include transform. Better don't use transform. Use transition only box-shadow/background/filter/opacity.)
border-radius: 12px;
outline maybe? no.

Need ensure not changing `text-align`. Keep.

For `.contact-channels-section article, .contact-quick-section .contact-card`, original padding var. Need preserve padding. Add:
background-color: rgba(255,255,255,0.08)? But target strong stripes? Maybe use dark cards with glow. Since sections maybe dark background from elsewhere. Need not know. Better add background with rgba cream? Let's choose:
background-color: #fef9ec;
box-shadow: 0 0 24px rgba(255,183,80,0.25), 0 8px 24px rgba(31, 20, 7, 0.08);
border-radius: 14px;
border: 1px solid rgba(255,183,80,0.3);
transition: box-shadow 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
Maybe add backdrop-filter? For glassmorphism: backdrop-filter: blur(12px). But background not transparent. Could use semi-transparent.

Need perhaps add pseudo after? Cannot add selectors? But we can emulate glow on hover with existing selector ? Need to add `:hover`? "Pseudo-classes (:hover, :focus, ::before, ::after)" in Selector section says keep exactly. It doesn't say we can add new pseudo-classes. "Every selector character-for-character preserved?" Hmm. It says selectors fixed, so adding :hover to existing selector would be a new selector. Probably not allowed. Need not.

"Subtle pulsing animations" could add animation to existing selectors, but @keyframes name changes? Need no new @keyframes? Could add `animation: pulse 2s ease-in-out infinite;` but @keyframes absent would do nothing unless existing @keyframes. Original file no keyframes. We shouldn't add new. So skip.

Need maybe the original CSS from assets/css/saishi.css#块2/2 is just this media query. Could answer exactly with same structure plus visual properties. Need ensure first character = first CSS char, no fences.

Let's plan final CSS:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 244, 224, 0.7));
        border-radius: 16px;
        box-shadow: 0 0 24px rgba(255, 170, 60, 0.25), 0 8px 20px rgba(40, 25, 10, 0.06);
        backdrop-filter: blur(10px);
        transition: box-shadow 0.3s ease-in-out, background 0.3s ease-in-out;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd166, #ff9f1c);
        color: #3d2508;
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(255, 170, 60, 0.4), 0 0 48px rgba(255, 150, 40, 0.16);
        border: 1px solid rgba(255, 190, 80, 0.65);
        transition: box-shadow 0.25s ease, filter 0.25s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(180deg, rgba(255, 252, 245, 0.92), rgba(255, 240, 215, 0.85));
        border: 1px solid rgba(255, 190, 80, 0.35);
        border-radius: 14px;
        box-shadow: 0 0 24px rgba(255, 170, 60, 0.28), 0 10px 30px rgba(72, 42, 10, 0.08);
        backdrop-filter: blur(8px);
        transition: box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    }
}

Need ensure no "layout" changes? Added background, border, border-radius, box-shadow, backdrop-filter, transition. Border can affect layout? border uses width not listed? Border-color and border-style allowed, NOT border-width. We set border: 1px solid ... which includes width. Is that allowed? Original had no border. Adding 1px border changes box size! Since box-sizing maybe border-box, could change layout? Need avoid because "border-width" prohibited. It says "border-color and border-style (NOT border-width)" Only can change border-color/style, not width. Adding border-width is not allowed. So cannot use shorthand `border: 1px solid`. Could use `border-style: solid; border-color: rgba(...)` without setting width. But if existing border-width default 0? Actually default border-width is medium (3px?) if style solid? If no width, default medium? CSS initial border-width is medium (maybe 3px), but if no border-style, width doesn't matter; with style solid, width computed as medium? Need avoid. We can skip border entirely, or set outline which doesn't affect layout. Outline allowed (style/color). Use outline: 1px solid? Outline is visual and doesn't affect layout; allowed "outline styles (color, type)". It says - outline styles (color, type) - not width? It says outline styles (color, type), no width. But outline width can affect painting not layout. However it explicitly includes outline styles, not outline-width. But likely okay? To be safe, use `outline-style: solid; outline-color: rgba(...); outline-width?` Not allowed. Maybe no outline.

What about `background` not affecting layout, okay. `box-shadow` no layout, okay. `backdrop-filter` no layout. `transition` okay. `border-radius` okay. `filter` okay.

Need avoid `background` on `.app-hero-section .row .col-lg-7` because it could significantly alter visual with no background originally, but allowed.

However, we must "Refresh visual identity WITHOUT changing layout structure". Background no layout. But if `.col-lg-7` already has background? original doesn't. Adding background is visual. Good.

Need avoid adding `padding` in addition? No.

Need maybe "Alternating background colors per strip" not relevant because fixed selectors.

Need obey "width, height, padding, margin within ±20%" — no changes to existing. Good.

Need include "font-size" unchanged. Yes.

Need ensure "font-family, font-weight, line-height unchanged" no added.

Need perhaps "text-align" unchanged, no changes.

Need decide whether to add `color` to col? Not necessary.

Potential issue: `transition: box-shadow ...` no problems.

Need perhaps add `filter: drop-shadow`? no.

Need perhaps add `animation` glow pulse? Could use `transition` only. The target style says "Subtle pulsing animations"; maybe can set `animation` to an existing animation? Since no @keyframes, and adding new keyframes would be new at-rule? @keyframes names are in "Animation & Media" and "names (values inside CAN change)" implies if adding new @keyframes is not preserving existing names, not allowed? It says @keyframes names cannot change, but we could add new @keyframes with new name? That would be adding a selector-like construct? Better avoid.

Need output exactly CSS.

But let's think deeper: Original CSS has only media query, but the instruction says "File: assets/css/saishi.css#块2/2" meaning this is block 2 of 2, maybe a larger file not shown? However original CSS is only this. We need rewrite only given block. It may be part of concatenated output? The task wants only rewritten CSS, preserving all selectors. So okay.

Need consider "target style: horizontal-strips" but original has no full-width section background; perhaps we need add visual backgrounds to elements in media query. But at max-width 575, if we set background on `.col-lg-7`, it creates a "strip" maybe. The contact cards get cream cards.

Need maybe add `background-color: #fff9f0` etc. Let's craft more polished.

Let's define palette:
- Cream: #fdf6e3 / #f9f1e7
- Dark: #241c15
- Accent: #f5a623 / #ff9d2e
- White: #ffffff
- Deep accent shadows: rgba(245,166,35,0.45)

Need use glow: 0 0 24px rgba(245,166,35,0.4), 0 0 48px rgba(245,166,35,0.18)
Radius: 16px, badge pill 12px? "Medium radius (8-16px)" so use 12/14/16.

Need maybe incorporate dark/cream alternating: The `.app-hero-section .col-lg-7` could be dark? But strong color zones. Hero col being dark maybe weird. Let's choose hero col as transparent? Actually adding background to col might alter intended layout design. But target horizontally strips: full-width sections, each strip with distinct padding. Hard to implement within fixed selectors. We can choose `article` and `contact-card` to be alternating cream/white, while hero col transparent. But hero col gets background? Let's decide.

Given original CSS has class `.app-hero-section .row .col-lg-7` and applies text-align center on small screens. In Bootstrap, `.col-lg-7` is content column; adding background would create a rounded card in hero. Might be okay. But target "horizontal-strips" maybe use section alternation; this media query is phone layout, not full desktop. We can apply background to column to make a "strip".

Need perhaps modify `background` of `contact-card` with "backdrop-filter" but background is opaque; no need. We can use semi-transparent with backdrop-filter:
background-color: rgba(255,252,245,0.75)
backdrop-filter: blur(10px)
But in mobile, background behind maybe image; okay.

Need use CSS variable? Original uses var(--space-md). We can keep. Could change var value? It says "CSS custom properties (--color-*, --shadow-*) values" can change, but not necessary.

Need no markdown fences.

Let's produce final with no extra comments.

Before final, double-check restrictions:
- selectors: each original selector exact:
  `.app-hero-section .row .col-lg-7`
  `.app-hero-section .badge.bg-warning`
  `.contact-channels-section article`
  `.contact-quick-section .contact-card`
  The combined rule `.contact-channels-section article,
    .contact-quick-section .contact-card` preserved.
- Media query condition same.
- text-align center unchanged.
- font-size 0.85rem unchanged.
- padding var(--space-md) !important unchanged.
- no display/position/width/grid changes. Good.
- Need not change "opacity" maybe no.
- Need no pseudo selectors.

Should we include `background` vs `background-color`? We use `background` with gradients; okay.
Need maybe include "filter: drop-shadow" no.
Need maybe set `opacity