/* ============================================================
   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 with visual changes only, preserving selectors, layout, typography. The provided original CSS is a small media query block. It includes selectors like `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article`, `.contact-quick-section .contact-card`. It sets text-align, font-size, padding. These are typography and layout, which are not supposed to change. But the task says we can change visual properties only. However the original CSS has only layout/typography properties, no colors, shadows, etc. So we need to preserve those properties. But we can add visual properties? The instruction says "Only change colors, shadows, radius, transitions, gradients." But we must keep layout properties exactly. Actually the original CSS sets text-align, font-size, padding. Those are in protected categories. So we must keep them unchanged. Since there are no colors or shadows to change, but we need to refresh visually. We can add new visual properties? The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." We can add new declarations for colors, shadows, etc. But the output must preserve original declarations. Since the original declarations are all protected, we keep them. Then we can add additional visual declarations to the same selectors? But that might alter appearance in a way that doesn't break layout. Let's think.

The target style is "dense-dashboard" and "gradient-rich". So we need to apply gradient backgrounds, new colors, etc. But the selectors are in a media query for small screens. We can add background gradients, color, border-radius, box-shadow, transitions to these elements. However adding background to `.app-hero-section .badge.bg-warning` might change its look. We can use `background-image: linear-gradient(...)` but the existing class `.bg-warning` likely sets background-color. We can override it. But since we can only change visual properties, we can add them.

But wait: The original CSS is only a media query snippet. There might be other CSS but we only output the rewritten version of this snippet. We must preserve all original declarations exactly as-is? The instruction says "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." That implies we can change the values of allowed properties, and we can add new allowed properties, but we cannot remove or change protected properties. So we'll keep the existing declarations and add new ones. But we might also adjust existing values if they are in allowed categories. In the original, `.app-hero-section .badge.bg-warning` has font-size (protected) and perhaps color? The snippet shows only font-size? Actually in the snippet, `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — no color. So we can add color, background, etc.

Similarly `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — padding is protected, but we can add background, border-radius, box-shadow.

But then we need to ensure the visual changes align with "dense-dashboard" and "gradient-rich". Let's craft.

Let's parse each selector:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — This is a column in hero section. We can add maybe `color`, `background`? But that might affect layout unexpectedly. Better to add a subtle background gradient to the hero section's text container? But it's a column, maybe not ideal. However target style says white cards on slate background. We could set the text color to a light slate? But that might make text unreadable if the actual background is light. We need to be careful. We don't know the original background. But we can apply a color to the text? The original didn't set color, so we can add `color: #e2e8f0`? But that might be too risky. Maybe we should not add random text color. Instead, we can add a gradient background to the column, but that might conflict with the hero section's design. The instruction is to refresh visual identity; we are allowed to change colors. So we can add `color: #f8fafc;` or `background: linear-gradient(...)`. But this is a media query for small screens only. We might want to maintain readability.

2. `.app-hero-section .badge.bg-warning` — The badge with warning background. We can override background to a gradient (blue accent?) But the class is bg-warning (Bootstrap warning). If we change it to blue gradient, it's a visual refresh. Add `background-image: linear-gradient(135deg, #3b82f6, #1d4ed8);` and `color: white;` and `border-radius: 999px;` and `box-shadow: ...`. But the selector includes `.bg-warning`, so overriding background is fine.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — These are cards. We can add background: white, border-radius, box-shadow, border, transition, gradient border? We can use `background: linear-gradient(white, white) padding-box, linear-gradient(...) border-box;` for gradient borders. But that's a visual property. Also set border: 1px solid transparent? But border-width is protected? Actually border-width is protected? It says "border-color and border-style (NOT border-width)" are allowed to change. But adding border-width might change layout. We can use `border: 1px solid` if original didn't have border? That would add 1px, affecting layout. That's prohibited because border-width affects layout. So better not to add border. We can use `box-shadow` to simulate border. Or use `border-color` if no border exists? Adding border-width changes layout, so not allowed. So avoid adding new border-width.

We can add `border-radius`, `box-shadow`, `background`, `transition`, `opacity`, `filter`. All allowed.

Need to preserve padding. It's set with `var(--space-md) !important`. Keep exactly.

Also preserve `text-align: center` and `font-size: 0.85rem`.

Now we need to produce output. Since the original file snippet is only this media query, we output the same media query with added visual declarations. Ensure all original selectors and protected properties are unchanged.

But we need to be careful with selector lists: `.contact-channels-section article, .contact-quick-section .contact-card` is a selector list. We must preserve exactly.

Let's craft the rewritten CSS.

We'll keep the media query. Add visual properties to each rule.

For `.app-hero-section .row .col-lg-7`:
- Add `color: #f1f5f9;`? Maybe if hero background is slate, text color should be light. But we don't know. The target palette uses cool grays and white cards on slate background. Hero section probably has a dark/slate background? We can assume we are refreshing to slate background. So set `color: #f8fafc;` maybe. But the original didn't set color; adding it is a visual change. That's allowed. Also add a subtle background gradient? On the column itself, perhaps `background: radial-gradient(circle at top, rgba(59,130,246,0.15), transparent 70%);`? That might be too flashy. Alternatively, add `text-shadow: 0 2px 10px rgba(30,41,59,0.4);` to enhance hero text. Text-shadow is allowed. Let's do that.

For `.app-hero-section .badge.bg-warning`:
- Add `background-image: linear-gradient(135deg, #3b82f6, #2563eb);` This overrides Bootstrap's warning background-color if background-color is still set? Since `background-image` overlays on background-color. Better use `background: linear-gradient(135deg, #3b82f6, #2563eb);` (shorthand) to override both. But `background` resets the background-color to transparent, which is good.
- Add `color: #ffffff;`
- Add `border-radius: 999px;`
- Add `box-shadow: 0 4px 12px rgba(59,130,246,0.4);`
- Add `transition: background 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s cubic-bezier(0.22,1,0.36,1);`
- Maybe add `background-size: 200% 200%;` for gradient animation? But no animation.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- Add `background: linear-gradient(145deg, #ffffff, #f1f5f9);` (white cards with subtle gradient).
- Add `border-radius: 16px;`
- Add `box-shadow: 0 8px 24px -6px rgba(30,41,59,0.15), 0 4px 8px -4px rgba(30,41,59,0.08);`
- Add `transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), box-shadow 0.6s cubic-bezier(0.22,1,0.36,1);` Wait transform is an animation property but not listed? Actually "transition" is allowed. Changing transform is not allowed? The protected list doesn't include transform? It says "animation-name (values like duration/timing CAN change)" and layout properties include `float, clear, z-index, overflow...` but not transform. The list says "animation & media" specifically @keyframes names and @media breakpoints. It doesn't mention transform in protected list. But transform can affect layout? It doesn't change document flow. However to be safe, we can transition only box-shadow, background-color, border-radius, opacity. But we can include transform? The instruction says "visual identity without changing layout structure". Transform could be considered visual effect but might affect positioning. To avoid risk, don't include transform property in transition list. Instead transition `box-shadow 0.5s, border-radius 0.5s, background 0.5s`.

Maybe add `border-radius: 18px;` and a gradient border look using background-clip? That's complex. Simpler: use `box-shadow` to create a border-like ring.

We need "Gradient borders via border-image" from target effects. But border-image is a visual property that might not affect layout? It uses border but existing border might be none. Setting border-image likely requires a border width? Actually border-image applies to border area. If border-width is 0, border-image won't show. We could use outline? Outline is allowed? "outline styles (color, type)" allowed. But outline offset can be set? But we can't change outline-width? It says "outline styles (color, type)" but width maybe not. Better not.

We can use `background: linear-gradient(...) padding-box, linear-gradient(...) border-box;` with `border: 1px solid transparent;` but that would add border width. However if the original element already has a border of 0 or none, adding 1px changes layout. Could use `border-radius` and `box-shadow` for "gradient border" via `box-shadow: inset 0 0 0 1px ...`? That is an inset box-shadow, which doesn't affect layout. For gradient border, we can use `box-shadow: inset 0 0 0 1px transparent, 0 0 0 1px #3b82f6`? Not a gradient. Alternatively, use `overflow: hidden` and a pseudo-element, but that would require adding pseudo-elements and properties, and changing content structure? No.

Since the target includes gradient borders, we could apply a gradient background on the card itself and use `background-clip: padding-box, border-box;` with `border: 2px solid transparent;` but that increases size. Not allowed. So skip gradient border, just use gradient background.

Let's also consider the overall "dense-dashboard" target: small gaps, compact padding. We cannot change gaps or padding because those are protected. But if the original padding is var(--space-md), that is likely 12-16px. Acceptable.

We might also add `backdrop-filter: blur(4px);` but cards are not transparent. Skip.

Also add `filter: drop-shadow(...)`? That's a visual effect.

But we must be careful not to overdo. The output should be valid CSS.

Let's write:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f8fafc;
        text-shadow: 0 2px 12px rgba(30, 41, 59, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
        color: #ffffff;
        border-radius: 999px;
        box-shadow: 0 4px 16px -2px rgba(59, 130, 246, 0.6);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s 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(145deg, #ffffff 0%, #f1f5f9 100%);
        border-radius: 18px;
        box-shadow: 0 10px 30px -10px rgba(30, 41, 59, 0.15), 0 4px 10px -6px rgba(30, 41, 59, 0.08);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

But we need to ensure all original selectors preserved exactly. Yes.

However, adding `color` to `.col-lg-7` might not be desired if the hero already had color. But it's a visual refresh. We must use the target palette: cool grays #1e293b, #334155, accent blue #3b82f6. White cards on slate background. So text color could be #f8fafc (light). But the hero section's background might be dark slate. That is fine.

The badge `.bg-warning` originally is a warning (yellow). Changing to blue accent aligns with palette.

The cards are white with slate shadow.

Should we also add `background` to the article/card? Yes, but the original might have a background already. We can override with gradient. That's a visual change.

Now, we need to ensure font-size and padding are exactly the same. They are.

But we should also consider if there is a need to add a gradient to the `.contact-channels-section article` background with `background-image` and `background-color` fallback. We used `background` shorthand. That's fine.

Potential issue: `background` shorthand resets `background-repeat`, `background-size` etc. That's okay. But if original had `!important` on padding, we keep. We are not adding `!important` to our new properties. That's fine.

We need to output only CSS, no markdown. But the instruction says "OUTPUT: ONLY the rewritten CSS... No markdown fences, no explanations". So we output the CSS code block? They say first character = first CSS character. So no fences. We'll output the CSS exactly.

Let's double-check "conservative mode" instructions: "You are an expert CSS designer in 🛡️ CONSERVATIVE MODE." They emphasize "HTML fixed, visual changes only". So we must not alter layout. We didn't.

Now, is `transition` allowed? Yes, transition timing, easing, duration are allowed.

But we added `transition: background 0.5s ...` and `box-shadow`. That's fine.

Should we add `background-size`? Not necessary.

Could we add `border-image`? Maybe not needed.

Let's see if any existing selectors are missing. The original had three rules. We preserved all.

Now, perhaps the target "dense-dashboard" wants `repeat(4, 1fr)` etc. But no such selectors here. We cannot change layout. So we just apply visual style.

We might also change the `@media` condition? No, breakpoints cannot change.

Let's ensure the padding value is unchanged: `padding: var(--space-md) !important;` yes.

The font-size is unchanged: `0.85rem`.

Text-align is unchanged.

Now, could there be a conflict with `color` on `.col-lg-7` when the background is not dark? But we don't know. In a fresh palette, the hero section likely has a slate/dark background from the parent. We can assume.

Could we instead set `background: radial-gradient(...)` on the col? That might be more visual. But adding a background to a column could be okay. For example:

```
background: radial-gradient(circle at 50% 30%, rgba(59,130,246,0.25), transparent 70%);
```

But that might cover the entire column with a gradient overlay. If the column already has a background, it would be layered. Since we set only background, it would override the existing background. That could be a dramatic change. But "gradient-rich" says linear-gradient or radial-gradient on most backgrounds. We can apply that. Let's maybe add to `.col-lg-7` a subtle background gradient and border-radius? But adding border-radius to