/* ============================================================
   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 rewritten CSS only. Need inspect original CSS: only media query with text-align, font-size, padding. No colors/shadows/radius etc. Need preserve selectors/layout exactly, can change colors etc? There are no colors. Need "refresh visual identity" without changing layout. But maybe must keep same selectors and values? Since only properties listed are typography/layout? font-size is typography fixed? We shouldn't change font-size. text-align fixed. padding is layout but allowed ±20% maybe need maybe keep. But task says only colors, shadows, radius, transitions, gradients. There are no such properties. We can add new visual properties? Selectors fixed. Need output rewriting CSS with same selectors, same layout properties exactly? It says "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Since there are no visual props to change, we should output same CSS. We cannot add arbitrary props because selectors same but we can add? It says HTML fixed, visual changes only. We can add box-shadow, background etc to these elements? But original didn't have, but can we add visual properties while retaining values? Need cautious. The target style: asymmetric-blocks, tight-rhythm. This is a media query for small screens. We can introduce visual declarations like background, box-shadow, border-radius, transition etc without changing layout. But "Refresh this CSS visually" - no colors present so need add color values using same properties maybe. However output only CSS, include same rules. But if we add background/box-shadow to all elements maybe okay? Need not change typography/layout. We can maybe add background colors, border-radius, box-shadow to the specified selectors? Need preserve selectors exactly. But adding properties to `.badge.bg-warning` etc. Some selectors apply to elements. Need maybe use CSS custom properties? The original media query only. We can rewrite with same media query and same selectors, adding visual declarations that fit tight-rhythm and asymmetric-blocks? Need maybe not alter colors in original because none. Let's think.

Need output only CSS, no markdown. Need preserve media query and selectors. We can include all three original rules with original declarations then add visual declarations. But be careful: text-align may be changed? No, layout/typography fixed. We keep. font-size keep. padding keep exactly maybe. Add color? `.app-hero-section .row .col-lg-7` text center; adding maybe no visual identity? Could set `color: #...`? But this would affect text color. That's visual allowed. Could add `background`? But on column may alter layout? background is visual, allowed. But doing so may need padding? no. Effective fresh look.

Need target "asymmetric-blocks" + "tight-rhythm": small border-radius 2-6px, compact padding, subtle shadows. In media query small screens. We can set `.app-hero-section .row .col-lg-7 { text-align: center; padding: ... }` but padding layout fixed? Could change within ±20% of original? Original no padding. Could add padding but changes layout. Better avoid adding layout. Use only background, border-radius, box-shadow? But adding background on col-lg-7 full width okay. But with no padding, background edge-to-edge. Need maybe no.

Maybe the user expects preserving CSS exactly if no color values. But instruction says "Only change colors, shadows..." There are none, so output same CSS. But task says refresh visual identity; to refresh need introduce something. The file fingerprint suggests only this fragment. It may be a targeted challenge: Given CSS with no colors, expected to create a refreshed version adding visual properties while keeping layout. Need likely AI should add a background/color theme within allowed properties.

Let's parse 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;
    }
}

It only handles mobile. We can add CSS variables? Maybe within media query, define `--color-...`? But selectors? "CSS custom properties values" allowed to change. But no custom properties. We can add a local custom property scope? Different selector? Not necessary.

Need perhaps add `.app-hero-section .row .col-lg-7: ...` with `background` color? But on centered text, perhaps add `color`? There is no existing color, but we can add.

What does "background of different sections" mean? This media query may influence blocks. Could use background on article/contact-card to give blocks. Since target style "Bold contrasting blocks: each section different background" maybe we can set background on those contact article/card and border. In small screens they become blocks. But because original only has padding for contact cards, we can add background/border/shadow to those. For badge, add background? But `.bg-warning` already has background utility class likely; setting background-color overrides? We can perhaps set `background-color` on badge to a new color; but if class `bg-warning` sets background, both same specificity? `.app-hero-section .badge.bg-warning` has higher specificity so can override. Need visual identity.

Need be careful with "Only change colors, shadows, radius, transitions, gradients." Adding color is allowed. Better not add border-radius if original didn't? Yes allowed. Add box-shadow. Add transition maybe. Keep original declarations.

Need maybe set border radius on elements. We can update with "tight-rhythm": 4px radius, subtle shadow. But adding box-shadow may be too much in dense view. "Subtle shadows or none." We can set `box-shadow: 0 1px 2px rgba...`? "Subtle shadows".

Need "asymmetric-blocks" but small screen. Could use bold contrast blocks: one background for col, one for badge, one for cards. Need maybe background-color values.

Let's choose a fresh palette:

- Ink/neutral: background `#f8fafc`, foreground `#0f172a`
- Primary block: `#0f172a` text white? But `.app-hero-section .row .col-lg-7` background as block maybe dark slate; text-align center. It may contain text; set `color: #f8fafc`.
- Badge warning: maybe `#f59e0b`? But bg-warning is yellow. Could use high contrast border. Maybe `background-color: #fbbf24; color: #78350f; box-shadow: 0 1px 0 #b45309;`
- Contact cards: alternating backgrounds? Could set `background-color: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 1px 2px rgba(15,23,42,0.06); border-radius: 4px;` But original cards might already have shadow/border. We can still add. Maybe high-contrast border. Since target style high-contrast borders. Use border-color. Need selectors exactly.

However, "Only change colors, shadows, radius, transitions, gradients" could mean add or modify those. Adding box-shadow may influence layout? `box-sizing` fixed? box-shadow doesn't affect layout. border does not? border adds to element dimensions unless box-sizing border-box. The HTML likely has border-box; but adding border changes width. Better use `outline`? But outline doesn't affect layout. But "outline" allowed. Use `box-shadow: inset 0 0 0 1px ...` to simulate border without layout? That's a shadow, allowed. But on background contrast, could use an "inset ring" rather than border. Use `box-shadow: 0 1px 2px rgba(...), inset 0 0 0 1px rgba(...)`. This avoids layout. Good. For cards, use box-shadow ring.

Need perhaps use `background` and `color` not layout.

Maybe also include transitions on hover? But selectors no hover. We could add `transition: background-color .2s ease, box-shadow .2s ease;` No layout. But not necessary. Tight rhythm: transition duration 150ms, ease.

Need maybe use `background` for different blocks:
- `.app-hero-section .row .col-lg-7` dark `#111827`, color `#f9fafb`, `box-shadow: 0 10px 15px -12px rgba(0,0,0,0.4);` But this adds heavy block. `border-radius: 4px` maybe if column has bg. But since mobile full width, rounded corners okay. But can add box-shadow with no margin? Might touch edges. Maybe not.

Need make "Bold contrasting blocks" maybe use border-left? Could add `border-left: 4px solid #f59e0b` but border affects layout. Use box-shadow inset: `inset 4px 0 0 #f59e0b`. But line-height? no.

Original CSS fragment is only for mobile. We can rewrite as:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background-color: #0f172a;
        color: #f8fafc;
        box-shadow: inset 0 0 0 1px #1e293b, 0 6px 12px -8px rgba(15, 23, 42, 0.5);
        border-radius: 4px;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #fbbf24;
        color: #451a03;
        box-shadow: inset 0 -1px 0 rgba(120, 53, 15, 0.25);
        border-radius: 4px;
    }

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

But is this "visual identity" enough? Could use differing backgrounds for article and contact-card? Selectors combined, cannot differentiate. Could maybe separate them but that changes selector list? We must preserve selector list exactly? It says selector lists (commas) preserved. We cannot split? We could duplicate selector? But "Every selector ... preserved" means likely keep combined selector as is. We can use `:nth-child`? Not allowed because adding selector. Better not. Use same.

Need maybe preserve `padding: var(--space-md) !important;` exactly. Add no other layout. Good.

But does adding `background-color: #f8fafc` to these cards override their original? Maybe no original background. Fine.

Need maybe `text-align: center`; adding background and color to hero col. But hero section row col maybe a column that spans 7 of 12 at large, but at max-width 575 it's full width. Dark background with no padding might look blocky. Maybe okay.

Need maybe `font-size: 0.85rem` unchanged. Need no `font-size` changes. Good.

Need maybe "asymmetric-blocks" not possible due to no grid properties. Could add background only.

Could use `outline` instead of box-shadow for high contrast border. For hero: `outline: 2px solid #f59e0b; outline-offset: -2px` but outline doesn't affect layout. But adding outline to entire column maybe too strong. Use box-shadow fine.

Need perhaps use CSS variables: define `--space-md`? Don't touch.

Need maybe include no markdown. Need output exactly.

But before final, let's ensure no layout properties changed. We didn't change text-align, font-size, padding. Good.

Need maybe use `color` property in `.contact-channels-section` and `.contact-card`; but if these cards have their own text colors, this cascade might be overwritten by descendants. It's okay. Could be considered content color, allowed.

Need maybe add `background` with `linear-gradient`? Gradients allowed. Maybe use gradient on col to create visual identity. Example:
`background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);`
This is gradient. Good. Use `background-color` not necessary. Could use `background: linear-gradient(...)`. That changes visual. For hero dark block, gradient.

For cards, maybe `background: #fff` or light gray. But if cards already white, need contrast. On gray page background, white blocks with subtle shadow. Use `background: #ffffff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);`

Could target "tight rhythm": `border-radius: 4px`; `box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);`

Maybe for badge:
`background-color: #fbbf24; color: #451a03; box-shadow: 0 1px 0 rgba(120, 53, 15, 0.2); border-radius: 3px;`

Need maybe all declarations stable.

Should we include `transition` property? It is visual. Add `transition: background-color .15s ease, box-shadow .15s ease, color .15s ease;` to cards and col? But color/background hover changes not defined. Still okay. Might be generated but no harm.

Need maybe "No AI-REWRITTEN comments". Good.

Need self-check selector preservation:
- `@media (max-width: 575.98px)` preserved.
- Block1 `.app-hero-section .row .col-lg-7` preserved.
- Block2 `.app-hero-section .badge.bg-warning` preserved.
- Block3 selector list with comma: `.contact-channels-section article, .contact-quick-section .contact-card` preserved. Ensure line break? yes.

Potential issue: Adding `background-color` to `.badge.bg-warning` overrides `.bg-warning` utility, but allowed. However `.bg-warning` may be Bootstrap utility with `background-color: var(--bs-warning) !important;`? Actually Bootstrap `.bg-warning` has `--bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;` It is important. Our selector no `!important`, so Bootstrap's utility with `!important` will win due to important despite lower specificity? CSS important overrides normal declarations regardless of specificity. So adding `background-color` without `!important` won't override. Need add `!important` to background-color? But original CSS didn't have important except padding. The target is to modify. We can use `background-color: ... !important;` if adding to badge to override utility. But instruction "Only change colors..." and `!important` not layout. It is okay. But should we preserve "padding important" only? Could add important. No need? Actually `.badge.bg-warning` is Bootstrap utility; we need override. Add `background-color: #fbbf24 !important;` But if `bg-warning` is yellow, changing to another yellow might not matter. Could choose fresh contrasting color. Let's choose `#f59e0b`? Bootstrap warning is #ffc107. We can change to amber #fbbf24. Since override, use `!important`. But should we? It might be okay.
- For color property, no likely important.

Could also use `filter` to change hue, e.g., `filter: hue-rotate(10deg) saturate(1.2);` But overrides? no. Easier background.

Need think about `background` vs `background-color` on hero. If existing classes have background, maybe our selector might not override due to specificity? `.app-hero-section .row .col-lg-7` specificity is 3 classes (0,3,0), likely enough. But if Bootstrap has no background. Good.

Adding `color` on hero column maybe if existing inherited color? fine.

Need maybe not add border-radius to hero column because mobile full-bleed design may not want corners. But style "small border-radius 2-6px" applies. Use 4px.

Need maybe add `box-shadow` to hero column could make large block visible, but no margin. Use `box-shadow: 0 8px 16px -12px rgba(15, 23, 42, 0.4);` Subtle enough.

Could use "asymmetric-blocks" "Bold contrasting blocks: each section different background" perhaps:
- hero col: dark gradient background
- badge: amber background
- cards: light background with high contrast border ring.
Need maybe add background on `.contact-channels-section article` and `.contact-quick-section .contact-card` as same; maybe need different between article and contact-card? Can't, combined selector. Could perhaps use `:where`? Not allowed selectors change. But maybe selector list can be split into two separate rules with extra properties? If we split, selector list not preserved. But requirement says selector lists (commas) preserved? It says "Selector lists (commas)" in NEVER CHANGE, so yes can't split.

Could maybe use `background-color` with gradient different? Not per element. Use same.

Need maybe add `border-color` with `border: 0`? No.

Need maybe choose palette with high contrast borders. `box-shadow: inset 0 0 0 2px #0f172a` maybe. But "tight rhythm" subtle shadows. Maybe use `box-shadow: inset 0 0 0 1px #cbd5e1, 0 1px 2px rgba(15,23,42,0.08);