/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

The user wants me to rewrite the CSS in "conservative mode" - only visual changes allowed. The original CSS is a media query block with three rules:

1. `.app-hero-section .row .col-lg-7` - text-align: center (layout, cannot change)
2. `.app-hero-section .badge.bg-warning` - font-size: 0.85rem (typography, cannot change)
3. `.contact-channels-section article, .contact-quick-section .contact-card` - padding with !important (padding, can change ±20%)

Wait, but these are all layout/typography properties that are in the "never change" list:
- text-align: vertical-align is in the never change list
- font-size is in the never change list
- padding is in the never change list (keep similar values, ±20% maximum)

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

But the original CSS has no colors, shadows, radius, transitions, or gradients. All the properties in the original are layout/typography properties that I'm told never to change.

So what can I do? The target style is "masonry-flow" with "glow-effects" variant. The color palette is Pinterest-like: white cards, soft shadows on light gray bg.

Since the original CSS only has:
1. `text-align: center` - this is vertical-align/text-align (never change)
2. `font-size: 0.85rem` - font-size (never change)
3. `padding: var(--space-md) !important` - padding (can change ±20% max)

But the task instructs me to refresh visually. I can only change the properties allowed. The padding can be shifted slightly (±20%), which means I can change `var(--space-md)` to a different value? Actually the instruction says "padding, margin (keep similar values, ±20% maximum)". So I could adjust padding slightly.

But for the other two rules, I cannot change the properties at all. However, I can ADD new visual properties to the existing selectors. For example:
- Add box-shadow, border-radius, transition, background-color, etc. to `.contact-channels-section article` and `.contact-quick-section .contact-card`

But wait - the media query is `@media (max-width: 575.98px)` - this is a mobile breakpoint. The original rules are:
1. Center text in hero section
2. Smaller badge font
3. Reduce padding on contact cards

Since I can't change the existing declarations, but the task wants a visual refresh, I should add new visual declarations to the selectors while preserving the original ones. But I need to be careful - the selectors must be preserved exactly.

Actually, in conservative mode, the rule says I may only change visual properties. The original has no visual properties I can change. So the only compliant approach is to:
1. Keep the original declarations exactly as-is (since text-align and font-size cannot change)
2. For the padding rule, I could adjust it slightly (within ±20%)
3. Add new visual declarations (colors, shadows, radius, transitions) to the same selectors

But adding new declarations could be considered adding styles not in the original. The task says "Refresh this CSS visually" and "Only change colors, shadows, radius, transitions, gradients." The target style is masonry-flow with glow effects. I think the intent is to add glow/visual effects within the constraints.

Wait, but I need to re-read the original file. It says "File: assets/css/saishi.css#块2/2" - this appears to be a fragment. The original CSS provided is just the media query block. The target style mentions:
- flex-wrap: wrap with varied flex-basis values
- grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))
- Items with different aspect-ratios
- Medium gap (16-24px)

But the original selectors are `.app-hero-section .row .col-lg-7`, `.badge.bg-warning`, `.contact-channels-section article`, `.contact-quick-section .contact-card` - these are not masonry cards. The "aggressive" layout pattern just describes the target inspiration but I cannot change layout since HTML is fixed.

I think the safest output is:
1. Keep all selectors and the media query exactly
2. Keep the original declarations (they are non-visual or minimally visual)
3. Add new visual declarations to the existing selectors - like glow shadows on the contact cards, transitions, etc.

Since the target style emphasizes "glow effects" with accent color halos, I can add:
- `box-shadow: 0 0 24px rgba(accent, 0.4)` to the contact cards
- `transition: box-shadow 0.3s ease`
- `border-radius: 12px`
- Maybe a light background

But wait - the `contact-channels-section article` and `.contact-quick-section .contact-card` selectors use `padding: var(--space-md) !important`. If I add a box-shadow, it might look odd, but it's a visual refresh.

Also, the `.app-hero-section .badge.bg-warning` - I can add `box-shadow`, `border-radius` to make it glow. The warning badge typically has a yellow background. I could keep the original font-size and text-align, and add glow shadow.

Let me also adjust the padding slightly within ±20%. `var(--space-md)` - I don't know its value, but I could change it to `calc(var(--space-md) * 0.9)` to stay within 20%. Actually safer to just keep it as-is or slightly modify.

Actually, let me reconsider. The rule: "padding, margin (keep similar values, ±20% maximum)" - so I can modify padding. But the rest are locked.

Given the strict constraints, the output should be:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        box-shadow: 0 0 16px rgba(255, 170, 0, 0.55);
        border-radius: 999px;
        transition: box-shadow 0.25s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.08);
        box-shadow: 0 0 24px rgba(accent, 0.4);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}
```

Wait but I can't change `transform` - transform is not in the layout list... Actually transform is not explicitly listed. It's a visual property that changes position, which could affect layout. In conservative mode, I should avoid transform since it could visually shift elements. The target style says "Halo on hover" - I'd add `:hover` pseudo-classes, but the selectors must be preserved exactly - I can add new selectors? No, "Pseudo-classes (:hover, :focus, ::before, ::after)" are listed under "keep exactly" meaning I can't add new ones? Actually it says keep selectors exactly - the selector list includes pseudo-classes. Adding a `:hover` selector would be adding a new selector, not preserving existing ones. But the instruction says "Selectors: keep EXACTLY" - so I should not add new selectors.

Hmm, but the effect variant wants "Halo on hover: 0 0 32px rgba(accent, 0.6)". I can't add `:hover` pseudo-classes because that would change selectors. Unless... the original CSS fragment doesn't have any hover rules, so I can't add them.

Wait, actually re-reading: "Pseudo-classes (:hover, :focus, ::before, ::after)" under "NEVER CHANGE" means keep the existing ones exactly as they are. Adding new ones is not explicitly forbidden but would technically change the selector list. In a strict conservative mode, I should not add new selectors.

So for the hover effect, I can use `transition` on the box-shadow but without a hover rule, it won't do anything. Alternatively, I can just set a static glow that's between the two intensities.

Given the inputs, the best approach is to add static visual flair within the existing rules:
- Glow shadows on the badge and cards
- Rounded corners
- Subtle background tint

For the palette (Pinterest-like): white cards, soft shadows on light gray bg, accent color. Since the media query is for mobile, I'll use dark-friendly or light colors? The original uses `.bg-warning` (yellow badge) and `--space-md`. The site seems to have CSS variables. I'll use variables and rgba values.

Let me craft the output carefully:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 999px;
        box-shadow: 0 0 20px rgba(255, 193, 7, 0.45);
        background: linear-gradient(135deg, #ffc107, #ff9800);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.06);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 0 24px rgba(99, 102, 241, 0.35);
        backdrop-filter: blur(8px);
        transition: box-shadow 0.3s ease, background-color 0.3s ease;
    }
}
```

But wait - I changed `background` on `.badge.bg-warning`. The original didn't have a background color there, but `.bg-warning` is a Bootstrap class that likely has `background-color: #ffc107` with `!important` or specificity. If I add a gradient background, it could override Bootstrap's `.bg-warning` utility. But since `bg-warning` is important in Bootstrap... Actually Bootstrap's `.bg-warning` is `background-color: var(--bs-warning) !important`. My `background: linear-gradient(...)` won't override it due to `!important`. To be safe, I'll use `box-shadow` and other properties that won't conflict. I'll avoid background changes on the badge.

Also `backdrop-filter` - is it allowed? Yes, "filter, backdrop-filter" is in the changeable list. But it could have performance issues on mobile. Still, it's allowed.

Let me also reconsider the padding change. The instruction says padding can vary ±20%. I could do `padding: calc(var(--space-md) * 0.9) !important;` to slightly shrink. That's within 20%. Let me apply that.

Actually, since this is a media query for small screens, and the original pads cards with `--space-md`, keeping it the same is safer. The instruction says "keep similar values" - same is within similar. I'll keep `var(--space-md)` but maybe tweak? No, keeping it is fine and safest.

Should I change anything in the first two rules? They have no visual properties except font-size and text-align which are locked. I could add a new declaration like `color` to the badge? But that would override Bootstrap's text color for the badge. Hmm.

I'll keep the first rule untouched, and for the badge I'll add glow border-radius and shadow. For the contact cards I'll add the glow treatment.

The target palette: Pinterest-like white cards, soft shadows on light gray bg, accent strips. Since I can't add pseudo-elements (they'd be new selectors), I can't add accent strips via `::before`. So I'll use box-shadow glow in an accent color.

Let me pick accent colors: a soft indigo/blue like `#6366f1` or a warm coral like `#ff6b6b`. Pinterest-like: white card, subtle gray shadow. For glow variant: `0 0 24px rgba(accent, 0.4)`.

On mobile, the background might be dark or light. Without seeing the full CSS, I'll assume dark theme? The variable `--space-md` suggests a design system. I'll use translucent whites that work on both.

Actually, since I'm told not to add "AI-REWRITTEN" comments and output only CSS, let me just write clean CSS.

Final decision:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(255, 193, 7, 0.45);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 16px;
        box-shadow: 0 4px 24px rgba(17, 24, 39, 0.08), 0 0 24px rgba(99, 102, 241, 0.35);
        transition: box-shadow 0.3s ease, border-color 0.3s ease;
        border-color: rgba(99, 102, 241, 0.25);
    }
}
```

Wait - `border-color` - the original might not have a border. Adding `border-color` without `border-style`/`border-width` does nothing. I should avoid that. Let me use `outline` or nothing.

Also `background: rgba(255,255,255,0.06)` - adding a translucent background could change the look. Since the original had no background property, adding one is a visual change allowed. But I need to be careful about `!important` on padding only.

Let me also consider: the original `.contact-channels-section article, .contact-quick-section .contact-card` has `padding: var(--space-md) !important`. I can change padding value within 20%: `padding: calc(var(--space-md) * 0.9) !important`. Actually, that might mess with the layout slightly, but it's allowed. However, the instruction says "keep similar values, ±20% maximum" - `calc(var(--space-md) * 0.9)` is 90%, within 80-120% range. That's fine.

But is it worth the risk? Probably not. I'll keep the padding identical to avoid any layout shift, since the guideline allows "keep similar" and exact is similar.

Actually, to demonstrate a "refresh", maybe I should slightly change padding. But the conservative mode says don't break layout. Keeping exact padding is the safest. I'll keep it.

So the final output should be the three rules, with original declarations preserved, plus added visual declarations.

Let me also add `backdrop-filter: blur(6px)` for a frosted glass effect, which is a visual change. And maybe `transition` on the cards.

One more consideration: the target style mentions "Subtle pulsing animations" but I can't add @keyframes because the original CSS doesn't have any in this fragment, and adding one would be a new @keyframes... The rules say "@keyframes names (values inside CAN change)" - meaning existing @keyframes can be modified, but adding new ones? It's ambiguous. To be safe, I won't add new @keyframes. I'll skip it.

Also, no hover effects because I can't add :hover selectors.

Now let me write the complete output:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(255, 193, 7, 0.4), 0 4px 12px rgba(255, 193, 7, 0.25);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.05);
        box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08), 0 0 24px rgba(129, 140, 248, 0.35);
        backdrop-filter: blur(6px);
        transition: box-shadow 0.3s ease, background 0.3s ease;
    }
}
```

Hmm, but adding `background: rgba(255, 255, 255, 0.05)` might make dark cards slightly lighter. That's a visual change. Fine.

Wait, `transition: box-shadow 0.3s ease, background 0.3s ease` - this transition won't have a hover state to trigger, but it's harmless and could trigger on other state changes like focus-within or media query entering. Still, it's allowed as a visual property.

But adding a transition that never fires is a bit pointless. Still, the instructions say transitions can change, and adding them is a visual refresh.

Let me simplify: just use box-shadow, radius, and keep it clean.

Let me reconsider whether I should change the `font-size: 0.85rem` - no, font-size is locked.

What about text-align: center? Locked.

So the only meaningful changes are on the contact cards and badge.

Let me also ensure `.app-hero-section .row .