/* ============================================================
   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 visually while preserving selectors and layout properties. The original CSS is a small media query block with three rules. We need to apply conservative mode: don't change layout, only colors, shadows, radius, transitions, gradients, etc. The target style is editorial-magazine with gradient-rich variant. However, the original CSS rules only contain layout-ish properties: text-align, font-size, padding. Wait, we are told not to change font-size, text-align, padding? Actually, let's check constraints.

The "NEVER CHANGE" list includes:
- font-size, font-weight, font-style, line-height, letter-spacing, word-spacing, text-transform, white-space, word-break.
So font-size is protected. But in the original, .app-hero-section .badge.bg-warning { font-size: 0.85rem; } We cannot change that.

Also, text-align is protected? The "NEVER CHANGE" list says text-align, vertical-align. Yes, text-align is protected.

Padding is allowed ±20% maximum. But we might not need to change padding.

So the only things we can change in these rules are essentially none? Wait, the rules only have properties that are heavily protected. We need to add decorative properties that don't change layout: color, background, border, box-shadow, etc. But the selectors are the same. So we can add new declarations to each rule (with new visual properties), while keeping the existing declarations unchanged. But the task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." That means we can add new properties that don't affect layout. If the original lacks color, we can add color to the existing selectors. Also, we can adjust existing allowed properties like color, background, border-radius, etc. But since there are none except font-size, padding, text-align, we need to enrich.

We must ensure we do not change the values of protected properties. So we keep font-size: 0.85rem, text-align: center, padding var(--space-md) !important. We can add new visual properties.

But note: The original CSS is a media query block. We must preserve the media query and selectors exactly. We can add new declarations inside each rule. Also we can add new rules? The task says keep ALL selectors exactly. It doesn't say we cannot add new selectors, but conservative mode probably means not to add selectors. Better to only modify existing selectors.

Also the target style: editorial-magazine: cream backgrounds, ink black text, deep red accent. Gradient-rich: linear/radial gradients on most backgrounds, gradient borders, multiple stops, smooth long transitions.

For mobile media query, we can add backgrounds, colors, shadows, border-radius, transitions to the hero section, badge, contact cards. But we must be careful not to change layout.

The first rule: .app-hero-section .row .col-lg-7 { text-align: center; } We can add color, background maybe? But a col is a layout container; adding a background might be okay, but could affect layout? Background doesn't affect layout. Add a subtle gradient? But this is inside a column. We can add a linear-gradient background, but might cover content? Better to add color and perhaps a gentle text-shadow? Actually text-align center, font-size protected. Add color and maybe a background gradient? But the hero section likely has a background already. We shouldn't introduce a background that might obscure. However, "gradient-rich" suggests most backgrounds. We can add a background image with gradient and maybe background-clip: text? That would require text color transparent, but might be too aggressive. Let's think.

The second rule: .app-hero-section .badge.bg-warning { font-size: 0.85rem; } We can add a background gradient to the badge, replace the bg-warning with a deep red accent gradient, add box-shadow, border-radius, color. But note: the element has class bg-warning, so it probably already has a Bootstrap warning background (yellow). We can override background with our own gradient using !important or not? Since the rule appears later? We can just set background: linear-gradient(...). Since we are writing the same specificity (same selector), and later in source? The original CSS will be replaced entirely, so our new CSS will be the only source. So the badge will now have a gradient. Good.

The third rule: .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; } We can add visual styling to these cards: background gradient, border-radius, box-shadow, border, transition. But note: the rule is a selector list. We must preserve exactly. We can add declarations.

We should also perhaps add a transition property to the badge and cards. But the target says smooth long transitions (0.4-0.6s cubic-bezier). We can add transition to hover states? But no hover rules here. We can add transition for background, box-shadow, etc. That's okay.

We also need to consider the media query breakpoint: max-width 575.98px. This is mobile. We can style accordingly.

The best approach: For each rule, keep existing properties exactly, add new visual properties. But the instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." So we are allowed to alter existing allowed properties. Since there are none allowed in these rules, we add.

But the output must be the entire CSS file. The original CSS file may be larger? The "File: assets/css/saishi.css#块2/2" and "File fingerprint" suggests this is the second block of the file. The user provided only these rules. We are to rewrite only the given CSS? The prompt says "📋 ORIGINAL CSS:" followed by the code block. So we rewrite exactly that code block, preserving media query and selectors.

We must be cautious: The first rule sets text-align: center. We cannot change that. The second rule sets font-size: 0.85rem. Cannot change. The third rule sets padding var(--space-md) !important. Cannot change (though padding is allowed ±20%, but we can keep exactly).

Now, "gradient-rich" calls for linear/radial gradients on most backgrounds. We can add background gradients to the first rule? For a column, adding a background gradient might alter the look, but okay. However, the col-lg-7 is inside a row. It's a flex container. A background gradient on the column could be fine. But maybe better to add a background-image and backdrop-filter? But backdrop-filter can be changed. However, we need to avoid layout impact. Background doesn't.

Let's design a coherent mobile editorial look:

- Background of the hero column: perhaps a subtle radial gradient in cream tones, or none? Since editorial-magazine, cream background. But the hero section likely already has a dark image? Actually, class "app-hero-section" maybe a mobile app hero. We can add a subtle text color and a highlight for the heading? But the selector only covers the col, not headings. We can add color to the column so text inside is ink black.

- Badge: Deep red gradient background (#c44536 to dark maroon), white text, rounded pill, box shadow. Use border-radius: 50rem. Add transition.

- Contact cards: Cream background with subtle gradient, ink black text, border with gradient? We can use border: 1px solid rgba(0,0,0,0.1), border-radius: 1rem, box-shadow: multi-layer. Add transition for hover.

We need to use CSS custom properties? The original uses var(--space-md). We can reference other CSS variables maybe? But the file might have custom properties defined elsewhere. We can add new declarations with existing variables? Since we don't know if they exist, better to use concrete values. But we can use var(--space-md) in padding, preserve it. For colors, we can use our own hex values.

Let's write the CSS with existing selectors and new declarations.

Important: We must not change any of the existing property values. We can reorder? The instruction says don't change selectors and layout. We can rewrite the CSS block in any order as long as selectors are preserved and existing declarations kept. But order of declarations within a rule doesn't matter. We'll keep the existing declarations at the top, then add new ones.

Let's also consider that the first rule only has text-align. We might add a gradient background with background-blend-mode? But that could affect if the column has a background image already. Hmm. Let's be subtle.

Maybe we can add `background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.6), transparent)`? That adds a soft glow. But might not align with editorial. Alternatively, add `color: #1a1a1a;` and `text-shadow: 0 1px 2px rgba(255,255,255,0.5);` to improve readability. But no heading selector, so it applies to all text in the column. That could be fine.

For the badge, we can also add `border: 1px solid rgba(0,0,0,0.1);` and `box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);` etc. But the badge has Bootstrap bg-warning; our background overrides. Need to ensure color contrast: white text.

For the contact cards, we can add `background: linear-gradient(145deg, #faf7f0, #e9e4d8);` or something. But the cards might have other backgrounds. To be safe, we can use `background: linear-gradient(145deg, rgba(255,255,255,0.8), rgba(245,241,232,0.9));` but might be transparent. Actually the target palette: cream/beige backgrounds #f5f1e8. So let's use #f5f1e8 and a lighter #faf7f0. Since gradient-rich, use a linear-gradient with multiple stops.

We also need to consider that the media query is for max-width 575.98px. The contact cards are likely stacked. We can add a box-shadow that's soft and editorial: `box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.05);` But the target says gradient-rich, so maybe use shadows with red tint? Or keep neutral.

Let's draft.

Potential issue: Adding `background` to a col could interfere with the background of the parent. But since we are outputting the entire CSS file, if there is no existing background for that col, it's okay. The original CSS didn't have background, so likely the col has no background. Adding one might be a visual change. The user wants visual changes. Good.

But we must ensure we don't add `display` or other layout properties. So no.

Let's create the rewritten CSS:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.8), transparent 70%);
        text-shadow: 0 1px 2px rgba(255,255,255,0.3);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #c44536, #a3362a, #c44536);
        color: #fff;
        border-radius: 50rem;
        box-shadow: 0 0.25rem 0.5rem rgba(196,69,54,0.25), 0 0 0 1px rgba(0,0,0,0.05);
        transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #faf7f0 0%, #f5f1e8 40%, #ece5d8 100%);
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 1rem;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 16px -8px rgba(0,0,0,0.12);
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
}
```

Wait, can we add transition without hover? It's okay, it would transition on changes. But if no hover, it might not animate. We can also add `:hover` rules? But the instruction says preserve pseudo-classes, not necessarily don't add. But we should not add new selectors? Actually it says "Selectors (CRITICAL - HTML is fixed): Class names: keep EXACTLY ... Pseudo-classes (:hover, :focus, ::before, ::after)" That implies we can use pseudo-classes if they were already used, but not necessarily add new ones. To be safe, don't add new :hover rules. But transition alone is fine.

We should ensure that the badge transition includes `background`? We changed background without transition. We can add `background` in transition list, but since we set a static gradient, transitioning background might not work smoothly unless we define multiple background positions. Actually gradient transitions require `background-position` or custom properties. Better not include `background`. Instead, transition `box-shadow` and `transform`. But we didn't add transform on the badge. The transition on transform won't do anything unless transform changes. We can add `transform` property to establish a base? That would change layout? Transform doesn't affect layout, allowed. We can set `transform: translateY(0);` to allow hover? But no hover. Hmm.

Maybe just add transition for box-shadow and background? Background transitions work in some browsers with gradients? Actually CSS gradients don't interpolate unless using `@property` custom properties. So transition on background may not work. We can use `background-position` transition if we use a larger gradient. Simpler: don't transition background. Just set transition for box-shadow and maybe border-radius? Not needed.

Maybe we can add a subtle `backdrop-filter: blur(...)`? For cards, if they are over an image, but might not.

Let's think about "gradient-rich": They may want gradient borders via border-image. We can use border-image on the contact cards. But border-image requires the border style to be solid and an image. We can set `border-image: linear-gradient(145deg, rgba(196,69,54,0.3), rgba(107,112,92,0.3)) 1;` but if we also have border-radius, border-image with radius isn't supported? Actually border-image and border-radius can coexist, but the image won't follow the radius. It's okay.

But the task says "Gradient borders via border-image". So let's add a gradient border to the contact cards. But the card already has a border. We can replace border with a gradient. However, if we set `border: 1px solid transparent;` and then `border-image: linear-gradient(...) 1;` That creates a gradient border. But border-image with border-radius not clip; it may look square? Actually border-image with border-radius is not supported for curved borders; the image is not rounded. But we can use `border: 1px solid rgba(...)` for a subtle actual border, then add `box-shadow` for a gradient effect. Hmm.

Alternatively, we can use `background-clip: padding-box` and a linear-gradient background, plus `border: 1px solid transparent` and `background-origin: border-box` for gradient border. But that is more complex. Let's keep it simple.

Given the constraints, we can add a `border-image` to the contact cards as a decorative element. But it won't work well with border-radius. Let's test conceptually: If we set border: 1px solid transparent; border-image: linear-gradient(...) 1; then the corners are not rounded because border-image is applied to the border box, and the radius is ignored? Actually border-radius is applied to the element, and border-image is placed behind the border box; I think border-radius clips the border image? Need to recall: Border-image is not affected by border-radius; the image is rectangular and not clipped by the radius. So a rounded card with gradient border will have square corners. That might be undesirable. Better to use a solid semi-transparent border as I wrote.

Another way to get gradient border with radius is to use `box-shadow: inset 0 0 0 1px ...`? Not gradient.

Maybe just use a soft solid border and a colored shadow.

Also, the transition with cubic-bezier: target says long transitions 0.4-0.6s cubic-bezier. We'll use 0.5s cubic-bezier(0.4, 0, 0.2, 1).

We need to ensure we don't add declarations that violate the constraints. Let's review our draft:

First rule:
- text-align: center - preserved.
- color: #1a1a1a - allowed.
- background: radial-gradient(...) - allowed.
- text-shadow: 0 1px 2px ... - allowed.

Second rule:
- font-size: 0.85rem - preserved.
- background: linear-gradient(135deg, #c44536, #a3362a, #c44536) - allowed.
- color: #fff - allowed.
-