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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

We need to process the user request. The user provided "File: assets/css/saishi.css#块2/2" and a CSS snippet. They want a conservative visual refresh based on target style "card-mosaic" with effect variant "flat-solid". But the snippet is small, only a media query with three rules. Need to refresh visual identity without changing selectors, layout, typography, etc. Allowed changes: colors, shadows, radius, transitions, filters, opacity, etc. But the original snippet has no colors, shadows, radius, transitions. It only sets text-align, font-size, padding. Those are layout/typography? Let's examine.

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;
    }
}

We need to "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." But the rules contain no properties that are visual identity (color, shadow, radius, transition, gradient). They are layout/typography: text-align, font-size, padding. These are not allowed to change. So what can we do? Maybe we can add new visual properties within these same selectors? The instruction says "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It doesn't say we can't add new declarations. We can add color properties, background, border, etc. But the target style is "flat-solid": box-shadow none everywhere, solid background colors only, minimal radius. Since the original has no colors, we could add colors to these elements, but that would change visual identity without breaking layout. However, we must be careful not to change the existing property values (text-align, font-size, padding) because those are layout/typography. We can append new declarations to each rule.

But the user's original snippet is from a larger file? They said "File: assets/css/saishi.css#块2/2" which means block 2 of 2. The snippet is just the last block. We need to output the rewritten CSS for this block. The target style "card-mosaic" describes a layout pattern with grid spans, etc., but this snippet doesn't contain grid. That's okay; the target is a style guide, but we only process what's given. The effect variant "flat-solid" says box-shadow none everywhere. So if we add shadows, we should not. We can use borders and background colors.

We need to produce only the rewritten CSS, preserving selectors and existing declarations exactly, and adding visual properties that are consistent. But is it acceptable to add background, border, etc.? The user says "All color values: background, color, border-color, fill, stroke, outline-color" must change. But there are none. It's okay, we can add. However, we must be careful: the original has `padding: var(--space-md) !important;` We shouldn't change that. But we could add `background` etc. That might affect layout? Not if it's just background. Border can affect box size unless box-sizing border-box? But original code likely has box-sizing border-box globally. Adding border could affect layout, so in conservative mode, maybe avoid border as well to avoid layout changes. But effect variant "flat-solid" is defined by color contrast and borders. Yet conservative mode says we cannot change border-width, but can add border? Adding a border would change box-sizing if not accounted. But if box-sizing: border-box is set globally, adding border width will reduce content area, thus changing padding effect? The original has padding var(--space-md). If we add a border, the element's rendered size may change? In border-box, total width/height fixed, content shrinks. That could break layout. Better to avoid adding border to elements that have explicit padding and sizes.

Alternatively, we can leave the CSS as-is? But the task says "Refresh this CSS visually." If there are no visual properties to change, maybe we could change the font-size? No, that's typography, forbidden. text-align? layout, forbidden. padding? margin/padding, allowed within ±20%, but text-align? It's under typography? Actually text-align is in the "never change" list? Let's check: the never change list includes "text-align, vertical-align" under 📐 LAYOUT. So text-align must stay. Font-size is typography, must stay. Padding is layout, keep similar ±20% max. So we cannot change any existing property.

Maybe the intent is to output the same CSS unchanged because there is nothing to refresh? But the mission is to refresh visual identity. Since this snippet has no visual identity properties, perhaps we need to add some? The instruction "Only change colors, shadows, radius, transitions, gradients" means we are allowed to change those properties if present, but not add? It says "Refresh this CSS visually." It might be acceptable to add new declarations to achieve visual refresh. But the target style "flat-solid" suggests using background colors to distinguish elements. Yet these are generic sections. Could we add background, color, border-radius for the badge, etc. Let's think.

We need to make a decision. The user likely wants a generated CSS that matches the style, but with selectors and existing declarations intact. Since there are no colors, we might add `background`, `color`, `border-radius`, etc. But we must ensure no layout change. Adding `color` won't affect layout. Adding `background` won't. Adding `border-radius` won't. Adding `box-shadow: none` is explicitly required by flat-solid. We can add `box-shadow: none` to all rules. That is a visual change that overrides any previous shadows? The selectors might have previous shadow from other rules; adding box-shadow: none inside media query ensures no shadow. That's a visual refresh.

But the original rules are inside a media query, and they might override other rules. If we add box-shadow: none to the contact article/card, it might remove shadows. That's good.

But the request says "Original CSS" is the entire block. We need to rewrite this CSS. We can add new declarations. Let's parse the selectors:

1. `.app-hero-section .row .col-lg-7` — likely a column. We could add `color` maybe? But no, it's a layout container. Maybe add `color: var(--text-color)`? But we don't know existing custom properties. We can set a new color value. But adding color to a column might override text color. That's a visual change. It's safe.

2. `.app-hero-section .badge.bg-warning` — badge with background warning. It already has a background (bg-warning) probably from Bootstrap. Changing its color or background could be done. But need to keep class bg-warning; we can override background with our own? That would change visual identity. But adding `background` overrides Bootstrap's warning color. That's allowed? We're changing colors. The class "bg-warning" is a selector, but the declaration background-color is a property. We can set `background: #e63946` or whatever. That changes color. But note: the existing class `bg-warning` normally sets a light yellow background. Our target palette may set a vibrant card color. We can choose.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — these are cards. We can add background, border-radius, box-shadow: none, maybe border. But border may affect layout. We can use `outline`? Outline doesn't affect layout. But outline is allowed. However, outline is a visual border outside the element, but it can overlap other elements? It doesn't affect layout, but it may be clipped. Better to use `box-shadow: none` and maybe `border-radius`? Border-radius doesn't affect layout. Background doesn't. So safe.

We need to choose a fresh palette. Target "card-mosaic": vibrant card colors on neutral background, each card type a different accent. But within this snippet, we have three selectors: hero col, badge, contact cards. We can assign:

- Hero col: maybe a text color? Or no background. But to show a change, maybe set `color: #1d3557` (dark blue) for text.
- Badge: vibrant accent, e.g., background `#f4a261` or `#e76f51`, color white, border-radius 4px, box-shadow none. But badge already has `bg-warning`; we can override with `background-color: #e07a5f; color: #fff;` or use a custom property. Since flat-solid uses solid backgrounds, no gradient.
- Contact cards: neutral background `#f1faee` or vibrant? The target says "vibrant card colors on neutral background" and "each card type a different accent". So the contact cards could be white or light with distinct left border? But "flat-solid" suggests solid backgrounds. Maybe set `background-color: #ffffff;` and `border-radius: 6px;` and `box-shadow: none;`. Currently they have padding. Adding background may not change layout. But if they originally had no background, it's fine.

But we must be careful about `!important` on padding. We can add `background-color: ...` without important. But if another rule sets background, our media query (at max-width 575.98) might be overridden by specificity? Actually the media query rule with same specificity later in file? We don't know. But we can add `!important` to be safe? The task doesn't forbid important. But it's a declaration. We could use `background-color` with `!important` to ensure it applies. But "preserve layout exactly" - important on background doesn't matter.

However, the instruction "Only change colors, shadows, radius, transitions, gradients" suggests we shouldn't add properties that aren't in these categories. We can add `color`, `background-color`, `border-color` (if border exists), `border-radius`, `box-shadow`, `transition`, etc. We should not add padding, margin, display, etc. So adding background and color is allowed.

Let's think about a coherent palette. Let's choose a "flat-solid" palette:

- Neutral background: `#f8f9fa` or `#faf3e0`? But we're not setting body background because that would require a selector. The snippet only has three selectors. We could set `.contact-channels-section article, .contact-quick-section .contact-card` to `background-color: #fff` and `border-left: 4px solid #2a9d8f`? But border-left has width, which would affect layout. So avoid border. Could use `outline: 4px solid #2a9d8f`? Outline doesn't affect layout but may be weird. Better use `box-shadow: none` and `background-color: #ffffff`.

But the target effect variant says "box-shadow: none everywhere". That means we should explicitly set `box-shadow: none` on these elements to remove any shadows. That is a change. Good.

Let's create a design:

Selector 1: `.app-hero-section .row .col-lg-7`
- Add `color: #1d3557;` (dark slate)
- Maybe add `caret-color: #2a9d8f;`? Not relevant.
- Maybe `text-shadow: none`? The original might have text shadow? Probably not.
- Add `box-shadow: none`? It's a column, shouldn't have shadow.

Selector 2: `.app-hero-section .badge.bg-warning`
- Since it's a badge, we can set:
  - `background-color: #e9c46a;` (new yellow)
  - `color: #264653;` (dark teal) for contrast
  - `border-radius: 4px;` (minimal radius)
  - `box-shadow: none;`
  - `transition: background-color 0.2s ease;`? But transitions are allowed. Could add for visual.

Selector 3: `.contact-channels-section article, .contact-quick-section .contact-card`
- These are cards. We can set:
  - `background-color: #ffffff;` (white solid)
  - `border-radius: 6px;` (minimal radius within 0-6px)
  - `box-shadow: none;`
  - Maybe `color: #2b2d42;`
  - Could use `border: 1px solid #e0e0e0`? But border width would add to size. If global box-sizing is border-box, still content area reduces; could affect text wrapping. Avoid.
  - Could use `outline: 1px solid #e0e0e0`? Outline doesn't affect layout, but it draws outside the element; with padding, it might align. Not necessary.

But wait: the original snippet has `padding: var(--space-md) !important;` on the contact cards. If we add a background color, it might change visual appearance significantly but not layout. Good.

Now, we need to output only the rewritten CSS. Let's ensure we preserve every existing declaration exactly. We can append new declarations in each rule.

Let's write:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #e9c46a;
        color: #264653;
        border-radius: 4px;
        box-shadow: none;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        color: #2b2d42;
        border-radius: 6px;
        box-shadow: none;
    }
}
```

But is this too much? We should ensure the selectors are exactly preserved. Yes.

However, the target style "card-mosaic" mentions grid with mixed spans, but no grid here. We don't need to reflect that.

The effect variant "flat-solid" says "box-shadow: none everywhere". We added to badge and cards. We didn't add to hero col, but we could add `box-shadow: none` there too. But a column shouldn't have a shadow. Adding box-shadow: none is harmless. Let's add it to be thorough.

Should we add a transition? The variant flat-solid doesn't mention transitions. But the allowed changes include transitions. We could add `transition: background-color 0.2s ease, color 0.2s ease;` to cards and badge. However, since we don't have hover rules, it's not needed. But could be okay. The mission says "Refreshing visual identity" with "transition timing, easing, duration" as allowed. To show a refresh, we could add transition to the badge and cards if they have hover elsewhere. But no hover in snippet. We can still add transition declarations; they won't hurt. But do they affect layout? No. But conservative mode asks to keep same layout; transitions are fine.

Let's consider whether adding `color` to `.app-hero-section .row .col-lg-7` might override specific component text colors? It's a container, text color inherits. Setting a default may not be desired. But the instruction says "All color values" should change; there were none, so adding is okay. The target palette should be fresh. We can choose.

Maybe a more vibrant palette for "card-mosaic": neutral background `#f4f1de` or `#f2e9e4`? But we aren't setting body. We can set cards to a light cream `#fdfcdc`, and the badge to red `#e07a5f`. The hero col text `#3d405b`. Let's pick a cohesive palette.

Palette:
- Neutral dark text: `#2b2d42`
- Muted background white: `#ffffff`
- Accent 1 (badge): `#e07a5f` (terracotta)
- Accent 2 (hero col text): `#3d405b` (dark blue-gray)
- Accent 3 (border or card accent): `#81b29a` (sage) but no border.

Maybe the cards background should be `#f2cc8f` (yellow) to make them pop? But contact cards may be informational; white is safer.

Given the style "card-mosaic" says "Vibrant card colors on neutral background • Each card type a different accent". Since there are two selectors in the third rule (article and contact-card), they should possibly have different accent backgrounds. But they are in a comma-separated selector; we cannot set different values without splitting the selector. We must keep selectors as-is. So both get the same background. We can't differentiate. We could use a single accent color for both. That's fine.

Let's think of "flat-solid": no gradients, minimal radius, defined by color contrast and borders. Since we shouldn't add borders due to layout, we can define contrast via background and text color. For the cards, white background with dark text, and maybe a strong top border via `border-top: 4px solid #2a9d8f`? But border-top adds width and affects layout. Actually adding a border to an element with box-sizing border-box on a full-width column will not change its width but will reduce content area by 4px. Since the padding is var(--space-md), the content area may still have space, but the total height might change. Could be okay but "conservative" says keep layout same. Better to avoid border. We can use `box-shadow: none` only. But then the cards won't have "defined by borders". Maybe use `outline`? Outline does not affect layout and can serve as a visual border. But outline doesn't follow border-radius in older browsers? Modern browsers do clip outline to border-radius? Actually outline follows the border edge, but not exactly radius on some browsers. It's safe enough. But outline around each card might overlap? It