/* ============================================================
   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 with a fresh visual identity. Let me analyze the original CSS first:

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

This is a media query with three rules. The target style is "centered-stage" with "glow-effects". Let me think about what I can change:

1. `.app-hero-section .row .col-lg-7` - has `text-align: center` (layout, keep). I could add color, text-shadow, etc.
2. `.app-hero-section .badge.bg-warning` - has `font-size: 0.85rem` (keep). I could change background-color, color, border-radius, box-shadow.
3. `.contact-channels-section article, .contact-quick-section .contact-card` - has `padding: var(--space-md) !important` (layout, keep within ±20%). I could add background, border-radius, box-shadow, border, etc.

I need to preserve selectors, layout, and typography exactly. But I can add visual properties. Let me create a "centered-stage" feel with dark stage #0f0f1a, gold/purple accent, glow effects.

But wait — this is only a small fragment. I must only output the rewritten CSS. Since it's a media query for max-width 575.98px, I need to be careful about what visual changes make sense there.

Let me think about what to change:

For `.app-hero-section .row .col-lg-7`:
- Keep text-align: center
- Add color, text-shadow maybe? But that might affect descendants. Since it's a column, adding color would inherit. That's a visual change. Could add text-shadow for a glow effect on text. But this could be risky since it inherits. Still, the task says refresh visual identity. Let me add a subtle text-shadow for headings? Actually the selector targets the column (col-lg-7), which contains hero content. Adding text-shadow there might apply to all text inside. That's acceptable if the target style includes glow.

Hmm, but "text-shadow" is allowed to change. I could add a soft glow text-shadow. But I need to be cautious — it inherits to all children. For a hero section, that could look nice.

For `.app-hero-section .badge.bg-warning`:
- The class `bg-warning` is a Bootstrap class that sets background-color to warning yellow. But since we're re-skinning, I can override with our own background. Keep font-size. Change background-color, color, border-radius, box-shadow, border, etc.
- The target palette: premium gold accent. So the badge could be gold with dark text, glow shadow.

For the contact cards:
- Keep padding var(--space-md) !important. I can add background, border-radius, box-shadow, border, transition.

But wait — this is inside a media query for small screens. Adding backgrounds, shadows, radius etc. is fine.

Also, I need to consider the target style "centered-stage" — dark stage #0f0f1a, bright content area, gold accent. However, I should not change layout. I could set `background-color` on the hero column? Actually the col-lg-7 could get a dark stage background? That might change too much. Hmm.

Let me re-read: "Only change colors, shadows, radius, transitions, gradients." and "Colors throughout the file replaced with fresh palette." The original file barely has any colors. So I'm adding colors.

I must preserve all selectors exactly. So I cannot add new selectors. I can only add declarations inside existing rules.

Let me write:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #d4af37, #f7e08b);
        color: #0f0f1a;
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(212, 175, 55, 0.45), 0 4px 14px rgba(15, 15, 26, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.25);
        padding: 0.35rem 0.85rem;
        transition: box-shadow 0.35s ease, transform 0.35s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 16px;
        box-shadow: 0 0 24px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(6px);
        transition: box-shadow 0.4s ease, background-color 0.4s ease;
    }
}
```

Wait — padding on badge: the original didn't have padding on badge. Adding padding is a layout change? The rules say padding/margin keep similar values ±20% maximum. Original badge had no padding — Bootstrap's `.badge` has its own padding. By adding padding, I'm changing the badge's spacing. That could be considered a layout change. But it's a small decoration. Hmm, risk. Better avoid adding padding where there was none, to be safe. Or I could keep it minimal. Actually "padding, margin (keep similar values, ±20% maximum)" — original has no padding declaration, so adding one is risky. I'll avoid adding padding to the badge.

Also adding `transform` transition — transform is allowed? The forbidden list includes flex properties, but transform is not listed. Animations/transitions can change. So `transition: transform` is ok, but I won't change transform itself. Actually I could add a hover transform, but no hover selector exists in the media query. I can't add new selectors. So no hover effects on the badge unless there's an existing hover rule elsewhere. This is only a fragment, though.

Actually wait — can I add new selectors? The instructions say "Selectors: keep EXACTLY" and "Every selector character-for-character preserved?" That means I can't add or remove selectors. So I can only decorate within existing rules.

Also, I should be mindful: backdrop-filter on contact cards inside a media query for small screens — that's fine, but might be performance heavy. Still fine.

Let me reconsider the palette and style:

Target: "centered-stage" — dark stage #0f0f1a, bright content area, premium gold or deep purple accent.
Effect variant: "glow-effects" — glow shadows 0 0 24px rgba(accent, 0.4), halo on hover (but no hover selectors here), medium radius 8-16px.

So I'll use gold accent `#d4af37` and dark stage `#0f0f1a`.

For `.col-lg-7`, adding `color: #0f0f1a` might make text dark on a dark hero background? But the hero background likely is a gradient/light. Actually "dark stage" is the desired page background. Setting the column text color to dark could break readability if the hero is dark. Hmm. But since this is the hero content column, and the target says "dark stage #0f0f1a, bright content area" — the content area might be white/light. Setting color to dark might be ok. But risky.

Alternatively, I could add `color: #fff` with a glow text-shadow to create a spotlight feel. But that's guessing. Since I don't have the rest of the file, adding `color` to a column is risky because it inherits to all children and could wreck contrast.

Maybe safer: only add `text-shadow`? Text-shadow inherits too (it's not inherited actually! text-shadow is NOT inherited by default). Wait, `text-shadow` is not an inherited property. But applying to the column will apply the shadow to the text nodes directly in the column, but child elements with their own text-shadow would override. So adding text-shadow to the column only affects direct text and children that don't set their own. That could create inconsistent results.

Hmm. Let me think about what's the safest and still achieves visual refresh.

Given only three rules, I want to make meaningful visual changes:

1. `.app-hero-section .row .col-lg-7` — could set `text-shadow` for a glow on the hero text. But if the heading has its own styles, mine might be overridden. Also, text-shadow inherits? Let me confirm: CSS `text-shadow` is not inherited. So children that don't define it will NOT inherit the column's text-shadow. Actually wait — non-inherited properties apply to the element only. The col-lg-7 is a div; it likely has no text directly; the text is in child h1/p. So setting text-shadow on col-lg-7 would do nothing unless col-lg-7 has direct text. Hmm. But text-align: center does inherit, which is why it's there.

So to add text-shadow to headings, I'd need to target them, but I can't add selectors. So text-shadow on col-lg-7 likely has minimal effect. Not useful.

What CAN I do on col-lg-7 that's purely visual? I could set a background gradient, border-radius, box-shadow, border. Like making the column a "spotlight stage" card. That would be a visual change. But the hero column usually spans 7 columns; adding a background box might look odd but it's a visual identity refresh. Hmm.

Alternatively, set `caret-color` or `accent-color`? Not relevant.

Actually, since text-align center is the only declaration, maybe the intent is just to center. I could add `color` — but risky.

Let me think about the "centered-stage" style: it says "text-align: center for headings" — already present. "Centered content: max-width 720-960px, margin: 0 auto" — but that applies to a container, not this column. I can't change layout. So I'll add visual flourishes.

Given the constraints, I'll do:

For col-lg-7:
- Keep text-align: center
- Add `color: #f8f9fc` (bright content) — but if a child sets its own color, it overrides; if not, this makes text light. Risky but the target says bright content area on dark stage. The hero section in the original probably has a dark background (typical app hero). Light text would fit. But I truly don't know. 

Hmm, the safest is to not set color on the column, and instead focus on the badge and cards where I have more concrete elements.

But the instructions demand "Colors throughout the file replaced with fresh palette" — original has no colors. So adding colors where possible is fine. I'll add to badge and cards, and minimal to col.

Let me also consider: `.app-hero-section .badge.bg-warning` — Bootstrap's `.badge` has `display: inline-block; padding: 0.35em 0.65em; font-size: 0.75em; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem;` and `.bg-warning` sets `background-color: #ffc107 !important;`. To override background-color, I need `background-color` or `background` with specificity higher than `.bg-warning`. `.app-hero-section .badge.bg-warning` has higher specificity than `.bg-warning`, so it wins even without !important (unless `.bg-warning` has !important, which Bootstrap's does: `background-color: #ffc107 !important`). Hmm! Bootstrap utilities have `!important`. So to override, I'd need `background: ... !important` or `background-color: ... !important`. 

The original CSS rule `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — this overrides font-size because Bootstrap `.badge` uses `font-size: 75%` without !important. But `.bg-warning` uses `!important`. So for the badge to change color, I need `!important`. The instructions say preserve selectors, but I can add declarations. Adding `!important` to my new declarations is fine.

Wait, but Bootstrap variable-based? In Bootstrap 5, `.bg-warning { background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; }`. So yes, need !important.

So I'll write:
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background: linear-gradient(135deg, #d4af37, #f7e08b) !important;
    color: #0f0f1a !important;
    border-radius: 12px;
    box-shadow: 0 0 24px rgba(212, 175, 55, 0.5), 0 4px 14px rgba(15, 15, 26, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
```

But adding border to a badge changes its box size slightly. Borders are allowed to change (border-color/style, not width). I shouldn't change border-width; I can add a border with 1px width? The rule says "border-color and border-style (NOT border-width)". That means I can change color/style but not width. Adding a border where there was none = changing width from 0 to 1px. That's risky. Avoid borders on elements that didn't have them.

Similarly, adding padding on the badge is risky. So I'll avoid padding and border on badge. Just background, color, border-radius, box-shadow.

For `.contact-channels-section article` and `.contact-quick-section .contact-card` — these are cards. Original sets padding var(--space-md) !important. Adding background, border-radius, box-shadow is fine. But be careful: `article` elements — if multiple articles, they'd each get a box. The original padding suggests they're cards. Adding background/border-radius/box-shadow creates card look. That's a visual identity change. But is there a risk of double backgrounds if the parent has background? Not a layout issue.

Also adding `backdrop-filter: blur(6px)` — that's a decorative property, allowed. But on small screens, could be heavy. Fine.

Also, I may add `border: 1px solid rgba(...)`? Border width 1px — original had none. Avoid.

Also, should I worry that the media query is `(max-width: 575.98px)`? I cannot change media conditions. Keep it.

Let me also consider adding `transition` properties. The effect variant mentions subtle pulsing animations, but I can't add keyframes or new selectors. I can change transition durations on existing elements. Adding `transition` to cards is fine.

Now, the "centered-stage" style says "max-width 720-960px, margin: 0 auto" — I cannot add these since they'd change layout and we can't add selectors anyway (col-lg-7 already has Bootstrap grid widths). So skip.

Let me also think about `col-lg-7` more. What visual-only property makes sense? Maybe `margin-left: auto; margin-right: auto`? That would change layout (floats/flex). No.

Maybe set `background: radial-gradient(...)` to create a spotlight halo behind the hero content. But adding a background to a grid column could create a visible box. Hmm. The target "centered-stage" has a dark stage #0f0f1a. If the hero section already has a background elsewhere, adding a radial glow to the column could enhance the spotlight feel. I think it's acceptable as a decorative change.

But wait — if the column is inside `.row`, and the row has background, adding a background to a single column could look like a mismatched block. However, since this is a responsive media query for small screens, the columns stack. A subtle radial gradient on the stacked column could look like a spotlight halo. I'll keep it subtle:

```css
.app-hero-section .row .col-lg-7 {
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.14), rgba(15, 15, 26, 0) 70%);
    border-radius: 16px;
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.12);
}
```

Hmm, but box-shadow on a column with no background may make the row's background show. If the column has no background, box-shadow just draws shadow around the column's box — that could look odd since the column spans full width. On small screens, col-lg-7 becomes full-width (Bootstrap cols stack), so a full-width column with a subtle glow shadow could be fine.

Actually, maybe I should avoid adding background to the hero column because it changes the look of a large area and might conflict with the actual hero background. Let me instead add a subtle `text-shadow`? It won't inherit, as discussed. So no effect.

What about `caret-color`? Irrelevant.

I think the most defensible approach: keep col-lg-7's