/* ============================================================
   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 rewrite the given CSS visual identity, but the provided CSS is only a media query with a few rules. It doesn't have many colors/shadows. We must preserve selectors and layout, and change visual properties where possible. However, the original snippet has only font-size, padding, text-align. Those are typography/layout constraints? Actually padding is layout, but we can change within ±20%. But no colors are present. We need to "refresh" visually. Since no colors exist, we can add colors? But instructions say "Only change colors, shadows, radius, transitions, gradients." If no such properties exist, we cannot change them without adding new properties. But we must preserve selectors exactly. We could add decorative properties that don't affect layout? Need to be careful. The target style is vertical-flow, airy-rhythm. The original CSS is a media query for small screens. We can introduce new visual properties like background, border-radius, box-shadow, transitions, etc. But adding background to elements could affect layout? Not layout structure, but visual. That's allowed. However, we must not change class names, selectors. We can add declarations within existing rules.

But there is also a possibility we should not add properties that weren't present? The instruction says "Only change colors, shadows, radius, transitions, gradients." We can add these properties. The self-check says "Colors throughout the file replaced with fresh palette?" There are no colors, so we need to introduce them. But we must not change width/height/padding/margin beyond 20%? The padding is `var(--space-md) !important`. We could keep padding same or adjust within ±20%. But if we change padding, might affect layout. It says "keep similar values, ±20% maximum". So we can adjust padding slightly. But the instruction says "Never change layout", but padding is layout-ish but allowed within 20%. But we don't need to change.

The main challenge: The CSS snippet is very small. We need to produce a rewritten CSS with same selectors and layout, but with visual identity changes. Since no visual properties are present, we need to add them to create a new identity. But is that acceptable? The request says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It doesn't prohibit adding new declarations. So we can add background, color, border-radius, box-shadow, transition, etc., to each selector, as long as we don't change layout properties (like display, position, sizing, etc.). We also can adjust padding within 20% if desired.

But there's a nuance: The original selectors are `@media (max-width: 575.98px) { .app-hero-section .row .col-lg-7 { text-align: center; } ... }`. We must preserve media query and selectors. We can add declarations inside each rule. We need to use a fresh palette: warm minimal off-white #faf8f3, soft black #2d2d2d, accent sage #87a878 or terracotta #c47b5a. Use border-radius 16-28px, soft pillowy shadows.

Let's design:

1. `.app-hero-section .row .col-lg-7` originally text-align center. We can add maybe color, background, border-radius, box-shadow, padding? But this is a column inside hero. Adding background to the column might be too much? It could be okay. But we need to be careful: `.col-lg-7` is a grid column; adding background might color an entire column area. It's visual, allowed. But maybe better to add a slight background tint or no background. Since the target is vertical-flow, but this is a hero section column, perhaps we can add a subtle background with border-radius and pillowy shadow to create a card-like feel. But we must not change width or padding beyond allowed. Original padding? Not set. We can add padding, but it might affect layout? The instruction says "Never change layout" but padding is layout. However, "keep similar values, ±20% maximum" only applies to existing padding. If we add new padding, does that count? It could change layout. To be safe, we should not add padding/margin if not originally present, because it would change layout. We can add background, border-radius, box-shadow, color, transition, backdrop-filter, etc. Those are decoration and don't affect layout. But border-radius doesn't affect layout, box-shadow doesn't. Background doesn't. Color doesn't. Transition doesn't. So we can safely add those.

2. `.app-hero-section .badge.bg-warning` has font-size 0.85rem. We can add background gradient? Actually it has a Bootstrap class `bg-warning`. We shouldn't change background-color because that class is Bootstrap and might be overridden. But we can add box-shadow, border-radius, transition, color? The `.badge.bg-warning` already has background-color from Bootstrap. We can enhance with a gradient? That would override background. But background property is visual, allowed. However, Bootstrap's `.bg-warning` sets background-color. We can override with a custom background-image? But we must be careful to maintain accessibility. But it's allowed. We could add a warm accent background, but the instruction says change colors. So we can change background-color to a custom color. Since the class name includes `bg-warning`, it's a utility class, but we can override inside media query.

3. `.contact-channels-section article, .contact-quick-section .contact-card` has padding: var(--space-md) !important. We can add background, border-radius, box-shadow, transition. Also maybe adjust padding within 20%? var(--space-md) is a custom property, we don't know value. We could leave padding as is, or change to `calc(var(--space-md) * 1.1)`? That might be too risky. Better keep padding the same. Add background: #faf8f3, border-radius: 24px, box-shadow: 0 8px 30px rgba(45,45,45,0.08)? But we need a fresh palette. Use warm off-white maybe for article background. But there might be a parent background. Maybe better to use a subtle card background #fff? But palette says off-white #faf8f3 for page background, soft black #2d2d2d for text, accent sage/terracotta. So for cards, we can use #ffffff? But palette says only those. Could use #fff as white, but target style is warm minimal. Maybe use `background: #ffffff`? The off-white is #faf8f3. To create contrast, we can use white or off-white. Since it's a card, maybe use #fff with soft shadow. But "warm minimal" suggests off-white background with soft black text and muted accent.

Let's create a coherent visual identity:

- For `.app-hero-section .row .col-lg-7`: maybe add a gradient background? Hmm, maybe just a subtle backdrop-filter and text-shadow. But the target style uses vertical-flow with large gaps. Since this is inside a row column, we can set background to transparent? No, we need visual change. We can add a subtle border-radius and box-shadow to make it feel like a floating card. But if the column originally has no background, adding one could be undesirable. But the instruction says "Refresh the visual identity without changing layout structure or class names." Adding background is okay.

But note: `.col-lg-7` is a column that contains text and maybe other elements. If we add background to it, it might create a big block. Could be fine. But maybe better to apply to inner elements? We cannot change selectors. So we must work with these selectors.

Let's think of a design: In the mobile hero section, center text. We can add a "card" treatment to the column: light off-white background, rounded corners, soft shadow. But the column is part of a row, and may have padding from Bootstrap grid. Adding background will cover only the column's content box. That might look like a floating panel. That's a visual refresh.

For badge: change background to terracotta gradient, add shadow, rounded pill, transition.

For contact cards: change background to white/off-white, add large border-radius, soft shadow, subtle border? We are allowed to change border-color and border-style, not border-width. We could add a border if none existed, but that would add width? Actually border adds to box size if box-sizing is content-box. But Bootstrap uses border-box by default, so adding border-width 1px doesn't affect layout? Actually with border-box, border is included within width/height, so it doesn't change layout. But adding border when none existed could change visual but not layout (since box-sizing border-box). However, we must not change border-width? The instruction says "border-color and border-style (NOT border-width)" for changes. That implies if there is a border, we can change its color/style, but not add a new border? It says never change border-width, but adding a border from none to 1px is changing border-width. So we should not add a border if none existed. That's a safe interpretation. If original has no border, we shouldn't add one.

Similarly, adding padding is not allowed? It says padding keep similar values ±20% if existing. Adding new padding may be considered changing layout. So avoid adding padding/margin. We can add border-radius, box-shadow, background, color, backdrop-filter, transition, etc.

For `.contact-channels-section article, .contact-quick-section .contact-card`, we can set `background: #fff; border-radius: 24px; box-shadow: 0 16px 40px -12px rgba(45,45,45,0.15); transition: box-shadow 0.3s ease, transform 0.3s ease;` Wait, transform change might affect layout? Transform doesn't affect layout flow, but it is an animation property. However, the instruction says we can change transition timing/easing, and animation values. Adding transform on hover? We can't add :hover unless original has it. The selector list is only these, no pseudo. We can add `transition` to animate changes on any state, but no hover. That's allowed. But adding transform to the base state would affect visual position and maybe layout? It's not layout, but it could be considered a visual change. Better not add transform.

We can add `backdrop-filter: blur(8px)` but only useful if there is a background behind. But it's a decorative property allowed. Could be nice.

Let's craft a solution that satisfies: "Colors throughout the file replaced with fresh palette?" Since original has no colors, we need to introduce them. We should explicitly use the target palette colors: #faf8f3, #2d2d2d, #87a878 or #c47b5a. Let's choose sage #87a878 as accent for one, terracotta #c47b5a for another? The palette says one muted accent. We should pick one. Let's use sage as primary accent. But maybe for a badge, terracotta is nice. But palette says one muted accent, so use sage only. Let's use sage in box-shadow colors? Shadows can be tinted with sage.

Let's design:

- Column: background: linear-gradient(135deg, #faf8f3 0%, #f3efe6 100%); border-radius: 24px; box-shadow: 0 20px 40px -20px rgba(45,45,45,0.2), 0 4px 12px rgba(135,168,120,0.1); transition: box-shadow 0.35s ease; maybe also add `backdrop-filter: blur(12px)`? But if background is solid, backdrop-filter no effect. Instead, we can use `background: rgba(250,248,243,0.8)` with backdrop-filter to create frosted glass. That would be a visual refresh. But the palette wants off-white. `rgba(250,248,243,0.85)` plus backdrop-filter. In mobile hero, there may be an image behind; frosted glass would look nice. Let's do that.

- Badge: The `.badge.bg-warning` originally is yellow. We can override `background: linear-gradient(135deg, #c47b5a, #a85a3d)`? But palette only has sage, not terracotta. We can use sage gradient: `linear-gradient(135deg, #87a878, #6b8f5e)`. Add border-radius: 999px; box-shadow: 0 4px 12px rgba(135,168,120,0.35); color: #faf8f3; transition: all 0.3s ease? But we shouldn't change font-size? font-size is set to 0.85rem; that's typography, must keep. We can add `letter-spacing`? That's typography, not allowed. So don't. We can add `box-shadow`, `background`, `border-radius`. Maybe also `backdrop-filter`? Not needed.

- Contact cards: `background: #faf8f3; border-radius: 28px; box-shadow: 0 24px 48px -16px rgba(45,45,45,0.18), 0 8px 16px -8px rgba(135,168,120,0.12); transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);` Use padding? They already have padding from original. Could we adjust padding slightly? The original padding: `var(--space-md) !important`. We don't know value. We can keep it. But to make "airy", maybe we want larger padding. We could change to `calc(var(--space-md) * 1.2)`? But that's within 20% if we treat var as unknown? Not safe. Better keep as is.

Maybe we can add `border: 1px solid transparent`? That changes border-width. Avoid. We can add `outline`? Outline doesn't affect layout. But outline-style, outline-color are allowed. We can add `outline: 1px solid rgba(135,168,120,0.2)`? Outline is visual, doesn't affect box size. That might be a nice touch. But the instruction says "outline styles (color, type)" can change, and adding outline is an outline style. However, adding outline could be considered a new property, but it doesn't affect layout. It's safe. But is it necessary? Maybe not.

Let's also consider transition timing: we can set `transition: box-shadow 0.5s ease, background-color 0.5s ease, border-radius 0.5s ease;` But border-radius transition might be weird.

Need to ensure we don't change text-align, font-size, padding. We can add `color` to text elements. For `.app-hero-section .row .col-lg-7`, add `color: #2d2d2d;` but if it contains headings, they may have their own color. Still okay.

Also for `.contact-channels-section article, .contact-quick-section .contact-card`, add `color: #2d2d2d;` maybe.

We also need to consider the selector list: `.contact-channels-section article, .contact-quick-section .contact-card` - we must preserve exactly with comma and spaces. We can add declarations to the combined rule.

Let's output only CSS without markdown.

But wait: The file fingerprint and request ID suggest this is a portion of a larger file? The provided CSS is only a media query. We must output the rewritten version of that same block, preserving the media query. We should not add extra selectors. So output exactly:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d2d2d;
        background: rgba(250, 248, 243, 0.85);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-radius: 24px;
        box-shadow: 0 20px 40px -20px rgba(45, 45, 45, 0.2), 0 4px 16px rgba(135, 168, 120, 0.12);
        transition: box-shadow 0.4s ease, background-color 0.4s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #87a878, #6b8f5e);
        color: #faf8f3;
        border-radius: 999px;
        box-shadow: 0 4px 14px rgba(135, 168, 120, 0.35);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff, #faf8f3);
        border-radius: 28px;
        box-shadow: 0 24px 48px -16px rgba(45, 45, 45, 0.18), 0 8px 20px -12px rgba(135, 168, 120, 0.15);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

But we have `transform` in transition but not in base state. That's okay; transition is just a property that defines how changes occur. However, if no transform is set, transition on transform will do nothing unless later a transform is changed by other CSS. But we can leave it. To avoid unnecessary, we can remove transform. But "transition timing, easing, duration" can change. Keep only box-shadow and background-color transitions.

Also, we changed background to gradient for contact cards. That's allowed. We used #ffffff and #f