/* ============================================================
   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 given CSS visually. Original is a media query block. We must keep selectors and layout properties unchanged (though padding is layout, we can keep within ±20%, but we are asked border-radius etc). However the original snippet only contains media query with font-size, text-align, padding. These are typography/layout we cannot change? Wait text-align is forbidden, font-size is forbidden, padding is layout with ±20% allowed but we should keep similar.

But the task says "Only change colors, shadows, radius, transitions, gradients." The original CSS has no colors, shadows, etc. So what can we change? Maybe we need to add visual properties? But we must preserve selectors. Since the original CSS only has layout/typography properties, we cannot change them. But the instruction says refresh visual identity without changing layout structure. Perhaps we can add properties to the same selectors? The output must preserve all selectors and layout exactly. We can add color, background, border-radius, box-shadow, etc to each existing rule? But adding properties will not change existing layout. However the "CRITICAL - HTML is fixed" so we can add visual properties to existing selectors. But the previous attempt "didn't change enough" suggests we should add new visual properties to the existing rules while preserving existing declarations? We should be careful: We need to output CSS that preserves every selector character-for-character and all layout declarations, but we can add color/shadow/radius/gradient declarations. However the original CSS uses a media query. We can add declarations inside each existing block.

Let's analyze 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 to each of these rules. Need target style "editorial-magazine" with cream/beige bg, ink text, deep red accent. Gradient-rich variant. So we can add background gradients, color, border-radius, box-shadow, etc. But these elements are hero section row, badge, contact cards. We can add subtle gradients or shadows.

But we also need to consider that these are inside media query. The previous attempt maybe didn't change enough because they didn't add anything. So we need to add visual properties.

We must keep the media query condition exactly. Keep selectors exactly, keep existing declarations exactly (because layout/typography must not change). Add new declarations with colors, backgrounds, shadows, gradients, border-radius, transitions. However we might change font-size? No. text-align? No.

We should also consider the "file fingerprint" etc doesn't matter.

Let's craft output.

We need to keep "padding: var(--space-md) !important;" exactly? It is layout, but we can keep it. However padding is a layout property, we could adjust within ±20% but better keep exactly. The instruction says "width, height, padding, margin (keep similar values, ±20% maximum)" so we can keep it or adjust slightly. But since it's a custom property, we don't know value. Keep.

Add visual properties:

1. For .app-hero-section .row .col-lg-7: maybe add color: #1a1a1a; background: linear-gradient(135deg, rgba(196,69,54,0.08), rgba(107,112,92,0.05)); border-radius: 12px; padding? No padding maybe already. But adding padding changes layout? Actually adding padding changes layout. The original has no padding on this element, so adding padding will change layout. We should avoid adding padding/margin. We can add background, color, border-radius, box-shadow? box-shadow doesn't affect layout. Border-radius no layout. background no layout. color no layout. text-shadow no layout. So add those.

But if the element is a flex item, box-shadow fine. Let's add a subtle gradient background and text color.

2. For .app-hero-section .badge.bg-warning: This is a badge with bootstrap bg-warning. We can override background with gradient? We can change background-color, background-image, color, border, box-shadow. However bg-warning class sets background-color. We can override with background: linear-gradient(...). Also border-radius, box-shadow. We need keep font-size exactly.

3. For contact cards: add background gradient, border-radius, box-shadow, border? Border might affect layout but border-width not to change; border-color/style allowed. Border-style could add border, but border width might affect layout. We can add box-shadow instead. Also background gradient. Need keep padding.

Potential issue: Adding background to elements that already have background may override Bootstrap. That's okay.

Let's also include transitions for hover? The original has no hover. We can add transition declarations, but they won't be triggered without hover. Fine.

Also add "border-radius" to all.

Editorial palette: cream #f5f1e8, ink #1a1a1a, accent #c44536, olive #6b705c. Gradient-rich: Use linear-gradient with multiple stops.

Let's craft:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, rgba(245,241,232,0.6) 0%, rgba(196,69,54,0.08) 50%, rgba(107,112,92,0.12) 100%);
        border-radius: 1.25rem 1.25rem 1.25rem 0;
        box-shadow: 0 0.25rem 1rem rgba(26,26,26,0.06), 0 0.125rem 0.25rem rgba(196,69,54,0.08);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        color: #1a1a1a;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(145deg, #c44536 0%, #a43326 40%, #6b705c 100%);
        border-radius: 10rem 10rem 10rem 0.5rem;
        box-shadow: 0 0.5rem 1rem -0.25rem rgba(196,69,54,0.45), inset 0 -0.125rem 0 rgba(26,26,26,0.15);
        color: #f5f1e8;
        border: 1px solid rgba(107,112,92,0.35);
        text-shadow: 0 1px 2px rgba(26,26,26,0.2);
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 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(180deg, rgba(245,241,232,0.9) 0%, rgba(255,255,255,0.6) 45%, rgba(196,69,54,0.06) 100%);
        border-radius: 1.75rem 1.75rem 1.75rem 0.75rem;
        box-shadow: 0 0.875rem 2rem -0.625rem rgba(26,26,26,0.15), 0 0.25rem 0.5rem rgba(107,112,92,0.1);
        border-left: 0.25rem solid transparent;
        border-image: linear-gradient(180deg, #c44536, #6b705c) 1;
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

Wait, border-left changes layout? We set border-left: 0.25rem solid transparent; but border-left-width is 0.25rem. The instruction says "border-color and border-style (NOT border-width)" can change, but we should not change border-width. We shouldn't set border-width. However border-image can create gradient borders without changing width. But border-image requires an initial border-width; if original has no border, adding a border will change layout. Better avoid adding border-width. We can use box-shadow with inset to simulate a colored side? But that's not border. Avoid border.

We used "border-left" which adds width. Bad. Remove border-left and border-image. Instead use background gradient and box-shadow.

Also backdrop-filter may affect? It doesn't layout. Fine.

For badge, we set border: 1px solid ... which changes border width. Not allowed. Remove border.

Also "transform" in transition? We didn't set transform, but transitions property can include transform; if not changing on hover, no effect. Fine.

We need be careful: "transition timing, easing, duration" can change and add. So okay.

Let's ensure the existing declarations remain exactly: text-align: center; font-size: 0.85rem; padding: var(--space-md) !important;.

We can order declarations as we like. To preserve the original, keep original declarations first, then add new ones.

Also need to conserve layout: adding background, border-radius, box-shadow, color, etc are visual. Good.

Now, "Target style editorial-magazine" wants asymmetric grids and large gaps, but those would require layout changes. However variant instructions say "Layout pattern (Aggressive only)" meaning in aggressive mode those are suggested. In conservative mode we can't change layout. So only color palette and effect. Good.

Let's refine colors.

Maybe add a global background? We don't have root. Just the three rules.

Consider the .app-hero-section .row .col-lg-7: It might already have text. Setting background gradient may create a card look. Add some padding? No. Border-radius without padding may look odd but okay.

Maybe add a background + border-radius to the row col. Also "text-align: center" remains.

For the badge, background gradient overrides warning yellow. Good.

For contact articles/cards, add a gradient background and a larger radius.

Let's make sure shadow colors align with palette. Use deep red and olive.

We should not change opacity? We can add opacity? But opacity may affect layout? no.

We can add "filter: drop-shadow(...)"? Fine.

Let's craft final output with no markdown. But we need to include only CSS. Also "First character = first CSS character". So start with @.

Let's also consider the instruction "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round." So we need to be more aggressive in visual changes. Use richer gradients, multi-layer shadows.

Let's enhance:

- Add a gradient to .col-lg-7: background: linear-gradient(135deg, #f5f1e8 0%, #efe7d8 30%, rgba(196,69,54,0.12) 100%), maybe not too heavy. Use multiple backgrounds: one radial gradient + linear gradient.

- Shadow: 0 0.125rem 0.5rem rgba(26,26,26,0.08), 0 0.75rem 2rem -0.5rem rgba(196,69,54,0.25), inset 0 -0.125rem 0 rgba(107,112,92,0.2). Use inset maybe.

- Border-radius: use "2rem 2rem 2rem 0.5rem / 1rem 1rem 1rem 0.25rem" for organic editorial feel.

- Badge: background: linear-gradient(135deg, #c44536, #a43326, #6b705c). Border-radius: 0.75rem 0.75rem 0.75rem 0.25rem. Shadow: 0 0.5rem 1.25rem -0.25rem #c44536, 0 0.125rem 0.25rem rgba(26,26,26,0.15). Add letter-spacing? No typography.

- Contact cards: background: linear-gradient(145deg, rgba(245,241,232,0.95) 0%, #ffffff 50%, rgba(107,112,92,0.15) 100%), plus a subtle radial accent. Border-radius: 2rem 0rem 2rem 0rem? That's asymmetric. Maybe "1.5rem 0.5rem 1.5rem 0.5rem". Shadow: 0 1rem 2.5rem -0.75rem rgba(26,26,26,0.2), 0 0.25rem 0.75rem rgba(196,69,54,0.08), inset 0 1px 0 rgba(255,255,255,0.8). Add "backdrop-filter: blur(12px)"? Good.

Also add "transition" to all for smooth hover? But no hover rules. Still okay.

Need ensure no "border" changes width. Use box-shadow inset to simulate border.

Let's decide final.

We must also include the media query exactly. Keep whitespace? "First character = first CSS character" so output:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: radial-gradient(circle at 80% 20%, rgba(196,69,54,0.12) 0%, transparent 45%), linear-gradient(135deg, #f5f1e8 0%, #efe7d8 60%, #6b705c 160%);
        border-radius: 2rem 2rem 2rem 0.5rem / 1.125rem 1.125rem 1.125rem 0.375rem;
        box-shadow: 0 0.125rem 0.375rem rgba(26,26,26,0.06), 0 0.875rem 2.25rem -0.75rem rgba(196,69,54,0.22), inset 0 -0.1875rem 0 rgba(107,112,92,0.15);
        color: #1a1a1a;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(145deg, #c44536 0%, #a43326 40%, #6b705c 140%);
        border-radius: 10rem 10rem 10rem 0.375rem;
        box-shadow: 0 0.375rem 0.875rem -0.25rem rgba(196,69,54,0.55), 0 0.125rem 0.25rem rgba(26,26,26,0.12), inset 0 -0.125rem 0 rgba(26,26,26,0.18);
        color: #f5f1e8;
        text-shadow: 0 0.125rem 0.25rem rgba(26,26,26,0.18);
        transition: filter 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 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, rgba(245,241,232,0.92) 0%, #ffffff 35%, rgba(107,112,92,0.18) 130%), radial-gradient(circle at 0% 0%, rgba(196,69,54,0.08) 0%, transparent 45%);
        border-radius: 1.75rem 0.375rem 1.75rem 0.375rem;
        box-shadow: 0 1rem 2.5rem -0.875rem rgba(26,26,26,0.18), 0 0.25rem 0.75rem rgba(107,112,92,0.12), inset 0 0.0625rem 0 rgba(255,255,255,0.85), inset 0 -0.125rem 0 rgba(196,69,54,0.08);
        color: #1a1a1a;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transition: box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

Need to check whether "backdrop-filter" allowed? "filter, backdrop-filter" allowed. Good.

Check "border-radius: 10rem 10rem 10