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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

We need to respond to the prompt. The user provides a CSS snippet and wants us to rewrite it visually, in "asymmetric-blocks" target style, "flat-solid" variant, but conservative mode: keep layout, selectors. The original CSS is a media query with rules about text-align, font-size, padding. There's not much color/shadow/radius to change. But the task says refresh visual identity without changing layout structure or class names. We can only change allowed properties.

Original CSS:
@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;
    }
}

Allowed to change: color values, box-shadow, text-shadow, border-radius, gradient, transition, filter, backdrop-filter, opacity, outline styles, border-color/style, caret-color, accent-color, custom property values. Cannot change text-align, font-size, padding? Wait padding can change ±20% max? The guidelines say padding, margin keep similar, ±20% max. But in the specific "NEVER CHANGE" list it says "width, height, padding, margin (keep similar values, ±20% maximum)". So we can adjust padding slightly. We may choose to change the padding value from var(--space-md) to something else within ±20%? Actually var(--space-md) is a CSS custom property reference. Changing the value of --space-md in :root would be allowed? But the snippet doesn't define --space-md. The output should only include the rewritten CSS for this snippet? The user says "File: assets/css/saishi.css#块2/2", meaning this is block 2 of 2? We need to output only the rewritten CSS for the given block. We cannot modify custom property definitions outside? But we could potentially change var(--space-md) to a literal value? That would be changing the padding. However, the instruction says keep all selectors and layout exactly, but padding is layout but can be adjusted ±20%. Since original uses var(--space-md), we don't know the computed value. To be safe, we might leave padding as is. But "visual identity" requires changes in colors/shadows/radius. There are no colors or shadows in this block. So perhaps we need to add decorative properties that are allowed? The task says "Refresh this CSS visually" and "Only change colors, shadows, radius, transitions, gradients." We could add box-shadow, border-radius, transitions to these selectors? But that would be adding new declarations, not changing existing ones. The output must preserve all selectors and layout exactly. We can add allowed properties? The prompt: "Refresh the visual identity WITHOUT changing layout structure or class names. The HTML is FIXED — only colors, shadows, and decorative properties may change." In original CSS, there are no color/shadow properties. To achieve a fresh visual identity, we could add e.g., background-color for those elements, border-radius, transition, etc. However, adding properties might affect layout? box-shadow and border-radius don't affect layout typically. background-color doesn't. transition doesn't. So we can add them.

But the "Output ONLY the rewritten CSS, preserving ALL selectors and layout exactly" means we should rewrite the rules, not add new selectors. We can add declarations to existing selectors. Let's think.

Target style: asymmetric-blocks, flat-solid. For this media query, maybe we want to give the hero section a solid background? But we shouldn't change layout. The selectors target specific elements. Adding background-color might be okay. But we need to be careful: .app-hero-section .row .col-lg-7 is a column; setting background could change appearance but not layout. The badge .bg-warning is likely a bootstrap warning badge; we could change its background-color to a custom one? But .bg-warning is a Bootstrap utility class; changing it in this media query could override. But this is allowed if we use a more specific selector (same specificity as original). We can change border-radius, box-shadow, transition.

However, the instruction says "flat-solid" variant: box-shadow: none everywhere; solid background colors only; minimal radius. So we should set box-shadow: none on those elements? But original doesn't have box-shadow, so no need. But to align with flat-solid, we might add box-shadow: none explicitly? That's redundant.

The "asymmetric-blocks" layout pattern: Unequal columns, mixed gaps, bold padding contrasts. But we cannot change grid-template-columns etc. because layout fixed. But in media query, maybe we can adjust padding to create contrast? The original has padding: var(--space-md) !important on contact cards. We could change to a different spacing within ±20%? But var(--space-md) unknown. We could change to e.g., 1.25rem if original was 1rem? But we don't know. Better to leave.

Maybe the goal is to apply visual identity using allowed properties only, even if no original colors. We can add:

- background-color: #f8f9fa? But that might be too generic. We need a bold contrasting palette. Target style says "Bold contrasting blocks: each section different background" and "High contrast borders". Since we are in a media query for small screens, we could set the contact articles/cards to have different backgrounds? But there are two selectors in a group. We might set them to a solid background color, border, border-radius. For the hero column, maybe we set a background? But .app-hero-section .row .col-lg-7 is a large column (7 of 12). On mobile, it might be full width. Setting a background there could change visual identity. But the original only has text-align: center. The prompt says "Refresh this CSS visually" — but if we add background colors, it's a change. However, the "Target style" is aggressive, but mode is conservative. We must not change layout, but colors are allowed.

But maybe the expected output should preserve the original declarations and merely adjust any color/radius/shadow if present. Since none present, the rewritten CSS would be identical? That seems useless. The prompt expects a visual refresh; perhaps we can convert the media query into a more visually styled version by adding decorative properties to those elements without changing the existing ones. Let's examine the classes:

- .app-hero-section .row .col-lg-7: This is a column in a hero section. On small screens, text centered. We could add a solid background band, maybe border-bottom? But border-width is not allowed to change? Actually border-style and border-color can change; border-width is not listed as forbidden? Wait the NEVER CHANGE list says: "border-color and border-style (NOT border-width)". That means we are allowed to change border-color/style, but not border-width. We can add border with a width? If we add a new border declaration with width, that's changing border-width (from 0 to something). That might be considered layout? Border-width takes up space, affecting layout. So we should not add border-width. But we can change existing border-width? There is none. So adding border would change layout. Better not.

- box-shadow: can be added without affecting layout (shadows don't affect layout). So we can add box-shadow to create separation. For "flat-solid", box-shadow should be none. But if we add box-shadow, that contradicts flat-solid variant? The variant says box-shadow: none everywhere. So we should not add box-shadow. Then what visual change can we make? Background-color and border-radius, transition, and maybe border-color if there's an existing border. No existing border. Adding border-radius doesn't affect layout. We can add background-color. For flat-solid, solid background colors allowed.

So we can set background colors for these elements. But consider that the elements might already have backgrounds from other CSS. Overriding in media query is fine.

Let's think about "asymmetric-blocks" target. On mobile, we might want the contact cards to have alternating backgrounds? But the selector group applies the same style to both article and .contact-card. We can't separate them without changing selectors. We could add separate rules? No, we must preserve selector groups exactly. We can't split the comma list. So they get same style.

Maybe we can use CSS variables to set custom properties? But output should be only this block; variables defined elsewhere would not be present. We could define new variables in a :root rule? That would add a selector, not allowed? It says preserve all selectors, but adding a new :root would change the file structure? It says "preserving ALL selectors and layout exactly" — adding new selectors might be considered changing? Probably not allowed. Better to not add new selectors.

What about changing the values of existing declarations? Only one declaration is a candidate for visual change: font-size: 0.85rem. Font-size is typography, NOT allowed to change. So we must keep it. padding: var(--space-md) !important — layout, keep similar, can adjust ±20%. But since var unknown, we might leave unchanged. text-align: center — layout, not allowed.

Thus, strictly following the rules, the only way to "refresh" is to add new declarations that are allowed (colors, shadows, radius, transitions, gradients) to existing selectors. But we must be careful not to affect layout. background-color, border-radius, transition, outline-color/outline-style (but outline affects paint not layout), caret-color, accent-color, opacity (could affect stacking but not layout), filter (could affect rendering but not layout). In conservative mode, adding background-color and border-radius to these elements is safe.

Let's derive a "flat-solid" visual identity with high contrast borders (but we can't add borders with width). We can use outline instead! Outline doesn't affect layout and can serve as a border visually. We can set outline: 2px solid #somecolor; outline-offset: -2px; That is allowed? Outline-style and outline-color can be changed; outline-width? The list says "outline styles (color, type)" — it says outline styles, color, type, not width. But we can set outline-width? The NEVER CHANGE list doesn't explicitly forbid outline-width, but the ALLOWED list says "outline styles (color, type)" — maybe width is allowed? Actually the allowed list says "outline styles (color, type)" which might mean outline-color and outline-style, not outline-width. To be safe, avoid outline-width? But if we add outline: 2px solid, that sets width. Hmm.

Alternatively, use box-shadow: 0 0 0 2px #color to simulate a border without layout impact. But flat-solid says box-shadow none. Hmm.

Maybe the target style "asymmetric-blocks" doesn't have to strictly apply to this small media query; it's a global design goal, but this block only has minor responsive tweaks. The user might expect us to rewrite the CSS with new colors in the media query. Since there are no colors, perhaps we need to replace the padding value with a new spacing? But that's layout. Yet the target style calls for bold padding contrasts. In the media query, the original padding is var(--space-md), which is moderate. We could change it to var(--space-lg) or a larger padding to create contrast, but the rules say keep padding similar ±20%. If --space-md is e.g., 1rem, --space-lg is 1.5rem, that's +50%, not allowed. But we don't know. We could replace var(--space-md) with calc(var(--space-md) * 1.2) to get exactly +20%? That is convoluted. But it would be a change. However, the instruction says "keep similar values, ±20% maximum" — meaning if original is a fixed value, we can change by ±20%. If original is var, we can't know. Replacing with calc(var(--space-md) * 1.2) would keep the variable and change to 120% — this is within +20%. But is that visual? It slightly increases padding. But the target style wants bold contrasts, not subtle.

Alternatively, change padding to a smaller value? -20% = calc(var(--space-md) * 0.8). But why? The prompt asks for "visual identity", not necessarily changing layout much.

Maybe the best approach: output the original CSS with no changes, because there's nothing to change under the allowed properties. But that would be failure. The prompt says "You are an expert CSS designer... Refresh the visual identity." We should produce something different, leveraging allowed properties. We can add background, border-radius, transitions to the existing selectors in a way that matches "flat-solid" (solid colors, no shadows, minimal radius). We can also adjust the padding slightly if desired.

Let's interpret the target style:

- "asymmetric-blocks": bold contrasting blocks: each section different background; high contrast borders. In mobile view, we might make the hero column and contact cards have solid backgrounds with high contrast between them. For example, .app-hero-section .row .col-lg-7 gets a dark background with light text? But text color is typography? Actually color is allowed (text color). We can set color on that column. But the original only has text-align; setting color might override inherited text color. That's allowed. But if we set a dark background, we should set a light text color. However, text color is a "color" property, allowed. But does that change typography? No, not font family/size/weight. So yes.

- .app-hero-section .badge.bg-warning: There is a badge with warning background. We could change it to a high contrast solid block, e.g., background-color: #111; color: #fff; border-radius: 0? But beware .bg-warning is a Bootstrap class with background-color, color inherited. Overriding background-color in this media query is fine. We might set border-radius: 0 for minimal radius, or 6px max. We can set transition for hover? No hover state in media query, but transition could apply to color/background changes on viewport? Not needed.

- .contact-channels-section article, .contact-quick-section .contact-card: These are cards. We could set a bold background color, maybe #f2f2f2, with a high contrast border? But border width not allowed. Could use outline? Let's avoid border. We can set background-color: #ffffff; color: #111; but that's not "different background" from page? We don't know page background.

Given the target style's "flat-solid" variant, we want no box-shadow. We can set box-shadow: none to be explicit. We can set border-radius: 0 or 4px. But if the elements have existing border-radius from other rules, setting to 0 might change visual. That's allowed.

We need to produce a CSS block that is a "rewritten" version. It should include the original declarations unchanged (because they are layout/typography) plus possibly additional declarations. The instructions say "preserving ALL selectors and layout exactly". That means we must keep the existing declarations. We can add new declarations. We can also modify allowed values if present. Since no allowed values except none, we can add.

Let's design a coherent mobile visual identity:

- Hero section column: Give it a solid background to create a distinct block on mobile. Maybe background-color: #1a1a2e (dark navy), color: #eaeaea. This creates a bold contrasting block. Add border-radius: 0 0 1.25rem 1.25rem? For asymmetric-blocks, maybe only one corner rounded? Minimal radius 0-6px? The variant says minimal radius (0-6px). So use border-radius: 0. But if we set 0, it's okay. We could set 6px on bottom corners only? That's asymmetric. Let's do border-radius: 0 0 6px 6px; This is minimal and asymmetric. But the target style says "Minimal radius (0-6px)" — 6px is okay. We'll use that. Also add transition: background-color 0.3s ease; but no interaction. Could add.

- Badge: Change to high contrast: background-color: #e94560 (bold accent), color: #ffffff. border-radius: 4px. Maybe no shadow.

- Contact cards: They have padding already. We can set background-color: #f8f9fa maybe? But "each section different background" implies bold contrasting. Maybe set background-color: #0f3460 (dark blue) with color: #fff, or alternate? But the selector group applies to both article and .contact-card. If both have same background, okay. We can set background-color: #16213e, color: #fff, border-radius: 6px. But then article elements inside .contact-channels-section would all become dark. The original likely has light cards. This is a bold change.

But we need to be careful: The contact cards might have child elements with their own colors. Setting color inherit will cascade. That's okay.

Let's think of overall palette:
- Background of hero column: #0f3460 (dark blue) or #1a1a2e (dark navy)
- Badge: #e94560 (red/pink)
- Contact cards: #16213e (dark blue) with white text? Very dark. Could be too much. Alternatively, make contact cards light with colored top border? But border width not allowed. We can use background: #f5f5f5, color: #222, border-radius: 0 6px 6px 0 (asymmetric) via border-radius. But only one element? Let's do border-radius: 6px 0 6px 0; That's asym.

But "flat-solid" means solid background colors only, no gradients. We can do that.

However, adding background colors to these elements might not be desirable if the original design had none. But the prompt wants a refresh.

Let's also consider the badge. The badge .bg-warning is a Bootstrap warning badge, typically yellow background with dark text. Changing it in mobile to a custom high-contrast accent color is allowed. But maybe we should not override Bootstrap utility? In this media query, the original just changes font-size. Changing background-color could be part of visual identity. Good.

Now, about padding: The original