/* ============================================================
   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 are given a small CSS block. The instruction says to refresh visual identity without changing layout structure or class names. However, the CSS we are given is inside a media query and mostly contains layout-ish properties like text-align, font-size, padding. Those are typography/layout? Let's check the allowed changes carefully.

Allowed: colors, backgrounds, border-colors, fill, stroke, outline-color, box-shadow, text-shadow, border-radius, gradient colors/stops, transition timing/easing/duration, filter, backdrop-filter, opacity, outline styles, border-color/style (not width), caret-color, accent-color, CSS custom properties values.

Never change: everything else.

The original 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, we must keep selectors exactly. The properties present: text-align, font-size, padding. These are in the "never change" category: text-align and font-size and padding (padding can vary within ±20%, but "keep similar values, ±20% maximum"). However, the task says refresh this CSS visually. But there are no color properties. We can add new visual properties? The instruction says "Only change colors, shadows, radius, transitions, gradients." It does not say we cannot add visual properties? But the self-check says: "Only change colors, shadows, radius, transitions, gradients." But more importantly: "Goal: same layout, fresh color palette + shadow/radius identity". In a small media query with no visual properties, we can perhaps add box-shadow, border-radius, transitions, etc., but we must not change the layout. Adding box-shadow won't affect layout. Adding border-radius won't affect layout. Adding transition won't affect layout. Adding background-color won't affect layout (unless it triggers something but not layout). However, the selectors target specific elements. The badge might have background from other CSS; we can change colors by adding properties? But the original doesn't have a color value to replace. The instruction says "All color values ... change" — but there are none. In such case, we probably should add new color declarations? But that might be considered a visual change, okay.

Let's think about the target style: "card-mosaic" with sharp edges variant. But the actual CSS is just a media query with three rules. We're supposed to "refresh this CSS visually" — we can add decorative properties to these selectors, respecting the never-change list.

However, we must be careful: adding properties to selectors doesn't break HTML. The self-check asks: "Colors throughout the file replaced with fresh palette?" There are no colors. We can add colors that fit the palette. "Shadows redesigned (different offsets, colors)?" We can add box-shadow to elements. "Border-radius adjusted for new visual style?" We can add border-radius: 0px or 2px etc. "No AI marker comments?"

Also, we must keep the media query breakpoint unchanged. The @media condition cannot change.

Let's examine each selector:

1. .app-hero-section .row .col-lg-7 — this is a column in a hero section. On small screens, text-align center. We could add maybe a background? But it's a column, adding background might be odd. But the target style "card-mosaic" is about cards. The third rule targets card-like elements: article and .card. So we can apply card-mosaic styles there.

But we must follow the instructions: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." This likely means we are to output the same CSS but with any visual properties modified, and possibly add new visual properties as long as they don't change layout. But I need to be careful: output "rewritten CSS" preserving all selectors and layout exactly. If we add properties, we're not changing layout. That should be acceptable.

However, the original CSS has no colors. So how do we "change" them? It might be expected to introduce a fresh visual identity by adding colors. The safest approach: add visual properties in the existing rules, and maybe adjust font-size within ±20%? Wait, font-size is protected (never change). It says font-size unchanged. So we cannot modify font-size. text-align is protected. Padding can vary within ±20%. But padding is not a visual identity property like colors/shadows; it's layout. To be safe, don't change padding either. But maybe we can change padding var? No, var(--space-md) could be redefined? It's a variable reference. Changing the variable value would affect wider layout, not allowed. So leave padding as is.

Thus, the only meaningful modifications are adding new declarations that are purely visual: border, background, box-shadow, border-radius, transition, opacity, filter, etc. We must ensure they don't affect layout. Box-shadow, border-radius, background-color, transition, opacity, filter, backdrop-filter are fine. Border (width) is not allowed? Actually border-color and border-style CAN change, not border-width. But if an element has no border originally, adding a border with width > 0 changes layout because the border adds to the box size (depending on box-sizing). The instruction says "border-color and border-style (NOT border-width)" — meaning if there is a border, you can change its color/style but not width. Adding a new border is effectively changing border-width from 0 to something, which violates "not border-width". So we should not add a new border. If we add box-shadow, that doesn't affect layout. Border-radius also doesn't affect layout. So we can only add these.

We can add background color, color, box-shadow, border-radius, transition, opacity, filter, outline? Outline doesn't affect layout. Outline-color and outline-style allowed, but adding outline could be visual. But might overlay. To be safe, use box-shadow.

Let's design: The target is "card-mosaic" with sharp edges. So hard offset shadows: 4px 4px 0px solid color. Small or zero border-radius (0-4px). Strong borders: but we can't add border width. We can simulate borders with box-shadow inset? But box-shadow can be inset. Actually a hard offset shadow 4px 4px 0px solid color is like a neo-brutalist shadow. We can add that to cards. Also add border-radius: 0 or 2px. Strong borders: cannot add border. But the existing style may have borders elsewhere; we can't change what we can't see. However, the file might be just a fragment, and the full CSS is in other files. We only have this block. We must rewrite this block.

The third rule has two selectors, articles and .contact-card. We can give them a fresh card look with hard shadow and zero radius. The first rule targets a column; we can add a subtle background or text color? But maybe it's better to keep minimal. The instruction says "All color values ... change" — but none exist. So perhaps we are expected to output the same CSS with no additions, but that would not fulfill "refresh visual identity". Let's read the user prompt carefully:

"🎯 YOUR MISSION: Refresh the visual identity WITHOUT changing layout structure or class names. The HTML is FIXED — only colors, shadows, and decorative properties may change."

Then the allowed list. Then the original CSS. Then "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

So the output should contain the same selectors, same layout properties, but altered/changed/new visual properties. If no visual properties exist, we need to add them to refresh. That is within mission.

Let's craft a response.

We need to keep the media query as is: @media (max-width: 575.98px) { ... }

Rule 1: .app-hero-section .row .col-lg-7 { text-align: center; } — We can add perhaps a color, background? But this is a column, adding background might be undesirable and could change visual layout in terms of background coverage, but not layout dimensions. We can add a subtle background tint? However, the hero section might have its own background; adding a background to the column might conflict. But we can add a text-shadow? That's allowed. But text-align remains. We could add color: #1e1e1e? But changing text color might affect readability. Better to add a transition? There's nothing to transition. Maybe add nothing? But the goal is to refresh. We can add a decorative text-shadow: none? That would be meaningless. Hmm.

Maybe the instruction "only change colors, shadows, radius, transitions, gradients" means we must change these values within the CSS if present. But if none present, we could add them. However, in conservative mode, we should make minimal changes. Let's consider the "card-mosaic" target: It focuses on cards. The only card-like elements in this block are the third rule. We should apply the card-mosaic aesthetic there. The first two rules are not cards; they're hero content and badge. We can apply small visual tweaks to those too, but not overdo them.

Let's examine the second rule: .app-hero-section .badge.bg-warning { font-size: 0.85rem; } — Badge is a small label. We can add background-color? But it has a class bg-warning which presumably sets a yellow background from Bootstrap. We can override with a different background-color? But bg-warning is a Bootstrap utility class; overriding background-color in a media query is visual. We can change it to a fresh palette color. But changing background-color of a badge is a color change, allowed. Also border-radius? Badges often have rounded-pill by Bootstrap; we can set border-radius: 2px for sharp edges. And maybe box-shadow: 2px 2px 0 #000. But we must be careful not to break the layout; font-size remains 0.85rem. We can add transitions, but hover states not present.

The first rule: .app-hero-section .row .col-lg-7 { text-align: center; } — we can add color perhaps, but the hero section likely has a heading. Could add text-shadow? Maybe not. To refresh, we can add a subtle text-shadow to the column's text? Allowed. But "text-shadow" is allowed. We can use a hard shadow? But text-shadow with 4px offset might look messy. Maybe just color? But setting color may affect text. We can add a color that fits palette. Since it's a hero section, maybe a vibrant color? But background may be dark/light. Without context, safest to not add color to text. Could add a background gradient? Not needed.

Let's think about the "self-check" in the prompt: "Colors throughout the file replaced with fresh palette?" Since there are no colors, we should add some. "Shadows redesigned (different offsets, colors)?" We should add shadows. "Border-radius adjusted for new visual style?" We should add border-radius. So yes, additions are expected.

Let's set up a palette. Target style: vibrant card colors on neutral background, each card type a different accent. Sharp edges: hard offset shadows: 4px 4px 0px solid color, small or zero border-radius (0-4px), strong borders (2-3px solid) — but we can't add border-width. Simulate border with inset shadows? Actually box-shadow can simulate a border: inset 0 0 0 2px color. That doesn't affect layout. We can use that. Hard offset shadow: 4px 4px 0 0 rgba(0,0,0,1) maybe. But "strong borders" from the effect variant suggests 2-3px solid. We can use inset box-shadow to simulate a border, preserving layout. That's acceptable because we are not changing border-width property.

Alternatively, we could use outline: 2px solid... but outline-width is not in the allowed change list? Wait, allowed: "outline styles (color, type)" — outline-style and outline-color, but not outline-width. So we can change outline-style/color, not width. Adding an outline with width from 0? That's adding a new outline, which implies width. Better avoid. Use box-shadow inset.

Let's prepare:

- For .contact-channels-section article and .contact-quick-section .contact-card:
  - background-color: a vibrant color, perhaps #f4a261 or #e9c46a etc.
  - box-shadow: 4px 4px 0 0 #1e1e1e, inset 0 0 0 2px #1e1e1e; This gives hard offset shadow and simulated border.
  - border-radius: 0px;
  - transition: box-shadow 0.15s ease, transform 0.15s ease; But transition transform? Transform is layout? No, transform is visual but might be considered layout? Actually transform doesn't affect layout, but the prompt says only colors, shadows, radius, transitions, gradients. Transition is allowed. But we should not add a transform property, just transition. That's okay.

But wait: if we add transition but no hover rule, it's harmless. Could be useful if other styles have hover. But no need.

- For .app-hero-section .badge.bg-warning:
  - background-color: maybe #e76f51 (a coral).
  - box-shadow: 2px 2px 0 0 #1e1e1e;
  - border-radius: 2px;
  - transition: box-shadow 0.15s ease, background-color 0.15s ease;

- For .app-hero-section .row .col-lg-7:
  - Maybe add a color? Since it's a column, not a card. Could add a text-shadow? e.g., text-shadow: 2px 2px 0 rgba(0,0,0,0.1); This is a decorative property allowed. But maybe text-shadow on a column affects all text inside, which might be undesirable. But allowed. We could add nothing? Let's add a subtle text-shadow only if safe. Hmm.

Alternatively, we could add a transition to this rule: transition: color 0.15s ease. But no color specified. This is a visual property. It won't change layout. We can add color: #2b2b2b. But that may change text color, which is a color change. That's allowed. But is it a "refresh"? Maybe.

Another approach: Since the target style is "card-mosaic", the primary transformation should apply to card elements. The first two rules are not card elements, so we can leave them unchanged or make minimal color adjustments. But the instruction says "Only change colors, shadows, radius, transitions, gradients." If we don't change anything in the first two rules, they remain exactly same. That's acceptable because there are no visual properties to change. But the self-check says "Colors throughout the file replaced with fresh palette" — if we don't add colors to those rules, they don't have colors. So okay.

However, the user explicitly says "Refresh this CSS visually." That implies the output should look different. If we only modify the third rule, the overall CSS looks mostly the same but the card rule has new visual properties. That's a refresh.

But let's consider adding background/box-shadow to the first two rules might be overreach. The first rule is a column; adding background could alter the visual layout of the hero section, potentially undesirable. Conservative mode says keep layout same, but visual changes can happen. However, adding a background to a whole column could be a dramatic change. We should avoid unnecessary changes.

Let's look at the "card-mosaic" layout pattern described: "Grid with mixed spans... Medium gap... Cards with distinct elevation... Vary card sizes via grid-row span." This is a layout pattern, but our CSS block doesn't contain grid rules. The target style says "Layout pattern (Aggressive only):" But we are in conservative mode, so we shouldn't change layout. So we ignore layout pattern; only the color palette and effect variant matter.

The effect variant "sharp-edges" says: Hard offset shadows: 4px 4px 0px solid color; Small or zero border-radius (0-4px); Strong borders (2-3px solid); Snappy transitions (0.15s). We can apply these to the card elements in the third rule, using box-shadow to simulate strong borders. That's a great fit.

Let's craft the CSS with these additions.

Important: We must preserve the original declarations exactly? Or we can reorder them? It says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Reordering declarations is allowed as long as definitions remain. But to be safe, keep original declarations and add new ones.

Let's write:

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

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

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

But "No  comments" — comments are allowed but not those. We can include no comments at all.

Need to ensure the CSS custom properties? None.

Let's choose a color palette. Since the target is vibrant cards on neutral background, we can use:

- Card background: #f4a261 (sandy orange) or #e9c46a (yellow) or #2a9d8f (teal). We need "each card type a different accent" but we only have a shared rule for both article and .contact-card. We could use a single accent, or use separate rules? The selector is a comma list; adding different properties for each would require splitting the selector, which changes the selector list? The instruction says "Selector lists (commas)" are never change. So we cannot split them into separate rules with same selectors? Actually, splitting a comma list into separate rules would change the selector list? It would preserve the