/* ============================================================
   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 output rewritten CSS conservative mode. Need examine original snippet: only a media query max-width 575.98px with three rules. Need preserve selectors and layout, typography, padding? Wait padding in third rule var(--space-md) !important. We can adjust padding? Constraint says padding, margin keep similar ±20% max. But can change var? It's custom property value maybe. However original uses var(--space-md). In conservative we can change value? The file snippet no root. We need output CSS preserving selectors and layout. We can change visual properties only. Need maybe include same selectors exactly. Colors? There are no colors in original except bg-warning class? It just font-size. Since original has no colors, but task wants refresh visual identity. Need can add color, background? But "keep all selectors exactly" and "layout unchanged". We can modify properties within allowed list: color, background, border, shadow, radius, gradient, transitions, etc. But "HTML fixed, visual changes only". Since original no colors, we need create fresh styles perhaps by adding allowed properties to the same selectors. But must not change layout. Need be careful not to add padding/margins? Could alter padding? They say padding can change max ±20% from input. Relative to var unknown. Better not touch padding in third rule. Could change background, border-radius, box-shadow, color, transitions on these elements. But these selectors may apply to dynamic elements. Need style to target style centered-stage and gradient-rich. Need maybe add background to col? But that might alter visual but not layout.

Need preserve all original rules. Could add new properties under same selectors. But note file "块2/2" maybe only a media query? Need rewrite CSS with same media queries. We can also maybe add color and background gradients. We need ensure no layout changes. 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;
    }
}

Need preserve selectors, text-align, font-size, padding. But can adjust padding? Probably leave. We can add visual enhancements inside same media query. Because "centered-stage" wants centered content and large padding? But can't change layout too much. Maybe add background gradients and shadows to contact cards? But only in mobile? Existing selectors. Need perhaps keep exactly the selectors and add allowed CSS declarations, not change existing layout declarations.

Need decide target style "centered-stage" with dark stage #0f0f1a, bright content area, gold/purple accent. On mobile, we can apply background? Maybe use backdrop-filter, border-radius, box-shadow, gradient text? But we should not alter HTML. Need not add new selectors? Probably can add new declarations only.

Let's craft output:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        /* add? color maybe not because child text? Could set background? */
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        /* background gradient instead of bg-warning? But class bg-warning likely sets background-color. We can override with linear-gradient. Also color, box-shadow, border-radius. */
        background: linear-gradient(135deg, #ffd76e 0%, #d4af37 100%);
        color: #0f0f1a;
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.25);
        border-radius: 999px;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        /* add background, border-radius, box-shadow, border, transition? */
        background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
        border: 1px solid rgba(212, 175, 55, 0.18);
        border-radius: 24px;
        box-shadow: 0 12px 32px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
        backdrop-filter: blur(12px);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

But need be cautious: adding transform transition doesn't change transform now; okay. But adding transition is allowed. But adding border may change layout? border adds to width/height if box-sizing default? Usually * { box-sizing: border-box }. We don't know. Constraint says border-width? "border-color and border-style (NOT border-width)" cannot change border-width. Adding border with 1px changes border-width from unspecified. It could affect layout? Better avoid border-width. Could use outline instead? Outline doesn't affect layout but allowed. Or use box-shadow as border. We can add box-shadow with 0 0 0 1px color. But that also not layout. To keep layout absolute, avoid border. Use background-clip and box-shadow.

Need maybe not add background to col-lg-7 because that may create a visual block behind all content, but no layout. Can add perhaps background: radial-gradient(...); border-radius; but if background is opaque on col, could cover body background; but okay visually. Need be consistent.

Original target style "centered-stage" with dark stage #0f0f1a and premium gold/deep purple accent. We can set body? Cannot add selectors. But can modify backgrounds of given selectors. If only mobile, maybe set .contact cards to gold/purple. But perhaps better to maintain original visual identity unchanged? However task wants refresh. Need output new CSS.

Need preserve all selectors exactly. There is comma-separated list. We keep.

Need maybe include existing properties plus added. Need all colors changed? Original had no colors. We can introduce colors. Need self-check: "Colors throughout file replaced with fresh palette?" There were no colors; we added. Good.

Need decide about custom properties var(--space-md). We shouldn't change padding. We can keep.

Let's think if adding padding? We don't.

Need maybe add `text-shadow` to `.col-lg-7`? Hmm. Need text-align center maybe plus color? But if we set color on col, it'll inherit, possibly not desired. But we could add "background" and "border-radius" to the column. Since col has padding? Wait col-lg-7 might have padding via bootstrap. Adding background could create a card. But no layout change. Use semi-transparent background.

Let's craft robust output within media query. Since target includes "dark stage #0f0f1a, bright content area" maybe on mobile we want content to pop. We can set `color: #f5f2ea` on `.app-hero-section .row .col-lg-7`? But color inheritance may change all text in hero section. Might be okay? But original background might be light; if we set color dark, could reduce contrast. Better not alter text color? But centered-stage style perhaps dark background overall. However we don't have overall background. We can add subtle radial gradient behind hero? But that might require selectors not specified. Could set `.app-hero-section .row .col-lg-7` background to radial gradient. But if background is opaque dark, and current text colors were designed for light background, then text may be unreadable. We could also set color on that same selector? It would apply to entire col, including all children. Risk. We need not modify content. But the task is only this CSS block; no base styles. It's safer to only apply decorative backgrounds with low opacity and not change text color. The badge bg-warning override is okay because the element is specifically bg-warning; we set color dark to contrast with gold gradient. Contact cards get translucent dark background with light border; if text colors are currently dark on light page, adding dark overlay behind them may reduce contrast. Hmm. Original snippets have contact cards with `padding: var(--space-md)` only; maybe base cards already have background. If we add background gradient, we might override. Need be careful.

Conservative mode says we can change background colors; but not ensure accessibility? The target asks "premium gold or deep purple accent". We can add `background: linear-gradient(145deg, rgba(15, 15, 26, 0.65), rgba(15, 15, 26, 0.35))` with `backdrop-filter: blur(12px)` for glassy dark cards, but if text is dark it will fail. Maybe use light gold gradient cards? Let's inspect class names: `.contact-channels-section article`, `.contact-quick-section .contact-card`. These likely are "card" components in a contact section. Could be on dark background and already have dark text? We don't know.

Could avoid adding decorative backgrounds to cards and instead only add box-shadow, border-radius, and transition. But "gradient-rich" effect says linear/radial on most backgrounds. We can use background gradient on `.app-hero-section .badge.bg-warning` only. And maybe a radial background on `.app-hero-section .row .col-lg-7` with low opacity. Contact cards get gradient borders via `background:`? But if we use background gradient as border via `background-clip: padding-box` and pseudo? Can't add pseudo selectors? We could use `box-shadow: inset 0 0 0 1px rgba(212,175,55,0.25)` to simulate border. That is box-shadow allowed and no layout. Use `background: linear-gradient(...)` for subtle gold tint.

Need maybe preserve original with no additions? But then not a visual refresh. Since only selectors are in media query, adding allowed props is okay.

Let's plan output:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #0f0f1a; /* maybe dangerous? If page is dark, no. Avoid? */
        background: radial-gradient(ellipse at top center, rgba(212, 175, 55, 0.12), transparent 65%);
        border-radius: 32px;
        text-shadow: 0 0 40px rgba(212, 175, 55, 0.08);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd76e 0%, #caa438 45%, #8e6b1f 100%);
        color: #0f0f1a;
        border-radius: 999px;
        box-shadow: 0 8px 24px -8px rgba(202, 164, 56, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
        border-radius: 28px;
        box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(212, 175, 55, 0.2), inset 0 1px 0 rgba(255,255,255,0.08);
        backdrop-filter: blur(14px);
        transition: box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

Would `background` override original background? This is a change. `backdrop-filter` doesn't affect layout but if unsupported it's okay.

Need maybe add `@media` with same breakpoint. Good.

Need check "Only rewrite CSS preserving all selectors and layout exactly." We preserve.

Need ensure no colors unchanged? The original no colors. But maybe we should "replace" default background? We added colors. Good.

Need maybe include "box-shadow" on col? We added. Good.

Need maybe include transitions on badge? Could add transition but not necessary.

Need consider if `background` on `.app-hero-section .row .col-lg-7` uses `radial-gradient` with transparent; background might cover existing background with semi-transparent? If the selector's parent has background, transparent stops show through. Good.

Need maybe use `color` on col? We should avoid because color could be inherited and break. Not necessary.

Need maybe use `text-shadow` on col? It's a decorative property, but applying text-shadow to container applies to all text; could be okay with a soft glow. But if many text elements, it may look weird. Could avoid. However effect gradient-rich wants text-shadow? Not necessary. Keep minimal.

Need perhaps not alter border-radius on badge? Bootstrap .badge maybe already pill. But okay.

Need maybe include `background-image` instead of `background` to avoid background-color override? We can use `background: linear-gradient(...)` to replace `.bg-warning` background-color. Fine.

Need ensure only allowed properties. `backdrop-filter` allowed. `transition` allowed (timing, duration). `border-radius` allowed. `box-shadow` allowed. `background`/`background-color` allowed. `color` allowed. Good.

Need maybe include `-webkit-backdrop-filter`? It's a property? Not listed but same as backdrop-filter prefix, probably okay. But conservative says filter, backdrop-filter; prefixed allowed? It's a decorative property. We can add `-webkit-backdrop-filter: blur(14px);`. But no need.

Need maybe use `border-radius` without changing layout. Good.

Need maybe add `outline`? No.

Need maybe add `border-image` for gradient-rich? Can't add border width. Outline can simulate border with `outline: 1px solid` but outline doesn't affect layout and allowed. However outline follows border-radius? In modern browsers yes. But can use box-shadow inset.

Need perhaps adjust `transition` on `.contact-channels-section article, .contact-quick-section .contact-card` to `transition: box-shadow 0.6s cubic-bezier(.22,1,.36,1), border-radius 0.6s cubic-bezier(.22,1,.36,1);` But border-radius transitions are allowed. Fine.

Need maybe add `transform`? Not allowed? Not listed; shouldn't. Avoid.

Need "centered-stage" pattern wants large symmetrical padding 60-100px top/bottom. But this is mobile media query; adding padding would break. We can't change. We can ignore due conservative constraints.

Need maybe change `text-align: center` to include `margin-inline: auto`? That would change layout. Not allowed.

Need maybe include `box-shadow` on badge with `0 10px 28px -12px rgba(212,175,55,0.6)`. Good.

Need maybe set `background` on contact cards to "linear-gradient(145deg, rgba(255, 215, 110, 0.12), rgba(109, 76, 199, 0.08))" to include gold/purple. That could look interesting. Let's refine.

Our target style includes "dark stage #0f0f1a, bright content area" and "Premium gold or deep purple accent." We can use dark stage in card background: `linear-gradient(145deg, rgba(15,15,26,0.75), rgba(30,20,60,0.55))` plus gold inset border. But if text on card is meant light? Actually if card is on dark background, dark glass card is good. But unknown. Maybe use "light content area" as card background? Hmm.

Let's search memory: `.contact-channels-section article` maybe in a TMDb-like Chinese site? Class "contact-quick-section" etc. Could be from "电影首发站"? Not sure. The CSS snippet in `assets/css/saishi.css` maybe "赛事" CSS. ".app-hero-section" "contact-channels-section" etc. The original only mobile overrides; base CSS probably defines cards with `background: #fff` and text dark. If we add dark translucent background, conflict. Since the target style asks centered-stage, perhaps outside this file overall body is dark? We don't know. We can use subtle gradient that preserves legibility for both: use very low opacity white/black? Maybe `background: linear-gradient(180deg, rgba(212,175,55,0.08), rgba(109,76,199,0.06))`; this will add tint to existing background, not replace with dark. Because `background` shorthand replaces existing background-color. If base card is white, the gradient with alpha will be over white and produce a light cream/lavender background, maintaining contrast for dark text. This is safer. It also satisfies gradient-rich. For `.col-lg-7` similarly use `radial-gradient` with gold/purple alpha over whatever background; if base is white, subtle. Good.

For badge `.badge.bg-warning`, background gradient with alpha? If we use gradient with no alpha but replace yellow with gold, it's okay. We also set dark text to ensure contrast.

For contact cards, we can use `background: linear-gradient(135deg, rgba(212, 175, 55, 0.10), rgba(109, 76, 199, 0.08));` This doesn't fully replace with dark. But "grad