/* ============================================================
   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 rewrite CSS given with visual changes only. The original CSS is a small media query block. We need to preserve selectors and layout, but change colors, shadows, radius, transitions, gradients. However the original CSS has no colors or shadows; it has font-size, padding, text-align. Those are typography/layout respectively. But we can't change font-size, padding (within ±20%), text-align. We need to inject visual changes? But we must keep selectors exactly. The original only contains a media query with three rules. We need to output CSS preserving selectors and all properties exactly? Actually we can add new visual properties? The task says "Only change colors, shadows, radius, transitions, gradients." But we cannot change font-size, padding, text-align. The original CSS doesn't have those properties to change. We might add new visual declarations within existing rules? But that would change the CSS from original, but allowed as long as layout unchanged. We can add box-shadow, border-radius, background, etc. However the original rules are about hero section badge and contact cards. We can add colors/shadows/radius to those elements within the media query. But we must preserve existing declarations? The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." That implies we can modify values of those properties if present, and perhaps add new ones. But we should not alter font-size, padding, text-align values. We can keep them exactly.

We need to output "the rewritten CSS now". So we need to produce a CSS file that includes the original media query and possibly additional visual declarations. But careful: We cannot add new selectors? The instruction says keep all selectors exactly. Adding new declarations under existing selectors is fine. But we might not need to add anything; the original CSS has no visual properties. To fulfill "change colors, shadows, radius, transitions, gradients", we should add some visual enhancements to these elements. But is that allowed? The HTML is fixed, and adding new visual properties doesn't break layout. It's within scope.

However, the output must be only the rewritten CSS. It should be a valid CSS file. We can include the original three rules plus add visual declarations to each. But note: The media query wrapper stays. Also we might add a root or other selectors? No, only original selectors.

Let's parse 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 need to preserve these. Add visual changes:

- For .app-hero-section .row .col-lg-7: maybe add background gradient? But that could affect layout? background doesn't. But adding background to a column could be visual. But we want a dense-dashboard style. Could add subtle background color? But careful: The selector targets a column with text-align center. Adding background might be okay but maybe not desired. Better to add a border-radius and box-shadow? However we shouldn't change layout. Adding box-shadow to a col might create visual card effect, but it's a whole column. Might be too much. Instead we can add transitions? Not meaningful.

- For .app-hero-section .badge.bg-warning: The class includes bg-warning (Bootstrap). We can override background-color to new accent blue? But bg-warning is a utility; changing it to blue would be a color change. We can add background-color: #3b82f6; color: #fff; border-radius: 4px; box-shadow: 0 1px 2px rgba(30,41,59,.2). But note: The selector has .badge.bg-warning, and normally Bootstrap bg-warning gives yellow. Changing to blue is fine. Also font-size unchanged.

- For .contact-channels-section article, .contact-quick-section .contact-card: Add background, border-radius, box-shadow, maybe transition. But padding already set via var(--space-md)!important. We can add background-color, border-radius, box-shadow, transition.

But we must be mindful: The media query is max-width 575.98px. Adding shadows, background colors on cards could make a dense dashboard feel.

However, the "target style" is dense-dashboard with cool grays #1e293b, #334155, accent blue #3b82f6, white cards on slate background. On small screens, maybe we want cards with subtle shadow and radius.

Since original CSS is minimal, we need to output a refreshed version. The instruction "Only change colors, shadows, radius, transitions, gradients." It doesn't say we must add new declarations, but "refresh this CSS visually" implies yes. The safest is to add visual declarations to each existing rule, leaving original declarations untouched.

We should also perhaps change the `text-align: center`? No, that's layout. Keep.

Maybe we can add `background` and `border-radius` to the col-lg-7? That might affect the hero section. But to keep dense dashboard, perhaps not.

Let's think about the context: These are inside a media query for mobile. The hero section `.app-hero-section .row .col-lg-7` is a column, text-align center. In mobile, maybe it's full width. Adding background might turn it into a card, but not necessarily. The original CSS doesn't include any background, so adding one would be visual change. But could be undesired. However, the target style is "white cards on slate background", so maybe the overall background is slate. In that case, the hero section might have a background. But we only control this file. To introduce a slate background, we would need to set on body or root, which is outside the selectors. Not allowed.

Alternatively, we might use CSS variables? But adding new selectors is not allowed. We could set `--space-md`? No, that's not visual color.

Maybe the expected output is just the original CSS with unchanged properties, because there are no colors to change. But that would not fulfill "change colors" requirement. The instruction says "Only change colors, shadows, radius, transitions, gradients" meaning those are the only categories of properties you are allowed to modify. Since none are present, you can leave as is? But then it's not a refresh.

We need to make a decision. The task is generated by an AI? It asks for a refresh. In such cases, even if no visual properties exist, we can add them to the existing selectors. That is likely expected. We need to output something that looks like a "dense-dashboard" variant.

Let's construct a rewritten CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        /* visual additions */
        background-color: rgba(255,255,255,0.85);
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(30,41,59,0.08);
        backdrop-filter: blur(4px);
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        /* override warning yellow to accent blue */
        background-color: #3b82f6;
        color: #ffffff;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(30,41,59,0.15);
        transition: background-color 0.15s ease;
    }

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

But note: The original had no border. Adding border is a visual property, not layout? Border-width affects layout via box-sizing if not border-box. But if box-sizing is border-box (Bootstrap default), border-width doesn't change layout dimensions. Actually border is part of box size, but with border-box, it reduces content area. But padding remains same; adding border could effectively shrink content area, which is layout-affecting. The instruction says "border-color and border-style (NOT border-width)" can change. We should not add border width if it doesn't already exist, because that would affect layout. Better to avoid adding border. Use box-shadow to simulate border: inset? But that's okay.

Similarly, adding background, border-radius do not affect layout. backdrop-filter doesn't affect layout. transition no layout.

But adding `background-color: #ffffff` to the contact cards might be okay; it doesn't affect layout. Adding `border-radius` okay.

But we must be careful with `padding: var(--space-md) !important;` and then adding `background-color` etc. Good.

For the col-lg-7, adding background might be too invasive, but it's within media query, mobile only. Could be fine. However, the target style "white cards on slate background" might mean the hero section has a card-like column. Let's add a translucent white background and a subtle radius/shadow to give it a card feel.

But maybe we shouldn't change the hero col because it contains the text and maybe a button; adding background might be okay.

Alternatively, we could only add visual properties that clearly don't affect layout, like `background` and `border-radius` and `box-shadow`. I think it's safe.

We must also consider that `.badge.bg-warning` might have Bootstrap's own background-color via `.bg-warning` class. Our selector specificity `.app-hero-section .badge.bg-warning` is high (0,3,0), enough to override. Good.

We should use the specified palette: cool grays #1e293b, #334155, accent blue #3b82f6. White cards on slate background. So use #ffffff for card backgrounds, #f8fafc maybe for the hero column? Or slate background for body? But we don't have body selector. Could set on the column? Hmm.

Maybe we can add `background-color: #ffffff;` to article/card, and `background-color: rgba(30,41,59,0.02)` to hero? But "white cards on slate background" suggests the page background is slate, but we can't change body. We can set the article/card background to white. The badge can be blue.

We can also change the `box-shadow` to use slate tones. Use multi-layer shadows for tight-rhythm: subtle.

Let's make the badge more dense-dashboard: blue background, white text, small radius 4px, shadow: `0 1px 2px rgba(30,41,59,0.2), 0 0 0 1px rgba(59,130,246,0.3)` perhaps. But the target includes accent blue #3b82f6.

For the contact cards: `background-color: #ffffff; border-radius: 6px; box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.1);` That's subtle.

For the hero column: maybe no background, but we can add `border-radius: 6px;`? Without background, border-radius meaningless. Add `background-color: rgba(255,255,255,0.6);` and `backdrop-filter: blur(2px);` for a frosted card. But dense-dashboard? Not sure.

Let's see original media query: It's for max-width 575.98px, so small screens. The hero section on mobile likely is not a card; it's just centered. Adding background to a column may appear as a band. Could be okay.

But the instruction "Dense-dashboard" is described as "Aggressive only" but we are in conservative mode? The system prompt says "🛡️ CONSERVATIVE MODE" and "TARGET STYLE: dense-dashboard" but then "Layout pattern (Aggressive only):" This is confusing. The request says "Mode: 🛡️ CONSERVATIVE (HTML fixed, visual changes only)" and the target style is dense-dashboard. The "aggressive" label applies to layout pattern but we are not in aggressive mode. We can still use the color palette.

We should avoid changing layout pattern. The existing CSS has no grid definitions. So we just use colors and shadows.

Let's output with all original declarations plus added visual properties. Ensure selectors are exactly preserved.

We also need to consider `@media (max-width: 575.98px)` must stay.

Let's craft the final CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background-color: rgba(255, 255, 255, 0.72);
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(30, 41, 59, 0.06), 0 4px 12px -2px rgba(30, 41, 59, 0.08);
        backdrop-filter: blur(4px);
        transition: background-color 0.24s ease, box-shadow 0.24s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #3b82f6;
        color: #ffffff;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(30, 41, 59, 0.18), 0 0 0 1px rgba(59, 130, 246, 0.25);
        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: 6px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.08);
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }
}

Wait, we added `transform` in transition, but transform is not a visual property we can change? It's okay to transition transform but not change transform. But adding a transition on transform might be unnecessary. We could use `transition: box-shadow 0.2s ease, background-color 0.2s ease;` only.

Also note: The original CSS had no `transform`; we are not changing transform values. We just use transition. That's fine.

But the instruction says "Only change colors, shadows, radius, transitions, gradients." We can add transitions. Good.

However, we added `backdrop-filter` which is a decorative property. It's allowed? The list of changing properties includes `filter, backdrop-filter`. Yes.

Need to ensure no layout disruption: `backdrop-filter` can be expensive but doesn't affect layout.

But is adding `background-color` to `.col-lg-7` potentially altering the hero section's appearance too much? The target style "White cards on slate background" suggests we can set a light white translucent background for the hero content on mobile. Fine.

We also need to ensure "Only change colors, shadows, radius, transitions, gradients." We are not changing any layout properties. The original `font-size` and `padding` remain exactly. `text-align` remains.

But note: We added `color: #ffffff` to the badge. That is a color change. Good.

One issue: `padding: var(--space-md) !important;` is in original. We must keep it exactly. We added `background-color` etc. That's okay.

Another issue: We added `border-radius`, `box-shadow`, etc. but not `border` because border width affects layout. Good.

Let's double-check selectors:

Original:
```
.app-hero-section .row .col-lg-7
.app-hero-section .badge.bg-warning
.contact-channels-section article,
.contact-quick-section .contact-card
```
Our selectors are identical, including comma and newline. Good.

The media query condition is same.

Now output only CSS, no markdown. Should we include the original CSS with no extra? Let's finalize.

But maybe we should not add background to the col because the original didn't have it, and adding a background might affect readability if it overrides a parent background. But it's okay.

Let's also consider the "tight-rhythm" effect variant: small border-radius (2-6px), subtle shadows or none, compact spacing. Our border-radius 6px or 4px is within. Shadows subtle. Good.

We can also add `accent-color`? Not necessary.

Let's think if there is any hidden requirement to keep the total file size similar? No.

Potential problem: `background-color: rgba(255, 255, 255, 0.72);` with `backdrop-filter: blur(4px);` might be too much. But it's mobile only. Good.

We should maybe use `#ffffff` for contact cards and `#f1f5f9` for the hero column? But white cards on slate background, so hero column should not be white if it's not card. Yet we are adding a card-like background. Maybe use a very light gray `#f8fafc` to denote a subtle panel. But the palette has cool grays #1e293b, #334155, accent blue #3b82f6. The background of the body might be #f1f5f9. Since we can't change body, we might set the hero column background to none? Let's not overdo.