/* ============================================================
   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 only the rewritten CSS. The original CSS is a media query with some rules. We need to preserve selectors and layout, but change visual properties. The target style is vertical-flow with warm minimal palette and glow effects. However, the original CSS doesn't have colors or shadows. It has text-align, font-size, padding. We can adjust padding within ±20%? Actually padding is a layout property but we can keep similar. The instruction says padding/margin keep similar ±20%. But we can slightly adjust? But better to keep as-is since it's layout. We need to add visual properties? The original has no colors. We could add color, background, etc. But we need to ensure the selectors remain. We can add decorative properties like border-radius, box-shadow, transitions, etc. However, we need to be careful not to change layout. For the media query, we can add e.g. .app-hero-section .badge.bg-warning { font-size: 0.85rem; ... maybe add color, background, box-shadow? } But the original only has font-size. We can add visual properties. But we must not change font-size? Actually font-size is typography fixed. So we must keep font-size: 0.85rem. We can add other visual properties.

Let's examine the three rules:

1. .app-hero-section .row .col-lg-7 { text-align: center; }
We can add maybe color, background? But that would affect layout? It's visual. We can add maybe padding? But padding is layout and we can change within ±20% but there is no original padding. Adding padding might change layout. Better not. We can add a subtle text-shadow or color. But the target palette: off-white #faf8f3, soft black #2d2d2d, muted accent sage #87a878 or terracotta #c47b5a. We could set color to #2d2d2d. But the rule only for mobile. It might override existing color. That's allowed. We can add text-shadow.

2. .app-hero-section .badge.bg-warning { font-size: 0.85rem; }
We can add background, color, border-radius, box-shadow, transition, etc. But note the class bg-warning is Bootstrap. We can override with our accent color. E.g. background: #87a878; color: #faf8f3; border-radius: 8px; box-shadow: 0 0 24px rgba(135,168,120,0.4); etc. That would be visual.

3. .contact-channels-section article,
   .contact-quick-section .contact-card {
       padding: var(--space-md) !important;
   }
We can add background, border-radius, box-shadow, transition, maybe border. But padding must stay same? It can stay as var(--space-md). We can add visual properties.

We must preserve the selector list exactly. Let's output the CSS with same selectors and layout but with added visual decorations. We need to ensure the media query remains. The target style is "vertical-flow" but the original media query is for mobile. We can't change grid layout because not present. We can apply visual effects to these elements within the media query.

We need to ensure the output only contains the CSS, no markdown.

Let's craft:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d2d2d;
        text-shadow: 0 1px 2px rgba(45,45,45,0.08);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: #87a878;
        color: #faf8f3;
        border-radius: 8px;
        box-shadow: 0 0 24px rgba(135,168,120,0.4), 0 2px 8px rgba(45,45,45,0.12);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .app-hero-section .badge.bg-warning:hover {
        box-shadow: 0 0 32px rgba(135,168,120,0.6), 0 4px 16px rgba(45,45,45,0.18);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(250,248,243,0.85);
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(135,168,120,0.15), 0 4px 16px rgba(45,45,45,0.06);
        transition: box-shadow 0.3s ease, background 0.3s ease;
    }

    .contact-channels-section article:hover,
    .contact-quick-section .contact-card:hover {
        box-shadow: 0 0 32px rgba(135,168,120,0.35), 0 8px 24px rgba(45,45,45,0.1);
        background: rgba(250,248,243,0.95);
    }
}

We added a hover rule for badge and card. Is that okay? It introduces new selectors with pseudo-class. The instruction says pseudo-classes keep. But it also says "Selector lists (commas) preserve". Adding new rules is okay? The task says "Refresh the visual identity WITHOUT changing layout structure or class names. The HTML is FIXED". Adding a :hover state is a visual enhancement. However, we must ensure we don't introduce selectors that weren't there? The instruction says preserve selectors, not necessarily only those. But better to be conservative and only use existing selectors. But we can add pseudo-classes on existing selectors? It says "Pseudo-classes (:hover, :focus, ::before, ::after)" under never change. That likely means if they exist, don't change them. Adding new :hover is not changing, it's adding. But it might be acceptable. However, to be safe, we can keep only the original selectors and add visual properties. The glow effect can be applied to the elements themselves, no need for hover. The halo on hover variant says "Halo on hover: 0 0 32px rgba(accent, 0.6)". So we should include a hover state. We can define the hover state as an additional rule. That is allowed? The instructions say "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." It doesn't forbid adding selectors. But the request says "HTML is FIXED — only colors, shadows, and decorative properties may change." Adding a :hover pseudo-class is decorative. So fine.

But we need to check: The original has no :hover. Adding a :hover rule uses the same base selector plus :hover. That is a new selector, but it's a pseudo-class variation. The "never change" list includes pseudo-classes, but that's about not changing existing pseudo-classes. I think it's okay to add. However, to be maximally safe, we could apply the glow effect without hover using keyframes animation. But target style says "Subtle pulsing animations". We can add a keyframe animation to the badge or cards. But @keyframes names must be preserved? The instruction says "@keyframes names (values inside CAN change)". That implies if there are existing keyframes, we can change values. But we can add new @keyframes? It says "Animation & Media: @keyframes names (values inside CAN change)" - not necessarily adding. But we could define a new keyframe within the media query. However, the output should only CSS, and adding keyframes is fine. But we need to keep the media query. We can add @keyframes inside media query? That's valid CSS.

Let's consider the user request: "Output the rewritten CSS now". The original is a small media query. We should rewrite it visually. Since there are no colors, we can add them. Let's produce a clean version with glow effects and hover.

Need to ensure that the padding remains the same var(--space-md). We can't change that. But we can add background, border-radius, box-shadow. That's fine.

We must also consider the accent color. Let's choose sage #87a878. Background off-white #faf8f3, soft black #2d2d2d.

Let's craft final answer.

But we need to include the media query exactly. The first rule text-align: center; maybe we can add a max-width? No, that's layout. The target vertical flow says narrow content max-width 680-800px centered. But we shouldn't change layout. There is no layout here. We just add visual.

We should not add transform because that might affect layout. But glow effects don't require transform. Use transitions only.

Let's include a subtle pulsing animation for the badge? The variant says "Subtle pulsing animations". We can add:

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 24px rgba(135,168,120,0.4); }
    50% { box-shadow: 0 0 32px rgba(135,168,120,0.6); }
}

And apply to .badge.bg-warning with animation: glowPulse 2.5s ease-in-out infinite; But that might be too aggressive. The variant wants subtle. We can use a gentle pulse. But the original CSS is inside a media query. We can define keyframes inside the media query. However, the instruction says @keyframes names should be preserved if exist. Since none exist, we can create one. But to be safe, maybe avoid keyframes and just use hover. The variant says "Subtle pulsing animations" but not mandatory. The main request is "Refresh this CSS visually" and "EFFECT VARIANT: glow-effects" with "Subtle pulsing animations". So we should incorporate.

Let's think about the structure. The media query is at max-width 575.98px. We can put @keyframes inside it. That's valid.

Let's design:

@media (max-width: 575.98px) {
    @keyframes glow-pulse {
        0%, 100% {
            box-shadow: 0 0 20px rgba(135, 168, 120, 0.35), 0 2px 8px rgba(45, 45, 45, 0.08);
        }
        50% {
            box-shadow: 0 0 32px rgba(135, 168, 120, 0.55), 0 4px 16px rgba(45, 45, 45, 0.12);
        }
    }

    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d2d2d;
        text-shadow: 0 1px 2px rgba(45, 45, 45, 0.06);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: #87a878;
        color: #faf8f3;
        border-radius: 999px; /* pill shape */
        box-shadow: 0 0 20px rgba(135, 168, 120, 0.35), 0 2px 8px rgba(45, 45, 45, 0.08);
        animation: glow-pulse 3s ease-in-out infinite;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .app-hero-section .badge.bg-warning:hover {
        box-shadow: 0 0 32px rgba(135, 168, 120, 0.6), 0 4px 16px rgba(45, 45, 45, 0.14);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(250, 248, 243, 0.9);
        border-radius: 16px;
        box-shadow: 0 0 24px rgba(135, 168, 120, 0.15), 0 4px 20px rgba(45, 45, 45, 0.08);
        transition: box-shadow 0.3s ease, background 0.3s ease;
    }

    .contact-channels-section article:hover,
    .contact-quick-section .contact-card:hover {
        box-shadow: 0 0 32px rgba(135, 168, 120, 0.35), 0 8px 28px rgba(45, 45, 45, 0.12);
        background: rgba(250, 248, 243, 1);
    }
}

We need to ensure that the original selector list for the last rule is exactly:

.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
}

In our rewrite, we also add a hover rule with the same selector list plus :hover. That's fine. But the rule with padding must remain. We changed padding? No, we keep var(--space-md) !important. That's within allowed (actually exactly the same). But we also added background, border-radius, etc. That's fine.

We should be careful about animation name. We used "glow-pulse" with a hyphen. That's a new name. It's okay. But if the animation name is unique, no conflict. The instruction says "@keyframes names (values inside CAN change)" - if we add a new one, it's okay.

However, we need to consider that the @media query is for mobile. Adding animations inside may be fine. We also need to ensure that the animation doesn't affect layout. box-shadow doesn't affect layout.

We used border-radius: 999px for badge. The target says medium radius (8-16px). So maybe use 12px rather than pill. Let's use 12px.

We used 16px for cards. Medium radius 8-16px, so 16px is at the upper limit. Fine.

Let's refine to match the target style: warm minimal, soft black, sage accent. The background of the page likely is #faf8f3. We can set card background to a lighter white. We used rgba(250,248,243,0.9). That's off-white.

Need to ensure that the first rule .app-hero-section .row .col-lg-7 gets color #2d2d2d and a subtle text-shadow. That's good.

Now, we must output only the CSS, no markdown. Let's produce final.

But before final, let's double-check the invariant list. We must not change font-size, and we didn't. We must not change padding beyond ±20%; we kept exactly. We must not change display, position, etc.; we don't use those. We must not change text-align; we kept text-align: center. We added color etc. Good.

One issue: We added a hover rule for .badge.bg-warning. But the original rule did not have a hover. Is that allowed? Let me re-read user instruction: "Selector lists (commas)" are never change. "Pseudo-classes (:hover, :focus, ::before, ::after)" are never change. It might mean any pseudo-classes present in the CSS must remain as-is, not that we can't add new ones. But to be safe, we can avoid adding new pseudo-classes and instead use a keyframe animation that provides the hover effect? But hover is nice. The target effect variant specifically says "Halo on hover: 0 0 32px rgba(accent, 0.6)". That is an explicit request to have a hover state. So we need to add a :hover rule. That is allowed for the refresh. The instruction "never change" is about not breaking the HTML; adding a pseudo-class doesn't break it.

However, the "never change" section includes "Selector lists (commas)" and "Pseudo-classes". If we add a new selector, we are not changing the existing selector, but adding a new one. The phrase "preserving ALL selectors" could be interpreted as the set of selectors should be exactly the same, but that would be impossible to add hover. Yet the target variant asks for hover. So we can add :hover as a separate rule. I think it's acceptable.

Another approach: Put the hover style on the same rule using a pseudo-class? That would change the selector? For example:

.app-hero-section .badge.bg-warning:hover {
    ...
}

That's a new selector, but it's a subset. Not preserving exactly. But target requires it. So we'll add it.

We should also ensure that the animation name doesn't conflict with existing keyframes. We'll use a unique name like "glowPulse". But the instruction says @keyframes names must be preserved? If there were any, we'd preserve. Since none, we can choose. Let's use "glow-pulse".

Now, let's think about the vertical-flow target style. It says "Single column layout: grid-template-columns: 1fr or simple flex column; flex-direction: column where appropriate; Large vertical gaps (48-72px); Narrow content max-width (680-800px) centered". But the original CSS has no such layout. We cannot add layout properties. So we just apply visual identity. The request says "Layout pattern (Aggressive only)" but we are in conservative mode. So we ignore layout changes. The color palette matters.

Let's craft the final CSS carefully.

We need to include the original three rules (with the exact selectors and all original declarations) plus our additions. In the first rule, we add color and text-shadow. In the second, we add background, color, border-radius, box-shadow, transition, animation. In the third, we add background, border-radius, box-shadow, transition. Then add hover rules.

Let's ensure the media query remains exactly @media (max-width: 575.98px) { ... }. We'll output.

One more thing: The file fingerprint and request ID are just context.