/* ============================================================
   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, maintaining selectors and layout properties. However the original CSS provided is very small: a media query with a few rules. The instructions say "keep ALL selectors and layout exactly as-is". The original is:

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

We need to visually refresh, but we can only change colors, shadows, radius, transitions, gradients. The original has no colors, shadows, radius, transitions, gradients. It only has text-align, font-size, padding. Those are layout/typography and must remain. However we could add visual properties like background color, border-radius, etc. to those selectors? But we need to be careful: adding new declarations is allowed? The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." That likely means we can add visual properties to the existing rules or modify existing values of color etc. Since there are none, we could add some visual enhancements that don't alter layout. But layout properties like text-align, font-size, padding must remain unchanged exactly. We can add background, border-radius, maybe box-shadow to these elements if it doesn't affect layout. But note the padding is `var(--space-md) !important`; we must keep that exactly. We can add other declarations.

However, we should also consider the target style: editorial-magazine with gradient-rich effect. So we could add background gradients, borders, etc. But the selectors are specific components: hero section column, badge, contact cards. In mobile view. We need to maintain the same selectors.

Potential additions:
- For `.app-hero-section .row .col-lg-7`: we can add a background gradient, border-radius, box-shadow, maybe padding? But padding would change layout, not allowed unless within ±20%? The original rule sets text-align only, so no padding. Adding padding would change layout, not allowed. So we should avoid adding layout-affecting properties. But we can add background, border-radius, box-shadow? Border-radius on a column could affect visual but not layout if no background? Actually border-radius without background/border has no visual effect. We could add background and border-radius; that doesn't affect layout (since background doesn't affect geometry). Box-shadow also doesn't affect layout. So we can add decorative properties that are purely visual.

- For `.app-hero-section .badge.bg-warning`: currently font-size. We can add background gradient, color, border-radius, box-shadow, etc. But note `bg-warning` is a Bootstrap class that sets background color. We can override with a gradient background. But must be careful: the class `bg-warning` sets background-color; we can replace with background-image gradient. But we need to keep the font-size. We can add border, border-radius, box-shadow, color, etc.

- For `.contact-channels-section article, .contact-quick-section .contact-card`: currently padding. We can add background, border-radius, box-shadow, border, etc. But padding must remain with `var(--space-md) !important` exactly. We can add other properties.

We should be mindful that these are inside a media query max-width 575.98px, so these are mobile styles. The target style is editorial-magazine with cream/beige and deep red/olive accent, gradient-rich. So we can add gradients with cream and red/olive.

Let's craft a rewrite that preserves original declarations exactly and adds visual properties.

But also: The instructions say "Only change colors, shadows, radius, transitions, gradients." That means we should not change text-align, font-size, padding. We can add transition? Yes, transitions are allowed. We can add transition to these selectors. But adding transition on padding might cause transition if padding changes elsewhere, but it's fine. It doesn't change layout.

Also, note the original file fingerprint and request ID are irrelevant.

We need to output only CSS. Since the original has a media query block, we'll output the same media query with the same selectors and original declarations, plus added visual declarations.

Let's design:

Variables? In media query we could use var(--space-md) already. We might want to use custom properties? But we don't know if they exist. We can define our own? Better to use direct values or var with fallback. Since original uses var(--space-md), it indicates there are CSS variables. We can use existing variables? We don't know. We could add new variable definitions? That would be extra. But we can use colors directly.

We should likely use the editorial palette: cream #f5f1e8, ink #1a1a1a, deep red #c44536, olive #6b705c. Gradient-rich effects: multiple linear-gradient backgrounds.

Let's add:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` plus:
   - background: linear-gradient(135deg, rgba(245,241,232,0.9), rgba(107,112,92,0.15));
   - border-radius: 0 0 2rem 2rem? Actually maybe a subtle background to make the hero section stand out. Since it's a col, it may have no background. But adding a background could be nice.
   - box-shadow: 0 10px 30px rgba(26,26,26,0.08);
   - transition: background 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s cubic-bezier(0.22,1,0.36,1);

But wait: adding background to a column might affect the background of entire column, but it doesn't change layout. It could be okay.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` plus:
   - background: linear-gradient(120deg, #c44536, #e07a5f); // override Bootstrap bg-warning
   - color: #f5f1e8;
   - border-radius: 999px;
   - box-shadow: 0 4px 12px rgba(196,69,54,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
   - transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s cubic-bezier(0.22,1,0.36,1);
   - maybe border: 1px solid rgba(245,241,232,0.3);

But careful: adding transform is layout-affecting? Transform doesn't affect layout, but it changes visual position. It's allowed? The instructions say only change colors, shadows, radius, transitions, gradients. Transform is not in the allowed list, so we cannot add transform. We should avoid transform. So no transform.

3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` plus:
   - background: linear-gradient(145deg, #fffdf7, #f5f1e8);
   - border-radius: 1rem;
   - box-shadow: 0 8px 24px rgba(26,26,26,0.06), 0 2px 6px rgba(26,26,26,0.04);
   - border: 1px solid rgba(107,112,92,0.15);
   - transition: box-shadow 0.5s cubic-bezier(0.22,1,0.36,1), background 0.5s cubic-bezier(0.22,1,0.36,1);

We must ensure that adding border doesn't change layout? Border adds to box size by default. That would change layout! Because box-sizing is probably border-box? Not sure. If default content-box, adding border would affect width/height. But for article/card, width might be determined by parent grid, but adding border could cause overflow. To avoid layout changes, we should avoid border or use outline instead (outline doesn't affect layout). We can use box-shadow to simulate border instead. Or use inset box-shadow. So better not add border width. We can add outline if desired, but outline may not follow border-radius in some browsers? Actually outline follows border-radius in modern browsers? It generally follows, but to be safe, no border. Use box-shadow for border effect: `box-shadow: inset 0 0 0 1px rgba(107,112,92,0.2), ...`. That's safe.

Also, adding background and border-radius to elements with padding might have no layout effect. Good.

For the hero column, adding background and box-shadow is safe.

For the badge, adding background and box-shadow is safe. Border-radius on badge is fine. Color is fine.

Need to ensure no layout properties changed. We won't change anything existing.

Also, the instruction "Only change colors, shadows, radius, transitions, gradients" means we should not add new properties outside those categories. Background is color, box-shadow is shadow, border-radius is radius, transition is transitions, background-image is gradient. So adding background is allowed. Outline-color? We can add outline but not needed. caret-color? Not relevant.

We should also consider whether adding transition to these selectors might be considered "change" but allowed. The target says "smooth long transitions (0.4-0.6s cubic-bezier)". So use 0.5s cubic-bezier.

Let's write with the exact selectors and original declarations.

Potential issue: The original uses `!important` on padding. We must keep exactly `padding: var(--space-md) !important;`.

Also, the media query condition itself should remain unchanged: `@media (max-width: 575.98px)`.

Now, let's assemble:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, rgba(245,241,232,0.85), rgba(107,112,92,0.12));
        border-radius: 0 0 2.5rem 2.5rem;
        box-shadow: 0 12px 32px rgba(26,26,26,0.08);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(120deg, #c44536 0%, #e07a5f 100%);
        color: #f5f1e8;
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(196,69,54,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #fffdf7 0%, #f5f1e8 100%);
        border-radius: 1.25rem;
        box-shadow: 0 10px 28px rgba(26,26,26,0.05), 0 2px 8px rgba(26,26,26,0.04), inset 0 0 0 1px rgba(107,112,92,0.12);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

But we need to ensure that adding background to `.col-lg-7` might cover its children? It's fine. However, on mobile, `col-lg-7` is just a column inside a row. It might be full width. Adding a background could create a large block. Could be acceptable. But perhaps we should avoid adding background to the column because it might affect the overall design? It's okay, but to be conservative we could just add a subtle radial gradient with low opacity. Let's use `background: radial-gradient(circle at 20% 20%, rgba(245,241,232,0.9), rgba(245,241,232,0.4));` But since it's a visual identity refresh, it's fine.

Also, note that the original has `.badge.bg-warning` with Bootstrap bg-warning. We override background with gradient. Good.

Should we add a `border-radius` to the col? It might create a weird shape if no background. We have background so it's visible. On mobile, hero column might have text. A rounded bottom could look nice.

But wait: The column is inside a row. Adding a background and radius might be unexpected. However the task is to refresh visual identity. So it's okay to add these decorations.

Now, check the allowed changes list: border-color and border-style (NOT border-width) can change. We are not adding border. We use inset box-shadow. Good.

We must not change font-size, text-align, padding. We kept them exactly.

The original CSS has blank lines; we can preserve structure.

Let's output only CSS, no markdown.

But before finalizing, consider if adding transition to elements that already have transitions elsewhere might override? We use specific property names. Fine.

One more thing: In the original, there is no trailing semicolon after `.contact-quick-section .contact-card` block? Actually it has padding declaration with semicolon. We'll keep.

Let's produce final output.

But also, the instructions say "Output the rewritten CSS now (no markdown, no preamble)". So we should just output the CSS.

Let's ensure the selector list for contact block is exactly same:

.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    ...
}

Yes.

Now, let's think about whether we should include the `text-align: center;` exactly as original. Yes.

Now, possible concern: The target style "gradient-rich" suggests "Linear-gradient or radial-gradient on most backgrounds". We've added gradients to all three rules. Good.

Also, "Multiple stops for richness": We used `linear-gradient(120deg, #c44536 0%, #e07a5f 100%)` with two stops, but could use more. To satisfy "multiple stops", we can add a third color stop, e.g., `#c44536 0%, #d66a52 45%, #e07a5f 100%`. For the card background, use multiple stops: `#fffdf7 0%, #f5f1e8 50%, #efe9db 100%`. For the column, use `rgba(245,241,232,0.9) 0%, rgba(245,241,232,0.4) 50%, rgba(107,112,92,0.1) 100%`.

Let's update:

- col background: `radial-gradient(circle at 20% 20%, rgba(245,241,232,0.95) 0%, rgba(245,241,232,0.55) 45%, rgba(107,112,92,0.1) 100%)`
- badge background: `linear-gradient(120deg, #c44536 0%, #d66a52 45%, #e07a5f 100%)`
- card background: `linear-gradient(145deg, #fffdf7 0%, #f5f1e8 45%, #ece5d8 100%)`

Also, use smooth long transitions 0.5s cubic-bezier(0.22,1,0.36,1).

Now, box-shadows:

- col: `0 16px 40px rgba(26,26,26,0.06), 0 4px 12px rgba(26,26,26,0.04)` but if it's a large block, maybe too much. Use subtle.
- badge: `0 4px 14px rgba(196,69,54,0.35), inset 0 1px 0 rgba(255,255,255,0.25)`
- card: `0 12px 30px rgba(26,26,26,0.05), 0 3px 8px rgba(26,26,26,0.04), inset 0 0 0 1px rgba(107,112,92,0.12)`

Radius:

- col: `0 0 2rem 2rem` maybe too much? Actually border-radius: 0 0 2rem 2rem means bottom-left and bottom-right 2rem, top-left/top-right 0. Good for hero column.
- badge: `999px` pill shape.
- card: `1.25rem`

Transitions:

- col: `background 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s cubic-bezier(0.22,1,0.36,1)`
- badge: `background 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s cubic-bezier(0.22,1,0.36,1)`
- card: `background 0.5s cubic-bezier