/* ============================================================
   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;
    }
}

We need to output rewritten CSS for the given snippet, following conservative mode and the target style. However, the original CSS only contains a media query with layout-ish properties: text-align (which is layout? but text-align is listed as layout? Actually in the never-change list: "text-align, vertical-align" are listed under layout? Let's check: The prompt says "📐 LAYOUT (HTML cannot adapt to changes): ... text-align, vertical-align" are included in the never-change list. Yes, text-align is considered layout and cannot change. So we must keep text-align: center exactly.

Also padding is layout, keep similar values, ±20% maximum. In original: padding: var(--space-md) !important; We cannot change var(--space-md) value? The CSS custom properties can change values? The prompt says "CSS custom properties (--color-*, --shadow-*) values" must change? Actually it says "✅ YOU MUST CHANGE ... CSS custom properties (--color-*, --shadow-*) values" So custom properties specifically for colors and shadows. But --space-md is a spacing custom property, not color/shadow. We should not change it because padding is layout and the value is a var. But we can't change the variable value since it's not defined here. So keep as is.

The other properties: font-size: 0.85rem; That's typography, cannot change. So we can't change it.

We need to refresh visual identity: but this snippet has no colors, shadows, radius, gradients. It's a media query for small screens. So we have to keep everything as-is, because any change would break rules. But the task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." There are none. So perhaps the output should be identical? But the instruction says output only rewritten CSS. Since no visual properties present, we can't change anything. However, maybe we can add nothing? The goal is to preserve layout, but if there's no visual property, we output same.

But wait: There is "background" properties? No. So we can't change. Maybe we can adjust the selector list? No.

Let's read the original CSS carefully:

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

All properties are layout/typography. So the refreshed CSS would be exactly the same. But maybe we can add visual properties like color, background-color, etc. to these selectors? That would change the visual identity without altering layout. But careful: adding color to .app-hero-section .row .col-lg-7 might affect text color. The target style says dark stage #0f0f1a, bright content area, premium gold accent, glow effects. We could add color or background? But in a mobile media query, we might add some subtle changes? The instruction says "Only change colors, shadows, radius, transitions, gradients." We can add new declarations? The output should be "rewritten CSS" preserving selectors. We can include new visual properties in existing rules as long as we don't change layout. Is that allowed? The prompt says "Only change colors, shadows, radius, transitions, gradients." It doesn't say we can't add them. But the safer interpretation: We must not add new properties that don't exist? Usually, in these transformations, we replace values of visual properties. Since there are no visual properties, we cannot transform. However, to satisfy "refresh visual identity", we might need to add something. But the instruction "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It implies if there are no colors, shadows, etc., there's nothing to change. Output the same.

But the "TARGET STYLE" and "EFFECT VARIANT" are provided for guidance, but they might not apply if the CSS doesn't have those elements. Still, we could add a color to text? Let's think about the selectors:

- .app-hero-section .row .col-lg-7: This is a column inside a hero section. On mobile, text-align center. We could add color: #ffffff maybe to ensure bright text on dark stage? But the hero section might already have color. Adding color might be unwanted.

- .app-hero-section .badge.bg-warning: Badge with warning background. We could add box-shadow glow? But badge already has bg-warning (Bootstrap class). We could add box-shadow: 0 0 24px rgba(gold, .4) to make it glow. That is a visual change that doesn't affect layout.

- .contact-channels-section article and .contact-quick-section .contact-card: could add background, border-radius, box-shadow, etc. But these are inside a media query for mobile, adding padding already. We could add border-radius and box-shadow to make cards glow? But adding background might change look.

We need to be careful: The original CSS is a media query that likely overrides desktop styles for mobile. Adding colors may be acceptable. But the instruction "HTML fixed, visual changes only" allows us to change colors. So we can introduce color tokens? However, the custom properties --space-md is used. We should not change that. We can add a custom property like --card-glow? But the style wants dark stage and gold accents. But this snippet doesn't have a root scope. We could add a color property to text-align rule? e.g., color: #f5e7c8; But that might conflict with Bootstrap.

Perhaps the best is to output the exact same CSS, because any modifications would violate "only change existing visual properties" or risk breaking design. But the task is explicitly to refresh visual identity. If there are no visual properties, the identity cannot be refreshed. Maybe the test expects us to add visual declarations in the existing rules, not changing layout.

Let's search for clues: The file is "assets/css/saishi.css#块2/2" meaning block 2 of 2. The original CSS likely is a mobile media query. The target style "centered-stage" (dark stage #0f0f1a, bright content area, premium gold accent) and glow effects. So we can use dark backgrounds and gold accents in this mobile media query. For example:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f5f5ff; /* bright content on dark stage */
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        box-shadow: 0 0 24px rgba(255, 215, 0, 0.4);
        border-radius: 16px; /* or 10px */
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        box-shadow: 0 8px 32px rgba(15, 15, 26, 0.6);
        border-radius: 12px;
        background: linear-gradient(135deg, #1a1a2e, #0f0f1a);
        transition: box-shadow 0.3s ease;
    }
}

But wait: adding background to .contact-card might override existing Bootstrap card background? The class is .contact-card, likely custom. It's okay. But the rule uses !important on padding; we could add other properties without !important.

However, we must not change font-size, text-align, padding, etc. We add new properties. The output should be the rewritten CSS with same selectors and layout. That seems plausible.

But is it allowed to add color to a text-align rule? Yes, because color is not in the never-change list, it's in the must-change list (all color values). "All color values: background, color, border-color, fill, stroke, outline-color" — if there are no existing color values, we can add them? The instruction "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It might mean replace existing visual values. Adding new declarations is a change, but it's a visual change. It's consistent with refreshing.

The self-check list includes: "Colors throughout the file replaced with fresh palette?" Since there were no colors, adding a fresh palette is needed. "Shadows redesigned (different offsets, colors)?" If we don't add shadows, the check fails. So we must add shadows, radius, etc. to comply.

Thus, we should add visual properties to the existing rules, but not alter layout/typography properties that already exist. We can also add transitions if desired.

We need to ensure we don't add properties that affect layout. For example, adding border: if we add border-width, it might change box size unless box-sizing border-box. Better to use box-shadow for borders. Adding border-radius doesn't affect layout. Adding background doesn't affect layout. Adding color doesn't affect layout. Adding transition doesn't affect layout. Adding opacity doesn't affect layout (but can affect visual). So fine.

We also need to ensure the selectors are exactly preserved. The selector list `contact-channels-section article, .contact-quick-section .contact-card` is preserved. We can add properties after existing ones.

But there is one issue: In the original rule, `padding: var(--space-md) !important;` — if we add a background, it might fill the padding area, which is okay.

Let's craft a refined CSS.

We need to incorporate the "centered-stage" style? On mobile, max-width 575.98px. The style says max-width 720-960px, margin: 0 auto, text-align center headings, justify-content center. But we cannot change text-align? Actually text-align can change? The never-change list includes "text-align" under layout, so text-align: center is currently set, and we must keep it. We can't change it to left or anything. We can add other text-align? No, one property per rule. So it's already center, that's fine. We can't add max-width or margin because that would alter layout. So the layout pattern is constrained.

Color palette: dark stage #0f0f1a, bright content area. So we can set the background of the page? Not in this snippet. But we can set backgrounds of these components.

Let's propose:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f5ede1;
        text-shadow: 0 0 24px rgba(255, 215, 0, 0.2);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd700, #ff8c00);
        box-shadow: 0 0 24px rgba(255, 215, 0, 0.4);
        border-radius: 16px;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #1b1b2f, #0f0f1a);
        box-shadow: 0 0 24px rgba(255, 215, 0, 0.15), 0 8px 32px rgba(0, 0, 0, 0.6);
        border-radius: 14px;
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article:hover,
    .contact-quick-section .contact-card:hover {
        box-shadow: 0 0 32px rgba(255, 215, 0, 0.6);
    }
}

But wait: Adding hover pseudo-classes is allowed? The prompt says "Pseudo-classes (:hover, :focus, ::before, ::after)" must be kept exactly? Actually the never-change list includes "Pseudo-classes (:hover, :focus, ::before, ::after)" meaning we shouldn't change the existing pseudo-classes, but can we add new ones? It says "Selectors (CRITICAL - HTML is fixed): ... Pseudo-classes (:hover, :focus, ::before, ::after)" — This list is about the selector structure. We must preserve existing selectors exactly. Adding new selectors might be considered changing the selectors? The instruction says only change colors, shadows, etc. Not selectors. Adding a new rule with :hover would introduce a new selector, which violates "Keep ALL selectors and layout exactly as-is." So we should not add new selectors. The output should have exactly the same selector blocks. We can add properties within an existing block, but not add new rule blocks. So no hover rule.

Also, if we add a transition, it should be within the existing block. But transition itself is allowed. We can't add a hover rule, but we can set transition so that any hover effects defined elsewhere (e.g., base CSS) still work. But we don't need to add new rules.

Also, can we add a second box-shadow? Yes, just extend the box-shadow property. That's within the same rule.

Should we add `border-radius: 16px` to the badge? The badge is .badge.bg-warning. This is a Bootstrap badge; normally it might already have border-radius. In original CSS, no border-radius. We can add. But if Bootstrap sets border-radius, our border-radius in a media query with same specificity (0,2,0? .badge.bg-warning = two classes) and media query (same specificity, later in source) will override. Fine.

Need to be careful with `background` on .badge.bg-warning: Bootstrap's .bg-warning sets background-color. If we set background with gradient, it overrides. That's a visual change. Good.

But note: The prompt says "All color values: background, color, border-color, fill, stroke, outline-color" must change. If we add background to a rule that didn't have background, that's adding a new color value. That's fine.

Now, about the .contact-channels-section article: adding a background might make it dark, but if the parent section has a light background, the cards become dark. That's a spotlight stage feel. Good.

However, we must ensure that the "text-align: center" remains. We add `color: #f5ede1` and `text-shadow`. Text-shadow is allowed and doesn't affect layout. But adding text-shadow to the hero column might make text glow. Good.

But we must also consider the `color` property on a column that may contain multiple text elements. Setting color inherits to children unless overridden. That's okay.

Let's see if there are any constraints about `transition` duration/timing. The prompt says "transition timing, easing, duration" must change. But we are adding a new transition, which is okay. However, there is no original transition in this media query. But the instruction says "All color values ... box-shadow ... border-radius ... gradient ... transition timing, easing, duration ... CSS custom properties" must change. It doesn't say we must add them. But to refresh, we might change them if present. Since none present, adding is acceptable.

We need to include `transition` in the contact card rule. But we might also add to badge. E.g., `transition: box-shadow 0.3s ease;` But without a hover rule, it doesn't do anything. Still, it's a visual property. But maybe pointless. We can still add.

Also, the target style mentions subtle pulsing animations. But we can't add @keyframes or animation because that would be a new selector @keyframes? Actually @keyframes is an at-rule, not a selector. The never-change list says "@keyframes names (values inside CAN change)" and "animation-name (values like duration/timing CAN change)". It doesn't forbid adding new @keyframes? But adding new @keyframes would be a new at-rule, not a layout change. But the instruction says "Keep ALL selectors and layout exactly as-is." @keyframes is not a selector. However, we should avoid adding animations because it might be considered a new animation. The task says "Subtle pulsing animations" as effect variant, but the CSS snippet is a mobile media query, adding @keyframes inside media query is possible. But the original CSS doesn't have any animation. We could add an animation property to an existing rule and define @keyframes inside the media query. That would be a new at-rule. Is that allowed? The self-check says "Every selector character-for-character preserved?" @keyframes blocks are not selectors. But the output should contain only the rewritten CSS; adding @keyframes would add new code, but it's visual. However, it might increase complexity. To be safe, we can skip animations.

Let's decide on output structure:

We must preserve the exact media query condition. We can add properties within each rule.

Option A: Keep original declarations and add new ones after.

Option B: Only output original declarations because no visual properties. But then the self-check would fail on "Colors throughout the file replaced" and "Shadows redesigned". So Option A is better.

Let's craft with care:

- `.app-hero-section .row .col-lg-7`:
  Original: `text-align: center;`
  Add `color: #f5f3ff;` (bright content area) and `text-shadow: 0 0 24px rgba(255, 215, 0, 0.3);` This is a glow effect.

- `.app-hero-section .badge.bg-warning`:
  Original: `font-size: 0.85rem;`
  Add `background: linear-gradient(135deg, #ffd700 0%, #ff9f1c 100%);`
  Add `box-shadow: 0 0 24px rgba(255, 215, 0, 0.4), 0 0 48px rgba(255, 215,