/* ============================================================
   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 apply conservative mode. Need rewrite visual properties only. Original CSS has media query, some rules. Need change colors, shadows, radius etc without layout. Since minimal CSS. Need produce same selectors exactly, same media condition, no class name changes, typography unchanged if any font-size? Rule .app-hero-section .badge.bg-warning { font-size: 0.85rem; } font-size is protected, cannot change. Need maybe color? none. Need add decorative? Need preserve all declarations? But task says refresh visually, only changes allowed. We can add color, box-shadow, border-radius? We can alter values, but font-size cannot change. Existing has padding!important; padding protected with ±20%. We can potentially adjust padding? Original has padding: var(--space-md) !important. Need keep similar within 20%. var(--space-md) maybe defined elsewhere. But we can't change custom prop value? We could change to a different var? Selector? Better keep padding value. We must output same selectors and media. Could add new declarations? Since CSS input limited. We can modify existing values for allowed properties: font-size is protected, so keep. Add color/box-shadow/border-radius? But need be careful with mobile media. Need original list. Let's compose fresh visual identity "airy-rhythm" maybe with colors, shadows, radius. But original only has three blocks inside media. Need preserve rules. Maybe add text-shadow? For badge? Hmm.

Need output only CSS, no markdown. We need self-check. Let's parse.

@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 only change visual. Since layout not change. text-align protected, unchanged. font-size unchanged. padding unchanged (or ±20%). Could add color? For badge perhaps color? Need "badge.bg-warning" background warning change? It's bootstrap, but we can override color and background. But adding extra declarations can modify visual, but is that allowed? It says "Only change colors, shadows, radius, transitions, gradients" and "Refresh this CSS visually". We can add properties? Usually CSS rewrite of given rules; to achieve visual identity, add new visual declarations alongside existing. But "Keep ALL selectors and layout exactly as-is." Adding properties to selectors doesn't change selector, and if only visual properties, okay. Need not add non-visual. We may add border-radius, box-shadow, background, color, etc. But in media query, for .app-hero-section .row .col-lg-7, adding background? Could be weird. Better maintain same declarations and maybe adjust? Original actually no colors. We need "only colors, shadows, radius, transitions, gradients." We can potentially leave most unchanged? But task wants rewrite. We need produce something "fresh." But careful: If we add visual properties, layout stays same. Good.

Need think target style: masonry-flow with Pinterest-like white cards, soft shadows, airy-rhythm. But original selectors are not cards. Could add border-radius and box-shadow to contact cards? But that might alter visual only. Maybe not.

Need follow conservative, no layout changes. We can change the `text-align: center`? No, protected. Keep.

Maybe change font-size? protected, keep 0.85rem.

Padding: keep var(--space-md) or within ±20%. Could use padding: calc(var(--space-md) * 1.1) maybe too layout slight. But should "keep similar", var cannot know. Better keep var unchanged.

Need perhaps add `background: transparent;`? Not needed. Need output same CSS with added visual declarations in each rule. But could this break? For .app-hero-section .row .col-lg-7, adding `color` maybe text changes, okay. But if we set background, no. Need preserve media.

How to satisfy "fresh color palette + shadow/radius identity" in three rules? We can:
- For hero row col, add `border-radius`? It's a column container; setting border-radius may do nothing unless background/border. Could add `text-shadow: 0 2px 8px rgba(...)`? Text-shadow allowed, visual. But might affect readability. Could add `transition` maybe? Since text-align changes on mobile; transition doesn't apply because text-align not animatable? Actually could. But transition property allowed, values can change.
- For badge, change background-color and border-radius/box-shadow/color. The badge selector specifically `.badge.bg-warning`, we can override Bootstrap's warning color and background with palette. Need define background: maybe #f2933d, color: #3d2200, border-radius: 999px, box-shadow. But background-color is allowed. Need maintain style. Font-size unchanged. Could add `letter-spacing` protected? letter-spacing protected, no.
- For contact cards, add border-radius: 20px; box-shadow; maybe background-color. But if background changes, okay. Need maybe set `border: none`? Border style is allow? But if setting border width no. We can add border-color? Better avoid because might affect layout if border exists. Could add `box-shadow` only. But box-shadow overlay doesn't affect layout. Add `border-radius` doesn't affect layout. Add `background: #ffffff` to contact cards? If they already have background, okay. Need maybe add `transition` to hover? No hover in media. Could add `box-shadow: 0 8px 30px rgba(...)`.

But user requested "Output the rewritten CSS now" with all selectors exactly. Need maybe include all original declarations plus new visual declarations. We must not change font-size. Padding exactly. We can maybe change padding to `calc(var(--space-md) + 0.15rem)`? Is padding changed within ±20%. But likely not needed.

Need be careful "Only colors, shadows, radius, transitions, gradients" — can add `background-color`, `color`, `box-shadow`, `text-shadow`, `border-radius`, `transition`, `background` gradient. Avoid `opacity` if no. Could add `border-style` but no.

Original contains `@media (max-width: 575.98px)` fixed, keep. Need no markdown. Let's craft.

Potential output:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 1px 0 rgba(255,255,255,0.3), 0 4px 18px rgba(6, 12, 34, 0.12);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #4a2b00;
        background: linear-gradient(135deg, #ffd56b 0%, #f5a623 100%);
        border-radius: 999px;
        box-shadow: 0 4px 14px rgba(245, 166, 35, 0.35);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 20px;
        box-shadow: 0 12px 32px rgba(31, 38, 68, 0.08), 0 2px 6px rgba(31, 38, 68, 0.04);
        backdrop-filter: blur(8px);
    }
}
Wait backdrop-filter allowed, but could alter visual. However background-color rgba with blur might cause backgrounds. Airy. But if rule applies on mobile to article and contact-card, okay.

Need check "backdrop-filter" allowed as visual. Yes, but maybe if original no background, adding background-color with transparency could appear. But okay. But "only colors, shadows, radius, transitions, gradients" — backdrop-filter is not exactly? It is decorative, listed as allowed. But not necessarily "fresh palette". We can use it.

However, a pitfall: `.contact-channels-section article, .contact-quick-section .contact-card` selector includes two separate selectors; need keep exact comma and whitespace. We can keep same.

Need maybe add transitions? Could add `transition: transform .3s ease`? Transform is layout? transition property is allowed but transform value? If not, no. Better not add transition if no hover.

Need maybe change `background` to gradient, border radius. Good.

Potential issue: The CSS file includes no `--space-md` definition. Our output includes it unchanged, okay. But adding custom properties? not.

Could add `border-radius` to `.app-hero-section .row .col-lg-7` maybe not. If text-align centered, text-shadow okay. But if hero col has background? no.

Need maybe provide "box-shadow redesigned (different offsets, colors)" yes.

Need maybe preserve font-size exactly. Yes.

Need maybe preserve padding exactly. Yes.

Need maybe preserve all selectors and media condition.

Need no markdown.

Let's think if we should use "Pinterest-like white cards" palette. Maybe set body? But no selector. We can add new selectors? Not allowed? We should only use original selectors. Could not add new selectors; only can rewrite existing CSS. But output only these rules. We could add `@media`? same only. No new selectors.

Need maybe avoid adding `backdrop-filter` because it is not universally supported and maybe creates stacking context but no layout changes. Could use just background-color and box-shadow. But target "airy-rhythm" with soft pillowy shadows. Good.

Need maybe add `outline`? no.

Need determine if text-shadow on `.col-lg-7` could violate because text-align and text-shadow not logically; accepted.

Need maybe change badge background from Bootstrap `.bg-warning` to gradient; this is a color change. But what about existing `.bg-warning` background from Bootstrap? Since we are in media query at max 575.98, this will apply and override. At desktop, badge remains default. Is that okay? Yes.

Need maybe add `color` to badge if existing color not set; okay.

Need maybe use `background: linear-gradient(135deg, #ffe29a 0%, #f7b733 100%)` rather than `background-color`. Good.

Need maybe use `border-radius: 20px` on contact cards; if these cards in mobile are full-width, rounded corners might conflict. But okay. Could use `border-radius: 24px` for airy. However in a media query for mobile, large radius can be nice. But if card has images inside? No layout. Good.

Need maybe set `box-shadow` with larger blur: 0 18px 40px rgba(...), plus `0 2px 6px`. Great.

Need maybe include `transition` so hover not in view? no.

Need maybe use `padding: var(--space-md) !important;` as original. If want within 20%, no change.

Need ensure that we don't change `font-size` from 0.85rem. Yes.

Need maybe "line-height" unchanged, no.

Need perhaps include `background` for `.contact-channels-section article` not needed.

Let's consider if output "Only CSS" includes no comments. We can output as above.

But we need maybe follow "Request ID" no comments. Good.

Let's produce a thoughtful, polished output.

Potential issue: Adding `backdrop-filter: blur(8px);` may require `-webkit-backdrop-filter` for Safari; but that is extra visual property, allowed. Could include both. But if the element has no transparent background, blur won't show.

Potential issue: The original contact rules have `padding: var(--space-md) !important;` and our output includes `background-color` etc. The `!important` only on padding. Fine.

Potential issue: `background` shorthand with gradient could be considered gradient. If the element already has background-image, may override. That's visual okay.

Potential issue: Need preserve `font-size: 0.85rem` exactly? Yes. Could change line 9 indentation. Keep.

Need maybe include `text-align: center` on .col-lg-7 exactly. Yes.

Need maybe include no character changes in selectors. Yes.

Let's craft final:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4), 0 8px 20px rgba(15, 23, 42, 0.08);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #3f2700;
        background: linear-gradient(135deg, #ffe28c 0%, #ffb84d 100%);
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(255, 159, 28, 0.3), 0 1px 3px rgba(63, 39, 0, 0.08);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.72);
        border-radius: 24px;
        box-shadow: 0 16px 40px rgba(17, 24, 39, 0.08), 0 4px 12px rgba(17, 24, 39, 0.04);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}

Need check shadow color "0 4px 12px rgba(255, 159, 28, 0.3)" maybe too orange. Good.

But "background" on contact articles maybe may cover existing images? It is a background color, but if the element has no background, it adds. If there are cards inside? Hmm.

Potential problem: `.contact-channels-section article` might be an actual article with content; adding a translucent white background and blur could be fine. But if article already has background? It's not specified. Could override. That's intended.

Potential problem: `backdrop-filter` can affect visual of what is behind card. But no layout. Good.

Potential problem: Does adding `background: rgba(255,255,255,0.72)` violate "white cards on light gray bg"? It's fine.

Need maybe no `box-sizing` changes. Good.

Let's think if rule text-align is layout? Protected, unchanged. Good.

Need maybe "outline style" no.

Need maybe "transition timing" no. Should we add transitions to contact cards to align with effect variant? Since no hover in input; but transitions are allowed. Could add:
transition: box-shadow 0.25s ease, background-color 0.25s ease;
But "transition" is allowed even if no hover. But in mobile, could cause on load. Not necessary. Target "airy-rhythm" maybe no transitions required. But task says refresh CSS visually; we can add transitions. Yet user specifically says can change transition timing/easing/duration. If none present, can add. But only if selectors same. Could be accepted. However, adding transition of background-color may cause initial animation? Not harmful. But keep minimal.

Could add `transition: box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 280ms cubic-bezier(0.22, 1, 0.36, 1);` but transform changes layout? Wait transition includes transform property; if no transform in normal state, no effect. But if transform is added maybe movement; not needed. Avoid transform because layout? It is visual but could cause overlap. We can just transition box-shadow and background-color, no transform. Or not.

Need maybe not add "transition" because no hover.

Could add `border-radius` and `box-shadow` to `.col-lg-7`? No.

Maybe for "airy-rhythm" need "large border radius." We use `24px`. Good.

Need maybe "prop changes" are okay.

Let's consider if "line-height, letter-spacing, word-spacing" protected; we didn't.

Need maybe "font-size" protected; we didn't change.

Need maybe "padding" keep original. Good.

Need maybe "media query breakpoints conditions only" keep exact `(max-width: 575.98px)`. Good.

Need maybe "Output the rewritten CSS now (no markdown, no preamble)" So final should start with `@media`. We'll output only CSS.

But before final, let's think if we could choose a different color palette "masonry-flow": "Pinterest-like: white cards, soft shadows on light gray bg". Our hero badge uses gradient orange. Contact cards use white translucent. Good.

Need perhaps add a light gray background to contact sections? No selector for parent. Could set `background-color` on article itself? That will make cards white on gray? But articles themselves are the cards, so if we set them to white, okay. If their parent already gray, fine. If not, no. We could set `background-color: #fff` and `box-shadow`. But `background: rgba(255,255,255,0.72)` plus blur can look cloudy. A pure white background is more Pinterest-like. But background rgba with transparency and blur is more "airy". Since we are in conservative mode, no original background. Use `background: rgba(255,255,255,0.8)`?

Need maybe "soft shadows on light gray bg" maybe set article background to `#ffffff`, but if there are nested rows, okay. User target style "Pinterest-like: white cards, soft shadows on light gray bg." Use `background-color: rgba(255,255,255,0.9)` and shadow; but maybe with translucent white and blur, no need. However if article has an existing background image, overriding with background could be a