/* ============================================================
   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 respond only rewritten CSS. Need follow instructions. Need inspect original CSS. It's a media query with selectors and properties: .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. These are typography/layout, none of colors/shadows/radius/transitions. Need "Refresh visually" but must preserve selectors and layout. We can add visual properties? The instruction: HTML fixed, only color, shadows, decorative properties may change. Output rewritten CSS preserving all selectors and layout exactly. Since original CSS uses text-align and font-size and padding, these are in never change categories? text-align, font-size, padding. Could leave. But need "Refresh this CSS visually" maybe need introduce colors? However preserving layout exactly means keep properties. We can add color, background, border-radius, box-shadow? But effect variant flat-solid says box-shadow none everywhere, minimal radius. However adding visual declarations to existing selectors is okay? Need think.

The original CSS is a media query. It sets text-align, font-size, padding. We need rewrite CSS visually: perhaps adjust padding within ±20%, but need no layout break. Since target style card-mosaic? This is small snippet. We can change visual properties only. But original has no color to change. We can possibly add `color`, `background-color`, `border`? But note "only colors, shadows, and decorative properties may change" means we can add color properties? It says "All color values: background, color, border-color, fill, stroke, outline-color" and "NEVER CHANGE layout". Adding color declarations is a visual change and doesn't affect layout unless it's padding? We can also change `font-size`? It's typography, never change font-size. So leave.

Need maybe reset colors? Let's parse requirements:

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

The task: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

"Original CSS" includes only layout-ish rules. We can add visual properties. But the selectors are not necessarily cards. Need likely add border/background/color? But that may change appearance drastically. Need ensure not use box-shadow because flat-solid says box-shadow none everywhere. Could set `box-shadow: none;` maybe redundant. Need minimal radius 0-6px.

Goal: same layout, fresh color palette + shadow/radius identity. But effect says no shadows, solid colors, borders. Could add borders or backgrounds? Need maybe identify selectors: `.app-hero-section .row .col-lg-7` is hero text container. No background needed? But can add color? `.app-hero-section .badge.bg-warning` is warning badge; can set background-color? However Bootstrap background class bg-warning is existing, but we can override visual within media query maybe. `.contact-channels-section article` and `.contact-quick-section .contact-card` cards; can set background, border, border-radius.

Need maintain `!important` for padding. Could adjust padding? Not allowed? Padding can change within ±20% of input. Original uses var(--space-md), unknown value. Could leave. Better leave padding as is.

Need perhaps add `background-color`, `border`, `border-radius`, `color`, `box-shadow: none`. But "box-shadow: none everywhere" in variant. Add `box-shadow: none`? If original maybe no box-shadow. We can ensure.

Need consider media query breakpoint: same. Could include same rules plus added visual props. But "Output the rewritten CSS now" should be exactly same media query and selectors. We can include additional declarations inside each rule. Need no comments. Need avoid changing text-align, font-size, padding.

Let's craft:

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

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

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

But do we know this matches style? Need maybe use vibrant card colors on neutral background, each card type different accent. This snippet has channels and quick cards. Could set each type different accent: `.contact-channels-section article` perhaps one accent, `.contact-quick-section .contact-card` another. But selector list groups them. We could split them? But preserving selectors? We can keep selector list and add same visual? Or we can have two separate rules? Need "selector lists (commas)" preserved? It says selectors exact; we shouldn't split? We can maybe keep combined and use `:not`? But adding new selector not allowed. Better not split. Could use `.contact-channels-section article` and `.contact-quick-section .contact-card` as separate rules, but original was combined. That changes selector grouping but not HTML; allowed? "Selector lists (commas)" never change; likely preserve exactly. Avoid.

Could define CSS variables? Need not.

Need maybe not add background to hero container because on mobile it's text-align only; adding color is okay. Hero section might have existing text color. Setting color might be okay. But need "blank" perhaps.

Need perhaps set `.app-hero-section .badge.bg-warning` background and border. But is background-color with `bg-warning` overriding Bootstrap? Since `bg-warning` class sets background-color; our rule inside media query at same specificity? `.app-hero-section .badge.bg-warning` specificity 0,3,0 vs `.bg-warning` 0,1,0, so override. Good. Font-size remains.

Need perhaps set `accent-color`? No.

Need also maybe set `.contact-channels-section article, .contact-quick-section .contact-card` background solid, border, radius, box-shadow none. But if existing cards had shadows from other CSS, `box-shadow: none` ensures flat. It is a visual change but no layout.

Need maybe no `color`? Need ensure "Vibrant card colors on neutral background". Could choose background #f8fafc for cards? But need distinct accent. Could set border-left? Border is allowed but border-width not change? It says border-color and border-style may change, NOT border-width. So we can set `border-width`? It says border-color and border-style (NOT border-width). So cannot change border-width, but can add? Original no border. Adding border-width? Hmm they say "border-color and border-style (NOT border-width)", implying if border-width exists, don't change. If adding new border, need set border-width. But "only colors, shadows, and decorative properties may change" includes border-color/border-style? Actually list: "All color values: background, color, border-color, fill, stroke, outline-color", not border-width. Then "border-color and border-style (NOT border-width)" allowed. If adding border, setting `border: 1px solid` changes border-width. That might violate. Better use `border-color`? But need border-style as well. Could use `outline`? Outline style/color may change but no width. Hmm.

Maybe use `box-shadow: none` but no border. If we need visual cards on neutral background, we can set `background-color` and `border-radius`; no border/shadow. But flat-solid uses borders to define. However adding border needs width. Could use `outline: 1px solid`? Width? The rules say outline styles (color, type) but not width, but outline-width in CSS is part of outline shorthand. Maybe avoid.

Could use `background-color` to define contrast. If cards are on a neutral background, use white cards, perhaps with `border-radius` and no box-shadow. That's flat. Good. For accent, maybe use `border-top: 4px solid` but border-width. Not allowed. Could use `box-shadow: none` no.

Maybe use `background-color` on different sections via separate rules? But selector list prevents. Could use CSS custom property? Not possible.

Need maybe add `background-color` only. The card mosaic target style wants vibrant cards on neutral background. The "flat-solid" says defined by color contrast and borders. But border width constraints avoid. Maybe can use `outline` with `outline-style: solid` and `outline-color`. But outline-width default medium? The "outline styles (color, type)" allowed, not width. We can set `outline: solid` no width? CSS outline shorthand: if style set, width defaults medium. That changes outline width from original none? Hmm.

Could use `border-color` and `border-style` but not width. If original has no border, setting border-style: solid with default width medium (3px) would be too much and layout? Border affects layout (box model) but if inside padding? It can change visual layout? The instruction says never change border-width, but adding with default width would be bad. Better set `border-width: 0` is width. Not.

Could use `background-image`? It says gradients only can change; but "flat-solid" no gradients. We can use `background-color`.

Need maybe set `color` for text. But for cards, no need.

Need perhaps `border-radius` only. Radius values are allowed, "visual rounding only." Adding border-radius to cards is okay and doesn't affect layout. So output can set `border-radius: 6px` and `background-color: #fff`.

Need "fresh color palette". Let's select a cohesive palette. Need perhaps match original file? We don't have full CSS. Need choose colors that are tasteful and satisfy "vibrant card colors on neutral background" maybe:
- Hero text: `#0f172a`
- Warning badge: `background-color: #fcd34d; color: #78350f; border-radius: 6px;` (no border)
- Contact cards: `background-color: #ffffff; border-radius: 4px;` maybe set `--bs-card-bg`? No.

But maybe all cards on neutral background already. Need "each card type a different accent" but due selector list cannot. We can use `accent-color`? Or use `color` within contact article maybe no.

Could use `background-color` on `.contact-channels-section article` specifically and `.contact-quick-section .contact-card` specifically by preserving original combined? We could keep combined then later override? Let's examine: original CSS is a media query. We can add two new rules with same combined selectors? Example:

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

Then later in same media query cannot add separate. But we can extend selector list? We could replace combined with two rules. Is that considered "preserving selectors exactly"? The instruction says selectors preserve exact; maybe means not change class names or structure. In CSS, splitting a selector list changes source but same style applies to same elements. But the instruction "Selector lists (commas)" under NEVER CHANGE means likely don't add/remove. We should not split.

Need maybe use `:is()`? That changes selector. No.

Could use CSS variables: define `--card-accent` values? Not layout. But same for both.

Could target within combined using `article` and `.contact-card` with descendant? Already.

Potential need add `transition`? The original has no transitions. We can add to `.app-hero-section .badge.bg-warning` maybe `transition: background-color 0.2s ease;` but hover not here. No need.

Need ensure output has no "AI comments". Fine.

Need maybe include `box-shadow: none;` for all? Effect variant says box-shadow none everywhere. The original file has no shadows; maybe unnecessary but to fulfill can add `box-shadow: none;` to rules. But "everywhere" maybe not necessary if no shadows. It may be okay to add. For flat-solid, yes.

Need think about "card-mosaic" target says grid with mixed spans, etc. But this snippet doesn't have cards/grid; perhaps the target style descriptor irrelevant. Need not modify layout.

Potential challenge: The "original CSS" includes `padding: var(--space-md) !important;` This is in "padding" and should keep similar. We keep exact. Good.

Potential challenge: "Only change colors, shadows, radius, transitions, gradients" but we also might set `color`; okay colors.

Need perhaps use `color-scheme`? No.

Need perhaps use `background`? That includes image/gradient. But flat-solid no gradient. Use `background-color`.

Need decide exact output.

Could be:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #fbbf24;
        color: #1f2937;
        border-radius: 6px;
        box-shadow: none;
    }

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

But is `color: #111827` needed for hero and cards? It may override inherited color. Fine. But "fresh color palette" maybe all same dark. Could use distinct: hero color #0f172a; badge bg #f59e0b, color #451a03; cards bg #f8fafc? Hmm.

Need maybe neutral background? We can't set body background. But we can set cards background to `#fff`; on neutral background. Need maybe `border-radius: 4px` because minimal radius (0-6px). Use 6px.

Maybe `.app-hero-section .badge.bg-warning` could use `background-color: #fbbf24`; but original Bootstrap warning is `#ffc107`. Need fresh? Use `#f59e0b` (amber-500) or `#fbbf24` (amber-400). In dark text `#7c2d12`. Use border-radius 6px.

Maybe `.contact-channels-section article` and `.contact-card` could use `background-color: #ffffff` and `border-radius: 6px`. But maybe on mobile only, they were previously transparent? Adding white background could make them obvious. Good.

Need no `border` due border-width restriction. But flat-solid says defined by color contrast and borders. Could use `outline` with `outline-width: 1px`? The list says outline styles (color, type) may change, but not outline-width. If we add `outline: 1px solid #e5e7eb`, that's adding width. If we add `outline-style: solid; outline-color: #e5e7eb;` no width change from initial? If no outline-width set, default medium 3px, not ideal. But maybe original has none. Hmm.

Could use `box-shadow: none` plus `background-color`; no border. Good.

Need maybe use `background-clip: padding-box`? Not needed.

Need maybe preserve `!important`? Yes.

Need perhaps include `transition`? No.

Potential hidden requirement: "First character = first CSS character" so no leading blank. Good.

Need consider "Output the rewritten CSS now (no markdown, no preamble)" So final answer code only.

Let's think if there is a possibility that "only rewrite the CSS" means not add new declarations, only change values. If original has no colors, then we should output same? But task says "Refresh this CSS visually", so adding is intended. But "Rewrite CSS visually" possibly means only touch visual properties that exist. We can add.

Need maybe preserve "font-size: 0.85rem" because typography is fixed. Good. Need maybe "text-align: center" fixed. Good.

Need maybe preserve `@media (max-width: 575.98px)` exact. Good.

Need maybe use `--space-md` unchanged. Good.

Let's refine palette.

Maybe use a slate/neutral palette:

- Hero text: `#0f172a` (slate-900)
- Badge background: `#f59e0b` (amber-500) or `#fbbf24` (amber-400). Since `bg-warning` should look warning. Use `background-color: #f59e0b; color: #1e1b4b;`?
- Cards: `background-color: #ffffff; color: #0f172a; border-radius: 6px;`

But "Vibrant card colors" might mean cards themselves vibrant. Yet "flat-solid" defined by color contrast. Maybe create varied card colors using `article` and `.contact-card` somehow. Because selector list prevents separate; but could use `:nth-child`? That would add selectors; not allowed. Could use `.contact-channels-section article` plus `.contact-quick-section .contact-card`? Already.

Could add CSS variables to root? That would be new selector `:root`, not allowed.

Could use `background-color: #ffffff` for both; not vibrant card colors. But maybe acceptable because this is one media query.

Maybe choose card colors subtle warm neutrals: `#fffdf5` and `#f5f3ff`? But combined.

Maybe use `background-color: #fef3c7` for contact cards? Vibrant? Need neutral background perhaps. But then text color. Hmm.

Let's read target: "Vibr