/* ============================================================
   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 request is to refresh the CSS visually while keeping the layout exactly as-is. The original CSS is:

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

Now, the constraints say:
- Must keep selectors exactly
- Must keep layout properties unchanged (text-align, font-size, padding are layout/typography — cannot change)
- Can change colors, shadows, radius, transitions, gradients, etc.

But this CSS block has no colors, shadows, radius, transitions, or gradients. It only contains:
- text-align: center (layout — cannot change)
- font-size: 0.85rem (typography — cannot change)
- padding: var(--space-md) !important (layout — cannot change, and ±20% max allowed, but better not change)

The instructions say to only change visual properties. However, there are no such properties in this block. The target style says "flat-solid" — box-shadow: none everywhere, solid backgrounds, minimal radius.

Since there are no color/shadow/radius properties to change, the safe move in conservative mode is to output the CSS exactly as-is, because we cannot change any of the properties present (they're all layout/typography). But the task says "Refresh this CSS visually" — yet we are forbidden from changing the layout properties.

Hmm. Let me re-read the constraints: "Only change colors, shadows, radius, transitions, gradients." The original has none of those. Therefore, no changes are possible.

Alternatively, we could add new visual properties that don't break layout. For instance, we could add `background-color`, `border-radius`, `box-shadow: none`, etc., to some selectors. But adding properties to rules within a media query might affect layout? Let's think.

The selectors:
1. `.app-hero-section .row .col-lg-7` — text-align: center. We could add color, background-color, border-radius, etc. But that might change visual appearance in a way that's within scope. However, the instruction "Refresh this CSS visually" suggests making changes. But conservative mode says "HTML fixed, visual changes only" — so adding colors could be acceptable.

But the self-check says "Every selector character-for-character preserved?" — we can add declarations, but keep selectors. However, adding background-color to `.app-hero-section .row .col-lg-7` could alter the look significantly. Is that desired? The target style is "warm minimal: off-white #faf8f3, soft black #2d2d2d, one muted accent (sage #87a878 or terracotta #c47b5a)" and "flat-solid: box-shadow: none, solid backgrounds, minimal radius 0-6px".

Given the media query is for max-width 575.98px, we could:
- For `.app-hero-section .badge.bg-warning` — it's a badge with bg-warning (Bootstrap warning color). We could override its background to a muted accent? That's a color change.
- For contact cards, we could add background colors, border-radius, box-shadow: none.

But the original CSS doesn't contain those properties. The instruction says "Only change colors, shadows, radius, transitions, gradients" — meaning we are allowed to change those, but not obligated to add them. The safest interpretation in conservative mode: since there are no visual properties to change, output the CSS exactly as-is. However, the task explicitly asks to "refresh" the CSS and to choose a target style and effect variant.

I think the intended behavior is to rewrite the CSS, preserving all selectors and layout, but updating any visual properties present. Since none are present, the output would be identical. But that seems like a no-op, and the system likely expects changes.

Let me reconsider. The file fingerprint is given, the request says "File: assets/css/saishi.css#块2/2" meaning this is Block 2 of 2. Perhaps only this block is provided, and we must transform it. In such challenges, the expectation is to produce a transformed version that fits the target style while respecting constraints.

Given the constraints strictly forbid changing:
- text-align (layout)
- font-size (typography)
- padding (layout, ±20%)

We cannot alter those values. But we can add new declarations that don't conflict. Let's think about what would be a sensible "visual refresh" for each rule.

Rule 1: `.app-hero-section .row .col-lg-7 { text-align: center; }`
We could add a color, maybe `color: #2d2d2d;` to set soft black text. That doesn't break layout. Could also add `background-color` but that might create a block behind the column, which could change layout visually but not structurally. Conservative mode: "visual changes only" — colors are visual. But is it wise to add background-color to a column? In the target "flat-solid" style, solid backgrounds are encouraged. However, adding a background to a full column might look odd. Still, it's a visual change.

Rule 2: `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }`
Bootstrap's `.bg-warning` sets background-color: #ffc107. We could override to a muted accent like sage #87a878 or terracotta #c47b5a. Also add `color: #fff;` and `border-radius: 4px;` for consistent flat-solid. But `font-size` stays. This is a good visual refresh.

Rule 3: `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }`
We could add `background-color: #fff;` or off-white, `border: 1px solid #e8e4da;` and `border-radius: 6px;` and `box-shadow: none;` to fit flat-solid. Padding remains. This would refresh the visual identity.

But wait — the constraint says "border-color and border-style (NOT border-width)" can change. It doesn't say we can add borders. It says we can change border-color and border-style. Adding a border where none existed is arguably a change to border-width (0 to 1px), which is forbidden: "border-color and border-style (NOT border-width)" — so we must not change border-width. Adding a border changes border-width from 0 to 1px. That's not allowed.

Similarly, adding `box-shadow: none` — the original has no box-shadow. Adding `box-shadow: none` is fine (it's a visual property, and setting none doesn't break layout). But it's redundant.

Adding `background-color` — the original has no background-color. Adding one is a color change, allowed. Adding `border-radius` — allowed. Adding `color` — allowed. Adding `accent-color`, `caret-color` — allowed.

But we must be careful: adding `padding` is forbidden. We keep padding as `var(--space-md) !important`.

Also, the constraint says "Keep ALL selectors and layout exactly as-is." So we cannot add new selectors. We can only add declarations to existing selectors.

Let me think about what a "conservative" refresh would look like. The target style:
- Warm minimal: off-white #faf8f3, soft black #2d2d2d, accent sage #87a878 or terracotta #c47b5a.
- Flat-solid: no box-shadow, solid backgrounds, minimal radius (0-6px).

So I'll produce:

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

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

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

But wait — using `background-color: #fff` might conflict with the off-white palette. Better use `#faf8f3`. However, cards usually sit on a background; if the page background is off-white, cards should be white or a slightly different tone. Let's use `#ffffff` for cards.

Also, `box-shadow: none` is redundant because there's no shadow by default, but it enforces flat-solid if Bootstrap adds shadows. Bootstrap cards do have shadows? Bootstrap 5 `.card` has `box-shadow: none` by default? Actually, `.card` in Bootstrap 5 has a border, no shadow by default. But `.contact-card` might be custom. `box-shadow: none` is safe.

Could there be an issue with `background-color` on `.col-lg-7`? It might not be desirable. The rule is for centering text. Adding color is safe. But adding background-color could create a visible block. Since the target style is "flat-solid", maybe we should add a subtle background? I'd rather not add background to the column because it could alter the appearance significantly. Adding just `color` is safe and aligns with the palette.

Actually, wait: the instruction says "Refresh the visual identity WITHOUT changing layout structure or class names." It also says "✅ YOU MUST CHANGE (visual identity only): All color values: background, color, border-color, fill, stroke, outline-color; box-shadow; text-shadow; border-radius; gradient colors; transitions; filter; opacity; outline; border-color/border-style; caret-color; accent-color; CSS custom properties."

This implies we must change existing visual values. But there are none. So the only way to comply is to add visual declarations. The self-check says "Colors throughout the file replaced with fresh palette?" Since there are no colors, adding them satisfies this.

Also, "Shadows redesigned (different offsets, colors)?" — none present, so we can add `box-shadow: none` or maybe a very subtle shadow? The effect variant is "flat-solid" which explicitly says `box-shadow: none` everywhere. So we should set `box-shadow: none` on components that might have shadows.

Hmm, but "flat-solid" says "box-shadow: none everywhere" — that's a style directive. We should apply it.

Let me also consider `text-align: center` — that's layout, cannot change. `font-size: 0.85rem` — cannot change. `padding: var(--space-md) !important` — cannot change (and within ±20%, but it's a variable; we shouldn't change the variable value).

Now, the requirement "No AI marker comments" and "Output the rewritten CSS now (no markdown, no preamble)."

So my final output should be the CSS with added declarations. Let me double-check all constraints:

- Selectors preserved: `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article`, `.contact-quick-section .contact-card` — all preserved.
- Media query preserved: `@media (max-width: 575.98px)` — yes.
- Layout properties unchanged: text-align, font-size, padding — unchanged.
- Added properties are only visual (color, background-color, border-radius, box-shadow) — allowed.
- No font-family, font-size changes — wait, I'm not changing font-size.
- No padding/margin changes — correct.

One concern: adding `background-color` to a Bootstrap badge with `.bg-warning` — Bootstrap uses `.bg-warning { background-color: var(--bs-warning) !important; }`? Actually, Bootstrap 5 uses `.bg-warning { background-color: #ffc107 !important; }`? In Bootstrap 5, `.bg-warning` does NOT have `!important`; background colors are set as regular properties. Actually, in Bootstrap 5.3, utilities like `.bg-warning` are generated with `!important`? Let me recall: Bootstrap 5 utilities do not use `!important` for background colors? In Bootstrap 5, `.bg-primary` etc. are defined as `.bg-primary { background-color: rgba(...) !important; }`? Hmm, I think they do use `!important` in some versions. Actually, in Bootstrap 5.0, the `background-color` utilities are defined as:

```scss
@each $color, $value in $theme-colors {
  .bg-#{$color} {
    background-color: $value !important;
  }
}
```

Yes, they use `!important`. So to override `.bg-warning`'s background, we'd need `background-color: #c47b5a !important;`. Otherwise, the Bootstrap utility wins due to `!important`. Since we're in a media query, and the original rule doesn't override background, adding `background-color` without `!important` would not override Bootstrap's `!important` utility.

So to actually change the badge color, we should add `background-color: #c47b5a !important;`. Is adding `!important` allowed? The constraint doesn't forbid it. The original has `!important` on padding. Adding `!important` to our declarations is fine.

But wait, the instruction says "Only change colors, shadows, radius, transitions, gradients." Adding `!important` is not a property change; it's a priority flag. It's acceptable.

Similarly, for `.contact-card`, if it has a box-shadow from Bootstrap, we might need `box-shadow: none !important;` to override. But maybe not necessary. To be safe, add `box-shadow: none !important;`? Hmm, but that might be overkill. The target style explicitly says `box-shadow: none` everywhere, so adding it with `!important` ensures it applies even if Bootstrap adds a shadow.

However, adding too many `!important`s is ugly. Let me think about what's minimal and effective.

Given the original CSS block uses `!important` on padding, it's already in an override context. So it's fine to include `!important` for the new visual declarations that need to override Bootstrap/other styles.

Let me refine:

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

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

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

Is `color: #2d2d2d` on the column allowed? Yes, it's a color change. But does it change layout? No.

Should we use sage #87a878 instead of terracotta? Either is fine. I'll pick terracotta #c47b5a for the accent since it's a warm minimal palette. Or sage. The target says "sage #87a878 or terracotta #c47b5a". I'll go with terracotta for the badge accent.

For cards, `background-color: #ffffff` is a solid background, flat-solid style. But if the page background is #faf8f3, white cards create contrast. That's fine.

Also, "minimum radius (0-6px)" — I use 6px, good.

Transition? The original has none. Could add `transition: background-color 0.2s ease;` but no hover states. Not necessary. But the instructions say "transition timing, easing, duration" can change. There are none. Adding a transition to a static element is harmless but unnecessary. I'll skip it.

Opacity? None. Skip.

Now, double-check the "±20%" rule for padding/margin: I'm not changing padding. Good.

One more thing: the request says "Layout pattern (Aggressive only): Single column layout ... flex-direction: column ... Large vertical gaps ... Narrow content max-width." But that's for aggressive mode. We're in conservative mode, so we ignore those structural suggestions.

The self-check mentions "box-shadow redesigned (different offsets, colors)?" For flat-solid, `box-shadow: none` is the redesign. Good.

Now, is it okay to add `box-shadow: none` when the original has no box-shadow? The instruction says "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)" but the variant says "box-shadow: none everywhere." The variant overrides. So adding `none` is correct.

Wait, the "✨ EFFECT VARIANT: flat-solid" says specifically:
- box-shadow: none everywhere
- Solid background colors only (no gradients)
- Defined by color contrast and borders
- Minimal radius (0-6px)

"Defined by color contrast and borders" — but we can't add borders because border-width is forbidden. So we use background-color contrast instead. But for the badge and cards, we can rely on background contrast. For the column, just text color.

Should we add `border: none`? That changes border-width from default to 0? For a div, border-width default is 0, so adding `border: none` is redundant. Not needed.

Alright, I think my output is good.

But wait — should I worry about the `bg-warning` badge having `color` inherited? Bootstrap badge default color is the body color. Setting `color: #faf8f3` on a terracotta background gives good contrast. Good.

Also, `border-radius: 6px` on a Bootstrap badge — Bootstrap badges already have `border-radius: .375rem` (6px). So that's consistent