/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

The user wants me to refresh CSS visual identity while keeping selectors and layout exactly as-is. Let me analyze the original CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

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

Wait, this is just a media query with a few rules. The target style is "card-mosaic" with "tight-rhythm" variant. But the original CSS doesn't have any colors, shadows, radius, transitions, gradients — it only has text-align, font-size, and padding.

The constraints say:
- I can only change colors, shadows, radius, transitions, gradients
- I must keep layout: display, position, width, height, padding/margin (within ±20%), etc.
- Typography is fixed: font-size, font-weight, line-height, letter-spacing, etc. cannot change
- text-align cannot change (it's in the typography list)

So the original CSS is already minimal. The media query rules:
1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — text-align cannot change (it's typography), so keep as-is.
2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — font-size cannot change, keep as-is.
3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — padding can change within ±20%. `var(--space-md)` is a CSS custom property. The rule says CSS custom properties (--color-*, --shadow-*) values can change. But `--space-md` is a spacing variable, not color/shadow. Hmm, I shouldn't change the variable name. I could keep the padding using the same var or adjust.

Actually, I need to be careful. The instructions say:
- padding, margin (keep similar values, ±20% maximum)
- CSS custom properties (--color-*, --shadow-*) values — only color and shadow variables can change.

So I should preserve `padding: var(--space-md) !important;` as-is or adjust it slightly. Since the original uses a variable, I'll keep it but maybe that's fine.

Given the original CSS has no colors/shadows/radius to update, I should just output essentially the same CSS, but I need to make sure not to change what can't change. The safest is to preserve the original selectors and declarations, since there are no visual color properties to refresh.

But wait, maybe the task expects me to add visual properties? The instructions say "Only change colors, shadows, radius, transitions, gradients." If there are none, then there's nothing to change. I should keep the CSS as-is. But that seems odd for a "rewrite."

Let me reconsider. The self-check says:
- Colors throughout the file replaced with fresh palette? There are no colors.
- Shadows redesigned? No shadows.
- Border-radius adjusted? No border-radius.

So the honest output is the original CSS unchanged. But maybe I can add subtle visual touches? The constraint is "HTML is fixed — only colors, shadows, and decorative properties may change." Adding new properties like `box-shadow` or `border-radius` to existing selectors would be a decorative property change. But the rule also says "Keep ALL selectors and layout exactly as-is." Adding box-shadow doesn't change layout (box-shadow doesn't affect layout). Adding border-radius is visual rounding only.

However, I must be cautious. The instructions say "You MUST CHANGE: All color values... box-shadow... text-shadow... border-radius... gradient... transition... filter... opacity... outline... caret-color... accent-color... CSS custom properties." This is a list of things I must change if present. It doesn't necessarily require adding new properties.

The task says "Refresh this CSS visually." The original media query is tiny. The target style card-mosaic/tight-rhythm suggests vibrant card colors, compact spacing, small border-radius.

I think the safest approach: keep the selectors and the existing declarations exactly, but I could add decorative properties like `border-radius` or subtle `box-shadow`? No — the original declarations are specific. If I add `box-shadow`, it could affect layout? box-shadow does not affect layout. But it would be a visual change consistent with the task. However, adding properties might be considered changing the CSS beyond what's asked. The instructions say to rewrite the CSS visually, changing colors etc. If there are no colors, maybe I add them carefully.

Actually, re-reading: "🔒 NEVER CHANGE (would break HTML layout): ... padding, margin (keep similar values, ±20% maximum)". The padding declaration uses `var(--space-md)`. I don't know the value of `--space-md`, but it's a spacing variable. I could change it to something else within ±20%? But I don't know the base value. Keeping it as-is is safest.

I think the correct response is to output the CSS with minimal/no changes, because the original file contains no visual properties to refresh. The instructions explicitly say "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." If nothing can be changed, output as-is.

But let me think about whether I should add anything. The task headline: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." This phrasing implies that the changes I make should be limited to those properties. If the file has none, I cannot add them without violating "only change" — adding is a change though. Hmm.

One reasonable interpretation: I can add decorative properties to the existing rules as long as selectors and layout are preserved. Adding `border-radius`, `box-shadow`, or `transition` to a card might be welcome. But the selectors here target a hero section row alignment, a badge font-size, and card padding. Adding colors/shadows to a `.badge.bg-warning` might conflict with Bootstrap's `.bg-warning` background. Adding `!important` might be needed. This seems risky.

Given "conservative mode," I should be minimal. The original CSS is already only about responsive alignment and spacing. Since none of the changeable properties appear, I will output the CSS essentially unchanged. That satisfies "preserving ALL selectors and layout exactly" and avoids breaking.

But let me check: is `text-align` a layout property I can't change? Yes, it's in typography list. `font-size` cannot change. `padding` can change only ±20%, but I don't know base. I'll keep.

One possibility: the `!important` on padding — keep it.

Therefore, the output should 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 the task insists "Refresh this CSS visually." If I output identical CSS, the request ID expects a change. Maybe I should add a subtle visual upgrade that doesn't break layout: e.g., add `border-radius` to `.contact-channels-section article` and `.contact-quick-section .contact-card`? The tight-rhythm variant wants small border-radius 2-6px. But adding border-radius to a card that might already have a radius from elsewhere could conflict. Also, I can't know the base styles.

Hmm. Let me think about what a CSS designer would do. The target style "card-mosaic" with "tight-rhythm" suggests adding a small radius and subtle shadow. But the media query is for small screens (max-width: 575.98px). Adding shadow/radius within media query is fine.

But adding new declarations might be considered "changing" the CSS beyond the original. The instructions: "Only change colors, shadows, radius, transitions, gradients." Adding radius/shadow/transition is literally adding those properties. The phrase "only change" could be read as "you're allowed to modify these, nothing else." So adding is allowed. But "NEVER CHANGE ... padding" — I shouldn't change padding beyond ±20%.

Which approach is best? The user explicitly says "Refresh this CSS visually." Conservative mode but still wants a refresh. The original CSS has no visual properties, so to refresh, I'd need to add some. However, I worry about breaking the design. Adding `border-radius` and `box-shadow` to cards inside a media query at mobile sizes — could be fine. But the badge bg-warning — adding a `box-shadow` to a badge might look off.

Let me consider the exact selectors:

1. `.app-hero-section .row .col-lg-7` — a column in a hero section. On mobile, text-align center. I could add nothing.

2. `.app-hero-section .badge.bg-warning` — a Bootstrap warning badge. Font-size 0.85rem. I could add a subtle `box-shadow` to make it pop? Or a slightly warm border? But Bootstrap's `.bg-warning` already has a background color. Adding `box-shadow` is decorative. Could be a nice touch: `box-shadow: 0 2px 6px rgba(...)`. But the tight-rhythm variant says "Subtle shadows or none." So maybe not.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — contact cards. On mobile, padding var(--space-md). I could add `border-radius: 6px;` small. But if the cards already have a radius, changing it could conflict. However, within media query, adding a border-radius would override base rules at mobile sizes, potentially changing the look but not layout. Border-radius doesn't affect layout dimensions. That might be acceptable.

But the instruction also says "border-radius (visual rounding only)" — so changing is allowed.

Still, I'm cautious about adding properties. Let me re-read the exact task: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

"Only change" = you may only alter these types of values. It doesn't say "you must add these if absent." So the minimal correct output is the original unchanged. But then it's not a "refresh."

Given the conflict, I think the intended behavior is: if the original file has visual properties, replace them with new palette; if not, preserve. But the request ID and fingerprint suggest a real file from a codebase. This particular chunk is just a media query. Perhaps the AI is expected to recognize there's nothing to change and output as-is.

However, there's a subtlety: `padding: var(--space-md) !important;` — could I change the variable value? The instructions say CSS custom properties (--color-*, --shadow-*) values can change. `--space-md` is not a color or shadow variable. So no.

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

So the only properties I could touch are none. Therefore, output identical CSS.

But wait — maybe I can change the padding value slightly within ±20%? E.g., if `--space-md` resolves to some value, changing to `var(--space-sm)`? No, I don't know values, and changing a variable name changes the design system. Keep it.

I'll output the exact original CSS. But to add some "refresh" value, I might add a comment? No, comments are not allowed? "No AI-REWRITTEN comments" means no marker comments. Regular comments? Better avoid any comments.

Let me double-check the output requirements:
- ONLY the rewritten CSS, preserving ALL selectors and layout exactly
- No markdown fences, no explanations
- No  comments
- First character = first CSS character
- Goal: same layout, fresh color palette + shadow/radius identity

Since the goal mentions fresh palette and shadow/radius identity, maybe I need to inject some decorative properties. Let me reconsider.

Actually, perhaps the safest enhancement that doesn't violate "no layout change" and fits the target style:

For `.contact-channels-section article, .contact-quick-section .contact-card`: add `border-radius: 6px;` — this is a visual-only change, within tight-rhythm (2-6px). But this could alter existing rounded corners at mobile. It's allowed because border-radius is in the allowed list.

For the hero column, nothing to add.

For the badge, could add `box-shadow: 0 1px 3px rgba(...)`. But bg-warning is a yellow/orange background; a subtle shadow could lift it. Tight-rhythm says subtle. Hmm.

But adding properties to a media query for mobile might be undesirable. In conservative mode, I think minimal changes are best. The instruction says "⚠️ SELF-CHECK BEFORE OUTPUT: ... Colors throughout the file replaced with fresh palette? Shadows redesigned? Border-radius adjusted?" These checks assume such properties exist. Since they don't, the checks pass vacuously.

I'll go with outputting the original unchanged. Actually, let me reconsider once more. The file is "assets/css/saishi.css" — likely a comprehensive stylesheet. This chunk is small. The user asks for a "card-mosaic" and "tight-rhythm" style refresh. If I only output this media query, it seems odd. But the task is specifically this chunk. The instruction "HTML is FIXED — only colors, shadows, and decorative properties may change" — this means I am allowed to alter the decorative properties within this chunk. There are none. So no changes.

I think the correct professional answer is: preserve the existing declarations because no visual properties are present to refresh, and adding unrequested properties risks breaking the design. Output identical CSS.

But let me consider whether changing `var(--space-md)` to a slightly different padding is possible within ±20%. If `--space-md` is, say, 16px, then 12.8-19.2px allowed. But I can't compute without knowing. Changing the variable reference to `var(--space-sm)` might be within range but risky. Keep.

Also, I could change `text-align: center` to `text-align: center;` — no change.

OK, final decision: output the CSS exactly as-is, preserving everything. Since the instructions demand the output be only CSS with no preamble, I'll output the exact CSS.

Wait, but the system prompt says "You are an expert CSS designer in 🛡️ CONSERVATIVE MODE. 🎯 YOUR MISSION: Refresh the visual identity WITHOUT changing layout structure or class names." This strongly implies I should make some visual change. But if there's nothing to change, outputting as-is is the most conservative.

Hmm, let me think about whether adding a `transition` might be safe. The tight-rhythm variant: "Subtle shadows or none." Maybe I could add:

```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;
        box-shadow: 0 1px 2px rgba(124, 45, 18, 0.15);
    }

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

Adding `box-shadow` to the badge — box-shadow doesn't affect layout. Adding `border-radius` to contact cards — doesn't affect layout. These fit the allowed list. But is it wise? The original CSS didn't have them; adding them changes the visual identity for mobile devices. The task says refresh visually. This satisfies.

But there's a risk: if `.contact-card` already has a border-radius and specific background, overriding with 6px at mobile is fine. The tight-rhythm variant wants small radius 2-6px. 6px is at the top end; maybe 4px is safer. Also, "compact spacing" — padding stays as is.

What about "vibrant card colors on neutral background" — I can't add colors to cards because that would require background-color, but the original doesn't set background. Adding background-color to a card that may rely on its own background could be risky. The target style says each card type a different accent, but I shouldn't add background colors in a media query.

Given the instructions "Only change colors, shadows, radius, transitions, gradients" — adding box-shadow, border-radius is allowed. Adding background-color is also a color change, but could break. I'll avoid backgrounds.

Now, which is better: output identical, or add subtle shadow/radius? The task explicitly says "Goal: same layout, fresh color palette + shadow/radius identity." The "shadow/radius identity" implies shadows and radius should be present. Since the original has none, adding them creates the identity. So I'll add subtle shadow/radius to the card elements.

But hold on — the media query is for max-width 575.98px, i.e., mobile. On mobile, cards might already have a desktop style that includes radius/shadow; overriding at mobile with a small radius aligns with "tight-rhythm" (small radius). That's a visual change, not layout. I think it's acceptable.

Let me craft the final 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;
        box-shadow: 0 1px 3px rgba(133, 47, 12, 0.18);
    }

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

Wait, should I add a box-shadow to the badge