/* ============================================================
   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 rewrite the CSS visually, preserving selectors and layout, changing colors, shadows, radius, transitions, gradients. The target style is card-mosaic with flat-solid variant: no box-shadow, solid backgrounds, minimal radius 0-6px. However the original CSS is a media query with three rules. We need to refresh visually. Since there are no colors, shadows, radius, transitions, gradients in the original? Actually original has some properties: text-align, font-size, padding. These are layout/typography? text-align is layout, font-size typography, padding layout. We cannot change font-size, padding (within ±20% might be okay but not necessary). The instruction says change colors, shadows, radius, transitions, gradients. In original CSS there are no colors, shadows, radius, transitions, gradients. So we might add new properties like color, background, border-radius? But we must preserve selectors and layout exactly. We can add visual properties without removing existing layout properties. However must not change display, position, etc. We can add color, background, border, border-radius, etc. The original file fingerprint suggests this is a segment. We need to output rewritten CSS with same selectors and same existing properties (since can't remove them? Actually we can keep them, but they are layout/typography so must stay same or within ±20% for padding). We should keep text-align, font-size, padding as is. Then add visual changes like colors, border-radius, maybe background. But "flat-solid" means solid backgrounds, no shadows, minimal radius. So perhaps we can add background colors to those elements.

Let's inspect selectors:
- .app-hero-section .row .col-lg-7 inside media max-width:575.98px: text-align:center; We can add color? maybe not appropriate. But we need "refresh visual identity". Could add background? But adding background to a column might change layout visual but not layout structure. It's fine. But we should be careful: adding colors to text might be okay. However these are sections likely with existing styles elsewhere. We only have this block. The task is to rewrite this CSS block, preserving selectors and layout exactly. We can add new declarations.

We must maintain all existing declarations exactly? The instruction says "Only change colors, shadows, radius, transitions, gradients." So existing text-align, font-size, padding are not in allowed categories. Actually "text-align" is in NEVER CHANGE list (text-align, vertical-align). So must keep exactly. "font-size" in typography never change. "padding" in layout never change (keep similar ±20%). So we keep them exactly. We can add new properties that are visual.

Target style: card-mosaic with flat-solid variant. But this is a media query for mobile. We need to apply visual identity. Maybe add:
- color: #1e293b (slate) to .col-lg-7? Hmm.
- background: maybe none? But flat-solid suggests solid backgrounds on cards. These are not cards? .contact-card is a card. .badge.bg-warning is a badge with warning background. Could add border-radius, border, color.

Since original CSS has no colors, we can add. Need to avoid breaking. Let's rewrite:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #0f172a;
        background: transparent;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 4px;
        border: 1px solid #d97706;
        color: #78350f;
        background-color: #fbbf24;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 6px;
        background-color: #ffffff;
        border: 1px solid #e2e8f0;
    }
}

But is adding background-color to .col-lg-7 okay? Maybe not necessary. Also .contact-channels-section article and .contact-card likely already have backgrounds. We could add a subtle background to make flat-solid. But "card-mosaic" suggests vibrant card colors. But in mobile media query, we can make cards solid with accents.

Need to be careful: the original selectors may be part of larger file; but our output is only this block. We must preserve the media query and all selectors exactly. Add declarations. "no box-shadow" per flat-solid variant, so no box-shadow anywhere. Use minimal radius 0-6px. So add border-radius: 6px maybe.

Let's think about allowed properties: We can add border-color and border-style but not border-width? It says "border-color and border-style (NOT border-width)". So we can set border: 1px solid #...? That includes border-width 1px, which is a width. Is that allowed? The NEVER CHANGE list does not include border-width? Actually "border-color and border-style (NOT border-width)" means we can change color and style but not width. We can set border-style and border-color but not border-width if existing. But adding a border with width changes visual but adds layout? Border-width affects box size, but if we add border, it changes layout slightly. However the instruction specifically allows border-color and border-style, not border-width. So we should not add border-width. We can use outline instead? But outline changes visual, doesn't affect layout. We can set outline: 1px solid #... but outline is allowed? "outline styles (color, type)" in changeable. It says outline-color and outline-style? Actually "outline styles (color, type)" maybe. We can use outline-color and outline-style, but not outline-width? It says outline styles (color, type) — so no width.

Better to use background-color, color, border-radius, box-shadow (but none per flat-solid). Also text-shadow. Since flat-solid variant says box-shadow: none everywhere, we don't use box-shadow. We can use border-radius. We can add background-color. We can add color. We can add border-color? We can set border-color without width? But if no border-style/width, border-color won't show. We can set border-style: solid; border-color: ...; but without width? Actually default border-width is medium (3px) if style set, which would affect layout. So avoid border-width.

We can use outline: none? No, we can set outline: 2px solid? That's width. Not allowed. So better to avoid borders altogether, use background and radius.

Need to "vibrant card colors on neutral background" and "each card type a different accent". In mobile media query, maybe:
- .app-hero-section .badge.bg-warning: background: #f59e0b; color: #fff; border-radius: 4px;
- .contact-channels-section article: background: #ec4899; color: white; border-radius: 6px;
- .contact-quick-section .contact-card: background: #8b5cf6; color: white; border-radius: 6px;

But that might be too aggressive for contact cards. However target style says vibrant. We can do that. But note original .contact-channels-section article and .contact-quick-section .contact-card share a rule. We can set them same background? Or we can have different colors by adding separate rules? We cannot change selectors, but we can add additional selectors? The instruction says preserve selectors exactly. It doesn't forbid adding new rules? "Keep ALL selectors and layout exactly as-is." We should not add new selectors not in original. So we can only modify existing rules. That means article and contact-card get same properties. But we can use CSS variables? No, that changes nothing. We could set background-color: #14b8a6 for both. But "each card type a different accent" cannot be achieved with combined selector. We could split the selector? Not allowed. We can add a new rule later with the same selector? That would alter CSS but not selector list? Actually we can add a separate rule for .contact-channels-section article and another for .contact-quick-section .contact-card, but that would change the original combined selector? The instruction says "Selector lists (commas)" in NEVER CHANGE. So we must keep the comma-separated selector as is. We cannot split. So both get same accent. Maybe acceptable.

Could we use `:nth-child`? That would be adding a pseudo-class not in original, not allowed.

Thus, simple.

Let's also consider the first rule: .app-hero-section .row .col-lg-7. In a card-mosaic layout, maybe center text on mobile. We can add a background to the hero section? But col-lg-7 is a column. Maybe no need.

Given the task is to "Refresh the visual identity", and original CSS block is small, we can add colors to make it visually distinct. But we must not alter the layout. Adding background-color to a column may affect background but not layout. Fine.

Let's construct output exactly as original with added declarations.

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

We need to keep those declarations. Add new visual declarations.

Possible:

- `.app-hero-section .row .col-lg-7 { text-align: center; color: #0f172a; }` but text color might not be necessary. Could set `background: rgba(255,255,255,0.6)`? That is not solid. flat-solid wants solid backgrounds no gradients. So avoid rgba? Could use solid #f8fafc. But a column background could look odd.

Better to focus on badge and cards.

For badge: `.app-hero-section .badge.bg-warning` has class bg-warning (Bootstrap). We can override background-color to a vibrant gradient? But flat-solid says no gradients, so solid. We can set `background-color: #f59e0b; color: #1f2937; border-radius: 9999px;` but minimal radius 0-6px, so maybe 4px. Actually badge rounded-pill? Not known. We can set `border-radius: 4px; font-weight: 600`? Can't change font-weight per rules. So only visual.

For contact cards: `background-color: #14b8a6; color: #ffffff; border-radius: 6px;` But contact cards may already have background. Overriding to teal might conflict with brand. However the task is to apply a new visual identity. So okay.

But maybe better to use a neutral background and vibrant accents via border-left? We can't add border-width. But we can use `box-shadow: none` (per flat-solid) and `outline` maybe. No.

Let's see the target style "card-mosaic" says "Vibrant card colors on neutral background. Each card type a different accent." Since we can't differentiate because of combined selector, perhaps we can give the article a background and the contact-card another by using `:where`? No.

Maybe we can exploit that the selector is a list: `.contact-channels-section article, .contact-quick-section .contact-card { ... }`. We cannot split, but we can add a new rule after it with the same properties? Actually we can add a separate rule that overrides for one of them. That would add a new selector? Wait, a rule with selector `.contact-channels-section article` is a new selector not in original. The instruction says "Keep ALL selectors and layout exactly as-is." I think it means within the output, the selectors used must be exactly those in the original; we cannot add or modify selectors. Adding a new rule with a new selector would violate. So avoid.

Thus both get same background. To honor "each card type a different accent", we could rely on original class `bg-warning` which is already yellow, and contact cards get teal. That gives two accents. The hero column maybe neutral.

Let's craft:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #f59e0b;
        color: #422006;
        border-radius: 4px;
    }

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

But adding background-color to hero column might cause full-width background on mobile. Is that desired? It's a visual change. However, the col-lg-7 maybe is inside a hero section with already a background; adding a background could look like a card. "card-mosaic" wants cards on neutral background, maybe the hero column could be a card. But the selector includes .row .col-lg-7, which is a layout column. Adding a background to a column can create a block that spans only the column width. On mobile, columns are full-width. This could be a nice "card" effect. But it might be too much.

Alternatively, we could leave first rule with only color (text color) and no background. But "flat-solid" needs solid colors. Maybe set `background-color: transparent;` but that doesn't change.

Given the conservative mode, perhaps we should be less aggressive. We can add `color` to the hero column, and `background-color` to the badge and cards. No box-shadow.

Let's think about maintaining accessibility: badge bg-warning with dark text is good.

Need to "No AI marker comments." Output only CSS.

Also, "only change colors, shadows, radius, transitions, gradients" — we are adding color, background-color, border-radius. That's allowed. But note: original had no box-shadow; flat-solid wants box-shadow: none everywhere. We don't need to add `box-shadow: none` because it's default, but to be explicit we could add `box-shadow: none;` to rules. However if original had a box-shadow from another rule, adding `box-shadow: none` in this media query would override it. That aligns with flat-solid. But is adding `box-shadow` considered changing shadows? Yes. We can add `box-shadow: none;` to all rules. Similarly `text-shadow: none;` maybe.

We should include `box-shadow: none;` to all rules to explicitly enforce no shadows. But if the element has text-shadow, we can add `text-shadow: none;`? The flat-solid says box-shadow none. We can add both. But not necessary.

Let's ensure we don't change layout: padding remains `var(--space-md) !important` exactly. font-size remains `0.85rem`. text-align remains center.

We can add transition? Allowed to change transitions, but original had none. We can add `transition: background-color 0.2s ease-in-out;` to cards. But flat-solid? Not prohibited. However "card-mosaic" could benefit. But since media query max-width 575.98, transitions not needed. We can skip.

Let's decide on final palette:
- Neutral background: #f1f5f9 (slate-100) for hero column? Actually neutral background is page itself, not necessarily hero.
- Badge accent: amber #f59e0b with dark brown text #451a03, radius 4px.
- Cards: rose #e11d48 with white text, radius 6px.

But contact cards perhaps should not be bright red? Let's pick a vibrant but professional palette: #14b8a6 (teal) for cards, #f59e0b for badge. That gives two accents. Hero column maybe #0f172a text on transparent. Actually "Vibrant card colors on neutral background" — so background neutral (#f8fafc) and cards vibrant. But adding background to hero column might be neutral.

Let's use:
- Hero column: background-color: #f8fafc; color: #0f172a;
- Badge: background-color: #f59e0b; color: #78350f; border-radius: 4px;
- Contact cards: background-color: #0ea5e9; color: #ffffff; border-radius: 6px;

Wait, "each card type a different accent" — badge is not a card type? It's a badge. The card types are article and contact-card, but they share selector. We could choose one accent for all contact cards. To make them different from each other is impossible. But we can use `background-color: var(--accent)` with custom properties? No.

Maybe use a CSS variable that can differ if inherited? Not possible.

Thus, output.

Let's also consider if adding `background-color` to `.app-hero-section .row .col-lg-7` might conflict with existing Bootstrap background? No.

Maybe we should not add background to hero column because it might look like a solid block and change visual hierarchy. But the task says "fresh color palette + shadow/radius identity". Since we cannot change shadows (must be none), we need colors and radius.

Let's keep it minimal:
- For hero column, just `color: #0f172a;` (text color) and maybe `background-color: transparent;`? That's not necessary.
- For badge, add background-color, color, border-radius.
- For cards, add background-color, color, border-radius.

But the hero column rule currently only has text-align: center. We need to change something in it. Could set `color`, or `background`, or `border-radius`. Since it's a column, border-radius might clip content? Could set `border-radius: 0.5rem;` but if no background, not visible. Let's add `background-color: #ffffff;` to make it a card. On mobile, the hero content becomes a white card with rounded corners. That fits card-mosaic.