/* ============================================================
   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 visually while keeping all selectors and layout exactly as-is. 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;
    }
}
```

This is a media query with three rules. The constraints say:
- I cannot change text-align (it's in the layout/typography protected list)
- font-size cannot change
- padding can change by ±20% maximum. The padding is `var(--space-md) !important` — I can adjust the value. Since I don't know what `--space-md` is, I could keep it or adjust. But changing `--space-md` is a CSS custom property value change... Actually the original uses `var(--space-md)`. I can't change the selector, but I can change the declared value. Since padding is allowed ±20%, I need to keep similar values. But `var(--space-md)` is a variable reference — I can't change what it resolves to without changing the custom property definition elsewhere. However, I could replace with a slightly different value. But careful: the constraint says keep within ±20%. Since I don't know the resolved value, it's safer to keep `var(--space-md)` or replace with a similar padding. Hmm.

Actually the task: "Only change colors, shadows, radius, transitions, gradients." This media query only has layout-ish properties: text-align, font-size, padding. There are no colors, shadows, radius, transitions, or gradients in this block.

So what can I actually change? The allowed changes are colors, box-shadow, text-shadow, border-radius, gradients, transition, filter, backdrop-filter, opacity, outline, border-color/style, caret-color, accent-color, custom property values. The original CSS has none of these.

Wait — but there's also "CSS custom properties (--color-*, --shadow-*) values" in the change list. There are no custom properties defined here, only `var(--space-md)` used.

Given the "conservative mode" and task, I need to output the rewritten CSS. Since there's nothing visual to change in this block, I should preserve the rule exactly. But the mission says "Refresh the visual identity WITHOUT changing layout structure or class names." The safest approach: output the same CSS, since any changes to text-align, font-size, padding could break layout.

But let me reconsider. Maybe I can add visual properties to these rules that don't break layout:
- For `.app-hero-section .badge.bg-warning` — could add a color, box-shadow, border-radius? But adding properties not in the original could be considered okay since they're visual. However, the instruction says "Refresh this CSS visually" — so adding visual flourishes might be acceptable. But it must not change layout.

Actually, the rules say: "Keep ALL selectors and layout exactly as-is." Adding new visual properties like color, box-shadow to existing selectors is allowed since those are in the "MUST CHANGE" category... but wait, the MUST CHANGE says "All color values" — meaning if there are colors, change them. It doesn't necessarily require me to add new properties. But I could add subtle visual improvements.

However, being conservative, the best is to minimally adjust. Let me think about what limited changes are safe:

1. `.app-hero-section .badge.bg-warning` — font-size is protected. I can't change text-align on first rule (protected). Padding can vary ±20% but it's `var(--space-md)`.

Hmm, since the original CSS is purely responsive layout adjustments, and the target style is "centered-stage" with "tight-rhythm" variant, maybe I should add a subtle color/box-shadow to the badge to introduce the new visual identity, without touching layout.

But the instruction in the system prompt: "✅ YOU MUST CHANGE (visual identity only)" — change color values, shadows, radius, etc. If they don't exist, perhaps I should add them.

Let me look at the "Self-check" list:
- Every selector character-for-character preserved?
- display, position, grid-template-*, flex-direction unchanged?
- width, height, padding, margin within ±20% of input?
- font-family, font-size, font-weight, line-height unchanged?
- Colors throughout the file replaced with fresh palette?
- Shadows redesigned (different offsets, colors)?
- Border-radius adjusted for new visual style?

"Colors throughout the file replaced" — there are no colors in the file. "Shadows redesigned" — no shadows. "Border-radius adjusted" — no border-radius.

Since the original block has no visual properties to change, the safest and most compliant output is exactly the same CSS. But that seems like a non-answer. Yet the user explicitly said "Output the rewritten CSS now" — maybe they expect me to preserve it exactly because there's nothing to change. In conservative mode, the principle is "do no harm."

Actually, let me reconsider: The padding is `var(--space-md)`. I could change the padding value to something more "tight-rhythm" like `calc(var(--space-md) * 0.9)` — but that's within 20%. However, changing the resolved value could affect layout. The target style says "Compact spacing (Aggressive: padding 8-16px, gap 8-12px)". So maybe tighten padding. But we don't know the value of `--space-md`. If `--space-md` is e.g. 24px, 0.9x = 21.6px, within 20%. That's risky but allowed.

Actually, the constraint says "padding, margin (keep similar values, ±20% maximum)". `var(--space-md)` — if I replace with `calc(var(--space-md) * 0.9)`, that's a 10% reduction, within bounds. But is that a "visual identity" change? Not really.

Alternatively, I could add `border-radius`, `box-shadow`, `color`, `background-color` to the selectors. For example:

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

Hmm, but adding properties that change the badge's appearance could be considered a visual refresh. The badge bg-warning — in a "centered-stage" premium gold palette, I could give it a warm gold gradient? But `.badge.bg-warning` is a Bootstrap class; changing its background might conflict. But since it's scoped `.app-hero-section .badge.bg-warning`, I can add:

```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    color: #0f0f1a;
    background: linear-gradient(135deg, #f5d76e, #e8b83a);
    box-shadow: 0 2px 6px rgba(232, 184, 58, 0.35);
    border-radius: 4px;
}
```

But wait — modifying `background` on `.bg-warning` changes the visual identity, that's allowed. But is it safe? The instruction says don't change layout properties; background is fine. However, this could be considered overstepping because the original didn't have these. But the mission is a visual refresh, so adding visual properties is literally the task.

But I need to be careful: "text-align: center" is protected (can't change). "font-size" protected. "padding" can change within 20%. Since the original has no visual props, I'm allowed to introduce them.

Let me decide: The safest but still useful approach is to add subtle visual properties to the badge rule, and maybe a radius to the contact cards. But the contact card rule uses `padding: var(--space-md) !important;` — I can keep padding same, but I might not want to add visual props to the article/contact-card because that could be in another stylesheet's control.

Honestly, for a conservative mode with the target "centered-stage" + "tight-rhythm", I think the best answer is to keep the media query structure intact, adjust nothing that affects layout, and add minimal visual properties:

1. `.app-hero-section .badge.bg-warning` — add premium gold styling with tight radius and subtle shadow. Use the dark stage color #0f0f1a for text.
2. `.contact-channels-section article, .contact-quick-section .contact-card` — keep padding but maybe add a subtle border-radius? But adding border-radius to cards could change look. It's allowed (radius is visual). Tight-rhythm says 2-6px radius.

Actually, let me be more conservative: adding props that don't exist might be risky if a parent stylesheet controls things. But the task explicitly says refresh visual identity, so adding visual-only properties is the point.

However, the self-check says "Colors throughout the file replaced with fresh palette" — the original has no colors. So maybe I should just output identical CSS. But then the "Request ID" and "target style" suggest they want a transformation.

Let me look at similar tasks: Typically, the original CSS would contain colors, shadows, etc., and I'd replace them. This particular block is from `saishi.css` (competition/schedule styles). It's a responsive media query with only layout tweaks. There's genuinely nothing to change in the visual identity category without adding new declarations.

Given the strict constraints, I'll preserve the layout exactly and add a few visual declarations that align with the target palette, keeping them subtle. I need to avoid changing `text-align`, `font-size`, and keep `padding` identical (or within 20%). I'll keep padding as `var(--space-md)` to be safe.

So:

```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: linear-gradient(135deg, #f7e08b 0%, #d4af37 100%);
        border: 1px solid rgba(212, 175, 55, 0.6);
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
        transition: box-shadow 0.25s ease, transform 0.25s ease;
    }

    .app-hero-section .badge.bg-warning:hover {
        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.45);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(15, 15, 26, 0.08);
        transition: box-shadow 0.3s ease;
    }
}
```

Wait — I added a `:hover` pseudo-class. The selector list says "Pseudo-classes (:hover, :focus, ::before, ::after)" are in the "NEVER CHANGE" category. Does that mean I can't add new pseudo-class selectors? The instruction says "Selectors: keep EXACTLY" — meaning the existing selectors must be preserved character-for-character. Adding a new `:hover` rule might violate "Every selector character-for-character preserved?" Because I'd be introducing a new selector that wasn't in the original. That's risky. Better not to add new selectors or pseudo-classes.

Also, adding `transition` — the allowed list includes "transition timing, easing, duration" meaning I can change transition values, but adding a new transition property could be fine. But to be safe, I'll keep additions minimal without new selectors.

Also, `border: 1px solid ...` — this adds a border, but border-width wasn't in the original. The rules say border-color and border-style CAN change, but border-width cannot? Actually "border-color and border-style (NOT border-width)" — meaning I can change color/style but not width. Adding a border creates a border-width. That's iffy.

Let me be more careful. The core safe additions:
- `color` (text color)
- `background` / `background-color` / `background-image` with gradient
- `border-radius`
- `box-shadow`
- `transition` (new property is acceptable? It's in the allowed change list)
- `backdrop-filter` maybe

I'll avoid adding borders or pseudo-classes.

But adding these to `.contact-channels-section article` — the article might be a generic element shared; adding radius/shadow could be okay. But the rule uses `!important` on padding only. Adding new declarations without `!important` — fine.

Actually, let me reconsider the whole thing. The simplest, safest, and most defensible output is to return the CSS unchanged. The reason: The block contains only layout properties that are explicitly protected. There are no colors, shadows, gradients, or transitions to refresh. In conservative mode, "do no harm" is paramount. The instructions say "Refresh this CSS visually" — but if there's nothing to refresh, the correct answer is the same CSS.

But would the user accept that? They gave a target style and variant. Hmm. The target style "centered-stage" has dark stage background #0f0f1a and gold accents. The "tight-rhythm" variant has small radius, subtle shadows. I can apply that identity to the badge and cards in this responsive block.

Let me check the fingerprint: This is "块2/2" (block 2 of 2), meaning the file is split into two blocks, and this is the second block. So it's a fragment of the whole CSS file. The other block probably has the main styles. The responsive block just tweaks layout at small screens. Adding visual properties here would only apply at max-width 575.98px, which is fine for a responsive visual tweak.

I'll go with adding visual-only declarations that don't alter layout. But I must ensure:
- `text-align: center` stays exactly.
- `font-size: 0.85rem` stays exactly.
- `padding: var(--space-md) !important` stays exactly (or within 20%, but I'll keep it exact to be safe).

New declarations to add:
For `.app-hero-section .badge.bg-warning`:
- `color: #0f0f1a;` (dark text on gold)
- `background: linear-gradient(135deg, #f2d06b 0%, #d4a72c 100%);` — but wait, `.bg-warning` from Bootstrap sets `--bs-badge-bg`? Actually Bootstrap's `.badge.bg-warning` sets `background-color: var(--bs-warning)`. To override, `background` (shorthand) works. Using `background: linear-gradient(...)` overrides the background-color entirely. Good.
- `border-radius: 4px;` (tight-rhythm 2-6px)
- `box-shadow: 0 2px 8px rgba(212, 167, 44, 0.35);` subtle gold glow
- `transition: box-shadow 0.25s ease-in-out;` maybe. But adding transition without a hover state is pointless. I could add `filter: saturate(1.05);`? Eh.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- `border-radius: 4px;` (tight rhythm)
- `box-shadow: 0 1px 4px rgba(15, 15, 26, 0.08);` (subtle)
- `background-color: rgba(255, 255, 255, 0.03);`? No — this might conflict. Maybe avoid.

Actually, adding `background-color` to the cards could be risky if they already have backgrounds from other blocks. But since this block's purpose is the mobile view, it's okay. However, I want to minimize risk. Let me just add `border-radius` and `box-shadow`.

Let me also reconsider: the "centered-stage" palette: dark stage #0f0f1a, premium gold. The dark background for the page would be set in the other block. Here, the badge could be gold: `#0f0f1a` text on `#d4af37` gradient. The cards get subtle shadows.

Final 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: linear-gradient(135deg, #f5d97a 0%, #d4af37 100%);
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35);
        transition: box-shadow 0.25s ease-in-out;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 4px;
        box-shadow: 0 1px 6px rgba(15, 15, 26, 0.08);
        transition: box-shadow 0.25s ease-in-out;
    }
}
```

Wait, the original had no semicolon after the last declaration? It had `padding: var(--space-md) !important;` with semicolon. Fine.

Now, about `transition` — adding it is fine. But `box-shadow