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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

We are given a small CSS block. Need to apply visual refresh per target style: card-mosaic flavor but this is a media query with a few selectors. Only visual properties change, but there are limited properties. Let's analyze.

File: saishi.css block 2/2. 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;
    }
}

Constraints: cannot change text-align, font-size, padding? Actually padding can change within ±20% of input. But "padding: var(--space-md)" is a variable, we shouldn't change layout. Could change to a different padding value? It says padding, margin keep similar, ±20% maximum. But here uses var, so maybe leave as is. We can add visual properties: color, background, border, border-radius, box-shadow (but target flat-solid says box-shadow none everywhere). So we could add borders, backgrounds, radius. But must preserve selectors and layout. Adding properties is allowed? The instruction says "Refresh the visual identity WITHOUT changing layout structure or class names." It lists "YOU MUST CHANGE" and "NEVER CHANGE". We can add new visual properties? Likely yes, but never change layout properties. We can add border, background, color, border-radius. But must not change display etc.

However, we must be careful: The target style "card-mosaic" is for a grid layout, but this block is media query for small screens. We can introduce subtle visual changes: maybe for hero section center, not much. For badge, maybe background color? But .bg-warning is utility class. We can override background? Actually .bg-warning sets background-color: yellow. We can change to a solid vibrant color? But we have to consider original classes. The media query likely intended to adjust font-size. We can add background, border, border-radius, color changes to badge. But adding background to a badge that already has bg-warning might override. That's allowed.

Need to output only rewritten CSS, preserving all selectors exactly. Let's craft.

Target flat-solid: box-shadow none everywhere. There are currently no shadows. We can add none? Maybe not needed.

Color palette: vibrant card colors on neutral background. But here no cards. We can apply neutral background to hero? But .app-hero-section maybe has background. We could set color? We should avoid breaking.

Let's think what visual identity refresh means. Because original has only text-align, font-size, padding. We can add color property changes. For the first selector, text-align center is layout-ish (text-align is allowed? It says text-align, vertical-align are in NEVER CHANGE? Actually under "Typography" it says text-align, vertical-align under NEVER CHANGE? Let's check: "📐 LAYOUT (HTML cannot adapt to changes): ... text-align, vertical-align" yes, text-align is not to change. So must keep text-align: center. We can add maybe color? But .app-hero-section .row .col-lg-7 is a column container, not text. Setting color might affect text.

Second selector: font-size unchanged, but can add background, border, etc.

Third selector: padding var --space-md; cannot change? It says padding keep similar, ±20%. If we change to calc(var(--space-md) - 2px) maybe not similar? Better leave. We can add border/radius/background? But .contact-card maybe has background. Adding background may override. It's okay.

Given constraints, the output can be very close to original with added visual properties. But the instruction says "YOU MUST CHANGE: All color values, box-shadow, text-shadow, border-radius, gradients, transitions, filter, backdrop-filter, opacity, outline styles, border-color/style, caret-color, accent-color, CSS custom properties values." In original, there are no color values except maybe var(--space-md) is spacing. So nothing to change there. But we are expected to introduce colors/radius.

We can add border-radius to hero column? No, a column shouldn't have radius maybe. Add color/border to badge? Add border-radius and border to contact cards?

Let's make minimal but fresh. Since target "card-mosaic" with flat-solid: neutral background, vibrant card colors, minimal radius. We can set:

- .app-hero-section .row .col-lg-7 { text-align: center; } unchanged.
- .app-hero-section .badge.bg-warning { font-size: 0.85rem; background-color: #ffb300; color: #1a1a1a; border: 1px solid #e0a800; border-radius: 4px; } But changing background-color may override Bootstrap bg-warning. That's okay. But should we? The class is bg-warning, so altering may be bad. But visual identity demands color refresh. We could keep yellow but choose a vibrant amber. Use a different color? Maybe #ffc107 vs #ffb300. However, color values must change? Original has no color values. So adding is fine.

- Contact cards: add border, background, border-radius. But the selector has two parts, both get same styles. If we add background to article and .contact-card, could alter look. But that's visual.

Need to be careful about `!important` on padding. We can keep. Add maybe background-color: #ffffff; border: 1px solid #e9ecef; border-radius: 6px; but contact cards may already have backgrounds; overriding could be fine.

But the media query is for max-width 575.98px. Should we set backgrounds at mobile only? Could be.

The "EFFECT VARIANT: flat-solid" says box-shadow none everywhere. We should explicitly add `box-shadow: none;`? Maybe not necessary. But to be safe, we can add `box-shadow: none;` to contact cards? But that might be redundant. However, if original had box-shadow from other styles, we need to remove. It's okay to add box-shadow none. But the target says box-shadow none everywhere, so adding none is aligned.

Also "Minimal radius (0-6px)" so use 4px/6px.

Let's produce a rewritten CSS with same selectors and layout. Need to preserve padding uses var. We can add after padding? We can reorder properties.

Let's draft:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ffb300;
        color: #1f2933;
        border: 1px solid #d99e00;
        border-radius: 4px;
        box-shadow: none;
    }

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

But wait: adding color to a column might not be desirable if it contains headings with their own colors. It's okay but maybe better not. The instruction says you must change colors; but if there are no colors in original, adding some is a change. But we should avoid changing layout. color doesn't affect layout. Fine.

However, "Every selector character-for-character preserved?" Yes. We preserved selectors exactly.

Need to think: The target style "card-mosaic" suggests "Vibrant card colors on neutral background" and "Each card type a different accent". In media query, `.contact-channels-section article, .contact-quick-section .contact-card` is a list of two different card types. We could give different colors for each, but since they share a selector, we can't differentiate without adding new selectors. We cannot add selector lists? Actually we could split them, but selectors would change? The original combined them with comma. The instruction says selector lists preserved? It says "Selector lists (commas)" under "NEVER CHANGE"? Actually in the NEVER CHANGE list, "Selector lists (commas)" means keep selector lists exactly. So cannot split. Therefore same styles.

Maybe for .badge.bg-warning, add a solid vibrant color.

Also note: "No gradients" so use solid. Good.

Should we change `background-color` of `.app-hero-section .badge.bg-warning`? It's `bg-warning` utility, but we can override. Yet `.bg-warning` in Bootstrap is `background-color: #ffc107 !important;`? Actually Bootstrap `.bg-warning` has `background-color: #ffc107 !important;` if using utilities? It doesn't have important? In Bootstrap 5, `.bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; }` It has !important. So our non-important override won't work. Could add `!important`. But if we add `!important` to background-color, that's allowed? It changes specificity but not layout. However, we should be cautious. The original rule doesn't set background. In the mobile media query, if we set `background-color: #ffb300 !important;`, it overrides Bootstrap. That might be a visual identity change. But is it necessary? Maybe.

Similarly, border/radius no issue.

If we use `!important`, it's a change but not layout. Fine.

Should we include `transition`? Target says flat-solid, no need. But could add transition for hover? Not in this block.

Could add `caret-color`, `accent-color`? Not relevant.

Let's check padding constraint: padding is `var(--space-md) !important`. We cannot change to a different pixel value because var is unknown. Keeping same is fine. It says keep similar ±20%; same is within.

Should we change `--space-md` value? That's a CSS custom property. But it's used elsewhere, not defined here. Changing custom property values is allowed only if defined in this file? The instruction says "CSS custom properties (--color-*, --shadow-*) values" — only those? Actually it says "CSS custom properties (--color-*, --shadow-*) values" under must change. But `--space-md` is a spacing variable, not color/shadow. So we shouldn't change. Good.

Let's think if there is a better way to refresh visual identity in this small block. Maybe we can add `border-bottom` to hero column? Not needed.

Maybe for the hero column, set `color: #212529`? But if the section background is dark, this would break. We don't know. Better avoid adding colors to containers unless necessary. But the instruction "All color values" must be changed—if there are no color values in original, we don't have to invent. But to show refresh, likely expected. However, adding a `color` to a column with text-align center is safe? It can affect inheritable text color, but if headings have their own colors, no effect. It's a visual change.

Maybe better to not add color to the first selector; instead add a custom property? But output should be standalone.

Let's see the file fingerprint and "块2/2" means block 2 of 2. Perhaps the original CSS is split into two blocks; this is the second block. There is a previous block with more styles. The media query is a small fragment. We should only rewrite this fragment. We shouldn't invent selectors.

The target style "card-mosaic" is aggressive but with flat-solid. Since this fragment doesn't define cards, we can apply relevant accent to badge and contact cards.

Let's refine with colors:

Palette for flat-solid: neutral background perhaps #f8f9fa, card white #fff, accent colors like #6f42c1, #fd7e14, #20c997, etc.

For `.app-hero-section .badge.bg-warning`: Use a vibrant orange/amber: `background-color: #ff9f1c; border: 1px solid #f78c00; color: #1c1c1c; border-radius: 4px; box-shadow: none;` But bg-warning has important, so add `!important` to background and border? Actually background is not layout. Could add `background-color: #ff9f1c !important;`. But then if `bg-warning` is used elsewhere, this only applies in media query. Fine. But do we need to keep warning semantics? It's a warning badge. Orange is good.

For contact cards: `background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: none;` But this could override existing card background. However, at mobile, making cards white with border is flat-solid. Fine.

But the instruction "box-shadow: none everywhere" means we can add `box-shadow: none;` to each selector. Good.

Should we add `outline`? No.

Maybe use `border-radius` on first selector? Not appropriate.

Need to preserve `text-align: center;` exactly. We'll keep.

Need to preserve `font-size: 0.85rem;` exactly.

Need to preserve `padding: var(--space-md) !important;` exactly.

Let's produce:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ffb020 !important;
        border: 1px solid #d98e04;
        color: #111827;
        border-radius: 4px;
        box-shadow: none;
    }

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

But wait: adding `color: #1e293b` to the hero column could be okay. But the original didn't set color; if the section is light, fine. But maybe we shouldn't add `color` to a column because it might change text color unexpectedly. The instruction says "YOU MUST CHANGE All color values" but there are none. If we don't change any colors, the output is nearly identical, failing the task. We need to make some color change. Adding to badge and cards is enough. Maybe no need for hero column. But if we leave first rule unchanged, it's okay? The instruction says "Refresh the visual identity" — we need to change colors. The first rule has no colors. We can leave it unchanged because there is nothing to change. But perhaps we could add `color` to it to meet "all color values" but not necessary.

Maybe we can add `background-color: rgba(0,0,0,0.02)`? That would be a background change but subtle. Not good.

Let's decide: remove color from first selector to avoid potential breakage. The output will be:

@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;
        background-color: #ffb020 !important;
        border: 1px solid #d98e04;
        color: #111827;
        border-radius: 4px;
        box-shadow: none;
    }

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

This changes visual identity somewhat. But maybe background-color #fff on contact cards is too generic? We can choose a very light neutral with a vibrant border. For flat-solid, "Solid background colors only (no gradients) Defined by color contrast and borders Minimal radius (0-6px)". Good.

But target "card-mosaic" says "Vibrant card colors on neutral background" and "Each card type a different accent". We cannot differentiate with combined selector. Maybe use `border-left`? But that's a border style; border-left is not a layout property, it's visual. We can add `border-left: 4px solid #...` to the contact cards to add a mosaic accent. But both article and card share same style. Could choose a vibrant accent border-left with solid. That would look like mosaic? Let's add `border-left: 4px solid #14b8a6;` and border on other sides? But if we set `border: 1px solid #d1d5db; border-left: 4px solid #14b8a6;` that's okay. But `border` shorthand sets border-left-width to 1px, then border-left overrides to 4px. This changes border-width? Wait, border-width is layout? Under NEVER CHANGE, "border-color and border-style (NOT border-width)" — border-width is not allowed to change. Specifically "border-style (NOT border-width)" means you cannot change border-width. But adding a border where none existed introduces a width, which may affect layout (box-sizing). But the instruction says "border-color and border-style (NOT border-width)"—meaning you can change border-color and border-style, but you cannot change border-width. If original has no border, adding a border with width might be a change in border-width. Is that allowed? Hmm. It says NEVER CHANGE includes "border-color and border-style (NOT border-width)"? Actually the list says:

  • border-color and border-style (NOT border-width)

This is under "YOU MUST CHANGE" list? Let's check the prompt:

"✅ YOU MUST CHANGE (visual identity only):
  • All color values: background,