/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need to rewrite the CSS. Original CSS is a media query with a few selectors. We need to refresh visually, but the original CSS doesn't have any colors, shadows, radius, transitions, gradients. It only has text-align and padding, font-size. Hmm. We must keep selectors and layout exactly. The layout properties are text-align, padding, font-size. Those are in the "never change" list? text-align is layout/typography? Actually text-align is in the "layout" forbidden? Let's check: "text-align, vertical-align" are listed under 📐 LAYOUT (HTML cannot adapt to changes). Actually in the "NEVER CHANGE" list, text-align is included. Similarly padding is in layout with ±20% maximum. Font-size is in typography (unchanged). So there's almost no visual property to change except maybe we can add properties? The instruction: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Since original has none, we could add color/background/etc? But must preserve layout. We can add visual properties to existing rules. But we must not change selectors. We can add new declarations inside the existing selectors? Likely yes. But we must be careful: the HTML is fixed, class names etc. We can inject colors, shadows, radius, gradients. Also the rule about "border-color and border-style (NOT border-width)" etc.

We need to output CSS that includes the same media query, same selectors, same properties that are layout (text-align, padding, font-size) but maybe we can adjust padding slightly? The instruction says padding margin keep similar values, ±20% maximum. The current padding uses var(--space-md). We can keep that or maybe adjust? Better keep var. But then no visual change. We can add background, border-radius, box-shadow to those elements. But those elements are inside media query: `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article`, `.contact-quick-section .contact-card`. We can add visual decorations. But careful: adding background to `.app-hero-section .row .col-lg-7` might change layout? No, background doesn't affect layout. Add border-radius, box-shadow, transitions. Also change color properties? We can add color, border-color, etc.

However, "first character = first CSS character" and no markdown. We output the entire rewritten CSS. Since original is just a media query, we can include additional declarations inside each rule.

Need to honor target style: horizontal-strips, gradient-rich, alternating white/cream/dark/white pattern. But this media query is for small screens, likely elements are cards. We can apply gradients.

Let's inspect original: It's a media query at max-width 575.98px. It sets text-align center on hero column, font-size on badge, padding on contact cards. We can add visual properties to those elements, e.g. for badge: add background gradient, color, box-shadow, etc. But `bg-warning` is a Bootstrap class, so adding background to `.app-hero-section .badge.bg-warning` would override? We can add `background: linear-gradient(...)`, `color`, `border-radius`. That's visual. Also `.app-hero-section .row .col-lg-7` could get a subtle gradient text? Maybe color? But it's a layout container; adding background could be bad. But we can add text-shadow? Hmm.

The instruction says: "Only change colors, shadows, radius, transitions, gradients." So we can add these properties. We need to ensure padding remains within ±20%. We can keep exact padding. Font-size kept exact. text-align kept exact.

Maybe the goal is to produce a visually refreshed CSS with the same selectors. Since original lacks visual properties, we can add new ones that don't violate layout. But we must be careful about `!important`? Original uses !important on padding. We keep that.

Let's craft:

- For `.app-hero-section .row .col-lg-7`: add `background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,245,235,0.7));` maybe with border-radius. But that's a column inside hero section; background on col-lg-7 might affect layout? No. But it might cover background of parent? If the column has background, it could look like a card. But in hero, maybe not desired. The target is horizontal-strips and gradient-rich. Hmm.

We need to be conservative: don't break. Adding a background to the col-lg-7 might be okay but could alter appearance. Since only colors are allowed, it's acceptable. But the hero section likely has a background; adding background to column could create a box. Maybe better to add a subtle background gradient to the badge and contact cards, and to the article/cards. For col-lg-7, add `color: #2d2a32;`? But the text-align only. We can add `text-shadow` maybe. Let's think.

Original file "saishi.css" is likely a custom stylesheet for a competition site. The media query adjusts layout. We need to refresh visual identity, but only in this snippet. We can add properties that are visual.

Let's choose a palette: horizontal-strips alternating white/cream/dark/white. Gradient-rich. The existing classes: `.contact-channels-section article`, `.contact-quick-section .contact-card`. These are likely cards. We can give them gradients, borders, shadows.

But note: We must maintain selectors exactly. Also we cannot add new selectors. We can only rewrite existing rules. We can add declarations.

Let's define a cohesive visual refresh:

- Use a warm amber/terracotta palette with deep slates, maybe #1f1a17 dark, #faf3e8 cream, #e8a87c accent.
- Gradients: `linear-gradient(145deg, #fff9f0, #f5e6d3)` for cards, dark gradient for hero column maybe.
- Box shadows: multi-layer, e.g. `0 10px 30px -10px rgba(31,26,23,0.15), 0 4px 8px rgba(31,26,23,0.05)`.
- Border radius: large, e.g. `1.5rem` for cards.
- Transition: `0.45s cubic-bezier(0.22, 1, 0.36, 1)`.

But we need to not set `transition` on everything? Could.

Let's write CSS with the same media query and selectors. Since original has no visual properties, we can add them. But there's a risk: adding `background` to `.app-hero-section .row .col-lg-7` might create a full-width strip with background and radius, which could be okay. But the hero section likely has a container with row; adding background to col-lg-7 could make it look like a block. The target style "horizontal-strips" suggests full-width sections with alternating backgrounds. But we can't change display/flex properties, but background is fine.

Let's not overdo; apply gradients to cards and badge, and maybe a subtle gradient to the hero column.

Original rule:

@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 can add:

.app-hero-section .row .col-lg-7 {
    text-align: center;
    background: linear-gradient(160deg, rgba(255,255,255,0.95), rgba(255,241,229,0.85));
    border-radius: 2rem 2rem 2rem 2rem;
    box-shadow: 0 12px 40px -12px rgba(120, 70, 40, 0.2);
    transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

But that will change the look significantly. Is that acceptable? We are asked to "make colors, shadows, and radius MORE distinct this round." So yes.

For badge:
    font-size: 0.85rem;
    background: linear-gradient(135deg, #f6b26b, #e07c3e);
    color: #fff;
    border-radius: 100px;
    box-shadow: 0 4px 14px rgba(224, 124, 62, 0.35);
    transition: transform 0.4s cubic-bezier(...) ? Transform is animation/visual, can we add? It's not in forbidden list? Actually transition property allowed, but adding transform on hover would require a selector with :hover, which is not present. We can't add new selector. We can add a transition but no hover. That's fine. We don't need transform.

But note: `.bg-warning` in Bootstrap sets background-color: #ffc107 and color: #212529. Our gradient overrides background. Need `color` to ensure contrast.

For contact cards:
    background: linear-gradient(145deg, #ffffff, #fbf3e8);
    border: 1px solid #f0dfc8;
    border-radius: 1.75rem;
    box-shadow: 0 18px 45px -20px rgba(80, 60, 40, 0.25), 0 6px 14px -6px rgba(80, 60, 40, 0.08);
    transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1);

But can we add border? It is a visual property. The forbidden list says "border-color and border-style (NOT border-width)" can change. We can add `border: 1px solid #...`? That includes width. The instruction says "NOT border-width". We cannot set border-width. But we can set `border-style` and `border-color`. Existing border-width if any? We don't know. To be safe, use `border-color` and `border-style`, no width. But adding border without width may use default 3px? Usually if you set `border-style: solid; border-color: ...`, the width is from existing styles or default medium (3px). That could change layout. Better to use `outline`? Hmm. The instruction is weird: "border-color and border-style (NOT border-width)" means we may change color and style, but not width. We can add `border-color` and `border-style` only if the element already has a border with width. But if we add border-style, the width might become default. To avoid layout change, we could use `box-shadow` to create border-like effect instead of border. But border-color and border-style are allowed to change. We can set `border: 0`? That's width. Better use `outline`? Outline is allowed? Under "outline styles (color, type)" we can change. We can set `outline` color and style, but not width. Again width issue. But adding outline can affect layout? No, outline doesn't affect layout. We can add `outline: none` maybe? Not needed.

Better to avoid border altogether. Use `box-shadow` to simulate border: `box-shadow: inset 0 0 0 1px rgba(...)`.

Also `border-radius` is allowed. `transition` allowed.

We need to preserve padding exactly or within ±20%. Since we don't change padding, fine.

Let's consider the target "horizontal-strips": perhaps add a gradient to the hero column and cards. But no full width sections? The selectors are not full-width. But that's okay.

Let's craft a final CSS. We should output only the media query, with the same selectors, but additional declarations. Ensure no layout properties changed. Keep `text-align: center;`, `font-size: 0.85rem;`, `padding: var(--space-md) !important;` as is. Add colors, gradients, shadows, radius, transitions.

We also must not add new selectors. Good.

Let's write:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(252,237,222,0.78));
        border-radius: 2rem;
        box-shadow: 0 16px 40px -18px rgba(94, 58, 36, 0.28), 0 6px 18px -12px rgba(94, 58, 36, 0.12);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f7b267, #d96c31 55%, #b84a1f);
        color: #fff8f2;
        border-radius: 100px;
        box-shadow: 0 6px 18px -6px rgba(217, 108, 49, 0.5), 0 2px 6px rgba(94, 58, 36, 0.15);
        transition: background 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(150deg, #fff, #f6eadb);
        border-radius: 1.75rem;
        box-shadow: inset 0 0 0 1px rgba(240, 214, 182, 0.7), 0 20px 45px -20px rgba(79, 48, 28, 0.25), 0 8px 20px -12px rgba(79, 48, 28, 0.1);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

But is `transition` on `.contact...` allowed? Yes. We are not changing layout. The `box-shadow: inset 0 0 0 1px` creates a border effect without border-width. Good.

However, the instruction says "FUNNEL - If the original CSS contains no colors, shadows, radius, transitions, gradients, then return the original CSS unchanged?" Actually user prompt says "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette." So they expect changes even if original lacked. We should make distinct. So yes.

But we must be careful about `transition` on `.app-hero-section .row .col-lg-7`: adding a background to a column might be considered layout? No, background is fine. But if we set `border-radius` on a col with no background, it may have no visual effect unless background is set. We set background, so okay.

Let's make the palette more "horizontal-strips" alternating: The hero col gets a dark gradient? The target says alternating white / cream / dark / white. The contact cards could alternate? Since they are separate elements, we can make one cream and one dark? But selector group covers both article and contact-card. If we set same background, no alternating. But maybe in the DOM they alternate? We can't distinguish them with the grouped selector. We could split the selector list? No, must preserve selector lists exactly. We cannot add separate selectors for article vs .contact-card if original grouped. Actually we can rewrite but preserving selectors: `a, b` must remain. We can't break them apart. So both get same background. But perhaps the original list is `article, .contact-card`—we could change? The instruction says "Selector lists (commas) — preserve exactly" meaning keep them. So we keep.

Maybe use a gradient in the contact cards that has both cream and dark? Or use `background-image` with two layered gradients to create a strip pattern? For "horizontal-strips", we can use repeating-linear-gradient or conic? But that may be too much. Since the target style is only for inspiration, not strict.

Let's ensure the padding remains exactly `var(--space-md) !important;`. Also font-size remains. text-align remains.

We can also add `accent-color`, `caret-color`? Not necessary.

Let's think about the first selector: `.app-hero-section .row .col-lg-7` is a column, probably inside a hero row. Adding a background may look like a panel. Could be okay.

But the original style might already have a background from another rule; by setting background in a media query, we override. That's a visual change.

Now, "border-radius" values: we can use large values. "MORE distinct" — use `border-radius: 2.5rem 1rem` etc. For badge, use pill.

Let's produce final CSS without comments or markdown. But before final, let's double-check the "never change" list: `padding` can change ±20