/* ============================================================
   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 the file `assets/css/saishi.css` (block 2/2) in a conservative mode. The original CSS is a media query with three rules:

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

Now, I need to refresh this CSS visually while keeping all selectors and layout exactly as-is. The target style is "centered-stage" with "airy-rhythm" effect variant. But the original CSS only has a media query with a few rules. Since I'm in conservative mode, I can only change colors, shadows, radius, transitions, gradients, etc. But I cannot change layout (padding, margin, text-align, font-size, etc.).

Wait, let me re-read the original CSS:

1. `.app-hero-section .row .col-lg-7` — `text-align: center;` — text-align is a typography property that is listed under "📐 LAYOUT" as "text-align, vertical-align" — so I cannot change it. Actually, in the "never change" list, it says "text-align, vertical-align" under typography? Let me check: 

The "📐 LAYOUT (HTML cannot adapt to changes)" section lists:
- display, position, grid-template-*, etc.
- width, height, padding, margin (keep similar values, ±20% maximum)
- gap, row-gap, column-gap
- justify-content, align-items, align-self
- float, clear
- z-index, overflow
- box-sizing
- visibility
- aspect-ratio
- object-fit, object-position
- text-align, vertical-align

Yes, text-align is in the LAYOUT section, so I cannot change it. The original sets `text-align: center` — I must keep it.

2. `.app-hero-section .badge.bg-warning` — `font-size: 0.85rem;` — font-size is in the "📝 TYPOGRAPHY" never-change list. So I must keep it.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — `padding: var(--space-md) !important;` — padding is in the LAYOUT section, keep within ±20%. Since it uses a CSS variable `var(--space-md)`, I should keep it the same? Or can I change the variable? The instructions say I can change CSS custom properties (--color-*, --shadow-*) values. But `--space-md` is a spacing variable, not a color/shadow variable. I should not change it because padding is in the layout section. So I must keep `padding: var(--space-md) !important;`.

Hmm, so the original CSS only has layout/typography rules that I cannot change. What can I change then?

Wait — this is block 2/2, so perhaps there's a block 1 that contains the actual CSS with colors. But I only have this block. The instructions say "Refresh the visual identity WITHOUT changing layout structure or class names." But this specific media query only has layout/typography declarations. 

Since I cannot change those declarations, maybe I need to add new declarations to these selectors that are visual-only (color, background, border, shadow, radius, etc.). But the instruction says "Only change colors, shadows, radius, transitions, gradients." — it doesn't say I can add new properties. Actually, let me re-read the task:

"Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

So I'm allowed to change only those properties. If the original declarations are text-align, font-size, and padding, none of those are in the allowed-change list. So I cannot change them.

Hmm, but that would mean the output is identical to the input. That doesn't make sense. Let me re-read the original CSS more carefully.

The original is:

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

It's a small media query. The visual refresh might involve adding new visual declarations to these selectors, or changing values that are visual inside these rules. But there are no color/shadow/radius/transition/gradient values in these rules.

Maybe the intent is that the entire file (block 2/2) contains this media query, and the visual refresh should be applied by adding/adjusting visual properties. Since the instructions say "Only change colors, shadows, radius, transitions, gradients" — I think I'm allowed to add new declarations of those types to these selectors, as long as I don't remove existing layout/typography declarations.

Actually, the instruction says "Refresh this CSS visually" ... "Only change colors, shadows, radius, transitions, gradients." This could be interpreted as: the changes I make must be limited to those categories. So I can add new visual properties to these existing selectors to achieve the "centered-stage" / "airy-rhythm" style.

But wait — the target style says "Layout pattern (Aggressive only)" — meaning that layout changes are only allowed in aggressive mode. In conservative mode, I shouldn't make layout changes. The target style is just for inspiration. The "effect variant" airy-rhythm mentions "Generous spacing (Aggressive: padding 32-56px, gap 32-48px)" — but that's aggressive. In conservative mode, I should not change padding.

So in conservative mode, my job is limited to color/shadow/radius/transition/gradient changes. Since the original has none, I need to add them in a way that enhances the visual identity without breaking the layout.

Let me think about what to add:

1. For `.app-hero-section .row .col-lg-7` in mobile: text-align is center. I could add a color, maybe a text-shadow for the heading? Or something.

2. For `.app-hero-section .badge.bg-warning`: this is a badge with Bootstrap's bg-warning class. In mobile, font-size is 0.85rem. I could add a background gradient, a box-shadow, border-radius, etc. But bg-warning already has a background. I can override with a custom gradient.

3. For `.contact-channels-section article, .contact-quick-section .contact-card`: padding uses var(--space-md). I could add a border-radius, box-shadow, background, transition, etc.

But I need to be careful: the selectors are inside a media query `(max-width: 575.98px)`. These styles apply only on small screens. Adding box-shadows and background colors there might be fine.

The target style is "centered-stage": dark stage #0f0f1a, bright content area, premium gold or deep purple accent. The airy-rhythm variant: large border-radius (16-28px), soft pillowy shadows, breathing room everywhere.

So I could:

- For the hero col-lg-7: add a subtle text-shadow or color? Actually, text-align center is there. I could add a `color`? But hero section likely has its own color. Hmm.

Wait — I need to think about this differently. The task says "conservative mode" and "HTML fixed, visual changes only." The output must be the rewritten CSS. Since the original declarations are all in the "never change" category, the only way to refresh is to add new visual declarations. Perhaps the original file had more blocks, and this particular block is just a media query. The "block 2/2" suggests the file has two blocks, and this is the second.

Given the constraints, I'll add visual-only declarations to each existing rule:

1. `.app-hero-section .row .col-lg-7` — add `text-shadow: 0 2px 20px rgba(...)`? But this might affect readability. Actually, text-shadow is a decorative property I can change. But the hero section on mobile — adding a text shadow could be okay. However, I should be careful not to overdo it.

2. `.app-hero-section .badge.bg-warning` — The badge has `bg-warning` which is Bootstrap's warning yellow. I can override with a premium gold gradient. Add `background: linear-gradient(...)`, `border-radius`, `box-shadow`, `transition`.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — add `border-radius`, `box-shadow`, `transition`, `background` maybe.

But wait — the instruction says "Only change colors, shadows, radius, transitions, gradients." Adding a `background` — is that a color? Background is a color-related property; the instruction says "All color values: background, color, border-color, fill, stroke, outline-color". So yes, background is in the colors category. Adding background is allowed.

Let me also consider: the instruction says "transition timing, easing, duration" can change. So adding `transition` to selectors is allowed.

Let me think about what fits the brand new visual identity:

- Center-stage: dark stage #0f0f1a, bright content area, premium gold/deep purple accent.
- Airy rhythm: large border-radius (16-28px), soft pillowy shadows.

Since this is a mobile media query, I want the mobile experience to feel consistent with the new identity.

Let me craft the new CSS:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #ffffff;
        text-shadow: 0 2px 24px rgba(15, 15, 26, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f7d774 0%, #d4af37 100%);
        border-radius: 999px;
        box-shadow: 0 4px 16px rgba(212, 175, 55, 0.35);
        transition: box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.04);
        box-shadow: 0 12px 32px rgba(15, 15, 26, 0.18);
        transition: box-shadow 0.4s ease, background 0.4s ease;
    }
}
```

Hmm, but the target style says "dark stage #0f0f1a, bright content area." On mobile, maybe the hero section has a dark background. Adding `color: #fff` to the hero col might be okay, but I'm not sure of the existing color. In conservative mode, I should minimize risk. Adding a `color` could clash with existing styles. But it's within the "colors" category, so I can change it.

Let me think about whether I should add or change. The instruction: "All color values: background, color, border-color, fill, stroke, outline-color" — these are the properties I can change. Since the original doesn't have them, adding them is a "change" from not having them to having them. That's fine.

But there's a risk: `text-shadow` on the hero col might affect readability, but on mobile it's usually fine with a subtle shadow. I'll use a soft shadow.

For the badge: The original has `bg-warning` class. Bootstrap's `.bg-warning` sets `background-color: #ffc107 !important` (or similar). To override, I need `background: linear-gradient(...)` which will override the background-color because it's a shorthand and the specificity is the same as `.bg-warning` (single class) but my selector is `.app-hero-section .badge.bg-warning` which has higher specificity (3 classes), so it will override. Good.

But wait — Bootstrap's `.bg-warning` often uses `!important`. Actually, in Bootstrap 5, `.bg-warning` is `background-color: #ffc107 !important;`. My rule doesn't have `!important` on the background, so with lower specificity? Actually, `.app-hero-section .badge.bg-warning` has specificity of 3 classes (0,3,0) vs Bootstrap's `.bg-warning` which is (0,1,0). So mine wins regardless of `!important` (unless Bootstrap also uses `!important`, in which case `!important` overrides specificity). In Bootstrap 5, `.bg-warning` is indeed `background-color: #ffc107 !important;`. To override it, I need `background: ... !important` or a more specific `!important` rule. Let me add `!important` to be safe? But the instruction says to keep selectors exactly, and I can add `!important`? The original rule for `.badge.bg-warning` has `font-size: 0.85rem;` without `!important`. Adding `!important` to my new background would be a value change, not a selector change. I think it's allowed. But to be safe, I'll use `background-image` or `background` with `!important`.

Actually, let me check: Bootstrap 5.3 uses:
```css
.bg-warning {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}
```

So it sets `background-color` with `!important`. To override, my rule needs `!important` too, because `!important` declarations with higher specificity win. My selector has higher specificity, so even with `!important`, mine wins. Actually, when both have `!important`, the one with higher specificity wins. My selector `.app-hero-section .badge.bg-warning` (0,3,0) beats `.bg-warning` (0,1,0). So my `background: ... !important` would win. Even without `!important`, a normal declaration cannot beat an `!important` declaration. So I must add `!important` to override Bootstrap's `!important`.

So badge: `background: linear-gradient(135deg, #f7d774, #d4af37) !important;`

And I'll add `border-radius: 999px;` — but Bootstrap badge already has `border-radius: 0.375rem` (or `--bs-border-radius-pill` if it's pill). Actually, `.badge` in Bootstrap has `border-radius: 0.375rem`. The `.rounded-pill` class would make it pill. Adding `border-radius: 999px` would make it a pill. That fits airy rhythm.

For the contact cards: adding background, border-radius, box-shadow, transition. The background `rgba(255,255,255,0.04)` on a dark page would give a subtle card look. But since the page might not be dark, maybe I should use a different background. Hmm, the target palette is "dark stage #0f0f1a, bright content area." Let me assume the mobile page has a dark-ish background or a light one. To be safe, I'll use a soft white/dark shadow. Actually, adding a background could be risky. But the instruction allows changing colors. Let me use a very subtle background so it won't clash: `background: rgba(255, 255, 255, 0.02);` — almost transparent. Or I could add `border: 1px solid rgba(255,255,255,0.08)` — border-color is in the allowed list.

Actually, let's think about the "centered-stage" style — deep purple accent. Maybe use a deep purple for the contact cards' shadow, or a gold accent for the badge.

Let me also consider transition: airy-rhythm means smooth transitions. I'll add transitions to cards for hover effects.

Now, let me also handle the `.app-hero-section .row .col-lg-7` rule. The original only has `text-align: center`. I can add `color` and `text-shadow`. But what color? The hero section likely already has a title color. Changing it could be problematic. However, the instruction says colors are allowed to change. To align with the "centered-stage" style, I could set a deep purple color or a soft white. But the hero section's background is unknown.

Hmm. Since this is a mobile-only media query, maybe the hero section is already styled. I'll add a subtle `text-shadow` only, and leave `color` unchanged. Actually, the instruction says I can change color values, but I don't have to change everything. For a conservative refresh, adding a subtle text-shadow is safe.

But wait — if I add `text-shadow` to the whole `.col-lg-7`, it might affect the paragraph text too. A large soft shadow might look bad on body text. Better to be subtle: `text-shadow: 0 2px 16px rgba(15, 15, 26, 0.15);`.

Alternatively, I could use `color: #2a1a5e;` — a deep purple for the hero text on mobile. But if the background is dark, this would be unreadable. Too risky.

Let me reconsider. The safest approach: leave the first rule as-is because it's pure layout/typography. But then I'm not changing anything in that rule. However, the task says "Refresh this CSS visually." Maybe the visual refresh is primarily in the other two rules, and the first one just stays unchanged because there's nothing visual to change. But I can still add a visual property.

Let me look at the bigger picture: This is "block 2/