/* ============================================================
   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 output CSS rewritten with conservative mode. But the original CSS is only a media query with limited properties. It includes padding (layout, cannot change except ±20%; but it's !important and property padding with var(--space-md) — we cannot change var definition? We can change CSS custom properties? The instructions say can change CSS custom properties (--color-*, --shadow-*) values. But --space-md is a spacing token, not color/shadow. We should keep padding value as var(--space-md) maybe or adjust? Since layout requires keep similar padding ±20%, but we should not change it basically. We can change only colors, shadows, radius, transitions, gradients. However this CSS block doesn't have colors. We need to "refresh visual identity" yet no colors to change. The only allowed changes could be maybe add box-shadow? But adding properties could be okay if they are decorative. We cannot change layout. Need to preserve selectors and properties exactly? We can add new properties that are visual (e.g., box-shadow, transition) but we should not change existing layout properties. However the instruction is to only change colors, shadows, radius, transitions, gradients. This block has none. So we need to perhaps transform the media query to include some visual updates that are compatible with the selectors. But careful: The original CSS has no colors, so maybe we need to keep it as is? But task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Since there are none, output may be identical. But there is target style and effect variant suggesting we should add glow effects, maybe introduce new properties to existing selectors. We are allowed to change only visual properties. Could add box-shadow to `.contact-channels-section article, .contact-quick-section .contact-card`? But adding box-shadow not present originally is a change. That's allowed as decorative. But need to not change layout. Also within media query, we can add transform? No, transform is visual but also may affect layout? It could, but if it's just glow, okay. We can add border, transition, etc. However preserving "ALL selectors and layout exactly as-is" means we should keep selectors same, keep existing declarations same. Adding new declarations might be acceptable since they don't alter layout. But we must be careful: Adding a border could change box-sizing and affect layout, but if border-width not changed, can use box-shadow instead. 

Let's examine original:

@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 mobile media query. Target style: asymmetric-blocks, glow-effects. The media query is for small screens. Could adjust `font-size`? It's typography, cannot change. `text-align` is layout/text, cannot change. `padding` is layout, keep similar. So the only viable modifications are adding glow effects to the elements listed, e.g., `.app-hero-section .badge.bg-warning` could get a box-shadow, border-radius, etc. But badge is inline? Might be okay.

But the user wants "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." If there are no colors/shadows etc, the output would be same. But likely they expect to produce a CSS with visual enhancements, maybe adding a filter/backdrop-filter? Yet the original is small. Maybe we need to interpret "visual identity" as applying new color palette to these elements using existing class hooks. For example:

- `.app-hero-section .badge.bg-warning` can get background: instead of `bg-warning` from Bootstrap? But `bg-warning` is a class providing background color. We cannot change class names. We can override `background-color`? That is allowed (color). But we need to preserve existing declarations. We can add `background-color` or `box-shadow` to the badge. But the original doesn't have. Since `.bg-warning` likely sets `--bs-warning` color; we can override with a different color? But careful: The selector `.app-hero-section .badge.bg-warning` is existing. We could add `background-color: #fbbf24;`? That is a color change, but it might change the existing background from Bootstrap. Is that okay? It's a visual change. But the instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must be changed. Wait: "✅ YOU MUST CHANGE (visual identity only): All color values..." Actually it says must change all color values. But if there are no color values, we can add them. Fresh palette is required. But the original CSS in this block has no colors. The file overall maybe had colors but this chunk #2/2 only contains this media query. So we have to introduce a fresh color palette and shadow identity within this block. 

But "HTML is fixed" and "class names exact". We can add new declarations to the selectors. But we must not change layout. So we can add `box-shadow`, `border-radius`, `transition`, `background`, etc. Also we can adjust existing property values like `font-size` no. `padding` maybe can change within ±20%. `var(--space-md)` equals maybe 24px; 20% would be 4.8px, but we don't know. Better keep.

Let's think about a possible rewritten CSS:

We can retain the media query and selectors. Add visual effects:

- For `.app-hero-section .row .col-lg-7` maybe add text-shadow? But it's a container with text-align center. Adding a text-shadow to this element would affect all text inside? Could be too much. Maybe not.

- For `.app-hero-section .badge.bg-warning`: add `box-shadow: 0 0 24px rgba(255, 183, 3, 0.5); border: 1px solid rgba(255,255,255,0.3); border-radius: 12px; transition: box-shadow 0.3s ease;` But border may alter layout slightly. Use `outline` instead: `outline: 1px solid rgba(...); outline-offset: 2px;` Outline doesn't affect layout. Good. Add `box-shadow` and `border-radius` no layout effect if element is inline? Actually border-radius on inline elements may not matter. But okay.

- For `.contact-channels-section article, .contact-quick-section .contact-card`: add `border-radius: 16px; box-shadow: 0 0 32px rgba(124, 58, 237, 0.35); transition: box-shadow 0.4s ease-in-out; backdrop-filter: blur(8px);` But backdrop-filter may be unsupported but okay. However adding `padding`? No. `border-radius` doesn't affect layout except clipping; okay. `box-shadow` no layout. `transition` no layout. `backdrop-filter` no layout. Could also add `background`? But article may already have a background; adding `background` could be okay if we change color. But we don't know original. Could add a `background-color` override with a semi-transparent color, but this could alter appearance heavily. Since target is "glow-effects", shadows suffice.

But the instruction "You MUST CHANGE: All color values..." implies we need to update the existing colors in the file. The original block has no color values. The only values are `text-align`, `font-size`, `padding`. We cannot change those except padding maybe. So if we output exactly same, we're not changing colors. But we can add color properties. The instruction says "Refresh this CSS visually" maybe due to file chunk includes only this, but we can rewrite the CSS with same selectors and declarations, but add new visual declarations. The user says "only colors, shadows, radius, transitions, gradients" can change. So to fulfill, we need to add those.

I'll produce a rewritten CSS that preserves the original declarations and selectors, and adds a cohesive fresh visual treatment:

- `--space-md` variable is a spacing variable, unchanged.
- For `.app-hero-section .row .col-lg-7`: maybe add `text-shadow`? But this is a container, so text-shadow would apply to inline text within. Might be okay but could affect readability. To be safe, maybe don't add anything to that selector because it might change typography? Actually text-shadow is allowed. But if the column contains many elements, adding text-shadow might be weird. We can skip adding to that selector. However the instructions "Refresh visual identity" maybe expects changes to all selectors? Not necessarily.

- For `.app-hero-section .badge.bg-warning`: add glow effect and border-radius.
- For `.contact-channels-section article, .contact-quick-section .contact-card`: add border-radius, box-shadow, transition, background? Maybe border-left accent? That is border-color/style, allowed, but adding border-width? Wait border-style and color can change, not border-width. We can add `border-left: 4px solid #f59e0b`? That's border-width 4px, which is width change. Not allowed. So avoid adding border-width. Use `outline` or box-shadow. Use `border-radius`.

Need to be mindful of `!important` on padding. We keep as is.

Also we might add `filter: drop-shadow(...)` but may affect layout? no.

Let's craft:

```
@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(251, 191, 36, 0.45), 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 16px;
        box-shadow: 0 0 32px rgba(99, 102, 241, 0.35);
        transition: box-shadow 0.4s ease-in-out, transform 0.4s ease;
    }
}
```

Wait `transform` is a layout-affecting property? Strictly transform is visual and doesn't affect layout flow, but it can change visual position. The instructions didn't list transform in allowed or forbidden; allowed properties include "filter, backdrop-filter" and "transition", but "transform" not mentioned. It might be considered layout? It's not in layout list. However to be conservative, avoid adding transform. Use only box-shadow, transition on box-shadow, border-radius, background-color maybe.

But we need to ensure we don't change `padding`? We keep same. Also adding `box-shadow` to the `.app-hero-section .badge` may be okay. But if the badge has `bg-warning` class from Bootstrap, overriding with box-shadow doesn't affect background. Maybe we should also change background-color to a new warning color? But if we add `background-color`, it overrides Bootstrap's `bg-warning` `.bg-warning{ background-color: #ffc107 !important; }` maybe with equal specificity and later? Our selector `.app-hero-section .badge.bg-warning` (0,3,0) vs `.bg-warning` (0,1,0), so ours wins. But since we're inside media query, order in stylesheet may be before Bootstrap? Actually user stylesheet likely after Bootstrap, so okay. But adding a background-color could make badge stand out. But is it necessary? The instruction is to change colors. There are no color values in this block, so to show color change, we could add `background-color` or `color`. But adding `color` affects typography color, allowed? Yes color is typography but also visual. But "font-family, font-size, font-weight, line-height, letter-spacing, word-spacing, text-transform, white-space, word-break" are forbidden. `color` is not listed in typography. So we can add `color`. 

Maybe use a fresh palette. Let's define our palette inline:

- Accent: `#7c3aed` (violet) and `#f59e0b` (amber), `#ec4899` (pink), `#06b6d4` (cyan).
- Dark blocks: `#1e1b4b` indigo.

But since this is only a mobile media query, we need to tie it to a "visual style". The target style says "asymmetric-blocks" with bold contrasting blocks and high contrast borders. But in a media query, we can add `background-color` to `.contact-channels-section article` to create block contrast. However if the article has no background already, adding might be okay. But we don't know. Let's keep it safe with glow.

Given output needs to be "only rewritten CSS, preserving ALL selectors and layout exactly". "All selectors" means don't add new selectors. "Layout exactly" means don't add properties that may affect layout. Adding `box-shadow`, `border-radius`, `transition` are safe. Adding `background-color` is also safe (doesn't affect layout unless it affects border-radius? no). We can add background-color to cards to make them "bold contrasting blocks". But maybe the article/card already has a background; changing it might be too aggressive. But the task explicitly wants color changes. So let's do background-color.

We should choose palette:

- `.app-hero-section .badge.bg-warning`: background-color: `#fbbf24`? Actually `bg-warning` yellow. We can override to `#f59e0b` (amber). Add `color: #1f2937`, `border-radius: 12px`, `box-shadow: 0 0 24px rgba(245, 158, 11, 0.5), 0 0 48px rgba(245, 158, 11, 0.2)`.
- `.contact-channels-section article, .contact-quick-section .contact-card`: `background-color: rgba(30, 27, 75, 0.35); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; box-shadow: 0 8px 32px rgba(124, 58, 237, 0.4), 0 0 24px rgba(124, 58, 237, 0.3); transition: box-shadow 0.35s ease, background-color 0.35s ease; backdrop-filter: blur(12px);` Wait border: 1px solid adds border-width =1px, which is not allowed (border-width cannot change). Actually the instruction says "border-color and border-style (NOT border-width)" are allowed to change. Adding `border: 1px solid` changes border-width from the default (0) to 1px, which could affect layout. But if the element already has a border or box-sizing border-box, a 1px border may alter inner dimensions. To be safe, use `outline: 1px solid rgba(...)`. Outline doesn't affect layout. Good.

Also we shouldn't add property `background-color` if it changes existing background? It doesn't affect layout. Allowed.

Need to preserve original `padding: var(--space-md) !important;` and keep `!important`. May add a comma? No.

We should not add `transform` due to being a potential layout issue? Actually transform can be considered visual, but it can create a containing block and might affect fixed descendants. Not likely. But to be conservative, avoid.

What about `.app-hero-section .row .col-lg-7` with `text-align: center`. We can add `text-shadow`? It might be okay. But I'm leaning not to add text-shadow to entire column because it may make all text glow. But maybe that is desired? It could be subtle. Since it's mobile, maybe not. We can leave as is. But then we haven't "changed" that selector visually. The instructions say "Keep ALL selectors ... exactly as-is" not "modify all". So okay.

However the file chunk is only this media query; maybe expected output should preserve exactly and only update colors/shadows. We'll add improvements.

Let's produce final with no markdown. Need to ensure first char is CSS. Also no comments. We'll include the original media query with added declarations. Need to use `!important` on padding unchanged.

Let's craft:

```
@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;
        background-color: #f59e0b;
        color: #1e1b4b;
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.45), 0 0 48px rgba(245, 158, 11, 0.2);
        transition: box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: rgba(30, 27, 75, 0.25);
        border-radius: 16px;
        box-shadow: 0 0 24px rgba(124, 58, 237, 0.35), 0 8px 32px rgba(124, 58, 237, 0.25);
        transition: box-shadow 0.4s ease, background-color 0.4s ease;
        backdrop-filter: blur(8px);
    }
}
```

But wait