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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

We need to rewrite CSS visually. The original is just a media query with text-align and padding, and font-size. There are no colors, shadows, radius, gradients, transitions to change. But the task says refresh visual identity without changing layout structure. We must output only rewritten CSS preserving selectors and layout. Since there are no visual properties other than font-size and padding, we can add color, background, border, box-shadow, etc. But careful: We cannot change font-size (typography fixed), padding within ±20%, text-align unchanged. We can add visual decorations to existing selectors. But the selectors are inside a media query. We can add properties like color, background, border-radius, box-shadow, transition, etc. However, the elements are .app-hero-section .row .col-lg-7, .badge.bg-warning, contact cards. We need to refresh visual identity.

But we need to be conservative: HTML fixed, layout unchanged. We can only change colors, shadows, radius, transitions, gradients. We can add new properties that are visual. But we must not change layout properties. Adding background, border, box-shadow to elements might be okay.

The original CSS is minimal. The target style is asymmetric-blocks and glow-effects. But the CSS only applies to mobile. We can add visual flair.

We must preserve all selectors exactly. The first selector is ".app-hero-section .row .col-lg-7" within media query, second ".app-hero-section .badge.bg-warning", third ".contact-channels-section article, .contact-quick-section .contact-card". We need to keep the media query and the blocks. We can add visual properties. The padding values are var(--space-md) !important. That's a custom property, we shouldn't change? It's layout-related padding. Keep as is or within ±20%. We can't know value. Keep as is.

We can add color, background, border-radius, box-shadow, transition to these selectors. But need to be careful: the first selector is a column, adding background might affect layout? No, it's visual. But background could change appearance but not layout. We can add border-radius, box-shadow. For badge, we can add glow. For contact cards, we can add glow on hover.

Since the target style "asymmetric-blocks" says bold contrasting blocks, but we're in conservative mode, no layout changes. We can use colors. We'll pick a palette with accent color. Let's invent colors.

We need to output only rewritten CSS. Let's craft:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}

We'll add visual properties. We must not change text-align, font-size, padding. We can add color, background, border, box-shadow, border-radius, transition. Also maybe backdrop-filter? But careful with mobile. We can add.

Let's design: Accent color e.g., #6c5ce7 or #ff6b6b. Use gradient backgrounds. For hero column, add subtle background gradient? But the column contains text, could be okay. But if we add background to col-lg-7, it may span only the column, but it's inside a row, could alter visual but not layout. Padding fixed.

We need to ensure no overflow? Box-shadow doesn't affect layout. Border-radius doesn't affect layout.

We need to respect "medium radius (8-16px)" and "glow shadows 0 0 24px rgba(accent, 0.4)".

Let's set custom properties? We can add @media same, inside we can define variables? But variables defined inside media query are scoped to the media? Actually custom properties can be defined on :root, but we won't add new selectors? We can add a new rule for :root? But "Keep ALL selectors exactly" likely means keep existing selectors, but we can add new ones? The task says "Only rewrite the CSS, preserving ALL selectors and layout exactly." It doesn't say we can't add new selectors, but typically we should not add selectors that weren't there because HTML is fixed and adding selectors might be okay but could be considered altering. Best to only use existing selectors. We can use CSS variables inside the existing rules? We can set variable values on existing selectors, e.g., .contact-channels-section article { --glow-color: ...; } but that's a new property but on existing selector. That's fine.

But maybe simpler: just add properties directly.

We must output only the rewritten CSS. We can modify the media query.

Let's write:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f8f9fa;
        background: linear-gradient(135deg, rgba(108, 92, 231, 0.15), rgba(255, 107, 107, 0.05));
        border-radius: 16px;
        box-shadow: 0 0 24px rgba(108, 92, 231, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd93d, #ff6b6b) !important;
        color: #2d3436 !important;
        box-shadow: 0 0 24px rgba(255, 107, 107, 0.4);
        border-radius: 12px;
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .app-hero-section .badge.bg-warning:hover {
        box-shadow: 0 0 32px rgba(255, 107, 107, 0.6);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(108, 92, 231, 0.2);
        border-radius: 14px;
        box-shadow: 0 0 24px rgba(108, 92, 231, 0.15);
        transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article:hover,
    .contact-quick-section .contact-card:hover {
        box-shadow: 0 0 32px rgba(108, 92, 231, 0.35);
        border-color: rgba(108, 92, 231, 0.5);
    }
}

But is adding :hover selector allowed? Pseudo-classes are in "preserve" list (":hover, :focus, ::before, ::after") meaning if they existed, we must keep them exactly. But it says "Selector lists (commas)" etc. It doesn't say we cannot add new selectors. However, we should be cautious. The instruction: "Keep ALL selectors exactly" likely refers to the original selectors. Adding new selectors could be considered not "exactly" preserving? It says "Only the rewritten CSS, preserving ALL selectors and layout exactly". It might mean all selectors that exist must be preserved, but adding new ones is extra. In a conservative mode, we shouldn't add new selectors because it's a visual refresh only, but adding :hover rule is a visual enhancement without changing HTML. Is that allowed? The "NEVER CHANGE" list includes "Pseudo-classes (:hover, :focus, ::before, ::after)" — meaning if they appear, don't change them. It doesn't say don't add. But to be safe, we could avoid adding new hover rules, or we can incorporate hover transitions into existing selectors? Can't have hover without selector.

The task says "Refresh this CSS visually... Only change colors, shadows, radius, transitions, gradients." It implies we can modify the existing CSS rules, not necessarily add new ones. However, adding a hover rule is a transition enhancement. But the HTML is fixed, but CSS can include additional rules? The instruction "Keep ALL selectors exactly" probably means all selectors in the original must remain, but not necessarily no new selectors. Yet "output only the rewritten CSS, preserving ALL selectors and layout exactly" might be interpreted as the output must contain the same selectors, no more, no less. In many tasks like this, they expect you to not add new selectors because it would change behavior. But hover is behavior. Let's avoid adding new selectors to be safe.

We can still add transition property to existing selectors. That allows hover effects if there are existing hover styles elsewhere? But the original doesn't define hover. We can add `transition` for box-shadow, but without a hover rule, no change. However, the target style mentions "Halo on hover", but we can't implement hover if we don't add selector? We could use existing hover rules? There are none. But maybe there are hover styles in other parts of the stylesheet. We don't know. Our output is only this block. We should not assume. Could add `transition` only, but no hover change. That's okay.

Maybe we can add `@media (hover: hover)`? That's a new media query, not allowed? Probably not.

Given the strict instruction, I'll avoid adding new selectors. We'll only modify existing selectors by adding visual properties. But we can also modify the existing rules to add color, background, border-radius, box-shadow, transition. That satisfies the task. We can also change the padding? No.

But the original CSS has no `color` property, no `background`, etc. So we can add them. We'll keep `font-size: 0.85rem` unchanged. Add `background` to the badge. But note the badge has class `bg-warning` from Bootstrap. The original CSS only changes font-size. If we set background, we override the bg-warning background in this media query. That's a visual change, okay.

But the badge element likely has Bootstrap's background color. We can override with gradient. We need to use `!important`? Since the selector `.app-hero-section .badge.bg-warning` has higher specificity than Bootstrap `.bg-warning`? Bootstrap's `.bg-warning` is a single class, ours is two classes, so ours wins. No need !important for background. But for font-size, they used no important, but the original had it. We'll keep.

Now, for the first selector, adding background to `.col-lg-7` may create a block that could affect layout if the column has no padding? It's okay. But we need to be careful: the `col-lg-7` is a grid column; adding background with border-radius could make it look like a card, but it might have internal padding already. We don't change padding. It's fine.

However, the target style "asymmetric-blocks" wants each section different background. But this block only has three selectors. We can assign different accent colors to each. Use one accent for hero, another for badge, another for contact cards.

Let's choose a cohesive palette:
- Primary accent: #6c5ce7 (purple)
- Secondary accent: #ff6b6b (coral)
- Tertiary: #00b894 (green)
- Background dark: #1e1e2f maybe? But we don't know the page background. Since we're adding overrides, we should use semi-transparent colors so it blends.

We need to ensure contrast. The page might be dark or light. We don't know. The original CSS is from a "saishi.css" maybe a sports event site. To avoid breaking readability, we should use subtle backgrounds and text colors that inherit. For the hero column, setting `color: #f8f9fa` may be bad if the page is light. Better not set color unless necessary. But we can set background with low opacity and let text remain. But if we add a dark background, the existing text color might be dark, causing low contrast. We don't know. Better to avoid adding background to the hero column, or use very subtle tint that works on both? Hard.

Maybe we should focus on shadows and borders, not backgrounds, to avoid contrast issues. The task says colors, shadows, radius, transitions, gradients — we can change/add colors. But adding background color could be problematic. We can use `background` with rgba white/black low opacity. In dark mode, `rgba(255,255,255,0.06)` adds subtle light; in light mode, it's nearly invisible. Not ideal but safe.

Alternatively, we can keep the original properties and add only box-shadow, border-radius, transition. And maybe `accent-color`, `caret-color` etc. But that's less visual.

The target style "asymmetric-blocks" emphasizes bold contrasting blocks. But in conservative mode with only a media query, we can add backgrounds to the cards and hero column. Since this is mobile, the hero column is full width, so a background block could look nice.

Let's assume a dark theme? The badge `bg-warning` is likely a yellow badge on a hero. The text color inside badge might be dark. Overriding with gradient from yellow to coral with dark text is fine. For contact cards, adding a semi-transparent dark background with border glow could be nice if the page is dark. But if the page is light, it might look odd. We need to choose colors that work on both? Not really possible.

Given the instruction to refresh visual identity, we can choose a specific palette and apply. The user expects a new look. We'll go with a dark theme palette with neon glows, as "glow-effects" suggests. We'll add background to the hero column as a subtle gradient. But we should not set text color to light because the original text may be dark. Instead, we could set `color` to a light color? We don't know. We can omit color.

Maybe use `backdrop-filter`? That changes visual without affecting text. But mobile support? It's okay. Add `backdrop-filter: blur(8px)` and `background: rgba(255,255,255,0.1)`. But if text is light, not good. Hmm.

Let's re-read the original CSS context: File is "assets/css/saishi.css" maybe for a competition event. The selectors:
- `.app-hero-section .row .col-lg-7`: hero section's column, likely has a heading and text. It is set to center on mobile.
- `.app-hero-section .badge.bg-warning`: a warning badge in hero, maybe "Hot" or "New".
- `.contact-channels-section article, .contact-quick-section .contact-card`: contact cards.

The original CSS is only for mobile. It likely complements a larger stylesheet. So we only need to adjust the mobile experience. We can add glow shadows and radius to these elements. We don't need to add backgrounds necessarily.

Let's write a version that changes colors, adds shadows, border-radius, transitions, and maybe gradients. We'll keep the original declarations.

We need to ensure padding remains the same. The `!important` on padding stays.

Let's craft output:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(180deg, rgba(108, 92, 231, 0.12), rgba(255, 107, 107, 0.06));
        border-radius: 16px;
        box-shadow: 0 0 24px rgba(108, 92, 231, 0.18), 0 8px 24px rgba(0, 0, 0, 0.08);
        transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.4s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd93d, #ff6b6b);
        color: #2d3436;
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(255, 107, 107, 0.4);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(108, 92, 231, 0.08);
        border: 1px solid rgba(108, 92, 231, 0.25);
        border-radius: 14px;
        box-shadow: 0 0 24px rgba(108, 92, 231, 0.15);
        transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    }
}

We should maybe not add `background` to the hero column because it might cause text alignment? No, text-align stays center. Background won't change layout. But it will add a colored block around the content. Might be okay.

Need to be careful with `background` shorthand vs `background-color`. We can use `background: linear-gradient(...)`.

Also, adding `color: #2d3436` to the badge overrides text color. But the badge might already have a color from Bootstrap's `.bg-warning` which sets color to dark? Bootstrap's `bg-warning` only sets background-color, not color. The text might inherit. Setting color to dark is safe because yellow/coral background needs dark text. Good.

For the contact cards, adding a dark semi-transparent background might darken the card if the page is light. We could use rgba(255,255,255,0.06) instead