/* ============================================================
   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 with a visual refresh. Let me analyze the input 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;
    }
}
```

This is a media query block. The instructions say:
- Keep all selectors exactly
- Keep layout (display, position, grid, width, height, padding/margin within ±20%, etc.)
- Typography (font-family, font-size, font-weight, line-height) unchanged
- Only change colors, shadows, radius, transitions, gradients, opacity, outline, border-color, border-style, caret-color, accent-color, custom properties

Let me look at what's in the input. The selectors are:
1. `.app-hero-section .row .col-lg-7` - with `text-align: center;` (text-align is in the layout/typography protected list? Actually text-align is listed under 📐 LAYOUT: "text-align, vertical-align" — so I must NOT change it.)
2. `.app-hero-section .badge.bg-warning` - with `font-size: 0.85rem;` (font-size is protected)
3. `.contact-channels-section article, .contact-quick-section .contact-card` - with `padding: var(--space-md) !important;` (padding is protected, ±20% max... but changing var to something else? The variable `--space-md` is used. I could change the custom property value if defined elsewhere, but it's not defined here. I shouldn't change padding.)

Hmm. This CSS block is entirely composed of protected properties. None of the properties in this block are color, shadow, radius, transition, etc. So strictly speaking, there is nothing to change without violating the constraints.

However, the task says "Refresh this CSS visually" and "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette."

But the rules are also very strict: "NEVER CHANGE (would break HTML layout)" includes text-align, font-size, padding.

Hmm. What can I do here? Let me re-read the constraints.

The "MUST CHANGE" list:
- All color values: background, color, border-color, fill, stroke, outline-color
- box-shadow
- text-shadow
- border-radius
- gradient colors and stops
- transition timing, easing, duration
- filter, backdrop-filter
- opacity
- outline styles
- border-color and border-style (NOT border-width)
- caret-color, accent-color
- CSS custom properties (--color-*, --shadow-*) values

The input CSS has none of these properties. It only has:
- text-align (protected)
- font-size (protected)
- padding (protected, ±20%)

So the only way to "visually refresh" within constraints would be to add new non-layout properties that don't break layout? But the instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Adding properties is technically changing the CSS but not changing layout. But is it within scope?

Actually, the instruction says: "Refresh the visual identity WITHOUT changing layout structure or class names." So adding box-shadow, border-radius, transitions etc. to elements would be a visual change without changing layout. But the original CSS for these selectors doesn't have those. Adding them would not break layout if done carefully (box-shadow doesn't affect layout, border-radius doesn't affect layout, transition doesn't affect layout... but border-radius can affect visuals but not layout; box-shadow is purely visual).

But there's risk: adding `border-radius` to `.badge.bg-warning` might visually change a badge but won't change layout. Adding `box-shadow` to `.contact-card` won't change layout. Adding transitions won't change layout.

However, the stricter reading: "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" — we can add visual properties to existing selectors. But we cannot add new selectors or change the selector list.

Actually wait — the instruction says "preserving ALL selectors and layout exactly". It doesn't say we can't add declarations. The "NEVER CHANGE" list is about layout properties. The "MUST CHANGE" list is about visual properties. Since the input has no visual properties, to fulfill "MUST CHANGE", I need to introduce color/shadow/radius values? Hmm, but if there are no existing color values, I can't "change" them.

Let me reconsider. Perhaps the right approach is to interpret this as: the media query conditions are fixed, selectors are fixed, and I can add/alter visual declarations within each rule. But text-align and font-size are protected, so those stay. Padding stays (within ±20% — `var(--space-md)` I keep exactly).

What visual properties could I add?
- `.app-hero-section .badge.bg-warning` — a badge with `bg-warning` (Bootstrap warning yellow background). I could add `box-shadow`, `border-radius`? But `bg-warning` is a Bootstrap class that sets background-color. Adding box-shadow and border-radius would be visual only. Could add transition.
- `.contact-channels-section article, .contact-quick-section .contact-card` — cards. Add `border-radius`, `box-shadow`, `transition`? But careful: adding border-radius to a card might change the visual but not layout. Adding box-shadow doesn't affect layout. Transition doesn't affect layout.
- `.app-hero-section .row .col-lg-7` — text-align center; adding color? It's a container. Could add color? But that might be weird. Could add text-shadow? Hmm.

But wait — the original CSS is inside a media query for max-width 575.98px (mobile). Adding box-shadow and border-radius to cards at mobile is fine.

However, the instructions say "Only colors, shadows, and decorative properties may change." The safest approach is to add visual properties that are allowed, and keep protected properties exactly.

But is adding box-shadow to a selector that previously didn't have it considered "changing the visual identity"? Yes.

Alternatively, maybe I should interpret the task more conservatively: the file contains only this CSS; the "refresh" is limited to this media query. Since there are no colors/shadows to change, maybe I should output the same CSS? But the prompt explicitly says "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round." So they want visible changes.

I think the intended behavior is to add visual declarations to each rule, respecting the constraints. Let me craft a response:

For `.app-hero-section .row .col-lg-7`:
- Keep `text-align: center;`
- Add `color`? No, that might change text color and could affect contrast but not layout. Possibly add a subtle text-shadow? Hmm, text-shadow on a column container is unusual. Maybe not.

Actually, let me think about what changes make sense visually without breaking layout:

1. `.app-hero-section .row .col-lg-7`: This is a column in the hero section. On mobile, it centers text. I could add a `color` to make text a fresh shade, e.g., `color: #2d2a32;` — but the original didn't have color. Adding color is a visual change and doesn't affect layout. Or add `text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);`? That's decorative. Or `transition`? Hmm, transitions on a column don't do much. Maybe `filter`? No.

Actually, text-align is protected, so keep it. Adding color to a hero column could be okay. Let me add a subtle text-shadow? Or just color.

2. `.app-hero-section .badge.bg-warning`:
- Keep `font-size: 0.85rem;`
- Add `border-radius: 50rem;` (pill shape, Bootstrap badges often use `--bs-badge-border-radius`; rounded pill is 50rem)
- Add `box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);` (soft shadow with a warm accent)
- Add `transition: box-shadow 0.35s ease, transform 0.35s ease;` — wait, transform is not in the protected list? Transform is not listed in NEVER CHANGE. But adding transform could interfere with layout? Actually transform doesn't affect layout flow but it does visually move the element. The NEVER CHANGE list doesn't include transform. But to be safe, maybe avoid transform. Or use transition on box-shadow only. Actually transition on box-shadow is fine.
- Could add `backdrop-filter`? No, that's for glass effects; not appropriate for badge.
- Could add `caret-color`? No.

3. `.contact-channels-section article, .contact-quick-section .contact-card`:
- Keep `padding: var(--space-md) !important;`
- Add `border-radius: 16px;` (large border radius per target style 12-24px)
- Add `box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);` (the exact soft shadows from the variant)
- Add `transition: box-shadow 0.4s ease, border-radius 0.4s ease;` — transition on border-radius is weird. Just box-shadow.
- Maybe add `background` color? But these cards might have their own background from other CSS. Adding `background-color: #ffffff;` could conflict with existing design but would be a visual refresh to "white cards" per Pinterest style. However, if the card already has a background, overriding with white might be intended. But adding background-color is a color change — allowed. But could it break layout? No. Could it make text unreadable if text is white? Possibly, but we don't know. The target style is "white cards, soft shadows on light gray bg". So adding white background is aligned with the target. But the parent background is not defined here. Hmm.

Actually, adding background-color to cards could be risky because if the original card had a dark theme, white background with dark text is fine typically. But if text was white, it would become invisible. In conservative mode, we don't know. The safest is to not add background-color, only box-shadow and border-radius, which are purely additive decorations that won't affect readability.

Let me also consider adding `border` with color? Border-width would be a layout change (box-sizing: border-box might contain it, but adding a border could shift content by border-width). The rules say border-color and border-style can change, but border-width is not to be changed. Adding a border where none existed changes border-width from 0 to something. So avoid adding borders.

What about `outline`? Outline doesn't affect layout. We could add `outline: 1px solid rgba(...)`? But mobile cards with outlines might look odd. Could add `outline: none`? That changes default outline (accessibility). Not ideal.

Let me think about the badge. Bootstrap `.bg-warning` gives `background-color: #ffc107` (in Bootstrap 5.2+ it's `--bs-warning`). Adding `box-shadow` with `rgba(255, 193, 7, 0.4)` would be a nice "glow" effect. And `border-radius: 50rem` to make it a pill (Bootstrap's default badge border-radius is 0.375rem; pill is 50rem via `rounded-pill`). This is a clear visual change.

Also for the hero column, adding `color`? Maybe better: add a `text-shadow`? The column contains text; a subtle text-shadow can improve visual. But if there's already a text-shadow, overriding could change. There's no way to know. I'll add a subtle text-shadow? Actually, text-shadow could look bad on a hero image. Better to avoid text-shadow on large text. Hmm.

Alternatively, for `.app-hero-section .row .col-lg-7`, since it's a flex column (col-lg-7), we could add `transition` and `opacity`? No, changing opacity would make content transparent — bad.

Let me reconsider: maybe the safest "fresh palette" change is to add custom properties? The prompt says: "CSS custom properties (--color-*, --shadow-*) values" must change. But the input doesn't define any custom properties. We could add a `:root` block? No, that would add selectors not present. Not allowed.

Adding `color` to `.app-hero-section .row .col-lg-7`: I'll pick a deep, modern slate like `#1e1b2e` or maybe a warm gray `#292524`. But the hero might be dark background with white text. Adding a dark color could break it. Hmm.

Actually, let me look at the file name: `saishi.css` — could be a Chinese tournament site. The classes: `app-hero-section`, `badge bg-warning`, `contact-channels-section`, `contact-card`. This is from a Bootstrap-based template. The hero likely has a dark background image with white text. Adding `color` could be risky. But text-align: center is the only property; the text color comes from elsewhere.

Given the constraints, maybe I should focus on the cards and badge, and for the col-lg-7, add nothing? But the instruction says "ALL selectors" must be preserved, not necessarily that each must change. But "Previous attempt didn't change enough" suggests they want visible changes.

Actually, re-reading: "Refresh the visual identity WITHOUT changing layout structure or class names." The entire file is a mobile media query. The visual refresh should be applied to these elements. For the hero column, there's really nothing non-layout to change except color/typography. Color is a MUST CHANGE target. So adding `color` is within the scope of visual changes. I'll choose a color that's likely safe: a soft off-white would be safe if the hero is dark, but if the hero is light, it'd be invisible. Hmm.

Given the target style is "Pinterest-like: white cards, soft shadows on light gray bg", the overall theme is light. So the hero section might be light too. A dark slate text color would be safe on a light hero. I'll use `color: #1f2937` (a modern gray-800). Wait, but I shouldn't change typography... color is not typography — color is in the MUST CHANGE list. Good.

Actually, adding `color` to a column that might contain a heading could change the heading color too (inheritance). That's a visual change. It's allowed. I'll go with a deep ink tone.

Let me also think about transitions for the col: maybe `transition: color 0.3s ease;` — that only affects color changes, harmless.

For the badge: `font-size` stays. Add `border-radius: 6.25rem;` (equivalent to 100px, pill), `box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4), 0 8px 16px -6px rgba(245, 158, 11, 0.25);`, `transition: box-shadow 0.35s ease, filter 0.35s ease;`. Maybe also `filter: saturate(1.05)`? No, that could alter the warning color slightly. Actually `filter` is allowed. But it might look different. Maybe skip filter.

Also for the badge, could add `backdrop-filter`? No.

For cards: `border-radius: 18px;` and multi-layer soft shadow as specified: `box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);`. And `transition: box-shadow 0.4s ease, border-radius 0.4s ease;` — border-radius transition is fine actually, it animates the rounding. But that's pointless. Just box-shadow.

Wait, should I add `transition` to cards? The target style says "Smooth transitions (0.3-0.5s ease)". Since we're in a mobile media query, transitions on touch devices might not matter much, but it's fine. I'll add `transition: box-shadow 0.3s ease, transform 0.3s ease;` — but transform is risky? Adding a transform transition doesn't change layout; it only transitions when transform changes elsewhere. But if some other CSS sets transform on hover, this transition would animate it. That's fine. However, to be conservative, I'll transition box-shadow only.

Actually, let me consider: should I use `!important` on the new properties? The existing padding uses `!important`. Adding `box-shadow` without `!important` might be overridden by other CSS. But since we don't know, and the instruction says preserve exactly... I'll not add `!important` unless necessary. Actually, for the media query to be effective, these properties might need to override base styles. But adding `!important` is a declaration-level change, not a selector-level change. It could be considered aggressive. Given "conservative mode", I'll avoid `!important` for new properties, treating the media query as specificity enough? Bootstrap utilities might have higher specificity? `.badge.bg-warning` has same specificity as our selector (0,2,0) — ours is `.app-hero-section .badge.bg-warning` (0,3,0) so it's higher. For cards, `.contact-channels-section article` (0,1,1) and `.contact-quick-section .contact-card` (0,2,0) — should be fine.

Hmm, but actually, wait: The media query's existing rule for padding uses `!important`, suggesting they needed to override something. For new decorative properties, `!important` might be needed to override existing box-shadow? Un