/* ============================================================
   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 CSS with a fresh visual identity while keeping selectors and layout exactly the same. Let me analyze the original CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

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

This is a media query block. I need to keep:
- The media query breakpoint: `(max-width: 575.98px)`
- All selectors exactly
- All layout properties: `text-align`, `font-size`, `padding`

But I can change:
- Colors, shadows, radius, transitions, gradients

However, the original CSS only has layout and typography properties in the media query. There are no colors, shadows, borders, etc. to change. 

The instructions say:
- ✅ MUST CHANGE: colors, box-shadow, text-shadow, border-radius, gradients, transition, filter, backdrop-filter, opacity, outline, border-color, caret-color, accent-color, CSS custom properties
- 🔒 NEVER CHANGE: selectors, layout, typography

So I need to add visual properties (colors, shadows, etc.) without changing the existing layout properties. I can add decorative properties to the existing selectors.

Let me think about what to add:

1. For `.app-hero-section .row .col-lg-7` - I could add text-shadow, maybe a subtle glow to the text. Hmm, this is a hero section text container. For "glow-effects" variant, maybe a subtle text shadow.

2. For `.app-hero-section .badge.bg-warning` - the badge with bg-warning. I could add box-shadow, border-radius, maybe a glow shadow in accent color. But wait — the class is `.bg-warning` which is a Bootstrap utility. But I shouldn't change the selector. I can add box-shadow, border-radius, transition to it.

3. For `.contact-channels-section article, .contact-quick-section .contact-card` - the cards. I can add box-shadow, border-radius, transition, background, border, etc.

The target style is "masonry-flow" with Pinterest-like white cards, soft shadows on light gray bg, each card has accent strip. Effect variant: glow-effects with glow shadows, halo on hover, medium radius (8-16px), subtle pulsing animations.

But I cannot add @keyframes if there are none? Actually I can add @keyframes — the rules say "@keyframes names (values inside CAN change)". It doesn't say I can't add new keyframes. But it's a media query block. Adding keyframes inside a media query is valid CSS. Actually, @keyframes inside media queries is allowed (though the keyframes are global but conditional). Hmm, actually @keyframes inside @media is valid and the keyframes are only applied when the media query matches. Let me be careful though.

Actually, let me re-read the instruction: "ONLY the rewritten CSS" — so I keep the media query wrapper and the same selectors. I can add new declarations within the existing rules. I should NOT add new selectors. I can add new @keyframes because the rule says "@keyframes names (values inside CAN change)" — but adding new keyframes could be considered changing animation-name? Hmm.

Let me think about the constraints more carefully:

- Selectors: keep exactly (the three selectors)
- Layout: keep text-align: center, font-size: 085rem, padding: var(--space-md) !important (and keep the padding value within ±20%)
- Typography: keep font-size as is.

I can add decorative properties to these rules:
- box-shadow
- border-radius
- transition
- background (gradient)
- border-color
- text-shadow
- etc.

The original CSS only has 3 rules. I'll add visual properties that fit the glow-effects variant.

Let me design:

For `.app-hero-section .badge.bg-warning`:
- It's a warning badge. Warning is typically yellow/orange. I could give it a warm amber gradient background, a glow shadow in accent color (e.g., amber glow 0 0 24px rgba(255, 193, 7, 0.4)), rounded pill radius, and a transition.
- But I must be careful: the class is `bg-warning` — if I set a background, it will override the Bootstrap warning background. Since this is a visual refresh, that's OK.

For the cards:
- White background, soft shadow, medium radius (12px), border with subtle accent, transition on hover, hover glow.
- Add a subtle pulsing animation? That might be too aggressive. But the variant wants "subtle pulsing animations". I could add `transition` and maybe an `animation` on hover? Hmm, but animations require @keyframes.

Actually, I could add a `box-shadow` with a pulsing animation. But adding a new @keyframes inside the media query is possible. Let me think — is it allowed to add new keyframes? The rules say KEYFRAMES: "@keyframes names (values inside CAN change)" — this implies existing keyframes can have changed values. It doesn't explicitly forbid adding new ones. But it says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Adding @keyframes doesn't change selectors or layout. It's a decorative animation. I think it's acceptable, but risky. The safest approach is to use transitions only, and maybe a `filter` drop-shadow. But the variant explicitly says "Subtle pulsing animations" — so I should include one.

Hmm, but the file is just this media query. The user asks to rewrite this CSS visually. I'll add a subtle glow pulse animation to the cards. Since @keyframes is a top-level construct (though inside media query is valid), I'll add it within the media query.

Wait — actually, placing @keyframes inside @media is valid CSS and will be properly scoped. Let me verify: Yes, CSS Conditional Rules module allows @keyframes inside @media. However, some older browsers had issues. But the output is CSS that will be used, so let me keep it safe. Actually, to be safe, I could put @keyframes outside @media. But the instruction says first character = first CSS character of the rewrite, and I should preserve the structure. I think putting @keyframes outside the media query would add new rules outside @media, which might be fine. But to keep the structure intact, I'll put keyframes inside the media query — it's valid.

Hmm, actually let me reconsider. The variant says "Subtle pulsing animations". I could implement pulsing via `animation` on the elements. But the elements only exist in the mobile breakpoint context. Let me add:

```css
@keyframes soft-glow-pulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(255, 193, 7, 0.35);
    }
    50% {
        box-shadow: 0 6px 32px rgba(255, 193, 7, 0.55);
    }
}
```

Wait, but this would be applied to both the badge and the cards. Different accent colors might conflict. Let me use separate keyframes or use a single pulse with neutral accent.

Actually, let me keep it simpler. Let me design the visual identity:

Palette (Pinterest-like with glow):
- Background (the app hero section?): I can't change section backgrounds without new selectors. I shouldn't add selectors.
- White cards: `background: #ffffff;`
- Soft shadows: `box-shadow: 0 2px 16px rgba(31, 41, 55, 0.08), 0 0 24px rgba(255, 255, 255, 0.6);` Hmm.
- Accent strip: Each card may have its own accent strip. I can simulate that with `border-top: 3px solid` different accent colors. But the two selectors are different:
  - `.contact-channels-section article` — could have a blue accent
  - `.contact-quick-section .contact-card` — could have a green accent

That satisfies "Each card may have its own accent strip".

For glow effects:
- `box-shadow: 0 0 24px rgba(accent, 0.4)` glow shadow in accent color
- Halo on hover: `0 0 32px rgba(accent, 0.6)`

Since we're in a mobile media query, hover is less relevant, but I'll include it.

Let me write the rewritten CSS:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 2px 24px rgba(255, 255, 255, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd166, #ffb703);
        border: 1px solid rgba(255, 183, 3, 0.6);
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(255, 183, 3, 0.4), 0 4px 12px rgba(255, 183, 3, 0.2);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .app-hero-section .badge.bg-warning:hover {
        box-shadow: 0 0 32px rgba(255, 183, 3, 0.6), 0 6px 16px rgba(255, 183, 3, 0.3);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border-top: 3px solid #4cc9f0;
        border-radius: 14px;
        box-shadow: 0 4px 16px rgba(26, 32, 44, 0.08), 0 0 24px rgba(76, 201, 240, 0.12);
        transition: box-shadow 0.35s ease, transform 0.35s ease;
    }

    .contact-channels-section article:hover,
    .contact-quick-section .contact-card:hover {
        box-shadow: 0 8px 28px rgba(26, 32, 44, 0.14), 0 0 32px rgba(76, 201, 240, 0.4);
        transform: translateY(-2px);
    }

    .contact-quick-section .contact-card {
        border-top-color: #06d6a0;
        box-shadow: 0 4px 16px rgba(26, 32, 44, 0.08), 0 0 24px rgba(6, 214, 160, 0.12);
    }

    .contact-quick-section .contact-card:hover {
        box-shadow: 0 8px 28px rgba(26, 32, 44, 0.14), 0 0 32px rgba(6, 214, 160, 0.4);
    }
}
```

Wait, but I added new selector groups like `.contact-channels-section article:hover` — that's a pseudo-class, which is allowed ("Pseudo-classes (:hover, :focus, ::before, ::after)" are preserved — meaning I can use them? Actually the constraint list says "Pseudo-classes (:hover, :focus, ::before, ::after)" under "NEVER CHANGE" — meaning keep them exactly as they are. But the original doesn't have :hover. Adding a :hover pseudo-class is adding a new selector, which isn't "preserving" existing ones. Hmm.

The instruction says: "🏷️ SELECTORS (CRITICAL - HTML is fixed): ... Pseudo-classes (:hover, :focus, ::before, ::after)" — this is in the "NEVER CHANGE" section. It means I should not change existing pseudo-classes. But can I add new ones? The goal says "same layout, fresh color palette + shadow/radius identity". Adding :hover rules is a common way to add hover glow. But strictly, adding new selectors is a change to selectors. The rule "Class names: keep EXACTLY" doesn't forbid adding new selector rules, but the spirit is "preserving ALL selectors" — adding extra ones might violate.

Hmm, let me re-read: "Output only the rewritten CSS, preserving ALL selectors and layout exactly". This suggests the set of selectors should be the same. Adding new rules with `:hover` might be seen as not preserving exactly. However, the effect variant explicitly says "Halo on hover: 0 0 32px rgba(accent, 0.6)". So to achieve the hover halo, I need a :hover rule. This is a tension between the conservative constraint and the effect variant.

The mode is CONSERVATIVE (HTML fixed, visual changes only). The target style says "Aggressive only" for layout pattern, but the mode is conservative. So I should be careful. The effect variant "glow-effects" is explicitly requested, so hover halo should be included. Hover states don't change layout structure or class names. Adding :hover pseudo-class rules is within "visual changes only" since pseudo-classes are part of the visual behavior.

Actually, re-reading the constraint list again: "Pseudo-classes (:hover, :focus, ::before, ::after)" is listed under NEVER CHANGE. This means existing pseudo-classes in the input must be preserved as-is. But if the input has none, adding new ones doesn't violate "preserving" — it violates "never change" only if I'm changing existing ones. Hmm, "NEVER CHANGE" is about not changing selectors. Adding new selectors is a change.

I think the safest interpretation for a conservative mode: keep the exact same selector set and rule set, but add visual declarations. Adding :hover rules is a gray area.

Given the explicit "Halo on hover" in the effect variant, I'll include :hover rules. The user's task says "Refresh this CSS visually... Only change colors, shadows, radius, transitions, gradients." Adding hover glow is a shadow/transition change. I'll add :hover selectors that mirror the same class names with :hover. I think this is acceptable given the variant explicitly requests it.

Also, I used `transform: translateY(-2px)` — but transform might be considered layout-affecting? The NEVER CHANGE list doesn't include transform. It includes display, position, grid, flex, width, height, padding, margin, gap, justify-content, align-items, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, text-align, vertical-align. Transform is not in the list, so it's allowed. But it could affect layout visually (moving the element). Since it's a visual-only change (translated the element a bit), it's fine. But to be safe, I might avoid transform and only use box-shadow for the hover halo. Actually, a subtle translateY is a visual effect. I'll keep it minimal or remove it. Hmm, the variant's spotlight is on glow, not lift. I'll keep the transform out to be purely conservative. Let me just use box-shadow and transition.

Also, transition itself is allowed ("transition timing, easing, duration" must change). I'm adding transitions.

Now, about the `padding: var(--space-md) !important;` — I must keep this exactly since padding is in the NEVER CHANGE list (±20% max). I'll keep it as is.

`text-align: center` — keep exactly.
`font-size: 0.85rem` — keep exactly.

Now, for the badge `bg-warning`, adding a `background` gradient overrides Bootstrap's `.bg-warning`. That's a visual change. Good.

But wait — should I add `background: #fff` to the cards? The target says "white cards" — yes.

However, the original cards might have their own background from other CSS not shown. Adding background here is fine; it changes visual identity.

Also the "accent strip" — I used `border-top` with a color. But `border-color` is allowed to change; `border-style` allowed; `border-width` NOT allowed (cannot change border-width). Adding a `border-top: 3px solid` adds a border-width. Hmm, "border-color and border-style (NOT border-width)" — this means I cannot set border-width. So I cannot add `border-top: 3px solid`. If I want an accent strip without changing border-width, I could use `outline`? Outline has width too. Or `box-shadow` inset? Or `background-image` gradient as the strip? 

Yes — I can use a gradient background to create an accent strip. For example:

```css
background: linear-gradient(180deg, #4cc9f0 0, #4cc9f0 4px, #ffffff 4px);
```

This creates an accent strip at the top without changing borders. Or use `::before` pseudo-element? But that would add a selector (`.contact-channels-section article::before`). The rules say pseudo-elements are in the NEVER CHANGE list — existing ones preserved. Adding new ::before rules is a gray area.

Using a gradient background for the accent strip is the safest because it's a `background` value (gradient colors/stops explicitly allowed to change). Great.

So for the cards:
- White background
- Accent strip via gradient:
  - `.contact-channels-section article`: `background: linear-gradient(180deg, #4cc9f0 0, #4cc9f0 4px, #ffffff 4px);`
  - `.contact-quick-section .contact-card`: same but with green `#06d6a0`

Wait, but if I override the background entirely, the card becomes white with an accent strip. Good.

But careful: the second rule sets padding, background, border-radius, box