/* ============================================================
   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 the CSS with a new visual identity while preserving selectors and layout. 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 for small screens. The rules are:
1. `.app-hero-section .row .col-lg-7` - text-align: center (this is typography, cannot change)
2. `.app-hero-section .badge.bg-warning` - font-size: 0.85rem (typography, cannot change)
3. `.contact-channels-section article, .contact-quick-section .contact-card` - padding: var(--space-md) !important (padding, must keep within ±20%)

The constraints say I can change colors, shadows, radius, transitions, gradients, but NOT layout, typography, etc.

The original CSS is quite minimal — it only has text-align, font-size, and padding. There are no colors, shadows, or gradients to change.

The target style is "vertical-flow" and effect variant is "glow-effects". But since this is a media query for small screens within a larger stylesheet, I only see this snippet. I need to refresh this visually without changing layout or typography.

Hmm, this is tricky. The original CSS only contains layout/typography rules. I cannot change text-align, font-size, or padding (well, padding can change ±20%).

What can I do? I can add visual properties like colors, shadows, border-radius, transitions, etc. to these selectors. But I need to be careful not to alter the fixed properties.

Wait — the instructions say "Only change colors, shadows, radius, transitions, gradients." I can add new decorative properties to the existing rules, but I must preserve the existing properties (text-align, font-size, padding) exactly or within the ±20% tolerance for padding.

Let me think about what makes sense. The selectors target:
1. `.app-hero-section .row .col-lg-7` — a column in the hero section
2. `.app-hero-section .badge.bg-warning` — a warning badge in hero
3. `.contact-channels-section article` and `.contact-quick-section .contact-card` — contact cards

To apply the "glow-effects" variant with warm minimal palette and sage accent (#87a878) or terracotta (#c47b5a), I can:
- Add subtle background colors
- Add box-shadows with glow
- Add border-radius
- Add transitions for hover effects
- Maybe add a subtle gradient

But I must keep the same selectors. The existing properties like `text-align: center` must stay. `font-size: 0.85rem` must stay. `padding: var(--space-md) !important` — I could change it slightly, but ±20% tolerance means I should keep it close. Actually `var(--space-md)` — I shouldn't change that because it references a variable. Changing padding might alter layout. The original is `var(--space-md) !important`. I can keep it or adjust within 20%. Since it uses a variable, I'll keep it as-is to be safe.

So what visual changes can I make?

For the badge:
- Add background color, color, box-shadow glow, border-radius, maybe a transition.

For the contact cards:
- Add background, border-radius, box-shadow, transition, border (border-color/style allowed, not width).

For the hero column:
- Add maybe a text-shadow or a subtle decoration? But careful — text-align stays.

Actually, I should be careful. Adding `color` etc. might be fine.

Let me consider: The glow-effects variant says:
- Glow shadows in accent color: 0 0 24px rgba(accent, 0.4)
- Halo on hover: 0 0 32px rgba(accent, 0.6)
- Medium radius (8-16px)
- Subtle pulsing animations

I shouldn't add @keyframes though? Actually the rules say @keyframes names must stay, but values inside CAN change. But there are no existing @keyframes. Adding new @keyframes might be acceptable since it doesn't break layout. However, the instruction says "NO AI-REWRITTEN comments" and to preserve selectors. Adding a new @keyframes rule would add a selector. Hmm, but @keyframes names are in the "Animation & Media" section — "animation-name (values like duration/timing CAN change)". Adding new keyframes might be risky. I'll avoid adding new keyframes to be conservative. I can still add transitions and hover effects.

Let me think of what's safe and effective:

For `.app-hero-section .badge.bg-warning`:
- It's a warning badge (Bootstrap's bg-warning is yellow). I can change its background to terracotta or sage with a glow. But the class `bg-warning` implies it's yellow. Since I can only change colors, I can override:
  ```css
  background-color: #c47b5a;
  color: #faf8f3;
  box-shadow: 0 0 24px rgba(196, 123, 90, 0.4);
  border-radius: 12px;
  ```
  But wait — does `bg-warning` set background? Yes, Bootstrap `.bg-warning { background-color: #ffc107 !important; }`. To override in the media query, I might need `!important` or higher specificity. Actually `.app-hero-section .badge.bg-warning` is more specific than `.bg-warning`, so it will override. But the media query applies at max-width 575.98px. That's fine.

For the contact cards:
- Add background, border-radius, box-shadow, transition.
  ```css
  background: linear-gradient(145deg, #faf8f3, #f0ece3);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(45, 45, 45, 0.08), 0 0 24px rgba(135, 168, 120, 0.25);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  ```
  Wait, transform is a layout-ish property? It doesn't change layout structure, but it does visually move the element. The layout constraints don't explicitly forbid transform. But to be conservative, maybe I'll avoid transform and just use box-shadow glow transitions. Actually, a hover halo is desired. I can do:
  ```css
  transition: box-shadow 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
  ```
  But without a hover rule, the transition does nothing. I could add `:hover` pseudo-classes? The rule says pseudo-classes selectors must be kept exactly — meaning I can't change existing ones, but can I add new ones? The instruction says "Selectors: keep EXACTLY". Adding new selectors would violate "only the rewritten CSS, preserving ALL selectors". Hmm.

Actually re-reading: "🏷️ SELECTORS (CRITICAL - HTML is fixed): Class names: keep EXACTLY... Pseudo-classes (:hover, :focus, ::before, ::after)" — this means if the original has them, preserve them exactly. It's ambiguous whether adding new ones is allowed. To be safe and truly conservative, I should not add new selectors or pseudo-classes. I'll only modify the existing rules and add visual properties to them.

So for the contact cards, I can add a glow shadow but no hover state. That's okay — the glow-effects variant says "Halo on hover" but if I can't add hover, I'll just do a static glow. Or I can add the transition anyway (harmless).

For the hero column `.app-hero-section .row .col-lg-7` (text-align: center), I can add:
- Maybe a text-shadow? But text-shadow on a column might affect the text inside. Since the column contains hero text, a subtle text-shadow could be nice. But it might look odd. Probably better to add nothing or a subtle color. Hmm. The target style is "warm minimal" with soft black #2d2d2d. I could add `color: #2d2d2d;` but the column likely already inherits that.

Actually, I should be careful: adding `color` might override text colors which the design might not want. But the task is to refresh the visual identity, and I'm only allowed to change colors. So it's legitimate.

Let me think about what would be a natural fit:

Original media query for small screens:
```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;
    }
}
```

I'll keep:
- `text-align: center;` (typography — cannot change)
- `font-size: 0.85rem;` (typography — cannot change)
- `padding: var(--space-md) !important;` (keep, or adjust within 20% — keep as var)

And add visual properties:

1. `.app-hero-section .row .col-lg-7`:
   - Maybe `color: #2d2d2d;` and a soft text-shadow: `0 1px 3px rgba(45,45,45,0.08)`.
   - Actually, a text-shadow on a container could affect all text. In the glow variant, maybe a very subtle glow: `text-shadow: 0 0 24px rgba(135, 168, 120, 0.15);` — hmm, that could reduce readability. Maybe not.
   - Since text-align is the only thing here, I could leave it and not add anything. But the task says "Refresh this CSS visually." I should make some visual change where possible. But I must not break layout. Adding text-shadow is visual and doesn't break layout. I'll add a subtle one.

2. `.app-hero-section .badge.bg-warning`:
   - Override background to sage/terracotta with glow.
   - Add border-radius, box-shadow, color, transition.
   - Keep font-size.

3. `.contact-channels-section article, .contact-quick-section .contact-card`:
   - Add background, border-radius, box-shadow, transition, maybe border with a soft color.
   - Keep padding.

Let me choose the palette: warm minimal with sage accent. Off-white #faf8f3, soft black #2d2d2d, sage #87a878. Terracotta #c47b5a as an alternative. I'll use sage as the accent and maybe terracotta for the warning badge (since it's a warning, terracotta fits).

Wait, the badge is `bg-warning` — warning usually yellow/orange. Terracotta (#c47b5a) is a muted orange — perfect for warning and fits the warm palette.

So plan:
- Badge: background terracotta, color off-white, glow shadow in terracotta, border-radius 12px.
- Contact cards: background gradient off-white to warm cream, border 1px solid rgba(135,168,120,0.25), border-radius 16px, box-shadow with sage glow, transition.
- Hero column: maybe a soft text-shadow in sage/terracotta, but very subtle. Actually, to avoid readability issues, I'll add a very subtle text-shadow: `text-shadow: 0 1px 2px rgba(45, 45, 45, 0.06);` — that's warm minimal. Or I could add `color: #2d2d2d;`. Hmm.

Actually, I need to be mindful: the media query is at max-width 575.98px, which is for small screens. Adding large glow shadows on mobile might not look great, but the variant asks for it. I'll keep them moderate.

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

Now about transitions: adding `transition` to the contact cards is fine. But without hover rules, it won't do anything unless something else changes. Still harmless.

Should I add `:hover` rules? The instructions say "Pseudo-classes (:hover, :focus, ::before, ::after)" must be kept exactly — this is in the "NEVER CHANGE" list. It says keep them, meaning if present, preserve them. It doesn't explicitly forbid adding. But "Selectors: keep EXACTLY" implies the selector list should be identical. Adding new selectors changes the selector list. To be safe, I won't add new :hover rules. The glow-effects variant mentions "Halo on hover: 0 0 32px" but I can't add hover without breaking the selector constraint. I'll just include the static glow and a transition so that any future hover (from other CSS) transitions smoothly.

Actually wait — maybe adding a transition that references box-shadow could conflict with the existing stylesheet. But it's fine; it's a visual property.

Let me now consider the ±20% padding rule. The original padding is `var(--space-md) !important`. I don't know the value of --space-md. I should keep it exactly to avoid layout issues. Changing to a different value could exceed 20% unknowingly. So keep `padding: var(--space-md) !important;`.

Now, what about adding `background-clip`, `border`, etc.? Border-width is not to be changed, but border-color/style can change. I can add a border if there wasn't one? The rule says "border-color and border-style (NOT border-width)". If I add `border: 1px solid ...`, I'm adding a border-width (1px). That might be considered changing border-width (from 0 to 1px). Hmm. The rule specifically says not to change border-width. Adding a border that didn't exist before technically changes border-width from 0 to something. To be conservative, I'll avoid adding borders. I'll use box-shadow for that instead.

Similarly, `background` — can I add a background where there was none? That's a color change / gradient change, which is allowed. The rule says "All color values: background, color, border-color, fill, stroke, outline-color" can change. Adding a background is allowed as a visual change. And `linear/radial/conic-gradient` changes are allowed.

Border-radius: "border-radius (visual rounding only)" — allowed, can change. Adding border-radius where there was none is fine.

So no borders, no border-width changes.

Let me draft:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #faf8f3;
        background-color: #c47b5a;
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(196, 123, 90, 0.4);
        transition: box-shadow 0.3s ease, background-color 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #faf8f3, #f0ece3);
        border-radius: 16px;
        box-shadow: 0 4px 24px rgba(45, 45, 45, 0.06), 0 0 24px rgba(135, 168, 120, 0.25);
        transition: box-shadow 0.35s ease, background-color 0.35s ease;
    }
}
```

Wait, `.app-hero-section .badge.bg-warning` — Bootstrap's `.bg-warning` sets `background-color` with !important? Actually Bootstrap 5's `.bg-warning` is `background-color: #ffc107 !important;` yes, it uses `!important`. To override, I may need `!important` on my background-color. But specificity: `.app-hero-section .badge.bg-warning` (0,3,0) vs `.bg-warning` (0,1,0) — higher specificity wins even without !important. But Bootstrap's `.bg-warning` has !important. Specificity still applies: a normal declaration with higher specificity overrides an !important declaration with lower specificity? Actually no — !important reverses the cascade. Important declarations take precedence over normal declarations regardless of specificity. However, among !important declarations, specificity applies. So Bootstrap's `.bg-warning { background-color: ... !important; }` will beat my normal `background-color` even if my selector is more specific. To win, I need `!important` on my background-color too.

So I should add `!important` to background-color for the badge. Or use `background` (shorthand) with `!important`. Let me be precise:

```css
background-color: #c47b5a !important;
```

Similarly for color? Bootstrap's `.badge` sets `color: #fff` usually? Actually `.badge` has `color: #fff` in Bootstrap. But my selector is more specific, and no !important on `.badge` color I think. To be safe, I'll add `!important` to the badge's color and background-color.

Hmm, but the original CSS in this snippet doesn't have !important except for padding. Adding !important to new properties is fine, it's a color