/* ============================================================
   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 refresh the CSS visually without changing selectors or layout. The user provided a CSS snippet that is a media query for max-width 575.98px. It contains three rules:

1. .app-hero-section .row .col-lg-7 { text-align: center; }
2. .app-hero-section .badge.bg-warning { font-size: 0.85rem; }
3. .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }

We need to apply the target style: card-mosaic with soft-shadows. But the given CSS doesn't have colors, shadows, radius, transitions, gradients. It only has text-align, font-size, padding. We are allowed to change padding within ±20%? Actually padding is in the NEVER CHANGE list: "padding, margin (keep similar values, ±20% maximum)". But the original uses var(--space-md). We can keep that or adjust within ±20%. However the instruction says "Only change colors, shadows, radius, transitions, gradients." But for this snippet, there are no colors etc. So essentially we can only modify the padding value slightly? Also we can add properties? The output should preserve all selectors and layout exactly. Since the original has no color to change, we might be expected to add visual enhancements? But the instruction says "Refresh the visual identity WITHOUT changing layout structure or class names." We can add new CSS declarations within existing rules, as long as they don't break layout. But we must ensure that the new declarations don't violate the constraints: e.g., don't change display, position, etc. We could add box-shadow, border-radius, transition, background, color, etc. But the original selectors are very specific and might be targeted at mobile. Adding shadows might be okay. However, the task says "Output the rewritten CSS now" and "Refresh this CSS visually". Since the original CSS has no color etc., we can add them to the existing selectors.

But careful: The original CSS is inside a media query. We should preserve the media query and all selectors. We can add new declarations. But we must ensure any added properties are visual-only (colors, shadows, radius, transitions, gradients). We should not add padding, margin, font-size, text-align because those are layout/typography fixed? Actually typography is fixed for font-size, font-weight, etc. So we cannot change font-size. But the original sets font-size: 0.85rem; we must keep it exactly. For padding, the original uses var(--space-md) !important. We can keep it. To satisfy "Refresh this CSS visually", we might add a color or background? But those selectors are for hero section, badge, and contact cards. Let's think.

The first rule: .app-hero-section .row .col-lg-7 { text-align: center; } — only text-align. We could add color? But the hero section content might inherit. Adding color could be risky but it's visual. However, the selector is for a column, not a specific text element. Changing color might affect all text inside. That's allowed, but we need to pick a color from the fresh palette. Similarly, we can add text-shadow? Might be okay.

Second rule: .app-hero-section .badge.bg-warning { font-size: 0.85rem; } — The badge has bootstrap bg-warning, so it already has a warning color. We could add box-shadow, border-radius, transition, maybe a background gradient? But the class bg-warning sets background-color. If we override background, that might change the meaning. But we are allowed to change colors. We can set a different background color, but it may conflict with Bootstrap's .bg-warning. But we can use gradient or something. However, we must preserve the class name. We can add a new background-color? But that might be considered changing the visual identity, which is intended. The badge is warning, so maybe keep a warm color.

Third rule: .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; } — This sets padding. We could add border-radius, box-shadow, transition, background, etc. The target style: card-mosaic, soft-shadows with large border-radius. That fits the contact cards. So we can add border-radius, box-shadow, background, transition to these cards.

But we must be careful: The media query is for small screens. Adding box-shadow to contact cards might be fine. But also we need to ensure no layout break. Border-radius, box-shadow don't affect layout. Background doesn't affect layout. Transition is fine.

Also we can add custom properties? The original uses var(--space-md). We can define --space-md? But that would be a :root rule, which we must not add because it's not in original? Actually we can add new rules? The instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". It doesn't say we cannot add new selectors. But the safest is to only modify existing rules and add declarations to them. Adding new selectors would change the CSS structure, and the HTML is fixed but adding new rules is not necessary. The "preserving ALL selectors" means keep existing ones unchanged in terms of selector names. We might add new rules, but that could be considered altering the file structure. Better to only modify existing rules.

Also note the target style: "Grid with mixed spans" etc. That's a layout pattern but "Aggressive only" mode? Actually the target style says "Layout pattern (Aggressive only)" meaning that layout pattern is only for aggressive mode, but we are in conservative mode. So we should NOT implement grid layout changes. We only take the color palette and effect variant. The color palette: "Vibrant card colors on neutral background, each card type a different accent." We can apply that. The effect variant: soft-shadows, multi-layer soft shadows, large border-radius 12-24px, smooth transitions 0.3-0.5s ease.

We need to output a rewritten CSS. Since the original snippet is small, we should output it with added visual properties.

Let's craft:

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

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

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

Rewrite:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d2a26; /* or a neutral dark */
        text-shadow: 0 1px 2px rgba(255,255,255,0.4); /* maybe not necessary */
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffb347, #ff8c42); /* vibrant warm accent */
        color: #1f1a17;
        border-radius: 12px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(255,140,66,0.25);
        transition: box-shadow 0.4s ease, transform 0.4s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border-radius: 18px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
        transition: box-shadow 0.4s ease, transform 0.4s ease, background 0.4s ease;
    }
}

But we must consider the original padding uses var(--space-md). We can keep it. For the contact cards, we could also set a border? But not necessary.

We should ensure that we don't change the font-size. We kept it. For the hero column, we added color. Is that okay? The original didn't have a color, so adding one changes the visual identity as requested. But we must be careful not to override typography. Color is allowed.

Also for the badge, we set background gradient. The original had bg-warning class which is Bootstrap. If .bg-warning has a background-color, our background gradient overrides it. That's fine.

For the contact cards, we set background: #fff. That might override existing backgrounds. Since the target style says each card type a different accent, but we only have two selectors: article and .contact-card. We could give them different background colors? But they are in a combined selector, so they share declarations. If we want different accents, we need separate rules. But we cannot change selectors? We can add new selectors? Actually we can add new rules, but "preserving ALL selectors" means we must keep the existing selectors exactly. Adding a new rule with a different selector is allowed? The instruction says "ALL selectors and layout exactly as-is" — that probably means don't remove or alter existing selectors, but adding new ones might be okay? However, to be safe, we shouldn't add new rules because the file structure would change. But we can split the combined selector? No, that would change the selector list structure. The original selector is `.contact-channels-section article, .contact-quick-section .contact-card { ... }`. We must preserve that exact selector list. We cannot split it into two rules because that would alter the selector grouping. So both get the same visual treatment. That's fine.

But we can also use CSS variables for accent colors? Not needed.

We should also consider the target style "soft-shadows" includes two-layer box-shadow. We used that. "Large border-radius (12-24px)" we used 18px. "Smooth transitions (0.3-0.5s ease)" we used 0.4s ease. Good.

Now, check the NEVER CHANGE list: We didn't change padding (kept var(--space-md) !important). We added border-radius, box-shadow, background, color, transition. These are allowed. We didn't change display, position, grid, width, height, margin, gap, font-size, font-weight, line-height, etc. We did not change text-align. We added color and text-shadow? Actually text-shadow is allowed. But adding text-shadow to the column might affect all text. Could be okay, but maybe too much. Let's consider if adding color to the hero column is safe. The column contains a headline and paragraph. Setting color to a dark neutral might change from white? We don't know the original. But since it's a mobile view, maybe the hero section has a light background. Setting a dark color could improve contrast. But we don't know. The instruction says "refresh visual identity". So changing color is fine.

However, we need to be conservative: "CONSERVATIVE MODE" means only visual changes, no layout. Adding color is visual. But also we should not add too many properties that could affect layout indirectly. For example, adding a background to the hero column might be too much. Let's keep it simple: only add color to the hero column? Actually the hero column text-align center is enough; maybe no color needed because there's nothing to change. But the instruction says "Only change colors, shadows, radius, transitions, gradients." It's not mandatory to add colors where none exist. We could leave the first rule as is. But "Refresh this CSS visually" implies we should do something. Since the first rule has no visual properties besides text-align (which is layout-ish but actually text-align is typography? It's listed under NEVER CHANGE: text-align must remain). So we cannot change text-align. We could add a color, but there is no element-specific color. It might be better to add a subtle text-shadow? But that might be odd.

Maybe we can add a transition or something to each rule? But for the first rule, adding transition on text-align? That doesn't make sense. We could add a color to the text inside the hero column, but the selector targets the column div. It's acceptable.

Alternatively, we could add a background gradient to the hero column itself? But that would change the appearance of the column container, possibly a large area. Might be risky.

Let's think of the overall file: This is a chunk from a larger CSS file. The section after the media query might be for mobile responsiveness. The three rules are responsive adjustments. The visual identity refresh should be applied to the entire file, but we only have this chunk. So we need to make the chunk "fresh" by adding visual properties that are consistent with the target style.

We can add:
- .app-hero-section .row .col-lg-7 { text-align: center; color: #3a3a3a; }
- .app-hero-section .badge.bg-warning { font-size: 0.85rem; background: linear-gradient(...); color: #fff; border-radius: ...; box-shadow: ...; transition: ...; }
- .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; background: #fff; border-radius: ...; box-shadow: ...; transition: ...; }

But for the badge, setting color: #fff on a warm background might be okay, but the original warning color is usually dark text on yellow. To maintain accessibility, use dark text: #1f1a17. Also we should consider the badge's padding? Bootstrap badges have padding, we don't change it.

For the contact cards, we set background to #fff. The original might already be white. But we could add a subtle background gradient to make it more vibrant? The target palette says "Vibrant card colors on neutral background, each card type a different accent." Since we can't differentiate card types here, we can give them a white background with a colored top border? But adding border would change border-style? We are allowed to change border-color, border-style, but not border-width. We could add a border-top with 4px solid accent color, but that changes the height by 4px? Actually border-width is not allowed to change, but adding a border where there was none would change the border-width from 0 to something, which is a layout change? The rule says "border-color and border-style (NOT border-width)" — so we can change border-color and style, but not set new border widths? "NOT border-width" means don't change existing border-width, but can we add a border? That would add width, potentially affecting layout (box-sizing: border-box maybe). To be safe, avoid adding borders. Use box-shadow as a border replacement.

We can use inset box-shadow to create a colored accent line without affecting layout: box-shadow: inset 0 4px 0 #ff8c42, 0 4px 8px rgba(...), ... But the target soft-shadows are outer. We can include an inset shadow as the first layer, but it's still box-shadow, allowed. However, the effect variant specifies multi-layer soft shadows: "0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)". It doesn't mention inset. But we can add a third layer if we want. But maybe too much.

Alternatively, we can give the contact cards a white background and just soft shadow. That fits "vibrant card colors" maybe not. We could make the card background a very light tint, but we don't know the surrounding background. Since the target palette says "Vibrant card colors on neutral background", we could set the card background to a vibrant accent? But both selectors share the same rule, so all cards would be same color. That might be too much.

Given the constraints, the safest is to add white background, large radius, soft shadows, transition. For the badge, add gradient and shadow. For hero column, add a subtle color and text-shadow? Let's decide.

Actually, the instruction says "Only change colors, shadows, radius, transitions, gradients." So we should not add new properties outside those categories. `color` is a color, fine. `background` is a color/gradient, fine. `border-radius` is radius. `box-shadow` is shadow. `text-shadow` is shadow. `transition` is transition. We can add any of those. So adding `color` to the hero column is fine. But is it necessary? It refreshes the text color. We'll do it.

For the hero column, we can also add a text-shadow to make text pop, but text-shadow can be subtle. Let's add a very subtle text-shadow: 0 1px 2px rgba(0,0,0,0.05). That's a shadow effect, allowed. It may not be noticeable.

For the badge, we can add `background` gradient, `color`, `border-radius`, `box-shadow`, `transition`. Since the badge is `bg-warning`, Bootstrap likely sets `--bs-badge-color` maybe. Overriding `color` is fine.

For the contact cards, we can add `background`, `border-radius`, `box-shadow`, `transition`. Also maybe `backdrop-filter`? But that might affect performance and not needed.

Now, we need to ensure the `!important` on padding remains. We'll keep it.

Let's write the rewritten CSS.

But before output, let's double-check the "self-check" list:
- Every selector character-for-character preserved? Yes: all selectors exactly the same.
- display, position, grid-template-*, flex-direction unchanged? None present.
- width, height, padding, margin within ±20%? Padding unchanged. No width/height.
- font-family, font-size, font-weight, line-height unchanged? We kept font-size: 0.85rem. No others.
- Colors throughout the file replaced with fresh palette? We added fresh colors.
- Shadows redesigned (different offsets, colors)? We added shadows.
- Border-radius adjusted for new visual style? We added border-radius.
- No AI marker comments? Yes.

Now, about the target style "card-mosaic" with "Grid with mixed spans" — but that's "