/* ============================================================
   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 CSS file fragment to "refresh" visually while keeping layout. The original CSS is very small, mostly media query with some rules. Need to apply target style: asymmetric-blocks and flat-solid variant.

But note: The target style description says "Layout pattern (Aggressive only)" but we are in conservative mode. So we cannot change layout. It's fine, that's just target style.

Original CSS content:

```
@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 must keep all selectors exact. We can change colors, shadows, radius, transitions, gradients, opacity, etc. But here there are no colors, shadows, radius, transitions in the CSS. There are only text-align, font-size, padding. But those are typography/layout in some ways? Actually text-align and font-size are typography, but they are explicit in the rules. The instructions say "Typography (font system fixed): font-family, font-size, font-weight, font-style ... text-align ..." So they are fixed. Padding is layout, can adjust within ±20%, but here it's using CSS variable var(--space-md). We can change the variable value? The instructions say "CSS custom properties (--color-*, --shadow-*) values" can change. But --space-md is not a color or shadow, it's a spacing variable. It's not specified as allowed to change. Also "padding, margin (keep similar values, ±20% maximum)" so we could adjust padding to a slightly different value, maybe using a different var or calc, but that might be risky. Since the original has padding: var(--space-md) !important; we could keep it as is, or change to a similar value.

But the main task is to refresh visually, but this CSS has no visual color/shadows. Maybe we need to add visual properties that are missing? The instruction says "Refresh the visual identity WITHOUT changing layout structure or class names." We can add new properties that are allowed (colors, shadows, radius, etc.) to the existing selectors. But that would change appearance potentially. Should we add background colors, borders, radius to these elements? The target style flat-solid says no box-shadow, solid backgrounds, minimal radius, high contrast borders. But if we add backgrounds to these existing selectors, we might alter the layout? Not necessarily, but background colors could affect visual but not layout. However, these selectors are inside a media query for mobile. Might be okay.

But we must be careful: The original CSS file may contain many other rules; this is just one block. We should only rewrite what's provided, preserving all selectors and layout. To produce a meaningful "refresh", we could add decorative properties like border-radius, background, border, etc. But is it allowed? The constraints say "✅ YOU MUST CHANGE (visual identity only): ... All color values ... box-shadow ... border-radius ..." It doesn't say we must only change existing properties. It says we must change colors etc. In the original, there are no color values. So maybe there is nothing to change. But the task asks to "Refresh this CSS visually." We could add box-shadow: none (to enforce flat-solid), add border-radius: 0 or 6px, add background colors, borders.

But we need to output only CSS. Let's think.

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

Given target style: asymmetric-blocks with flat-solid. The elements mentioned:
- .app-hero-section .row .col-lg-7: a column, text-align center.
- .app-hero-section .badge.bg-warning: a badge with bootstrap warning color. Since bg-warning is a utility class, it sets background-color. We can't change class names, but we can override color/background in this CSS block. Maybe we want to change the badge to a solid contrasting color? But the class bg-warning is a Bootstrap utility, likely has its own styles. We can override within this media query. But we must be careful not to break layout. We can set background-color, color, border, border-radius.

- .contact-channels-section article, .contact-quick-section .contact-card: cards with padding. We can add background, border, border-radius.

But the "asymmetric-blocks" style says "Bold contrasting blocks: each section different background, high contrast borders". But we are in a media query for mobile. We can apply different backgrounds to these components.

However, the instruction says "☝ Aggressive layout pattern" but we are conservative, so we should not change layout. But we can use colors to create visual blocks.

The variant flat-solid: "box-shadow: none everywhere", "Solid background colors only (no gradients)", "Defined by color contrast and borders", "Minimal radius (0-6px)".

So we should:
- Ensure box-shadow: none.
- Use solid colors, maybe high contrast.
- Border radius small.

But the original has no box-shadow, so nothing to remove. But we can add box-shadow: none explicitly? Not necessary but could.

We should also consider changing the padding value? It is a layout property; we can adjust within ±20%. Original uses var(--space-md). We don't know value. Maybe we can keep it as is. Since it's already using a variable, and we're not allowed to change spacing variables, better keep it.

The font-size in badge: 0.85rem, should remain because font-size is fixed.

text-align: center, remain.

So what can we actually change? We can add new declarations to each rule, such as background-color, border, border-radius, color, etc. But if we add background-color to .col-lg-7, it might create a colored block, which is bold. But .col-lg-7 is a Bootstrap column; adding background to it might be too broad. But it's inside .app-hero-section, so it's specific.

But the target style "asymmetric-blocks" is about layout columns with unequal widths. We cannot change layout, but we can use colors to draw blocks. Adding background to the column could make it look like a block. However, we don't know the HTML context, but it's safe.

Still, the instruction "🛡️ CONSERVATIVE MODE" suggests we should be conservative: only change visual properties that are safe. Adding backgrounds and borders to elements that didn't have them could be considered a visual identity refresh. It won't change the layout structure or class names.

But we must ensure we do not change the selectors. We can add new rules? No, we should only modify existing rules, not add new selectors. We can add declarations within existing rules.

Let's construct a revised CSS.

Potential approach:

```
@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 change colors, shadows, radius. But there are none. We can add them to the existing rules. To fulfill the "flat-solid" variant, we can add `box-shadow: none;` to each rule? Or maybe just to the card/article. Also add `border-radius: 0;` or `6px`. But "minimal radius (0-6px)" so choose 0 or 6px.

We also need a fresh color palette. Since we don't know existing colors, we can choose bold contrasting colors. But we shouldn't override Bootstrap's bg-warning probably because the class name indicates warning color; however, the visual identity could change to different colors. But the instruction says "All color values ... replace with fresh palette." Since the original has no color values in this block, there is nothing to replace. We can add new color values to create the style.

Maybe we should be more restrained: if there are no color values, we can just output the same CSS unchanged? But the task says "Refresh the visual identity" and "MUST CHANGE visual identity only." If there's no visual identity in this block, maybe we need to add something. But it might be that the original file has more CSS and this block is only a media query with limited properties. The request "File: assets/css/saishi.css#块2/2" indicates this is block 2 of 2. There might be another block with colors. But we're only given this block. We need to rewrite this block. It's valid to keep these properties unchanged and add new allowed properties that enhance the visual identity.

Let's think about "asymmetric-blocks" color palette: "Bold contrasting blocks: each section different background, high contrast borders." So we can set the .col-lg-7 to a solid background, the badge to another, the cards to another. But we should avoid breaking layout. Backgrounds don't affect layout.

But there is a potential issue: If we set background-color on .app-hero-section .row .col-lg-7, it might make the column visually distinct but could be too aggressive. Since the target explicitly says "asymmetric-blocks" and "each section different background", it's in line.

But in a media query for max-width: 575.98px, it's mobile. Bold blocks are okay.

However, we need to ensure high contrast borders. Use border: 1px solid some color.

But note: The original rules have no `border` property, so adding border will change the box size? No, with default `box-sizing` maybe content-box, adding border increases size. But if Bootstrap sets box-sizing: border-box globally (it does), then adding border won't affect layout dimensions. Since this is a Bootstrap project likely, box-sizing border-box is applied. Adding a 1px border won't change layout. But we must be careful with `border-width` not allowed to change? Wait, the instruction: "border-color and border-style (NOT border-width)" - so we are not allowed to change border-width, but we can add border? Actually, "border-color and border-style (NOT border-width)" means we can change color and style, not width. If adding a new border declaration with width, that might be considered adding a border-width, which is not allowed? The instruction says "🔒 NEVER CHANGE ..." It doesn't explicitly say "never add border-width", but if we add `border: 1px solid #333`, we are setting border-width. However, it's not changing an existing border-width; it's adding a new one. But that could affect layout if box-sizing is not border-box. But Bootstrap uses border-box. Still, the conservative mode likely expects not to alter border-width. We can set border-color and border-style without width? For example, `border-style: solid; border-color: #333;` without width would use the default width (usually medium = 3px) which might be bad. We could use `outline` instead? Outline doesn't affect layout, but instruction says "outline styles (color, type)" can change, not width. Hmm.

Alternatively, we can use `box-shadow: 0 0 0 1px #333` to create a border effect, but flat-solid says box-shadow: none everywhere. So that's not allowed.

Maybe we should not add borders if not present. The "high contrast borders" could be achieved by using existing borders? There are none. Maybe in the actual HTML, there are borders from other CSS. We don't need to force it.

What about background-color? Adding background-color doesn't affect layout. That's safe.

Border-radius: adding border-radius doesn't affect layout. Safe.

Box-shadow: flat-solid says none, so we can add `box-shadow: none` to ensure.

But the instruction says "box-shadow: none everywhere". So we can set box-shadow: none on these rules, but they already have no box-shadow. It's not a change. Still, we can add it.

Color: adding color property might set text color. That's safe.

But we need a coherent palette. Let's choose a bold, high-contrast, flat palette. For an asymmetric-blocks style, maybe:
- .col-lg-7: background: #1a1a2e (dark navy), color: #e0e0e0
- .badge.bg-warning: background: #f5a623 (amber), color: #1a1a2e, border-radius: 4px? But bg-warning already has background. We can override with a new color.
- .contact article/card: background: #16213e (dark blue), border-left: 4px solid #e94560 (accent) maybe. But border-left is a border, could affect layout? If box-sizing border-box, no.

However, the phrase "high contrast borders" may imply we add borders to sections. But if we add border, it's a layout property? Border-width is discouraged. We can use outline, but outline doesn't take radius? It can.

Alternatively, use `background-clip` or `box-shadow` for border effect but flat-solid prohibits box-shadow.

Maybe we can add `border-style: solid; border-color: #ffcc00;` without specifying width, but the default width is medium (3px) in CSS, which could be large. Not good.

Better to avoid adding border-width. We can add `outline: 2px solid`? That is outline-width, which is not allowed either. Wait, outline-width is not in the allowed list? It says "outline styles (color, type)" can change, so we can change outline-color and outline-style, not outline-width. Adding an outline with width is adding, not changing; but it might be okay? To be safe, avoid.

What about using `background` linear-gradient? But flat-solid: no gradients.

We could use `background-color` with `border-radius` to create a visual block. That satisfies "solid background colors only", "minimal radius". We don't need borders if there are none.

But "Defined by color contrast and borders" implies borders are part of the style. Maybe we can use existing border-color properties if there are any in the original? None.

Maybe the original CSS has these selectors with no visual styles because they are relying on Bootstrap utilities. In that case, adding visual styles is okay.

Let's read the instructions carefully:

"✅ YOU MUST CHANGE (visual identity only):
• All color values: background, color, border-color, fill, stroke, outline-color
• box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)
• text-shadow
• border-radius (visual rounding only)
• gradient colors and stops in linear/radial/conic-gradient
• transition timing, easing, duration
• filter, backdrop-filter
• opacity
• outline styles (color, type)
• border-color and border-style (NOT border-width)
• caret-color, accent-color
• CSS custom properties (--color-*, --shadow-*) values"

This is a list of properties we should change. If the original doesn't have any, there's nothing to change. But the task says "Refresh the visual identity" - maybe we need to add these properties to the rules to achieve the target style. The "MUST CHANGE" is not "MUST ADD".

"📝 TYPOGRAPHY (font system fixed): ... text-align, vertical-align" - text-align is fixed, so we cannot change it. We already have text-align: center, keep it.

"font-size" is fixed, so keep 0.85rem.

"padding, margin (keep similar values, ±20% maximum)" - the padding is var(--space-md). We could change it to calc(var(--space-md) - 2px) or something within 20%, but we don't know the value. Keep as is.

Thus, the only possible changes are to add color, background, border-radius, etc.

But is adding new declarations allowed? The instruction says "Rewritten CSS, preserving ALL selectors and layout exactly" — it doesn't say we cannot add declarations. "Only change colors, shadows, radius, transitions, gradients." So yes, we can add or change these properties.

However, we must not change layout structure. Adding background-color won't change layout. Adding border-radius won't. Adding box-shadow none won't. Adding color won't. So it's safe.

Let's craft a new version.

We need to choose a fresh color palette for "asymmetric-blocks" style, flat-solid. Possible palette:
- Deep indigo/charcoal for main sections: #1F2430
- Off-white text: #F4F4F0
- Accent: #F5A524 (amber) or #E94560 (coral)
- Card backgrounds: #2A2D3A, #3A3F4B, #E8E8E0?

Since the target says "Bold contrasting blocks: each section different background, high contrast borders." We can assign different backgrounds to:
1. `.app-hero-section .row .col-lg-7` -> maybe a dark slate background.
2. `.app-hero-section .badge.bg-warning` -> bright amber background with dark text.
3. `.contact-channels-section article` -> a dark teal background.
4. `.contact-quick-section .contact-card` -> a different dark/light background.

But these are in a media query, and we might not want to make cards too heavy. But the target style demands it.

Since we don't know the surrounding styles, we should be cautious. The original media query only changes layout in mobile (center text, font size, padding). Adding strong backgrounds inside media query might be too aggressive and could break visual hierarchy. But the user explicitly requested this target style, so maybe it's desired.

Let's do it.

For flat-solid, no gradients, no box-shadow, minimal radius (0-6px). We can set border-radius: