/* ============================================================
   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;
    }
}

We need to rewrite the given CSS while preserving selectors and layout rules. The original CSS is a media query with some rules for small screens. Only visual properties may change: colors, box-shadow, text-shadow, border-radius, gradients, transition, filter, backdrop-filter, opacity, outline, border-color, border-style, caret-color, accent-color, custom properties values. But we must not change layout, typography, etc.

The original 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;
    }
}

We need to refresh visual identity. There aren't many colors to change here. The rules mostly set layout (text-align, font-size, padding). But we can't change those. We can maybe add visual properties like color, background, border, box-shadow, etc., but the selectors are for elements that may have other styles. We should be careful: adding new declarations is allowed as long as we don't change layout. But the instruction says "Only colors, shadows, and decorative properties may change" - so we can add new color/shadow/radius/transition properties.

We need to target the editorial-magazine style with glow effects. Since the original CSS has no visual properties, we need to inject some. The selectors are specific: .app-hero-section .row .col-lg-7, .app-hero-section .badge.bg-warning, and .contact-channels-section article, .contact-quick-section .contact-card.

We must keep the selectors exactly. We can add new declarations inside each rule, but we must not change existing declaration values (text-align, font-size, padding). Actually, we can change padding within ±20%? The original padding: var(--space-md) !important. We could change the variable value? No, custom properties are values we can change if we define them, but here --space-md is likely defined elsewhere. We could override --space-md? But that might affect layout. Better not change padding or font-size. We can add color, background, box-shadow, etc.

But we need to consider: the target style is editorial-magazine with cream/beige backgrounds, ink black text, deep red accent, glow effects. We can add a border-radius, box-shadow, transition, etc. However, these are inside a media query for max-width 575.98px (mobile). Adding box-shadow and glow on mobile might be okay.

Let's craft the rewritten CSS. We should preserve the media query condition exactly. We can keep the existing declarations and add new ones. We should not add any comments.

Potential additions:

For .app-hero-section .row .col-lg-7:
- text-align: center; (existing)
- Maybe color: #1a1a1a; background: transparent? Not necessary.
- Could add text-shadow? But text-align is layout. We shouldn't change it. We can add text-shadow: 0 2px 8px rgba(0,0,0,0.1); but that's visual.

For .app-hero-section .badge.bg-warning:
- font-size: 0.85rem; (existing)
- Add background: #c44536; color: #f5f1e8; border-radius: 16px; box-shadow: 0 0 24px rgba(196,69,54,0.4); etc.
- The class includes bg-warning, but we can override background with a deep red accent. However, this is a badge, so changing background to accent is fine. But we must be careful not to affect layout. Font-size unchanged.

For .contact-channels-section article, .contact-quick-section .contact-card:
- padding: var(--space-md) !important; (existing)
- Add background: #fff or #f5f1e8? box-shadow: 0 0 24px rgba(196,69,54,0.4) on hover? We can add transition: box-shadow 0.3s ease; but the rule doesn't have :hover. Could add a separate rule? No, we can't add new selectors. We can add transition property to the base rule so that hover transitions if hover rules exist elsewhere. But we cannot add :hover rule because selectors must be preserved. So only add base declarations.

We can add border-radius: 12px; background: rgba(255,255,255,0.8); box-shadow: 0 4px 20px rgba(0,0,0,0.05); etc.

But we need to ensure we don't break the existing layout. Adding background and box-shadow won't affect layout as long as box-sizing is border-box? Actually, box-shadow doesn't affect layout. Border-radius doesn't affect layout. Background doesn't. Text-shadow doesn't. So safe.

Let's produce the output. Since the original has only these rules, we can add visual declarations.

We must be careful with the selector list: .contact-channels-section article, .contact-quick-section .contact-card { ... } — we must keep the same grouping. Adding declarations to both is fine.

Let's choose a color palette: cream background, ink text, deep red accent, olive maybe secondary. For glow effects, use deep red rgba(196,69,54,0.4) and rgba(196,69,54,0.6) on hover. But since no hover selector, we can add a transition but no hover. Maybe we can add a subtle pulsing animation? But we can't change @keyframes names? We could add animation property referencing an existing keyframe? There is none. We can't add @keyframes because that would be new CSS, but we could add it? It doesn't change layout, but it's extra CSS. The instruction says preserve selectors exactly, but adding @keyframes is not a selector? It is allowed as long as we don't change existing selectors? The job is to rewrite CSS, adding new rules is allowed as long as we don't break HTML. But output should be only rewritten CSS, preserving all selectors and layout exactly. It says "preserve ALL selectors and layout exactly" - meaning we must keep the selectors that exist, but we can add new keyframes? Probably not necessary. Better to keep to the same selectors only.

The target style says "Subtle pulsing animations" but we can only add animations if we don't add new selectors? We can add animation property to existing rules, but we need a keyframe. Keyframe names can be defined; they are not selectors. But adding @keyframes adds new code. The instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". That implies we can add new @keyframes? It says "No markdown fences, no explanations". It doesn't forbid adding keyframes. But "preserving ALL selectors" means don't change/remove existing selectors, but adding new ones? Hmm. Usually in these tasks, we are supposed to rewrite the provided CSS, not add new rules. But we can add new declarations to existing rules. Adding keyframes might be considered adding new rules. Since original has no keyframes, we might add them to support animation. However, to be safe, we can add animation using a predefined keyframe? Not possible.

Let's see the exact wording: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." This suggests we should only modify existing declarations, not add new ones? But we can add new properties within existing rules. "Only change colors, shadows, radius, transitions, gradients" - we can add those properties. Transitions are allowed. We can add transition declarations. Animations might be considered transitions? No, animation is different. But glow effects can be achieved with box-shadow and transition on hover. But without a :hover rule, we can't change on hover. We could add a transition anticipating hover rule from other CSS? Possibly.

Alternative: we can add a "filter" or "opacity" but not needed.

Let's craft a visually refreshed version. We'll add:

- For .app-hero-section .row .col-lg-7:
  - color: #1a1a1a; (text color)
  - maybe text-shadow: 0 2px 8px rgba(0,0,0,0.08);
  - maybe background: transparent? Not needed.

- For .app-hero-section .badge.bg-warning:
  - background: linear-gradient(135deg, #c44536, #e07a5f) or solid #c44536;
  - color: #f5f1e8;
  - border: 1px solid rgba(255,255,255,0.2);
  - box-shadow: 0 4px 16px rgba(196,69,54,0.4), 0 0 24px rgba(196,69,54,0.2);
  - border-radius: 24px;
  - transition: box-shadow 0.3s ease, transform 0.3s ease; (transform is layout? transform can affect layout? It doesn't affect layout, but it's a visual transform. It might be okay, but we should avoid changing layout. Transfer is fine.)

- For .contact-channels-section article, .contact-quick-section .contact-card:
  - background: #ffffff;
  - border-radius: 16px;
  - box-shadow: 0 8px 24px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.02);
  - transition: box-shadow 0.35s ease;
  - maybe backdrop-filter: blur(8px); but background needs to be semi-transparent for backdrop-filter to show. Could use background: rgba(255,255,255,0.85); and backdrop-filter: blur(8px); But backdrop-filter can be a visual property. However, it might not work in all browsers, but it's allowed.

But we must be careful: adding background to .contact-channels-section article or .contact-quick-section .contact-card could override their existing background. But original rule only sets padding, so adding background is fine.

We should also consider that the media query is for mobile. Adding heavy shadows might be fine. But we can add a more editorial feel: cream background, ink text, red accent.

Let's also consider that the original file is "saishi.css" and this is block 2/2. So there may be other CSS before this. We are only rewriting this block. We should not introduce variables that might not exist unless we define them. Avoid using var(--space-md) in new properties? We can use literal values.

Let's write the output:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        text-shadow: 0 1px 4px rgba(0,0,0,0.08);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #c44536 0%, #e07a5f 100%);
        color: #f5f1e8;
        border: 1px solid rgba(245,241,232,0.25);
        border-radius: 24px;
        box-shadow: 0 4px 16px rgba(196,69,54,0.4), 0 0 24px rgba(196,69,54,0.25);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255,255,255,0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(0,0,0,0.04);
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.02);
        transition: box-shadow 0.35s ease, background-color 0.35s ease;
    }
}

But is adding -webkit-backdrop-filter okay? Yes, it's a visual property. It doesn't change layout.

However, we must ensure we don't change the font-size of the badge. We didn't. We didn't change padding. We didn't change text-align.

But note: For the .contact-channels-section article selector, adding a border could affect box-sizing if the original had a specific box-sizing? Border is part of layout? Actually, adding a border changes the element's total size if box-sizing is content-box. That could affect layout. The instruction says "border-color and border-style (NOT border-width)" - we can change border-color and border-style, but NOT border-width. Adding a border where there was none changes border-width from 0 to 1px, which is changing border-width. This is disallowed. The instruction explicitly says "border-color and border-style (NOT border-width)" meaning we are not allowed to change border-width. If the original had no border, adding border-width 1px is changing border-width. So we should not add border. Similarly, adding box-sizing is not allowed. So avoid adding border.

Also, "border-radius" is allowed. "box-shadow" is allowed. "background" is allowed. "color" is allowed. "text-shadow" is allowed. "transition" is allowed. "backdrop-filter" is allowed. So we can keep border-radius, box-shadow, background, color, text-shadow, transition, backdrop-filter.

But the badge had no border originally. We should not add a border. Remove border from badge. Instead, perhaps use outline? Outline is allowed, but outline doesn't affect layout. But outline-width is also a? The instruction says "outline styles (color, type)" - it doesn't mention outline-width, but probably outline-width should not be changed. Best avoid.

Let's remove border declarations.

Now, for the article/contact-card, adding background with opacity might affect readability, but fine. Adding backdrop-filter is visual. No border.

What about padding? We keep exactly var(--space-md) !important. Good.

Now, let's think about whether adding color/text-shadow to .app-hero-section .row .col-lg-7 could affect layout? No.

We should ensure all colors are from the palette. Cream background #f5f1e8, ink #1a1a1a, accent #c44536. We used those.

Potential issue: Adding transition to the base rule without hover rule is harmless. But the original file might have hover styles elsewhere. This block is only media query. We can add transition.

We might want to add a glow effect on the badge. We used box-shadow with 0 0 24px rgba(196,69,54,0.25). Good.

We might also add a subtle pulsing animation to the badge? We can add animation, but need keyframes. We could add a keyframe with a name, but that would be a new rule. Since original has no keyframes, adding keyframes is not "preserving selectors"? It's adding a new at-rule. It doesn't change selectors. But the instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Adding keyframes is arguably allowed because it's not a selector and doesn't change layout. But to be safe, we can skip animation and just use transition/box-shadow.

The target style "glow-effects" includes "Subtle pulsing animations". We could add an animation to the badge using existing CSS variables? No keyframes. Maybe we can use `animation: pulse 2s infinite` but keyframe not defined. That would be invalid unless defined elsewhere in the file. This is block 2/2, maybe block 1 has keyframes. We don't know. We could reference a keyframe named "pulse" if it exists, but we can't be sure. Better not add animation.

We can add a `transform` transition, but transform might be considered layout? It doesn't change layout, but it can affect visual rendering. It's allowed? The instruction doesn't mention transform. It says "Only colors, shadows, and decorative properties may change" - transform could be considered decorative. But to avoid risk, we can skip transform. Just box-shadow transition.

Let's refine the output.

Also, we should maintain the media query exactly as is. The original had spaces? Yes.

Now, about the comment at top: File: assets/css/saishi.css#块2/2 etc. We should not output those. Only CSS.

Let's produce final.

But wait: The instruction says "You are an expert CSS designer in 🛡️ CONSERVATIVE MODE." and "Only colors, shadows, and decorative properties may change." It also says "transition timing, easing, duration" can change. So transition is allowed. "border-radius" allowed. "backdrop-filter" allowed. "opacity" allowed. "filter" allowed. "outline styles" allowed. "border-color and border-style (NOT border-width)" allowed.

So adding background-color/background gradient is allowed (gradients allowed). Adding color allowed. Adding text-shadow allowed. Adding box-shadow allowed. Adding border-radius allowed. Adding transition allowed. Adding backdrop-filter allowed.

We cannot add border, because that would introduce border-width. We cannot add padding/margin. We cannot change font-size. We cannot change text-align.

Let's check our rule for .app-hero-section .badge.bg-warning: we added gradient background, color, border-radius, box-shadow, transition. No border. Good.

For .contact-channels-section article, .contact-quick-section .contact-card: We added background, backdrop-filter, border-radius, box-shadow, transition. No border. Good.

For .app-hero-section .row .col-lg-7: We added color, text-shadow. Good.

Now, is `backdrop-filter` considered a decorative property? Yes. It changes visual appearance. It is in