/* ============================================================
   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;
    }
}

The user wants me to rewrite a CSS snippet from a file called `assets/css/saishi.css`. The original CSS is a media query block:

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

The target style is "centered-stage" with a "soft-shadows" effect variant. They want a dark stage (#0f0f1a), bright content area, premium gold or deep purple accent, soft multi-layer shadows, large border-radius, smooth transitions.

However, looking at this CSS, it's a media query with only three rules:
1. `.app-hero-section .row .col-lg-7` - text-align: center
2. `.app-hero-section .badge.bg-warning` - font-size: 0.85rem
3. `.contact-channels-section article, .contact-quick-section .contact-card` - padding: var(--space-md) !important

The constraints say:
- I can change: colors, box-shadow, text-shadow, border-radius, gradients, transition, filter, opacity, outline, border-color/style, caret-color, accent-color, CSS custom properties (values)
- I cannot change: selectors, display, position, grid-template-*, width/height/padding/margin (keep similar values ±20%), gap, justify-content, align-items, font-family/size/weight, line-height, etc.

Wait, there's a problem. The original CSS only contains a media query. There are no colors, shadows, or radius values to change in these rules. The rules only deal with:
1. `text-align: center` — this is a layout property (text-align is in the "do not change" list under typography/layout)
2. `font-size: 0.85rem` — font-size is in the "do not change" list
3. `padding: var(--space-md) !important` — padding is in the "keep similar values ±20%" list

So actually, none of the properties in this CSS can be changed according to the constraints. That's awkward. The instructions say to refresh the CSS visually, but the given CSS has no visual properties like color or shadow.

Hmm. Let me re-read the constraints.

The "NEVER CHANGE" list includes:
- padding, margin (keep similar values, ±20% maximum)
- text-align, vertical-align (under typography)
- font-size (under typography)

So the original CSS properties are all in the "do not change" category. But the task says "Refresh this CSS visually."

What can I do? I could:
1. Add new properties to the existing selectors (like color, box-shadow, border-radius, transition) without changing the existing ones. This would be adding visual properties that don't affect layout.
2. Keep the original rules intact and add visual properties.

Actually, in conservative mode, the goal is to preserve layout while changing visual identity. Since the original CSS has no visual properties, I can add visual properties to the selectors to achieve the "centered-stage" look and "soft-shadows" effect.

But wait — adding `box-shadow`, `border-radius`, etc. to these selectors might affect layout? Border-radius doesn't affect layout. Box-shadow doesn't affect layout (it's drawn outside but doesn't affect layout). Transitions don't affect layout. Colors don't affect layout.

However, I need to be careful. The selectors are:
- `.app-hero-section .row .col-lg-7` — this is a column that gets centered on mobile. Adding a color or text-shadow here would change its appearance.
- `.app-hero-section .badge.bg-warning` — a badge element. Adding colors, border-radius, box-shadow would be fine.
- `.contact-channels-section article, .contact-quick-section .contact-card` — content cards. Adding border-radius, box-shadow, transition, background would be fine.

But there's a risk: the original CSS only applies these rules within the media query `(max-width: 575.98px)`. If I add visual properties inside this media query, they'd only apply on mobile. That could be fine.

Also, the `--space-md` variable is referenced. I could potentially define `--space-md` but that's a custom property value change... but the value `var(--space-md)` is used as padding, and padding must stay similar. I shouldn't change the padding value.

Let me think about what "refresh visually" means here. The file is "assets/css/saishi.css" and this is "块2/2" (block 2 of 2). The original snippet is just the mobile media query. The task says "Only change colors, shadows, radius, transitions, gradients."

Given the constraints, the safest interpretation:
- Keep all three rules exactly as they are (text-align: center, font-size: 0.85rem, padding: var(--space-md) !important) because they're layout/typography.
- Add new visual declarations to the same selectors: color, background, border-radius, box-shadow, transition, etc.

But should I add properties? The constraint says "You MUST CHANGE (visual identity only): All color values, background, color, border-color..." — but there are no existing color values in this snippet. So there's nothing to change. However, the task explicitly says to refresh the CSS visually.

Another thought: maybe the task expects me to only output the rewritten CSS with the same structure, and since there are no visual properties, I just keep it as-is? But that would be weird.

Let me look at the "centered-stage" target:
- Dark stage #0f0f1a, bright content area
- Premium gold or deep purple accent
- Centered content: max-width 720-960px, margin: 0 auto — but I can't change layout properties like max-width? Wait, max-width is in the "do not change" list (width, height, min/max-width). So I can't add max-width.

The "soft-shadows" variant:
- Multi-layer soft shadows: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)
- Large border-radius (12-24px)
- Smooth transitions (0.3-0.5s ease)

I can add these visual properties to the selectors where appropriate.

Let me design:

1. `.app-hero-section .row .col-lg-7`:
   - Keep `text-align: center`
   - Could add `color: #f5e9d0` or something? But this is a column containing text; on mobile it centers text. Adding a color might be fine.
   - Actually, adding color to a container is risky if the original had specific colors on child elements... but in the context of this file snippet, we only see this rule. To be safe, adding color would be a change but might not be within scope since we can't see the full file. Hmm.

Actually, the instructions say "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." This means I should only modify what's there. If there are no colors/shadows/radius in the snippet, the cleanest approach is to add visual properties that align with the desired style.

But adding properties not present in the original could be considered going beyond "change" — it's "add". The instruction "You MUST CHANGE" refers to properties that exist. Since none exist, I think the spirit is to make the snippet reflect the new visual identity.

Let me consider a moderate approach:

For `.app-hero-section .badge.bg-warning`:
- This is a badge. In the original, it's a Bootstrap warning badge (yellow). The target palette is dark stage + gold/purple. A gold accent fits perfectly for `bg-warning`. I can add:
  - `background: linear-gradient(135deg, #f5c542, #d4a017)` — but `bg-warning` is a Bootstrap class that sets background; adding a background here would override it inside the media query. That's a color change.
  - `border: 1px solid rgba(212, 160, 23, 0.4)` — border-color change.
  - `box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)` — soft shadow.
  - `border-radius: 12px` — large radius.
  - `transition: all 0.4s ease` — smooth transition.
  - But wait, border-radius on a badge might make it pill-shaped or squircle. That's visual, allowed.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- These are cards. Adding:
  - `background: rgba(255, 255, 255, 0.03)` or a bright content area color? The palette says "bright content area" but the stage is dark. Let me use a soft light panel: `background: #1a1a2e` or `background: rgba(255,255,255,0.06)`.
  - Actually, "Spotlight feel: dark stage #0f0f1a, bright content area". So content cards could be bright: `background: #ffffff` with dark text. But we don't know the existing text color. Hmm.
  - Alternatively, cards get a subtle dark glass look: `background: rgba(255,255,255,0.04)`, `border: 1px solid rgba(255,255,255,0.08)`, `border-radius: 20px`, `box-shadow: soft multi-layer`, `transition: all 0.4s ease`.
  - But adding background/border to cards could be okay visually. However, if the original site is light-themed, a dark card background could break readability. Since the target is "dark stage #0f0f1a", I'll go with a dark-theme approach.

For `.app-hero-section .row .col-lg-7`:
- Keep text-align: center.
- Add `color: #f0e6d2`? That would set the text color on mobile. Risky but within "color" changes. Or add `text-shadow`? That's allowed. But adding a text-shadow to a whole column might look odd.
- Maybe just add nothing to this rule, or add `color: inherit`? That's pointless.

Given the conservative mode, maybe the safest is to:
- Keep all existing declarations unchanged.
- Add new visual declarations (background, border, border-radius, box-shadow, transition) to the badge and card rules.
- For the column rule, leave it as-is since the only property is text-align (cannot change).

But then the output would look like I barely changed anything. The instructions require "Every selector character-for-character preserved" and "Colors throughout the file replaced with fresh palette." There are no colors in the file. So maybe I should add colors.

Let me re-read: "✅ YOU MUST CHANGE (visual identity only): All color values, background, color, border-color, fill, stroke, outline-color; box-shadow; text-shadow; border-radius; gradient colors and stops; transition timing/easing/duration; filter; backdrop-filter; opacity; outline styles (color, type); border-color and border-style (NOT border-width); caret-color, accent-color; CSS custom properties (--color-*, --shadow-*) values."

This is a checklist of things I may change. It doesn't say I must add them. But the overall task: "Refresh this CSS visually."

I think the best approach:
1. Keep all original rules intact.
2. Add visual properties to the selectors to achieve the target look, but only within the media query since that's the context.
3. Be conservative: don't add layout properties.

Also, notice the padding rule: `padding: var(--space-md) !important`. Since --space-md is a custom property, I could define `--space-md` somewhere? But that could change padding on the cards. Padding change is limited to ±20%. If --space-md is defined elsewhere (likely in a :root rule), changing it would affect many elements across the whole file. That's too risky and out of scope for this snippet.

Alternatively, I could add a new custom property value like `--space-md: 1.5rem` — but that might alter padding beyond ±20% if the original was 1rem. Too risky. Skip.

So plan:

```css
@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;
        background: linear-gradient(135deg, #f7d774 0%, #d4a017 100%);
        border: 1px solid rgba(212, 160, 23, 0.35);
        border-radius: 14px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: all 0.4s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: all 0.4s ease;
    }
}
```

Wait, but adding `background: rgba(255,255,255,0.04)` to cards — if the original cards had a light background (#fff), this would make them nearly transparent, and the text (dark) would be unreadable on a dark page. But the target palette is dark stage, so presumably the full file is being converted to a dark theme. Since this is "block 2/2", the other block probably sets the dark theme. I'll align with the requested palette.

Actually, the target says "Spotlight feel: dark stage #0f0f1a, bright content area." So maybe the content cards should be bright (#fff) while the page background is dark. Let me use a bright panel for cards:

`background: #ffffff;` would give bright content area. But then text inside would need to be dark, which we can't control. Hmm.

Let me think about what "bright content area" means. In a spotlight design, the center content area is illuminated/bright, and the surrounding stage is dark. So cards could be bright with a glow. But to be safe, a soft luminous gradient might work: `background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03))`.

Alternatively, since the accent is gold/deep purple, I can give the cards a subtle purple-tinted glass background: `background: rgba(26, 26, 46, 0.6)` with a gold border. 

Actually the palette says "Premium gold or deep purple accent." Let me use gold as accent and dark purple background:

- Card background: `linear-gradient(145deg, #1c1c2e, #14141f)` — dark purple stage.
- Border: `1px solid rgba(212, 175, 55, 0.25)` — subtle gold.
- Badge background: gold gradient.
- Card shadow: soft multi-layer with a purple tint: `0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)` — but the variant specifies grayscale shadows. I can add a subtle gold glow: `0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12)`.

Let me check the constraints again on the specific properties I'm adding:
- `background` — allowed (color/gradient).
- `border: 1px solid rgba(...)` — border-width is 1px; the constraint says "NOT border-width" but also "border-color and border-style (NOT border-width)". So I shouldn't add border-width? Adding a border where none existed changes layout? Actually, adding a border adds to the box size (unless box-sizing: border-box). In the original, there's no border on these elements. Adding a border could affect layout by 1px per side. But the constraint says border-color and border-style can change; border-width cannot. If there was no border originally, adding a border with width 1px would add border-width. That's a layout change. Hmm.

To be safe, I should avoid adding `border` with a width if the original had no border. Instead, I could use `box-shadow` to create a border-like effect: `inset 0 0 0 1px rgba(...)`. Box-shadow doesn't affect layout. That's a clever way to add a visual border without layout impact.

So for cards: `box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.2), 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);` — inset ring plus soft shadows. That's fully within box-shadow redesign.

For the badge: instead of adding a border, use inset ring in the box-shadow too. Badge already has Bootstrap's