/* ============================================================
   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 rewrite CSS visually, conservative mode. Need output only CSS. Need adhere target style horizontal-strips? This file is only media query with three rules. Need refresh visual identity without changing selectors/layout. Only colors, shadows, radius, transitions, gradients. Need maybe add transitions? But no layout changes. Need preserve selectors exactly.

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

We can change text-align? No, text-align is typography/layout? Actually text-align is allowed? It says typography fixed includes text-align, vertical-align. So keep text-align: center. font-size fixed. padding fixed? padding can change within ±20%. But original uses var(--space-md). We could change value by overriding --space-md? But that's custom property value, allowed. However var(--space-md) is used; if we redefine --space-md in media? But that might affect other things. Better keep padding value? Actually allowed padding within 20%. We can replace padding: var(--space-md) !important with padding: calc(var(--space-md) * 1.1) !important? But that changes padding slightly. But maybe no need. The task says only colors, shadows, radius, transitions, gradients. padding not allowed except similar. But we can leave padding as-is? But need output something. We can add color, background, border-radius, box-shadow, transition to these elements. But must be "visual identity refresh". Need avoid layout changes. Could set color, background, border-radius, box-shadow, maybe backdrop-filter? But careful with classes.

Need consider HTML fixed. The selectors given are for elements in mobile. We can add visual properties only. For `col-lg-7` maybe add color? But it's a column; maybe no.

Need "horizontal-strips" target style? But this file only media query. We can apply per-strip backgrounds? Need not conflict with existing. The media query is inside original file? This file is "块2/2" maybe part of larger file. We need rewrite whole file (the block). We should output exactly same selectors and declarations? We can change values. But "Only change colors, shadows, radius, transitions, gradients." We can add declarations that don't affect layout. However if we add `background` etc, fine.

Need perhaps reinterpret: The original CSS has only text-align, font-size, padding. To refresh visually, we can add `color`, `background`, `border-radius`, `box-shadow`, `transition` to each selector. But adding padding? Keep same padding. Maybe change padding to slightly different given target "tight-rhythm" compact spacing; original padding var(--space-md). We can adjust by using `padding: calc(var(--space-md) * 0.9) !important;` within ±20%. But is that "visual" or padding? It's layout but allowed within ±20%. The instructions: "width, height, padding, margin (keep similar values, ±20% maximum)" So we can change within ±20%. But task says only colors, shadows, radius, transitions, gradients. The list of "must change" doesn't include padding. But "never change" includes padding within similar. To be safe, keep padding declaration exactly? Yet that's not visual identity. Could maybe change `var(--space-md)` to `var(--space-sm)`? That could be less. But if --space-sm defined maybe. Need not.

Maybe the simplest: Output same CSS, but augment with new visual declarations. Need ensure "refresh visual identity" enough.

Let's parse request: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." The original CSS doesn't have colors/shadows/radius/transitions/gradients. Therefore to satisfy, we must add them? "Only change" implies can change these properties, but there are none existing. We can add them. Need ensure no layout properties altered. So we'll add properties to existing rules. We can also adjust text-align, font-size? Those are not in allowed change list, so keep. Padding: keep same? But maybe it's a property not allowed to change except within ±20%. We can leave as is. But maybe we can change `padding: var(--space-md) !important` to `padding: calc(var(--space-md) + 0.125rem) !important`? That's changing padding but okay within 20%. But not necessary. Better keep original padding to avoid complexity.

Need use horizontal-strips? This block has three selectors. Maybe target style "horizontal-strips" means each section should have alternating backgrounds? In mobile, maybe apply background and color. But `.app-hero-section` is a hero section. We can add `background`? But maybe not appropriate to selector because it's a column. We can add `border-radius`, `box-shadow` to contact cards? Need not break.

Need maybe create "tight-rhythm": small border-radius 2-6px, subtle shadows or none, information-dense. So use border-radius: 4px; box-shadow: none? Or subtle. For `.app-hero-section .badge.bg-warning`, maybe use `border-radius: 4px` etc. For contact cards, use `border-radius: 4px; box-shadow: 0 1px 2px rgba(...)`.

Need ensure selectors exactly. Let's produce:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #25314c;
        background: linear-gradient(180deg, #fdfcf7 0%, #f8f6f0 100%);
        border-radius: 6px;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #1f2937;
        background-color: #f5c451;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(245, 196, 81, 0.35);
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

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

But is adding background to col-lg-7 a layout change? No. But maybe could affect layout? background no. Border-radius on column might show weird if no background? It's okay. But need be careful `.col-lg-7` is flex item; adding box-shadow no. But target horizontal strips maybe not.

However, the instruction "Only change colors, shadows, radius, transitions, gradients." We are adding properties. We're not changing existing text-align/font-size/padding. Good.

Need consider we should not add `background` to `.col-lg-7` because it may not have background. But okay.

Should we change color values? Yes.

Need maybe incorporate horizontal-strips? Perhaps use alternating backgrounds: white/cream/dark. Our choices: hero col maybe cream gradient, badge warning, cards white. That's consistent.

Need maybe use `background` not `background-color` for gradient. For `.badge.bg-warning`, bg-warning class likely already has background color. Our `background-color` overrides. Good.

Need maybe add `outline`? Not necessary.

Need perhaps add `accent-color`, `caret-color`? Not relevant.

Need maybe use `filter`? Not necessary.

Need perhaps change `border-radius` for `.app-hero-section .badge.bg-warning` to `2px` because tight-rhythm. We'll use 4px.

Need maybe use `box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06)` — subtle. Good.

Need ensure no markdown. Output only CSS.

But wait: The task says "File: assets/css/saishi.css#块2/2" and "Original CSS" only a media query. There may be preceding block not included. We should not include anything else. Output just the rewritten CSS for that block. Need preserve exact media query.

Potential concern: Adding `transition: background-color 0.2s ease, box-shadow 0.2s ease;` to multiple elements. Does this affect layout? No. But perhaps transition on `.contact-channels-section article` may cause hover transitions; fine.

Need maybe add hover? No, selectors preserved; we cannot add new pseudo-classes? The instructions say pseudo-classes are selectors and cannot change, but can add new rules? "Selector lists (commas)"—you can't change selector lists, but can you add new selector? The task says "Keep ALL selectors and layout exactly as-is." Probably we should not add new selectors. So no `:hover` rules. We can add properties in existing rules only. Good.

Need perhaps consider `text-align: center;` is allowed to keep, no change.

Could we change `padding: var(--space-md) !important;` to `padding: calc(var(--space-md) - 0.125rem) !important;`? That is within ±20% and satisfies "tight-rhythm" compact. But since instruction says only visual properties, maybe not. However original "TARGET STYLE: horizontal-strips" says each strip with distinct padding 60-100px vertical but variant "tight-rhythm" says compact spacing 8-16px. The media query is mobile; original uses --space-md. Could adjust padding to something smaller? But changing padding may alter layout but within ±20%. Yet the request says "layout structure or class names" never change; padding is part of layout but "keep similar values, ±20% maximum." To create tight-rhythm, we might reduce by 20%: `padding: calc(var(--space-md) * 0.8) !important;` That is allowed. But "Only change colors, shadows, radius, transitions, gradients" conflicts with changing padding. However "width, height, padding, margin (keep similar values, ±20% maximum)" suggests we can. But the task specifically says "Only change colors, shadows, radius, transitions, gradients." I'd rather not change padding to avoid violating explicit "only". Let's see user instructions: "✅ YOU MUST CHANGE (visual identity only): ...", "📐 LAYOUT ... padding, margin (keep similar values, ±20% maximum)" This is in "NEVER CHANGE" but with "keep similar" means not changing or within 20%. Since "MUST CHANGE" doesn't include padding, but "NEVER CHANGE" says keep similar. So we can either leave or minor tweak. I'd leave to be safe.

Need maybe produce output as "only CSS", no explanations. We can do.

Need double-check selectors exactly:
- `.app-hero-section .row .col-lg-7`
- `.app-hero-section .badge.bg-warning`
- `.contact-channels-section article,
    .contact-quick-section .contact-card`

Preserve line breaks? Yes.

Need maybe add `background: #fff` to `.contact-channels-section article` and `.contact-quick-section .contact-card`. But what if article already has background from earlier? Our override may be okay.

Need perhaps add `border: 1px solid rgba(...)`. Is border-color allowed. But border-width would be an issue? Adding border creates width? border-width default medium, which is layout change. We must not change border-width. So avoid adding `border` unless explicitly set `border-width: 0`? But adding `border: 1px solid` changes layout (box sizing maybe). Not allowed. So don't add border. Could add `outline`? outline doesn't affect layout. But not necessary.

Need perhaps add `backdrop-filter`? Could change visual but maybe requires background. But no.

Need perhaps add `transform`? Not allowed. No.

Need perhaps add `opacity`? Allowed but could affect readability. Not needed.

Need perhaps use `filter: drop-shadow(...)`. That is visual and no layout. Could use for cards. But box-shadow fine.

Need perhaps add `border-radius: 6px` to column and cards. Border-radius doesn't affect layout unless background images. Good.

Need perhaps ensure `box-shadow` no effect on layout. Good.

Potential issue: `transition` is allowed. We can add `transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-radius 0.2s ease;` Border-radius transitions may be okay. But not necessary.

Need perhaps use `background: linear-gradient` for `.col-lg-7` to create horizontal strip? A column with gradient. But maybe `.col-lg-7` is inside a row; background could create colored block. Fine.

Need maybe target style "horizontal-strips" alternating backgrounds: Maybe we should assign different backgrounds per strip: hero column cream, badge dark? But badge is warning. Contact cards white. This is enough.

Need perhaps include `color` for `.contact-channels-section article`? Could set `color: #1f2937` to improve contrast. But no need. However added background white may make text default black; okay.

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

Let's craft final output. Should we include `background-color` declaration for `.app-hero-section .badge.bg-warning`? Existing `.bg-warning` likely sets background-color. We can override with `background-color: #f5c451;`. But to avoid conflict with Bootstrap's `.bg-warning` important? We can set `background-color: #f5c451 !important;`? The original rule has no important except padding. Adding important might be needed. But `!important` after property is okay. Need preserve? The instruction "Only change colors, shadows, radius, transitions, gradients" includes background-color. We can add `!important` but that changes property priority, not layout. It's okay. But maybe not needed. If Bootstrap's `.bg-warning` is `background-color: #ffc107 !important`, then ours without !important won't override. We might need `!important` to refresh. The original class `.bg-warning` likely from Bootstrap has `background-color: rgba(255,193,7,...) !important`? Actually Bootstrap's `.bg-warning` uses CSS variables: `--bs-warning-bg: #ffc107; background-color: var(--bs-warning-bg) !important;` So to override, we need `background-color: #f5c451 !important;`. Since we're allowed to add `!important`? It changes specificity but not layout. Probably okay. We'll include `!important` for background-color on badge to ensure override. But is that allowed? The instruction "Only change colors" — yes, color value can include important. But it might be considered a "declaration" not selector. Fine.

Similarly for `.contact-channels-section article` and `.contact-quick-section .contact-card`, they may have default backgrounds. Add `background-color: #ffffff;` maybe no important needed. But if existing styles have higher specificity, maybe need important. But not necessarily. Could add `!important` to guarantee. But adding `!important` to padding is already there. In CSS, important can override. Should be okay. But perhaps `!important` is not a visual property; it's a flag. We can use.

Need perhaps use CSS custom properties? We could modify `--space-md`? No.

Maybe better to use `background: #fdfcf7;` for hero column, `background-color: #f5c451;` for badge. I'll decide.

Let's write final.

Potential problem: The original media query has `@media (max-width: 575.98px) { ... }`. We need output exactly. We can use 2-space indent? Fine.

Let's produce:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #243b53;
        background: linear-gradient(180deg, #fffdf5 0%, #f5f1e6 100%);
        border-radius: 6px;
        transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #212529;
        background-color: #f5c451 !important;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(245, 196, 81, 0.35);
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

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

Need maybe ensure property order? Doesn't matter.

Could `background: linear-gradient(...)` on `col-lg-7` conflict with any background-image? No, overrides maybe. But perhaps not desired. It's a visual refresh. Fine.

Need perhaps use `background-color: #fdfcf7` rather than gradient. Horizontal strips style might use solid alternating backgrounds. A gradient is okay. Maybe to satisfy "gradient colors and stops" we used gradient. Good.

Need perhaps add `box-shadow` to hero column?