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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

The user wants me to rewrite CSS in a "conservative mode" where HTML is fixed and only visual changes are allowed. The target style is "masonry-flow" with gradient-rich effects. The original CSS is quite short - it's a media query for max-width 575.98px with three rules.

Let me analyze the original CSS:

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

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

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

Now, I need to refresh this visually. But wait - the selectors must be preserved exactly. The properties in the original CSS are:
- `text-align: center;` - this is a layout/typography-alignment property. Is text-align allowed to change? Looking at the "NEVER CHANGE" list: "text-align, vertical-align" is listed under layout. So I should NOT change text-align.
- `font-size: 0.85rem;` - font-size is in the "NEVER CHANGE" list under typography. Should not change.
- `padding: var(--space-md) !important;` - padding is in the "NEVER CHANGE" list: "padding, margin (keep similar values, ±20% maximum)". So I should keep padding similar, ±20% maximum.

Hmm, this is tricky. The original CSS only contains properties that are mostly in the "NEVER CHANGE" list. So how do I "refresh" it?

The task says: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

But the original CSS doesn't have any colors, shadows, radius, transitions, or gradients. So there's nothing to change there directly.

Wait - maybe the intent is that I should ADD visual properties (colors, shadows, gradients, etc.) to these selectors within the media query, while keeping the existing properties intact. Since the instruction says "Only change colors, shadows, radius, transitions, gradients", and the original has none, I can add them.

But I need to be careful - adding properties doesn't break layout. Adding color, background, box-shadow, border-radius, transition, etc. is allowed as long as I don't change the forbidden properties.

Let me think about what makes sense for these selectors:

1. `.app-hero-section .row .col-lg-7` - a column in a hero section, text-align center. I could add a color, maybe a gradient text effect? But that might be too aggressive. Maybe just add a color or text-shadow. Since it's a hero section, maybe add a subtle text-shadow or color. But wait - changing color could affect readability. Let me be conservative but fresh.

2. `.app-hero-section .badge.bg-warning` - a warning badge. The `bg-warning` is a Bootstrap class that sets background-color. I can override it with a gradient background. Adding a gradient background, border-radius (though Bootstrap badge already has radius), box-shadow, transition. That fits the "gradient-rich" variant.

3. `.contact-channels-section article`, `.contact-quick-section .contact-card` - these are cards. I can add gradient backgrounds, box-shadow, border-radius, transition, border colors.

But wait, there's a constraint: "border-radius (visual rounding only)" is in the "MUST CHANGE" list. But since the original doesn't have border-radius, adding it would be a change. However, adding border-radius to a `.badge` might change its shape. The badge already has a border-radius from Bootstrap, but if I add one, I might override it. As long as I keep it "visual rounding", it should be fine.

Actually, let me re-read the instructions more carefully.

"✅ YOU MUST CHANGE (visual identity only): ... All color values ... box-shadow ... text-shadow ... border-radius ... gradient colors ... transition ... filter ... opacity ... outline ... border-color and border-style ... caret-color, accent-color ... CSS custom properties"

So the "MUST CHANGE" list says I must change these things. But if the original CSS has none of these, then there's nothing to change. Hmm.

Maybe the original CSS is just a small fragment, and the "file" is larger. The user says "File: assets/css/saishi.css#块2/2" - maybe this is block 2 of 2 of the file. So there's another block. The provided original CSS is only this media query. So I only need to rewrite this fragment.

Given that the fragment has no colors, shadows, etc., perhaps the task is to add those visual properties to the existing selectors without changing the existing declarations. That way I'm "refreshing" the visual identity.

Let me look at the target style: "masonry-flow" with "gradient-rich". The specific notes:
- Pinterest-like: white cards, soft shadows on light gray bg
- Each card may have its own accent strip
- Linear-gradient or radial-gradient on most backgrounds
- Gradient borders via border-image
- Multiple stops for richness
- Smooth long transitions (0.4-0.6s cubic-bezier)

So for this fragment, I could:

1. For `.app-hero-section .row .col-lg-7`:
   - Add a gradient text effect? That would involve `background: linear-gradient(...)` and `-webkit-background-clip: text` and `color: transparent`. But that might be too much and could affect readability. Alternatively, add a subtle text-shadow or just a color. But the instructions say to change colors. Since there's no color in the original, I could add one.
   - Actually, adding `color` doesn't break layout. Let me add a nice color that fits the palette.

2. For `.app-hero-section .badge.bg-warning`:
   - This is a warning badge. I can override `bg-warning` with a gradient. But `bg-warning` sets `background-color`. If I add `background: linear-gradient(...)`, it will override the background-color anyway (since background shorthand resets background-color). That gives a gradient-rich look.
   - Add `border: none` or `border-color`? Wait, border-color is in the "MUST CHANGE" list. But original border? The badge from Bootstrap has `border: 1px solid transparent`. I can change border-color.
   - Add box-shadow, border-radius, transition.

3. For `.contact-channels-section article` and `.contact-quick-section .contact-card`:
   - Add gradient background, box-shadow, border-radius, transition, maybe an accent strip via `::before`? But wait, I can't add pseudo-elements because that would change selectors? Actually, pseudo-elements are selectors like `::before` and `::after`. The instructions say "Pseudo-classes (:hover, :focus, ::before, ::after)" are in the "NEVER CHANGE" list - meaning I must keep them as-is. The original doesn't have any pseudo-elements, so adding them would be adding new selectors, which might be considered changing selectors. To be safe, I should NOT add new pseudo-element rules.
   - But I can add properties to the existing selectors. So I can add `background: linear-gradient(...)`, `box-shadow`, `border-radius`, `transition`, `border-color`, etc.

Wait, let me reconsider. The instructions say: "🏷️ SELECTORS (CRITICAL - HTML is fixed): ... Pseudo-classes (:hover, :focus, ::before, ::after)" - this means I should preserve any pseudo-classes that exist. If I add new ones, that changes the selector list. The rule "Keep ALL selectors and layout exactly as-is" suggests I should not add new selectors. So I'll only modify the existing three selector blocks.

Also, I need to be careful about the existing declarations:
- `text-align: center;` - keep as-is.
- `font-size: 0.85rem;` - keep as-is.
- `padding: var(--space-md) !important;` - keep as-is (or within ±20%, but let me keep exactly as-is to be safe).

I'll add visual properties to each block.

Let me design a coherent palette. The target is Pinterest-like: white cards, soft shadows on light gray bg. But the hero section badge is warning (yellow/orange). The contact cards are probably white cards on light gray background.

Let me choose:
- Background: light gray `#f7f5f2` (warm gray) or `#f5f4f0`. But I'm styling specific elements, not the body.
- For the hero col: maybe a subtle text gradient or a rich color. Let me use a deep teal or indigo. Since it's a hero, maybe a dark slate blue `#1e293b`. But to be gradient-rich, I can do a gradient text effect carefully. Actually, for a hero section column with text-align center, applying a background gradient to the text could be elegant. But it might be too aggressive if the column contains multiple elements. Let me just add a color and a subtle text-shadow.

Actually, wait. The instruction says "All color values" must change. Since there are no color values originally, adding them is a change. So I'll add color values.

Let me think about the badge: `.badge.bg-warning` - Bootstrap's `bg-warning` is `#ffc107`. I'll replace it with a gradient from warm amber to coral. Something like:
```css
background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
```
That gives a gradient-rich look. Add a box-shadow:
```css
box-shadow: 0 0.25rem 0.75rem rgba(253, 160, 133, 0.35);
```
And a border-color matching:
```css
border-color: rgba(253, 160, 133, 0.6);
```
And border-radius maybe `50rem` (pill shape) - Bootstrap badge already has `border-radius: 0.375rem` or `50rem` depending on version. Actually Bootstrap 5's `.badge` has `border-radius: 0.375rem`. Adding `border-radius: 50rem` would make it a pill. That's a visual change and fine.

Also add transition:
```css
transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
```
Wait - `transform` is not in the forbidden list, but it could affect layout? `transform` doesn't affect layout flow. But the "MUST CHANGE" list doesn't include transform. Hmm. The task says "Only change colors, shadows, radius, transitions, gradients." So I should stick to those. I can add transition, but transition on transform doesn't make sense unless transform changes. Let me just transition the visual properties like box-shadow and background.

Actually, for the cards, adding a hover effect would require a `:hover` pseudo-class, which would be a new selector. I shouldn't do that. But I can set a `transition` on the cards for future hover states. That's fine - it doesn't change layout.

Let me draft:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d3a4a;
        text-shadow: 0 0.125rem 0.5rem rgba(45, 58, 74, 0.12);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f9d976 0%, #f39f86 100%);
        border: 1px solid rgba(243, 159, 134, 0.5);
        border-radius: 50rem;
        box-shadow: 0 0.375rem 1rem -0.25rem rgba(243, 159, 134, 0.6), 0 0.125rem 0.375rem rgba(249, 217, 118, 0.3);
        transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #f7f5f2 100%);
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 1.25rem;
        box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(31, 41, 55, 0.15), 0 0.25rem 0.5rem -0.25rem rgba(31, 41, 55, 0.08);
        transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

Wait, but the original CSS has `padding: var(--space-md) !important;`. I'm keeping it exactly. Good.

But wait - for the hero col, I added `text-shadow`. The instructions say text-shadow is in the "MUST CHANGE" list, meaning I should change any existing text-shadow. Since there was none, adding one is fine.

However, adding `color: #2d3a4a` changes the text color of the entire column. That might be fine, but is it "fresh"? Let me make sure it fits the Pinterest-like palette. Actually, the Pinterest palette is white cards on light gray with dark text. A dark slate text works.

But wait - I need to consider whether adding `border: 1px solid ...` would change layout. The `.badge` already has a border from Bootstrap (usually `border: 1px solid transparent`). Adding a border with a color doesn't change border-width, so no layout change. Similarly, the contact cards might not have a border originally; adding a 1px border could change their box size. Hmm, that could affect layout slightly. But the instructions say "border-color and border-style (NOT border-width)" - meaning I can change border-color and border-style but not border-width. If the card has no border originally, adding one would add a border-width (if I use the `border` shorthand, it sets width too). To be safe, I should either use `border-color` and `border-style` only, or use a `box-shadow` to simulate a border instead.

Actually, looking at Bootstrap, `.card` has `border: 1px solid rgba(0,0,0,.125)`. But these are `article` and `.contact-card` - not necessarily Bootstrap cards. To be safe, I should not add `border-width` where there wasn't one. Instead, I can use `box-shadow` for the border effect, or use `outline` (but outline doesn't take up space in the box model, so it's safer for layout).

Hmm, but the instructions explicitly say "border-color and border-style (NOT border-width)" - this suggests that I can change border-color and border-style, but not border-width. If the original element had a border, I can recolor it. If it didn't, adding a border-width would violate the rule. Let me avoid `border` shorthand for elements that might not have borders.

Instead, for the badge, Bootstrap's `.badge` does have `border: 1px solid transparent` (in Bootstrap 5.3, `.badge` has `border: var(--bs-border-width) solid transparent`). So changing border-color is fine. I can use:
```css
border-color: rgba(243, 159, 134, 0.5);
border-style: solid;
```
But if I use `border-style: solid` and the original was `transparent` color, the width stays the same. Good. But wait, if the original border-width is 0 (no border), setting border-style to solid would make it visible with a width? No - border-style alone doesn't set width. `border-width` would remain whatever the default or Bootstrap sets. Since I'm not setting border-width, it stays as the inherited/default (likely 0 or 1px). To be safe, I'll use `box-shadow` for borders instead.

Actually, let me reconsider. The safest approach for "gradient borders" that the target style suggests is to use `border-image` or a `box-shadow` ring. But `border-image` requires a border-width to be set. Hmm.

Alternatively, I can use `background` gradients creatively. For the cards, I can do a gradient background and use `box-shadow` for the card shadow. That's enough.

Let me also think about the "masonry-flow" target. This fragment doesn't have layout properties to change (they're forbidden anyway). So I'll just apply the color/gradient/shadow identity.

Let me refine my palette:

Palette (Pinterest-like):
- Light gray background: `#f0efed` or `#f7f7f7`
- Card white: `#ffffff`
- Accent gradient: warm amber to coral (for warning badge)
- Text dark: `#2d3436` or `#1f2937`
- Soft shadows: `rgba(0, 0, 0, 0.08)` etc.

For the hero text, maybe I shouldn't change its color too drastically. The `.app-hero-section .row .col-lg-7` - it's a column that may contain various text elements. Changing `color` on the column will cascade to all text. If the original color is dark, changing it to another dark color is fine. Let