/* ============================================================
   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 only the CSS changes, but the original CSS provided is quite minimal — it's a media query block with only a text-align change, a font-size change, and padding changes. These are all layout/typography properties that I'm NOT allowed to change (text-align, font-size, padding are in the "never change" list, though padding says ±20% max).

Let me look at what's actually in the original CSS:
1. `@media (max-width: 575.98px)` — media query breakpoint, keep it
2. `.app-hero-section .row .col-lg-7 { text-align: center; }` — text-align is layout, cannot change
3. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — font-size is typography, cannot change
4. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — padding is layout (can change ±20%, but the instruction says keep similar values; also it uses a CSS custom property `--space-md`)

This is a trick/edge case. The original CSS has almost no visual-only properties. I cannot change text-align, font-size, or padding significantly. The only things I could change:
- Maybe I could add visual properties (like background, box-shadow, border-radius) to these selectors? The task says "Refresh this CSS visually" but also "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

But the self-check says:
- ✓ Every selector character-for-character preserved?
- ✓ display, position, grid-template-*, flex-direction unchanged?
- ✓ width, height, padding, margin within ±20% of input?
- ✓ font-family, font-size, font-weight, line-height unchanged?
- ✓ Colors throughout the file replaced with fresh palette?
- ✓ Shadows redesigned (different offsets, colors)?
- ✓ Border-radius adjusted for new visual style?

There are no colors, shadows, or border-radius in the original. So if I "only change colors, shadows, radius, transitions, gradients," there's nothing to change.

However, the spirit of the task seems to be that I should produce a refreshed CSS that preserves the selectors and layout. I can add visual properties to the existing selectors within the media query. Adding properties is not changing layout. But the instructions say "Only change colors, shadows, radius, transitions, gradients" — adding them could be acceptable, but it might violate "keep layout exactly as-is" if I add padding or something.

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

So I think the safest approach: I can add visual decorative properties (box-shadow, border-radius, background, etc.) to the existing selectors without changing the existing declarations. The existing declarations (text-align, font-size, padding) must remain unchanged.

But wait — the target style is "dense-dashboard" with "sharp-edges". Maybe I should add:
- To `.app-hero-section .badge.bg-warning`: a background color, color, box-shadow, border-radius, border, transition
- To `.app-hero-section .row .col-lg-7`: maybe a text-shadow? Unlikely.
- To `.contact-channels-section article, .contact-quick-section .contact-card`: background, box-shadow, border-radius, border, transition

But there's a risk: adding properties to these selectors could be considered a violation if it changes the visual layout (e.g., adding border adds to width/height if box-sizing isn't border-box). Hmm.

Given the constraints, I'll add purely visual decorative properties:
- Use `box-shadow` hard offset shadows (4px 4px 0px) which don't affect layout.
- Use `border-radius` — doesn't affect layout.
- Use `transition` — doesn't affect layout.
- Use `background` colors — doesn't affect layout.
- Use `color` for text — doesn't affect layout.
- Use `border` with border-width — wait, "border-color and border-style (NOT border-width)" can change. So I can add border-style and border-color but if I add a border, it might affect layout. Actually, they say "border-color and border-style" may change, and "border-width" cannot change. If the original has no border-width, adding one would be a change to border-width. So I must NOT add border-width.

Hmm. So to be safe, I should not add `border` with a width. I can add `outline` instead? Outline doesn't affect layout. But "outline styles (color, type)" are allowed to change, not necessarily add. Adding outline-width would also be a change. Actually, I can add `outline: 2px solid ...` — but 2px is a width. The instruction says "outline styles (color, type)" — not width. So better to not add border or outline.

What about `box-shadow`? Adding box-shadow doesn't affect layout. Safe.
`border-radius` — safe.
`transition` — safe.
`background`, `color` — safe.
`text-shadow` — safe.
`filter`, `backdrop-filter` — safe.
`opacity` — safe.

So I'll add visual properties that are purely decorative and don't affect layout.

Given the "sharp-edges" variant: hard offset shadows `4px 4px 0px solid color`, small/zero border-radius (0-4px), strong borders — but I can't add borders. I'll use box-shadow for the hard offset look.

Also, I could add `background` to the badge, and `color` etc.

Let me craft a response that preserves the media query and selectors exactly, keeps the existing declarations unchanged, and adds visual properties consistent with the target palette and sharp-edge style.

Palette: slate background `#1e293b`, cards `#334155`, accent blue `#3b82f6`, white text.

But wait — the original selectors: `.app-hero-section`, `.contact-channels-section`, `.contact-quick-section` appear to be on a light theme probably. Adding a dark background might be a big change but it is a visual change only, not layout. The task explicitly says "Use a fresh palette" and the target is dense-dashboard with cool grays. Hmm.

But I must be careful: Adding `background` to `.app-hero-section .row .col-lg-7` would make the text container dark? That's a visual change, safe for layout.

However, the instruction also says "✅ YOU MUST CHANGE (visual identity only): All color values: background, color, border-color..." — but there are no color values in the original. So perhaps I should not invent them. But the task says "Refresh this CSS visually" and the previous attempt "didn't change enough."

Hmm, I think the expected answer is to produce a rewritten CSS that keeps the selectors and the layout-affecting declarations, and introduces visual styling. Since there's very little to change, I should add visual properties to the selectors to make the refresh noticeable.

Let me think about what's reasonable:

For the media query block:
```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 2px 0 rgba(30, 41, 59, 0.12);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: #3b82f6;
        color: #ffffff;
        box-shadow: 4px 4px 0 0 #1e293b;
        border-radius: 2px;
        transition: all 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        box-shadow: 4px 4px 0 0 #1e293b;
        border-radius: 4px;
        transition: box-shadow 0.15s ease;
    }
}
```

Wait, but `.badge.bg-warning` — bg-warning is a Bootstrap class that sets background-color: #ffc107. If I change the background to blue, the badge loses its warning semantics. But from a pure CSS visual refresh perspective, the instruction says to change colors. Hmm. But `.bg-warning` is a Bootstrap utility class, and if this stylesheet is loaded after Bootstrap, it'll override. It's a risky visual change but allowed.

Actually, maybe I shouldn't override the background color of a utility class since the semantics of "warning" may be important. But the task says "make colors MORE distinct". The target palette is blue/slate. I could change the badge to a fresh accent: maybe keep it warning-ish but with a new tone? Like a brighter orange? But the palette is cool grays + blue. Hmm.

Alternatively, I could add a box-shadow and border-radius to make it "sharp edge" without changing the background. But the instruction says all color values should be replaced. The badge's background color comes from Bootstrap, not this file, so I don't have to change it.

Let me reconsider: The file is `assets/css/saishi.css`. The given block is only a media query. So the whole file might be just this? Or this is "块2/2" meaning block 2 of 2, and the first block was already rewritten? Actually, the prompt says "File: assets/css/saishi.css#块2/2" — this is block 2 of 2. The previous block was probably already given to me earlier, but I only see this block. So I can only rewrite this block.

Given that the only layout-affecting declarations are text-align, font-size, padding, I must keep them. Add visual properties to the same selectors to achieve the refresh.

I should follow the "sharp-edges" variant:
- Hard offset shadows: `4px 4px 0px 0px <color>`
- Small or zero border-radius (0-4px)
- Strong borders — I can't add borders, but box-shadow can simulate a border with `0 0 0 2px` inset? Actually a hard offset shadow plus a ring shadow: `box-shadow: 0 0 0 3px #1e293b, 4px 4px 0 0 #3b82f6;` — the first shadow is a ring (spread 3px, no blur) which acts like a border. Adding box-shadow does not affect layout. This simulates a strong border. That's good.

Let me design a cohesive refresh:

Palette:
- Slate dark: `#1e293b`
- Slate mid: `#334155`
- Accent blue: `#3b82f6`
- White: `#ffffff`
- Off-white: `#f8fafc`

For `.app-hero-section .row .col-lg-7` (text container):
- Add `color: #1e293b;` (if it's light theme) — hmm, but changing text color could be considered typography? No, color is a visual property, allowed.
- Add `text-shadow: 2px 2px 0 rgba(59, 130, 246, 0.15);` for a subtle hard shadow.

For `.app-hero-section .badge.bg-warning`:
- Keep font-size.
- Add `background: #3b82f6; color: #ffffff;` — but that changes the "warning" meaning. Alternatively `background: #334155; color: #ffffff;` — actually warning color is yellow/orange. Let me pick a fresh warning-like color that fits: maybe `#f59e0b` (amber-500) is already close. But "fresh palette" wants distinct change. The target palette doesn't include amber. Hmm.

The instructions: "Colors throughout the file replaced with fresh palette?" — there are no colors in the file. I can add colors from the palette. I'll add slate/blue.

I think overriding `.bg-warning` is fine for this exercise; it's a "refresh" with a new palette. Let me use accent blue for the badge to make it pop. It's not semantically a "warning" anymore, but the task is a visual identity refresh, and class names are fixed. Actually, I could instead not change the background color (since it's not in this file) and just add shadows/radius. But the task says "All color values: background, color, border-color..." — meaning I must change them IF present. They're not present. So adding new visual properties is the way.

Let me also add a `transition` property.

For the contact cards:
- Add `background: #ffffff;` — but the page background might be slate `#1e293b`? The target style says "White cards on slate background". So contact cards white with slate shadows. Add `box-shadow: 4px 4px 0 0 #1e293b;` and `border-radius: 4px;` or `0px` for sharp. The variant says small or zero radius. I'll do `4px`? Actually "sharp-edges" says small or zero border-radius (0-4px). I'll do `2px` maybe.

I also need to ensure `box-sizing`? Adding box-shadow doesn't affect layout. Adding radius doesn't. Good.

I should also possibly add a transform on hover? No — the selector list must be preserved; I can't add `:hover` pseudo-classes because that would be adding selectors. The instruction says "Pseudo-classes (:hover, :focus, ::before, ::after)" — maybe means keep existing ones exactly, not add new ones. Adding new selectors is likely a violation. So no hover states. Just base visual properties.

Let me produce the final output:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1e293b;
        text-shadow: 2px 2px 0 rgba(59, 130, 246, 0.15);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: #3b82f6;
        color: #ffffff;
        box-shadow: 0 0 0 2px #1e293b, 4px 4px 0 0 #1e293b;
        border-radius: 2px;
        transition: box-shadow 0.15s ease, background-color 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        box-shadow: 0 0 0 2px #334155, 4px 4px 0 0 #334155;
        border-radius: 2px;
        transition: box-shadow 0.15s ease;
    }
}
```

Wait — for the badge, `bg-warning` sets `background-color: #ffc107` with `!important`? Actually Bootstrap's `.bg-warning` is `.bg-warning { background-color: #ffc107 !important; }`. Yes, Bootstrap utilities use `!important`. So my `background: #3b82f6` without `!important` would NOT override Bootstrap. To be safe, I could add `background-color: #3b82f6 !important;` or `background-color: #3b82f6;` — but Bootstrap's `!important` wins. Hmm.

Given this file is `saishi.css`, it may be loaded after Bootstrap, but specificity is still lower because Bootstrap has `!important` on the utility. So my override would fail for `background-color`. To make the change visible, I'd need `background-color: #3b82f6 !important;` — but does that change layout? No. Is `!important` allowed? It's not a layout property. But the instruction says "Only change colors, shadows, radius, transitions, gradients" — adding `!important` is fine.

Alternatively, I can avoid changing the badge's background and instead add a `filter: hue-rotate(...)`? No.

Hmm, but actually the task is about rewriting the provided CSS. The provided CSS is a block within a media query. If I add `!important`, that's a modifier, not a new selector. I think it's acceptable. But maybe cleaner to not fight Bootstrap and instead just add shadows/radius that complement the existing warning color. The instruction from the user is "Make colors, shadows, and radius MORE distinct this round. Use a fresh palette." So they want color changes. I'll include `!important` to ensure the badge color actually changes.

Let me reconsider: maybe I should add a `filter` to the badge? `filter: saturate(...)` no. Simpler: set `background-color: #3b82f6 !important;`.

Actually, the original CSS uses `.badge.bg-warning` — the class `badge` and `bg-warning`. If I want a dense-dashboard look, blue is good. I'll use `#3b82f6`.

For `.app-hero-section .row .col-lg-7`, adding `color: #1e293b` might not override if there's a more specific rule or if the hero section is dark. It's fine; it's a visual refresh.

For the contact cards, `background: #ffffff` — but `article` might already be white. It's fine.

Also, the padding: keep `var(--space-md)` exactly; don't change.

Check the "Never change" list:
- text-align: `text-align: center;` stays. ✓
- font-size: `font-size: 0.85rem;` stays. ✓
- padding: stays exactly. ✓
- selector lists: `.contact-channels-section article, .contact-quick-section .contact-card` preserved exactly. ✓
- media query: preserved. ✓

New properties added: `color`, `text-shadow`, `background`, `box-shadow`, `border-radius`, `transition` — all in the allowed change list