/* ============================================================
   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 visually, preserving all selectors and layout properties exactly. The original CSS is a media query block with three rules. We need to refresh visual identity: change colors, shadows, radius, transitions, gradients. But note the original CSS has no colors, shadows, radius, transitions, gradients — only font-size, text-align, padding, and custom properties usage. We can change padding? No, padding is layout, keep similar within ±20%. In the original, there is `padding: var(--space-md) !important;`. We can change the value? That would change padding slightly? Actually `--space-md` is a CSS custom property defined elsewhere. We are allowed to change custom property values in the CSS output? The rule says "CSS custom properties (--color-*, --shadow-*) values" can change. But `--space-md` is a spacing variable, not a color/shadow. We should NOT change it because it would affect layout. However, we could potentially change `padding` to similar value? But original uses `var(--space-md)`, we can keep it. If we need to add visual changes, we can add `border-radius`, `box-shadow`, `transition`, `background`, etc. to these selectors, because those are visual properties not present originally. The task says refresh this CSS visually, keep all selectors and layout exactly as-is. Thus we can add visual properties to the existing rules to give them new visual identity. We should also ensure any existing colors are changed if present. There are none. So we need to inject colors, shadows, radius, transitions matching target style: soft shadows, large border-radius, smooth transitions, Pinterest-like white cards? But these are mobile-specific sections. We can enhance.

We must preserve the media query condition and selectors. We can change the `font-size`? No, font-size is typography and is fixed. `text-align` is layout/fixed. `padding` is layout, keep similar. `!important` can remain.

So the output will be a media query with the same selectors and declarations, plus added visual properties. Need to be careful not to change layout/typography. Adding `box-shadow`, `border-radius`, `transition`, `background` is allowed. But for `.contact-channels-section article` and `.contact-quick-section .contact-card`, we can add border-radius, box-shadow, transition, perhaps background gradient? But they may already have backgrounds from other rules; adding a background might override? Since that's a media query, it may override. We can set `background-color` or `background` to a soft color. But if we add a background, that's a visual change. However, we need to ensure the overall effect matches. But the target style is masonry-flow, but this is just a few selectors. The variant is soft-shadows. We can add multi-layer shadows, border-radius 12-24px, transition 0.3-0.5s ease.

Also `.app-hero-section .row .col-lg-7` - text-align center; we could add something like `color`? No, color is a visual property, but changing text color could be allowed. But we don't know context. We can set `color: #333`? But there's no existing color. To be safe, we can add `text-shadow` maybe? But text-shadow is visual. We should not overdo. We need to keep the CSS valid, and not change layout. Adding `color` to a column might affect typography color, but it's allowed. However, if the original didn't have color, the parent likely sets color. Adding a specific color could be a visual change but may break design? Better to add subtle shadow/background? But for a hero section, adding a box-shadow to a column might be odd. The rule only says "Only change colors, shadows, radius, transitions, gradients." We can add those properties. But to preserve exact layout, adding `box-shadow` to a column might not affect layout (shadows don't affect layout). So we can.

We need to consider the mobile media query. Maybe better to add transitions and border-radius to card-like elements. Let's craft.

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 need rewrite. We can include the same declarations unchanged plus add visual declarations. For `.badge.bg-warning`, maybe add `box-shadow`, `border-radius` (e.g., 0.5rem), `transition`, maybe `text-shadow`? Badge warning color may be bootstrap warning. We can add a soft shadow.

For the contact cards, add `border-radius: 1rem;` and multi-layer soft shadows. But if we add box-shadow in a media query, it might also be on mobile only. That's fine. Add transition.

Also for hero col, maybe add `text-shadow: 0 1px 2px rgba(0,0,0,0.05);`? That's a soft text shadow. But text-align stays.

Need ensure we don't change layout. `border-radius` is visual. `transition` is visual. `box-shadow` is visual. We can add `background`? For contact cards, if we add `background: rgba(255,255,255,0.8)` it may overlay a background image. That changes visual greatly. But target style Pinterest-like white cards. The variant soft-shadows. Perhaps we can add a `backdrop-filter: blur(8px);`? That's visual. But we should be conservative. The app contact cards may already have backgrounds. Adding background could be too much. Better to add only shadows and radius, transitions.

Also `--space-md` variable uses custom property. We could potentially adjust the custom property value? No, definition is elsewhere, not in this file. We can't change it here. We could change padding to a calc? Not necessary.

Let's compose final CSS. Need output no markdown, only CSS. We'll preserve exact selectors and original declarations, plus added declarations. Add them in a logical order. Use exact indentation? The original uses 4 spaces. We'll keep similar.

We need self-check: selectors preserved. display etc not present. width/height not present. font-size/line-height etc unchanged. Added colors? We may not set colors. But we can set `background`? Maybe not. To satisfy "colors" we could add `color` to hero col? Hmm.

Maybe we should incorporate colors in shadows: shadow colors are colors. So yes, shadows have colored rgba. So we changed colors because new shadow colors. Also could add `border: 1px solid rgba(...)`? But border-width is layout? Actually border-width affects layout (border-box vs content-box), but if not changing width we can add border? The rule says "border-color and border-style (NOT border-width)" can change. We are allowed to change border-color and border-style, but adding a border with width would change layout. We should not add border if none existed because it changes width. Unless box-sizing border-box, but still changes visual. Avoid.

We can add `outline`? outline doesn't affect layout. Could add outline to badge? Not needed.

Can add `background` to contact cards? Since padding is in the media query, background doesn't affect layout. But if cards already have background, overriding with `background: linear-gradient(...)` could be a visual change. That would be a gradient, allowed. However, it might conflict with the target "white cards" if the card has an image. We could use `background-color: rgba(255,255,255,0.9)`? But that may cover images. Better to avoid background.

Maybe use `backdrop-filter: blur(6px);`? That's visual and doesn't affect layout. But not universally supported. Could add. But "soft-shadows" variant focuses on shadows. Let's just add shadows and radius, transition, and maybe `color` to a specific element? Actually, to satisfy "colors" we could set the `color` of `.app-hero-section .badge.bg-warning`? But badge warning likely text color is #212529 from bootstrap. Changing it to a warm brown could be "fresh color". But if the badge is a warning chip, changing text color may reduce contrast. Better to set `box-shadow` with tinted color.

Alternative: We can add `background` to the contact cards using a semi-transparent white with a soft shadow, which aligns with Pinterest-like white cards. But the original didn't specify any background. Since the contact card likely already has a background, we can leave it. The shadow is enough.

Let's think about the target style "masonry-flow" but we cannot change layout, so only visual. The user expects a fresh color palette. We can introduce shadows with soft neutral gray. Also border-radius large.

Final CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 0.75rem;
        box-shadow: 0 4px 8px rgba(250, 190, 88, 0.28), 0 12px 24px -8px rgba(250, 190, 88, 0.22);
        transition: box-shadow 0.35s ease, transform 0.35s ease;
        will-change: box-shadow;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 1.25rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: box-shadow 0.4s ease, transform 0.4s ease;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

But check: `transform` in transition is okay, but we don't define transform. The selector might have hover elsewhere. Transition is allowed. Could include `background` as a gradient? For overlay, `rgba(255,255,255,0.85)` might change appearance. Is that okay? It is a color. The variant says Pinterest-like white cards. But if the card is on a gray bg, this makes them white. Good. However, note `backdrop-filter` may be extraneous but fine. Need ensure `background` not fully covers content. It will create a white background, maybe desirable. But it might override existing background image from other rules. Since this media query is later and same specificity, it would override. That could remove an existing background-image. Is that acceptable? The instruction says visual changes allowed. But it could break design if cards had colorful backgrounds. The target style "white cards" implies this is intended. But we don't know. To be safer, maybe use `background-color: rgba(255,255,255,0.75)` rather than `background` shorthand. That also overrides only background-color, not background-image? Actually `background-color` is a separate property; if background-image exists, it will still be there, but color behind it. That is better. Use `background-color` instead of `background`. Good.

But if the card already has background color, this media query changes it. That's a visual change allowed. Good.

Need not add `color` to hero col? Could add but unnecessary. The original text color might be inherited. Adding `color` to hero col could be okay but might override. The instruction says change colors. We can set new color. But we don't know what it should be. We can set a very standard dark gray. However, if the hero section uses a dark background, setting dark text would be bad. In the media query, we don't know context. Maybe better not to set color. We can set `caret-color`? No. Let's avoid adding color to hero col to prevent potential readability issue. But we need to satisfy "colors" in output. The shadows include colors. The background-color and border-radius and transitions are colors. That's enough.

Also in the badge, adding box-shadow with warm yellow tint is a fresh accent.

Need output only CSS. Ensure no comment markers. We should not include the original uppercase comment. The output should start with @media. Keep !important on padding exactly. We can add `transition` on `.badge` as well. Should we add `will-change`? That's visual/performance but layout no. It is okay.

Let's verify property constraints: font-size remains 0.85rem. text-align center. padding var(--space-md) !important. Good. We changed no layout.

We added `border-radius`, `box-shadow`, `transition`, `background-color`, `backdrop-filter`, `color`, `text-shadow`. Are any of these in the "never change" list? No. `backdrop-filter` is allowed (filter, backdrop-filter can change). `text-shadow` allowed. `border-radius` allowed. `transition` allowed. `box-shadow` allowed. `background-color`? It's a color. Good.

But note: `transition` includes transform, which may be considered layout? Transform doesn't affect layout. Good. `will-change` is okay.

Potential issue: The `.badge.bg-warning` inside media query currently only has font-size. Adding `transition` with `transform` but no transform. Fine.

Need make sure the output "first character = first CSS character". No markdown fences, no explanations. We'll output exactly.

But one concern: The self-check says "Every selector character-for-character preserved?" The selectors are:

.app-hero-section .row .col-lg-7
.app-hero-section .badge.bg-warning
.contact-channels-section article,
.contact-quick-section .contact-card

We preserved.

The media query `@media (max-width: 575.98px)` preserved.

The selector .contact-channels-section article, .contact-quick-section .contact-card has a comma and spaces. Preserve exact.

Now, the original includes `padding: var(--space-md) !important;`. We keep that. We should not reorder properties? Does order matter? No. But we can keep original first, then added. We'll keep alphabetical? Better to keep original declarations first to ensure no accidental override? Actually within the same rule, order matters if conflicting but they don't conflict. We'll keep original first then add new properties.

Let's write final. Ensure no trailing spaces.

However, I need to double-check: "border-radius (visual rounding only)" allowed. We set `border-radius: 1.25rem` (20px) within 12-24px. Good. Badge 0.75rem = 12px.

"box-shadow fully redesign with multi-layer effects" We use two-layer shadows. Good.

"transition timing, easing, duration" We set 0.35s / 0.4s ease. Good.

"filter, backdrop-filter" We use backdrop-filter.

"background-color" is a color. Good.

Now, is `background-color: rgba(255,255,255,0.85)` appropriate? The cards might be on a light gray background. It creates white cards. That matches Pinterest-like. But we need not if we worry. Since the target style is explicitly Pinterest-like white cards, I'll include it.

But wait: For `.contact-channels-section article` and `.contact-quick-section .contact-card`, if they are already cards, adding background-color will make them white, but if they are transparent sections, adding white background could create white cards. Good.

One more nuance: `backdrop-filter: blur(10px)` with semi-transparent white yields a frosted glass effect. That is a visual transformation, but it may be more "glassmorphism" than "Pinterest". Soft-shadows variant allows filters? Yes, filter and backdrop-filter are allowed. But target variant is soft-shadows, not glass. Maybe remove backdrop-filter to keep it simple. The variant says multi-layer soft shadows and large radius. Let's remove backdrop-filter to avoid conflicting with "soft-shadows". But the instructions say "filter, backdrop-filter" can change, not must. Extra features may be fine, but conservative mode: "Keep visual identity refresh". A frosted glass look might be too much. Better to keep it subtle. We can leave it out.

Also `background-color` with `rgba(255,255,255,0.85)` plus `box-shadow` gives a nice card. I'll keep background-color. Maybe increase to 0.9.

For hero col, adding `text-shadow` is a subtle depth. Good. But `color: #2d2d2d` might override context. Let's consider if the hero section background is dark. On mobile, the `.col-lg-7` maybe inside a hero with dark background? The original sets text-align center, indicating text content. The hero might be an app showcase, maybe has dark gradient. Setting `color` to dark would break. Since we don't know, to be safe, don't set `color` to hero col. But the instruction says change colors. We can set `caret-color`? No. We can set `color` on badge? Badge warning text is likely dark for contrast, but can change to chocolate. Hmm.

Instead, we can add a shadow with a warm tint to the hero column? That doesn't make sense. We can add `text-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);` Without color, text-shadow works regardless. It's a visual change. That's enough. We don't need `color`.

For badge, we can add `color: #5a3b00;`? But if warning bg is #ffc107, dark brown text is normal. Changing from bootstrap `#212529` to