/* ============================================================
   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 from a file `assets/css/saishi.css`. 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;
    }
}
```

Let me analyze what I can change:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — `text-align` is in the "never change" list (typography section), so I must not change it. Hmm. Actually it says "text-align, vertical-align" in the NEVER CHANGE list. So I can't change that. But the task says I need to refresh visually. However, I can't change layout or typography. This rule only has text-align, which is protected. So I need to keep it as-is? But the instructions say "Only change colors, shadows, radius, transitions, gradients." In this rule, there are no such properties. So I should keep it.

Wait, but maybe I can add properties? The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Adding properties might be allowed? Hmm, but the output should preserve the same layout. Adding color or background to these elements wouldn't break layout. But it might be beyond "change". However, the instruction says "Only change colors, shadows, radius, transitions, gradients." It doesn't say I can't add them. But it could be risky.

Let me think about what's reasonable. The original CSS is a media query with three rules. The properties in the original:
- text-align: center (protected)
- font-size: 0.85rem (protected)
- padding: var(--space-md) !important (margin/padding can change ±20% max, but this uses a CSS variable. I could change the variable value? Actually `var(--space-md)` is a variable reference. I could potentially change to a different value within 20%? But I don't know the value of `--space-md`. Changing the reference itself would be risky since it's a variable that exists elsewhere. Alternatively I could keep the property but maybe adjust? Padding is in the "keep similar values, ±20% maximum" category. But since it references a variable, I'd have to replace it with a concrete value. Hmm.

Actually, let me re-read: "padding, margin (keep similar values, ±20% maximum)". So I can change padding values as long as within 20%. But `var(--space-md)` is unknown. If I replace it with e.g. `16px`, that could be way off. Better to keep it as-is.

So what can I actually change here? The rules don't contain colors, shadows, radius, transitions, or gradients. So to fulfill the task, I might add such properties to the existing selectors, while preserving everything else.

For example:
- `.app-hero-section .row .col-lg-7` — could add a subtle text-shadow? But text-shadow is typography-adjacent, but it's listed as changeable. Adding text-shadow might affect readability but not layout.
- `.app-hero-section .badge.bg-warning` — this is a badge with bg-warning (Bootstrap). I could add a background gradient? Actually background-color is changeable. But the class `bg-warning` is a Bootstrap utility that sets background-color. If I override it within this media query, that would be a visual change. I could change the background-color to a different color. That's allowed.
- `.contact-channels-section article, .contact-quick-section .contact-card` — padding is protected. Could add border-radius, box-shadow, background, etc. Adding border-radius and box-shadow would be a visual refresh without breaking layout.

But wait, the instructions mention "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette." So I should aggressively change colors/shadows/radius where possible, and perhaps add these properties where they don't exist.

Let me think about the "Target style" and "Effect variant" for guidance. The target style is "card-mosaic" with vibrant card colors on neutral background, each card type a different accent. But this is a responsive media query for small screens. The effect variant is "tight-rhythm": compact spacing, small border-radius (2-6px), subtle shadows or none, information-dense feel.

Given the original selectors:
1. `.app-hero-section .row .col-lg-7` — hero section column. Could add a subtle text-shadow or maybe a color? But text-align center is already. Maybe add a color.
2. `.app-hero-section .badge.bg-warning` — badge. The `bg-warning` is Bootstrap yellow. I could override with a different accent color, maybe a vibrant coral or something. But careful: the element also has `.badge` class. I can set `background-color`, `color`, `border-radius`, `box-shadow`.
3. `.contact-channels-section article, .contact-quick-section .contact-card` — cards. Could add background, border-radius (2-6px per tight-rhythm), box-shadow (subtle), maybe a border-left accent? Border-color is changeable, border-style changeable, but border-width not. Adding border-width would be a layout change? Actually border-width affects layout, but if I use box-shadow to simulate a border, it won't affect layout. Better to use box-shadow.

Let me think carefully about constraints:
- "border-color and border-style (NOT border-width)" — I can change border-color and border-style, but not add border-width if it wasn't there. Actually the original has no border. Adding `border: 1px solid ...` would add border-width, which is forbidden. So I should avoid adding border. Use box-shadow instead.
- "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)" — so box-shadow can be added/redesigned.
- "border-radius (visual rounding only)" — can be added.

So a good approach:

Rule 1: `.app-hero-section .row .col-lg-7 { text-align: center; }` — add a `color` maybe? Or `text-shadow`? Since it's the hero, maybe a subtle text-shadow. But I don't know the background. Let me use a fresh palette. Hmm. Adding color could override inherited text color, but that's a visual change. I'll add a subtle text-shadow for depth. But text-shadow might be too much. Alternatively, I can add nothing and leave it as-is. But the task says "rewrite" and "refresh visually". I think adding properties is acceptable. However, the "NEVER CHANGE" list says "text-align" should not change. It doesn't say I can't add other properties. But adding properties could have side effects on layout? `color` doesn't affect layout. `text-shadow` doesn't affect layout. So it's safe.

Let me consider the fresh palette. Target: vibrant card colors on neutral background. For small screens, maybe a neutral background with a vibrant accent.

Let me define a palette:
- Background neutral: #f8f5f0 (warm off-white) or #f0f2f5 (cool gray)
- Accent coral: #ff6b5e
- Accent teal: #2ec4b6
- Accent indigo: #5a67d8
- Text dark: #2d2a32

But we don't have full file context. The media query is part of a larger file. Adding background-color to these specific elements might conflict with existing styles. But that's the point of a refresh—override in the media query.

Actually, I should be careful with `.app-hero-section .row .col-lg-7` — adding a background there could look weird when it's a column. Better not add background to the column; maybe just color/text-shadow.

For `.badge.bg-warning`: Bootstrap's badge has `padding`, `border-radius: 0.375rem` (in Bootstrap 5). The media query sets `font-size: 0.85rem`. I could override `background-color` to a fresh color, and adjust `border-radius` to something tighter (e.g., 4px). But the instruction says "Only change colors, shadows, radius, transitions, gradients." So changing the `font-size` is NOT allowed because font-size is in the never-change list. I must preserve `font-size: 0.85rem`. Also `padding` is protected ±20%, but I can leave it. So I'll add `background-color`, `color`, `box-shadow`, `border-radius`. Maybe even a gradient background? `background: linear-gradient(...)` would replace background-color. But `.bg-warning` class sets `background-color: #ffc107`. Overriding with a gradient is a change to gradient, allowed. But then the badge's `color`? Bootstrap badge uses `color: #212529` for warning. I could set a new color.

For rule 3: `.contact-channels-section article, .contact-quick-section .contact-card` — add `background-color`, `border-radius` (2-6px per tight-rhythm), `box-shadow` (subtle). Maybe a left accent via box-shadow inset? Or multi-layer shadow. Keep padding as `var(--space-md) !important` (can't change reliably). Since padding is already set with !important, adding other properties is fine.

Let me now write the CSS. I should preserve all selectors exactly, and the media query.

Original:
```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 rewrite with visual changes:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ff7a59 0%, #f43f5e 100%);
        color: #ffffff;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(244, 63, 94, 0.3);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 4px 12px rgba(24, 24, 27, 0.06);
    }
}
```

Wait, but does adding `background-color: #fff` to `.contact-channels-section article` possibly break if the article already has a background? It just overrides it. That's fine.

But hold on: the "tight-rhythm" variant says "Subtle shadows or none". The shadow I gave for cards is subtle. For badge, a small colored shadow is fine.

However, I'm worried about the "card-mosaic" target style: "Vibrant card colors on neutral background, Each card type a different accent." I could make the `article` and `.contact-card` different accents? But the selector is a list of two selectors sharing the same declaration block. I can't split them into different backgrounds without changing selector structure. Actually, I could, but the instruction says "Selector lists (commas)" are in the "never change" list. So I must keep the selector list as-is. That means both elements get the same background. Unless I use a different approach: e.g., a gradient background that works for both, or keep them neutral white cards. Since the target style is a guide, not a hard requirement, I'll keep them neutral with a subtle accent shadow.

Maybe I can add a second declaration block for `.contact-channels-section article` separately? No—adding new selectors would be changing the selector list? Actually, I could add a new rule with a single selector, but that would duplicate. Better not.

Let me think about whether I should add new properties to rule 1. Adding `color` and `text-shadow` to the hero column. Is `text-shadow` a typography thing? It's listed as changeable: "text-shadow" is in the "YOU MUST CHANGE" list. So yes, I can add it.

But wait, the original rule only has `text-align: center;`. If I add `color`, that changes the text color of the column. That's a visual change. Fine.

Now, let me double-check: The instruction says "NEVER CHANGE" includes "text-align, vertical-align" and "font-size, font-weight, font-style". I'm preserving `text-align: center` and `font-size: 0.85rem` exactly. Good.

Also "padding, margin (keep similar values, ±20% maximum)". I'm keeping `padding: var(--space-md) !important` exactly, which is within ±20% (same). Good.

Now, the `background: linear-gradient(...)` on `.badge.bg-warning` — the `bg-warning` class in Bootstrap sets `--bs-badge-color` and `background-color`. Using `background` shorthand with a gradient overrides background-color. That's allowed as a gradient change. But note: if I use `background`, it resets `background-repeat`, etc., but that's fine.

Should I use `background-color` instead to be safer? The task says "gradient colors and stops in linear/radial/conic-gradient" can change, but it assumes gradients already exist. Adding a gradient is arguably a change to "gradients" too. To be safe and more vibrant, I'll use a gradient. But Bootstrap's `.badge.bg-warning` with a gradient—the badge text `color: #212529` might be overridden to white. Good.

Now, about the `border-radius` on the badge: Bootstrap badge default radius is `0.375rem` (6px). The tight-rhythm variant wants 2-6px. I'll set 4px.

For the cards, `border-radius: 6px` fits. Shadow subtle. Background white on a neutral page. Good.

Let me also consider: in the media query for small screens, adding `background-color: #fff` to contact cards might have no effect if the page background is already white. But it's fine; it just ensures cards pop.

Maybe I should add a subtle border-style? It says I can change border-color and border-style, but not border-width. So I can't add `border: 1px solid` because that includes border-width. But I could set `border-bottom: 1px solid`? That's border-width too. Avoid.

Alternatively, I could use `outline`? Outline style changes allowed: "outline styles (color, type)". Adding outline doesn't affect layout. But outline is a visual line, could be neat for cards. However, the target variant says subtle shadows or none. I'll skip outline.

Let me also think about transitions. The "YOU MUST CHANGE" includes "transition timing, easing, duration". The original CSS has no transitions. I could add transitions to the cards/badge for hover states, but there are no hover rules in this media query. Adding a transition property to the base rules would animate changes, but without a hover rule, it won't be visible. However, transitions could be triggered if other CSS rules change properties on hover. Since this is a media query, adding `transition` is allowed. But maybe unnecessary. I'll add a smooth transition to cards.

But wait: if I add `transition` to `.contact-channels-section article` and `.contact-quick-section .contact-card`, and some other rule (outside this media query) changes their background on hover, it'll animate. That's fine. But I don't know the rest of the file. Adding transition is harmless.

Actually, the instruction says "transition timing, easing, duration" must change if present? It says "YOU MUST CHANGE" includes those. But if they weren't present before, adding them is fine. I'll add a subtle transition.

Let me refine:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #f43f5e;
        background-image: linear-gradient(135deg, #ff7a59 0%, #f43f5e 100%);
        color: #ffffff;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(244, 63, 94, 0.35);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(16, 24, 39, 0.04), 0 4px 12px rgba(16, 24, 39, 0.06);
        transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
}
```

Is `background-image` with `background-color` safe? `bg-warning` sets `background