/* ============================================================
   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 a small CSS snippet for a mobile media query. The target style is "horizontal-strips" with "glow-effects" variant. The original CSS is:

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

Now, I need to refresh this visually without changing layout. But the original CSS only contains text-align, font-size, and padding. These are all in the "never change" categories (text-align, font-size, padding — though padding can vary ±20%).

However, the task asks to change colors, shadows, radius, transitions, gradients. The original CSS doesn't have any of those. Since I must preserve selectors and layout but add visual identity, I can add color, box-shadow, border-radius, transition properties to the existing selectors, or I can add new declarations within the same rules.

Wait, but the instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Since the original snippet is very minimal, I can embellish it with the target style. The selectors must stay exactly the same. I can add declarations that don't affect layout: colors, box-shadow, border-radius, transition, etc.

Let me think about what the horizontal-strips + glow-effects would look like for these selectors:

1. `.app-hero-section .row .col-lg-7` — text-align: center. I could add a text-shadow glow, or color. Since it's a hero section, I could add a subtle text-shadow.

2. `.app-hero-section .badge.bg-warning` — a warning badge. The original sets font-size. I could add background gradient, box-shadow glow, border-radius, transition, hover effects. But wait — the original uses `bg-warning` which is a Bootstrap class. If I set background-color, it might override Bootstrap. That's fine; the instruction says colors should be changed. I could set background to a gradient, box-shadow with glow, border-radius.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — padding is set. I can add background-color, border-radius, box-shadow, transition, hover glow.

But I must be careful: the hover pseudo-classes — the instruction says "Pseudo-classes (:hover, :focus, ::before, ::after)" are in the never-change category meaning their *selectors* must be preserved. I can add new rules with these selectors? Actually, the instruction says "Selectors: keep EXACTLY" — meaning if the original CSS has `:hover`, I keep it. But can I add `:hover` to selectors that didn't have it? The instruction says "Class names: keep EXACTLY", "Pseudo-classes (:hover, :focus, ::before, ::after)" — this is about not changing existing ones. Adding new rules with the same base selectors plus `:hover` might be acceptable since the HTML is fixed and I'm only adding visual properties. However, to be conservative and safe, I should be cautious about adding new selectors that weren't in the original. The instruction says "Selector lists (commas)" are preserved — so I shouldn't add new selectors to a rule, but I could add separate rules.

Actually, let's re-read: "🏷️ SELECTORS (CRITICAL - HTML is fixed): ... Keep exactly" — this means I must not change the selectors that exist. It doesn't forbid adding new rules with additional pseudo-classes, but that could be seen as changing the selector set. To be safe, I'll only keep the exact same selectors, but I can add declarations inside them. The "glow-effects" hover halo can be achieved by adding a transition and box-shadow; for hover I might need a `:hover` rule. But since the original CSS doesn't have hover, adding a new rule might be risky. However, the task's target style explicitly wants "Halo on hover: 0 0 32px rgba(accent, 0.6)". This implies adding hover rules. I think it's acceptable to add new rules as long as the original selectors are preserved and no layout properties change. But the "self-check" says "Every selector character-for-character preserved?" — that means the original selectors still appear character-for-character. Adding new `:hover` variants doesn't remove them.

Hmm, but "preserving ALL selectors" — I interpret as the rules in the original must remain with the same selectors. Adding extra rules with enhanced selectors is a judgment call. Given the target style explicitly asks for hover glow, I'll add `:hover` rules. But I must be careful that the HTML is fixed — adding hover rules doesn't change HTML.

Wait, the instruction also says "output the rewritten CSS" — and the original is just a media query. I should keep the media query. I'll keep all three rules, add visual declarations, and optionally add hover rules for the badge and contact cards.

Let me design a fresh palette for "horizontal-strips" with alternating white/cream/dark/white and glow accents. Since this is a mobile media query, I can set:

- For `.app-hero-section .row .col-lg-7`: add text-shadow with a soft glow in the accent color. But the hero section might be a light section. Let me pick an accent color. Maybe teal/cyan or amber? Since the badge is `bg-warning`, the accent could be amber/gold. Let's use a warm amber glow: `#ffc107` is warning in Bootstrap. A fresh accent could be `#f59e0b` or `#ffb800`.

Given "Strong color zones" and "Alternating: white / cream / dark / white", the hero might be on a cream background. I'll set a cream background for the hero column? Wait, the selector `.app-hero-section .row .col-lg-7` is the column; setting background on it could affect layout visually but not break layout. But it might look odd. Instead I can just add glow text-shadow.

Actually, since the original only has `text-align: center`, adding background-color could dramatically change the look. That's allowed — visual changes are the point. But I should be careful not to make it ugly.

Let me write the CSS:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1e1b18;
        text-shadow: 0 0 24px rgba(245, 158, 11, 0.4);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffb800, #f59e0b);
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.4), 0 4px 12px rgba(245, 158, 11, 0.25);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .app-hero-section .badge.bg-warning:hover {
        box-shadow: 0 0 32px rgba(245, 158, 11, 0.6), 0 6px 16px rgba(245, 158, 11, 0.35);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(30, 27, 24, 0.08), 0 0 24px rgba(245, 158, 11, 0.15);
        transition: box-shadow 0.3s ease, background-color 0.3s ease;
    }

    .contact-channels-section article:hover,
    .contact-quick-section .contact-card:hover {
        box-shadow: 0 12px 32px rgba(30, 27, 24, 0.12), 0 0 32px rgba(245, 158, 11, 0.4);
        background: rgba(255, 255, 255, 0.95);
    }
}
```

Wait — the original rule for `.contact-channels-section article, .contact-quick-section .contact-card` uses `padding: var(--space-md) !important;`. The `!important` is a declaration, I can keep it. The padding is in the "never change" category but ±20% allowed. I'll keep exactly `var(--space-md)` since changing would risk layout.

Also, I added a hover rule that duplicates the selector list with `:hover`. That preserves the original selectors and adds new ones. Is that okay? I think yes.

But wait — the instruction about "Pseudo-classes (:hover, :focus, ::before, ::after)" says keep exactly. Adding new `:hover` selectors might be considered adding new pseudo-classes. Hmm, the "self-check" says "Every selector character-for-character preserved?" — the original selectors are preserved. It doesn't say "no new selectors". But to be maximally safe, maybe I should avoid adding new selectors and instead just put the hover style inside... but you can't have hover without a selector. Alternatively, I could define `@media (hover: hover)` or use the same selectors with hover. 

Actually, the target style explicitly requests hover halo, so I'll include it. The instruction "Pseudo-classes ... Keep exactly" means don't change existing ones — adding a `:hover` for the interactive effects is part of the requested design. I'll proceed.

Let me also reconsider the hero text-shadow: 0 0 24px rgba(245, 158, 11, 0.4) — that's a glow. Good.

Should I add a subtle pulsing animation? The variant says "Subtle pulsing animations". I could add a `@keyframes` rule. But the original CSS has no keyframes. Adding keyframes is allowed since the instruction says "@keyframes names (values inside CAN change)" — but there are no existing keyframes. Adding new keyframes could be fine. However, to keep it simple and avoid changing layout, I can add a gentle pulse to the badge glow.

Let me add a keyframe:

```css
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 24px rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 36px rgba(245, 158, 11, 0.6); }
}
```

But wait — the instruction says "animation-name (values like duration/timing CAN change)". That implies there are existing animations. Adding new animation names isn't forbidden. But the media query is for mobile; a pulsing animation could be a nice touch. However, this is a small snippet; adding keyframes outside the media query would be a new rule. I need to be careful about the "horizontal-strips" style — alternating backgrounds per strip. The contact cards could be cream colored, the hero could be dark?

Actually, let me reconsider the whole "horizontal-strips" pattern. It says "Full-width sections" and "Alternating background colors per strip". This can't be fully implemented because the HTML/CSS is fixed and I can't target sections I don't have. I can only apply to the given selectors. The contact cards could be arranged in a strip; each article could have alternating backgrounds? But there's only one rule applying to all articles. I could use `:nth-child` but that adds new selectors. Hmm.

Given the constraints, I'll apply the visual identity to the existing selectors: glows on the hero, badge, and cards. The "creamy/white" palette can be expressed in the card backgrounds.

Let me refine the palette:

- Ink/dark: `#1a1512` (warm dark brown)
- Cream: `#faf6ef`
- White: `#ffffff`
- Accent (amber glow): `#f59e0b` / `#ffb800`
- Muted accent: `rgba(245, 158, 11, ...)`

For the hero column, maybe add a creamy background and dark color to create a "dark zone" strip. But `.col-lg-7` is the column inside a row; setting a background on just the column could look broken on mobile. Better to use text-shadow and color.

Actually, there's no background in the original, so the hero section already has its own background from other CSS not shown. I should avoid setting background-color on the col because it might conflict with the existing section background. However, the task is to refresh visual identity; but the original CSS here doesn't define backgrounds. If I set a background on the col, it might create a card-like strip which could be the "strong color zone". Hmm.

I think the safest yet visually impactful approach is:

- `.app-hero-section .row .col-lg-7`: add a subtle text-shadow glow and maybe a dark text color. No background.
- `.app-hero-section .badge.bg-warning`: gradient background, glow shadow, rounded pill.
- Contact cards: cream/white background, soft glow shadow, rounded corners.

Also, there's `.contact-quick-section .contact-card` — a card, so background and shadow fit well.

Let me also consider `transition` — the variant mentions glow effects; transitions are allowed (transition timing, easing, duration can change). Adding transitions is fine.

Now, should I preserve `!important` on padding? Yes, keep it.

Let me write the final CSS. I need to be careful: "No markdown fences, no explanations". Output only CSS.

But wait — the file fingerprint and request ID suggest this is part of a larger file. The snippet includes only the media query. Should I keep only this media query, or the whole file? The user says "File: assets/css/saishi.css#块2/2" (block 2/2), so this is the second block. The original CSS provided is just this media query. So I output only this media query — the rewritten version.

Let me also double-check that I'm not violating the "never change" list:

- `text-align: center` — preserved.
- `font-size: 0.85rem` — preserved.
- `padding: var(--space-md) !important` — preserved.
- Selectors — preserved exactly.
- Media query breakpoint — preserved exactly.

New properties added: color, text-shadow, background (gradient), border-radius, box-shadow, transition.

Wait, `background: linear-gradient(...)` — the instruction says gradients are in the "must change" list, but there was no gradient originally. Adding a gradient is allowed since it's a visual property. However, `background` shorthand might override existing Bootstrap `bg-warning` background color. That's intended.

`border-radius: 999px` for the badge — that's fine.

For the hover rule, I'm using the same selector list plus `:hover`. Let me make sure the comma list is formatted identically? The instruction says "Selector lists (commas)" must be preserved — in my new hover rule, I'm creating a new selector list, which is fine. But to be safe, I'll keep the original rule intact and add the hover rule right after.

Actually, there's a subtle issue: `.contact-channels-section article:hover, .contact-quick-section .contact-card:hover` — this selects the article/card on hover. Fine.

Now let me think about the pulsing animation. I could add a keyframe `glowPulse` and apply it to the badge or cards. The variant says "Subtle pulsing animations". Let's add it to the badge:

```css
.app-hero-section .badge.bg-warning {
    animation: badgeGlowPulse 3s ease-in-out infinite;
}
```

And keyframes:

```css
@keyframes badgeGlowPulse {
    0%, 100% { box-shadow: 0 0 24px rgba(245, 158, 11, 0.4), 0 4px 12px rgba(245, 158, 11, 0.25); }
    50% { box-shadow: 0 0 36px rgba(245, 158, 11, 0.6), 0 6px 16px rgba(245, 158, 11, 0.35); }
}
```

But adding keyframes outside the media query changes the structure. It's still CSS. The instruction says "@keyframes names (values inside CAN change)" — no existing keyframes, but adding is fine. However, the "media query breakpoints (conditions only)" is preserved — I'm not changing it.

Should the keyframes be inside or outside the media query? Keyframes can be inside the media query but it's cleaner outside. However, to keep the output compact and within the same block, I'll put it outside after the media query. But the "first character = first CSS character" — the output starts with `@media`. Adding keyframes after is fine.

Wait, but the target style is specifically for this mobile media query block. If I add keyframes outside, that's fine. But maybe the rest of the file (block 1) has other styles; I'm only rewriting this block. So I should output only the rewritten block. I'll include the keyframes inside the media query to keep everything in one block? Keyframes inside media queries are valid, but animation names defined inside a media query are scoped? Actually, keyframes inside a media query are only applied when the media query matches, which is fine for mobile. But it's a bit unusual. I'll keep keyframes outside to be safe and standard.

However, the instruction "First character = first CSS character" — so if I start with keyframes, that changes the media query? No, I should preserve the media query as the primary structure. I'll put the media