/* ============================================================
   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 rewrite the CSS for a file called `saishi.css` in conservative mode. The target style is "sidebar-classic" with a "flat-solid" effect variant, but looking at the original CSS, it's just a media query for mobile responsiveness with a few rules:

1. `.app-hero-section .row .col-lg-7` - text-align: center (this is layout, so keep)
2. `.app-hero-section .badge.bg-warning` - font-size: 0.85rem (typography, keep)
3. `.contact-channels-section article, .contact-quick-section .contact-card` - padding: var(--space-md) !important (padding, can vary ±20%, but this is a variable reference)

Since this CSS doesn't have any colors, shadows, or gradients to change, I need to be careful. The rules are quite minimal. In conservative mode, I can only change visual properties like colors, shadows, radius, transitions, gradients. But there are none here.

Wait, the padding rule uses `var(--space-md)`. I could potentially change the padding value slightly, but the instruction says "keep similar values, ±20% maximum". However, since it's using a CSS variable, changing it might not be appropriate.

Actually, looking more carefully at the constraints:
- I must keep selectors identical
- I must keep layout properties identical
- I can change colors, shadows, radius, transitions, gradients, etc.

The original CSS has:
- `text-align: center` - this is a layout property (text-align is listed in the never-change category)
- `font-size: 0.85rem` - typography, never change
- `padding: var(--space-md) !important` - padding, can change ±20%

Since there are no color, shadow, gradient, or other visual identity properties to change, the most conservative thing to do is output the CSS exactly as-is. But the task says to refresh the visual identity. However, there's nothing to refresh here.

Hmm, let me re-read: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

Since there are no colors, shadows, radius, transitions, or gradients in this block, the safest output is the original CSS unchanged. Making up additions would break the rule of preserving selectors and layout. Adding new properties to existing rules might be okay (like adding a transition or border-radius), but it could also interfere with the HTML layout.

Actually, I could potentially add some visual properties to these existing rules. For example:
- For `.app-hero-section .badge.bg-warning`, I could add a `box-shadow: none` to align with flat-solid style, but that's adding a property not in the original.
- For the contact cards, I could add border-radius.

But the instructions say "Only change colors, shadows, radius, transitions, gradients." Adding properties is technically changing the CSS, and if I add `border-radius: 6px` to the contact-card, that would be a visual change that doesn't affect layout (border-radius doesn't affect layout).

Wait, but the instruction also says "The HTML is FIXED — only colors, shadows, and decorative properties may change." And "border-radius (visual rounding only)" is in the must-change list. So adding border-radius to these elements could be acceptable.

However, in conservative mode, I should be cautious. The prompt says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Adding new property declarations to existing rules doesn't change selectors or layout (border-radius doesn't change layout). But it does change the visual appearance.

Let me think about what "flat-solid" means:
- box-shadow: none everywhere
- Solid background colors only (no gradients)
- Defined by color contrast and borders
- Minimal radius (0-6px)

Since there are no box-shadows or gradients in the existing code, there's nothing to remove. I could add `box-shadow: none` to be explicit, but that's redundant.

The "sidebar-classic" palette:
- Sidebar darker (#252e3a), main lighter
- Functional accent for actions

But again, there are no colors in this CSS block. The media query is purely for responsive text alignment and padding.

I think the most professional response is to output the CSS exactly as it is, because there are no visual properties to refresh. Any addition would be inventing styles that weren't requested and could potentially override existing styles in unexpected ways. However, the task explicitly asks for a rewrite.

Actually, let me reconsider. The three rules in the media query:

1. `.app-hero-section .row .col-lg-7` - `text-align: center;` - This is layout, cannot change.

2. `.app-hero-section .badge.bg-warning` - `font-size: 0.85rem;` - Typography, cannot change.

3. `.contact-channels-section article, .contact-quick-section .contact-card` - `padding: var(--space-md) !important;` - Padding, can vary ±20%. But `var(--space-md)` is a variable reference. I could change it to a different value like `calc(var(--space-md) * 0.9)` or a fixed value like `1.25rem`. But this is risky since I don't know what `--space-md` is.

Given the flat-solid variant emphasizes minimal radius and solid colors, I could:
- Add `border-radius: 0` to the contact cards? No, that could conflict with other styles.
- Add `box-shadow: none`? Redundant but harmless.

Hmm, but the instruction says "ALL color values ... box-shadow ... text-shadow ... border-radius ... gradients ... transition ... filter ... opacity ... outline ... caret-color, accent-color ... CSS custom properties" should be changed. Since there are none, the set of changes is empty.

The self-check says:
- "Colors throughout the file replaced with fresh palette?" - There are no colors.
- "Shadows redesigned (different offsets, colors)?" - There are no shadows.
- "Border-radius adjusted for new visual style?" - There are no border-radius values.

I think the correct output is the original CSS unchanged, since changing something that doesn't exist isn't possible, and adding properties could break the conservative mode guidelines.

But wait, maybe I should be more creative. The request ID and fingerprint suggest this is a real workflow, and the user expects a rewrite. However, in conservative mode, the "never change" list is very strict, and the "must change" list only applies if those properties exist.

Let me check: can I add new properties? The instruction says "only colors, shadows, and decorative properties may change". It doesn't explicitly prohibit adding new properties. But "The HTML is FIXED — only colors, shadows, and decorative properties may change." This implies that I can modify existing decorative properties and possibly add new decorative ones.

However, adding `transition` to the badge or `border-radius` to the contact cards could be seen as a visual identity refresh. For instance:

```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;
        border-radius: 6px;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 4px;
    }
}
```

But this is inventing styles. The original file might have other rules that define border-radius for these elements, and my addition could override them or conflict. In conservative mode, I should minimize changes.

Actually, let me re-read the prompt more carefully:

"🎯 YOUR MISSION: Refresh the visual identity WITHOUT changing layout structure or class names."

This is the overall mission, but for this specific block, the visual identity might already be handled by other CSS blocks. This media query is just a responsive adjustment.

I think the safest and most correct approach is to output the CSS as-is, because there are literally no visual properties to change. The request is for a visual refresh, but this particular block doesn't contain any visual properties (colors, shadows, gradients, etc.) — it only contains layout and typography, which are explicitly forbidden to change.

So my output will be:

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

Wait, but if I output exactly the same, the user might complain that I didn't do anything. Let me think about whether there's any legitimate change I can make.

Looking at the "flat-solid" variant: "box-shadow: none everywhere". I could add `box-shadow: none` to all three rules. This is a decorative property, and it doesn't change layout. It makes the flat-solid intent explicit.

Also, "Minimal radius (0-6px)". I could add `border-radius: 0` or a small value to the elements. But adding border-radius to `.col-lg-7` (a column) would be unusual. Adding it to `.badge.bg-warning` might be acceptable since badges often have rounded corners. Adding it to contact cards might be acceptable too.

But is adding properties within the spirit of conservative mode? The prompt says "Only change colors, shadows, radius, transitions, gradients." It uses the word "change", which implies modifying existing values. But "refresh the visual identity" suggests I should make some visual difference.

Hmm, let me look at the "must change" list again:
- All color values... 
- box-shadow...
- text-shadow...
- border-radius...
- gradient colors and stops...
- transition timing, easing, duration...
- filter, backdrop-filter...
- opacity...
- outline styles...
- border-color and border-style...
- caret-color, accent-color...
- CSS custom properties values...

This is a checklist of properties to change IF THEY EXIST. None of these exist in the provided CSS block. So the "must change" list is vacuously satisfied.

The "never change" list includes text-align and font-size, which do exist here. So I preserve them.

Given all this, the most correct conservative response is to output the exact same CSS. No changes are needed because there's nothing to change.

But maybe I should add the flat-solid enhancements. Let me weigh the risk:
- Adding `box-shadow: none` to the badge and contact cards: In a flat-solid design, this reinforces the aesthetic. It doesn't break layout.
- Adding a small `border-radius` to the badge: Badges typically benefit from rounding. But if the original design had a different radius, my change could conflict. However, since this is a media query, it would only apply on small screens.
- Adding `border-radius` to contact cards: Same logic.

Actually, adding `border-radius` to these elements could be seen as changing the visual identity, which is my mission. But in conservative mode, I should be minimal.

Let me also consider the padding rule: `padding: var(--space-md) !important`. The instruction allows padding changes within ±20%. However, since this uses a CSS variable, I don't know the computed value. I could replace it with a fixed value, but that would break the design system. Better to leave it.

What about the target style "sidebar-classic"? That mentions a two-column structure, but this media query is for mobile (max-width: 575.98px), where the sidebar would likely collapse. So the sidebar-classic layout pattern doesn't apply here. The color palette (#252e3a sidebar) doesn't appear in this block either.

OK, I'm going to go with a minimal, safe approach: output the CSS as-is. But to satisfy the "refresh" requirement, I'll add a couple of harmless decorative declarations that align with flat-solid:

1. Add `box-shadow: none;` to `.app-hero-section .badge.bg-warning` — reinforces flat-solid.
2. Add `border-radius: 6px;` to `.app-hero-section .badge.bg-warning` — flat-solid allows 0-6px radius. Badges commonly have rounded corners.
3. Add `border-radius: 4px;` to the contact cards and `box-shadow: none;` — flat-solid.

But wait, `.app-hero-section .row .col-lg-7` is a layout column; I shouldn't add decorative properties to it because it's purely a structural element.

Actually, adding border-radius to contact cards when they're in a single-column mobile layout could look fine. But without seeing the rest of the CSS, I'm working blind.

Hmm, let me reconsider once more. The instructions are very strict:

"📤 OUTPUT: ONLY the rewritten CSS, preserving ALL selectors and layout exactly"

If I add new declarations, I'm not "preserving" the CSS as-is, but I'm also not changing the selectors or layout. The prompt for the "must change" list says "All color values ... box-shadow ... border-radius ... transition ..." — these are the things I should change. But there are none.

A responsible conservative-mode assistant would recognize that this block has no visual properties to refresh and output it unchanged. The user can then verify that the visual identity is already handled elsewhere.

However, I worry that outputting identical CSS will be seen as not following instructions. Let me see if there's any nuance I'm missing.

Actually, one thing I could do is adjust the `padding` value. The rule is `padding: var(--space-md) !important`. Since padding can vary by ±20%, I could change it to `padding: 0.8rem !important` if I knew what `--space-md` is. But I don't know. Alternatively, I could keep the variable but scale it: `padding: calc(var(--space-md) * 0.9) !important`. This would be a 10% reduction. But that's within the ±20% allowance. However, this would change the spacing on mobile, which might not be desirable, and it doesn't align with the target style or effect variant.

Given the ambiguity, I'll output the CSS exactly as-is. This is the safest interpretation of conservative mode: when in doubt, don't change what shouldn't be changed.

But wait — the user explicitly said "Refresh the visual identity". If I output nothing different, I haven't done my job. Let me at least align with the "flat-solid" effect by explicitly setting `box-shadow: none` where applicable. This is a visual change that enforces the flat-solid style, and it doesn't alter layout.

Let me draft:

```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;
        border-radius: 6px;
        box-shadow: none;
    }

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

But hold on: adding `border-radius` to `.contact-channels-section article` might make articles look like cards, which could be a visual improvement, but if the original design had square corners, this changes the identity. In "flat-solid" variant, "Minimal radius (0-6px)" is explicitly mentioned, so a 4px radius is appropriate.

Also, `.badge.bg-warning` already has a background color (bg-warning is a Bootstrap class). Adding `border-radius: 6px` and `box-shadow: none` reinforces the flat look.

But is it OK to add properties in a media query that only applies on small screens? Yes, it would only affect the appearance on mobile, which might be inconsistent with desktop. However, the original media query already changes padding and text-align on mobile, so adding radius and shadow suppression on mobile is consistent.

Hmm, but if the desktop version of the badge has a shadow, removing it only on mobile would create inconsistency. In a flat-solid design, shadows would be removed everywhere, so this is fine.

I'm torn. Let me look at the self-check requirements:

"✓ Colors throughout the file replaced with fresh palette?" — There are no colors in the file. If I add no colors, this is fine.
"✓ Shadows redesigned (different offsets, colors)?" — There are no shadows. If I add `box-shadow: none`, that's a shadow redesign in a flat-solid sense.
"✓ Border-radius adjusted for new visual style?" — If I add radius values, yes.

But adding `box-shadow: none` could be seen as "redesigning" shadows. In flat-solid, shadows are removed. So this aligns.

I think I'll go with a minimal set of additions that clearly align with the flat-solid effect variant:

1. `.app-hero-section .badge.bg-warning`: add `border-radius: 6px;` and `box-shadow: none;`
2. Contact cards/articles: add `border-radius: 4px;` and `box-shadow: none;`

Wait, but what about the sidebar-classic color palette? I could add a border to the contact cards to create separation: `border: 1px solid #252e3a;`? No, that might be too aggressive and could affect layout slightly (border adds to the box size unless box-sizing is border-box, which Bootstrap typically uses). Since `box-sizing: border-box` is common, adding a border might not break layout. But in conservative mode, I should avoid adding borders that could affect spacing.

Actually, borders with `box-sizing: border-box` don't change layout dimensions. But the instruction says "border-color and border-style" can change, not "border-width". Adding a border where there was none would change border-width from 0 to 1px, which is a border-width change. That's forbidden.

So no adding borders.

What about custom properties? The "must change" list includes "CSS custom properties (--color-*, --shadow-*) values". There are no custom property definitions in this block, only a reference to `var(--space-md)`. I shouldn't define or change `--space-md`.

OK, final decision: Add `border