/* ============================================================
   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 inspect original CSS only a media query with three rules. Need refresh visual identity without changing selectors/layout. But original has no colors, shadows? It has text-align, font-size, padding important. Some padding can be +/-20%. Need change padding? It says padding, margin keep similar ±20% maximum. Original: padding: var(--space-md) !important; We don't know --space-md. Could choose maybe calc? To keep similar, can adjust padding to a calc or maybe not change? Need refresh visual identity: maybe can add colors, shadows, radius, transitions, gradients? But HTML fixed, only visual properties may change. However cannot change layout, but can add color, shadow, border-radius etc. The selectors are media queries. Need preserve selectors exactly. For first rule .app-hero-section .row .col-lg-7 text-align center. We cannot change text-align? Actually "text-align, vertical-align" in typography fixed, never change. So keep text-align: center. Could add color? Maybe not needed. For second .app-hero-section .badge.bg-warning font-size fixed; could add background, border, box-shadow, transition. For third, need keep padding similar maybe just use var(--space-md) or maybe change to "padding: 1rem !important" if --space-md = 1rem? But unknown. We should avoid changing margin/padding if not necessary. But mission says change colors, shadows, radius, transitions, gradients. The target style sidebar-classic + glow effects. But this file section is only mobile media rules, no sidebar. Need adapt to existing selectors with accent glow and colors.

Need output rewritten CSS with same selectors. 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;
    }
}

Need preserve @media max-width 575.98px. First rule: we can add color? text-align center and maybe color: #252e3a? But .col-lg-7 likely text container; changing color okay? Maybe add text-shadow? Better avoid adding color to large block? But can.

Need perhaps use CSS custom properties? The original references var(--space-md). Could define? No root selector. Can't add new declarations? We can add variables inside rules? That's okay maybe. But don't need.

Need maybe implement glow effects: Add box-shadow to badge, perhaps filter/drop-shadow. Add border-radius to article/card. But be careful: .contact-channels-section article and .contact-quick-section .contact-card with padding var(--space-md). Adding background/border-radius/box-shadow would make cards glow. That's visual only. However in mobile smaller screens, box-shadows okay.

Need choose palette: Sidebar darker #252e3a, main lighter, functional accent. Accent could be #4f8cff or #6c8cff, or amber? Since .badge.bg-warning warning color. Maybe use accent blue #3b82f6 and warning amber. Need "glow shadows in accent color" for badge maybe yellow glow? Could use accent cyan #22d3ee? But target "sidebar-classic" with darker sidebar, main lighter, functional accent. Since this is mobile hero and contact cards. Maybe apply glow to badge (warning) with amber glow. For contact cards, soft dark navy shadow with blue accent on hover? But no hover in original selectors. We cannot change selectors, but can add transition to article/card, no hover selector? If no :hover, cannot add halo on hover without adding selector. The instruction says pseudo-classes should not change? It says selectors keep exactly, so can't add :hover. Could add transition to existing selectors; no hover style. Maybe we can use @media (hover:hover) adding new selectors? No, would change selector list? That would be adding new rules, maybe not allowed? It says keep all selectors, but can add? "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is." It likely means do not change selectors, but output can have same rules only. Better not add new selectors. Could add transition on base rules.

Could use CSS variables? Or no.

Need ensure "target style sidebar-classic" maybe more applicable if larger file, but given only media query. We'll produce same structure with visual enhancements:
- On hero col center, maybe add color: #252e3a; and text-shadow? Text-shadow might impact readability, but can be subtle. However adding text-shadow to entire text block could be too much. Maybe not necessary.
- On badge: font-size fixed; add background: linear-gradient(135deg, #fbbf24, #f59e0b); border: 1px solid rgba(245, 158, 11,.4); box-shadow: 0 0 24px rgba(251,191,36,.4), 0 4px 12px rgba(15,23,42,.12); transition: box-shadow .3s ease, transform .3s ease; perhaps transform would require layout? Transform okay? But changing transform on static element may be visual but not in allowed? The allowed list doesn't mention transform. It says only colors, shadows, decorative properties. Transform is decorative but not listed. Better avoid transform. Add border-radius: 999px; maybe badge pill. Also backdrop-filter? no need.

- Contact cards: keep padding var(--space-md) !important. Add background: rgba(255,255,255,.72); border: 1px solid rgba(37,46,58,.08); border-radius: 16px; box-shadow: 0 8px 24px rgba(37,46,58,.08), 0 0 24px rgba(59,130,246,.08); backdrop-filter? Could use. But adding background might alter appearance if card had no bg. But okay. However if original card uses its own background, adding this will override? Since same specificity? This rule has selector .contact-channels-section article and .contact-quick-section .contact-card, same or greater? It may override. But HTML fixed; just visual.

Need consider "padding: var(--space-md) !important" cannot change. Keep it. Maybe if --space-md defined? No. But padding can be kept. Need maybe not add padding. Good.

Need "border-radius" medium radius (8-16px) for cards.

Need "subtle pulsing animations" without @keyframes? Could use "animation: pulse ..." but keyframes need defined. Could define @keyframes? Adding keyframes is allowed? It says @keyframes names must be same? Actually "Animation & Media: @keyframes names (values inside CAN change)" If there were no @keyframes in original, adding new @keyframes would add selectors? Hmm. Better avoid.

Need maybe use "transition: box-shadow .3s ease, background-color .3s ease" on cards, so pulse? Not necessary.

Need only output rewritten CSS, no markdown. Could include comments? No.

Need maybe replace padding within ±20: Keep var. Fine.

Potential issue: `.badge.bg-warning` class includes bg-warning, likely Bootstrap warning yellow background. Overriding background with gradient okay. Need preserve font-size.

Could perhaps use `--space-md` unchanged.

Let's craft final:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #252e3a;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fcd34d, #f59e0b);
        border: 1px solid rgba(245, 158, 11, 0.45);
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.4), 0 4px 12px rgba(37, 46, 58, 0.1);
        border-radius: 999px;
        transition: box-shadow 0.3s ease, filter 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.75);
        border: 1px solid rgba(37, 46, 58, 0.08);
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(37, 46, 58, 0.08), 0 0 24px rgba(59, 130, 246, 0.1);
        transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }
}

Need maybe "filter: drop-shadow"? no. Need "glow effects" more pronounced? 0 0 24px rgba(accent,0.4). We have badge glow. For cards, accent glow 0.1 maybe too subtle. Could use 0 0 24px rgba(59,130,246,.15). "Halo on hover" no hover, but could use "transition". Good.

Need ensure no layout modifications: background on cards could affect color? no. But background might cover underlying, okay. If card original has dark background, this would lighten; maybe acceptable. Maybe should not add background to contact cards because could be a card already with background color and this selector may be applied to article; but this is visual. It changes background. But if original had bg from another class, adding this same level may override? The selector `.contact-channels-section article` specificity 0,1,1? Actually .contact-channels-section article = 1 class + 1 element = (0,1,1). Bootstrap `.card` = 0,1,0? Wait .contact-card maybe a custom class. If combining `.contact-quick-section .contact-card` = two classes = 0,2,0, which may override Bootstrap .card if .contact-card is a div with class card? Hmm. But okay. Could avoid background to not break if parent has cards. But target style demands main lighter. Without background, if card background already exists, fine. But to maintain card style, might not need background. Yet "box-shadow" with transparent background can still show. If card has its own bg, shadow works. But adding `background` can be dangerous. Use `background: transparent`? No.

Better to not add background to contact cards? But then no main lighter distinction. We can use `background: rgba(255,255,255,0.6)` maybe. Since HTML fixed, original CSS may include background elsewhere. This media query only changes mobile. Maybe adding background is okay.

Need maybe "box-shadow" on article with border-radius. But if article doesn't have overflow, okay.

Need maybe "backdrop-filter: blur(8px)" to enhance glass. But browser support. Could add, but not necessary.

Potential issue with `border: 1px solid ...` on badge changes dimensions (border width? width changed? The instruction says border-width cannot change because it affects layout? Actually layout properties include width, height, padding, margin; border-width not explicitly listed except "border-color and border-style (NOT border-width)" because border-width changes layout. So cannot add border-width if 0? It would change box size if box-sizing border-box? But if no width specified, adding border may increase element size. Since CSS not allowed. Therefore DO NOT add border to elements if they didn't have border? The instruction says border-color and border-style may change, but NOT border-width. If original had no border, adding `border: 1px solid` changes border-width, forbidden. Need avoid adding border-width. Could use `outline` with `outline-width`? It also not explicitly but changes visual no layout. Better use box-shadow not border. So don't add `border: 1px solid`.

Similarly adding `background` is fine.

Need not change `font-size`.

Let's ensure no border-width. Use `box-shadow` for outline effect. Could use `outline: 1px solid`? It may not affect layout. But instruction allows outline style and color, not outline-width? It says outline styles (color, type). It doesn't mention width; probably can set outline-width? Original no outline. Adding outline width maybe visual, no layout. But to be safe, use box-shadow.

Need maybe "box-shadow: 0 0 24px rgba(accent,0.4), inset 0 0 0 1px rgba(...)" for border-like visual. Good.

Let's adjust:

.badge:
background: linear-gradient(135deg, #fcd34d, #f59e0b);
box-shadow: 0 0 24px rgba(251, 191, 36, 0.45), inset 0 0 0 1px rgba(245, 158, 11, 0.25);
border-radius: 999px;
transition: box-shadow .3s ease, filter .3s ease;
Could also `color: #252e3a`? But bg-warning text color default dark? Keep.

Contact:
background: rgba(255,255,255,.7);
box-shadow: 0 8px 24px rgba(37,46,58,.08), 0 0 24px rgba(59,130,246,.12), inset 0 0 0 1px rgba(37,46,58,.04);
border-radius: 16px;
transition: box-shadow .3s ease, background-color .3s ease;
Maybe backdrop-filter: blur(10px); allowed. Add? Not necessary.

Could add `background-color` instead of `background`? If card already has gradient, this would override? `background-color` combines with gradient? It sets background-color, if existing background-image, still there. Better use `background-color` to not wipe out existing gradient. But target style might require bg. Use `background-color: rgba(255,255,255,0.7);` instead of `background`. That preserves background-image if any. Good.

First rule: color #252e3a? If original had color, okay. But text-align is only typography. Add `color` might be okay. We can add `text-shadow` subtle? Could be overkill. Maybe simply keep.

Need maybe "color palette: Sidebar darker (#252e3a), main lighter. Functional accent for actions." We can use #3b82f6 accent.

Need perhaps use `caret-color`, `accent-color`? no.

Let's craft final with no border width, no padding changes.

Need output with exactly:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #252e3a;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fcd34d, #f59e0b);
        box-shadow: 0 0 24px rgba(251, 191, 36, 0.45), inset 0 0 0 1px rgba(245, 158, 11, 0.3);
        border-radius: 999px;
        transition: box-shadow 0.3s ease, filter 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: rgba(255, 255, 255, 0.7);
        box-shadow: 0 8px 24px rgba(37, 46, 58, 0.08), 0 0 24px rgba(59, 130, 246, 0.15);
        border-radius: 16px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition: box-shadow 0.3s ease, background-color 0.3s ease;
    }
}

Need check if `backdrop-filter` with prefix counts as layout? no. But it adds vendor prefix. Fine.

Need maybe not add `-webkit-backdrop-filter`? okay.

Need ensure no `filter` in badge? We set `transition: filter .3s ease` but no filter declaration. Could remove or include `filter: saturate(1.1)`? filter allowed. But no need. Setting transition to filter maybe useless. Could use `transition: box-shadow 0.3s ease, background 0.3s ease;`.

Need "glow effects" maybe on card hover? We don't have hover. But at mobile, hover less relevant.

Need maybe `transform: translateZ(0)`? no.

Could use `box-shadow` with `0 0 32px` for glow? We need "halo on hover", no hover. Fine.

Potential issue: `background-color` on `.contact-card` may hide a card border? No.

Need maybe "padding var(--space-md) !important" is kept. Good.

Since original CSS contained only media query. Output should only CSS. No markdown fences. We need maybe no comments. Let's output.

But before final, let's think if "all color values must be changed." Original had no color values except `--space-md` variable. There is no color. We add colors. Good.

Need no exact same padding? We keep exactly. Good.

Need maybe "target style sidebar-classic" suggests maybe need add two-column structure? But original only mobile media query, can't add layout. The target says Layout pattern (Aggressive only): "Two-column structure: ..." Note it says Aggressive only maybe from prompt; we're in conservative mode, so no layout changes. Good.

Need perhaps "Functional accent for actions" maybe use #3b82f6 in card glow.

Need maybe if contact cards are list items, `background-color` on article might remove hover background? Actually it sets background-color; existing hover might be overridden by