/* ============================================================
   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 refresh the CSS in a "centered-stage" style with "glow-effects" variant. The original CSS is a media query with three rules. I need to keep all selectors exactly, keep layout properties (like text-align, padding) as-is or within ±20%, and change visual properties like colors, shadows, radius, transitions, gradients.

Let me analyze the original CSS:

```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 breakpoint must stay `(max-width: 575.98px)`. Selectors must stay exactly.

Now, what visual properties can I change?

1. `.app-hero-section .row .col-lg-7` — has `text-align: center`. This is a layout/text property, but text-align is listed under "Typography" as not to change (text-align, vertical-align). Actually the "NEVER CHANGE" list includes `text-align`. So I must keep `text-align: center`. But I can add visual properties like color, text-shadow, etc. But wait — text-align is the only property there. Can I add properties? The task says "Only change colors, shadows, radius, transitions, gradients." Adding properties could change layout? Adding color/text-shadow doesn't change layout. But safe to add? The instruction says keep all selectors and layout exactly. Adding a color property doesn't affect layout. But the goal is to refresh visual identity. I could add a text-shadow to the heading area? Hmm, but `.col-lg-7` is a column containing hero content. Adding a text-shadow to the whole column might be weird but visually impactful. However, the instruction says "Only change colors, shadows, radius, transitions, gradients." So adding these properties is allowed as long as layout is unchanged.

But caution: the original only has three declarations. To refresh visually, I should probably add properties that fit the "centered-stage" and "glow-effects" theme. However, this is a media query for small screens (max-width 575.98px). I shouldn't change breakpoint.

Should I preserve the exact declarations and just add visual ones? Let me think about the target style:

- Dark stage #0f0f1a — but this is a small-screen override. Setting a dark background on these elements could be a visual refresh. But adding background could be risky? Background doesn't affect layout. It's allowed (color values can change, and we can add colors).

- Premium gold/deep purple accent.

Wait, the mode is CONSERVATIVE: "HTML fixed, visual changes only". The "Target style" says "Layout pattern (Aggressive only)" — hmm, it says Aggressive only but we're in conservative mode. Actually the prompt says "Layout pattern (Aggressive only):" meaning the layout pattern is described for the aggressive mode? But we're in conservative mode, so we should NOT change layout. We only use the color palette and effect variant.

So we should:
- Keep `text-align: center` exactly.
- Keep `font-size: 0.85rem` exactly.
- Keep `padding: var(--space-md) !important` exactly.

But then what do we change? There are no color properties in the original! Hmm. This is a common issue: the media query only adjusts layout. To satisfy the task, I need to add visual properties to these selectors while keeping existing ones.

Let me consider: The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." So I can add color/background/shadow/radius/transition/gradient declarations to these rules. That won't change layout.

For the centered-stage glow effects:

1. `.app-hero-section .row .col-lg-7` — Since it's centered content on mobile, I can add a text-shadow or maybe a subtle radial gradient background? But a whole column with a background could look odd. Maybe add `text-shadow: 0 0 24px rgba(212, 175, 55, 0.4);` to give a glow to the heading text. Also maybe `color: inherit`? No, adding a color could override inherited colors. Actually, changing `color` would change text color. But the hero section text color is set elsewhere; on mobile it might be inherited. Adding a color here could be a visual refresh. But it might be risky since we don't know the original color. However, the task says change color values. In conservative mode, I should probably not add properties that could conflict? But the task explicitly says "Only change colors, shadows, radius, transitions, gradients" — while keeping the existing declarations. Adding new declarations of those types is within scope.

For the badge:
2. `.app-hero-section .badge.bg-warning` — background color warning is a Bootstrap utility class. The class is `.bg-warning` which sets background. The selector targets the badge element. If I add `background` here, it would override Bootstrap's utility (depending on specificity). `.app-hero-section .badge.bg-warning` has higher specificity than `.bg-warning`, so it would override. That's a visual refresh! I can make it a gold/purple accent with glow. Also add `box-shadow: 0 0 24px rgba(212, 175, 55, 0.4);` and maybe `border-radius` to alter pill shape? But border-radius on a badge is typical. Bootstrap badge has `border-radius: 0.375rem` or pill if `.rounded-pill`. Changing radius to 8-16px could be nice. Let's add `border-radius: 10px;` or `999px`? Target style says medium radius (8-16px). So `border-radius: 10px;`.

Wait, but the class is `bg-warning` — originally yellow. For a premium gold accent, I could set `background: linear-gradient(135deg, #d4af37, #b8860b);` or just `background-color: #d4af37`. But Bootstrap `.bg-warning` sets `background-color` via CSS variable? Actually Bootstrap 5 sets `--bs-warning` and `.bg-warning { background-color: var(--bs-warning) !important; }`? Hmm, Bootstrap utilities have `!important`. Our rule would need `!important` too to override. Actually, `.bg-warning` in Bootstrap is `.bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; }`. So to override, we need `!important` on our background or the same specificity with later order won't beat `!important`. We can add `background: ... !important;` but the instruction says keep padding `!important`; we can add our own `!important`. That is fine.

But wait — the instruction says "NEVER CHANGE: border-width" and so on, but we can change border-color, border-style, radius. Adding a background with `!important` is fine.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — These have padding. I can add glow shadows, border-radius, background gradients, transitions. Maybe `box-shadow: 0 8px 32px rgba(15, 15, 26, 0.4);` and hover? But this is inside a media query for small screens. Adding a hover style inside a media query for phones is okay but hover doesn't apply on touch. Still fine.

However, adding `:hover` pseudo-class would change selectors? The instruction says keep pseudo-classes exactly as-is. Since the original doesn't have `:hover`, adding `:hover` would be adding a new selector — the rule says "Selector lists (commas)" and pseudo-classes — I think adding a new selector is against "only rewrite this CSS preserving all selectors". It says "Every selector character-for-character preserved?" So I should NOT add new selectors like `:hover`. I can only add declarations to existing selectors.

Also, transitions: I can add `transition` declarations inside existing rules. That's valid.

Let me think about what best fits the "centered-stage" and "glow-effects" style while being conservative:

The media query targets mobile portrait. The target style wants:
- Dark stage #0f0f1a, bright content area.
- Premium gold or deep purple accent.
- Glow shadows: 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 adding `@keyframes` would require a keyframe name — that's allowed? It says "@keyframes names (values inside CAN change)". If original has no keyframes, adding new @keyframes could be considered adding structure. The instruction says output rewritten CSS, keep all selectors exactly. Adding @keyframes is not a selector in that sense, but it's new. To be safe, I might avoid adding new @keyframes. But the effect variant explicitly mentions "Subtle pulsing animations." Hmm.

I could add an animation using an existing keyframe? But I don't know any existing keyframes. Adding a new `@keyframes glowPulse` would be harmless to layout. The instructions say "@keyframes names (values inside CAN change)" — meaning if they exist, I can change them. It doesn't explicitly forbid adding new ones. But the "SELF-CHECK" says "Every selector character-for-character preserved?" — @keyframes selectors are keyframe selectors (from, to, percentages). Adding new @keyframes doesn't alter existing selectors. I think it's acceptable, but given conservative mode, I'll be cautious. The task says "Only change colors, shadows, radius, transitions, gradients." Animation is not listed; the variant mentions pulsing animations but the allowed changes list doesn't include animation. Actually it says: "✅ YOU MUST CHANGE (visual identity only): ... transition timing, easing, duration ... filter, backdrop-filter ... opacity". Animation isn't in the list. So I should NOT add new animations. I can add transitions though (transition is listed).

Let me craft the new CSS:

For `.app-hero-section .row .col-lg-7`:
- Add `color: #f5f2e8;`? Hmm, if the hero section already has dark text, forcing light text might break readability. But the target palette says "dark stage #0f0f1a, bright content area". On mobile, the hero column centered — maybe adding a subtle glow text-shadow in gold. But setting a color could be risky. The task says to change colors throughout the file with a fresh palette. Since there are no colors in the original, I should introduce the fresh palette. Given the hero section likely has its own colors defined elsewhere, adding a `color` here with higher specificity (`.app-hero-section .row .col-lg-7` is fairly specific) would override. But is that desirable? The target says "Spotlight feel: dark stage #0f0f1a, bright content area". So maybe setting the hero content area color to gold-tinted light is on-brand. However, this is a mobile-only media query. In the original, only text-align is set here, suggesting the hero column doesn't need color changes on mobile. Adding a color might alter appearance on mobile only, creating inconsistency between desktop and mobile. But the task is to refresh visual identity; maybe they want mobile to look different.

Hmm. Since the media query is for mobile, and the style is "centered-stage" with glow effects, I can add:
- `text-shadow: 0 0 24px rgba(212, 175, 55, 0.35);` — glow on the text. This won't change color, just adds a glow halo around the hero title text. Since the column contains heading, this creates a nice spotlight glow. But text-shadow on a flex column with multiple elements: it will apply to inherited text? text-shadow inherits! Yes, text-shadow is inherited. So all text inside the column would get a gold glow. That matches "glow-effects". Nice.

- Maybe `background: radial-gradient(...)` — but a background on the column could be heavy. Could do a soft radial spotlight: `background: radial-gradient(circle at center, rgba(212, 175, 55, 0.12), transparent 70%);` This creates a spotlight glow behind the centered text. That's a color/gradient change, no layout effect. But background on a column might span full width; with a radial gradient it's fine and subtle. I'll consider adding it. But the column is inside a row with gutters; a background might create a visible box. To keep it subtle, I'd use a very low opacity. Or skip. The safer visual refresh is text-shadow and maybe `backdrop-filter`? No.

Let me decide: Add `text-shadow: 0 0 24px rgba(212, 175, 55, 0.35);` to `.app-hero-section .row .col-lg-7`. Also maybe add `color: #f8f4e6;`? Hmm. The hero section on mobile — the target palette says bright content area on dark stage. If I set the column text to light gold-white, but the section background is still light, it becomes invisible. So I shouldn't set color unless I also set background. Since this is just the column, setting a dark background for the whole column could be okay, but would it look like a card? The hero section background is probably set elsewhere. To be safe, I will NOT add a `color` or `background` that could conflict with the existing design. Instead, I'll add a soft glow text-shadow and maybe a subtle radial gradient background that works on both light and dark backgrounds? A gold glow at 0.12 opacity over a light background is barely visible; over dark it's visible. Hmm.

Given the target palette "dark stage #0f0f1a, bright content area," maybe the entire hero section is already dark (common for hero). In that case, a gold text-shadow glow is perfect and doesn't change the text color. I'll go with that.

Actually, I could add `text-shadow: 0 0 18px rgba(168, 85, 247, 0.35), 0 0 32px rgba(212, 175, 55, 0.2);` — mix purple and gold.

For `.app-hero-section .badge.bg-warning`:
- This badge is inside the hero. Override background to a premium gold gradient: `background: linear-gradient(135deg, #d4af37, #9333ea) !important;` Hmm, mixing gold and purple might be too much. Maybe deep purple to gold. Let's use a gold gradient with glow:
  `background: linear-gradient(135deg, #f0c75e 0%, #d4af37 50%, #9a7b1e 100%) !important;`
- Add `box-shadow: 0 0 24px rgba(212, 175, 55, 0.45);`
- Add `border: 1px solid rgba(255, 255, 255, 0.35);` — changes border color/style, not width. But the badge might not have a border; adding `border: 1px solid ...` changes border-width from 0 to 1. The instruction says never change border-width, but adding a border where none existed? That changes layout slightly (adds 1px). Hmm. "border-style" can change, "border-color" can change, but "border-width" cannot. Adding a border where none exists effectively changes border-width from 0 to 1. To respect that, I should avoid adding borders. Or use `outline`? Outline doesn't affect layout. I could add `outline: 1px solid rgba(255,255,255,0.35); outline-offset: 2px;` But the original didn't have outline. Adding an outline doesn't affect layout (outline is drawn outside, no layout impact). But the allowed changes list includes "outline styles (color, type)" — yes, I can add outline. But is adding outline a "change" of outline styles? It's adding a property. I think it's acceptable. However, "never change" doesn't mention outline-width explicitly; it lists "outline styles (color, type)" as allowed to change. Adding an outline could be fine but might look weird. I'll skip borders/outlines to be safe.

- Add `border-radius: 12px;` — medium radius, within 8-16px. It's a badge, so making it slightly rounded rectangle instead of pill. Good.
- Maybe add `transition: all 0.3s ease;`? On a badge, not very useful, but fine.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- Add `background: linear-gradient(145deg, rgba(15, 15, 26, 0.03), rgba(212, 175, 55, 0.06));` — subtle. But background on an article/card could conflict with existing background. Since these elements likely have their own backgrounds, adding a gradient with low opacity over could be okay but might look dirty. Alternatively, use `box-shadow` for a glow/raised effect:
  `box-shadow: 0 8px 24px rgba(15, 15, 26, 0.12), 0 0 24px rgba(212, 175, 55, 0.08);`
- Add `border-radius: 14px;` — medium radius. But if the cards already have border-radius, changing to 14px is a refresh. Good.
- Add `transition: box-shadow 0.35s ease, transform 0.35s ease;` — wait transform is a layout property? Actually transform is a visual property, but the instructions list under "NEVER CHANGE" includes... let me check: it doesn't list transform. But it says layout properties like