/* ============================================================
   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 snippet with visual changes only. The original is a media query block. We need to refresh visual identity: colors, shadows, radius, transitions, etc. But the original only has layout-ish rules: text-align, font-size, padding. It has a badge.bg-warning with font-size. We can change color, background, border, shadow, etc. but must not change font-size? Wait, font-size is typography that is fixed per instructions: font-size cannot change. So `font-size: 0.85rem` must remain unchanged. Text-align cannot change. Padding can change up to ±20%. But the target style and effect variant want glow effects, masonry-flow, but the HTML is fixed and this media query only adjusts some things. We need to output rewritten CSS preserving selectors and layout exactly. Since the original has no colors or shadows, we need to add visual properties? The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." But if there are no colors, we might add them? The self-check says "Colors throughout the file replaced with fresh palette?" But there are no colors in original. So perhaps we can add color, background, border-radius, box-shadow, etc. But we must not change layout properties. We can add declarations to existing rules, as long as selectors remain. But careful: adding properties is allowed? The instruction: "Only change colors, shadows, radius, transitions, gradients." We can add decorative properties. But if we add background-color, box-shadow, etc., that's visual. We must ensure font-size unchanged. Padding can be adjusted within ±20%: original padding: var(--space-md) !important. We don't know the value, but we can change to another value? Actually var(--space-md) is a custom property; we can change the value of --space-md? But that would affect layout. Better keep padding exactly the same to be safe. We can change color of text? We can add color to .app-hero-section .badge.bg-warning, maybe make it a glow accent. But the rule is `font-size: 0.85rem;` we can add background, border, box-shadow, color. Also for the first rule, add color? text-align is center; can add color, background, etc. For .contact-card, add border-radius, box-shadow, etc.

However, we must be cautious: The output should be only the rewritten CSS. The media query is the top-level. We can add properties within the media query. But the target style "masonry-flow" is about layout, but we cannot change layout. So just apply glow-effects: soft shadows, accent glow, medium radius. Need to choose accent color. Pinterest-like: white cards, soft shadows on light gray bg. But this media query is for small screens; we can set background-color: #f8f9fa? Actually .app-hero-section .row .col-lg-7 text-align center; we can add a subtle text-shadow? Maybe not necessary. Let's create a fresh palette with soft pink or coral accent? Pinterest-like: white, gray, red accent. Effect: glow shadows in accent color. Let's pick accent: #e63946 (coral red) or #ff5a5f. Background: #f7f7f9. Cards: #ffffff with border-radius 16px. But the selectors are specific: .contact-channels-section article, .contact-quick-section .contact-card. We can add background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(230, 57, 70, 0.12); transition: box-shadow 0.3s ease, transform 0.3s ease; But transform is a layout property? Transform doesn't affect layout, but it's an animation. The allowed list: "transition timing, easing, duration" can change. Adding transition for box-shadow is fine. But can we add transform? It's not in apply list. It's not layout? But new transform property might be considered visual, but not explicitly allowed. The allowed changes list includes transitions but not transform. Better avoid adding transform. We can add hover? There is no hover selector in original. We can't add new selectors. We can only modify existing rules. So don't add :hover.

Also, .badge.bg-warning: we can add background: linear-gradient(...), color, box-shadow, border-radius, padding? Padding may change. Font-size unchanged. But .badge.bg-warning class might already have Bootstrap styles. If we override background, it changes visual. Need to keep color contrast. We'll make it a glowing pill: background: #e63946; color: #fff; box-shadow: 0 0 20px rgba(230,57,70,0.6); border-radius: 999px; maybe padding? If we add padding, it changes layout? Padding is within ±20% of original? Original doesn't have padding, so adding padding is not allowed? "padding, margin (keep similar values, ±20% maximum)" means if original has none, adding padding would be a change from 0 to something, which is not within ±20%? Actually 0 plus anything is infinite. So we should not add padding. Border-radius is allowed. Background and color allowed. Box-shadow allowed. We can add outline? Allowed. But adding border-width? No, border-color and border-style can change, but no width. Avoid adding border-width.

For .app-hero-section .row .col-lg-7, we can add background, color, etc. But maybe no need. It's a hero section, text-align center. We can add a subtle text-shadow to text? text-shadow is allowed. But the selector targets a column, not text. Add color: #333? This may override inherited color. That could be okay but might affect links? Usually .col-lg-7 contains text. We can set color: #2c3e50; maybe.

We also might adjust the media query itself? No.

We need to ensure we don't change the @media condition. Keep as is.

Now, the output should be a CSS block. We'll include the original selectors and properties, plus new visual properties. But we need to be careful to preserve the exact original declarations so layout remains. The 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 can rewrite with added decor. For example:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2b2d42;
        text-shadow: 0 2px 8px rgba(43, 45, 66, 0.12);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
        color: #fff;
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(230, 57, 70, 0.4);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 16px;
        box-shadow: 0 8px 20px rgba(230, 57, 70, 0.08), 0 0 0 1px rgba(230, 57, 70, 0.04);
        transition: box-shadow 0.35s ease;
    }
}

But potential issue: The original .contact-channels-section article might already have a background; adding background may change appearance but okay. However, the instruction says "Keep ALL selectors and layout exactly as-is." We are not changing selectors. We are adding visual properties. Good.

Need to check: We changed color scheme. But there's no "accent strip" mention. We could add a ::before? No, that would be a pseudo-element selector, which is not in original. Can't add new selectors. We could add border-left: 4px solid #e63946? Border-style and border-color allowed, but border-width is not allowed. So cannot add border-left-width. But we can add border-left: 4px solid? That includes width, forbidden. So avoid.

Maybe add background gradient to the column? For hero section, background may affect layout? Background doesn't affect layout. We can add background: radial-gradient(...). But be careful: .col-lg-7 is a column inside a row; adding background might not be desired but allowed.

Also, for .contact-channels-section article, we need to handle multiple elements: article and .contact-card. Both get same background. We can add backdrop-filter? Allowed. But small screens, maybe not.

Let's craft a complete rewrite. Also should we include any new transition duration? Yes, for box-shadow. But transition property is allowed to change. We can set transition: box-shadow 0.3s ease-in-out, background 0.3s ease-in-out. But adding transition on background is fine. We can also add animation? "Subtle pulsing animations" from effect variant. We can add an animation to the badge? But we cannot define @keyframes if not in original? The instructions allow @keyframes names to be preserved, values inside can change. But there is no @keyframes in original. Adding new @keyframes would be a new selector? Actually @keyframes is not a selector, it's an at-rule. But the output should preserve all selectors; adding new at-rule could be okay? The task says "Keep ALL selectors and layout exactly as-is." Adding @keyframes doesn't change selectors. But adding animation property to a rule might change visual. However, animation itself is allowed? The list under "ANIMATION & MEDIA" says @keyframes names (values inside CAN change), @media breakpoints, @import, @font-face, @supports, @charset, animation-name (values like duration/timing CAN change). It implies animation properties can exist. But if original has none, adding a new @keyframes might be considered changing the CSS structure but not selectors. To be safe, we can avoid animations, or use a simple transition.

The task says "subtle pulsing animations" as effect variant, but it's a target style. We can incorporate with animation if desired. But we need to output only modified original CSS; adding @keyframes could be acceptable. But conservative mode says "HTML fixed, visual changes only." Adding @keyframes is visual. But since the original file section is small, we might not want to overcomplicate. The user asked to refresh this CSS visually. The "Target Style" and "Effect Variant" are keywords generated from file content? Actually the prompt includes target style and effect variant. They may be instructions for us to apply. So we should apply glow effects. Pulsing animations might be expected. Let's consider adding an animation to the badge? But need to define @keyframes. Could do:

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 24px rgba(230, 57, 70, 0.5); }
  50% { box-shadow: 0 0 32px rgba(230, 57, 70, 0.8); }
}

But we cannot add this because it would be an extra at-rule outside the media? We can include it inside the media? @keyframes inside @media is valid. But the original file only has a media query; output could include the @keyframes within the media query or outside. However, the instruction says "Keep ALL selectors and layout exactly as-is." @keyframes isn't a selector but it's an at-rule. The list says @keyframes names (values inside CAN change). That implies if there were @keyframes, we can change values; not necessarily add new. To be conservative, skip adding keyframes.

So just add static glow shadows and radius. The "glow-effects" 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." We can't add hover, but we can set base shadows. The pulsing animation could be omitted or approximated with transition. But if we don't add animation, it's okay.

Let's check the self-check: "Colors throughout the file replaced with fresh palette?" Yes, we're adding colors. "Shadows redesigned (different offsets, colors)?" Yes. "Border-radius adjusted for new visual style?" Yes. "No AI marker comments?" Yes.

Need to ensure we don't alter forbidden properties. We should not change text-align, font-size, padding value. We'll keep `text-align: center;` and `font-size: 0.85rem;` and `padding: var(--space-md) !important;`. Good.

Now, let's design the palette. Since it's Pinterest-like, use white cards and light gray bg. But the section backgrounds are not being changed unless we set them. We can set background-color on body? No, body not in original. So we can only add background to the specific selectors. For the column, maybe set color and text-shadow. For badge, gradient red. For cards, white. That gives contrast.

Potential issue: The original `.contact-channels-section article` may be a flex item; adding background might make it visible. That's good. But the padding remains var(--space-md). If we add background, it will look like a card. Good.

We must not change `padding` value. We keep it exactly.

We need to consider if adding `background: rgba(255,255,255,0.9)` might overlay existing background images? It's fine.

Let's write the final code:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2b2d42;
        text-shadow: 0 2px 12px rgba(43, 45, 66, 0.15);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ff6b6b, #e63946);
        color: #fff;
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(230, 57, 70, 0.4);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.92);
        border-radius: 16px;
        box-shadow: 0 8px 20px rgba(230, 57, 70, 0.08), 0 0 0 1px rgba(230, 57, 70, 0.04);
        transition: box-shadow 0.3s ease;
    }
}

Would this be acceptable? We added `transition` property. It's allowed. It might be a transition on box-shadow, but without hover it's not useful. But it's okay.

Could we add `backdrop-filter: blur(8px);`? Allowed. But not needed.

Maybe we should include a more Pinterest-like background: `background: #fafafa;` on the cards? Wait, cards should be white. The light gray bg is for the page; the page background isn't in this media query. We could set the hero column background to `transparent` or not. The "Color palette: Pinterest-like: white cards, soft shadows on light gray bg". Since we can't change body, maybe set `.app-hero-section .row .col-lg-7 { background: transparent; }`? That would be a change but transparent is same as no background. Not needed.

We should ensure no invalid colors. Use consistent.

Let's think about `.badge.bg-warning`. Bootstrap's `.bg-warning` sets background-color: #ffc107 !important maybe. Our rule `background: linear-gradient(...)` would override if specificity and order? `.app-hero-section .badge.bg-warning` is more specific than `.bg-warning`; it will override. Good. Also `color: #fff` might override badge default. Fine.

But the original had `font-size: 0.85rem;` only. We're adding `background` and `box-shadow`; that's visual. Good.

Now, check if we should adjust the border-radius of the badge: `border-radius: 999px` gives pill. That's a visual change allowed. But note: `border-radius` is in the allowed list. Good.

Potential issue: For `.contact-channels-section article, .contact-quick-section .contact-card`, adding `background: rgba(255,255,255,0.92)` could affect if the original had a transparent background and the page behind is dark; but we don't know. However, the target style is light gray bg, so white cards fit.

We might want to set `color` on the cards? Not necessary, as inherited.

Let's ensure the code formatting is valid. We need to output only CSS, no markdown. We'll include exactly the media query with the added properties. We should avoid trailing spaces.

One more thought: The prompt says "Request ID: #8d7820d6" and "File: assets/css/saishi.css#块2/2". It might be a chunk of a larger file. We need to output only the rewritten block, preserving everything. Good.

We should also consider that the original uses `!important` on padding. We keep that.

Now, we can refine the colors. Let's choose accent: `#ff5a5f` or `#e63946`.