/* ============================================================
   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 respond with rewritten CSS. Need examine input. It's a small media query with three rules. Need preserve selectors exactly, layout unchanged. We can only change color, shadows, radius, transitions, gradients, border styles, etc. The original has:
@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;
    }
}

Need refresh visually without changing layout. But these rules only touch text-align and font-size and padding. We can add visual properties? The instruction says "All color values, shadows..." but the selectors don't have any colors; we could add color, border-radius, background? But "visual identity" maybe can add properties? Need be careful: "Refresh visual identity WITHOUT changing layout structure or class names. HTML fixed — only colors, shadows, and decorative properties may change." If original has no colors/shadows, can we add? Probably yes, but must not change layout. We can modify "padding: var(--space-md)" but padding is layout-ish; under "NEVER CHANGE" says padding, margin (keep similar values, ±20% maximum). But "visual identity" maybe keep padding same. We should avoid changing padding value too much. Could add "box-shadow", "border-radius", "background", "transition", "color". But changing text-align? That's layout-ish? It says typography: text-align is allowed? In NEVER CHANGE, text-align listed? Actually "📝 TYPOGRAPHY" includes "text-align, vertical-align" under NEVER CHANGE? Wait it says "font-family, font-size, font-weight, line-height, letter-spacing, word-spacing, text-transform, white-space, word-break" — not text-align. But at bottom "display, position, grid-template-*, flex-direction; width, height, padding, margin within ±20%; font-family, font-size, font-weight, line-height unchanged" and includes text-align? It says "text-align, vertical-align" under Layout? Let's re-read. The provided "NEVER CHANGE" list includes:
"📐 LAYOUT (HTML cannot adapt to changes):
  • display values
  • position
  • grid-template-columns
  ...
  • justify-content, align-items, align-self
  • float, clear
  • z-index, overflow, overflow-x/y
  • box-sizing
  • visibility
  • aspect-ratio
  • object-fit
  • text-align, vertical-align"

So text-align should not change. We should keep it exactly. Need not change font-size? It's listed in typography as font-size unchanged. So keep 0.85rem and padding? "padding, margin (keep similar values, ±20% maximum)" We can keep exact. We can add visual properties only. Need maybe transform? Not allowed? It's a visual property but not specified; could be considered layout? Better avoid.

Need update at least colors, shadows, radius. Since original no such declarations, we can add them to selectors. But should we alter the media query? We can keep media query. Need preserve all selectors and layout exactly. Need maybe add color to .app-hero-section .badge.bg-warning? But "bg-warning" likely Bootstrap warning background. We could set background gradient? That's allowed. But if "badge bg-warning" existing classes may have Bootstrap styles; we can override with custom background, border, color. Need not use class names modifications.

Need perhaps add to first rule? It's .app-hero-section .row .col-lg-7 text-align center. We can add color? But that's in hero center text maybe. Adding color to a column may be weird. Could add "margin-bottom"? But layout. Better add "text-shadow"? Maybe not.

Maybe we need output a visually refreshed CSS even within same selectors. We can add properties like:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2a3b4c;
        text-shadow: 0 1px 0 rgba(255,255,255,0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #1f2a36;
        background: linear-gradient(135deg, #f4d35e, #f0a832);
        border: 1px solid rgba(180, 130, 30, 0.35);
        box-shadow: 0 4px 12px rgba(240, 168, 50, 0.25);
        border-radius: 999px;
        padding: 0.35em 0.8em;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255,255,255,0.72);
        border: 1px solid rgba(37,46,58,0.08);
        border-radius: 22px;
        box-shadow: 0 12px 28px -8px rgba(37,46,58,0.12), 0 4px 12px rgba(37,46,58,0.04);
        backdrop-filter: blur(6px);
        transition: box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease;
    }
}
Need ensure "padding" without !important? Original padding var(--space-md)!important. Should keep padding exact. Adding padding? No. The contact card has padding only; adding background etc okay. However "backdrop-filter" maybe supported; okay.

But task asks "all color values, shadows, and radius more distinct this round. Use fresh palette." This tiny CSS may be a snippet from larger stylesheet. We have only three rules. Need make sure rewritten CSS is visually distinct but maybe "colors throughout file" not applicable because file only contains these rules. We can replace visual values where present: no colors, so add new. We can change padding maybe within ±20 but no need.

Need think about "Request ID #901ae9f4" etc probably from AI instruction. We just need output CSS only. No markdown. Must be valid CSS. Need not include comments.

Potential issue: "media query breakpoints (conditions only)" preserved exactly. Good.

Need decide if we need modify `@media (max-width: 575.98px)`? Keep.

Need maybe "text-align: center" is a property that must remain. Add "color" to hero text okay. But if color is added to `.row .col-lg-7`, that might cascade to all in column. That's okay visually. Need maybe "text-shadow" to create airy rhythm. But "text-shadow" is allowed.

Need not alter `.badge.bg-warning` font-size? Keep 0.85rem. Add color/background/border/radius/box-shadow. But if the badge has Bootstrap `.bg-warning` with a background color, override with gradient. That's fine. We may also use `--bs-badge-color`? Not needed.

Should we update `padding: var(--space-md) !important`? Keep exact; maybe add padding? We can set `padding: calc(var(--space-md) + 4px) !important`? Under ±20% maximum. But original uses CSS variable, actual value unknown. We can't ensure. Better leave exact. Visual refresh via border-radius/background.

Need maybe include `-webkit-backdrop-filter`? Could add both. But `filter` allowed. Hmm.

Need ensure no changes to selectors or layout. If we add "transition", "box-shadow", "border", "background", "backdrop-filter", "overflow" not. Border property maybe not border-width; if we set `border: 1px solid rgba(...)`, border-width is set to 1px, but original didn't have border. But "NEVER CHANGE" says "border-color and border-style (NOT border-width)"—but adding border-width might actually be considered layout? Border-width affects layout. Since original had no border, adding border-width changes layout? But it's a visual change and padding same but box-border? If using default border-box? Global likely border-box. Still, adding border can alter width. But we're allowed to change border-color and border-style, not border-width. To be safe, we can use `outline` instead? But "outline styles" allowed. However outline may overlay and not affect layout. But "box-shadow" also no layout. Background no layout. Border-radius no layout. So use `background`, `box-shadow`, `border-radius`, and avoid border. But "border-color and border-style" allowed, but adding border-width could be considered layout-changing. Better avoid adding border. Use inset box-shadow to simulate border: `box-shadow: inset 0 0 0 1px rgba(...), ...`. That's allowed, no layout. But then if we combine border-radius, inset shadow clips to radius. Great. We can do:
box-shadow: inset 0 0 0 1px rgba(37,46,58,0.06), 0 12px 28px -8px rgba(...), ...
This is decorative.

Need "color palette: Sidebar darker (#252e3a), main lighter; Functional accent for actions." We can use accent color #f0a832 or maybe #f4b942. But for badge bg warning, use warm amber.

Need "airy-rhythm": large border-radius (16-28px), soft pillowy shadows, breathing room. For contact card, border-radius 24px and big shadow. For badge, 999px pill.

Need maybe apply to `article` and `.contact-card` with soft shadows. But these may be cards. We can include ":hover" or transitions? The original selector doesn't have pseudo-class; we must not add selectors? Can we add pseudo-classes? It says "Pseudo-classes (:hover, :focus, ::before, ::after)" are selectors? It says keep exactly. It doesn't say we can add new pseudo-classes. To be safe, don't add. A transition can be included on base selector; no separate selector. But if no hover, transition may not be observed. Good.

Need maybe add "transform: translateZ(0)"? Not necessary. But "filter" allowed. Could use `filter: saturate(1.02)`? Hmm.

Need think: The original CSS has no declaration "background" etc. Maybe a style refresher expects us to replace "color values" if any. But because none, output will be more than original. Is that okay? The prompt says "Refresh this CSS visually" and "All color values" etc. It expects perhaps the file content is just this snippet; we should add new visual declarations.

Could there be a trap: If we add "color" to `.app-hero-section .row .col-lg-7`, it might change text color but not layout. Allowed. If we add `text-shadow` maybe okay. But "text-align" remains.

Need maybe change font-size? Not allowed, but "font-size: 0.85rem" remains. We can't change to 0.9rem. Keep.

Need maybe change `padding: var(--space-md) !important`? It's padding; allowed ±20%. But since variable, we can leave. However "generous spacing" variant says padding 32-56px for aggressive but we're in conservative with HTML fixed; maybe keep exact.

Let's craft final CSS elegantly. Need no markdown fences. Let's ensure valid CSS with semicolons.

Potential addition: `--space-md` may be undefined? It is referenced already, so we keep. If we add `padding: calc(var(--space-md) + 4px) !important;` under ±20 maybe okay but if variable custom property value changes, not. Better "padding: var(--space-md) !important;" exact.

But then our new visual properties should not be blocked by `!important` on padding.

Need perhaps use `@media (max-width: 575.98px)` and selectors exactly. Need no comma changes.

Let's craft:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #3a4a5c;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #2b2416;
        background: linear-gradient(135deg, #f7d774 0%, #f0a832 100%);
        border-radius: 999px;
        box-shadow: inset 0 0 0 1px rgba(124, 85, 18, 0.18), 0 6px 16px -4px rgba(240, 168, 50, 0.45);
        transition: box-shadow 0.25s ease, background 0.25s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        color: #252e3a;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(246, 249, 252, 0.82));
        border-radius: 24px;
        box-shadow: inset 0 0 0 1px rgba(37, 46, 58, 0.05), 0 14px 32px -10px rgba(37, 46, 58, 0.14), 0 4px 14px -4px rgba(37, 46, 58, 0.06);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition: box-shadow 0.35s ease, background 0.35s ease;
    }
}

Need maybe "filter" not used. It's okay.

Would adding `color: #252e3a` to contact card change text but not layout. Fine.

Potential issue: `@media` first line. We need no spaces? Fine.

Need ensure "no AI-REWRITTEN comments" - no comments. Good.

Need maybe include "transition-timing function" changed? okay.

Let's double-check if changing "box-shadow" with inset 0 on contact elements maybe appears as a border but can be colored. no layout.

Potential concern: `backdrop-filter` might not be allowed? It's allowed under filter, backdrop-filter. Good.

Potential concern: "border-radius: 24px" on contact cards might be considered layout? Visual only.

Potential concern: `border-radius: 999px` on badge maybe okay.

Potential concern: "color: #2b2416" on badge changes Bootstrap default badge text color; okay.

Need maybe adjust color scheme to "sidebar darker #252e3a, main lighter". We use #252e3a as text color on contact card, and #3a4a5c hero. Background white/main. Accent amber. Good. Could use dark sidebar background in `contact-channels-section article`? No, main. Hmm. But target style says "Sidebar darker, main lighter" probably not relevant for snippet. We can keep.

Maybe better to add `background: #f8fafc` to contact card? We used gradient with transparent white. Good.

Need maybe "spacing generous" already in original padding. We keep.

Could add `margin-top`? no.

Need maybe add "border-radius" on first rule? Not necessary.

Need maybe change "text-shadow" from "0 1px 2px"? Good.

Let's ensure no newlines or weird formatting? Output should be exact CSS, no code fences. We can include newlines.

Could there be an issue with "transition" on `background` when background is gradient? It won't transition smoothly, but okay. Could remove transition on background, use box-shadow only. But "transition timing, easing, duration" can be changed/added. Fine.

Need perhaps include "min-height"? no.

Need perhaps add `color` to first rule but not to `.badge`? We did.

Could `color` in first rule override bootstrap? `.app-hero-section .row .col-lg-7` is higher specificity than body but not necessarily Bootstrap. Good.

Let's consider if adding `color` to `.contact-channels-section article` might override heading elements? Headings have own color, but paragraphs maybe. Fine.

Need maybe "background" on `.contact-channels-section article` if the article is used inside a grid; background not layout. Good.

Need perhaps "border-radius" on `.contact-channels-section article` and `.contact-quick-section .contact-card`. Good.

Need maybe "overflow" not.

Now, the task says "⚠️ Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette." This implies perhaps they expect more dramatic visual redesign. Our output is fairly distinct from original because original only had text align, font-size, padding. But maybe they want colors and shadows. We can intensify shadows and gradients. Need maybe set `box-shadow` to stronger/larger offsets:
- Badge: `0 8px 20px -6px rgba(...)`.
- Cards: `0 18px 40px -12px rgba(...), 0 6px 18px -6px rgba(...)`.
But "soft pillowy shadows" means rounded, large blur. Good.

Need maybe use `border-radius: 28px` for card, "large border-radius (16-28px)". We'll use 28px. But if original cards maybe expected not too round; okay.

Need maybe set `background` to `linear-gradient(145deg, rgba(255,255,255,0.94), rgba(240,246,252,0.88))` and `box-shadow` with inset ring. Good.

Need maybe use `filter: drop-shadow(0 10px 20px rgba(...))`? That's