/* ============================================================
   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 CSS file with visual changes only, preserving all selectors and layout. Let me analyze the input CSS:

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

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

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

This is a small media query block. The rules inside are:
1. `text-align: center` - this is a typography/layout property that I should NOT change (text-align is in the "never change" list under layout properties).
2. `font-size: 0.85rem` - typography, must not change.
3. `padding: var(--space-md) !important` - padding is layout, keep within ±20%. Since it uses a CSS variable, I should keep the variable reference or change to a similar value.

The instructions say:
- ✅ MUST CHANGE: colors, box-shadow, text-shadow, border-radius, gradients, transition timing, filter, backdrop-filter, opacity, outline styles, border-color/border-style, caret-color, accent-color, CSS custom properties values.
- 🔒 NEVER CHANGE: text-align, font-size, padding (keep within ±20%), etc.

Given this is a media query with only layout/typography rules, there isn't much to change. However, the instructions say "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round."

Hmm. The original CSS has almost nothing visual to change. But I must produce output that changes something visual without breaking layout.

Let me look carefully:
- `.app-hero-section .badge.bg-warning` - this is a badge with warning background. I could add a box-shadow, text-shadow, or border-radius to it. But the font-size must stay.
- `.contact-channels-section article, .contact-quick-section .contact-card` - padding uses var(--space-md). I could change `var(--space-md)` to a slightly different value or keep it. The rule says padding: keep similar values, ±20% maximum. `var(--space-md)` is a variable reference—if I change it to a fixed value, that might be okay if within ±20%, but I don't know what --space-md resolves to. Safer to keep the variable but perhaps add a border-radius or box-shadow to these cards.

Wait, but there's nothing about colors in the original. Let me count what I can change:
- Add `box-shadow` to `.app-hero-section .badge.bg-warning` — this is a visual change.
- Add `border-radius` to the badge.
- Add `box-shadow` or `text-shadow` to the contact cards.
- Add `background` / `border-color` changes? But the selectors don't specify backgrounds; if I add background to `article`, it might change appearance but not layout.

However, the instructions are clear: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

The safest approach: For each existing rule, I can add visual properties (color, box-shadow, text-shadow, border-radius, etc.) to the selectors without touching the locked properties.

But wait—the original CSS uses custom properties like `var(--space-md)`. The instruction says CSS custom properties values can change. But I don't see the definition of `--space-md` in this file. It might be defined elsewhere (root). I should not redefine it unless I define it within the scope. Changing `var(--space-md)` to something else could break layout if the value is very different. I'll keep it but add visual properties.

Let me also consider: should I add `background` colors? The target style is "Pinterest-like: white cards, soft shadows on light gray bg" with "glow effects". Since this is a media query for small screens, I should adapt.

Given the constraints, I'll produce:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45), 0 0 24px rgba(245, 158, 11, 0.25);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 14px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
        background: #ffffff;
    }
}
```

But wait, the `.contact-channels-section article` might not be a card originally; adding a white background and shadow could be a visual change that is acceptable. However, `background` change is a color change, allowed.

Also `.app-hero-section .col-lg-7` only has text-align: center. I shouldn't add color to that since it's a layout container? Actually I could add a color property but it's risky. The instruction says change colors — but if no color is specified, adding one could affect text color. It might be fine for a hero section. But to be conservative, I should focus on the rules where I can add visual flair.

Hmm, the instruction says "Only change colors, shadows, radius, transitions, gradients." I think adding visual properties to existing selectors is acceptable as long as I don't change layout properties. But I must be careful: adding `color` to `.col-lg-7` might change text color in the hero section, which is a visual change. That's allowed. But it's inside a media query for mobile, so it'd only apply on mobile.

Let me be more thorough. Since the target style is "glow-effects" with "Pinterest-like white cards, soft shadows on light gray bg", I should try to inject that identity.

But the file is just a media query. There's no root variable definition here. I can't change the page's light gray background unless I add a rule for body, but I don't have a body selector in this media query. Adding a `body` selector would violate "preserve selectors exactly" because I'd be adding new selectors not in the original. The instruction says "Keep ALL selectors ... exactly as-is" — meaning I shouldn't add or remove selectors. Hmm, actually does it mean I can't add new selectors? It says "Every selector character-for-character preserved?" — that implies the existing selectors must be preserved exactly. Adding new selectors might be considered changing the structure. To be safe, I will NOT add new selectors. I'll only augment existing rules with visual properties.

Let me re-read: "📤 OUTPUT: ONLY the rewritten CSS, preserving ALL selectors and layout exactly." So I must preserve all selectors present. It doesn't explicitly forbid adding selectors, but "preserving ALL selectors" suggests keeping the same set. Safer to keep exactly the same selectors.

So I will keep the three rule blocks, adding visual properties within them.

Let me also consider the `!important` on padding. I'll keep it.

Now let me think about whether changing `padding: var(--space-md) !important` would be okay. The instruction: "width, height, padding, margin (keep similar values, ±20% maximum)". If I kept the variable, that's unchanged. If I replaced with a fixed value, I'd need to know --space-md. I'll keep the variable to be safe.

Now, what about the badge? `.app-hero-section .badge.bg-warning` is a Bootstrap badge with `.bg-warning` class. In Bootstrap 5, `.bg-warning` sets `background-color: #ffc107 !important`. I can override the background color with a custom one. That's a visual change. But should I? The target style wants a fresh palette. I could change the badge's background to a warmer amber with a glow. Since the selector includes `.bg-warning`, overriding its background is fine.

Also the badge could get a border-radius (Bootstrap sets .badge rounded-pill by default in v5? Actually `.badge` has `border-radius: 0.375rem`, `.rounded-pill` would be `50rem`). Adding `border-radius` overrides it.

Let me craft the rewritten CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        border-radius: 999px;
        box-shadow: 0 4px 16px rgba(245, 158, 11, 0.5), 0 0 24px rgba(245, 158, 11, 0.35);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
        transition: box-shadow 0.3s ease, border-radius 0.3s ease;
    }
}
```

Wait, adding `transition` is allowed. Adding `transform` in transition name is fine, but I don't have a transform property. It's okay to list `transform` in transition even if not used? Better to only transition properties that exist. I'll use `transition: box-shadow 0.3s ease, background-color 0.3s ease;`.

Should I add a hover state? The original selectors don't have hover pseudo-classes. Adding `:hover` selectors would add new selectors, which I want to avoid. So no hover.

Should I include `color` changes? The badge text — Bootstrap `.badge` has `color: #fff` when using bg-warning? Actually `.bg-warning` sets background, and text color defaults to body color. For a warning badge, Bootstrap's `.text-warning` would set color. But here only `.bg-warning`. I could add `color: #fffbeb` (a warm off-white) for contrast. That's a color change, allowed.

For the contact cards, adding `color` might be risky if the card has specific text colors already. I'll leave color alone.

Also, should I add `border` or `border-color`? Adding a border would change layout if not accounted for, but border-width is not supposed to change. Adding a border where none existed would change box dimensions. Actually, if I use `box-shadow` with inset or a ring, it doesn't affect layout. Using `border` would affect layout because border is part of the box model. So I should avoid adding `border` (border-width) since it's a layout change. `outline` doesn't affect layout, so I could add `outline`. But outline on cards might look odd. I'll skip.

What about `backdrop-filter`? Could add a subtle blur, but that might be unnecessary.

Now, the first rule `.app-hero-section .row .col-lg-7 { text-align: center; }` — there's nothing visual to change here that wouldn't affect layout. I could add `color` or `text-shadow` to this selector. The hero section text on mobile might benefit from a subtle text shadow. But adding `text-shadow` to the whole column could look bad. However, "change colors" is required. Since this rule only has text-align, I could add `color: #1e293b` (slate-800) to ensure consistent text color. That's a visual change that doesn't affect layout. But if the hero section already has a color from a parent, overriding it could change appearance. Still, it's allowed.

Hmm, but the instruction says "Previous attempt didn't change enough." I should make more distinct visual changes. However, I also must respect the constraints. The most impactful visual changes I can make within these selectors:

1. Badge: new gradient background, glow shadow, rounded pill, text shadow, color.
2. Contact cards: white background, large radius, layered soft shadow, transition.

That seems like a decent visual refresh while preserving layout.

Let me also think about `border-radius` values. Target says medium radius (8-16px). For the badge, 999px makes it a pill, which is a common badge shape. But the target says 8-16px. Maybe use `border-radius: 12px` for the badge? Actually badge default is 0.375rem (6px). Changing to 12px is a moderate change. But pill shape (999px) is also fine for badges. The target says "Medium radius (8-16px)" — so I'll use 12px for cards and maybe 999px for badge is okay since it's a pill badge commonly. Hmm, but to follow the target, let me use `border-radius: 12px` for both? Or keep badge pill. The instruction says "border-radius (visual rounding only)" as something I MUST change. I'll set badge to `border-radius: 50rem` (Bootstrap pill) or `999px`. Actually a pill badge with glow is a distinct visual identity. I'll go with `999px` for the badge and `16px` for cards.

Wait, the target style "masonry-flow" describes card layouts with varied aspect ratios, but this media query doesn't involve such grid. The target style palette is "white cards, soft shadows on light gray bg" — I can apply white background and soft shadows to the contact cards. Good.

Let me also add `box-shadow` with an accent glow for the cards per "glow-effects": `0 0 24px rgba(accent, 0.4)` — the accent for Pinterest-like could be a red/pink. But the cards with white bg on light gray could have a subtle warm accent glow. I'll use a soft neutral shadow plus a faint warm glow.

Let me choose a fresh palette:
- Accent: warm amber/orange (#f59e0b) for the badge.
- Card background: #ffffff
- Card shadow: layered warm gray shadows: `0 10px 30px rgba(120, 80, 60, 0.08), 0 4px 12px rgba(120, 80, 60, 0.06)`
- Add a subtle accent glow: `0 0 18px rgba(245, 158, 11, 0.15)`

Actually "glow-effects" wants `0 0 24px rgba(accent, 0.4)` and hover `0 0 32px rgba(accent, 0.6)`. Since I can't add hover selectors, I'll just put the glow on the base.

Let me craft:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1e293b;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #fff7ed;
        background: linear-gradient(135deg, #fcd34d, #f59e0b 65%, #d97706);
        border-radius: 999px;
        box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45), 0 0 24px rgba(245, 158, 11, 0.35);
        text-shadow: 0 1px 3px rgba(124, 45, 18, 0.35);
        transition: box-shadow 0.3s ease, filter 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(60, 40, 30, 0.08), 0 2px 8px rgba(60, 40, 30, 0.06), 0 0 24px rgba(245, 158, 11, 0.12);
        transition: box-shadow 0.3s ease, background-color 0.3s ease;
    }
}
```

Wait, I added `text-shadow` to `.col-lg-7` which is a container—might affect all text inside. It's subtle. That's fine.

But is adding `color: #1e293b` to the hero column too presumptuous? It changes text color on mobile. That's a visual change, allowed. But if the hero has a dark background, this could make text dark-on-dark. I don't know the context. To be safer, I could skip the color on the column and only add a subtle text-shadow. But text-shadow on a large text block might look bad too. Hmm.

Alternatively, for `.col-lg-7`, I could add `caret-color` or