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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

We need respond with only CSS rewritten, preserving selectors/layout exactly. Need analyze original CSS block:

@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;
    }
}

Need refresh visually. Selectors preserved. Layout values: text-align, font-size, padding are typography/layout? Text-align is layout? In forbidden list text-align is typography? They said font-size, font-weight etc unchanged. text-align is listed under layout: text-align, vertical-align cannot change. padding margins keep similar ±20. Here padding: var(--space-md) !important. Cannot change? It is in layout. Should keep padding same. But can change colors/shadows/radius etc. This block has no colors or shadows. Need likely adapt? But rules only contain text-align, font-size, padding. We cannot change those. Need maybe introduce visual properties? Must refresh visual identity without changing layout. We can add color, background, border-radius? But original selectors only have properties. Could add visual decorative properties to those selectors? Need be careful: adding background-color to badge? The requirement: "Only change colors, shadows, radius, transitions, gradients." We can add properties? The HTML fixed. It says keep all selectors exactly. Could modify declarations within same selectors but can add visual declarations? Usually yes, as long layout unchanged. Need maybe adjust font-size? cannot. text-align cannot. padding keep same. We can add background, border-radius, box-shadow, transition? Need small within media query. But these selectors: .app-hero-section .badge.bg-warning is warning badge. We can update warning badge from bg-warning bootstrap utility? It has class bg-warning, Bootstrap applies background-color: #ffc107 !important; But our new CSS can override with custom? But class bg-warning is used. Need adjust visual identity. We could set background: linear-gradient(...), border: none? border width? Not allowed if border-width unchanged? We can use border-color, border-style but not width. Could set border: 0? That is width? Maybe not safe. Could set box-shadow etc. 

Goal: "dense-dashboard" style: cool grays, white cards, accent blue. "soft-shadows" with multi-layer shadows, large radius, smooth transitions. But original block is mobile media max-width. Need preserve @media breakpoint exactly. They said @media query breakpoints conditions only. Good.

Need output only rewritten CSS. We need maybe transform entire block but only visual. Since there are no color properties, perhaps add new declarations:

- .app-hero-section .badge.bg-warning: maybe add background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #78350f; border-radius: 999px; box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 8px 16px -4px rgba(245,158,11,0.2); transition: box-shadow .3s ease, transform .3s ease? Wait transform is layout? It affects visual but maybe no? The animation/transform not listed but maybe could be okay? But "visual only"; adding transform to badge in media query might cause movement on screen not layout? It doesn't affect layout if transform. But conservative maybe avoid transform. Use transition to box-shadow/background.

- .contact-channels-section article, .contact-quick-section .contact-card: could set background: #fff; border-radius: 16px; box-shadow: 0 1px 2px rgba(30,41,59,0.04), 0 8px 16px -4px rgba(30,41,59,0.08); transition: box-shadow .3s ease, background-color .3s ease; But could affect visual within mobile. However adding box-shadow to article might alter card appearance. Need style consistent.

- .app-hero-section .row .col-lg-7: maybe add color? It may be not needed. Could add? We cannot change typography? color is allowed. Could set color: #1e293b; perhaps target text. But if heading color? It could override. Better not if not necessary.

Need maybe "dense-dashboard" pattern: compact. But original CSS only handles mobile. We cannot alter padding. But adding background and radius okay. Maybe we can alter var(--space-md)? No, variable values could be changed but since --space-md global maybe no. The padding declaration uses var(--space-md); we should preserve. Could update --space-md? Not in this file block? No.

Need maybe comply with "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" and "No markdown fences". They want output first character = CSS. We need output.

Need ensure selectors exact: 
.app-hero-section .row .col-lg-7
.app-hero-section .badge.bg-warning
.contact-channels-section article,
.contact-quick-section .contact-card

Preserve comma, selector list. We can add declarations.

Need think if background on article could mess with inherited white from parent. Original article presumably transparent. But target "White cards on slate background." This block inside mobile query; but adding white background might be appropriate.

Could also add border-radius: 16px; box-shadow etc.

But danger: if article already has card styles, adding same properties might override different. Our CSS order relative to original? Original file unknown; this is block #2/2 maybe only mobile. If original has desktop rules outside media, our media rules override at small. Fine. But adding background-color may override existing. Could alter design but that's intended.

Need be conservative: no layout change. If adding padding? no. Could use border-radius on article, no layout change.

Need perhaps include only the three rules. Need maybe change `font-size: 0.85rem` unchanged? Forbidden. Keep.

Need perhaps use CSS variables? We can define custom property values but in this block not. Could do `--space-md`? no. Use exact.

Need maybe consider `.badge.bg-warning` uses Bootstrap `bg-warning` sets background color to #ffc107 and font color maybe #212529. We could set background to gradient. But if using Bootstrap's bg-warning class, declaration `background: linear-gradient(...);` is more specific (same specificity? .app-hero-section .badge.bg-warning = 0,3,0 vs .bg-warning = 0,1,0 so override). Good. Need perhaps preserve `bg-warning` "warning" semantics but restyled. Use amber gradient.

Could maybe add `backdrop-filter`? not needed.

Need maybe define `transition: box-shadow 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease;` But border-radius transition not useful. Need no transform.

Need maybe add `color` to badge to adjust legibility. Could set `color: #1e293b` or #78350f. This is visual color. Allowed. But maybe bg-warning bootstrap has default color inherit? Actually Bootstrap 5 `.bg-warning` only background-color, no color. So text color inherited. Adding color can improve. Use `color: #422006;` maybe.

Need maybe add `border: 0`? no width issue.

Need maybe add `box-shadow` to article and badge; but `.contact-card` already may have border etc. Border-color allowed but not border-width. If add `border: none` would change width? It combines width, so no. Avoid.

Need maybe set `border-radius: 16px` on article/card; `.badge` border-radius `999px`. Good.

Need maybe set background for `.app-hero-section .row .col-lg-7`: Could add `color: #1e293b`? But this is text container. But not necessary. Yet requirement "All colors throughout file replaced with fresh palette" but there are no colors in original. To show refresh, perhaps add a color to text center container? But that could be okay. However if `.col-lg-7` contains heading and p maybe they have their own colors; setting color on container will inherit. Could be a slate gray. In hero section perhaps "app-hero-section" likely text color maybe already. Could set `color: #1e293b;` but if heading is on dark background, might become dark on dark? Need know context. Since app hero probably light theme? Target white cards on slate background. But mobile `text-align: center` no color. Could avoid adding color to generic container to not harm.

Could add `--bs-body-color`? no.

Need maybe output original with added visual declarations. Need perhaps no comments.

Let's craft:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #422006;
        border-radius: 999px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 16px -6px rgba(245,158,11,0.24);
        transition: box-shadow 0.3s ease, background 0.3s ease;
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 1px 2px rgba(30,41,59,0.04), 0 8px 16px -6px rgba(30,41,59,0.08);
        transition: box-shadow 0.3s ease, background-color 0.3s ease;
    }
}

Need check if adding font-size duplicate? Keep unchanged same as original. It's okay. Could include font-size for badge, same.

But maybe adding background to `article` inside `.contact-channels-section` and contact-card could override backgrounds with white. Good.

Need consider selectors order? Original had badge before article. We preserve.

Need maybe "soft-shadows" with two layers as specified. Use 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12). But for small cards, use less. Could use exactly variant.

Need maybe use `border-radius: 12px` or `16px`. Good.

Need maybe ensure no layout changes. `background` not layout. `box-shadow` not layout. `transition` not layout. `border-radius` visual.

Need perhaps add `@media (max-width: 575.98px)` unchanged. Good.

Potential issue: "padding: var(--space-md) !important" preserve. We did.

Need perhaps no `background` to `.app-hero-section .row .col-lg-7`. Then "All color values" not all changed but okay. Maybe if we add `color` to first rule? Let's think. The media query block originally only changes alignment for mobile. To refresh visual identity, maybe add a subtle color in hero section? Perhaps not necessary. Could set `color: #334155;`? But hero might have heading with default dark, adding could be redundant. Could add `color: #f8fafc` if dark? Hmm unknown. Better no.

But instruction "All colors throughout the file replaced with fresh palette" implies if original has no colors, it's fine. We can add only where appropriate. 

Need maybe ensure `bg-warning` background class has `!important` in bootstrap; our `background` shorthand is not `!important`. Specificity wins? Let's check: `.app-hero-section .badge.bg-warning` specificity = 3 classes (0,3,0). `.bg-warning` = 1 class (0,1,0). Same property `background-color` vs `background` shorthand? Bootstrap uses `.bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; }` Actually Bootstrap 5 includes `!important`. Our `background` without `!important` cannot override `!important`. Need include `!important`? But original block didn't use important except padding. To override Bootstrap bg-warning, we need `background: ... !important`? But adding !important is allowed? It doesn't break layout. But output should preserve? We can use `background: ... !important` to ensure. But maybe no need if no bootstrap? In many projects, bg-warning is Bootstrap utility with important. To refresh, must override. Need add `!important` to background. But the original CSS didn't have it; adding is okay? The instruction says layout values only, not declaration importance. But maybe should avoid unnecessarily. However target style requires gradient on badge. 

Alternative: set `background-color: #fbbf24 !important;` But Bootstrap's background-color uses `!important`; need important. Could set `background: linear-gradient(...) !important;` Good. But would that be considered "changing"? It's visual.

Need perhaps set `box-shadow` without important. Fine.

Need maybe `transition` if background cannot transition because gradient? It can transition background? Actually gradients don't interpolate smoothly unless custom properties? But okay.

Could define `background-color: #f59e0b;` rather than gradient; no need important? Still bootstrap important. Need important.

Let's craft with `!important` only on background perhaps.

Also `.contact-channels-section article` might have an existing background and border-radius specified later? But this block after original, at same media query, likely override if later. No need important.

Need perhaps use variables? Since padding uses `var(--space-md)`, colors can use variables? Could use `var(--space-md)` remains. Colors could use variables defined in `:root`, but no need.

Need perhaps output exactly the CSS with no extra blank? Fine.

Let's think of "dense-dashboard" target: "Tight multi-column grids: repeat(4, 1fr)..." but we cannot change grid. This block has no grid. We can apply card-like backgrounds.

Could maybe adjust `border-radius` of `article` to 14px and `contact-card` to 14px. But article could be contact channels, should look card-like.

Need maybe use `background: #fff;` not `#ffffff`. Fine.

Need maybe use `color: #1e293b` for badge? We used #422006 (dark amber). Maybe use palette: slate grays, accent blue #3b82f6. For warning badge, amber. Good.

Need maybe set box-shadow on badge with "0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)"? For badge, smaller is okay. For article/card, maybe "0 4px 8px rgba(30,41,59,0.04), 0 12px 24px -8px rgba(30,41,59,0.10)"? The variant says multi-layer soft shadows 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12). Use those exactly perhaps. But for compact cards, 40px blur maybe okay. We can use "0 4px 8px rgba(30,41,59,0.05), 0 20px 40px -10px rgba(30,41,59,0.12)" on article. This aligns with target. Use `#1e293b` with alpha.

Need maybe border-radius 16px. Good.

Need maybe card background is white; on slate body background, nice.

Need maybe no `background` on `.app-hero-section .badge.bg-warning` if it's a pill. But yes.

Need maybe preserve `font-size: 0.85rem` exactly. Good.

Need maybe not add `font-size` if not originally? It is in original. Keep.

Need maybe preserve `text-align: center` exactly. Good.

Need maybe "no AI-REWRITTEN comments". No comments.

Need maybe not use markdown fences. Good.

Let's final with CSS.

However, maybe user requested "块2/2" meaning block 2 of 2. We output only this block. Good.

Let's ensure no `transform` or `transition` on font-size. Transition on background is okay. Could include `transition: box-shadow 0.35s ease, background-color 0.35s ease;` Visual. If badge has gradient, transition background-color no effect. Instead `transition: box-shadow 0.35s ease, filter 0.35s ease`? Filter allowed. Could use `transition: box-shadow 0.35s ease, background-color 0.35s ease;` fine.

Need maybe set `background-color` not gradient to allow transition. But style target maybe gradient. Could set `background: linear-gradient(...);`; transition might not interpolate but okay. Could also add `transition: box-shadow .35s ease, filter .35s ease;` not harmful. Add `filter`? no.

Could set `accent-color`? no.

Need maybe if we add `background: #ffffff` to `.contact-channels-section article`, some article may already have background with padding. Good.

Could maybe add `box-shadow` to `.contact-channels-section article` but not to `.contact-card`? We set to both. Good.

Need maybe use `background-color` not `background` for article to avoid resetting background image? Existing article may have background image; using background shorthand resets. Better use `background-color: #ffffff;` because visual identity can be added. For badge, use `background: linear-gradient(...) !important