/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need to output rewritten CSS based on restrictions. Original CSS is a media query block with layout-related properties like text-align, font-size, padding. We are told not to change font-size, padding? Let's read carefully.

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

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

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

Constraints:
- We must keep selectors exactly.
- Layout: padding, margin keep similar ±20% max. Here padding is var(--space-md) !important. We can't change the custom property value? Actually we can change CSS custom properties values per instructions. But we need to see if this media query defines --space-md? It doesn't. We could potentially substitute with another value? But "padding" is layout, keep similar ±20%. If we change var(--space-md) to a different spacing variable or a fixed value within 20% of --space-md? But we don't know what --space-md is. Safer to keep as is.

- font-size: 0.85rem is typography, cannot change.
- text-align cannot change.

We are asked to refresh colors, shadows, radius, transitions, gradients. In this media query, there are no colors, shadows, radius, transitions, gradients. So what can we change? Possibly nothing. Perhaps we can add new declarations in the same rules if they don't affect layout? But the instructions say "Only change colors, shadows, radius, transitions, gradients." We can add e.g. text-shadow? But the rule already has text-align; adding text-shadow is visual. But would that be "changing"? We need to output the CSS preserving selectors and layout exactly. We can add color, etc. But the HTML is fixed, but adding CSS properties is allowed? The instruction says "You MUST change: All color values... box-shadow... text-shadow... border-radius... gradients... transition... filter... opacity... outline... border-color... caret-color, accent-color... CSS custom properties." But there are none present. So we might need to introduce them in a way that doesn't alter layout. For example, to the hero section, add a text-shadow to the badge? But the badge font-size is set; we can add color, background, border-radius, box-shadow, etc. Similarly for contact cards, we can add background-color, border-radius, box-shadow, transition, etc.

But careful: The original CSS is a media query for mobile. Adding properties like background, box-shadow can change visual appearance but not layout. Border-radius might affect layout if it's on a card? Border-radius doesn't change layout dimensions except overflow hidden? It doesn't affect box size. Box-shadow doesn't affect layout. Transition doesn't affect layout. Color doesn't. So we can add these.

However, we must preserve selectors exactly and not change existing property values. We can add new declarations in existing rules. Also we can add new rules? The instruction says "Rewrite this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It doesn't say we can't add new selectors, but "Keep ALL selectors" implies we must keep existing ones, not necessarily forbidding new ones. But in conservative mode, "HTML is FIXED — only colors, shadows, and decorative properties may change." Adding new selectors is not changing existing layout but adding new visual styles. However, we should be cautious: The target style is "vertical-flow" and effect "glow-effects". But the media query is for small screens. We might want to add glow effects.

But wait, the request says "File: assets/css/saishi.css#块2/2" meaning we only output the second block of the file? We have just this snippet. We should only rewrite this snippet, not invent other rules.

Given no existing colors, the safest is to add decorative properties to the existing selectors. Let's analyze each rule.

Rule 1: `.app-hero-section .row .col-lg-7 { text-align: center; }` — we can add e.g. `color: #2d2d2d;`? But might inherit. Could also add `text-shadow: 0 2px 4px rgba(...)`. But text-shadow is visual. However, text-align is layout? Actually text-align is typography? In never-change list, "text-align" is under layout? Yes, "text-align, vertical-align" are in never-change list. So keep text-align. Add text-shadow maybe.

Rule 2: `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — we can add `background-color`, `color`, `border-radius`, `box-shadow`, etc. But note the class `bg-warning` from Bootstrap likely sets background. If we override background-color, that's visual. Need to select a warm accent: sage #87a878 or terracotta #c47b5a. The badge is a warning badge; maybe use terracotta.

Rule 3: `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — we can add `background-color`, `border-radius`, `box-shadow`, `transition`. But note we have two selectors separated by comma. We must keep both exactly.

Also we can add new declarations to existing selectors, but we should not change the `padding: var(--space-md) !important` because that's layout. We can add `border-radius: 12px;` etc.

But is adding properties to these selectors enough to "refresh visual identity"? It might. However, instruction says "You MUST change: All color values, box-shadow, text-shadow, border-radius, gradients, transition..." There are no existing ones, so we introduce new ones.

Need to ensure not to violate "width, height, padding, margin within ±20%". We don't change padding. We can add margin? No, adding margin would be layout change. Don't.

Maybe we can add `background` gradient to the hero column? But that's a layout container maybe. Could add `background: rgba(255,255,255,0.5);` but not necessary.

The target style: "vertical-flow" — but that's "Aggressive only" and says "Layout pattern (Aggressive only)" so in conservative mode we don't apply layout changes. We only use color palette and effect variant. The effect variant "glow-effects" suggests adding glow shadows. So we can add glow shadows to cards/badges.

Let's craft a response.

We need to output only CSS, no markdown.

Let's write:

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

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

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: rgba(250, 248, 243, 0.8);
        border-radius: 16px;
        box-shadow: 0 0 24px rgba(135, 168, 120, 0.15), 0 4px 12px rgba(45, 45, 45, 0.06);
        transition: box-shadow 0.3s ease, background-color 0.3s ease;
    }
}

But wait: We added `background-color` to the hero column? No, text-shadow only. That's fine.

However, in rule 3 we used rgba with sage color for shadow: rgba(135, 168, 120, 0.15). Sage is #87a878 => RGB(135,168,120). Good.

Need to consider that `.contact-channels-section article` might already have a background; adding a translucent warm off-white might be fine. But if it was transparent before, we're changing background. That's visual.

Could also add `backdrop-filter: blur(8px);` for glow? But maybe too much. Also `transition` for hover effects? We don't have hover rules in this media query, but transition can be added.

Need to ensure we don't change `font-size` etc.

Another thing: The instruction says "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)". We did multi-layer in rule 3. Rule 2 has a single layer; maybe add a second inner shadow? Could be `box-shadow: 0 0 24px rgba(...), inset 0 1px 0 rgba(...)`. Good.

Let's refine.

For the hero column, text-shadow is a visual change. But the target palette says warm minimal: off-white #faf8f3, soft black #2d2d2d. We could add color to hero column: `color: #2d2d2d;` but that might override inherited colors in the hero section, potentially affecting text that should be white? The hero section might have dark background; in Bootstrap, `.app-hero-section` may have a background. If we set color to soft black, it might make text unreadable on dark hero. But we don't know. The media query only targets the column to center text. Adding color could be risky. Better not set color unless necessary. Text-shadow with low opacity is safer.

For the badge, the original `.badge.bg-warning` likely has Bootstrap's warning background (#ffc107) and dark text. We are overriding to terracotta with off-white text. That's a clear visual identity refresh.

For contact cards, adding background and shadow.

Could also add `border: 1px solid rgba(...)`? But border adds to layout dimensions? Border-width is layout. We cannot add border-width because "border-width" is not in the never-change list? Actually never-change list includes "border-color and border-style (NOT border-width)" as must-change? Let's read: "border-color and border-style (NOT border-width)" under ✅ MUST CHANGE. That implies we should change border-color and style, but adding a border where none existed would add border-width, potentially affecting layout. Since border-width is not specified in never-change, but adding a border changes box size. In conservative mode, we must not change layout. So avoid adding borders.

Adding border-radius does not affect layout, but if the element has a background, radius clips it. Fine.

Now, the target style "vertical-flow" is marked "Aggressive only" but we are in conservative. So ignore that.

Output should not include any comments. We need to preserve the original rule order and comma selectors exactly. Add declarations with indentation matching original.

Original has one-tab indent for media query body? Actually original:

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

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

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

We will keep the exact selector lines, but add new declarations. Ensure no markdown fences.

Let's consider if we should introduce CSS custom properties? We could define `--glow-color` etc. But that would require adding a new rule or using the `:root` selector. Not allowed? We can add `:root`? That would be a new selector. The task says "rewritten CSS, preserving ALL selectors" — adding a `:root` selector is not preserving, it's adding. But we could modify existing custom properties? There are none. Since this is a snippet, better not add new selectors. Just add inline.

But the instruction says "CSS custom properties (--color-*, --shadow-*) values" must change. There are no custom properties in this snippet. We could introduce `--accent` etc. within the media query? Like define on a rule? If we add `--accent: #c47b5a;` to a rule, that's a custom property on that element, useful for descendants. But that changes custom property values, but maybe overkill. We can just use colors directly.

Let's also think about transition timing: The effect variant says "Subtle pulsing animations" but we cannot add @keyframes unless we preserve names. We could add animation to existing selectors if we define @keyframes. But adding @keyframes is a new selector; not in original. Might be outside scope. To be safe, don't add animations.

The instruction says "transition timing, easing, duration" must change. We can add transition to rule 3, and maybe to badge. Let's add transition to badge too.

Let's write a polished CSS.

Rule 1: 
.app-hero-section .row .col-lg-7 {
    text-align: center;
    text-shadow: 0 1px 2px rgba(45, 45, 45, 0.06);
}

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

Rule 3:
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background-color: rgba(250, 248, 243, 0.85);
    border-radius: 16px;
    box-shadow: 0 0 24px rgba(135, 168, 120, 0.2), 0 4px 12px rgba(45, 45, 45, 0.06);
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

But should we use `#faf8f3` or rgba? We can use hex. For backgrounds, maybe solid warm off-white.

However, one concern: `.contact-channels-section article` may be a card with its own background. Overriding to `rgba(250,248,243,0.85)` could look odd if the page background is dark. But the target style is warm minimal off-white, so presumably page background is off-white. The cards could be white. Overriding to off-white is fine.

Another concern: The media query is max-width 575.98px, so these are mobile styles. If we add background-color, it might override more specific styles with lower specificity? The media query doesn't add specificity. Bootstrap's `.bg-warning` uses `background-color: #ffc107 !important`? Actually Bootstrap `.bg-warning` is `.bg-warning { background-color: #ffc107 !important; }`? In Bootstrap 5, `.bg-warning` has `--bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;` I think it's `background-color: #ffc107 !important;` There is no !important in our rule. So our `background-color` without !important will not override the Bootstrap `.bg-warning` if that has !important. To ensure our visual change takes effect, we might need `!important` on background-color. But adding `!important` is a change in property priority, not layout. It is allowed? It might be necessary. Similarly, `color` to override Bootstrap's badge text color? Bootstrap's badge `.text-bg-warning` might set color. But the selector is `.badge.bg-warning`, not `.text-bg-warning`. In Bootstrap, `badge` class sets padding, font-size, etc. `bg-warning` sets background. The text color is inherited unless you use `text-bg-warning`. So `color` might work without !important. But background-color might need !important because `.bg-warning` uses `!important`. Let's check Bootstrap 5.3: `.bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; }` Yes, !important. So to override, we need `!important` on background-color. But the original CSS doesn't have !important there. We can add `!important` to ensure. Is that allowed? It changes the cascade, but not layout. Should be fine.

Alternatively, use `background: #c47b5a !important;` or `background-color: #c47b5a !important;`. Also maybe `border-radius` can be added. The badge may already have a border-radius via `.badge` (border-radius: var(--bs-badge-border-radius);). Our radius would need to override; but `.badge` might not use !important. So fine.

Should we also set `box-shadow`? Bootstrap `.badge` doesn't have box-shadow, so fine.

Now let's think about the `bg-warning` warning color. Warning typically implies yellow/orange. Terracotta #c47b5a is a muted orange-brown, appropriate.

Maybe use sage for cards and terracotta for badge? The target style says "One muted accent (sage #87a878 or terracotta #c47b5a)". We can use both? It says one muted accent, but using both might be okay? Better to choose one. Let's choose sage as the main accent for cards and terracotta for warning badge? That's two accents. The target