/* ============================================================
   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 answer must be rewritten CSS only no markdown. Need modify original CSS? It's tiny media query with text-align, font-size, padding. Those are layout/typography? We can perhaps adjust? Need keep selectors exactly, layout changes limited. But task says refresh visual identity; original has no colors/shadows. Need maybe add color/background? We cannot add properties? Output maybe same? But should "Only change colors, shadows, radius..." Could leave text-align center, font-size unchanged, padding unchanged? Need refresh visual identity perhaps we can alter padding slightly under ±20? But padding is in original with !important. We could change padding value to be within ±20? It's var(--space-md). Can't change variable? We can adjust. But no need? Let's examine.

Original:
@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;
    }
}

Need output preserved selectors exactly. We can only change colors, shadows, radius, transitions, gradients, but there are none. Maybe we can add visual properties? But changing visual identity only. Could adjust font-size? No, typography fixed. text-align fixed. padding allowed within ±20%. Maybe we can alter padding to calc? But "var(--space-md)" unknown. If we preserve same but change nothing, does not fulfill refresh. Need perhaps add "transition" to elements? But adding properties that don't affect layout? Could be okay, but self-check says colors throughout replaced fresh palette, but no colors. Could add color/border-radius/box-shadow? But that alters visual, not layout. Yet it might be weird to add shadows to mobile hero? Maybe not.

Need target style sidebar-classic + sharp edges. Original is mobile responsive. Maybe we can transform into sidebars? But layout cannot change; media query max-width 575.98 means mobile. We shouldn't add grid.

Need maybe introduce color variables? But could. Since CSS is tiny, perhaps add `transition` property? But not in input. "Only change colors, shadows, radius, transitions, gradients" means we can add or change these. We can add `box-shadow`, `border-radius`, `transition` etc. But keeping selectors. We must not add `color`? It's allowed. But we need maintain original declarations text-align and font-size exactly? Those are typography/text-align; must stay. Padding maybe can stay. We can add declarations after original.

Need maybe set `.app-hero-section .badge.bg-warning { font-size: 0.85rem; ... }` but adding color will make text visible. Original badge is bootstrap bg-warning. In dark mode? Since target sidebar classic, maybe use accent. But at mobile.

Maybe there is more original CSS in file? The user only supplied this block. Need "Output rewritten CSS now". Perhaps they expect this block changed. We could only output same with maybe visual properties. Need careful.

Let's reread instructions: "Refresh the visual identity WITHOUT changing layout structure or class names." HTML fixed. "Only colors, shadows, and decorative properties may change." They list "border-radius, transitions, opacity, etc." "Output ONLY rewritten CSS, preserving ALL selectors and layout exactly". If there are no colors, you can add or adjust. They don't forbid adding properties. We can add color/background/transition to these selectors.

Need decide what properties to add: Under media query, `text-align: center` for hero column; `.badge.bg-warning` font-size 0.85rem; contact cards padding. This is mobile. We can add visual styling to these selectors only. But not necessary maybe.

Could alter `padding: var(--space-md) !important;` to `padding: calc(var(--space-md) * 0.9) !important;`? That's within ±20% but unnecessary. Need not.

Maybe "sharp-edges" variant: border-radius 0-4px, hard offset shadows 4px 4px 0 solid, strong borders 2-3px solid, snappy transitions 0.15s. We can add to contact cards.

Maybe include:
```
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    border: 2px solid #252e3a;
    border-radius: 0;
    box-shadow: 4px 4px 0 #252e3a;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
```
But transform would affect layout? It can cause visual shift but not layout maybe okay. But "transition: transform" but no transform changed. Could add. But if we add border and box-shadow to mobile contact cards, might impact width due to border-box? Box-sizing unchanged? CSS default? Could alter layout if not border-box; but likely global. To be safe, avoid adding border/box-shadow? But target says strong borders.

Original only mobile. Maybe target style not really applicable to this block. Could generate a simple "conservative refresh" with subtle color. Need satisfy "all colors replaced" but no colors. Perhaps we can add `color` and `background` to badge: `.badge.bg-warning` in Bootstrap is warning color; we can override background-color to a new functional accent, and border: 2px solid, border-radius: 0. That changes visual. For hero col, maybe add `color`? But text-align center only; adding color might override? Maybe no. For contact cards, add background-color, border, box-shadow. We need not alter padding.

Need decide if adding properties to `.app-hero-section .row .col-lg-7` that would affect visual only: color maybe. But maybe it inherits. Could add `transition`? Not needed.

Maybe we should preserve all original declarations exactly. Add new declarations after. Ensure selectors exact. The output must include media query. No markdown. Good.

Let's formulate:

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

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

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

But adding background-color to contact cards may be not desired. Could use palette: sidebar darker "#252e3a", main lighter. For mobile page, contact cards likely on white background. Need maybe `background-color: #ffffff;`. But target says main lighter perhaps `#f8fafc`. We can choose.

Need check layout: Adding border 2px solid and box-shadow could change size if box-sizing content-box. On mobile, contact card width fixed, border adds 4px total; not good. To avoid layout change, don't add border-width? We can use `outline` instead which doesn't affect layout. Target requires strong borders but layout constraint: "border-color and border-style (NOT border-width)" means they allow changing border-color/style but not width. So we should not add border-width if there wasn't one? Actually can increase? They say NOT border-width means don't change widths. If original has no border-width, adding 2px could change layout depending box-sizing. Better avoid border-width. Use `outline: 3px solid`? Outline doesn't affect layout. But they allow outline styles (color, type) not width? They list "outline styles (color, type)" not width? "outline styles (color, type)" maybe can change width? They said outline-color, maybe outline-style? Actually in table they mention "outline styles (color, type)" but "outline-color" in required? Hm. But no.

Need preserve layout: box-shadow doesn't affect layout? Actually no. border-width does. So avoid border-width. Use box-shadow to simulate borders maybe `box-shadow: 0 0 0 2px #252e3a, 4px 4px 0 #252e3a;` This simulates border without layout? Box-shadow doesn't affect layout. Good. But may not work if background overrides. Use `outline: 3px solid #252e3a` doesn't affect layout. `outline-offset` can be negative? Better not.

Alternatively set `border-color: #252e3a; border-style: solid;` but if original border width is 0, no visible border. Adding border-width would break. So no.

target "strong borders" can be simulated with box-shadow:
`box-shadow: 0 0 0 2px #252e3a, 4px 4px 0 #252e3a;`
But if element has existing box-shadow? It doesn't. Good.

Radius 0-4. Fine.
Transition 0.15s. Fine.

Need maybe change padding within ±20? Not necessary.

Would adding background-color to `.contact-channels-section article` create large dark panels? Maybe okay. But mobile section maybe card grid. We can add `background-color: #ffffff;`? If contact cards originally had backgrounds, perhaps overrides. Maybe safer not to add background-color unless original had? But visual refresh required. We can add box-shadow to cards plus no background.

But if we add hard shadow 4px 4px 0 #252e3a to card without changing background maybe okay. If card has white background, shadow visible.

What about `.app-hero-section .badge.bg-warning`: The Bootstrap class has background-color var(--bs-warning), border-radius 0.375rem; our overrides with background #e9b44c, border-radius 2px, box-shadow. If we don't add background-color, then using color maybe? We can set `accent` maybe.

Maybe use variables? Not necessary.

Need perhaps change `box-shadow` on hero column? Not.

Could add "border-color" to `.contact-channels-section article` by using box-shadow.

Need preserve `font-size`, `padding` exactly? We'll keep.

Need maybe add `outline: 3px solid #252e3a;` Let's think layout: outline doesn't affect layout. It draws outside border; if card has no padding to account, could be clipped by overflow? But okay. Use `outline: 3px solid #252e3a; outline-offset: -3px;` This makes inner outline? Actually `outline-offset` negative draws inside, doesn't affect layout? It may overlay content but okay. `outline-offset: -3px` can be clipped by parent? But okay. Maybe no.

Better to use box-shadow: `0 0 0 3px #252e3a, 4px 4px 0 #252e3a` for hard outline. The first shadow creates a border-like effect. But with rounded corners it will not follow if radius? It does follow. That's fine. It doesn't add layout. It may overlay outside beyond element's border-box, but box-shadow doesn't affect layout. Good.

Need maybe set border-radius: 4px. If background not specified, `border-radius` clips background? If no background, no visible effect except shadows? Box-shadow follows radius. Good.

Need maybe apply `.badge` similar: `box-shadow: 4px 4px 0 #252e3a; border-radius: 2px; background-color: #f4c95d;` That's clear.

Could add `color` to badge: `color: #252e3a;`. Good.

Need maybe `.app-hero-section .row .col-lg-7` add `color: #f8fafc;` but might inherit. The hero section might have dark background? Target sidebar darker, main lighter? If hero background is probably light? Existing not. Adding color could make text invisible if hero is light. Better not add color to col.

Maybe add `text-shadow: 2px 2px 0 rgba(37,46,58,0.15);` to hero col. That's visual, no layout. But if hero text already styled, maybe okay. Could be too much. We can add `color: #252e3a`? But no.

Given original has no visual properties, perhaps best to only adjust in `.badge` and contact cards, leave hero col unchanged. But then "every color replaced fresh palette" no.

Need perhaps modify padding from var(--space-md) to `calc(var(--space-md) * 0.9)`? That's not necessary.

Need ensure output "No AI-REWRITTEN comments". We'll output exactly.

But maybe they test CSS diff with some known parser. They want only visual property values changed. Adding new properties okay? They said "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." The phrase "only change colors..." not "do not add properties." But output should be rewritten CSS preserving original declarations. We can include original declarations plus visually changed ones. Good.

Need maybe avoid adding `!important` to new properties? Could add but not. The contact padding has !important. We'll not add important to other properties.

Let's decide final CSS:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 2px 2px 0 rgba(20, 28, 38, 0.12);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #252e3a;
        background-color: #f4c95d;
        border: 2px solid #252e3a;
        border-radius: 2px;
        box-shadow: 4px 4px 0 #252e3a;
        transition: background-color 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;
        border: 2px solid #252e3a;
        border-radius: 4px;
        box-shadow: 4px 4px 0 #252e3a;
        transition: box-shadow 0.15s ease, border-color 0.15s ease;
    }
}
```

But we added border: 2px solid, which may change layout. The instructions say border-width not to change. Need fix. Replace `border: 2px solid #252e3a;` with `border-color: #252e3a; border-style: solid;`? But if original border-width 0, no visible border. To avoid layout change, you can't add visible hard border. Use `box-shadow: 0 0 0 2px #252e3a, 4px 4px 0 #252e3a;`. This simulates border without layout. Let's use that. For badge, same issue. Use box-shadow 0 0 0 2px and offset. But if badge is inline-flex, box-shadow maybe clipped? No.

So:
```
.app-hero-section .badge.bg-warning {
  font-size: 0.85rem;
  color: #252e3a;
  background-color: #f4c95d;
  border-radius: 2px;
  box-shadow: 0 0 0 2px #252e3a, 4px 4px 0 #252e3a;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
```
This creates 2px border-like ring + offset shadow. The 0 0 0 2px follows border-radius. Good.

For contact:
```
.contact-channels-section article,
.contact-quick-section .contact-card {
  padding: var(--space-md) !important;
  background-color: #f8fafc;
  border-radius: 4px;
  box-shadow: 0 0 0 2px #252e3a, 4px 4px 0 #252e3a;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
```
Need maybe add `background-color: #fff`? If original content background, applying #f8fafc okay. But if card had transparent, adding background creates panel. Good.

Need maybe add hover? Cannot add selectors. Could add transitions only; no state change.

Need maybe add `.badge.bg-warning` `box-shadow: 0 0 0 2px #252e3a, 4px 4px 0 #252e3a;` with 2px ring maybe too much but target sharp edges.

Need maybe maybe "text-shadow" for hero col could be visual. Use `text-shadow: 2px 2px 0 rgba(20,28,38,0.15);` Hard offset shadow. Good.

Need output includes only CSS, no markdown. Let's produce final.

However, I need think about `@media (max-width: 575.98px)` is an @media rule, okay. The original file might have "块2/2" etc, but we only output css block. Good.

Potential issue: `box-shadow` with two parts: `0 0 0 2px #252e3