/* ============================================================
   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 CSS only for visual properties. The given CSS 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 keep all selectors, layout properties (text-align, padding, font-size) unchanged. The only visual properties we can change? Actually text-align, font-size, padding are layout/typography which are not allowed to change? The instructions say typography font-size cannot change. Padding is layout, keep similar. So we cannot change these properties. We need to add visual properties? But we must output CSS only. We can add color, background, border-radius, shadow, etc. But the original has no such properties. To refresh visual identity, we can add new declarations to existing rules, or add new rules? Must preserve all selectors exactly, can add properties within those selectors. However, we need to be careful: if we add background or color to these elements, it might change layout? No, colors don't affect layout. But we should avoid changing the layout values. We can add visual properties to these existing selectors. Also can add new selectors? No, must preserve selectors, but maybe we can add media query blocks? The instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." So we should not add new selectors. We can add declarations.

But the target style "centered-stage" says centered content, max-width, etc. That's aggressive layout? But in conservative mode, we cannot change layout. So we should only apply color palette and effect variant: airy-rhythm has generous spacing, large border-radius, soft shadows. We can add border-radius, box-shadow, background, color to the existing selectors. But careful: the selectors are inside a media query for max-width 575.98px. We can add visual properties inside.

Let's examine each rule:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` We can add color, background? It's a column. Adding background might not be ideal but possible. We can add border-radius, box-shadow? Might affect layout? Box-shadow no layout. But adding background to col might look weird. But target style: dark stage #0f0f1a, premium gold or purple accent. Since it's a hero section column, maybe we can add a color to text? But text-align center is already. We can add color: #f0e6d2? But hero section likely has text. We need a fresh palette. Let's choose palette: dark stage background for body? But we cannot change body selector because not in original. We can add a new top-level rule? The instruction says preserve all selectors. It doesn't say we cannot add new selectors? Actually it says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" — "ALL selectors" suggests we must keep existing ones, not necessarily prohibited from adding new ones. But to be safe, we should not introduce new selectors because that could change styling on HTML elements not originally targeted. However, we are allowed to change CSS custom properties values. But there are no custom properties here. We can add a new rule for `:root`? That would be a new selector. The instruction says "Class names: keep EXACTLY" but doesn't explicitly forbid new selectors? It says "preserving ALL selectors" meaning don't remove/alter existing selectors. Adding new ones might be acceptable but could be considered changing layout if applied to broader elements. But usually in these tasks, we are to rewrite the given CSS only, not add extra rules. The output should be the same structure with visual changes. We can add properties to existing rules.

However, to achieve a cohesive "centered-stage" and "airy-rhythm", we need to style more than these three small rules. But the original CSS only has these. We can add new declarations to each rule. But maybe we can also add a new `@media` block? No.

Let's think: The file is saishi.css, maybe it's a partial. The task says "File: assets/css/saishi.css#块2/2" meaning block 2 of 2, so only this portion. We must rewrite this portion. We can only change these rules. So we need to make them more visually distinct with colors, shadows, radius, etc. But the rules are small. We can add:

Rule 1: `.app-hero-section .row .col-lg-7` — add color, maybe a subtle text-shadow? Add background? Since it's a column, adding background with border-radius would create a card-like spotlight? But that might affect layout? Background doesn't affect layout. But padding? Already no padding. We could add a gradient background? It might overlay the column area. But perhaps we can add `color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.4);` to make text stand out. Add `background: rgba(255,255,255,0.05); border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.3);` But background on column might be too much. But to show change, we can.

Rule 2: `.app-hero-section .badge.bg-warning` — this is a badge with Bootstrap class bg-warning. We can override background-color, color, border-radius, box-shadow. Note: `bg-warning` is a Bootstrap utility that sets background-color. We can add `background-color` to override? Yes, but specificity: `.badge.bg-warning` same specificity as Bootstrap's `.bg-warning`? Actually `.badge.bg-warning` has higher specificity (0,2,0) vs `.bg-warning` (0,1,0). So we can set `background: linear-gradient(...); color: #1a1a2e; border-radius: 999px; box-shadow: ...;`. But original only font-size. We can add these. But font-size must remain 0.85rem. We can keep that.

Rule 3: `.contact-channels-section article, .contact-quick-section .contact-card` — add border-radius, background, box-shadow, border? But cannot change border-width, but can change border-color/style. Original has padding var(--space-md) !important. We can add `background: rgba(255,255,255,0.04); border-radius: 24px; box-shadow: 0 16px 32px -8px rgba(0,0,0,0.3);` also maybe `outline: 1px solid rgba(255,215,0,0.2);`? Outline doesn't affect layout. But careful: if they already have border, adding outline could double. But okay.

Also, we might want to change the transition timing? The rules have no transitions. We can add transition property. But transition property values are allowed to change, but we can add new transition declarations. However, adding transition could be considered a visual change. We can add `transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);` but that might not be necessary.

The instruction says "transition timing, easing, duration" may change, so we can add transitions. But not required.

We need to ensure the output is valid CSS. We can add properties inside each rule, preserving existing properties. Let's rewrite with a fresh palette: dark stage #0f0f1a, premium gold #d4af37 or #f0c75e, deep purple accent #6b4eff. The target says "Premium gold or deep purple accent." Let's use gold accent. Airy rhythm: large border-radius (16-28px), soft pillowy shadows.

Let's craft:

Rule 1: `.app-hero-section .row .col-lg-7 { text-align: center; color: #f5f0e8; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }` Maybe also add background? But if we add background to the column, it may create a block that spans the column width. Since it's `.col-lg-7`, it's a grid column. Adding background with border-radius will create a card-like area. But that might be visually striking. Let's add a subtle background gradient? But background on a column might be okay. We need to be careful not to change padding or margin. Let's add: `background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 255, 255, 0.02)); border-radius: 28px; box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5);` But this adds a box around the hero text. That could be a nice spotlight. However, if the column has no padding, the background will butt against content. It may look okay. But maybe better not to add background to a column that might have full-width content. Another approach: just add color and text-shadow, no background. To make it more distinct, we can add a `backdrop-filter`? No.

Let's consider the "centered-stage" style. The stage is dark, content area bright. We can set the text color to a warm off-white. Add a subtle text shadow. We can also add `accent-color`? Not relevant.

Rule 2: Badge. We can transform it into a glowing pill. Add `background: linear-gradient(135deg, #f5c542, #d4a017); color: #1a1a2e; border-radius: 999px; box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35); padding: 0.35em 0.9em;` But adding padding might affect layout? The original has font-size only. If we add padding, it will change the badge size, which could affect layout. The instruction says padding can change within ±20% only if present? Actually "padding, margin (keep similar values, ±20% maximum)" — if we add padding where none existed, that's a new layout change. We should avoid adding padding/margin. So no padding. We can add `border: 0`? Border-width must not change. But we can add border-style? If no border, adding border of 0 width doesn't change. But we could add `outline` instead. Outline doesn't affect layout. But adding background and border-radius is fine. For a badge, border-radius 999px won't affect layout. Adding box-shadow no layout. So: `background: linear-gradient(135deg, #f7d774, #e0a62e); color: #1a1a2e; border-radius: 999px; box-shadow: 0 4px 16px rgba(224, 166, 46, 0.35);` Also `transition: transform 0.2s ease`? But transform not allowed? We can't change transform? Actually transform is not listed as protected? The layout properties list doesn't include transform. But transform can affect layout/visual. It says "Layout pattern" no transform. But in conservative mode, we should not change transform because it moves elements. So avoid.

Rule 3: Cards. Add `background: rgba(255, 255, 255, 0.03); border-radius: 24px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.4);` Also maybe `border: 1px solid rgba(255, 215, 0, 0.12);` But border-width may change? If there is no border originally, adding 1px border increases size. But border doesn't affect layout if box-sizing is border-box? But we don't know. Better avoid border. Use `outline: 1px solid rgba(255,215,0,0.15); outline-offset: -1px;` Outline doesn't affect layout. But outline-offset is a visual property. We can add. Also `backdrop-filter: blur(8px);` if supported. That is visual.

Also add transition: `transition: background 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;` But transform might be protected? Actually we're not changing it, just adding transition. But if no transform on hover, transition won't do anything. We can add `transition: background-color 0.3s ease, border-radius 0.3s ease;` But border-radius transition is okay.

However, adding transition on box-shadow etc. is fine.

Let's ensure we don't change font-size, padding, text-align. We'll preserve exactly.

Now, the original CSS includes `@media (max-width: 575.98px) { ... }`. We will output the same media query with same selectors, adding declarations.

We need to decide how many changes to make. The instruction says "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette." So we should be bold.

Let's craft:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f8f4ec;
        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 0 40px rgba(255, 215, 0, 0.12);
        background: radial-gradient(ellipse at top, rgba(255, 215, 0, 0.06), transparent 70%);
        border-radius: 28px;
        box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd75e 0%, #e6a817 100%);
        color: #1b1730;
        border-radius: 999px;
        box-shadow: 0 6px 20px rgba(230, 168, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 24px;
        box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.5);
        transition: background 0.35s ease, box-shadow 0.35s ease, border-radius 0.35s ease;
    }
}

But wait: the rule 1 background radial-gradient might create a faint glow. That's nice. However, if the column has no explicit height, background might just be as tall as content. Fine.

We should consider that `.col-lg-7` is a grid column. Adding border-radius and background might make it look like a card. But if the parent row has a background, this may create a visible panel. Good.

We can also add `outline` to cards? Maybe not needed.

Let's check the "centered-stage" palette: dark stage #0f0f1a. Our card background is rgba(255,255,255,0.04) which is subtle on a dark background. But we don't set the base background. If the page background is dark, this works. If not, it may not. But we cannot add `:root` or body. However, we can set `background-color` on the `contact-quick-section .contact-card`? That is set to transparent? Actually we're setting background to a semi-transparent white, which over any base will be lighter. That's okay.

But to adhere to "dark stage #0f0f1a", perhaps we want to add `background-color` to these cards? But a semi-transparent white over a dark page yields a subtle lighter card. If the page is light, it would be barely visible. But we don't know. Maybe we should use a more opaque background like `rgba(15, 15, 26, 0.85)`? But then the card would be dark, with gold accents. That might be more "spotlight". Since the target is centered-stage with dark stage, we can make cards dark with gold accents. So `background: rgba(15, 15, 26, 0.8);` plus a border or outline in gold. But if the page is light, dark cards will stand out. Let's use a deep purple/gold gradient? Hmm.

Let's choose a fresh palette: background dark indigo `#141424`, cards with `background: linear-gradient(145deg, #1e1e30, #141424)`, border-radius 24px, box-shadow with gold tint. That would be distinct.

But we need to be cautious: adding a dark background to a card could hide content if text is dark. But likely text is light. Hmm.

Given "centered-stage", the content area is bright. Actually the target description says: "Spotlight feel: dark stage #0f0f1a, bright content area". So maybe the columns/cards should be bright? Or the text bright. Let's interpret: dark background, content area bright (like a spotlight on stage). So cards might be bright (white/light) with dark text. But then adding dark background would contradict. The original is mobile, small screen. Let's see: `.app-hero-section .badge.bg-warning` is a warning badge, usually yellow background. We can make it gold. The hero column: we can make text gold/light on dark. The contact cards: they might be cards on a dark background, so making