/* ============================================================
   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 refresh the CSS visually while keeping all selectors and layout exactly as-is. Let me analyze the original 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 media query block. The original CSS only contains:
- text-align: center (layout property, cannot change)
- font-size: 0.85rem (typography, cannot change)
- padding: var(--space-md) !important (padding, can vary ±20%)

Hmm, this is tricky. The original CSS has very few visual properties. According to the constraints:
- text-align is in the "never change" list
- font-size is in the "never change" list
- padding can change within ±20%

But the visual identity refresh requires changing colors, shadows, radius, transitions, gradients, etc. However, the original CSS doesn't have any colors, shadows, or radius.

Wait — the variable `var(--space-md)` could be redefined? But that's a CSS custom property value. The instructions say "CSS custom properties (--color-*, --shadow-*) values" can change. But `--space-md` is a spacing variable, not a color/shadow one. And changing it would affect layout.

The padding is `var(--space-md)`. I can't change the variable value without potentially breaking layout elsewhere. But padding can change ±20%. Since I don't know the actual value of `--space-md`, I could replace it with a similar padding value. But that would change the padding to a fixed value. Actually, padding changes are allowed within ±20%.

Hmm, but I don't know the base value. The safe approach: keep `var(--space-md)` since it's a padding value that's already defined elsewhere, or replace with a similar value.

Actually, the instruction says padding and margin can change ±20% maximum. Since `var(--space-md)` is a reference, I could keep it. But to add a visual refresh, I could add color/background properties? No — I cannot add selectors, but I can add declarations to existing rules.

Wait, the constraints say:
- "All color values" must change
- But I can also ADD visual properties? The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

So I can add new visual declarations (colors, shadows, transitions) to the existing rules since they don't affect layout. Let me think about what makes sense:

1. `.app-hero-section .row .col-lg-7` in mobile — center text. I could add color, text-shadow, etc. But it's a hero section's column. Maybe add a color.

2. `.app-hero-section .badge.bg-warning` — a warning badge. I can change its background-color, color, box-shadow, border-radius. Note `.bg-warning` is a Bootstrap class. But I can override color properties within this selector. Adding things like `background-color`, `color`, `box-shadow`, `border-radius`, `transition`.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — these are cards. I can add border-radius, box-shadow, transition, background-color, border-color.

But wait — I need to be careful. The original selectors have `padding: var(--space-md) !important`. I should keep that padding or adjust within ±20%. Since it uses a variable, I'll keep it as-is to be safe (or replace with a slightly adjusted value). Actually, keeping `var(--space-md)` is safest — it's exactly the same, which is within ±20% (0% change).

Now, for the "centered-stage" target style and "soft-shadows" effect variant:
- Dark stage #0f0f1a, bright content area
- Premium gold or deep purple accent
- Multi-layer soft shadows
- Large border-radius (12-24px)
- Smooth transitions (0.3-0.5s ease)

Let me design:

For the hero column text (mobile):
```css
.app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #f5f3ff;  /* bright content area on dark stage */
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}
```

Hmm, but adding text color could be risky if the parent doesn't have a dark background. But the "centered-stage" palette says dark stage #0f0f1a, bright content. Since it's a hero section, likely it does have a dark background. But I shouldn't change layout. Adding color might not be desired. But the task says refresh colors.

Actually, let me reconsider — the instructions say "Only change colors, shadows, radius, transitions, gradients." This implies I can modify existing ones and potentially add them. Since there are no colors in the original, I should add colors to complete the visual refresh. That's the whole point.

But adding background-color to a `.bg-warning` badge would override the Bootstrap warning color. Let me pick a premium gold accent:

Badge:
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background-color: #f5c542;  /* premium gold */
    color: #0f0f1a;  /* dark text on gold */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(245, 197, 66, 0.25);
    border-radius: 999px;
    transition: all 0.35s ease;
}
```

Wait, `font-size: 0.85rem` — keep unchanged. Good.

For the contact cards:
```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background-color: #ffffff;
    border: 1px solid #e8e6f0;
    border-radius: 18px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(15, 15, 26, 0.12);
    transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
}
```

Hmm wait — `transition` with `transform` — transform isn't a visual property listed but transition can target it. But I shouldn't add transform itself. Transition on transform is fine even if no transform is applied. But maybe keep it simpler: `transition: box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease`.

Also, I need to be careful about the media query. The entire refresh happens within `@media (max-width: 575.98px)`. That's fine.

Let me also consider: should I add a `background-color` to the contact cards? In dark mode / centered-stage, cards could be bright `#ffffff` or a lighter tint like `#faf9ff`. Actually, if the surrounding is dark (#0f0f1a), cards could be `#1c1c2e` with light borders. But the "Spotlight feel: dark stage #0f0f1a, bright content area" suggests the content area is bright. Cards would be bright with soft shadows.

Let me draft the final CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #f5c542;
        color: #0f0f1a;
        border: 1px solid rgba(245, 197, 66, 0.4);
        border-radius: 999px;
        box-shadow: 0 4px 8px rgba(15, 15, 26, 0.06), 0 20px 40px -10px rgba(245, 197, 66, 0.35);
        transition: box-shadow 0.35s ease, background-color 0.35s ease, transform 0.35s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border: 1px solid #e9e4f5;
        border-radius: 18px;
        box-shadow: 0 4px 8px rgba(15, 15, 26, 0.04), 0 24px 48px -12px rgba(15, 15, 26, 0.14);
        transition: box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
    }
}
```

Wait, but I'm adding a `border` — originally there was no border on the badge or cards. Adding a border changes border-width from 0 to 1px. The rules say "border-color and border-style (NOT border-width)" can change. Adding a border where there was none effectively changes border-width. That might be considered a layout change. Hmm.

Let me be more careful. The constraint: "border-color and border-style (NOT border-width)" — meaning I can change the color and style, but not the width. If the original has no border (border-width: 0 or medium?), adding `border: 1px solid ...` adds a border width. That could slightly affect layout (1px). To be safe, I could use `outline` instead? No, outline also takes space. Actually, outline doesn't affect layout (it's drawn outside the border box but doesn't affect layout). The rules say "outline styles (color, type)" can change.

Alternatively, use `box-shadow` to simulate a border — e.g., `box-shadow: inset 0 0 0 1px #e9e4f5, ...`. That's purely decorative and doesn't affect layout. That's a good approach.

For the badge, to simulate a border without affecting layout, I can use inset box-shadow.

Let me also reconsider `background-color` on `.col-lg-7` — hero section columns. Adding a background to the column could be okay but might not be needed. Actually, to keep it minimal and safe, maybe I shouldn't add background to the column. But color/text-shadow is fine.

Actually, wait. The dark stage #0f0f1a — should I apply it as background to the hero column? That would change the appearance significantly and might clash with the actual design. Since the "centered-stage" says dark stage, but the hero section already has its own design. I think it's safer to apply the accent color to the badge and soft shadows to cards, and a subtle text-shadow to the heading. But I could apply a dark background to the contact cards' container? No, that would be adding background to cards.

Let me think about what's safest and most effective:

1. `.app-hero-section .row .col-lg-7`:
   - `color: #f8f7ff` — bright content text? Hmm, if the hero is dark, this makes sense. But if the hero is light, this would make text invisible. However, since the target style is "dark stage", maybe the hero is dark. But I genuinely don't know. 
   
   The instruction says "Refresh this CSS visually" — so I should commit to the target style. The target style says "Spotlight feel: dark stage #0f0f1a, bright content area". So applying a light color to hero text makes sense in that theme. But it's risky.

   Actually, you know what, since the hero section likely already has its own colors, I'll add a subtle text-shadow and maybe a deep purple accent color that fits the palette. Let me use `color: #15132b` for dark text? That's a dark stage color. Hmm.

   Let me reconsider: the hero column text on mobile — in the centered-stage pattern, headings are centered with a spotlight feel. The text should probably be dark on a light background, or light on a dark background. Without knowing the background, a safe choice is a rich dark purple `#17152b` with a soft gold-ish text-shadow? No, text-shadow on dark text would look odd.

   Maybe safer: add a subtle text-shadow only, and no color change? But the task says "All color values" must be replaced... but there are no color values in the original. So there's nothing to replace. Adding new colors is at my discretion.

   I think the safest interpretation: since there are no colors in the original, I add colors that match the target palette. For the hero column, I'll set a color that works generally — a premium deep purple `#1b1836`. And add a gentle text shadow.

2. Badge: gold accent, dark text, soft glow shadow, rounded pill. This is the "premium gold accent."

3. Cards: bright white content area (`#ffffff`), soft multi-layer shadows, large radius, smooth transitions. This matches "bright content area" + "soft shadows."

For the simulated border on cards, use inset box-shadow.

Let me also consider `-webkit-backdrop-filter` — no, not needed.

Let me also add `transition` to the hero column? Something like `transition: color 0.3s ease, text-shadow 0.3s ease;` — that's fine.

Now, about padding: `padding: var(--space-md) !important`. Keep exactly. The rule allows ±20%, but keeping the variable is fine since the variable value is defined elsewhere and I'm not changing it.

Wait — one concern: `transition: transform 0.35s ease` in the badge — but I don't have a transform. It's harmless but might imply a transform that doesn't exist. Actually, transition on transform won't do anything without a transform change. It's fine. But to be clean, I'll only transition properties I actually set or that might change on hover: `box-shadow`, `background-color`. Actually, since there's no hover rule here, transitions won't do anything at all (no state change within this media query). But transitions can still be declared for when a hover state elsewhere changes those properties. Since there's likely a global hover style for cards, my transition in the media query would apply on mobile. That's fine.

Hmm, but actually, adding `transition` to `.contact-channels-section article` might override other transitions. But it's a visual change, allowed.

Let me finalize. I need to output only the rewritten CSS, no markdown.

One more consideration: Should I change the media query breakpoint? No — media query conditions cannot change.

Also, note the `.badge.bg-warning` selector — `.bg-warning` is a Bootstrap utility. In the original, the font-size is 0.85rem. I keep that. I'll add background-color etc. Since Bootstrap's `.bg-warning` sets `background-color: var(--bs-warning) !important`? Actually, Bootstrap's `.bg-warning` uses `!important`? Let me recall: In Bootstrap 5, `.bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; }`. Yes, Bootstrap utilities often use `!important`. If that's the case, my `background-color: #f5c542;` without `!important` would be overridden by Bootstrap's `!important`. 

Hmm, that's a problem. To override, I'd need `!important`. But the original CSS uses `!important` on padding. Adding `!important` to my background-color would be acceptable — it's a visual change. But the instructions don't mention `!important` restrictions.

Actually, wait — specificity: `.app-hero-section .badge.bg-warning` is (0,3,0)? Let's count: `.app-hero-section` = class (0,1,0), `.badge` = (0,2,0), `.bg-warning` = (0,3,0). Bootstrap's `.bg-warning` is (0,1,0). My selector has higher specificity, so even without `!important`, my `background-color` would win over Bootstrap's `.bg-warning` background-color. But Bootstrap also uses `!important` on that utility... Actually, in Bootstrap 5, background-color utilities do use `!important`: `.bg-warning { background-color: #ffc107 !important; }` — wait, let me recall. 

In Bootstrap 5.3, the utilities are generated with `!important`. Yes: `.bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; }`. So I need `!important` to override. But `color` on `.badge` — Bootstrap badge has `color: #fff` from `.badge` class. My selector is more specific, so `.app-hero-section .badge.bg-warning { color: #0f0f1a; }` would win over `.badge { color: #fff; }` without needing `!important`.

To be safe, I'll add `!important` to the background-color on the badge. Wait, but the original rule for padding uses `!important`, so it's consistent to use it.

Actually, let me reconsider. If I add `background-color: #f5c542 !important;`, that's fine. Let me do that.

For the badge border simulation: `