/* ============================================================
   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 respond with rewritten CSS only. Need follow conservative mode. Need understand original CSS fragment. It's a media query max-width 575.98px with three rules. Must preserve selectors and layout. Original has no colors/shadows etc except text-align and font-size and padding. We need visually refresh? But cannot change typography? Wait allowed changes include colors/shadows/radius/transitions etc. But original mostly layout/text-align/font-size/padding. Need not change padding? "keep similar values, ±20% maximum" padding can change slightly. But target style "masonry-flow" aggressive layout? However conservative mode: HTML fixed, visual only. We must output rewritten CSS preserving selectors exactly, no layout change. Since original is just media query rules, perhaps can add visual properties within same rules? But need preserve all selectors. We can add colors, shadows, border-radius, transitions to those elements? CSS output can include same selectors with additional declarations. Need be careful "ONLY rewritten CSS, preserving ALL selectors and layout exactly." Could include only these selectors perhaps with modified values. Need change padding? "padding, margin (keep similar values, ±20% maximum)". Original .contact-channels-section article, .contact-quick-section .contact-card padding var(--space-md) !important. We could change to calc? But no need.

Need match target style: masonry-flow, Pinterest-like white cards, soft shadows on light gray bg, cards accent strip? But existing selectors: .app-hero-section .row .col-lg-7, .app-hero-section .badge.bg-warning, contact cards. This fragment likely from a larger CSS. We only output this media query? The user provided "File: assets/css/saishi.css#块2/2" and request ID, original CSS is just a small chunk. Need rewrite that chunk preserving selectors. Could add declarations but if original file's chunk doesn't include base element definitions, adding color declarations to contact cards within media query okay. Need be careful selectors preserved. Maybe also no extra selectors. Should we add properties to elements? Likely yes, because target style says visual identity refresh. But output must correspond to same CSS chunk. Could be okay to introduce color values in existing selectors.

Need decide what visual changes to make. The original has three selectors:

@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 "Refresh visual identity WITHOUT changing layout structure or class names." Since file fingerprint says #块2/2, maybe only second block of file, but need output whole media query possibly with visual additions. Need not change text-align, font-size. Need keep font-size same? Allowed typography changes prohibited: font-size unchanged. Padding can vary within ±20%. Need maybe add box-shadows, border-radius, border, transitions to contact cards? But if we add "border: 2px solid ..." to .contact-channels-section article and .contact-quick-section .contact-card, this changes box sizing? border-width affects layout, but allowed "border-color and border-style (NOT border-width)" so cannot change border-width if not originally? Original has no border. Adding border-width would change layout, so not allowed. But "Strong borders" target variant but conservative mode says not change border-width. Could use box-shadow to simulate border, or outline? Outline doesn't affect layout? Outline can be added but may overlap? It doesn't affect layout. "outline styles (color, type)" can change; can add outline? Need be careful adding outline may not break layout. But target sharp-edges says strong borders; can use box-shadow 0 0 0 2px color. But box-shadow can be changed/added, doesn't affect layout. Good.

Need maybe set background colors for hero? But these selectors. Could add `background: transparent`? Hmm.

Maybe best approach: minimally rewrite original with slightly adjusted padding and included new color/box-shadow declarations. But the user explicitly requested "same layout, fresh color palette + shadow/radius identity". The original chunk lacks color palette, so we need inject one. But if we output only these selectors, not full file, might be odd. Still we must preserve.

Let's inspect requested output: "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." Means output CSS code. We can output:

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

That's exact original, no changes. Not acceptable.

Need add visual values. But maybe because only visual properties allowed, adding them to selectors is okay. Need ensure not changing font-size or text-align. We can leave those unchanged and add colors/shadows perhaps.

Potential new 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;
        background-color: #ffffff;
        box-shadow: 4px 4px 0 0 #e5e0d5;
        border-radius: 2px;
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }
}

But changing transform is a layout/visual property? transform not listed forbidden, but can alter visual layout, maybe not. Could add `transition` allowed. But "transform" not in allowed? The allowed list didn't include transform, but also didn't explicitly forbid? It's likely visual. But we should avoid adding transform to be safe. Could include `transition: box-shadow 0.15s ease, background-color 0.15s ease;`. Good.

However target "sharp-edges" says hard offset shadows, small radius, strong borders. Use box-shadow `4px 4px 0px #d4cfc4` and maybe border? Can't set border-width. Could simulate with `box-shadow: 0 0 0 2px #2a2a2a, 4px 4px 0 2px #d4cfc4;` Wait box-shadow spread creates "border" but maybe too much. Since no border-width change allowed, we can add `outline: 2px solid #e5e0d5;` but adding outline does not layout. However outline may not show on all browsers? Fine. But target says strong borders, so perhaps `outline: 2px solid #d8d2c8; outline-offset: -2px;` Doesn't affect layout. But adding outline inside same element might be okay.

Need maybe add `border-radius: 4px` (allowed). Original no border-radius; adding is visual. Need within 0-4px. Good. Add transition 0.15s.

But perhaps we should also modify .app-hero-section .badge.bg-warning to add colors/shadows? It currently just font-size. We can add `background-color: #f5c542; color: #2b2b2b; box-shadow: 3px 3px 0 0 #d9a514; border-radius: 2px;` But if the badge originally has `.bg-warning` class, adding background-color could override? But in media query, using class `.badge.bg-warning` same specificity as Bootstrap `.bg-warning`, later in file maybe not. But output should remain chunk; if there are later rules in original file? Since chunk 2 maybe only that. Need avoid messing with background-color? But target visual refresh can set it.

Need think about "color palette: Pinterest-like: white cards, soft shadows on light gray bg; Each card may have its own accent strip." This suggests maybe add background-color to cards and shadows. But "accent strip" would require pseudo-elements/selectors not present. Cannot add selectors. Could use `border-left`? But border-left width would affect layout? Could use box-shadow inset to create left strip: `box-shadow: inset 4px 0 0 #e85d4f, 4px 4px 0 0 #d6d0c6;` Inset box-shadow doesn't affect layout. Nice. So card gets accent strip via inset shadow. Need maybe use `background-color: #ffffff` and `box-shadow: inset 3px 0 0 0 #e85d4f, 4px 4px 0 0 #d6d0c6;` This is visual, no layout.

Need maintain same padding? `var(--space-md)` maybe not known; okay. We can adjust within ±20% but if using CSS variable, no need. Could change to `calc(var(--space-md) * 0.9)`? Not necessary.

Need preserve `!important`? Yes, keep.

Need maybe include `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` plus visual declarations. That's likely good.

Need consider `@media` conditions unchanged. Good.

Potential output:

@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;
        background-color: #f7d154;
        color: #2c2820;
        box-shadow: 3px 3px 0 0 #e0b23c;
        border-radius: 3px;
        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-color: #ffffff;
        border-radius: 3px;
        box-shadow: inset 3px 0 0 0 #e85d4f, 4px 4px 0 0 rgba(60, 50, 40, 0.12);
        transition: box-shadow 0.15s ease, background-color 0.15s ease;
    }
}

But "soft shadows on light gray bg" maybe use rgba shadow rather than hard offset. Target effect variant says "Hard offset shadows: 4px 4px 0px solid color", so box-shadow should be hard. Use `4px 4px 0 0 #d9d2c5` maybe. Need "Pinterest-like: white cards, soft shadows on light gray bg" conflicting with sharp-edges; but variant overrides? The target style says masonry-flow, palette Pinterest-like, effect variant sharp-edges. We can do hard offset shadows in warm gray, and white cards. Good.

Need maybe include `outline` strong border? Let's think if adding `outline` might be too much. Could use box-shadow `0 0 0 2px #d9d2c5, 4px 4px 0 2px #b8b0a2` to emulate border and hard offset. But this changes shadow only. Maybe better.

For cards: `box-shadow: 0 0 0 2px #d9d2c5, 4px 4px 0 2px #bfb6a8, inset 3px 0 0 0 #e85d4f;` This is a strong border and hard offset. However multiple box-shadow layers are okay. But if outline? Use box-shadow border simulation doesn't affect layout. Need ensure there's no overflow? box-shadow doesn't affect layout.

Need card background white, contact channels maybe article already has background? Not sure. Setting white may change. But target says white cards. Good.

Need `.app-hero-section .badge.bg-warning` if we add `background-color`, might override Bootstrap's `.bg-warning` if same specificity and this media query comes after? Already present in original's parent file perhaps order. Since we're outputting the chunk, okay. But we could avoid changing background-color because tag is `.bg-warning`; but target palette wants fresh colors. Could set it to `#f5b841` maybe. However `.bg-warning` class in Bootstrap is `#ffc107` by default. Setting to `#f0b429` within media query is okay.

Need maybe add `text-shadow`? No need.

Need maybe change `.app-hero-section .row .col-lg-7` with color? Could set `color: #3b3530`? But text-align maybe. Since bigger file likely has color. But adding color to hero col might affect. We can add to match palette. But maybe this is unnecessary and can cause unwanted inheritance. Yet "all colors" should be changed? Original has no colors. Could add `color: #3b3530;` to hero text. Should we? Might be okay.

Need decide if output should be exactly the same selector count. It can include extra properties. Since no markdown.

Let's parse original with exact indentation. We should preserve class names, media query, punctuation.

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 likely with same selectors, maybe properties reordered. We can add visual props after existing ones. Need maybe keep padding first? Fine.

Need avoid "AI-REWRITTEN" comments. No markdown fences. First char media.

Potential output:

@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;
        background-color: #f2c14e;
        color: #2d2822;
        border-radius: 3px;
        box-shadow: 3px 3px 0 0 #d9a520;
        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-color: #ffffff;
        border-radius: 3px;
        box-shadow: 0 0 0 2px #d9d2c8, 4px 4px 0 2px #c0b7a9, inset 4px 0 0 0 #e05252;
        transition: box-shadow 0.15s ease, background-color 0.15s ease;
    }
}

Need verify padding unchanged. Yes.

But should we change border-radius of badge and cards to 0-4px. Good. Use transition 0.15s.

Need perhaps include "outline: none"? Not needed.

Need perhaps adjust padding slightly within ±20%? Since no values, unchanged.

Need maybe include `accent-color`? Not relevant.

Need consider @media breakpoint remains.

Let's think if adding `background-color: #ffffff` to `.contact-channels-section article` might override an existing background-color with higher specificity? The selector `.contact-channels-section article` specificity: one class + element = 0,1,1. If original has `.contact-channels-section article` maybe same. Fine. `.contact-quick-section .contact-card` specificity 0,2,0. Fine.

Need perhaps if contact-card itself has padding `var(--space-md)` and our box-shadow border simulation around it; okay.

Need maybe if `border-radius` creates clipping? Not if no border. But background white with box-shadow.

Should we add `background-color: #f7f5f2` to root? Can't add selectors. Maybe no.

Need maybe output with only given selectors; no extra.

Let's ensure "same layout" not impacted by transition? no.

Potential issue: `box-shadow` with two outer shadows and an inset is visual but not "soft shadows" maybe okay. Could use hard offset plus border simulation. Target variant says hard offset shadows, sharp edges. Good.

Need maybe include `border`? Cannot change border-width but maybe original had border? no. So no border. box-shadow border simulation is good but maybe if spreading, it will render as a border around element but doesn't take up space. That can overlap nearby content? Box-shadow does not affect layout but can visually overlay adjacent elements. However offset hard shadow maybe overlay on adjacent cards; in masonry-flow with gap 16-24px, 4px offset likely fine.

Need maybe use `outline` instead of `box-shadow` border. But box-shadow easier.

Let's think if `.app-hero-section .badge.bg-warning` original `font-size: 0.85rem`; adding color and background might make it not inherit warning color. Fine.

Need maybe include `box-shadow` on hero badge to match sharp edges. Good.

Need maybe add `border-radius: 0`? Since target sharp-edges small or zero border radius. We set 3px. Good.

Need maybe add transition on `box-shadow, background-color` only. Good.

Need maybe use `-webkit-`? no.

Need decide exact color values. Need create coherent palette. Let's select:

- Light gray background? Since we cannot set body, but contact cards can be white with shadow. Could also set `.app-hero-section .badge.bg-warning` to `#f5c84b` (w