/* ============================================================
   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 output only the rewritten CSS. We have a media query block. Need to preserve selectors, layout, typography. Only visual properties can change. The original CSS has font-size in a media query, that's typography fixed, so we must not change font-size. We can change padding? It says padding, margin keep similar ±20%. Original padding: var(--space-md) !important. We can keep same or adjust slightly? Since it's a var, we could change the variable? But we don't have the root definitions. We can change padding value to something else within 20%? But we need to preserve layout. The task says "keep ALL selectors and layout exactly as-is". So we should not modify padding if it's layout. But visual identity could change colors, shadows, radius, transitions, gradients. The original CSS only has font-size and padding. No colors, shadows, radius, transitions, gradients. So we can't change anything? Wait, we can add visual properties? The instruction says "Only change colors, shadows, radius, transitions, gradients." We can add new visual properties to existing rules? Probably yes, as long as we keep selectors and layout. But the media query contains only text-align, font-size, padding. text-align is layout? Actually text-align is listed under "📐 LAYOUT" as fixed, but also typography? It says text-align, vertical-align are under layout and cannot change. So we must keep text-align: center. font-size fixed. padding is layout, keep similar. So there's nothing to change. But we are asked to refresh the visual identity. Perhaps we need to add color, background, border-radius, box-shadow, etc. to the elements? But the selectors are specific: .app-hero-section .row .col-lg-7, .app-hero-section .badge.bg-warning, .contact-channels-section article, .contact-quick-section .contact-card. We can add visual properties like background, border-radius, box-shadow, transitions, etc. However, we must be careful not to change layout. Adding padding would change layout, so we avoid. Adding background may affect visuals but not layout. Border-radius doesn't affect layout. Box-shadow no layout. Transitions no layout. So we can augment with new visual properties.

But the instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." The original CSS has no such properties, so we can add them to the existing rules. But is that allowed? The output should be a rewritten CSS, preserving all selectors and layout exactly. Adding new declarations to existing rules is okay as long as the original declarations are preserved unless they are visual properties we are allowed to change. Since none of the original declarations are visual (except maybe padding, but we preserve). So we can add new visual declarations.

Need to match target style: asymmetric-blocks and tight-rhythm variant. Compact spacing, small border-radius, subtle shadows or none, information-dense. Also bold contrasting blocks, each section different background, high contrast borders. But the selectors are within a media query max-width 575.98px (mobile). We can add backgrounds, borders, border-radius, box-shadows. But we need to be careful: .app-hero-section .row .col-lg-7 is a column in hero, likely should have text-align center already. Adding background to a column might be weird. But we can add a subtle background or border? Target style says each section different background. However we are only styling child elements, not entire sections. We can apply background to .contact-card and article. That's fine.

Let's parse 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 produce similar structure. We can add new declarations inside each rule. Also we need to adjust padding within ±20%? The original padding: var(--space-md) !important. We don't know var value. We could keep it. But to create tight-rhythm compact spacing, we could change padding to calc(var(--space-md) * 0.9) or something? But that changes layout slightly. The instruction says keep padding similar, ±20% maximum. We can change to a smaller value if we know --space-md. But we don't. Safer to keep original padding declaration unchanged. But maybe we can add padding-right/left? No, that changes layout. Better keep as is.

We can add border-radius, box-shadow, background, border, transition. Also maybe color for text? But color is visual, so we can change it. But we don't have any color originally. We can set color on .app-hero-section .badge.bg-warning? That badge likely is warning color. But we can modify its color? The original font-size is fixed. Adding color is allowed. But need to consider the class bg-warning is Bootstrap? Probably indicates yellow background. We shouldn't break the semantic. But we can refresh with new palette: high contrast borders, subtle shadows.

Let's generate a fresh CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
        padding: 12px 16px;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: #fbbf24;
        color: #1a1a2e;
        border: 1px solid #f59e0b;
        border-radius: 3px;
        box-shadow: none;
        transition: background 0.2s ease;
    }

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

But wait: We changed padding in first rule from none to 12px 16px. That is a layout change. The original .col-lg-7 had no padding in this media query; padding might come from Bootstrap grid. Adding padding could break layout. We should not add padding. We can add background, border-radius, box-shadow without affecting layout. But background on a column might be okay, but it might change spacing if it includes padding. Better not add padding. Also background could create a block visual but might extend full width. In mobile, col-lg-7 is full width maybe. Adding a background to an entire column is a visual change, allowed. But could be considered section background. Target style says each section different background, so okay.

But we must preserve original declarations exactly. We can add new properties after. Also, adding background to .badge.bg-warning: original bootstrap style is background-color: #ffc107; we can override with new color. That's a color change, allowed. But we must keep font-size unchanged. Adding transition, border, border-radius okay.

Need to ensure the output only CSS, no markdown. Also no comments like , but we can include comments? The instruction says output only rewritten CSS, no explanations, no AI-REWRITTEN comments. We can include comments if we want but better avoid.

But wait: The original CSS block is inside a media query. We need to output the entire CSS, including media query. The first character must be @. So:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: #f8fafc;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: #f59e0b;
        color: #ffffff;
        border: 1px solid #d97706;
        border-radius: 3px;
        box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-left: 3px solid #f59e0b;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
}

But we need to be careful: adding transform in transition is okay, but transform is a layout-affecting property? Actually transform can change visual, not layout flow. But we didn't add transform property, just transition timing. That's fine.

However, the target style "asymmetric-blocks" says bold contrasting blocks, each section different background. We have .app-hero-section .row .col-lg-7 background #f8fafc, badge #f59e0b, cards #ffffff. That's different. High contrast borders: we have border. Good.

But "tight-rhythm" says small border-radius 2-6px, subtle shadows or none. We used 4px and 3px, good. Shadows subtle.

But we need to ensure that we don't violate "Only change colors, shadows, radius, transitions, gradients." Adding background is a color (background-color) change, okay. Adding border-color is color, okay. Adding border-style? We add border: 1px solid #... That changes border-style from default none to solid. Is border-style allowed? The instruction says "border-color and border-style (NOT border-width)" can change. Yes, border-style can change. Border-width cannot change? It says border-color and border-style, not border-width. But "border: 1px solid #..." sets border-width to 1px, which is changing border-width from 0 to 1px. Is that allowed? Wait, the instruction lists under ✅: "border-color and border-style (NOT border-width)". So we cannot change border-width. Adding a border where there was none is technically adding border-width. That might be considered a layout change because border-width affects box size unless box-sizing: border-box. But border-width changes layout. The instruction explicitly says NOT border-width. So we should avoid changing border-width. Hmm. That means we cannot add border: 1px solid ... because that sets border-width. Instead we can use outline? Outline doesn't affect layout. But outline-color and outline-style can be changed, outline-width? Not allowed? It says outline styles (color, type) can change, but outline-width probably not. We can use box-shadow to simulate border without affecting layout: box-shadow: 0 0 0 1px #color. That's a shadow, doesn't affect layout. Good. Border-radius can be changed. Background color can be changed. So we should not add border-width of any kind. We can use box-shadow to create high-contrast boundaries.

Thus, instead of border: 1px solid, use box-shadow: inset 0 0 0 1px color, or 0 0 0 1px color. This is a shadow, allowed. And it doesn't alter box dimensions. Great.

Also adding padding is not allowed (we didn't for badge/cards). For .col-lg-7, we don't add padding.

Let's revise:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(180deg, #f8fafc, #eef2f7);
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: #f59e0b;
        color: #1e293b;
        border-radius: 3px;
        box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3), inset 0 0 0 1px rgba(217, 119, 6, 0.2);
        transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 0 0 1px #e2e8f0;
        transition: box-shadow 0.2s ease, background 0.2s ease;
    }
}

But we need to consider that .bg-warning is a Bootstrap class that sets background-color: #ffc107!important. Our background: #f59e0b will override in specificity? `.app-hero-section .badge.bg-warning` has specificity 0,3,0 vs Bootstrap .bg-warning 0,1,0, so it overrides. Good.

Now, does the original rule for .app-hero-section .row .col-lg-7 have text-align: center only. We preserved that. Good.

But adding background to .col-lg-7 might be visually bold. Is that okay? Yes.

Need to ensure no changes to layout. Box-shadow doesn't affect layout. Border-radius doesn't affect layout. Background doesn't affect layout. Transition doesn't affect layout. Padding preserved exactly. Font-size preserved exactly. text-align preserved. Good.

But wait, the instruction says "Only change colors, shadows, radius, transitions, gradients." Our changes include: background, color, box-shadow, border-radius, transition. All allowed. We also used linear-gradient, allowed.

Could we make more asymmetric? The target style says "asymmetric-blocks" but we're constrained by selectors. We can set different border-radius per card? The selector is grouped for article and card, so same style. We could use :nth-child to differentiate? But that would add selectors, not allowed. So we can't. We can set box-shadow with asymmetric inset maybe? Not needed.

We should also consider if adding `background: linear-gradient(...)` to .col-lg-7 might be too much for a hero column. Maybe use a subtle background. Since "tight-rhythm" says subtle shadows or none, our shadow is subtle. The background can be bold contrasting blocks, so a dark background? But then text may become unreadable. The original text is likely dark. We can add a light background. Better.

Maybe use two-layer box-shadow for the cards: one as border inset, one as drop shadow. That's fine.

Let's check original CSS has `!important` on padding. We keep it. Good.

We also need to output only the CSS, no markdown. Let's ensure no extra whitespace? Fine.

Let's craft final output:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: #fbbf24;
        color: #1e293b;
        border-radius: 3px;
        box-shadow: 0 1px 4px rgba(245, 158, 11, 0.35), inset 0 0 0 1px rgba(217, 119, 6, 0.25);
        transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), inset 0 0 0 1px #e2e8f0;
        transition: box-shadow 0.2s ease, background-color 0.2s ease;
    }
}

But note: The original has `padding: var(--space-md) !important;` We keep exactly. That's fine. The `transition` property includes background-color, but we didn't define property background-color? We did set `background: #ffffff` which is shorthand, so background-color is animatable. Good.

Potential issue: `.app-hero-section .badge.bg-warning` uses `.badge.bg-warning`; Bootstrap .badge has padding etc. We didn't change those. Good.

Now, is there any requirement to change the color values throughout the file? The file has no colors. We