/* ============================================================
   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 provided, but must preserve selectors, layout, etc. The original CSS is a media query block with three rules. We need to change visual properties only. Since the provided CSS is tiny, we need to add color/shadow/radius where applicable? But note: original has only padding and text-align and font-size. Those are layout/typography, which we are told not to change (padding can change within ±20%, but here it's var(--space-md) — we could adjust the custom property? But we don't have definition of --space-md. We should avoid changing padding values materially. We need to make visual changes "colors, shadows, radius, transitions, gradients". The original has no colors/shadows. We can add new properties that don't affect layout? We can add border-radius, background, box-shadow, etc. But we must preserve the selectors and existing declarations. We can add new declarations within the same rules. However, the instructions say "Rewritten CSS" with only visual changes. We can add color, background, border-radius, box-shadow, etc. to the existing rules, but we must be careful not to change layout. The selectors are within media query. The target style is symmetric-grid glow-effects. We can apply subtle glow effects.

Also, we may need to consider that the original CSS might be a fragment from a larger file. We need to refresh the visual identity without changing class names. The provided CSS only contains a media query. We can add visual properties to the existing selectors. We should maybe also add new rules? No, we are to preserve selectors exactly, but can we add new selectors? The instructions say preserve every selector character-for-character. The input has selectors; we must keep them. It doesn't say we cannot add new selectors, but typically we should only output CSS for the same selectors. Adding new selectors might be seen as changing structure? Better to stick to existing selectors and just add/modify visual properties within them.

Given the original has only two rules:
1. `.app-hero-section .row .col-lg-7` with text-align: center
2. `.app-hero-section .badge.bg-warning` with font-size
3. `.contact-channels-section article, .contact-quick-section .contact-card` with padding

We can add visual enhancements to these selectors. For the hero section column, perhaps add text-shadow or background? But it's a column, adding background may affect layout? It doesn't change layout if we add background, border-radius, box-shadow. But if we add padding, it could change layout; we should not add padding except maybe keep as is.

We need to be careful: The media query max-width 575.98px is mobile. We can add glow effects that work on mobile.

Let's design a fresh palette. The target style: symmetric-grid, balanced harmonious palette, consistent shadows, glow effects with accent color. Since the original doesn't specify colors, we can introduce a color scheme. But we don't know the HTML, so we should avoid setting colors on elements that might already have them, because we might override them in a way that harms readability. However, the task says "Refresh the visual identity ... colors, shadows, radius only". We can set color, background-color, background, border-radius, box-shadow, text-shadow. But we must ensure not to break layout.

Given the selectors:

- `.app-hero-section .row .col-lg-7`: a column in hero, text aligned center on mobile. We can add a subtle text glow or background? Perhaps we can add `border-radius` if we also add background? But without background, border-radius has no visible effect. Could set `color` to a new shade? But that may affect existing text if not intended. The color palette says balanced harmonious palette. We can define CSS variables at top? But the input fragment doesn't have :root. We can add a :root block? That would be adding a selector not in original, which might be acceptable? The instructions say "preserve ALL selectors exactly" — that likely means don't change existing selectors, but you can add new ones? It says "Every selector character-for-character preserved?" It implies existing selectors must remain, but not necessarily that no new selectors may appear. However, to be safe, we can avoid adding :root and instead use direct color values. But we can also add custom properties within the existing rules? No, custom properties are declarations.

Let's think: The output is supposed to be a "rewritten CSS" that refreshes visual identity. The original is a media query; we can expand it to include more declarations, and maybe add `:root` variables before the media query. But the file fingerprint says block 2/2, maybe there is another block. We are to output the complete rewritten CSS for this block? We should output the same media query with modifications and possibly additions. The instructions: "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". So if we add a `:root` rule, that's a new selector. Is that allowed? It says "preserving ALL selectors" — that could mean all existing selectors must be preserved, not that new selectors are forbidden. But "The HTML is FIXED — only colors, shadows, and decorative properties may change." Adding a `:root` with variables changes colors but doesn't affect HTML. However, "Selectors: keep EXACTLY" might be interpreted as do not add or remove selectors. The output should have the same selectors as the input. But if the input has just a media query, adding :root would be a new selector, which might be considered a violation. To be safe, we can embed all values as literal colors within the existing rules, avoiding :root.

But we also need to "change all color values" — there are no color values in the original. We can add color values, but we don't have to change existing non-existent ones. The instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must change. Since there are none, we can add new ones. We need to make the CSS "fresh".

Let's craft a new visual identity for these mobile rules:

1. `.app-hero-section .row .col-lg-7` — On mobile, maybe give the column a subtle glowing text or a soft gradient background? But we need to keep text-align center. Adding `color` could be safe. But if the hero has a light background, dark text may be expected. We can set `color: #2b3a4a` or something. But may override theme. However, the task is to refresh, so we can set a new color. Yet, since this is a mobile media query, we might want to keep consistent with desktop. Without seeing rest of CSS, it's risky. We can add a `text-shadow` for glow effect. That's decorative and won't affect layout.

2. `.app-hero-section .badge.bg-warning` — a warning badge. We can change its background gradient, box-shadow glow, border-radius, etc. But the original only has font-size. We can add `background` to override the `.bg-warning` class? If we set `background: linear-gradient(...)`, we might override the Bootstrap warning background, giving a fresh look. That's a visual change. We can also add `box-shadow` glow, `border-radius`. Need to keep font-size unchanged.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — cards. Original sets padding. We can add `border-radius`, `background`, `box-shadow` glow. But adding background may change appearance; that's okay. We should keep padding as `var(--space-md)` but maybe adjust to `calc(var(--space-md) - 2px)`? No, padding within ±20%. We can leave it.

Also, the media query itself might need to be preserved. We can perhaps add a `transition` property to cards for hover? The instructions allow transitions. We can add `transition: box-shadow 0.3s ease`. But in a mobile media query, hover isn't relevant on touch, but it's fine.

Let's also consider the "symmetric-grid" target style. This media query doesn't define grid. We can't add grid properties because layout must not change. But we can ensure glow effects on cards align with symmetric grid.

We need to output only CSS. Let's craft.

We'll use an accent color, say teal or indigo. A balanced harmonious palette: maybe deep navy text, soft cyan accent, warm amber for warning badge? Let's choose:

- Accent: `#6c63ff` (soft purple-blue) or `#00b4d8` (cyan). "glow-effects" with accent. Let's pick `#5b8def` (blue). Or `#7c6cf6`.

- For hero col: `text-shadow: 0 0 20px rgba(92, 107, 247, 0.3)` to give glow to text. Also maybe `color: #1f2a44`.

- For badge: gradient background from `#ffb700` to `#ff9f43`? But `.bg-warning` is bootstrap warning yellow. We can make it a warm gradient with glow: `background: linear-gradient(135deg, #ffd166, #f4a261)`, `box-shadow: 0 0 16px rgba(255, 183, 0, 0.4)`, `border-radius: 999px`? But changing border-radius may affect layout? It's visual. The badge might have rounded already. We can set `border-radius: 12px`. But the font-size is 0.85rem unchanged.

- For contact cards: `background: rgba(255,255,255,0.08)`? But if the theme is dark, this could work. Or `background: #ffffff;` with shadow. We don't know. Maybe use a translucent surface with backdrop-filter? The instructions allow backdrop-filter. But on mobile, backdrop-filter can be expensive. We can add `background: rgba(255,255,255,0.6)` and `backdrop-filter: blur(8px)`. But that might not be visible if parent has no background. To be safe, use a solid background with a tint: `background: #f8f9ff`? Hmm.

Since we need a "fresh palette", we can set card background to a soft gradient: `background: linear-gradient(145deg, #ffffff, #f0f2ff)`. And add glow shadow: `box-shadow: 0 4px 24px rgba(92, 107, 247, 0.15), 0 0 0 1px rgba(92, 107, 247, 0.05)`. This adds a sharp inset border? Actually `0 0 0 1px` creates a border-like shadow. We can also set `border: 1px solid rgba(92, 107, 247, 0.1)`? But border-style/color allowed, border-width not to change? The instructions say "border-color and border-style (NOT border-width)". If we add a border, that changes border-width from 0 to 1px, which is a layout change? Actually box-sizing border-box would include, but the original had no border. Adding a border could affect layout dimensions. We should avoid adding border to existing elements unless via box-shadow. So use box-shadow outline.

Similarly, adding padding? Not needed.

For hero col, we might add a `background` with a radial gradient? But it's a column inside a row; adding background could affect layout? Background doesn't affect layout, only painting. Border-radius would be visible only if background is set. We can set a subtle radial gradient and border-radius `24px`? But the column might span full width. Adding a background to a column could create a card-like look. Is that desirable? Possibly. But "symmetric-grid" not relevant. We should not change layout, but adding background doesn't change layout. However, it could change the visual design significantly. We need to be careful with mobile hero column: it's text centered. Adding a background might make it look like a banner. That's a visual identity refresh.

Let's craft the CSS:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1e2b45;
        text-shadow: 0 2px 24px rgba(94, 96, 206, 0.25);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffe07a, #f5b84b);
        box-shadow: 0 0 12px rgba(255, 193, 7, 0.6), 0 0 28px rgba(255, 193, 7, 0.3);
        border-radius: 12px;
        color: #4a3200;
        transition: box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(240,244,255,0.9));
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(94, 96, 206, 0.12), 0 0 0 1px rgba(94, 96, 206, 0.06);
        backdrop-filter: blur(8px);
        transition: box-shadow 0.35s ease, transform 0.35s ease;
    }

    .contact-channels-section article:hover,
    .contact-quick-section .contact-card:hover {
        box-shadow: 0 12px 40px rgba(94, 96, 206, 0.22), 0 0 32px rgba(94, 96, 206, 0.18);
    }
}
```

But we added `:hover` rules with selectors that are not in original. Is that allowed? The instructions say preserve pseudo-classes? It says "Pseudo-classes (:hover, :focus, ::before, ::after)" must be kept if in original. It doesn't say adding new pseudo-classes is forbidden, but it would be adding a new selector. To be safe, maybe avoid adding new rules. We can include the hover state within the same rule? No, that would apply hover only? Actually we can add `box-shadow` to the base and then a separate rule with `:hover`. But that's a new selector. I'd rather avoid adding new selectors to adhere strictly. The task says "Keep ALL selectors and layout exactly as-is" — "as-is" means exactly the same set. So no new selectors. We can still add `transition`, but without hover state, it doesn't do much. Still okay.

We can add `transition` to the base rule; the transition property change is allowed. But if no hover, it won't animate. We could use `@media (hover: hover)`? That's a media query addition, not ideal.

Maybe we can add `animation` with `@keyframes`? The instructions allow @keyframes names, but adding a new @keyframes rule would add a new at-rule, not a selector. But "preserving ALL selectors" may not apply to keyframes. However, it's safer to avoid adding extra @keyframes. The effect variant says "Subtle pulsing animations" but we can ignore if it requires adding keyframes. We can still create glow shadows without animation.

We could also use `backdrop-filter` on the card. That's fine.

Need to ensure we don't change padding more than ±20%. We keep `var(--space-md)` exactly. Good.

For the badge, original only font-size; adding `color` changes text color. Is that okay? Yes.

But we should be mindful: The class `.bg-warning` in Bootstrap sets `background-color: #ffc107 !important` (depending on version) and `color: #212529` maybe. Our `background` property will override the background-color if not important? Actually `.bg-warning` sets `background-color`, and our `background` shorthand will override it. But Bootstrap uses `!important`? In Bootstrap 4, `.bg-warning` sets `background-color: #ffc107 !important;`. To override, we need `background-color` with `!important` too? Or use `background` with `!important`? The original CSS didn't have `!important`. We can add `!important`? That might be acceptable but could change specificity. But the instructions say not to change selectors. We can add `!important` to declarations? It's not a layout property. But maybe we should avoid potential Bootstrap conflict. Since this is a custom CSS file, it likely overrides Bootstrap. To be safe, we can use `background-color` instead of `background` and include `!important`? Hmm.

But we are not told to preserve the cascade. We can set `background: linear-gradient(...) !important;` to override. That's a visual change. Is adding `!important` okay? It doesn't change selector. I think yes.

Let's add `!important` to background, box-shadow, border-radius? Not necessary for box-shadow. For the badge, we should use `background: ... !important;` to ensure override. But the original didn't have !important. The rule `.app-hero-section .badge.bg-warning` has higher specificity than Bootstrap's `.bg-warning`? Actually `.app-hero-section .badge.bg-warning` (0,3,0) is higher specificity than `.bg-warning` (0,1,0), so it should override even without !important. So no need.

For cards, `.contact-channels-section article` has specificity (0,1,1) and `.contact-quick-section .contact-card` (0,2,0). No conflict maybe.

Now, the original media query is `@media (max-width: 575.98px)`. We need to output the exact same media query. The selectors must be exactly as original. We can reorder? No.

Let's also consider adding custom properties? Not necessary.

We must ensure "first character = first CSS character". So we output starting with