/* ============================================================
   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. The original CSS is a media query with three rules. We need to change only visual properties: colors, shadows, radius, transitions, gradients. But the original rules only have font-size, padding, text-align. Those are typography/layout? Let's check rules:

- text-align: center; is layout? It's in the never change list: text-align, vertical-align. So we cannot change text-align.
- font-size is typography fixed, cannot change.
- padding can change ±20% maximum. Original padding: var(--space-md) !important. We can adjust within 20% but likely keep var. We can change the var? Actually we can change CSS custom properties values, but here --space-md is defined elsewhere, not in this snippet. We could change padding value to a slightly different value but must be within ±20%. The original is var(--space-md). If we change to a fixed padding, maybe okay? But better keep as var? The instruction says "padding, margin (keep similar values, ±20% maximum)" so we can change to calc or adjust. But original uses var, we can keep it.

The target style is "masonry-flow" with gradient-rich effects. This is an aggressive style but we are in conservative mode. We need to make visual changes only. However the original CSS is extremely small: a media query with three rules. There are no colors, shadows, borders, radius, transitions. To fulfill the task, we can add visual properties? The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." But there are no such properties in original. We can add new visual properties to existing selectors without changing layout? Adding background, box-shadow, border-radius, etc. is allowed, as they are visual. But we must not change display, position, width, height, padding etc. We can add declarations that are visual. That's likely expected: to inject the target style.

But be careful: the original rules are inside a media query. We can add background gradients, border-radius, box-shadow, transitions to these selectors. But we need to maintain same selectors and order.

Let's parse original:

@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 can add visual properties:

- For .app-hero-section .row .col-lg-7: perhaps a gradient background? But that's a column, adding background might affect layout? It's visual. But changing background might require padding, but we can't change padding. We can add border-radius, box-shadow. But this is a hero section column, adding a card-like background might be okay. However in mobile, text-align center. We can add a subtle radial-gradient background? But if the column has no padding, the background might touch edges. But it's visual. The user wants gradient-rich, Pinterest-like with white cards on light gray bg. But only within this CSS block. We can add background to these elements. But the selector .app-hero-section .row .col-lg-7 is a column, adding a background could be fine.

- For .app-hero-section .badge.bg-warning: Badge already has bg-warning (Bootstrap). We can override background with a gradient, add box-shadow, border-radius, maybe transition. font-size stays.

- For .contact-channels-section article, .contact-quick-section .contact-card: These are cards. We can add gradient backgrounds, box shadows, border-radius, transitions. Padding must be same or within ±20%. Since original uses var(--space-md), we can keep it. But we can also change to a different value? Better keep var.

Also could add: background, border, border-radius, box-shadow, transition, backdrop-filter, etc.

Need to make sure we don't change text-align or font-size. For the badge, font-size: 0.85rem stays. But we can add letter-spacing? Wait, letter-spacing is typography fixed? In never-change list: letter-spacing, word-spacing. So don't change. We can add color? Yes, color is allowed. For badge, we can change color to white (text color). But original badge has Bootstrap .bg-warning with dark text? Actually bg-warning sets background color, text color inherited. We can set color: #fff to ensure contrast if we change background to gradient. That's allowed.

For article/card: add background, border-radius, box-shadow, transition. Also maybe background with linear-gradient.

Target style says "Each card may have its own accent strip". Could add ::before? But the selector is .contact-channels-section article, .contact-quick-section .contact-card. We can use a background gradient on the cards. But to add accent strip, we'd need a pseudo-element or border-image. We can add border-top: 4px solid? But border-width cannot change? Actually border-width is in never-change? Let's check: "border-color and border-style (NOT border-width)" means border-width cannot change. So if we add a border, we'd be adding border-width, which might alter layout? But border width not present originally, adding it will alter box size unless box-sizing border-box. We should avoid adding border-width. We can use box-shadow to simulate accent strip, e.g., inset box-shadow top? Or use background gradient to create a top accent strip via background-size? But that might affect layout? Not layout, but background. For example, background: linear-gradient(...) top strip plus card background. Could do multiple backgrounds.

We can add border-radius to cards. Box-shadow with colored accent.

Also gradient-rich: "Linear-gradient or radial-gradient on most backgrounds", "Gradient borders via border-image". But adding border-image may require border-width? We can use border-image without border-width? Actually border-image doesn't show unless border-width set. So avoid. We can simulate gradient border with box-shadow or background padding-box/border-box.

Since original CSS is small, we can add many visual declarations.

Need to ensure selectors exactly preserved.

Let's craft a new CSS with these three blocks.

Block 1: .app-hero-section .row .col-lg-7
- We can add a background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.4)); maybe too much. This is a column in hero. Add a subtle gradient background and border-radius, box-shadow. But if we add background, the column will appear as a card. But maybe hero has background already. The target is Pinterest-like with white cards on light gray bg. But this is inside a media query for mobile. Let's do: background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border-radius: 1.25rem; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.05); transition: box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); But transform is a layout? Transform is not listed in never-change? Actually not in the never-change list; but changing transform could affect visual, but it's a layout effect? It doesn't change layout flow but changes rendering. Since we are conservative, we can add transition on transform but not actually transform. We can add hover? We should preserve selectors; adding :hover is not allowed because selectors must be preserved exactly? The instruction says keep all selectors exactly, doesn't say we can't add new selectors? It says "Only colors, shadows, radius, transitions, gradients" can change. But adding new pseudo-class selectors would change selector list, not allowed. So don't add :hover. We can add transition property only, no hover. But if we add transition on transform, no effect without transform. We can add transition on box-shadow, background-color.

- Add color: #1f2937. That's allowed.

- Maybe add backdrop-filter? Allowed, but might be unnecessary.

Block 2: .app-hero-section .badge.bg-warning
- Original: font-size: 0.85rem. Keep.
- Add background: linear-gradient(135deg, #ffb347, #ff6b6b); or something. But .bg-warning is Bootstrap, we can override background-image and background-color. We need to ensure specificity: .badge.bg-warning is class selector, same specificity as Bootstrap? Bootstrap uses .bg-warning { background-color: #ffc107!important; } Actually Bootstrap 5 .bg-warning has !important? Let's check: In Bootstrap, .bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; } Yes, important. Our rule uses .app-hero-section .badge.bg-warning, which is more specific, and we can use !important too, or not. To override, we need specificity and maybe important. We can set background: linear-gradient(...) !important; color: #fff !important; This is visual.

- Add box-shadow: 0 4px 10px rgba(255,107,107,0.3);
- Add border-radius: 0.75rem;
- Add transition: box-shadow 0.3s ease;

But wait, font-size is 0.85rem. We can also add padding? Padding is layout, can change within 20%. But original doesn't specify padding, so adding padding would change layout. We should not add padding not present? The rule says we cannot change layout, adding padding would change occupied space, but since it's a badge, adding padding might alter appearance but not layout structure. However better avoid adding new layout properties. Adding background and box-shadow doesn't affect layout.

Block 3: .contact-channels-section article, .contact-quick-section .contact-card
- Original: padding: var(--space-md) !important. Keep exactly or adjust within 20%. We can set padding: calc(var(--space-md) * 0.95) !important; but that might be within 20%. But to be safe, keep as original. But we can change the custom property? The custom property --space-md is not defined here. Changing it would affect other elements; not allowed? We can't define it here because it would be scoped to the selector? Actually, custom properties inherit, and if we set --space-md on these elements, it would override for descendants, but the padding uses var(--space-md), so if we set --space-md: 1.5rem on the element itself, the padding would change. But that would affect padding value, but within 20% maybe. But better not.

- Add background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(248,249,250,0.96));
- Add border-radius: 1.5rem;
- Add box-shadow: 0 20px 40px -12px rgba(0,0,0,0.12), 0 8px 24px -8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
- Add transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.5s ease;
- Add border? Avoid border-width. Use box-shadow for accent strip: maybe an inset shadow at top with color: inset 0 4px 0 0 #ff6b6b; But box-shadow inset can create top accent. That's visual. For example: box-shadow: inset 0 4px 0 0 #ffb347, 0 20px 40px -12px rgba(0,0,0,0.12), ...; That simulates accent strip on top. Good.
- Could add backdrop-filter: blur(8px); allowed? But background is already solid-ish; okay.

But wait, need to ensure the "gradient-rich" variant: linear-gradient/radial-gradient on most backgrounds, gradient borders via border-image, multiple stops, smooth long transitions (0.4-0.6s cubic-bezier).

We can add to all: background images.

We also need to preserve the media query exactly: @media (max-width: 575.98px) { ... }.

We can reorder declarations, but keep selectors and rules.

Let's write:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.95), rgba(243,244,246,0.6));
        border-radius: 1.75rem;
        box-shadow: 0 12px 28px -8px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
        color: #1f2937;
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.5s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd166 0%, #ff9f1c 45%, #ff6b6b 100%) !important;
        color: #ffffff !important;
        border-radius: 0.75rem;
        box-shadow: 0 6px 16px -4px rgba(255, 107, 107, 0.4), 0 3px 8px rgba(255, 159, 28, 0.25);
        transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-position 0.45s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(248,249,250,0.7)), radial-gradient(circle at 100% 0%, rgba(255, 209, 102, 0.25), transparent 60%);
        border-radius: 1.5rem;
        box-shadow: inset 0 4px 0 0 #ffd166, 0 20px 40px -12px rgba(0,0,0,0.15), 0 8px 20px -8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.9);
        backdrop-filter: blur(10px);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.5s ease;
    }
}

Need to check: Did we preserve all original declarations? Yes: text-align center, font-size 0.85rem, padding var(--space-md) !important. We added others. Padding unchanged exactly. Good.

But the instruction says "padding, margin (keep similar values, ±20% maximum)" — keeping exactly is fine.

We added backdrop-filter: blur(10px) — that's allowed. But note: backdrop-filter could affect performance but fine.

We changed color of badge to white; need to check contrast with gradient. The gradient includes yellow/orange/red; white text might have poor contrast on yellow part. But it's a badge, maybe okay. Could use darker text? But gradient-rich with white cards? In Pinterest, badges often white on dark. But to ensure readability, maybe use #1f2937? But if background gradient includes yellow, dark text is better. However original .bg-warning typically has dark text (#000). We can set color: #1f2937 maybe better. But the target palette doesn't specify. We want a fresh look. Let's decide: use a deeper gradient from #ff9f1c to #ff6b6b, white text. It's okay. But white on yellow-orange might be low contrast. Better: set color: #4a2c0a; or #3b2f2f. But gradient has red, dark text still okay. But Pinterest-like: white cards, but badges can be dark. Let's choose a gradient that is rich but not too light, and white text. Actually gradient stops: #ffd166 is light yellow, white text not visible. We can change gradient to #f97316 to #db2777 or similar. Use #ff6b6b to #7c3aed maybe. We need a "warm" palette? The target style "Pinterest-like" uses white cards, soft shadows on light gray bg, each card may have its own accent strip. The effect variant "gradient-rich" wants multiple stops. We can set badge gradient with three stops: #f59e0b, #ef4444, #ec4899. White text should work on all? White on #f59e0b (amber) has contrast ratio ~2.3, low. Better use dark text. But dark text on red is also low. We can use a background with darker colors: #f97316, #dc2626, #d946ef. White text still may be low on orange. But in practice, badges with white text on orange are common. We'll trust.

Alternatively, to satisfy both, we can set color: #fff with text-shadow: 0 1px 2px rgba(0,0,0,