/* ============================================================
   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;
    }
}

The user wants me to refresh the CSS in a conservative mode. The file is `assets/css/saishi.css#块2/2` and the content is small. Let me analyze the original CSS:

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

This is a media query with three rules. The target style is "symmetric-grid" but the layout pattern is "Aggressive only" — meaning I'm in conservative mode, so I should not change layout. The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

But this CSS only contains:
- `text-align: center` (layout - can't change)
- `font-size: 0.85rem` (typography - can't change)
- `padding: var(--space-md) !important` (padding - can keep similar, ±20%)

There are no colors, shadows, borders, gradients, or transitions in this CSS. The only things I could change:
- `text-align` is a layout property (can't change)
- `font-size` is typography (can't change)
- `padding` is layout but I can vary within ±20%

Hmm. The instructions say I must change colors, shadows, radius, transitions, gradients, etc. But there are none here. 

Wait — the mode is "flat-solid" which says `box-shadow: none` everywhere. Since there are no box-shadows, that's already satisfied.

Since the original CSS has no visual properties to change, I have a few options:
1. Add new visual properties that don't break layout (e.g., add `box-shadow: none`, add `border-radius: 0`, add `background-color` to elements).
2. Change the padding slightly within ±20%.

But I need to be careful: adding colors to elements might not be appropriate since the original didn't have them. However, the task is to refresh the visual identity. The target style is "flat-solid" with:
- box-shadow: none everywhere
- Solid background colors only (no gradients)
- Defined by color contrast and borders
- Minimal radius (0-6px)

Since the original CSS is minimal, I should enhance it with visual properties that align with the flat-solid variant while keeping layout intact.

Let me think about what I can do:

For `.app-hero-section .row .col-lg-7` — it has `text-align: center`. I could add `color` or `background` but that might be too aggressive. However, the instructions say to change colors throughout. Since there are no colors, I should add some.

Actually, wait. Let me re-read: "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette."

The instruction is to output a rewritten CSS. Since the original has no colors, I need to add some visual properties to make it distinct. The safest approach is to add properties that are explicitly allowed to change:

- `border-radius`: can add
- `box-shadow`: can add (but flat-solid says none)
- `background-color`: can add
- `color`: can add
- `border-color`: can add
- `transition`: can add

But I must keep the selectors and layout unchanged.

Let me craft something that fits the "flat-solid" variant:

For the badge `.app-hero-section .badge.bg-warning` — it's a warning badge. I could add a solid background color, border, minimal radius. But it already has `bg-warning` class from Bootstrap. Changing the color might conflict. However, the task says to refresh the CSS visually, so I can add `background-color: #f59e0b` or something similar.

Actually, since `bg-warning` is a Bootstrap utility class, the original CSS doesn't style the background. If I add a background color, it would override Bootstrap. That could be part of the refresh.

But I need to be careful not to break the layout. Adding background colors, borders, shadows, and radius won't break layout as long as I don't change width/height/padding/margin significantly.

Let me write a refreshed CSS:

```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;
        background-color: #d97706;
        color: #fff;
        border: 1px solid #b45309;
        border-radius: 6px;
        box-shadow: none;
    }

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

Wait, but the `contact-channels-section article` and `.contact-card` might already have backgrounds. Adding a background could change appearance significantly. But that's the point of a visual refresh.

However, the flat-solid variant says "box-shadow: none everywhere". So I should not add box-shadows. For a "flat-solid" look:
- Solid background colors
- Borders for definition
- Minimal radius (0-6px)

Let me also consider adding a transition. The instructions say I can change transitions. But since there are no hover states in the original, adding a transition on base elements is fine.

Let me be more thoughtful. The original CSS has 3 rules inside a media query. I should preserve all selectors and layout properties exactly:
- `text-align: center` stays
- `font-size: 0.85rem` stays
- `padding: var(--space-md) !important` stays (I could change to `var(--space-md)` value, but since it uses a CSS variable, I can't change the variable value without defining it; I should keep it as-is or slightly adjust. The instruction says padding can vary ±20%, but `var(--space-md)` is a custom property reference. I shouldn't change it to a different value because that would change the intent. Let me keep it.)

So the only things I'm adding are: background-color, color, border, border-radius, box-shadow: none, transition.

Let me pick a fresh palette. The target is "symmetric-grid" style with a "balanced harmonious palette." For a flat-solid effect variant, I'd use:
- Background: warm off-white (#fafaf9 or #f5f5f4)
- Accent: amber/orange for the warning badge (#f59e0b or #d97706)
- Text: dark gray (#1c1917 or #292524)
- Border: light warm gray (#e7e5e4)

But I need distinct colors. The "previous attempt didn't change enough" warning pushes me to be more bold.

Let me think about what makes sense for these specific elements:

1. `.app-hero-section .row .col-lg-7` — this is a column in the hero section. Adding a background to a whole column could be too much. Maybe just add a subtle color or transition. But since it only has `text-align: center`, I could add a `color` (text color) for the hero text. Actually, that would affect all text in that column. That's a reasonable visual change. Let me add `color: #1c1917` — but that's likely already the default. Maybe better to not touch it, or add a subtle background.

Hmm, but the task demands I change colors. Let me add a background tint to make it distinct.

2. `.app-hero-section .badge.bg-warning` — warning badge. I'll style it with a solid amber background, white text, and a subtle border.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — contact cards. I'll give them a solid light background, border, and small radius.

For the flat-solid variant, `box-shadow: none` is specified. I should explicitly set `box-shadow: none` where I might otherwise add shadows, to reinforce the flat look.

Let me also add transition for hover effects, even though there are no hover rules. A transition property on base elements is fine.

But wait — if I add `background-color` to `.contact-channels-section article`, and the original CSS had no background, the cards might become visible against the page. That's a visual change. Good.

Let me think about the margin/padding constraint: padding is `var(--space-md) !important`. I'll keep it exactly since I can't change the custom property. That's within the rules because I'm not supposed to change layout; padding can vary ±20% but using a variable reference means I don't know the value. Keeping it is safest.

Let me also consider: should I add `border: 1px solid ...`? Border width is "NEVER CHANGE" — wait, the instructions say "border-color and border-style (NOT border-width)". So I should not add a border with a width if the original didn't have one? Adding a new border-width would change layout (since border takes up space). The rules say border-width must not change. If the original had `border: none`, I could change color/style but not width. If the original had no border property at all, adding `border: 1px solid` would introduce a new border-width, potentially affecting layout dimensions slightly. That could be considered a layout change.

Hmm, the instruction says: "border-color and border-style (NOT border-width)" — meaning I can change existing border-color and border-style, but I cannot change border-width. If I add `border: 1px solid`, I'm setting border-width to 1px, which might be considered adding a new width. To be safe, I should use `outline` instead, or use `box-shadow` to simulate a border. But flat-solid says box-shadow: none.

Actually, adding a border of 1px will slightly change the box size unless `box-sizing: border-box` is set. The instructions mention `box-sizing` is a layout property that I must not change, but it's likely set to border-box by Bootstrap. Still, to be strictly safe with the "±20% padding" rule and "border-width never change" rule, I should avoid adding new borders with explicit widths.

An alternative: use `outline` (which doesn't affect layout) — outline-color and outline-style are allowed to change. So I could add `outline: 1px solid #e7e5e4; outline-offset: -1px;` to simulate a border without affecting layout. That's clever.

But wait, the instruction says "outline styles (color, type)" can change. It doesn't say I can't add an outline. Adding an outline doesn't affect layout. So I'll use outlines instead of borders.

Similarly, `box-shadow: none` doesn't affect layout.

So my approach:
- Use `outline: 1px solid <color>` for definition (no layout impact)
- Use `background-color` for solid palette
- Use `border-radius: 6px` for minimal rounding (doesn't affect layout much; it's allowed to change)
- Use `box-shadow: none` explicitly for flat-solid
- Use `transition` for smoothness

Let me also consider the first rule: `.app-hero-section .row .col-lg-7`. I can add a subtle background with a very light color and a small radius. But a column in a grid might span the full width; adding a background could look odd. But it's a visual refresh, so let me be bold but tasteful.

Actually, re-reading the task: "Refresh the visual identity WITHOUT changing layout structure or class names." and "Make colors, shadows, and radius MORE distinct this round. Use a fresh palette."

Since the original CSS is tiny and has no colors, I'll inject a distinct palette.

Let me define a palette:
- Primary background: #f8fafc (very light slate)
- Accent (warning): #f59e0b (amber) with white text
- Card background: #ffffff (white) — but solid flat, maybe #fef3c7 (light amber) for contrast? No, let's keep it neutral.
- Border/outline: #e2e8f0 (light slate)
- Text: #1e293b (dark slate)

Actually, for a "symmetric-grid" style with "balanced harmonious palette," I could use:
- Base: stone/warm gray palette (#fafaf9, #f5f5f4, #e7e5e4, #1c1917, #78716c)
- Accent: amber (#f59e0b)

Let me write:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #f59e0b;
        color: #1c1917;
        border-radius: 4px;
        outline: 1px solid #d97706;
        box-shadow: none;
        transition: background-color 0.2s ease;
    }

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

But wait — `box-shadow: none` for flat-solid. I added `box-shadow: none` which is good. But the task says "box-shadow: none everywhere" for the flat-solid variant. Adding `box-shadow: none` explicitly satisfies that.

Should I add a transition? The variant says flat-solid defined by color contrast and borders. Transitions aren't forbidden. But if there are no hover styles, transitions on base elements do nothing unless there are separate hover rules elsewhere. Since I can't see the full stylesheet, adding a transition is harmless.

However, adding `background-color` to `.app-hero-section .row .col-lg-7` might be too much — a full column with a background. But it's a visual change. Let me reconsider: the original CSS centers the content in that column. Adding a light background could be a design choice. But the column is inside a row and might be 7/12 width. On mobile (max-width: 575.98px), all columns stack full-width. So the background would span the full width. That could actually look like a section band. That's acceptable.

But I want to be careful: I'm told not to change padding/margin. Adding background doesn't change padding. Good.

Now, for the badge `.badge.bg-warning`: Bootstrap's `.bg-warning` sets `background-color: #ffc107` (in Bootstrap 5). I'm overriding it to `#f59e0b`. That's a distinct color change. Also, Bootstrap badges have `padding` and `border-radius` defined by `.badge` class. I'm changing the radius to 4px. Bootstrap's default badge radius is 0.375rem (6px). Changing to 4px is fine.

For `color: #1c1917` on the warning badge — Bootstrap's `.badge` text color inherits. Warning is usually dark text. I'll set a dark color.

Actually, let me use a more distinct amber: `#d97706` (dark amber) with white text for better contrast. Or `#f59e0b` with `#78350f` (dark brown) text. Let me go with `#f59e0b` background and `#451a03` text for a bold look. Hmm, let me keep it simple: `#f59e0b` bg, `#1c1917` text.

Let me also think about whether to add `outline` or `border`. The instruction says "border-color and border-style (NOT border-width)". Adding an outline is safer. But outlines don't participate in the box model. For a flat-solid design, borders are typical. Using outline with `outline-offset: -1px` can simulate an inset border without layout shift. Let me do that.

Actually, wait — there's another consideration. The `padding: var(--space-md) !important` with `!important` means my added properties could also be overridden by Bootstrap if the specific property isn't important. But I'm adding new properties not present in the original rule, so specificity is fine.

Let me also consider whether to change the padding slightly. The instruction says keep similar values ±20%. Since it's `var(--space-md)`, I could redefine `--space-md` as a custom property... but that would affect the entire document and might break things. Not a good idea. Keep `var(--space-md)`.

Now, is there anything else I should change? The original has no colors, shadows, or gradients. I've added:
- `background-color` (solid)
- `color`
- `outline` (instead of border)
- `border-radius`
- `box-shadow: none`
- `transition`

This satisfies the requirement to change visual properties.

Let me make sure the output preserves selectors exactly:
- `.app-hero-section .row .col-lg-7`
- `.app-hero-section .badge.bg-warning`
- `.contact-channels-section article, .contact-quick-section .contact-card`

And the media query `@media (max-width: 575.98px)`.

Also, the layout properties:
- `text-align: center` unchanged
- `font-size: 0.85rem` unchanged
- `padding: var(--space-md) !important` unchanged

I'll format the CSS cleanly.

Let me also reconsider the palette