/* ============================================================
   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 process the user request. The file content is a small CSS snippet with a media query for max-width 575.98px. The user wants to refresh visual identity without changing layout/selectors. The mode is conservative, HTML fixed, visual changes only. But the CSS provided has only layout-ish things: text-align, font-size, padding. There's also .app-hero-section .badge.bg-warning font-size, but font-size is typography, not allowed? Actually font-size is in the "never change" list: font-size, font-weight, etc. So we can't change font-size. padding is also layout, but allowed ±20% maximum. However, the user says "Only change colors, shadows, radius, transitions, gradients." In this CSS, there are no colors, shadows, radius, transitions, gradients. The selectors contain .badge.bg-warning — that's likely a Bootstrap badge with warning color. But we are not allowed to change class names, but we can change color values. However the rule doesn't set color. Could we add new declarations? The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." The original CSS has no color properties. So to satisfy, we might need to add visual properties to the existing selectors, but not change the existing declarations? The instructions from the system prompt say "Rewrite the CSS preserving all selectors and layout exactly" and "you MUST change all color values... box-shadow... text-shadow... border-radius..." If they exist. But they don't exist. We need to output the rewritten CSS. Since there are no visual properties, perhaps we should add some color/shadow/radius to the selectors? But we must not change layout. Adding color, background, border-radius is okay. But we must preserve the selectors and the existing declarations. We can add new declarations to those selectors? The instruction says "Keep ALL selectors and layout exactly as-is." Adding declarations doesn't change selectors. However the original has `padding: var(--space-md) !important;` which is layout. We must keep that as is or within ±20%. The original padding is var(--space-md) — we don't know value, but we shouldn't change it? It's a custom property, but layout property. We can leave it. We cannot change text-align, font-size. So the safest is to keep those existing declarations unchanged and add a couple of visual properties (e.g., border-radius, transition) to the selectors. But is that allowed? The user says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It implies we can edit existing visual properties or add new ones. But the original has no visual properties. Hmm.

Maybe we need to be more creative. The target style is dense-dashboard with cool grays, slate background, white cards, accent blue. The CSS snippet is for a mobile responsive hero section, badge, contact cards. We could add a background color to the hero section? But the selector is `.app-hero-section .row .col-lg-7`, which is a column. Adding a background would be visual. But if the original had none, adding may alter appearance but not layout. Yet we need to "change all color values" — there are none. So perhaps the file is a fragment, and we should output the same CSS but with color modifications? That would be a no-op. But the request expects a refresh. Let's read the original CSS carefully:

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

Only three rules. We need to rewrite. Since no colors/shadows/radius/transitions/gradients exist, perhaps we can add them? But then the "refresh" is not a rewrite, it's an enhancement. The user likely expects us to produce a visually refreshed CSS. Maybe the original file has more, but the user gave a snippet? The file name is saishi.css#块2/2, meaning block 2/2. The prompt says "File: assets/css/saishi.css#块2/2" and "Original CSS:" lists this snippet. So yes, this is the entire block. We need to output a rewritten version with same selectors and same structural declarations, but add visual styling.

However the instruction says "You MUST change: All color values ... box-shadow ... border-radius" — if there are none, we need to change what exists, but we can add new values. But the output must be solely the rewritten CSS. We need to not use markdown.

We need to follow the "conservative mode" — HTML fixed, visual changes only. The "target style: dense-dashboard" suggests using cool grays #1e293b, #334155, accent blue #3b82f6, white cards on slate background. Effect variant: tight-rhythm — compact spacing, small border-radius 2-6px, subtle shadows or none, information-dense.

Since the selectors are for mobile, we can add a subtle background or border-radius? But we must be careful: `.app-hero-section .row .col-lg-7` is a column inside a row. If we add background, it may create a card look. But target style says white cards on slate background. Could add a white background, border-radius 4px, box-shadow subtle, maybe padding? But padding is layout, we can change within ±20%? The original padding is on the third rule only. We shouldn't add padding to the col because that changes layout. Better not add padding.

The badge rule: `.app-hero-section .badge.bg-warning` with font-size. We could add background-color: #f59e0b? But bg-warning is a Bootstrap class that sets background-color. Changing it would override Bootstrap? In CSS, a rule with class specificity would override Bootstrap's .bg-warning because it's later? But we don't know. Adding `background-color: #f59e0b` would just reinforce. Better to add `box-shadow`, `border-radius` maybe. But badge is a pill? Bootstrap badges have border-radius. We could change to small radius? But maybe not.

The third rule: `.contact-channels-section article, .contact-quick-section .contact-card` with padding. We can add background-color, border, border-radius, box-shadow, transition. That would make contact cards visually distinct, matching white cards on slate. That is a strong visual refresh.

But we must ensure we don't change layout. Adding background, border-radius, box-shadow, transition are visual. But adding border will affect box-sizing? If box-sizing is border-box globally, width won't change; if not, it could affect layout. Since we can't change box-sizing but it's likely set globally. We can use `box-shadow` inset or outline to avoid layout. Or use `border` with `box-sizing: border-box` — but we can't add box-sizing? Actually box-sizing is layout but adding it to the rule would not break if it's already global, but it might be safe. But better to use `box-shadow` for a border-like effect? Or use `outline`. But outline doesn't affect layout. We can add `outline: 1px solid #e2e8f0;` but outline is allowed? Outline style/color can change, but adding outline is visual. It might look like border.

Let's think from a conservative CSS refresh perspective: The original CSS likely is a small part of the whole site. We are to rewrite this block. We can add color variables, etc. But we need to output only this block.

The requirement "You MUST change all color values: background, color, border-color, fill, stroke, outline-color" — there are no color values. We can add new color declarations to these selectors.

The requirement "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)" — we can add box-shadow to relevant selectors.

The requirement "border-radius (visual rounding only)" — we can add border-radius.

The requirement "transition timing, easing, duration" — we can add transition to the interactive elements (contact-card maybe).

The requirement "filter, backdrop-filter" — can add if needed.

Let's design a cohesive refresh:

- `.app-hero-section .row .col-lg-7`: On mobile, center text. We could add a subtle background to the hero column? Maybe not. Perhaps add color to text? But text-align is already center. We can add `color: #1e293b` (slate 800) for consistency. But changing text color might be okay. However the original didn't set color; but the inherited color might be from body. We can set it. But "Only change colors" — yes, setting color is allowed.

- `.app-hero-section .badge.bg-warning`: Add `background-color: #f59e0b;` (amber), `color: #1e293b;` (dark slate for contrast), `border-radius: 4px;`, `box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);` But font-size remains unchanged. However the class `bg-warning` already has background; adding a background-color override would ensure the tone is right. But perhaps the target palette doesn't include amber; but warning is a semantic color that should stay warning-ish. We can keep amber but tweak to #f59e0b (Tailwind amber-500). Cool grays and accent blue palette includes amber as warning.

- `.contact-channels-section article, .contact-quick-section .contact-card`: Add background-color: #ffffff; border-radius: 4px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.1); maybe `transition: box-shadow 0.2s ease, transform 0.2s ease;` But transform is not a visual property? It's a layout/animation; but adding transform on hover would be extra. We're not adding hover rules. We can add transition for background-color and box-shadow.

But the instruction says "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It means we can add declarations. But is adding declarations to existing rules allowed? It says "rewrite the CSS preserving all selectors and layout exactly" — you can rewrite the declarations, as long as layout declarations (padding, text-align, font-size) remain. So adding visual declarations is fine.

We need to be careful about the third rule: It has multi-selector list. Preserve exactly. We can add a visual `background-color`, `border-radius`, `box-shadow`, `transition`. Also maybe `background` with gradient? The target "dense-dashboard" is white cards on slate background. The original snippet doesn't set a body background. We might want to set something on the contact cards.

Let's also consider the media query breakpoint is max-width 575.98px. The visual refresh should target mobile. In mobile, the contact cards become stacked. A white card with subtle shadow and small radius works.

We should not change `padding: var(--space-md) !important;` because that's layout. But maybe the target "tight-rhythm" wants compact padding 8-16px. `--space-md` might be 16px or 24px. We can't know. But we can leave it. We could change it to `padding: 16px !important` if we know that --space-md might be larger? But the rule says keep padding/margin similar, ±20% maximum. If we don't know the value, we can't change. So keep as is.

Now, we need to ensure our output is valid and the first character is the first CSS character. No markdown fences.

Let's produce:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #f59e0b;
        color: #1e293b;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.1);
        transition: box-shadow 0.2s ease, background-color 0.2s ease;
    }
}
```

But is "color" added okay? Yes. But perhaps we should avoid changing `.app-hero-section .row .col-lg-7` too much because it's a hero text. Setting color to #1e293b is consistent. However the hero might already have its own color from bigger screens. But the media query overrides only text-align, so adding color would override inherited color on mobile only. That's okay.

Should we add `background-color` to the hero column? Maybe not.

Let's check if the target says "Cool grays #1e293b, #334155, accent blue #3b82f6, White cards on slate background." The contact cards are white, background slate. We didn't set a slate background for the page, but the page probably already has one. Maybe we can add `background-color: #f1f5f9` to the contact sections? But the selectors are article and contact-card; setting background to white creates the card. But if the page background is white, the card won't stand out. We could add a background-color to the parent sections, but we don't have selectors for them. We could use the article/contact-card rule to also set `background-color: #ffffff` and `border: 1px solid #e2e8f0` (or box-shadow). The slate background is likely body. So fine.

The effect variant says "Subtle shadows or none." We have subtle shadows.

We need to ensure our box-shadow is "multi-layer" as per the system prompt. We have two-layer shadow. Good.

Now, is `border-radius: 4px` allowed? Yes. The original had no border-radius. But "small border-radius (2-6px)" — 4px fits.

What about `transition`? We added. The original had no transition. Good.

We should also consider adding `outline` or `border-color`? The original doesn't have border. Adding `border` could affect layout, so avoid. We could use `box-shadow: 0 0 0 1px #e2e8f0` to simulate border. That would be a shadow, not border. But our box-shadow already uses #e2e8f0? We could add an inner ring: `0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.8)`? Hmm.

Let's make shadows more "dense-dashboard" tight: maybe `box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.08)` — subtle.

Maybe use accent blue for focus? No hover/focus selectors.

We need to check if we can change `font-size`? No, keep unchanged.

Let's think if adding `color` to the hero column might conflict with the `.app-hero-section` existing color? Not an issue.

We should output only CSS. Let's prepare final answer.

Wait, the instruction says "You MUST change ... transition timing, easing, duration" — if there are none, adding is fine.

One potential issue: The original CSS rule `.app-hero-section .badge.bg-warning` includes `.bg-warning` class from Bootstrap. Adding a background-color to this rule may or may not override Bootstrap depending on order. But we can use `background-color: #f59e0b !important;`? But the rule already has font-size; no need. However the original class `bg-warning` might set `--bs-bg-opacity: 1` and use `background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity))`. Our rule later in the stylesheet would override background-color because same specificity? Actually `.app-hero-section .badge.bg-warning` has specificity 0,3,0? Bootstrap's `.bg-warning` is 0,1,0. So our rule has higher specificity, so it overrides. Fine.

Should we add `border-radius` to badge? Bootstrap badges already have border-radius: 0.375rem. Overriding to 4px (0.25rem) makes it less round, consistent with tight-rhythm. Good.

Now, maybe we should also change `padding` in the contact card to be more compact. But the original uses `var(--space-md)`. The target says compact padding 8-16px. If `--space-md` is maybe 24px, we could change to `1rem !important` (16px) to align. But we don't know the value. The instruction says "keep similar values, ±20% maximum." If `--space-md` is a custom property, we can't compare. Better to leave it. But we can add a CSS variable override? No.

We can add `--space-md`? Not relevant.

Let's consider if adding `background-color` to the contact cards might be a "visual identity"