/* ============================================================
   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 the CSS in a conservative mode, keeping all selectors and layout properties exactly the same, but refreshing visual identity (colors, shadows, radius, transitions, gradients, etc.). The target style is "centered-stage" with glow effects.

The original CSS is quite minimal:

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

Wait — this is inside a media query. The selectors are:
1. `.app-hero-section .row .col-lg-7` — with `text-align: center`
2. `.app-hero-section .badge.bg-warning` — with `font-size: 0.85rem`
3. `.contact-channels-section article, .contact-quick-section .contact-card` — with `padding: var(--space-md) !important`

But the task says I can only change visual properties: colors, shadows, radius, transitions, gradients. The existing properties are:
- `text-align: center` — this is a layout/typography property. Text-align is in the "DO NOT CHANGE" list: "text-align, vertical-align" under TYPOGRAPHY. So I can't change it.
- `font-size: 0.85rem` — font-size is in "DO NOT CHANGE" list. So I can't change it.
- `padding: var(--space-md) !important` — padding is in "keep similar values, ±20% maximum". So I can adjust within ±20% but maybe keep it.

Hmm, but the task says "Refresh this CSS visually." The original CSS has very few visual properties. In conservative mode, I must keep all selectors exactly, keep layout properties unchanged. Since the only properties present are text-align, font-size, and padding — none of which I'm allowed to change significantly — what can I do?

Wait, let me re-read the constraints:

✅ MUST CHANGE (visual identity only):
- All color values, box-shadow, text-shadow, border-radius, gradients, transition, filter, backdrop-filter, opacity, outline styles, border-color, border-style (NOT border-width), caret-color, accent-color, CSS custom properties (--color-*, --shadow-*) values.

🔒 NEVER CHANGE:
- Layout: display, position, grid, flex, width, height, padding/margin (keep similar ±20%), gap, justify-content, align-items, etc.
- Typography: font-family, font-size, font-weight, line-height, letter-spacing, word-spacing, text-transform, white-space, word-break.
- Also: text-align is listed under typography — but the rule says "text-align, vertical-align" — so text-align must not change.

So in the original CSS:
- `text-align: center` must stay.
- `font-size: 0.85rem` must stay.
- `padding: var(--space-md)` must stay (within ±20%).

But then what can I change? I could add new visual properties to the existing selectors! The instruction says "Refresh this CSS visually" — I can add color, box-shadow, border-radius, transition, etc. to the existing rules, as long as I don't break layout. Adding properties like `background`, `color`, `box-shadow`, `border-radius`, `transition` to these selectors would be allowed.

However, I need to be careful: adding `background` to `.app-hero-section .badge.bg-warning` might change the badge appearance. But `bg-warning` is a Bootstrap class typically (background-color: #ffc107). Adding a new background could override Bootstrap. But the target style is centered-stage with glow effects — dark stage, gold accent, glows.

Also, I could set CSS custom properties. The original CSS doesn't define any `--space-md` — that's presumably defined elsewhere. I shouldn't redefine `--space-md` because it might affect layout/padding values. Actually, `padding: var(--space-md)` uses a custom property. If I change `--space-md`, I'd change padding — but padding is in the ±20% limit. I could change it within 20%. But better not to touch it.

Hmm, but the task is odd: the snippet is tiny and mostly layout/typography. The conservative mode says I must keep all selectors and layout properties. Since the only existing declarations are non-visual (text-align, font-size, padding), maybe the intended action is to add visual properties like color, box-shadow, etc., while keeping the existing declarations.

Let me think about what "centered-stage" and "glow-effects" mean for this snippet:

Target style:
- Dark stage `#0f0f1a`, bright content area
- Premium gold or deep purple accent
- Glow shadows in accent color: `0 0 24px rgba(accent, 0.4)`
- Halo on hover: `0 0 32px rgba(accent, 0.6)`
- Medium radius 8-16px
- Subtle pulsing animations

But the selectors are within a mobile media query (max-width: 575.98px). Adding glow effects to the badge and contact cards could make sense. But I must not change the selectors.

Let me parse each rule:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }`
   - This is a column in a hero section. Text-align is center. I can't change text-align. I could add `color`, maybe. But the hero section text color — if I set color here, it would affect the text. In a centered-stage style, content area is bright, text is dark on bright background. But the dark stage is the background of the whole page. Hmm.

   Actually, adding properties to this rule could be risky because `.col-lg-7` is a generic Bootstrap column. Adding color or background here could affect layout indirectly (background doesn't affect layout). But it could override other styles. Since the task is to refresh visual identity, adding a `color` might be fine.

   However, I think the safest interpretation: The task expects me to output the same CSS but with visual properties added/changed. Since there are no color/shadow properties in the original, I need to add them. But I must be conservative — only add decorative properties.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }`
   - Badge with warning background (Bootstrap's `.bg-warning` = #ffc107 amber). Font-size stays. I can add `background`, `color`, `box-shadow`, `border-radius`, `transition`. The target style wants gold accent. So I could transform the warning badge into a gold/amber glowing badge. But `.bg-warning` background-color is set by Bootstrap with `background-color: #ffc107 !important`? Actually in Bootstrap 5, `.bg-warning` uses `--bs-warning-rgb` and `background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;` — with !important. So if I add a plain `background` declaration, Bootstrap's `!important` would win. To override, I'd need `!important` as well. Hmm, but I shouldn't need to make it a different color necessarily. The target is "premium gold" — #ffc107 is already amber/gold. I could enhance with a glow shadow and gradient.

   But if I want a deep purple accent, maybe change the badge to purple. But `bg-warning` is a utility class; changing its appearance might conflict semantically. However, the request is visual refresh, so it's fine.

   I should be careful with `!important` in the original for padding. The padding rule uses `!important`. I'll keep that.

3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }`
   - Contact cards. Padding stays. I could add `border-radius`, `box-shadow`, `background`, `border`, `transition`, `backdrop-filter`, etc.

The target style "centered-stage" is more about the overall page layout, but since this is a mobile media query snippet, I'll apply the glow effects to the elements present: badge and contact cards.

Now, how to handle the `--space-md` custom property? The padding uses `var(--space-md)`. I could define `--space-md` elsewhere but that's not in this snippet. I should not define it here because it would change padding (and might violate "keep similar values ±20%" if I set it far). I could keep the padding as is.

But wait — the instruction says "CSS custom properties (--color-*, --shadow-*) values" must change. `--space-md` is a spacing custom property, not color/shadow. So I shouldn't touch it. Good.

Now, the output should be the rewritten CSS. Since the original has a media query, I keep the media query. I keep selectors exactly. I keep text-align, font-size, padding. I add new visual declarations.

Let me design:

Color palette (centered-stage):
- Dark stage: #0f0f1a
- Bright content: #f8f9fc or #ffffff
- Premium gold accent: #f5b942 / #e8a33d / #ffc861
- Deep purple accent: #6c4ab6 / #7b5cd6

Glow effects:
- `box-shadow: 0 0 24px rgba(accent, 0.4)`
- Hover: `0 0 32px rgba(accent, 0.6)`
- Border-radius: 8-16px

The original snippet has no hover rules. I can add `@media (hover: hover)`? No — that would add a new media query and possibly change selectors? Actually, adding a new at-rule is adding structure. The instruction says "ALL selectors ... preserved" — adding new selectors isn't preserving; it's adding. But the task says "Output the rewritten CSS" with all selectors preserved. Adding new rules with hover states would introduce new selectors. Hmm.

Wait, re-reading the instructions: "Only change colors, shadows, radius, transitions, gradients." Transitions can be added. But adding hover pseudo-classes would change selectors. The instruction says "Pseudo-classes (:hover, :focus, ::before, ::after)" must keep exactly — meaning I can't add or remove pseudo-classes. So I cannot add a `:hover` rule. I must work within the existing selectors.

So for glow on hover, I can't add a hover rule. I can still add a transition so that when other hover styles elsewhere apply, the transition works. But within this snippet, no hover rule exists. I'll add transitions and static glow shadows.

The "halo on hover" variant can't be implemented without adding `:hover`. So I'll skip that and stick to static glow shadows with medium radius.

"Subtle pulsing animations" — I could add an `animation` property? Animation names must be defined via @keyframes. The rule says "@keyframes names (values inside CAN change)" — but there are no keyframes in the original. Adding a new @keyframes would add new structure. Is that allowed? The instruction says "No markdown fences, no explanations" and "Only the rewritten CSS, preserving ALL selectors and layout exactly." Adding new @keyframes doesn't change selectors — keyframes are not selectors. But it adds structure. Hmm.

The instruction: "🎬 ANIMATION & MEDIA: @keyframes names (values inside CAN change)" — this implies keyframes exist in the original. There are none. Adding new ones might be considered adding, not changing. Since the task explicitly says "Only change colors, shadows, radius, transitions, gradients," I should avoid adding animations/keyframes. Adding `transition` is allowed ("transition timing, easing, duration" must change, and transitions can be added). So I'll add transitions but no keyframes.

Now, what about the first rule `.app-hero-section .row .col-lg-7`? It has only `text-align: center`. What visual property can I add there? In a centered-stage design, the hero content is centered and bright on dark. I could add `color: #f8f9fc` to make text bright. But `.col-lg-7` contains the hero text; adding a bright color might be appropriate for a dark stage. But wait — the target style says "dark stage #0f0f1a, bright content area." The bright content area would have dark text on light background. Hmm, but the hero might be the dark stage itself. I'm not sure.

Actually, the "centered-stage" layout pattern says: "Centered content: max-width 720-960px, margin: 0 auto; text-align: center for headings; justify-content: center on flex; Symmetric large padding (60-100px top/bottom)". But I can't change layout properties. The original already has `text-align: center` for the hero column in mobile. So the centered-stage alignment is already there.

For the visual refresh, I think adding a gold glow to the badge, and giving contact cards a dark stage / glass effect with gold accents, would achieve the "glow-effects" variant.

Let me write the new CSS:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f0edf7;
        text-shadow: 0 0 18px rgba(108, 74, 182, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd98a 0%, #f0a832 45%, #c97b1e 100%);
        color: #1a0f02;
        border: 1px solid rgba(255, 217, 138, 0.6);
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(240, 168, 50, 0.45), 0 4px 14px rgba(0, 0, 0, 0.25);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(124, 92, 214, 0.35);
        border-radius: 16px;
        box-shadow: 0 0 24px rgba(108, 74, 182, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(10px);
        transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    }
}
```

Wait, but I added `background` to the badge, but Bootstrap's `.bg-warning` uses `!important`. Let me check: In Bootstrap 5, `.bg-warning` is defined as:

```css
.bg-warning {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}
```

So yes, it's `!important`. My plain `background` declaration won't override it. To override, I'd need `background: ... !important;` or use `background-color` with `!important`. But using `!important` in my output — is that allowed? The original uses `!important` for padding. I can add `!important` to override Bootstrap utilities. But the instructions say "border-color and border-style (NOT border-width)" can change; `background` is a color value, so I can change it. Adding `!important` is fine.

Alternatively, I could use the `background` shorthand with `!important`:

```css
background: linear-gradient(...) !important;
```

That would override. Let me do that to ensure the visual change takes effect. But wait — do I need to change the badge color? The original `.bg-warning` is amber. The target palette wants premium gold. Amber is close to gold. I could just enhance with a glow and gradient. But to truly refresh, let me make it a richer gold gradient.

Also for the badge, `border-radius` on a Bootstrap badge — Bootstrap badge default has `border-radius: var(--bs-badge-border-radius)` which is 0.375rem. I can change to 12px (0.75rem) — that's fine. But medium radius is 8-16px per the variant.

For the contact cards, adding `background` might override a Bootstrap card background. The selector `.contact-card` could be a custom class. Adding `background` is okay. But adding `backdrop-filter` might have performance issues but that's fine.

However, I'm concerned about the `.app-hero-section .row .col-lg-7` rule. Adding `color` might override the hero text color. In a dark stage design, the hero text should be light. Let me set `color: #f0edf7` and a subtle purple text-shadow. But text-shadow on a whole column might look odd. Maybe just `color` and the glow is enough. Actually, the variant says "Glow shadows in accent color" — text-shadow could be used. But a text-shadow on a large column of text might reduce readability. Let me keep it subtle: `text-shadow: 0 0 24px rgba(108, 74, 182, 0.35)` — but that's a lot for body text. Hmm.

Actually, maybe I shouldn't add anything to the first rule because the original only sets text-align (a typography/layout property) and the instruction says I should only change visual identity properties. Adding