/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need answer only rewritten CSS. Need follow task. Need produce CSS preserving selectors and layout. However original snippet has only media query with text-align, font-size, padding. Those are layout/typography? text-align is layout? They say unchanged: text-align, vertical-align. font-size typography unchanged. padding margin keep similar ±20%. But request says only colors, shadows, radius, transitions, gradients etc. Original contains no colors. Need perhaps output same CSS? But "Refresh visually" perhaps can adjust padding within ±20? However protected includes text-align, font-size; padding similar. We must not change? They said colors etc may change. But no such properties. We can maybe add visual properties like border-radius, box-shadow, background? But selectors are .app-hero-section .row .col-lg-7, .app-hero-section .badge.bg-warning, contact cards. Need preserve layout. Could add color/shadows but that changes visual identity. Need not remove existing styles? The original CSS likely only these overrides. If we add visual properties, that's okay. Need keep selector exact. But output should be whole CSS. Need be conservative. Since target style asymmetric-blocks and glow effects. But constraints fixed HTML. Maybe add color? But if adding colors to all those elements could be too aggressive. Need preserve layout exactly. We can modify padding? Original has !important padding var(--space-md). Can't change variable. They said keep similar ±20%; but changing custom property? --space-md? Could be root defined elsewhere. We shouldn't change. Maybe no changes possible. The correct maybe output identical CSS? But task demands refresh visual identity. However original snippet visually none. Maybe must use allowed changes only: Since no colors, shadows etc, we can add them perhaps. But careful: adding text-align? not allowed. font-size? no. So output with added box-shadow, border-radius? But then properties absent original; allowed? They said "Only colors, shadows, radius, transitions, gradients." Yes can add color, box-shadow, transition, etc if doesn't break layout.

But target style: asymmetric-blocks. Need bold sections. But snippet includes classes. Could add background to app-hero-section? But layout won't break. Yet selectors may have existing background; adding overrides could be intentional visual refresh. Need choose palette and glow. But "every selector preserved" yes. Could add box-shadow to contact-card, border-radius etc. We need ensure no protected properties changed. Existing text-align center and font-size .85rem, padding remain same. But if output includes all original plus additions. We can modify padding? Not needed.

Need only CSS no markdown. The final answer should be CSS only. Need perhaps include comments? No comments. Could include:
@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;
    }
}
But where visual changes? Add maybe:
#? No IDs? We can add CSS variables at top? Maybe within media query? Need not preserve selectors outside? Could add variables to :root? But output only rewritten CSS, can add? It says only rewritten CSS preserving all selectors. Adding :root selector might violate? likely not if no original :root? Better avoid new selectors.

Could add additional declarations within existing selectors:
.app-hero-section .badge.bg-warning { font-size:.85rem; box-shadow: ...; color:#...; }
But changing badge color could be okay. Need not affect layout.

But contact card has padding var(--space-md) !important. Adding border-radius, background, box-shadow. Need not change padding. But note contact-quick-section .contact-card could have existing class styles; adding can override.

Need target style "asymmetric-blocks" maybe color bold contrasting blocks. But media query mobile only. Need maybe use accent colors.

Let's examine CSS class names: app-hero-section row col-lg-7, badge bg-warning (Bootstrap classes), contact-channels-section article, contact-quick-section .contact-card. Need not know context. We can add visual enhancements. Need maybe use Bootstrap variable --bs-warning? But not guaranteed. Could set color to #1f2933, background? But .badge.bg-warning already has background via bootstrap. Could add box-shadow 0 0 24px rgba(255,193,7,.4), border-radius 10px; color maybe #1f2933? Better not override background/border.

For .app-hero-section .row .col-lg-7: maybe text-align center already. Add maybe? Not visual colors? Could add drop-shadow to row? But "row .col-lg-7" perhaps adding box-shadow to col may affect layout? box-shadow no layout. border-radius maybe no layout? Could add border-radius to interior? Need with overflow? no.

Maybe better preserve. But user explicit "Refresh this CSS visually." Yet maybe they expect output with same layout if no visual properties? Hmm.

Need decide. In these tasks, we must be careful with protected selectors/layout. Original CSS at file #块2/2 might be chunk, only final snippet. We should not alter protected properties. We can add visual enhancements to selectors. Need no markdown. Let's create polished CSS with same selectors and added allowed properties. Ensure no layout changes.

We can choose palette inspired "asymmetric-blocks" & "glow-effects": perhaps bold accent:
- For .app-hero-section .row .col-lg-7 maybe no visual needed. Could add? If add color #f8fafc? Maybe backgrounds. But adding color to entire col could change text if context existing dark. Better not.
- For .badge.bg-warning: add border-radius: 10px; box-shadow: 0 2px 8px rgba(245,158,11,.35), 0 0 24px rgba(245,158,11,.25); maybe text-shadow? maybe color? bootstrap has warning. Fine.
- For .contact-channels-section article, .contact-quick-section .contact-card: add background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(243,244,246,.9)); border:1px solid rgba(99,102,241,.18); border-radius: 16px; box-shadow: 0 12px 32px rgba(15,23,42,.08), 0 0 0 1px rgba(255,255,255,.8) inset; transition: box-shadow .25s ease, transform .3s ease? Wait transform is protected? Not listed? Transform? It says layout? Actually transform could affect layout visually but not HTML. But protected list includes maybe not explicit? They didn't include transform. But "would break HTML layout"? transform won't break layout but changes visual. Better avoid transform. Transition box-shadow only. Need "halo on hover" but if add transition and hover selector? Hover is pseudo-class allowed? They didn't have :hover in original, but can add? Selector with hover would be new selector; not allowed? They say preserve selectors, but can add visual effects? It says pseudo-classes cannot change? Actually "Pseudo-classes (:hover, :focus, ::before, ::after)" under never change; but adding new hover selector? likely not because HTML fixed? Need not add. "Halo on hover" variant but adding selectors may violate "every selector preserved". Better no hover. Could add box-shadow only.

Need include media query exact. But if adding transition inside media query, okay. Need no extra selectors.

Need maybe define CSS custom properties? No.

Need output final CSS code. However one tricky: original includes "padding: var(--space-md) !important;" We can change padding within ±20? Keep exact. fine.

Need perhaps add "box-sizing: border-box"? Not allowed (unchanged). no.

Need use "backdrop-filter"? Could be nice but maybe not on articles. Could add backdrop-filter: blur? But if article background translucent; no. Maybe use backdrop-filter: blur(8px) with background rgba; but on mobile may be okay. Yet if parent behind not colored, no effect.

Need consider at mobile max-width 575.98, text-align center. Adding background maybe full block. Contact cards likely cards with padding. Fine.

Let's craft final CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 10px;
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.35), 0 2px 6px rgba(15, 23, 42, 0.1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border: 1px solid rgba(99, 102, 241, 0.15);
        border-radius: 14px;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.85));
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), 0 0 24px rgba(99, 102, 241, 0.12);
        transition: box-shadow 0.3s ease;
    }
}

But potential issue: The selector .contact-channels-section article, .contact-quick-section .contact-card shares padding !important. If we add border, background, box-shadow etc with same selector list okay. But contact article may have existing border? maybe fine.

However "Bold contrasting blocks: each section different background" - our change uses same for both. Could differentiate? Could set .contact-channels-section article background dark and .contact-quick-section .contact-card light? Since same selector list means shared declarations. Could separate them? But selectors must be preserved? We can rewrite combined selector to two selectors? That changes selector list, disallowed. Need keep comma combined. If we want different backgrounds, add pseudo? no. Use CSS variables? Could use nth-of-type? not allowed. Better same. Could use :is? no. So same style.

Need maybe use accent different? contact-channels vs contact-quick. But perhaps target style asymmetric blocks in general not per element.

Potential protected property: border-radius can change, background, border-color, border-style, box-shadow, transition okay. "border-color and border-style (NOT border-width)" but original no border. Fine.

Need output no markdown. final answer should be exactly CSS.

But need consider "File: assets/css/saishi.css#块2/2" maybe original snippet is part of a larger file. We only output rewritten chunk. The task says only rewritten CSS. If we add extra properties, okay but these might override original. Fine.

Let's revisit constraints:
- ✅ MUST CHANGE: colors, box-shadow, radius, gradient, transition, etc.
- 🔒 NEVER CHANGE: selectors etc.
- 📤 ONLY rewritten CSS, preserving ALL selectors/layout exactly.
- No markdown.

Need maybe "text-shadow" not necessary. We can add text-shadow to badge:
text-shadow: 0 1px 2px rgba(15,23,42,.12); That's allowed but maybe unnecessary. Could add.
Need "filter" maybe add drop-shadow? Not.

Need ensure "font-size:0.85rem" unchanged. "text-align: center" unchanged.
"padding: var(--space-md) !important" unchanged.
Need perhaps "border-radius" and "box-shadow" after padding in combined selector. Since padding is protected, but order not matter.

Need maybe "background": CSS background can be "background: linear-gradient(...)" allowed as gradient. Not layout. Fine.
Need maybe "border-style: solid" allowed if border-width? We set border: 1px solid ... which sets border-width? Border-width is protected? Wait "border-color and border-style (NOT border-width)" means cannot change border-width. But original has no border-width; adding a 1px border might affect layout/box dimensions due to box-sizing? Bootstrap uses border-box likely. But adding border changes visual border and could alter layout? The rule specifically says border-color and border-style may change, NOT border-width. That implies if there was already a border, changing color/style only; but adding border-width changes layout. However original didn't have border property. But they said "border-width cannot change"; adding border-width from none to 1px is a change. It could shift dimensions depending on box-sizing. To be safe, avoid adding border. But target "High contrast borders" suggests need border-color maybe. Yet if no existing border, adding border might violate. Could use outline instead? outline doesn't affect layout. Use "outline: 1px solid rgba(...)"? Outline-color/outline style allowed? Outline styles (color, type) can change. But outline-width? They didn't mention protected? "outline styles (color, type)" Only outline-style and outline-color. Don't set outline-width? But if outline: 1px solid uses width. Could use outline: solid rgba(...); default medium width maybe. Better avoid if concerned.

Adding box-shadow doesn't affect layout. border-radius okay if no border/background maybe no effect. background can affect visual but not layout. But adding background to contact card might cover existing background because background color currently transparent? That's visual. No layout.

Maybe we shouldn't add border because no border in original. But target high contrast borders could use box-shadow or outline. Use box-shadow with 0 0 0 1px rgba... as border effect (shadow doesn't affect layout). Good. So no border-width.

Need maybe "outline" no.

Use box-shadow:
box-shadow: 0 0 0 1px rgba(99,102,241,.2), 0 12px 32px rgba(15,23,42,.08), 0 0 24px rgba(99,102,241,.15).
That creates high contrast border via ring shadow. But if user has no border, okay.

Need maybe "backdrop-filter" but no.

Could use `accent-color`? Not relevant.

Need maybe change CSS variable --space-md? Not allowed.

Let's ensure `transition` property doesn't compile? Use `transition: box-shadow .3s ease;` allowed. Could add `will-change`? no.

Need maybe add `transform: translateZ(0)`? not.

Potential issue: `background: linear-gradient(...)` will override original background maybe from parent. But could create solid background that might affect text contrast. We set white-ish, text dark; contact card text likely dark. okay.
But if contact card was dark theme, light background could hurt. Original file "saishi.css" Chinese maybe tournament, could be light. But unknown. However target style bold contrasting blocks, okay. But maybe better not set background. Yet must refresh visual. Could use `background: rgba(...)`.

Need perhaps use "asymmetric-blocks" target but media query only mobile. Our background uniform doesn't reflect. Maybe okay.

Need maybe for `.app-hero-section .badge.bg-warning` if we add `color: #1e1b4b` maybe dark; Bootstrap `bg-warning` yellow, black text default. Should not override. Could add `box-shadow` and `border-radius`. Fine.

Need perhaps add `border-radius: 999px` for badge? Variant medium radius 8-16px. Use 10px. Good.

Need perhaps `transition` on badge? Could add.

Need perhaps final with `@media (max-width: 575.98px) {...}`.

Let's craft final output:

@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;
        border-radius: 10px;
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.4), 0 2px 8px rgba(15, 23, 42, 0.12);
        transition: box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 16px;
        background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(243,244,246,0.92));
        box-shadow: 0 0 0 1px rgba(99,102,241,0.16), 0 16px 32px rgba(15,23,42,0.1), 0 0 28px rgba(99,102,241,0.12);
        transition: box-shadow 0.35s ease;
    }
}

But "AGENTS: conservative" maybe avoid transition on `box-shadow` because no hover. But okay.

Need maybe add "color" to something? Since variants says glow shadows accent. We did. Need maybe "text-shadow" perhaps no.

Need possibly "asymmetric-blocks" requires mixed gaps and bold padding contrasts but media query doesn't have gap. Cannot change. We comply.

Potential problem: We added `background` to `.contact-channels-section article, .contact-quick-section .contact-card` with selector list. If article already has `padding` with `!important` and background, no issue. But "background" is a visual property not in original; okay.

Need maybe maintain "selectors exactly" including ordering. We preserved.

Need output no markdown.

However, the instruction under "CONTACT CHANNELS SECTION article,... padding: var(--space-md) !important;" maybe if we add `border-radius` after padding with `!important`? no.

Need maybe "box-shadow" with 4th value in second: `0 0 28px rgba(...)` okay.

Need maybe use CSS variables? no.

Let's ensure no `@media` breakpoints changed. yes.

Could the phrase "No AI-Rewritten