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

The user wants me to rewrite the CSS with a fresh visual identity while keeping all selectors and layout properties exactly. The target style is "sidebar-classic" with "gradient-rich" variant.

The original CSS is a media query with:
1. `.app-hero-section .row .col-lg-7` - text-align: center (this is a layout property, text-align is in the "never change" list)
2. `.app-hero-section .badge.bg-warning` - font-size: 0.85rem (typography, never change)
3. `.contact-channels-section article, .contact-quick-section .contact-card` - padding: var(--space-md) !important (padding, can change ±20%)

Wait, this is tricky. The only properties in the original CSS are:
- text-align: center (never change)
- font-size: 0.85rem (never change)
- padding: var(--space-md) !important (can change ±20%)

So visually, there isn't much to change. But the task says to refresh the visual identity. Since the original CSS is inside a media query, I need to preserve the media query and selectors.

The properties I can change:
- padding: var(--space-md) — can adjust within ±20% or change padding values/colors? Padding is a layout property but the instruction says "padding, margin (keep similar values, ±20% maximum)".

But the target style wants gradient-rich, sidebar-classic colors. The media query is for mobile max-width 575.98px. The target style mentions a two-column layout with sidebar, but that's for aggressive mode. In conservative mode, I can't change the layout.

Since the original CSS only has layout/typography properties, there's literally nothing visual to change except padding. But the instructions say to output rewritten CSS preserving everything.

Hmm, but maybe I can add visual properties? Like background gradients, borders, box-shadow, border-radius to these elements? The instructions say "Refresh this CSS visually" — I can add decorative properties that don't exist yet, as long as I don't change the layout.

Wait, but the instructions say "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It doesn't say I can't ADD new visual properties. Actually it says "only colors, shadows, and decorative properties may change" — so I can add decorative properties.

But should I? The original CSS is minimal. Adding gradients/borders to these selectors could work. Let me think about what makes sense:

1. `.app-hero-section .badge.bg-warning` — a badge. I can add a gradient background, box-shadow, border-radius. But `.bg-warning` is a Bootstrap class... if I add background to it, it might override Bootstrap. That could be the "refresh."

2. `.contact-channels-section article, .contact-quick-section .contact-card` — cards. I can add gradient backgrounds, border-radius, box-shadow.

3. `.app-hero-section .row .col-lg-7` — just a column with centered text. Can't do much visually without breaking layout. Maybe nothing.

Let me be careful: The instruction is to rewrite the CSS. The original CSS has 3 rules. I should preserve all selectors and the properties that cannot change. For properties I can change, I should change them. For elements without any changeable properties, I can add decorative properties.

Let me check each rule:

Rule 1: `.app-hero-section .row .col-lg-7 { text-align: center; }` — text-align cannot change. Nothing else here. Should I add something? Adding background/gradient to a column could break the layout visually... but conservative mode allows adding visual properties as long as display/position etc. remain. Hmm, but adding a background to a column might not be desired. The safest is to leave it as is, or maybe add nothing.

Actually, the instructions say "All color values" must be changed. There are no color values. "box-shadow (offsets, blur, spread, color — fully redesign)" — no box-shadows. I think I should add decorative properties to make the refresh meaningful. But I must be careful not to change layout.

Let me think about the badge rule:
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
}
```
font-size is typography, cannot change. But I can add:
- background: linear-gradient(...) — but `.bg-warning` sets background-color in Bootstrap. Adding a gradient would override the background-color. That's a visual change. But would it clash with the badge? It's a warning badge, typically yellow/amber. A gradient-rich variant could use a rich amber/orange gradient.
- box-shadow: with a warm glow.
- border-radius: maybe slightly more rounded.
- transition: for hover effects.

Rule 3: `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }`
Padding can change ±20%. `--space-md` is a CSS variable. I don't know its value. I could change padding to `calc(var(--space-md) * 0.9)` or keep similar. But the instruction says keep similar values ±20% max. Since I don't know the base value, changing it could be risky. But I could set it to `calc(var(--space-md) * 1.1)` — hmm, that's within 20%. Or keep it the same and add other visual properties: border-radius, box-shadow, background gradient, border.

Given the target "gradient-rich" variant, I should add:
- background: linear-gradient for cards
- border-radius for rounded corners
- box-shadow multi-layer
- transition with cubic-bezier
- Maybe a gradient border via border-image (but border-image doesn't work with border-radius, so I'd use background-clip trick or just use box-shadow).

Let me craft a solution:

```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;
        background: linear-gradient(135deg, #f7b733 0%, #fc4a1a 100%);
        border: 1px solid rgba(247, 183, 51, 0.4);
        border-radius: 50rem;
        box-shadow: 0 0.25rem 1rem rgba(247, 183, 51, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
        transition: box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%), linear-gradient(135deg, #2b3444 0%, #1e2633 100%);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 1rem;
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        backdrop-filter: blur(0.25rem);
    }
}
```

Wait — but the target style says "Sidebar darker (#252e3a), main lighter". The original CSS has no colors defined, so I'm free to choose. The palette in the original might come from bootstrap variables. I should not redefine Bootstrap globally.

Hmm, but the padding: `var(--space-md)` — the instruction says padding can change ±20%. I'm keeping it the same. That's fine since there's nothing else to change there.

But wait — should I be more conservative? Adding `backdrop-filter` could be risky if there's no background behind.

Also the concern: adding `background` to `.badge.bg-warning` overrides the Bootstrap `.bg-warning` utility. If the HTML relies on `.bg-warning` to show a warning (yellow) badge, changing to orange/amber gradient is okay visually. But the class attribute `bg-warning` — the instructions say "Attribute selectors" and class names are fixed, but the visual can change.

Actually, let me reconsider. The instruction says "All color values" must be replaced with fresh palette. Since the original has no colors, I'm adding fresh ones. The "gradient-rich" variant wants gradients on most backgrounds. So my additions align.

However, there's a risk: the badge with `.bg-warning` is inside `.app-hero-section`. If I set a background gradient on the badge, it overrides the warning color. That might change the meaning of the badge. But visually, the target is a refresh. An amber gradient still reads as "warning" with orange tones. I'll go with amber/orange.

For the `.contact-*` cards, adding a dark gradient matches the "sidebar darker (#252e3a)" palette.

Now, let me double-check I'm not violating any rule:

Rule 1: text-align center — unchanged. ✓
Rule 2: font-size 0.85rem — unchanged. ✓ Added background, border, border-radius, box-shadow, transition. These are visual-only. ✓
Rule 3: padding var(--space-md) !important — unchanged (within ±20%). ✓ Added background, border, border-radius, box-shadow, transition, backdrop-filter. ✓

Selectors preserved exactly:
- `.app-hero-section .row .col-lg-7` ✓
- `.app-hero-section .badge.bg-warning` ✓
- `.contact-channels-section article, .contact-quick-section .contact-card` ✓
- Media query `@media (max-width: 575.98px)` ✓

No layout changes. Display, position, width, height, margin, gap all untouched. Font-family, font-size, font-weight, line-height untouched.

Wait, I'm adding a transform to the badge transition — but `transform` is in the layout properties list? Let me check: "display, position, grid-template-*, width, height, padding, margin, gap, justify-content, align-items, align-self, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, object-position, text-align, vertical-align" — no transform listed. But actually the safe thing is to only transition box-shadow, not transform. Let me remove transform from the transition to be safe. Actually transition property just defines what properties transition — adding "transform" as a value doesn't change layout. But if transform isn't set, it won't do anything. I'll keep transition to box-shadow only for the badge.

Actually, let me reconsider — maybe I should add a subtle hover state? No, the selectors are fixed, and I can't add new selectors. So transitions would only matter if there's already a hover. Adding transition to the base rule is harmless.

Let me refine the design:

For the badge (warning):
- Background: `linear-gradient(135deg, #ffd66b, #f5a623)` — warm amber
- Box-shadow: glow `0 0 0 0.25rem rgba(245, 166, 35, 0.15), 0 0.5rem 1rem rgba(245, 166, 35, 0.2)`
- Border-radius: `50rem` (pill badge)
- Border: `1px solid rgba(255, 214, 107, 0.35)`

For the cards:
- Background: `linear-gradient(145deg, #2d3748, #252e3a)` — matches target sidebar color #252e3a
- Border-radius: `0.75rem` (12px)
- Box-shadow: layered `0 0.5rem 1.5rem rgba(17, 20, 26, 0.35), 0 0.125rem 0.375rem rgba(17, 20, 26, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06)`
- Border: `1px solid rgba(255, 255, 255, 0.06)`
- Transition: `box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)`

Actually, the target says "Multiple stops for richness" — so I should use 3-4 stop gradients. Let me add more stops.

Badge gradient: `linear-gradient(120deg, #ffe29a 0%, #ffd66b 30%, #f5a623 70%, #e8891a 100%)`

Card gradient: `linear-gradient(145deg, #2e3848 0%, #283241 45%, #222b39 100%)`

Now, the contact cards might be on a light background or dark. Since the target palette has dark sidebar and lighter main, but the cards inside contact section — I don't know the surrounding context. Using dark cards on a light background would create a high contrast look. But the target says "Sidebar darker, main lighter" — the main content area is lighter. So making the cards dark might be a strong accent. That's fine.

Alternatively, I could make the cards light with dark text. But I don't know the text color. The original CSS has no color, so text color comes from Bootstrap defaults. If I set a dark background, the text might become unreadable (dark text on dark background). That's a risk!

Hmm, this is a real concern. If the cards contain dark text (Bootstrap default body color), setting a dark gradient background would kill readability.

What if I make the cards have a lighter gradient? Like a subtle light gradient with a fresh accent? Since I don't know the surrounding background, maybe I should use a translucent light gradient with a border and shadow. But if the background is already dark, a light gradient...

Wait. The target says "sidebar-classic" with "Sidebar darker (#252e3a), main lighter". This suggests the overall page might be dark-themed with the contact section on a lighter background. Or the contact section is the "sidebar" area. Hard to say.

To be safe, I could use a gradient that works on both: a semi-transparent gradient over the existing background. For example:

`background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));`

This would add a subtle gradient sheen on dark backgrounds but be nearly invisible on light. That's not very "gradient-rich" though.

Alternatively, I can use CSS variables? No, the instruction says I can change CSS custom properties' values, but I don't have them here.

Let me reconsider the context. This is a mobile media query for `.contact-channels-section article` and `.contact-quick-section .contact-card`. These are likely card components. Given the target palette:
- Sidebar dark #252e3a
- Main lighter
- Functional accent

I think the intent is to refresh to a dark, rich aesthetic. Since the instructions focus on visual identity and say "Only change colors, shadows, radius, transitions, gradients" — adding a dark gradient to cards is a bold visual change but matches the target. The original CSS doesn't define text color, so I must assume the default text color works with the new background. If I make it dark, I should perhaps also set a color? But color is a color value I can change — the instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must change. There's no color in the original, so I can add one.

Actually, setting `color` on the cards could ensure readability. But if the card contains headings, links, etc., they might inherit their own colors. Setting a light color on the card would help. But wait — the instruction says "background, color" are among things I must/should change. Adding `color: #e8edf2` would be a visual change that's safe if the background is dark. But if the page is actually light-themed (Bootstrap default), this would break... though the target palette is dark.

Hmm. Since `bg-warning` is a Bootstrap class, the page might be using Bootstrap. The hero section with badge suggests a marketing page. The contact section likely has cards.

Given the "gradient-rich" variant and "sidebar-classic" palette, I'll commit to the dark gradient aesthetic. I'll add a light text color to the cards to ensure readability.

Let me also think: Should I add `border-image` for gradient borders? The variant says "Gradient borders via border-image". But border-image doesn't work with border-radius (border-radius doesn't apply to border-image). The instructions allow border-radius changes. I could use a border-image on a pseudo-element, but I can't add selectors. Using border-image on the cards directly would create gradient borders but square corners. I could skip border-radius then and use border-image. But the cards already have no border-radius in the original, so adding border-radius is a visual change I'm allowed to make.

Trade-off: 
- Option A: border-radius + box-shadow with a regular border color → rounded corners, gradient background, nice shadows.
- Option B: border-image gradient border + no border-radius → gradient border, square corners.

The variant mentions both "gradient borders via border-image" and "multiple stops". I could do:
- `border: