/* ============================================================
   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;
    }
}

Let me work through the CSS refresh, applying the horizontal-strips layout and soft-shadows effect while preserving all selectors and layout properties.

1.  **Analyze the Request:**
    *   **Mode:** 🛡️ CONSERVATIVE MODE (HTML fixed, visual changes only).
    *   **Target Style:** horizontal-strips (Full-width sections, alternating padding/background colors per strip, but I am only editing CSS, the HTML structure with these classes is fixed. The CSS provided is for a mobile breakpoint).
    *   **Effect Variant:** soft-shadows (Multi-layer shadows, large border-radius, smooth transitions).
    *   **Source:** The user provides a specific small block of CSS.
    *   **Constraints:**
        *   ONLY change: colors, shadows, radius, transitions, gradients, filter, backdrop-filter, opacity, outline, caret-color, accent-color, CSS custom properties (`--color-*`, `--shadow-*`).
        *   NEVER change: Selectors, layout properties (display, position, grid-*, flex-*, width, height, margin, padding, etc.), typography (font-*, line-height, etc.), animation names, media query breakpoints.
        *   Output ONLY the rewritten CSS. No markdown fences, no explanations.

2.  **Evaluate the Original CSS:**
    ```css
    @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;
        }
    }
    ```
    *   This is a small media query block.
    *   Selectors: `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article`, `.contact-quick-section .contact-card`.
    *   Properties in the original:
        *   `text-align: center;` -> LAYOUT property. MUST NOT CHANGE.
        *   `font-size: 0.85rem;` -> TYPOGRAPHY property. MUST NOT CHANGE.
        *   `padding: var(--space-md) !important;` -> LAYOUT property. MUST NOT CHANGE (though it uses a variable `--space-md`, I *could* change the variable value if it was defined here, but it's not. I am changing the literal values in the CSS. The padding value itself must stay similar. The variable `var(--space-md)` cannot be resolved here, so I must keep it exactly as it represents the layout.)
    *   Wait, the prompt says "Only change colors, shadows, radius, transitions, gradients...".
    *   The properties listed in the original CSS (`text-align`, `font-size`, `padding`) are explicitly in the "NEVER CHANGE" list.
    *   Are there *any* colors, shadows, radius, transitions, or gradients in this specific CSS block? NO.
    *   Does this mean I output nothing? No, I must apply the "Target Style" and "Effect Variant" to the spirit of the CSS, or maybe the surrounding CSS context. But the instruction is very clear: "Only change colors, shadows, radius, transitions, gradients..."
    *   Since the original code snippet doesn't contain any of the mutable properties, I can technically add new mutable properties (like `box-shadow`, `transition`, `border-radius`) to the selectors, as long as I don't change the existing immutable properties.
    *   Let's check the "Target Style: horizontal-strips" and "Effect Variant: soft-shadows".
    *   *Wait*, the specific properties I can change (colors, shadows, radius) are not present in the original CSS. I am allowed to change `color values`, `box-shadow`, `border-radius`, `transition`, etc.
    *   I can *modify* existing ones, but if there are none, can I *add* them? The instruction says: "You MUST CHANGE (visual identity only): ... ALL color values... box-shadow... text-shadow... border-radius... transition..."
    *   "You MUST CHANGE" implies I need to alter the existing values. If none exist, maybe I need to add them? "NEVER CHANGE: ... padding, margin (keep similar values, ±20% maximum) ... font-size ... text-align"
    *   Rule: "NEVER CHANGE: ... selector lists (commas) ... display values ... position ... width, height, padding, margin (keep similar values) ... text-align ... font-size"
    *   Okay, I must keep the original properties exactly as they are.
    *   But I must *add* or *modify* visual properties to achieve the "horizontal-strips" and "soft-shadows" look.
    *   Let's re-read carefully: "Refresh the visual identity WITHOUT changing layout structure or class names... ONLY the rewritten CSS, preserving ALL selectors and layout exactly."
    *   How can I apply "horizontal-strips" (alternating bg colors, distinct vertical padding) and "soft-shadows" (multi-layer shadows, large border-radius, smooth transitions) to these specific selectors?
    *   `.app-hero-section .row .col-lg-7` -> This is a column. Adding a background, border-radius, box-shadow, and transition would give it a "card" or "strip" feel. The original has `text-align: center;`. I can add `background`, `box-shadow`, `border-radius`, `transition`.
    *   `.app-hero-section .badge.bg-warning` -> This is a badge. The original has `font-size: 0.85rem;`. I can change the background color, add box-shadow, border-radius, transition.
    *   `.contact-channels-section article, .contact-quick-section .contact-card` -> These are cards. The original has `padding: var(--space-md) !important;`. I can add background, box-shadow, border-radius, transition.
    *   Let's formulate the new visual properties.
    *   **Color Palette (horizontal-strips):** Alternating white/cream/dark/white. Let's use a soft, elegant palette. Cream: `#fdfbf7`, Dark: `#2c3e50` or `#1a202c`, White: `#ffffff`. Accent/Warning: A muted gold/amber `#d69e2e` or `#f6ad55`.
    *   **Effects (soft-shadows):**
        *   Multi-layer: `0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)`
        *   Border-radius: `12px` to `24px`
        *   Transition: `0.4s ease` or `0.5s ease`
    *   **Applying to the specific selectors:**
        1.  `.app-hero-section .row .col-lg-7`:
            *   Original: `text-align: center;`
            *   Add: `background: #ffffff;` (or maybe keep transparent? No, "horizontal-strips" implies blocks. Let's add a subtle background).
            *   Add: `border-radius: 16px;`
            *   Add: `box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);`
            *   Add: `transition: all 0.4s ease;`
            *   Wait, the prompt says "Only change colors, shadows, radius, transitions, gradients...". If I add these properties, am I "changing" them or "introducing" them? The prompt says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." This strongly implies I should output the selectors with their original layout properties untouched, and add/modify the visual properties listed.
        2.  `.app-hero-section .badge.bg-warning`:
            *   Original: `font-size: 0.85rem;`
            *   Change `bg-warning` color. The original Bootstrap warning is `#ffc107`. I can change it to a softer or more vibrant color, e.g., `background: #f6ad55;` or `background: linear-gradient(135deg, #f6ad55, #ed8936);`.
            *   Add: `border-radius: 12px;`
            *   Add: `box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);`
            *   Add: `transition: all 0.4s ease;`
            *   Note: Bootstrap `.badge` might have `padding`, `font-size`, etc. I am not changing those, only adding/overriding visual properties.
        3.  `.contact-channels-section article, .contact-quick-section .contact-card`:
            *   Original: `padding: var(--space-md) !important;`
            *   Add: `background: #ffffff;`
            *   Add: `border-radius: 16px;`
            *   Add: `box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);`
            *   Add: `transition: all 0.4s ease;`

    *   Wait, is `background` allowed? Yes, "ALL color values: background, color, border-color, fill, stroke, outline-color".
    *   Is `border-radius` allowed? Yes, "border-radius (visual rounding only)".
    *   Is `box-shadow` allowed? Yes, "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)".
    *   Is `transition` allowed? Yes, "transition timing, easing, duration".

3.  **Refining the Color Palette and Effects:**
    *   Let's create a consistent "soft-shadows" and "horizontal-strips" identity.
    *   Since it's a mobile breakpoint (max-width: 575.98px), these elements will stack vertically. This naturally creates horizontal strips!
    *   `col-lg-7` will take full width. Adding `background`, `border-radius`, `box-shadow` makes it a distinct strip.
    *   `badge.bg-warning` is an inline element, but adding shadows and radius gives it a soft, pill-like modern look.
    *   `contact-channels-section article` and `contact-quick-section .contact-card` are already blocks/cards. Adding `background`, `border-radius`, `box-shadow` enhances the strip/card feel.
    *   Let's use a nice, neutral, elegant palette.
        *   Card background: `#ffffff`
        *   Article background: `#fdfbf7` (cream) - wait, the user said "Alternating: white / cream / dark / white pattern". I can't change the HTML, but I can change the CSS background of these specific elements.
        *   Let's set `.contact-channels-section article` to `background: #fdfbf7;` (cream).
        *   Let's set `.contact-quick-section .contact-card` to `background: #ffffff;` (white).
        *   Let's set `.app-hero-section .row .col-lg-7` to `background: #ffffff;` (white).
        *   Let's change the `.badge.bg-warning` background to a gradient or a solid color that fits nicely.
        *   Soft shadow: `0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)`
        *   Border-radius: `16px` for cards, `12px` for badge.
        *   Transition: `all 0.4s ease` -> maybe `transform: translateY(-2px)` on hover? The prompt says "NEVER CHANGE: ... animation-name (values inside CAN change)". Hover is a pseudo-class, it MUST be preserved exactly if it existed, but I can add pseudo-classes? "Only change colors, shadows, radius, transitions, gradients." Adding a hover pseudo-class strictly falls under changing selectors, which is forbidden. So I will NOT add `:hover` pseudo-classes. I will only add mutable properties to the existing selectors.

4.  **Drafting the Output:**
    ```css
    @media (max-width: 575.98px) {
        .app-hero-section .row .col-lg-7 {
            text-align: center;
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
            transition: all 0.4s ease;
        }

        .app-hero-section .badge.bg-warning {
            font-size: 0.85rem;
            background: linear-gradient(135deg, #f6ad55, #ed8936);
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
            transition: all 0.4s ease;
        }

        .contact-channels-section article,
        .contact-quick-section .contact-card {
            padding: var(--space-md) !important;
            background: #fdfbf7;
            border-radius: 16px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
            transition: all 0.4s ease;
        }

        .contact-quick-section .contact-card {
            background: #ffffff;
        }
    }
    ```
    Wait, `.contact-channels-section article` and `.contact-quick-section .contact-card` are combined with a comma. If I separate them to give `.contact-quick-section .contact-card` a different background, I am changing the selector list structure. "NEVER CHANGE: ... Selector lists (commas)". A comma-separated list is a single CSS rule. If I split it into two rules, I am changing the structure.
    Instead, I can keep them combined and not assign a background, OR assign the same background. To strictly follow "NEVER CHANGE selector lists", I should keep them combined.
    Let's assign the same background to both, or use a CSS custom property, or just keep the combined rule.
    Wait, I can add a new completely separate rule for `.contact-quick-section .contact-card` AFTER the combined rule. That is not changing the existing rule, it's adding a new one. "Only the rewritten CSS, preserving ALL selectors and layout exactly." Adding a new rule technically "changes" the CSS file, but it doesn't break the HTML. The prompt says "You MUST CHANGE (visual identity only)". Adding new CSS declarations is not explicitly forbidden, but "preserving ALL selectors" strongly implies I shouldn't add new selectors. I should avoid adding new selectors or changing selector groups.

    Let's refine the combined rule to be visually coherent.
    Both articles and contact cards will get the same base style.
    ```css
    @media (max-width: 575.98px) {
        .app-hero-section .row .col-lg-7 {
            text-align: center;
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
            transition: all 0.4s ease;
        }

        .app-hero-section .badge.bg-warning {
            font-size: 0.85rem;
            background: linear-gradient(135deg, #f6ad55, #ed8936);
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
            transition: all 0.4s ease;
        }

        .contact-channels-section article,
        .contact-quick-section .contact-card {
            padding: var(--space-md) !important;
            background: #fdfbf7;
            border-radius: 16px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
            transition: all 0.4s ease;
        }
    }
    ```
    This is clean, preserves all selectors, and applies the "soft-shadows" and "horizontal-strips" (alternating `#ffffff` and `#fdfbf7` backgrounds) effectively.

    Let's double-check the colors.
    `#ffffff` -> white
    `#fdfbf7` -> cream/off-white
    `#f6ad55` / `#ed8936` -> warm amber/orange (modern warning colors).
    Shadows: `0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)` -> Exactly matches the "soft-shadows" variant.
    Border-radius: `16px` for cards, `12px` for badge. Fits the 12-24px range.
    Transitions: `all 0.4s ease`. Fits the 0.3-0.5s range.