/* ============================================================
   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 file but the file content is very small — it's just a media query for `max-width: 575.98px`. Let me analyze it carefully.

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

Now, this is tricky. The instructions say:

✅ MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • 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 (NOT border-width)
  • caret-color, accent-color
  • CSS custom properties (--color-*, --shadow-*) values

🔒 NEVER CHANGE:
  • Selectors — keep exactly
  • display, position, grid-template-*, etc.
  • width, height, padding, margin (keep similar, ±20%)
  • gap, row-gap, column-gap
  • font-family, font-size, font-weight, line-height
  • text-transform
  • @media query breakpoints

Now the problem: the original CSS only contains:
- `text-align: center;` (layout property — can't change)
- `font-size: 0.85rem;` (typography — can't change)
- `padding: var(--space-md) !important;` (padding — can change ±20%)

There are no colors, shadows, radius, transitions, gradients, opacity, etc. in the original at all. There's no color, no shadow, no border-radius, no transition. 

So what can I change here? The task says "Refresh this CSS visually" but there are no visual properties to change. The only properties are layout/typography.

Wait — the media query breakpoint is `max-width: 575.98px`. That cannot change.

Let me check: is `text-align` allowed to change? It's listed under "🔒 NEVER CHANGE" — text-align, vertical-align. Yes, text-align cannot change.

`font-size` — cannot change, it's under typography.

`padding: var(--space-md) !important` — padding can change within ±20%. But the original uses a CSS variable `var(--space-md)`. The instruction says "padding, margin (keep similar values, ±20% maximum)". 

Hmm, the padding uses `var(--space-md)`. If I want to change it within ±20%, I'd need to know what `--space-md` is. I don't have that value. The ±20% rule applies to values I can see. For a var() reference, changing it would be risky. But maybe I could change it to something... Actually, the ±20% rule means padding should stay similar — so replacing `var(--space-md)` with a fixed value could break the intent. But `var(--space-md)` is a CSS custom property reference. The custom property is defined elsewhere. I'm not supposed to define `--space-md` here because the selector list is fixed and I shouldn't add new rules.

Actually wait — the instruction says I can change "CSS custom properties (--color-*, --shadow-*) values" — but that means values of custom properties defined in the CSS, not that I should add new ones.

The most conservative interpretation: the original CSS has almost nothing changeable. Since the task asks me to output rewritten CSS preserving selectors and layout, and there are no color/shadow/radius properties to modify, I should output the CSS essentially as-is, possibly with minor padding tweak within ±20%.

But the task says "✅ YOU MUST CHANGE (visual identity only)" — but if there are no such properties in the input, I can't fabricate changes without breaking the "NEVER CHANGE" constraints or adding new properties. Adding new properties like `background` or `box-shadow` to these selectors would change the visual identity in ways that could be fine, but the original didn't have them. However, adding properties could affect layout? No, box-shadow doesn't affect layout. border-radius doesn't affect layout. transition doesn't.

Hmm, but in conservative mode, the goal is a "fresh color palette + shadow/radius identity". Given the target style "sidebar-classic" and effect "tight-rhythm", maybe I should add subtle visual properties like border-radius or transitions? But wait, the original CSS is a mobile media query. These elements (hero section badge, contact cards) will display on mobile. Adding borders, shadows, radius could be okay.

But the instruction is clear: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

In the original CSS, there are no colors, shadows, radius, transitions, or gradients to change. So the safest rewrite is to keep the CSS essentially identical, perhaps adjusting padding slightly.

Let me reconsider: padding is `var(--space-md)` — it's a CSS custom property reference. The ±20% rule: "padding, margin (keep similar values, ±20% maximum)". Since `--space-md` is unknown, maybe I can keep it as `var(--space-md)` to be safe. But then the output would be identical to the original, which defeats the purpose.

Wait — maybe there's something to change with `!important`? No, `!important` is tied to the declaration.

Let me think about what visual changes could be made while respecting "never change" rules:

1. `text-align: center;` — cannot change (text-align is in the never-change list).
2. `font-size: 0.85rem;` — cannot change (font-size is in the never-change list).
3. `padding: var(--space-md) !important;` — can change within ±20%. But we don't know the value of `--space-md`. If I replace it with a fixed padding like `calc(var(--space-md) * 0.9)` that's within ±20%. But that adds a calc. Alternatively, replace with `var(--space-sm)` — but that's a different variable and could change the value significantly.

Given the constraint, the honest output is essentially the same CSS with maybe a tiny padding adjustment. But that's not a "visual refresh".

Hmm, but the user gave me a target style and effect variant. The expected output might be to add decorative properties. Let me re-read:

"🚀 TASK: Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

"Only change colors, shadows, radius, transitions, gradients" — this means these are the categories I'm allowed to change, not that I must add them if absent. If the original CSS doesn't contain these, then there's nothing to change. The correct conservative output would be the CSS unchanged, or with the allowed padding tweak.

But the self-check says "Colors throughout the file replaced with fresh palette?" — there are no colors in the file. "Shadows redesigned?" — there are no shadows. So the checks pass trivially if there's nothing to change.

However, I want to produce something useful. Let me think about whether `var(--space-md)` could be defined elsewhere in this file. The file content provided is only this block. The fingerprint refers to the whole file "assets/css/saishi.css#块2/2" — meaning this is block 2 of 2. So there might be another block with more CSS. But I only see this block.

Given all this, the safest and most correct approach is to output the CSS with minimal changes — perhaps adjusting the padding slightly within ±20% to show some change.

Option: Change `padding: var(--space-md) !important;` to `padding: calc(var(--space-md) * 0.85) !important;` — that's 15% reduction, within ±20%. This preserves the variable reference, adjusts the visual density, respects the tight-rhythm variant (compact spacing).

But wait — `calc(var(--space-md) * 0.85)` — multiplying a custom property that might be a length works fine. E.g., if `--space-md: 24px`, calc gives 20.4px. That's within ±20%.

Alternatively, I could change to `padding: var(--space-md) !important;` but add `transition` or `border-radius`? Adding properties changes the CSS beyond the original. But the task says "Only change colors, shadows, radius, transitions, gradients" — adding a transition to the contact cards would be adding a transition, which is listed as allowed. Adding a border-radius would be allowed. But adding these in a media query might be fine.

However, in conservative mode, adding new declarations to selectors could be seen as changing the visual identity, which is the point. But is it safe? The HTML is fixed, the classes exist. Adding `border-radius: 4px` to cards — fine. Adding a subtle box-shadow — fine.

But the instruction also says "NEVER CHANGE ... display, position, grid-template-* ... width, height, padding, margin". Padding is changeable within ±20%. 

Let me consider the target style: "sidebar-classic" — two-column layout with darker sidebar. This doesn't apply well to a mobile media query. The effect variant "tight-rhythm" — compact, small radius, subtle shadows, information-dense.

So perhaps I can add:
- `border-radius: 4px;` to `.contact-channels-section article, .contact-quick-section .contact-card`
- `box-shadow` subtle
- maybe a background? No — background is a color property, but adding a background to cards when there wasn't one is risky? It could change layout? No, background doesn't affect layout.

But adding a background could look broken if the element already has a background defined elsewhere with different specificity. The media query is `(max-width: 575.98px)`, so this would apply on mobile. Adding `box-shadow` to a card that might already have a shadow elsewhere — the media query would override if specificity is equal or higher and comes later in the file. But I don't know the rest of the file.

Given "conservative mode" emphasis, I think the best approach is to make minimal, safe changes:

1. Keep `text-align: center` — required.
2. Keep `font-size: 0.85rem` — required.
3. Adjust padding slightly within ±20% to reflect the compact style.
4. Possibly add `transition` and `border-radius` to the contact cards? Hmm.

Actually, re-reading the system prompt: "🛡️ CONSERVATIVE MODE" — "Refresh the visual identity WITHOUT changing layout structure or class names." So I'm allowed to change/chose colors etc. If there are none, I can add some decorative properties.

But wait — the user instruction says "Only change colors, shadows, radius, transitions, gradients." Not "add". In CSS, changing includes adding if they're absent? Usually rewrite tasks expect the output to be a modified version of the input, not a superset with new declarations.

Let me focus on what's clearly a "change":
- `padding: var(--space-md) !important` → something slightly different.

Also, I could change `font-size: 0.85rem`? No — font-size is forbidden.

`text-align: center` — forbidden.

So the only thing in the entire CSS that is allowed to change is the padding. And I can change it by up to ±20% of a known value. But `var(--space-md)` is a variable whose value is unknown. Using `calc(var(--space-md) * 0.9)` is a change but maintains the system. That's a legitimate visual change (slightly tighter spacing) aligning with "tight-rhythm".

But is calc with a unitless multiplier safe? `calc(var(--space-md) * 0.9)` — if `--space-md` is a length like `24px`, this computes to `21.6px`. Fine.

Alternatively, I could change it to `var(--space-sm)` if `--space-sm` is typically smaller and likely within ±20%. But if `--space-sm` is half of `--space-md`, that's a 50% reduction — beyond ±20%. Risky.

`calc(var(--space-md) * 0.9)` is safest. But it looks odd.

Another approach: since the media query targets mobile, and the target style wants a fresh visual identity, maybe I should add a subtle transition for the badge or cards and a small border-radius. But the instruction's self-check says "Shadows redesigned (different offsets, colors)?" — If there are no shadows, nothing to redesign. I don't need to invent them.

Actually, let me reconsider the whole thing. This is a tiny snippet. The system prompt demands a full CSS rewrite with fresh palette. But the input contains no palette. The most faithful response is to output the same CSS, because there is literally nothing visually changeable without violating constraints. But the task explicitly says "Refresh this CSS visually."

I think the intended challenge is to recognize that there's nothing to change, and output the CSS essentially unchanged. But to satisfy "MUST CHANGE", perhaps the padding tweak.

Let me check all constraints for the padding change:
- padding: keep similar values ±20% maximum. `calc(var(--space-md) * 0.85)` → 15% smaller. OK.
- `!important` — keep the flag.
- Selector preserved.
- Media query preserved.

That yields a changed file, albeit slightly. But the task says "visual identity only" — the padding change is a spacing change, technically allowed at ±20%.

Also, `font-size: 0.85rem` is typography — cannot change. `text-align: center` — cannot change.

I could also consider changing the `@media (max-width: 575.98px)` condition? No — breakpoints are fixed.

What about `var(--space-md)` — this references a custom property. I could override the custom property value within the media query? That would be adding a new rule, which changes the selector structure... Actually I could add a `:root` or `.contact-channels-section` custom property declaration? No, that adds new selectors. And the task says "CSS custom properties (--color-*, --shadow-*) values" can change — but there are no such definitions here.

Another idea: Since the padding is `var(--space-md)`, and I must keep it similar, I can leave it but the visual identity refresh might come from elsewhere in the file (block 1). But block 2 is what I'm given.

Given all this, I'll produce a conservative output that:
1. Preserves the media query and selectors.
2. Keeps `text-align: center;` and `font-size: 0.85rem;` unchanged.
3. Adjusts padding to `calc(var(--space-md) * 0.9)` — a 10% reduction, within ±20%, reflecting tight-rhythm.

Wait, but is `calc(var(--space-md) * 0.9)` actually "similar"? If `--space-md` is, say, 16px, then 14.4px — fine.

However, there's a subtle issue: `calc(var(--space-md) * 0.9)` — CSS requires that when multiplying, at least one side must be unitless. `var(--space-md)` resolves to a length like `16px`, and `0.9` is unitless, so `16px * 0.9 = 14.4px`. Valid. Good.

Alternatively, `calc(var(--space-md) - 2px)` would be a subtraction, but if `--space-md` is small (like 8px), 6px is a 25% reduction — beyond ±20%. Multiplication is safer proportionally.

Hmm, but is changing padding even a "visual identity" change? It's spacing, and the task lists padding under "NEVER CHANGE" but allows ±20% modification: "padding, margin (keep similar values, ±20% maximum)". So it's allowed.

Now, should I add anything else? The effect variant says "Subtle shadows or none" and "Small border-radius (2-6px)". The input has no shadows or radius. Adding `border-radius: 4px;` to the contact cards and article would be a visual change within allowed categories (border-radius). But it would be adding a declaration not present in the input. The task says "Only change colors, shadows, radius, transitions, gradients" — adding a radius is technically changing the radius from unspecified (default 0) to 4px. That's a change. And it aligns with the effect variant.

But would adding `border-radius` to `.app-hero-section .badge.bg-warning` be safe? The badge is a Bootstrap badge with `bg-warning`. Adding border-radius could be overridden by Bootstrap's `.badge` styles depending on CSS order. But in the media query, specificity: `.app-hero-section .badge.bg-warning` — specificity 0,3,0 vs Bootstrap `.badge` 0,1,0. So it wins. But changing the badge radius might look odd if the badge was expected to be pill-shaped. Bootstrap `.badge` has `border-radius: 0.375rem` by default in v5. Actually `.rounded-pill` is separate. So default badge has a radius. Overriding it to 4px could change it slightly. Hmm.

I think adding declarations is risky and not clearly required. The instruction: "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" — "rewritten" implies modifying what's there, not adding new stuff. But the target style implies adding shadows/radius. In conservative mode, I lean toward minimal changes.

Let me re-read the user message once more:

"🚀 TASK: Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

"Only change colors, shadows, radius, transitions, gradients" — a strict reading: only these categories of properties may be changed. Since the input CSS has none of these, the correct action is... to output the