/* ============================================================
   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 rewrite the CSS in conservative mode, visual only. But the provided CSS is a media query block with only a couple of rules: text-align, font-size, padding. These are all layout/typography properties that we are NOT allowed to change. However, the instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." But the CSS has no colors, shadows, radius, transitions, gradients. There is only text-align, font-size, and padding. These are forbidden to change (font-size is typography, padding is layout, text-align is typography/layout). So what can we do? We must output the same CSS essentially unchanged? But the task expects a visual refresh. Maybe we need to interpret that we can add decorative properties? But we cannot change selectors or layout. The HTML is fixed, CSS can only change colors etc. Since there are no color properties, the only ethical output is to preserve the CSS exactly, because any change would violate constraints. But perhaps we can add new properties that are purely visual within the same selectors? For example, add a background, border-radius, or box-shadow to .app-hero-section .row .col-lg-7? But that would change the layout? Adding box-shadow doesn't change layout if box-sizing is border-box? But it could affect overflow. However, we are allowed to add visual properties. The rule says "Only change colors, shadows, radius, transitions, gradients." We can add them. But we must not change any existing property values except colors etc. But existing properties are not in the allowed change list. So we must leave those lines exactly as they are. We can add new declarations inside the same rules, provided they are visual-only. But will that affect layout? Possibly not if they are box-shadow, border-radius, etc. But adding border-radius to a column might not break anything. Adding box-shadow might create visual effect. But the original CSS is just a media query for small screens. The class .app-hero-section .row .col-lg-7 is a column. Adding box-shadow to it could be weird but allowed.

However, the instruction says "Refresh this CSS visually" and "Only change colors, shadows, radius, transitions, gradients." The safest path is to preserve the original declarations exactly and add new visual declarations that fit the target style. But also we must not change font-size, text-align, padding. So we keep them.

But the output must be "rewritten CSS" with the same selectors and layout. Since the original CSS has no color properties, there is nothing to change. But we could add a background or border-radius? That changes the visual identity. Let's consider target style "dense-dashboard" and "glow-effects". The selectors are inside a media query. We can add a subtle glow effect to the column? But that might be overkill. Also there is .contact-channels-section article and .contact-quick-section .contact-card with padding important. We could add border-radius or box-shadow to those cards. But the original CSS only overrides padding on mobile. In the context of a larger stylesheet, these are mobile tweaks. Adding box-shadow to article and contact-card in mobile might be okay.

But to be conservative, we should only change what is allowed. Since there are no allowed properties present, we might output the same CSS with no changes. But then it's not "rewritten" and doesn't satisfy the request for visual refresh. However, the instructions are strict: "Only change colors, shadows, radius, transitions, gradients." If there are none, then there is nothing to change. But the task expects us to inject new visual properties. Let's read the prompt carefully:

"Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

This means we are permitted to change those aspects wherever they appear. It does not explicitly say we must add them if absent. But the target style wants glow effects, so we should add shadows and radius to appropriate elements. Also, the original has .app-hero-section .badge.bg-warning with font-size. We cannot change that. Could we add a text-shadow or background? But badge already has bg-warning, we could add a box-shadow. That would be visual. For the .app-hero-section .row .col-lg-7, text-align center is a layout/typography property, we cannot change but can add a background or border-radius? That could be weird. Better focus on the card elements in the last rule: .contact-channels-section article, .contact-quick-section .contact-card. Those are likely cards. We can add border-radius, box-shadow, background? But background might override existing. The original CSS only sets padding. We can add a subtle glow and rounded corners. This fits the target.

But note: the media query is max-width 575.98px. On small screens, cards may stack. Adding box-shadow to cards is fine.

Also the first rule .app-hero-section .row .col-lg-7 is a hero column. Maybe add a text-shadow? But that might affect readability. We can add text-shadow to the badge? Actually the second rule is .app-hero-section .badge.bg-warning { font-size: 0.85rem; }. We can add a box-shadow to the badge for glow. That seems appropriate: a warning badge with glow.

But the instruction says "Only change colors, shadows, radius, transitions, gradients" — not "add" but "change". In a strict interpretation, we cannot add properties that weren't there. But the meta-instruction says "Refresh the visual identity WITHOUT changing layout structure or class names." Adding box-shadow is allowed. The allowed changes list includes "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)" and "border-radius" and "transition" and "filter" etc. So we can add them.

However, we must be careful not to violate "display, position, grid-template-*, flex-direction, width, height, padding, margin, ... font-size, font-weight, line-height, letter-spacing, word-spacing, text-transform, white-space, word-break" etc. We cannot change the existing values of padding, font-size, text-align. But we can add other properties.

Given the original CSS is tiny, the output should be the same selectors with the same declarations plus new visual declarations. We should also consider the color palette and glow variant.

Let's craft a rewritten CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        /* adding a subtle background glow? but background might be overkill */
        border-radius: 16px;
        box-shadow: 0 0 24px rgba(59, 130, 246, 0.15);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 999px;
        box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(30, 41, 59, 0.12), 0 0 0 1px rgba(59, 130, 246, 0.08);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}

But wait: adding transform transition is okay? Transform is not in the allowed list? It says "transition timing, easing, duration" can change, but adding transition is allowed. Adding transform property? We are not adding transform, just transition on transform. But if no transform exists, it's harmless. However, we cannot "change" transform because it's not there. Adding transition-property with transform might be okay. But to be safe, we can transition only box-shadow and background.

Also, we cannot use "transform" because it's not in allowed properties to change? The "NEVER CHANGE" list doesn't include transform explicitly, but it says "display, position, ..." not transform. However, "layout" properties generally include transform? Transform affects layout? It can, but not layout flow. But the instruction says "Keep ALL selectors and layout exactly as-is." Adding a transition on transform doesn't change layout. But adding a transform on hover would change visual. We don't have :hover here, so no need.

Also, the original CSS has no color properties, so we're not "changing" any. The target style says "Cool grays #1e293b, #334155, accent blue #3b82f6". We can use those in box-shadow colors. Good.

But should we include the original text-align and font-size exactly? Yes, because we cannot change them. And padding exactly? Yes.

But there is a subtlety: the original CSS includes `padding: var(--space-md) !important;` with !important. We must keep that exactly.

Now, are we allowed to add `border-radius` to `.app-hero-section .row .col-lg-7`? That could affect the visual container, but maybe not layout. However, a column with border-radius might make background corners rounded, but if no background, nothing visible. Adding a box-shadow to a column might create a glow around the entire column, which could be weird but in hero section it might be okay. Alternatively, we can focus only on the badge and contact cards. Let's think: target style "dense-dashboard" has white cards on slate background, accent blue. For mobile hero section, maybe the column could get a subtle blue glow to draw attention. But since no background is set, box-shadow on a transparent element still renders a shadow around the element's border box. It could be visible. But maybe the column already has a background from other CSS? Unknown. To be safe, we could avoid adding box-shadow to the col-lg-7 to not interfere. But the task asks for glow effects. We can add a text-shadow to the badge, and box-shadow to the badge and cards. The first rule can have a text-shadow? No, text-align only. We can add a background gradient? That might change the visual background of the hero column. But background is a color, allowed. Yet adding background could conflict.

Let's examine the original file fingerprint and context: it's "saishi.css" block 2/2. We only see this media query. There might be other rules in block 1. We are only to rewrite this block. So we should preserve this block's selectors and existing declarations, and add visual enhancements.

Given the "conservative" mode, we should be minimal. Maybe just add a transition and box-shadow to the contact cards and badge. The hero column text-align doesn't need any change.

But the instruction says "Only change colors, shadows, radius, transitions, gradients." If we don't change anything in the first two rules, that's fine. But to refresh the visual identity, we can add a subtle glow to the badge. Let's do:

- .app-hero-section .badge.bg-warning: add border-radius, box-shadow with amber glow.
- .contact-channels-section article, .contact-quick-section .contact-card: add border-radius, box-shadow, transition.

Also, we could add a gradient background to the contact-card? But that might override existing background and not be desired. Avoid.

We need to ensure we don't change the `padding: var(--space-md) !important;` value. We keep it.

Let's craft a clean output. We must output without markdown fences, no comments. So:

@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;
        border-radius: 999px;
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.5), 0 2px 6px rgba(30, 41, 59, 0.12);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 16px;
        box-shadow: 0 4px 24px rgba(30, 41, 59, 0.12), 0 0 0 1px rgba(59, 130, 246, 0.1), 0 0 24px rgba(59, 130, 246, 0.08);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}

But wait, we added transform in transition. Is that allowed? The allowed changes list includes "transition timing, easing, duration" but not transition-property. We can change transition-property? It says "transition timing, easing, duration" can change. Adding a transition is a change. But we must not change layout. Transition doesn't affect layout. However, if there is no transform property, transitioning transform is useless. But maybe the cards have a hover transform elsewhere? Unknown. To be safe, we can transition only box-shadow and border-color. But border-color is not set. We can transition box-shadow and background-color. But background-color not used. Simpler: `transition: box-shadow 0.3s ease;`. That is a transition on box-shadow. Allowed.

Also, the target "glow-effects" suggests a halo on hover. But there is no :hover selector in this media query. We cannot add :hover because that would be a new selector (pseudo-class) and not allowed? Actually pseudo-classes are allowed if they existed. Adding new selectors is not allowed. So we cannot add :hover. We can only add visual properties to existing selectors. The glow will be static.

Should we add a subtle pulsing animation? The target says "Subtle pulsing animations". We can't add @keyframes because that would be a new at-rule and not allowed? The rules say "@keyframes names (values inside CAN change)" but names must stay. Adding new @keyframes is not allowed because it would be a new selector/at-rule. So avoid.

Thus, the output above is good.

But we need to consider if `border-radius: 999px` on a badge changes layout? Badge becomes pill shape, but border-radius is visual only and allowed. Good.

Now, the first rule currently has no visual additions. Should we add anything? The column text-align center is typography, we can't change. We could add a `background` or `border-radius` to the column, but that may be too much. However, to satisfy "refresh visual identity", maybe we can add a subtle `text-shadow` to the hero column? But all text inside would get a shadow, possibly bad. No.

Maybe add a `filter: drop-shadow`? That's allowed but could affect content. No.

Given the target style "dense-dashboard", we might want to give the column a white background with rounded corners and shadow? But the original CSS doesn't set a background. If we add a background, it changes the visual dramatically. But would that break layout? No. However, the original likely has a hero section with background set elsewhere. Adding a background to the column might create a card-like appearance on mobile. But the instruction says "target style dense-dashboard" with white cards on slate background. The column is part of hero, maybe a text column. Adding a white card might be okay but could be too invasive. Conservative mode says "make visual changes only, not layout". Adding background is visual. It might be acceptable.

But the user request says "Refresh the visual identity WITHOUT changing layout structure or class names." So adding background is fine. Yet, the allowed list specifically says "All color values: background, color, border-color, fill, stroke, outline-color" can change. This implies background is a color that can be changed. If there is no background currently, we can add one. But if there is a background from another rule, adding `background` here might override it or add to it. Since we don't see the full CSS, risky. In conservative mode, we should avoid overriding properties not present. The instruction says "Only change colors, shadows, radius, transitions, gradients." That means we can change those values if they exist. Adding new declarations of those types is technically a change to the rule, but not a change to an existing value. It's ambiguous.

To be safe, we can limit additions to properties that are clearly allowed and unlikely to cause harm: border-radius, box-shadow, transition. These are purely decorative and won't affect layout if the element has no background? Box-shadow can create overflow? It doesn't affect layout, but may be clipped by overflow hidden. But okay.

Let's keep the hero column as is. Add glow to badge and cards.

But wait: the `.app-hero-section .row .col-lg-7` rule is inside media query, and it only has text-align. We are allowed to change text-align? No, it's not in allowed list. So we keep it.

We must output only the CSS. No comments.

Let's verify constraints:

- Selectors unchanged: yes.
- Existing properties unchanged: text-align: center; font-size: 0.85rem; padding: var(--space-md) !important; all kept exactly.
- Added properties: border-radius, box-shadow, transition. These are allowed.
- No layout changes.
- No changes to font-family etc.

One concern: adding `transition` property to a selector that didn't have it is allowed because transition timing/easing/duration can change. But we are adding transition-property: box-shadow. That is a property name. The allowed change says "transition timing, easing, duration" can change, not transition-property. But adding a transition shorthand includes transition-property. Is that allowed? I think yes, because the transition shorthand includes timing/easing/duration, and adding it is a visual behavior change. The conservative mode prohibits changing animation-name but not transition-property. But to be strict, maybe we should avoid adding `transition` and only add static shadows. However, the target style includes transitions, and the allowed list includes transitions. So let's include it.

Alternatively, we can use `transition: box-shadow 0.3s ease, border-radius 0.3s ease;` but border-radius transition meaningless. Just box-shadow