/* ============================================================
   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 answer only rewritten CSS. Need follow instructions. Need understand file content provided: a media query with three rules. We need refresh visual identity without changing layout, selectors. Only colors etc. But original has only font-size, text-align, padding. Can we change? Need change colors/shadows within available declarations. We cannot change layout, but can add visual props? The task says output rewritten CSS preserving selectors/layout, only colors, shadows, radius, transitions, gradients. Need likely add color/background/border/shadow to these rules? But must not alter layout. We can change padding within ±20%? Original padding var(--space-md) !important. Need maybe keep same. We can add visual properties inside each rule. But if existing rule only has font-size etc., can add color? Need preserve layout. Let's analyze.

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

Need rewrite with new visual identity. Could add e.g. color, background-color, border-radius, box-shadow none? But flat-solid says box-shadow none everywhere. Need maybe set box-shadow: none. Could add background colors and border? But careful, .badge.bg-warning has Bootstrap class likely background color. We can alter? Add own background, color, border. The media query is mobile, but visual identity should be different.

Need produce CSS. Need keep selectors exactly, no comments. Layout unchanged. We can modify values? font-size maybe can change? Typography is fixed, do not change font-size. So keep 0.85rem. text-align fixed. padding fixed? It's layout, but allowed ±20%? It says padding, margin (keep similar values, ±20% maximum). Since original padding var(--space-md), we could maybe keep exact var to be safe. But if we wanted change to var(--space-md) maybe same. Need no layout changes.

Need maybe add:
color: #1e1e2f;
background-color: #f8f7f4;
box-shadow: none;
border-radius: 6px;
border-left: 4px solid #ff5e5b? But changing border-width? They said NEVER change border-width? Specifically "border-color and border-style (NOT border-width)" => do not change border-width. But we can add border? Adding border may affect layout (border-box? Default box-sizing? If it's Bootstrap box-sizing border-box everywhere likely okay but width adds? But adding border maybe not desired. Better avoid adding border width. Could use outline? Outline doesn't affect layout, allowed "outline styles (color, type)". Could add outline: none? Hmm.

Need "flat-solid" no gradients, box-shadow none. "Minimal radius (0-6px)". So set border-radius: 0 or 6px. If add border-radius, no layout effect.

Need "asymmetric-blocks" target? Color palette: bold contrasting blocks each section different background. But we only have limited selectors, can style them differently.

Could add background to .app-hero-section .row .col-lg-7 maybe in mobile center, set color? But hero entire block. However if set background on column, it may become block with background. Good.

Need maintain Bootstrap badge .bg-warning maybe background color would be overridden by own? CSS order? Our stylesheet likely later? Not sure. But we can set background-color and color. Need maybe not use !important? But .bg-warning likely Bootstrap with !important? Bootstrap .bg-warning { background-color: #ffc107 !important; }. To override, need !important. We can set background-color with !important, color. But is that allowed? Yes. Need preserve font-size. Could add.

Let's think output should be full CSS including media query. We can produce:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2b2d42;
        background-color: #edf2f4;
        border-radius: 6px;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ffb703 !important;
        color: #2b2d42;
        box-shadow: none;
        border-radius: 4px;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border-left: 4px solid #ef476f;   // Wait border-left is border-width 4px? They prohibited border-width. This is adding border-left-width. Not allowed.
        color: #1d3557;
        border-radius: 6px;
    }
}

Need avoid border-width. We could use outline? Outline can be 4px, no layout. Use outline: 4px solid #ef476f? But outline not affect layout and allowed outline styles. However "outline styles (color, type)" maybe they permit outline-color and outline-style but not width? Actually "outline styles (color, type)" means outline-color and outline-style allowed, maybe outline-width? They don't mention border-width but outline maybe similarly? Better use box-shadow? But flat-solid demands box-shadow none. We can set outline: none? Hmm.

Need "Minimal radius (0-6px)". We can set border-radius.

Need maybe add transitions? Only if no animation? We can add transitions for visual states? But no hover rules in media query? Could add transition on background-color etc. Fine but limited.

Need decide whether to add background-color to overall body? Can't add new selector? User says preserve selectors exactly. "Selectors: keep EXACTLY" means no new selectors? It says output only rewritten CSS preserving all selectors. Probably cannot add new rules/selectors. We can add declarations within existing selectors. So no body rule.

Need maybe change CSS variables? "CSS custom properties (--color-*, --shadow-*) values" But original uses var(--space-md). We might not define --color. Could set --space-md? Not allowed? It says change values of custom properties. There is no custom property definition. Could add custom property definitions? Would be new selector :root? Not allowed. So no.

Need maybe use color #ffb703? Since .badge.bg-warning normally yellow, maybe re-color to a bold blue? But "fresh palette" and "asymmetric-blocks" with high contrast. Maybe:
- hero col: dark slate background with off-white text? But background of hero? If you set text center and background, may look like a banner. That's okay.
- badge: vibrant orange/yellow maybe.
- contact cards: different background with accent on one side using outline? Or use border-color? Since no border-width, but if there's existing border? There likely isn't. Adding border-style maybe doesn't produce width if no width. Could set border-left-style: solid and border-left-color: #... but no width means no visible. Could set border-radius and background.

Need "flat-solid" specifically "box-shadow: none everywhere" so include box-shadow: none.

Let's choose palette:
- Primary dark: #1b2a4a (navy)
- Off-white: #f5f0e8
- Accent red: #e63946
- Accent yellow: #f4a261
- Accent teal: #2a9d8f
- Text: #14213d

But "asymmetric-blocks" target maybe bold blocks. Let's design:

.app-hero-section .row .col-lg-7:
  background-color: #1b2a4a;
  color: #f5f0e8;
  border-radius: 0 0 0 6px? Actually radius allowed 0-6. Could set `border-radius: 6px;`
  box-shadow: none;
  maybe padding? Existing no padding, adding padding affects layout. Avoid padding. But `border-radius` okay. Also adding background makes full-width block but okay.

Maybe add `outline: 2px solid #e63946;`? Outline width maybe not change layout, but the task says outline styles (color, type), maybe okay. But "flat-solid" no shadow. We can use outline? Could produce strong contrast. But outline may not be supported? Fine. However adding outline could visually change layout? It overlays outside border, no layout. Use `outline: 3px solid #f4a261; outline-offset: -3px;` to draw inside? This is decorative. But outline-width is not in forbidden list? They list "outline styles (color, type)" under change. So okay.

Let's include outline maybe? The "NEVER CHANGE" list didn't include outline widths, but includes border-width. It says "outline styles (color, type)" can change. If adding `outline: 4px solid` is an "outline style" plus width? It's okay? Maybe safer to only use outline-color and outline-style? But without width nothing. Use `outline: 4px solid #f4a261` likely okay. Many tasks allow. But they explicitly said "outline styles (color, type)" so width might be allowed too? Actually "outline styles (color, type)" means outline-color and outline-style, not width? They say "outline styles (color, type)" because original "outline styles" as in outline shorthand. Hmm.

Could use `border-radius` and `background-color` enough.

Need maybe set `.app-hero-section .badge.bg-warning`:
  background-color: #f4a261 !important; (instead of yellow)
  color: #14213d;
  border-radius: 4px;
  box-shadow: none;
  font-size: 0.85rem; preserved.

Need `.contact-channels-section article, .contact-quick-section .contact-card`:
  padding: var(--space-md) !important;
  background-color: #ffffff;
  color: #14213d;
  border-radius: 6px;
  maybe `border: 0;`? But that would set border-width 0, okay but no effect. Could set `border-color: transparent;` not needed.
  box-shadow: none.

Need "each section different background" maybe contact cards light, hero dark, badge orange.

But maybe app-hero-section .row .col-lg-7 already contains image and text; setting background to dark may be ugly with text color? But class col-lg-7 likely contains hero image; maybe dark background behind image? It could alter look. But task demands visual refresh. Need be cautious. Another approach: set `background-color: transparent` no.

Need perhaps use `accent-color`, `caret-color`? Not relevant.

Could change "opacity" maybe maybe add opacity? But not necessary.

Need maybe modify `box-shadow` to none exactly. Since flat-solid requires no shadows.

Need no markdown fences.

But let's examine the instruction: "Refresh the visual identity WITHOUT changing layout structure or class names. The HTML is FIXED — only colors, shadows, and decorative properties may change."

Since original has no colors/shadows, adding colors is allowed. Need preserve selectors exactly.

Need maybe "This is block #2/2", maybe previous block? Actually user asks file: assets/css/saishi.css#块2/2. There might be another block? We only need this CSS.

Need maybe output only CSS no explanatory text.

Let's think about any hidden gotchas: They said "Layout pattern (Aggressive only)" but it says in target style "Aggressive only" maybe not for this mode? It describes asymmetric-blocks but we can't change layout. Need still perhaps colors indicate asymmetry. We can vary backgrounds per block. The contact card selector combines two sections, same background. Could perhaps use CSS variables with child elements? But no new selectors. We can assign different background to each selector in comma list? Since one declaration block applies to both. To give each different background, we'd need separate rules, not allowed. Could use `nth-child`? New selector not allowed. So cannot. But maybe "article" and ".contact-card" are both same? We can set same.

Need maybe use CSS variables in values? Good.

Let's perhaps define custom properties? Can't add :root. But we can use values directly.

Need maybe add `transition`? Original no transitions. Since media query applies on mobile, adding transition doesn't matter. But to satisfy transition maybe we can add `transition: background-color 180ms ease, color 180ms ease;` on badge and cards? But no hover maybe. Not needed. However "transition timing, easing, duration" change doesn't require adding. But if no transition, nothing to change. Since output must "rewritten CSS" and fresh identity, perhaps add transition but doesn't affect layout. Let's consider adding `transition: background-color 200ms ease, color 200ms ease, border-radius 200ms ease;` to cards/badge. But not necessary and perhaps weird in media query. But it's allowed.

Need maybe add `filter`? Could use `filter: saturate(1.2)`? But not needed.

Could change `font-size`? No.

Potential issue: `.app-hero-section .badge.bg-warning` has Bootstrap `.badge` and `.bg-warning` classes. Our background-color with `!important` can override. But if the color is variable `--bs-warning-bg-subtle` etc., but okay.

Need maybe include `background-color: #f7b538 !important;` high contrast.

Let's design a coherent "flat-solid asymmetric blocks" palette:
- Deep Charcoal/Navy `#232946`
- Cream `#fffffe`
- Bright Coral `#ff6b6b`
- Sunny Yellow `#ffd166`
- Teal `#06d6a0`
- Dark text `#1d1d2a`

But "asymmetric-blocks" target perhaps each block has separate background. In hero column, dark background with light text, accent via `outline` or `border-bottom`? We cannot add border-bottom-width? Actually border-bottom-width prohibited? It says border-width not change, but adding border-bottom-width? Could reset all? No. Use outline.

Could use `box-shadow: none` explicitly. Maybe "flat-solid" says box-shadow none everywhere. So include.

Let's craft CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background-color: #232946;
        color: #fffffe;
        border-radius: 0;
        box-shadow: none;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ffd166 !important;
        color: #232946;
        border-radius: 6px;
        box-shadow: none;
    }

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

This changes visual but maybe too simple. Need perhaps more "distinct" with border/outline. Could add `outline: 2px solid #ff6b6b; outline-offset: -2px;` on hero column? Does outline affect layout? No. Use in hero or cards. But "Minimal radius (0-6px)" okay.

Would adding `outline` violate "outline styles (color, type)"? It's allowed. Let's add `outline: 2px solid #ff6b6b; outline-offset: -2px;` to hero col? But outline may be clipped? It draws inside if negative offset, okay. But if `col-lg-7` is flex? no issue. But target style "high contrast borders"; outline is a border-like decoration. Good.

However `outline` is not box-shadow, fits flat-solid. Need maybe add to contact cards? Maybe `outline: 1px solid #d4d8e8;` but flat? Hmm.

Maybe use `border-radius` and `background-color` enough.

Need maybe add `border: 0`? No.

Need maybe preserve `text-align` exactly. Good.

Need maybe consider `background-color` on `.col-lg-7` could be overridden by existing styles? Depends source order. If later, yes. But this is in media query, likely our file may be after Bootstrap. But to ensure, could add `!important` to background-color. However adding !important to layout? Color only. Is it allowed? Yes. But maybe unnecessary. If the original rule has no background, maybe background comes from other CSS with higher specificity? `.app-hero-section .row .col-lg-7` specificity (0,3,1) strong. Bootstrap likely not. We can add !important for background. But better not overdo.

Need perhaps not add "background-color" to `col-lg-7` because that might make entire column dark and hide image? But image if it has its own background (img) would be on top. It could create dark bands. But visual refresh desired.

Let's see "app-hero-section" likely contains a hero with row, col-lg-7: left content. In mobile, text center. Setting dark background could make it look like a block. Fine.

Need maybe create "distinct" color per section: hero col dark teal, badge orange, cards cream. Good.

But target style "asymmetric-blocks" maybe aggressive layout not possible, but we can use "bold contrasting blocks" via backgrounds.

Need maybe include `color` for all text. Good.

Need maybe use `border-radius: 0 0 6px 6px`? We can adjust but minimal.

Let's think whether adding `box-shadow: none` counts as "redesign"? They specifically in variant flat-solid says box-shadow: none everywhere, so yes.

Need maybe output without any explanations, no comments. We'll provide just CSS.

But let's be thorough: The instructions