/* ============================================================
   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 with a "sharp-edges" effect variant and "symmetric-grid" target style. However, the original CSS is very minimal - just a media query with three rules that mostly deal with layout (text-align, font-size, padding). The task says to only change colors, shadows, radius, transitions, gradients, and layout properties within ±20%.

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

The constraints:
- I cannot change selectors
- I cannot change text-align, font-size (typography)
- padding can change within ±20% of original value. The original uses `var(--space-md)` which is a CSS custom property. I need to be careful. I could change the padding value slightly, but since it uses a variable, changing it might affect layout. The rule says "padding, margin (keep similar values, ±20% maximum)". Since `var(--space-md)` is unknown, I should probably keep it or replace with a similar value. But the instruction says custom property values CAN change. However, `--space-md` is not defined here, so if I change the reference, it might break. Better to keep `var(--space-md)` but maybe I could introduce a new custom property? Actually, the safest is to keep the padding as is, or adjust slightly. Since the original uses a variable, I'll keep it but could redefine `--space-md` elsewhere? No, that would add new selectors.

Actually, looking at the "MUST CHANGE" list:
- All color values: there are no colors in the original
- box-shadow: none
- text-shadow: none
- border-radius: none
- gradient colors: none
- transition timing: none
- filter, backdrop-filter: none
- opacity: none
- outline styles: none
- border-color and border-style: none
- caret-color, accent-color: none
- CSS custom properties (--color-*, --shadow-*) values: none defined here

So the original CSS has no visual properties that I'm allowed to change. The only properties are layout/typography which I cannot change (text-align, font-size) or must keep within ±20% (padding).

The instruction says "Refresh this CSS visually" but there's nothing visual to refresh in this snippet. I need to be conservative and not break the HTML. I could add new visual properties like box-shadow, border-radius, transitions, etc. to the existing selectors without changing layout. That would fulfill the "must change" list by adding shadows, radius, transitions.

But wait - the rule says "NEVER CHANGE" selectors and layout. It doesn't say I can't add new declarations. Since the effect variant is "sharp-edges" with hard offset shadows, strong borders, small border-radius, snappy transitions, I can add these to the existing rules.

However, I must be careful:
- `.app-hero-section .row .col-lg-7 { text-align: center; }` - I can add box-shadow, border-radius, transition, but adding a border might affect layout (border-width affects box size). The rule says "border-color and border-style (NOT border-width)" can change. So I shouldn't add border-width. I could add outline though - outline doesn't affect layout. But the instruction says "outline styles (color, type)" can change, meaning existing outlines. Adding a new outline with a width would affect visual but not layout. However, adding outline width is not explicitly forbidden? It says "outline styles (color, type)" - I think adding an outline is risky because it's a border-like visual. But outline doesn't affect layout. Still, adding a visible outline to a column might look odd.

Actually, the better approach: since this is a media query block, I can add visual properties that don't affect layout: box-shadow, border-radius (doesn't affect layout), transition, background (but background might be an issue if not set), color, etc.

The instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must be changed. But there are no colors in the original. So maybe the intent is that I should introduce new colors? The self-check says "Colors throughout the file replaced with fresh palette?" - if there are no colors, I can't replace. But to satisfy the "sharp-edges" variant, I should add shadows, borders, radius.

Given the aggressive mode says "Layout pattern (Aggressive only)" but this is conservative mode. The target style is symmetric-grid with sharp-edges. I'll add:

1. For `.app-hero-section .row .col-lg-7`:
   - Maybe add a subtle background? No, that would change appearance significantly.
   - Add transition for smooth hover? But there's no hover state.
   - I could add `border-radius` but for a column that's full width, it might not matter.

Actually, let me reconsider. The original CSS is a media query for small screens. The changes should be minimal and visual. The safest approach is to keep the exact declarations and add new visual ones that don't break layout. Since the "target style" is symmetric-grid and sharp-edges, I could:

- For `.app-hero-section .badge.bg-warning`: add a hard offset shadow, border, border-radius, and transition. This is a badge, so visual styling makes sense.
- For `.contact-channels-section article, .contact-quick-section .contact-card`: add box-shadow, border-radius, border, background, transition.

But wait - the rule says "display values... width, height, padding, margin" must remain similar. Adding a border via `border` shorthand includes border-width which is forbidden ("NOT border-width"). I can use `border-color` and `border-style` but without width, no visible border. I could use `outline` which has width but outline doesn't affect layout. The rule says "outline styles (color, type)" - it doesn't say I can't change outline-width. Hmm, but adding an outline is a visual change.

Actually, re-reading: "border-color and border-style (NOT border-width)" - this means I cannot change border-width values that exist. It doesn't forbid adding a new border with a width? But adding a border would change the box size (if box-sizing: border-box, then padding/content shrinks; if content-box, border adds to size). That could break layout. So I should avoid adding borders.

I can add box-shadow which doesn't affect layout. Box-shadow with 4px 4px 0px solid color is the sharp-edges style. But box-shadow `0px` blur and spread... Actually `box-shadow: 4px 4px 0px 0px #color` creates a hard shadow.

I can add border-radius: 0-4px. That doesn't affect layout.

I can add transition: 0.15s. That doesn't affect layout.

I can add background colors, text colors. Those don't affect layout.

So my plan:
- Keep all existing declarations.
- Add visual declarations to the badge and card/article rules.
- Maybe add a transition to the column rule.

But I need to be careful: The `.app-hero-section .badge.bg-warning` has `font-size: 0.85rem`. I cannot change font-size. I can add color, background, box-shadow, border-radius, transition. But the badge already has classes `badge bg-warning` which likely have their own background (warning color). If I override background, it might conflict with Bootstrap's `.bg-warning`. But I'm allowed to change colors. Since the target style is sharp-edges, I could give it a different background? The instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must be changed. So I should replace colors. But there are no colors here. I'll introduce a fresh palette.

The target style says "Balanced harmonious palette" and "Consistent shadows". Let me pick a palette:
- Primary: a deep teal or indigo
- Accent: warm amber
- Background: light gray
- Text: dark slate

For sharp-edges:
- box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.2)
- border-radius: 2px
- transition: all 0.15s ease

Let me write:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        transition: color 0.15s ease, background-color 0.15s ease;
    }

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

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

Wait, but adding `background-color: #ffffff` to `.contact-channels-section article` might override existing backgrounds. But the instruction says to change colors, so it's fine. However, I need to ensure I don't break the layout. Background colors don't affect layout.

But hold on: the `.contact-channels-section article, .contact-quick-section .contact-card` rule has `padding: var(--space-md) !important`. I should keep that exactly or within ±20%. Since `var(--space-md)` is unknown, I'll keep it.

Also, adding `transform` in transition is fine, but if the original has no transform, adding a transform on hover would require a hover rule which I can't add (new selector). I can just have transition without actual transform change, which is harmless. Actually, a transition on a property that never changes is useless but harmless. I'll keep transitions simple.

Also, I should consider the `.app-hero-section .row .col-lg-7` - adding transitions to text-align doesn't make sense (not animatable). I'll skip that.

Now, the instruction says "CSS custom properties (--color-*, --shadow-*) values" must be changed. There are none in the original. I could introduce custom properties? That would require adding `:root` or similar, which is a new selector. Not allowed. So I'll use literal values.

Let me also consider the self-check: "Shadows redesigned (different offsets, colors)?" - I'm adding new shadows. "Border-radius adjusted for new visual style?" - I'm adding border-radius. "Colors throughout the file replaced with fresh palette?" - There were no colors, but I'm introducing a fresh palette.

I need to be careful about the badge: `.badge.bg-warning` - Bootstrap's `.bg-warning` sets `background-color: #ffc107` (warning yellow). If I set `background-color: #f4a261`, that's a visual change. Good.

But wait, the rule says "background" is a color value I must change. Since there's no background in the original, adding one is technically introducing a new property. But the spirit is to refresh visual identity. I'll add it.

Let me pick a harmonious palette:
- Deep indigo: #2a2a35
- Warm coral: #ff6b6b
- Soft sand: #f7f3e8
- Muted teal: #4ecdc4

Actually for sharp-edges with hard offset shadows, a common style is neo-brutalism: bright colors, thick borders (but we can't add borders), hard shadows.

Let me finalize:

```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;
        color: #1a1a2e;
        background-color: #f9c74f;
        box-shadow: 3px 3px 0px 0px #1a1a2e;
        border-radius: 2px;
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }

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

Hmm, but is `border-radius: 4px` "small or zero" per sharp-edges? Yes, 0-4px range.

Should I use `!important` on the background? No, keep it simple.

Also, the original `.contact-channels-section article, .contact-quick-section .contact-card` padding has `!important`. I must keep that.

One concern: adding `background-color: #ffffff` to articles/cards might clash with an existing dark theme. But without seeing the rest of the CSS, I'll go with a light clean card look. Actually, to be safer, maybe I should not add background-color to avoid overriding something critical. But the instruction mandates changing colors. The self-check asks "Colors throughout the file replaced with fresh palette?" Since there are no colors, I'll add them.

Alternatively, I could only add box-shadow and border-radius, and change the badge background. That's safer. Let me add background to the badge (since it's `.bg-warning`, changing it is a clear visual change) and leave article/card background transparent or use a very subtle color.

Let me reconsider: The media query is for small screens (max-width: 575.98px). On mobile, cards usually stack. Adding hard shadows on mobile might look heavy but that's the requested style.

Let me produce the final output. I'll keep it clean:

```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;
        color: #1a1a2e;
        background-color: #f9c74f;
        box-shadow: 3px 3px 0px 0px #1a1a2e;
        border-radius: 2px;
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }

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

Wait, the variant says "Small or zero border-radius (0-4px)". For cards, `border-radius: 0` gives sharp edges. Good. For the badge, `2px` is fine.

The shadow for cards could be a darker color for contrast: `#2a2a35`.

Let me also add `outline`? No, adding an outline with width could be considered a border-width change? The rule says border-width not to change. Outline is separate but let's avoid it.

Also, should I change `padding: var(--space-md)`? The rule says padding within ±20%. Since I don't know the value of `--space-md`, changing it would be risky. I'll keep it exactly.

Now, about the transition on `.contact-channels-section article` - `box-shadow 0.15s ease` is fine.

I think this is good. But let me double-check: the target style "symmetric-grid" mentions "Uniform gap (24px throughout)" and "repeat(3, 1fr)" - but the original CSS has no grid properties. Since I cannot add grid-template-columns (that's layout, and the mode is conservative, not aggressive), I won't. The target style is more relevant for the overall design system, but I only have this snippet.

Let me output the CSS without markdown fences.

Actually, one more thing: the request says "File: assets/css/saishi.css#块2/2" - this is block 2 of 2. So the rest of the file is elsewhere. My output will be just this block. Fine.

Final output:

```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;
        color: #1d1d2b;
        background-color: #f7b32b;
        box-shadow: 3px 3px 0px 0px #1d1d2b;
        border-radius: 2px;
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }

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

This preserves every selector, all original declarations, and adds a sharp-edged visual identity with