/* ============================================================
   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 CSS with a conservative mode - keeping all selectors and layout exactly, only changing colors, shadows, radius, transitions, gradients.

The original CSS is a media query with:
```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;
    }
}
```

But wait - the task says "Layout pattern (Aggressive only)" - that's for aggressive mode. I'm in conservative mode. So I can't change layout. The original CSS has:
- text-align: center (layout - can't change)
- font-size: 0.85rem (typography - can't change)
- padding: var(--space-md) !important (layout - keep similar)

Hmm, but the task says only change colors, shadows, radius, transitions, gradients. The original CSS has none of those! It only has text-align, font-size, and padding.

Let me re-read the instructions:

"✅ YOU MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)
  • text-shadow
  • border-radius (visual rounding only)
  • gradient colors and stops in linear/radial/conic-gradient
  • transition timing, easing, duration
  • filter, backdrop-filter
  • opacity
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
  • caret-color, accent-color
  • CSS custom properties (--color-*, --shadow-*) values"

The original CSS has no color values, no shadows, no radius, no transitions. It has:
- text-align: center (layout - cannot change)
- font-size: 0.85rem (typography - cannot change)
- padding: var(--space-md) !important (layout - keep similar)

So what can I change? The task says "Refresh this CSS visually" but the only properties present are protected ones.

Wait, maybe I should add decorative properties? The instructions say "only colors, shadows, and decorative properties may change" in the intro. And "Make colors, shadows, and radius MORE distinct this round. Use a fresh palette."

Hmm, but the constraints say "NEVER CHANGE (would break HTML layout)" - those are the layout properties. I can add new properties that are decorative, like box-shadow, border-radius, transitions, etc. But the original CSS doesn't have them so there's nothing to change...

Actually, let me think about this differently. The task is to rewrite the CSS file. The original CSS is quite minimal. Since I can't change the layout properties (text-align, font-size, padding), and there are no color/shadow/radius properties to change, I need to... add them?

The instructions say:
- "Refresh the visual identity WITHOUT changing layout structure or class names."
- "The HTML is FIXED — only colors, shadows, and decorative properties may change."

So I can add decorative properties. But the self-check says "Colors throughout the file replaced with fresh palette?" - well, there were no colors in the file.

Wait, but the output should preserve all selectors exactly. The media query and the selectors must remain. The declarations within can be modified, and I can add decorative declarations.

Actually, let me re-read more carefully:

"📤 OUTPUT:
  • ONLY the rewritten CSS, preserving ALL selectors and layout exactly
  • No markdown fences, no explanations"

So I need to output the same CSS structure but with visual changes. Since the original has no visual properties, I should add decorative properties to make it "fresh" while keeping the layout properties as-is.

But wait - can I add new declarations? The instructions say "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

Hmm, "Only change colors, shadows, radius, transitions, gradients" - these are properties that don't exist in the original. So I could add them. But adding properties to a media query that originally only adjusts text-align, font-size, and padding might be considered "adding" rather than "changing".

Let me think about what makes sense here. The original CSS:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` - on mobile, center the hero text.
2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` - smaller badge on mobile.
3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` - reduce padding on mobile.

These are all responsive layout adjustments. There's nothing visual to change.

Given the constraints, I think the safest approach is to:
1. Keep all layout properties exactly as-is.
2. Add new decorative properties that don't break layout:
   - For `.app-hero-section .badge.bg-warning`: add color, background, border-radius, box-shadow, transition
   - For `.contact-channels-section article, .contact-quick-section .contact-card`: add background, border-radius, box-shadow, border-color, transition

But wait - adding styles to `article` and `.contact-card` might affect their appearance in ways that weren't intended. The instructions say "only colors, shadows, and decorative properties may change" - adding decorative properties is allowed since it's a "refresh".

However, there's a risk. The badge is `.badge.bg-warning` - a Bootstrap class. Changing its background-color might conflict with Bootstrap's `.bg-warning`. But the instructions explicitly say to change colors for a fresh palette.

Let me reconsider. Perhaps the best approach is to add the decorative properties while keeping the existing ones. Let me craft a solution:

```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;
        /* add visual properties */
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        /* add visual properties */
    }
}
```

But the instructions say "No  comments" and "No explanations". Adding comments might be okay but let's avoid them.

Actually, let me reconsider the whole thing. The task says "Request ID" and "File fingerprint" suggesting this is part of a larger batch. The "TARGET STYLE: centered-stage" with "dark stage #0f0f1a, bright content area, Premium gold or deep purple accent" and "sharp-edges" variant with "4px 4px 0px solid color, Small or zero border-radius (0-4px), Strong borders (2-3px solid), Snappy transitions (0.15s)".

These are the target aesthetics I should apply. So I should:
- Use colors from the dark stage/gold palette
- Use 4px 4px 0px offset shadows (hard shadows)
- Use small/zero border-radius
- Use 2-3px solid borders
- Use 0.15s transitions

Let me craft a rewritten CSS that adds these visual properties to the existing selectors. Since the original has no color properties, I'll add them.

For `.app-hero-section .badge.bg-warning`:
- It's a warning badge. In the centered-stage theme, I might make it gold (#f0b429 or similar) with dark text.
- Add border: 2px solid
- Add box-shadow: 4px 4px 0px
- Add border-radius: 0 or 2px
- Add transition: 0.15s

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- Add background: dark stage color
- Add border: 2px solid
- Add box-shadow: 4px 4px 0px
- Add border-radius: 0
- Add transition: 0.15s

For `.app-hero-section .row .col-lg-7`:
- Only text-align: center. I can't add much here without affecting layout. Maybe add nothing.

Actually, I should be careful. If I add background to `.contact-channels-section article`, it might change the whole look of the page. But that's the point of a visual refresh, right?

Hmm, but the constraint says these are inside a `@media (max-width: 575.98px)` query. So these styles would only apply on mobile. That's a bit odd - mobile-only visual refresh?

The original CSS is mobile-only adjustments. If I add colors and shadows only to mobile, it might look jarring. But my task is to rewrite what's given.

I think the right approach is:
1. Keep `text-align`, `font-size`, `padding` exactly as they are.
2. Add decorative properties (color, background, border, box-shadow, border-radius, transition) to the existing selectors.
3. Follow the centered-stage + sharp-edges aesthetic.

Let me also consider: maybe I should add a `transition` to the badge so it animates on hover. And for article/card, add background, border, shadow.

Let me write it out:

```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;
        color: #0f0f1a;
        background-color: #f5c542;
        border: 2px solid #0f0f1a;
        border-radius: 0;
        box-shadow: 4px 4px 0 #0f0f1a;
        transition: all 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #17172b;
        border: 2px solid #0f0f1a;
        border-radius: 0;
        box-shadow: 4px 4px 0 rgba(245, 197, 66, 0.6);
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }
}
```

Wait, transform is a layout-related property? Actually transform doesn't affect layout (it's a visual transform), but the instructions say "display, position, grid-template-*, flex-direction unchanged" etc. It doesn't list transform. But to be safe, I shouldn't add transform in a conservative mode. Just box-shadow and colors.

Also, `transition: all` might be too broad. Let me use specific properties.

Let me also think about whether using `!important` on the new properties would conflict. The original has `padding: var(--space-md) !important`. I don't need to add `!important` to the new properties unless there's specificity concerns.

Actually, for Bootstrap's `.bg-warning`, I might need `!important` or higher specificity to override. But since the selector is `.app-hero-section .badge.bg-warning`, it has higher specificity than Bootstrap's `.bg-warning`, so it should win without `!important`.

Hmm, but the original didn't have a color change on `.bg-warning`. Adding `background-color` might override Bootstrap's warning color, which could be intentional for the new palette.

Let me reconsider the palette:
- Dark stage: #0f0f1a (very dark navy/black)
- Content area: bright, maybe #f5f0e8 or similar
- Premium gold: #f5c542 or #d4af37
- Deep purple accent: #6b3fa0

For sharp edges:
- box-shadow: 4px 4px 0 0 (hard offset)
- border-radius: 0
- border: 2px solid
- transition: 0.15s

Let me think about what makes sense for each selector:

1. `.app-hero-section .row .col-lg-7` - just text-align center. No visual properties needed. But maybe I could add a `color`? No, that would be weird since it's a container. I'll leave it.

2. `.app-hero-section .badge.bg-warning` - This is a badge. On mobile, it gets centered and smaller. I'll give it the premium gold treatment:
   - color: #0f0f1a (dark text on gold)
   - background-color: #f5c542 (premium gold)
   - border: 2px solid #0f0f1a (dark border, sharp edges)
   - border-radius: 0 (sharp edges)
   - box-shadow: 4px 4px 0 #0f0f1a (hard shadow)
   - transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease

3. `.contact-channels-section article, .contact-quick-section .contact-card` - content cards:
   - background-color: #17172b (slightly lighter than stage)
   - border: 2px solid #0f0f1a
   - border-radius: 0
   - box-shadow: 4px 4px 0 rgba(245, 197, 66, 0.5) (gold hard shadow)
   - transition: box-shadow 0.15s ease, background-color 0.15s ease

Hmm, but wait - should I add `color` to these? They're containers, so setting color might affect text. If I set color to #f5f0e8 (bright), it would change the text color of everything inside, which is a visual change but not layout. That could be part of the refresh.

Actually, in conservative mode, I should be cautious. The instruction says "Only change colors, shadows, radius, transitions, gradients." Adding `color` to a container changes text color, which is a color change. It's allowed. But it might have unintended consequences if the original design didn't have dark backgrounds.

Let me think about the overall goal. The target style is "centered-stage" with "dark stage #0f0f1a, bright content area, Premium gold or deep purple accent". This is a visual identity refresh. The contact cards should probably have the dark stage background with gold accents. The badge should be gold.

I think my approach is sound. Let me also consider adding `outline` or `outline-color` since those are listed as changeable. But adding outline might look bad on mobile. Let me skip it.

Actually, let me reconsider if I should add new properties at all. The instructions say "Only change colors, shadows, radius, transitions, gradients" - "change" implies modifying existing values. But there are no existing values. However, the overarching goal is "Refresh this CSS visually" and "Make colors, shadows, and radius MORE distinct this round."

I think the intent is clear: the original CSS is minimal, and I need to add visual properties to achieve the target style. Since the HTML is fixed and I'm in conservative mode, I add only decorative properties.

Let me also double-check the margin/padding constraint: "padding, margin (keep similar values, ±20% maximum)". The original has `padding: var(--space-md) !important`. I'll keep it exactly. Adding other properties doesn't change padding.

Let me finalize my output:

```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;
        color: #0f0f1a;
        background-color: #f5c542;
        border: 2px solid #0f0f1a;
        border-radius: 0;
        box-shadow: 4px 4px 0 0 #0f0f1a;
        transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #17172b;
        border: 2px solid #0f0f1a;
        border-radius: 0;
        box-shadow: 4px 4px 0 0 rgba(245, 197, 66, 0.6);
        transition: box-shadow 0.15s ease, background-color 0.15s ease;
    }
}
```

Wait, `box-shadow: 4px 4px 0 0` - the syntax is `offset-x offset-y blur-radius spread-radius color`. So `4px 4px 0 0` is valid (0 blur, 0 spread). But the "sharp-edges" variant says "4px 4px 0px solid color" - that's `box-shadow: 4px 4px 0 rgba(...)` which is offset-x, offset-y, blur, color. Both are valid. I'll use `4px 4px 0 #0f0f1a` (3 values + color = no spread).

Actually let me use exactly what the variant says: "4px 4px 0px solid color". But `box-shadow` doesn't take `solid` - that's for border. So `box-shadow: 4px 4px 0 0 color` or `box-shadow: 4px 4px 0 color`. I'll use `4px 4px 0` with color.

Let me reconsider the transition. "Snappy transitions (0.15s)". I'll use `transition: all 0.15s ease` or specific properties. `all` is simpler and matches the intent.

Actually, using `transition: all` on `.contact-channels-section article` might animate padding