/* ============================================================
   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 CSS only. Need process input. Need respect conservative. Need target style asymmetric-blocks? But only media query with 3 rules. Need visual changes only. Original has no colors. Need maybe adjust border-radius? text-align cannot change. Padding can ±20%? It currently uses var(--space-md) !important. Could we change padding? It's a layout property, "keep similar values, ±20% maximum". But var unknown; changing to color? no. We can leave padding. Need output same selectors and declarations? We can add decorative properties? The task says refresh visually. But original in media query: text-align center (cannot change), font-size (can't change). padding (can change within 20), var can't? We need perhaps add color? But no color values exist. To satisfy, need create visual identity changes by adding color/background/border/shadow maybe within existing rules? However selectors fixed but can add new declarations to same rules. But do we need? The original only includes layout/typography. It is a media query for responsiveness. If we add colors maybe could alter. Need be conservative. The target style is asymmetric-blocks flat-solid, but no structure. Need perhaps change padding values to something within 20%? Original `--space-md` unknown. Can't compute. Could leave.

Need make sure no markdown. Only CSS. We can perhaps transform to use "color: var(--...)"? But not in original. Hmm.

Let's inspect: `@media (max-width: 575.98px)` has:
```
.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're told "You are an expert CSS designer... Refresh the visual identity WITHOUT changing layout structure or class names. HTML FIXED — only colors, shadows, and decorative properties may change." Also listed Never change typography. But original includes font-size/text-align. Need preserve. We can leave them, perhaps add additional declarations like `color`, `background-color`, `border-radius`, `box-shadow`? But `box-shadow` none per flat-solid variant. "box-shadow: none everywhere" but original no box-shadow, so can add none? Maybe not necessary. Need visual update. Could replace font-size? no. Could add colors to `.badge.bg-warning`, `.contact-card`, etc. But that might alter more.

We need satisfy "Colors throughout the file replaced with fresh palette?" There are no colors. Need maybe inject a color palette through CSS custom properties? But selector list needs not change. Could add `:root`? That would add a selector not in original; preserve every selector character? "Every selector character-for-character preserved" means don't modify selectors, but can add new rule? likely no. Conservative mode says keep selectors exactly; output rewritten CSS preserving all selectors. Usually we should not add selectors. But visual identity may require editing existing property values. No color values. We can perhaps replace `text-align: center`? No. Hmm.

Maybe the answer should be original CSS unchanged because no allowed changes in it. But then no visual refresh. The task may be test and expects same? Need consider. "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." If no color/shadows/radius/transitions/gradients in original, maybe no changes possible except maybe padding? Actually "padding, margin (keep similar values, ±20% maximum)" means we could change padding modestly, but that is not visual identity. "font-size" cannot change. Could we adjust border radius of elements? They aren't specified, but can add to selectors. Could add `border-radius: 0.25rem;` to `.contact-card` and `.app-hero-section .badge.bg-warning`? But need not.

Let's examine target style "asymmetric-blocks" and flat-solid. But this CSS file only responsive adjustments. Maybe original has an entire stylesheet, but the user only gave snippet? It says #块2/2, perhaps part 2 of 2. The snippet is a media query. We need rewrite only this snippet, perhaps adding colors to match target. Without context, possible.

Need output CSS with same selectors and media condition. Could include extra property values under each existing rule:
- `.app-hero-section .row .col-lg-7` maybe only text-align unchanged. Add `color`? Not necessary; that's text. Could add? But inside hero column maybe text color. Need not.
- `.app-hero-section .badge.bg-warning` font-size unchanged; could add `background-color`, `color`, `border-radius`? But `.bg-warning` bootstrap background; changing to specific color might break brand. But visual identity change is desired. However class includes `.bg-warning` and using Bootstrap. If we override with `background-color: #...; color: #...; border-radius: ...; box-shadow: none;` that is visual.
- `.contact-channels-section article, .contact-quick-section .contact-card` padding unchanged; add background/border/shadow maybe. But don't change layout.

Need maybe set "contact cards" background colors for asymmetric blocks. But "flat-solid": no box-shadow, solid colors only, minimal radius. Could add `border: 1px solid #...; border-radius: 0.375rem; background-color: #f8f4ef;` to article/contact-card. But that might apply to article elements inside contact channels section. But this is media query at max-width 575.98; adding background and border okay. It changes visual identity. Need choose colors.

Need preserve padding `var(--space-md) !important` (cannot know, but no change). Actually padding within ±20% maybe could change to `calc(var(--space-md) * 0.9) !important`? But this changes property value; however kind of layout. Better leave.

Need maybe add `border-radius: 6px` to these cards. Since minimal radius 0-6. Use `6px` maybe. Need flat solid shadows none; no need if no shadows. Could set `box-shadow: none` to satisfy variant. But output "box-shadow:none everywhere" maybe applied in all relevant rules. We can add `box-shadow: none !important;`? But is that allowed? Adding box-shadow none is decorative and doesn't affect layout. Yes.

Need handle `badge.bg-warning`. Use solid background. `bg-warning` Bootstrap is `#ffc107`. We can override to e.g. `#f4a259`, `color: #1a1a2e`; border-radius maybe `4px`; `box-shadow: none`.

Need pick a coherent palette: asymmetric-blocks, bold contrasting blocks. Since media query snippet, color values can be bold.

Maybe set:
- `.app-hero-section .row .col-lg-7`: add `color: #1a1a2e;` maybe.
- `.app-hero-section .badge.bg-warning`: `background-color: #e4572e; color: #ffffff; border-radius: 4px; box-shadow: none;`
- `.contact-channels-section article, .contact-quick-section .contact-card`: `background-color: #f4f1de; border: 1px solid #1a1a2e; border-radius: 6px; box-shadow: none;`

But need preserve original color? `color: #ffffff` on badge might affect text only; okay.

Need think if adding `background-color` to `.contact-channels-section article` may be not desired because inside contact-channels, all articles maybe blocks. Good.

Need maybe add `border: 1px solid` border color. Since listed border-color and border-style allowed; border-width cannot change. But there was no border. Adding `border: 1px solid` includes width 1px. Is that "border-width" change? The rule says "border-color and border-style (NOT border-width)" meaning don't change widths from original. But adding a border from none to 1px changes layout dimensions? Could affect box-sizing. Since box-sizing border-box likely, okay but could. We can instead use `outline: 1px solid`? outline doesn't affect layout. But outline also allowed. However flat solid "defined by color contrast and borders" suggests need borders. But to avoid layout effect, use `outline: 2px solid #...`? Outline affects no layout. But may overlap. Need choose. The instructions say only border-color and border-style, not border-width; but if no border originally, adding `outline` is safe. Yet "High contrast borders" target. Could use `outline: 2px solid #1a1a2e; outline-offset: -2px;`? Outline is decorative and no layout. But "borders" could be outline. Hmm.

Need not overcomplicate. "border-width" not change: if I add `border: 1px solid`, width changed from 0 to 1. But permitted? The list says "border-color and border-style (NOT border-width)" which implies if there is a border property, change color/style but not width. It might not forbid adding a border. But "layout structure" maybe border adds space if box-sizing content-box. Yet in normal CSS, border affects layout. However padding and background with border maybe okay. But the self-check says "display, position, grid-template-* flex-direction unchanged?" It doesn't mention border-width. Still, "HTML fixed" no.

Maybe better use `box-shadow: none` and `border-radius`, but not border. But target "flat-solid" uses "Defined by color contrast and borders"; no shadows. The "border" can be on existing components from original full CSS. But snippet not. Could use `outline` to maintain no layout. Let's decide.

Need follow user's desired "Only change colors, shadows, radius, transitions, gradients." Adding `border-color` and `border-style` was originally in allowed. Could add `border: 0 solid`? no.

Let's consider if output should be identical because no colors. The prompt says "Only rewrite the CSS preserving all selectors and layout exactly. Only colors, shadows, radius, transitions, gradients." We can add color/radius to existing selectors, no new selectors. That is valid. Need maybe add rules? Could add `transition`? Not necessary.

Need maybe "no AI marker comments." Use no comments.

Need include full original declarations unchanged:
1. text-align center, add `color`.
2. font-size, add colors/background/border-radius.
3. padding, add background/border/radius, maybe box-shadow none.

Need maybe "font-size: 0.85rem" cannot change. Keep exactly. `text-align:center` keep. Padding keep.

Need choose values:
- Palette: maybe dark navy `#1f2a44`, warm off-white `#f6f1e7`, vivid coral `#ef6461`, deep teal `#2b4a6f`, amber `#f4a261`. High contrast.
- Since target "asymmetric-blocks", maybe each section different background. In a media query, using "article" background and "badge" background maybe enough.
- flat-solid shadow none. Minimal radius 4px/6px.

Let's craft:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ef6461;
        color: #ffffff;
        border-radius: 4px;
        box-shadow: none;
    }

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

But "High contrast borders" missing. Need maybe add `outline: 2px solid #1f2a44;` to cards and badge? Outline doesn't affect layout. But original no outline. But allowed outline-color though not "border-color". The allowed list mentions "outline styles (color, type)" and "outline-color" in visual changes. So adding outline is allowed. Could set `outline: 2px solid #1f2a44; outline-offset: -2px;` or `2px solid`. Does outline affect layout? no. But on small screen, visible.

Actually if using `outline: 2px solid` on `.contact-card`, outline is drawn around entire card, may be okay. Use `outline-offset: -2px` to keep inside? Might overlap; but fine. Maybe no. Better `border: 1px solid`? Let's examine "border-radius can change visual rounding only" and "border-color and border-style (NOT border-width)" So they explicitly want to change border color/style, not width. We can set `border: 1px solid #1f2a44`? no. If original had no border, setting `border-style: solid` and `border-color` but no width won't show because width default is medium (3px). That would affect layout more. Could set `border: 1px solid` but violates instruction? Probably not strict.

Maybe use outline for high contrast. Target flat-solid defined by borders. Use `outline: 2px solid #1f2a44; outline-offset: -2px;` and `border-radius: 6px;` The outline follows border-radius? Yes border-radius affects outline in modern browsers? outline follows border-radius. Good.

Need maybe apply to `.contact-channels-section article, .contact-quick-section .contact-card` all. Add `background-color: #f6f1e7; outline: 2px solid #1f2a44; outline-offset: -2px; border-radius: 6px; box-shadow: none;` But if original card has an existing border or box-shadow from base, `box-shadow:none` will remove; desired "flat-solid." Good.

Need maybe `.app-hero-section .badge.bg-warning`: add `outline: 2px solid #1f2a44; outline-offset: -2px;` too. But outline on a badge might look too harsh. Target high contrast borders; okay. But the class `bg-warning` is from bootstrap and likely has `border-radius: .25rem`. We override to 4px. Badge default `padding` etc unaffected. Add `outline`.

Need maybe `.app-hero-section .row .col-lg-7` color only. But "asymmetric-blocks" maybe no.

Need perhaps "transition" changes? There are no transitions. We can leave. But "transition timing, easing, duration" allowed. Not required. Could add `transition: background-color 0.2s ease, color 0.2s ease;` to badge/card? But no states in media query, and adding transition doesn't alter layout. But flat-solid not concerned. Don't add extraneous.

Need check "No markdown fences, no explanations; First character = first CSS character" Means no preceding whitespace? "First character = first CSS character." That indicates output should start with `@`. Should not include code fences. Need ensure no blank line before maybe okay? "First character" so no leading newline. We'll output CSS exactly, no prelude.

Need maybe "Request ID" not output.

Let's ensure selectors preserved character-for-character:
- `.app-hero-section .row .col-lg-7` exactly.
- `.app-hero-section .badge.bg-warning` exactly.
- `.contact-channels-section article,` and `.contact-quick-section .contact-card` exactly.

Need preserve order.

Need maybe preserve trailing `!important` on padding. Yes.

Need not preserve "font-size" etc? yes.

Could the use of `color` in `.app-hero-section .row .col-lg-7` maybe affects text alignment? no.

Need maybe add `background-color` to the hero text container? no.

Potential issue: The `contact-channels-section article` in original might already have `background-color` from full stylesheet. Overriding with `#f6f1e7` is okay. The `contact-quick-section .contact-card` maybe cards. Good.

Potential issue: At max-width 575.98, maybe `.contact-channels-section article` should have no card look? But target style says bold blocks.

Need maybe use CSS variable? Not necessary.

Need perhaps incorporate "asymmetric-blocks" with unequal columns? Cannot change layout. We can only color. Maybe the "target style" is internal to model, but output should reflect through colors/background contrast. We can use `background-color: #1f2a44` on one block and `#ef6461` on another. But we don't have enough selectors.

Could choose:
- `.app-hero-section .badge.bg-warning` background `#ef6461`
- `.contact-channels-section article` background `#f6f1e7`
- `.contact-quick-section .contact-card` background `#1f2a44`? But they share rule, can't differentiate without adding selector, which is not allowed. Could not. Need same properties for both.

Could perhaps use `:nth-child`? Not original selector; not allowed. Keep same.

Need maybe set `accent-color`? no controls.

Need maybe `caret-color`? no inputs.

Need maybe "solid background colors only (no gradients)" so no gradient.

Need maybe "box-shadow: none everywhere." Add `box-shadow: none` to all three rules? For hero col maybe also no shadow? Could include `box-shadow: none;` but hero col likely no shadow; adding none is harmless. But `box-shadow:none` in hero could override existing shadows if any, aligning flat-solid. We can add to all rules. Need not add to `.app-hero-section .row .col-lg-7` maybe yes.

Need maybe "border-radius: 0" or 4/6 minimal. Use 0? "Minimal radius (0-6px)"