/* ============================================================
   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;
    }
}

The user wants me to rewrite a CSS file with a "card-mosaic" target style and "glow-effects" variant. Let me analyze the original CSS:

```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;
    }

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

This is a media query with three rules:
1. `.app-hero-section .row .col-lg-7` - text-align: center (layout, can't change)
2. `.app-hero-section .badge.bg-warning` - font-size: 0.85rem (typography, can't change)
3. `.contact-channels-section article, .contact-quick-section .contact-card` - padding: var(--space-md) !important (padding, can vary ±20%)

The instructions say I need to change visual properties only: colors, shadows, radius, transitions, gradients, opacity, etc.

The original CSS is quite sparse - no colors, shadows, or radius. It's a mobile media query that mostly handles layout alignment and padding.

Since the original doesn't have colors/shadows/radius, I need to ADD visual properties that fit the "card-mosaic" + "glow-effects" style while keeping the selectors and layout properties unchanged.

Let me think about what I can do:

1. For `.app-hero-section .badge.bg-warning` - I can add color, background, box-shadow, border-radius, etc. But note `bg-warning` is a Bootstrap class. I can add a glow effect to the badge.

2. For `.contact-channels-section article` and `.contact-quick-section .contact-card` - I can add background colors, border-radius, box-shadow, transitions, etc.

3. For `.app-hero-section .row .col-lg-7` - text-align: center must stay. I could add color or text-shadow? But it's a container, maybe not appropriate. Actually, adding text-shadow to a container with text could be interesting, but might affect all text inside. Let me be careful.

The key constraint: "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

Since the original has only layout/typography properties, I should ADD visual properties (colors, shadows, radius, transitions) to these selectors to achieve the target style.

But wait - the instructions say "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

This means I should preserve the existing properties and add/modify visual ones. The existing properties are:
- text-align: center (must keep)
- font-size: 0.85rem (must keep)
- padding: var(--space-md) !important (must keep similar, ±20%)

Let me craft the new CSS:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a2e;
        text-shadow: 0 0 24px rgba(255, 107, 107, 0.15);
    }

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

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

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(12px);
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.6);
        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.12), 0 0 24px rgba(99, 102, 241, 0.08);
        transition: box-shadow 0.3s ease, transform 0.3s ease, background 0.3s ease;
    }

    .contact-channels-section article:hover,
    .contact-quick-section .contact-card:hover {
        box-shadow: 0 12px 40px rgba(31, 38, 135, 0.18), 0 0 32px rgba(99, 102, 241, 0.25);
    }
}
```

Hmm, but wait - the media query is for max-width: 575.98px (mobile). Adding hover effects on mobile is less relevant, but still fine.

Actually, I need to be careful. The instructions say:
- "border-color and border-style (NOT border-width)" - I can add border
- "background" can change

But "padding, margin (keep similar values, ±20% maximum)" - I'm keeping padding exactly.

Also I should consider: should I add a `:hover` selector? The instructions say pseudo-classes should be preserved exactly. The original doesn't have `:hover`. Adding new pseudo-class selectors... hmm. The instruction: "Pseudo-classes (:hover, :focus, ::before, ::after)" are in the "NEVER CHANGE" list, meaning I shouldn't change existing ones. But can I add new ones? The selectors must be "preserved character-for-character" - meaning existing selectors must remain. Adding new selectors might be against the spirit. Actually, the instruction says "Keep ALL selectors and layout exactly as-is" which suggests I shouldn't add new selectors either. Let me not add :hover rules to be safe. Instead, I can use transitions that would apply on any state change.

Also, I need to make sure I'm not violating the "background" property. The original badge has Bootstrap's `bg-warning` class which sets `background-color: #ffc107`. I can override with `background` or `background-color`. Since the original CSS doesn't set it, I'm adding it.

But wait - `!important` on the padding. Should I keep it? Yes, the original has `!important`. I'll keep it.

Let me also think about the "glow-effects" variant:
- Glow shadows in accent color: 0 0 24px rgba(accent, 0.4)
- Halo on hover: 0 0 32px rgba(accent, 0.6)
- Medium radius (8-16px)
- Subtle pulsing animations

Pulsing animations would require @keyframes... but animation-name can't change, and adding new keyframes... The original has no animations. Adding @keyframes might be okay since animations are in the "ANIMATION & MEDIA" section and the values inside can change. But adding a new animation-name to a rule... The "animation-name (values like duration/timing CAN change)" is listed under "ANIMATION & MEDIA" as a "NEVER CHANGE" item - meaning don't change existing animation-name. Adding a new one... risky.

Given the conservative mode, I'll skip @keyframes and just do the glow shadows and radius. Actually, let me add a subtle pulsing using a CSS variable? No, that's too much.

Actually, let me re-read: "animation-name (values like duration/timing CAN change)" - this is under "🎬 ANIMATION & MEDIA:" under "NEVER CHANGE". So animation-name should not be changed. But adding new animations? The instruction list says these are things never to change. It doesn't explicitly forbid adding new ones, but "conservative" and "HTML fixed, visual changes only" suggests minimal changes.

I think the safest approach is:
1. Keep all original selectors exactly.
2. Keep all original properties exactly (text-align, font-size, padding with !important).
3. Add visual properties: colors, box-shadow, border-radius, transition, backdrop-filter, etc.

Let me design a cohesive "card-mosaic" with "glow-effects" for mobile.

Since it's mobile, cards should stack. The "card-mosaic" layout pattern is targeted at desktop, but on mobile it collapses. I can still give the cards distinct colors/glows.

Let me pick a palette:
- Neutral background: the `col-lg-7` text color could be a dark slate
- Badge (warning): amber/orange glow
- Contact cards: different accents - maybe one is purple/indigo, the other is teal/cyan

But I can't easily distinguish between `.contact-channels-section article` and `.contact-quick-section .contact-card` without changing selectors... actually I can add separate rules with the same selectors? No, that changes the selector list. I could write them as separate rules:

```css
.contact-channels-section article {
    ...
}

.contact-quick-section .contact-card {
    ...
}
```

But that changes the selector grouping. The original is a comma-separated list. If I split it, I'm changing the selector structure. The instruction says "Selector lists (commas)" are in NEVER CHANGE. So I must keep the comma-separated list intact. That means both card types get the same styles. Fine.

Hmm, but I can still give them the same base style with a glow. That's acceptable.

Let me write the final CSS:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d2a3a;
        text-shadow: 0 0 24px rgba(124, 58, 237, 0.12);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd43d, #ff922b) !important;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 30px;
        color: #4a2c00 !important;
        box-shadow: 0 0 24px rgba(255, 160, 51, 0.4), 0 4px 16px rgba(255, 140, 51, 0.18);
        transition: box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(240, 244, 255, 0.88));
        backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.65);
        border-radius: 16px;
        box-shadow: 0 8px 28px rgba(76, 81, 191, 0.14), 0 0 24px rgba(124, 58, 237, 0.18);
        transition: box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
    }
}
```

Wait, should I also add `color` to `.contact-channels-section article, .contact-quick-section .contact-card`? Adding `color` would override text color on cards. That might be okay but could affect readability. Let me keep it simple and not set a color that might conflict. Or set a dark slate color.

Also `transform` transition - the original doesn't have a transform, but transitioning transform is fine if there's a hover transform. Without a hover rule, it's harmless.

Actually, let me reconsider: The "glow-effects" variant says "Halo on hover: 0 0 32px rgba(accent, 0.6)". To implement hover effects, I need a `:hover` rule. Adding a new selector might violate "keep ALL selectors exactly." Hmm.

Let me re-read the exact instruction from the system prompt:

"🏷️ SELECTORS (CRITICAL - HTML is fixed):
  • Class names: keep EXACTLY (.post-card stays .post-card)
  • IDs: keep exactly
  • Element types (div, h1, span, etc.)
  • Pseudo-classes (:hover, :focus, ::before, ::after)
  • Attribute selectors ([data-x], [type="text"])
  • Combinators (>, +, ~, descendant spaces)
  • Selector lists (commas)"

This says "keep" - as in, don't change these. Adding new selectors is a grey area. The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is." This strongly implies I should only rewrite what's there, not add new selectors.

So I'll avoid adding :hover rules. The glow on hover can't be done without a hover rule. But I can still have a "resting glow" of 24px as specified. That satisfies "Glow shadows in accent color: 0 0 24px rgba(accent, 0.4)".

But wait, I could add a `:focus-within` or... no, that's adding selectors too.

Let me just skip hover and do a nice resting glow. That's the conservative approach.

Now, about the `backdrop-filter` - it adds a nice glass effect. It's a "visual" property. Should be fine.

Let me verify padding: `var(--space-md)` - I'm keeping it exactly as-is. Good.

Font-size in badge: keeping 0.85rem. Good.

text-align: keeping center. Good.

Now, let me also double check: the instructions say "border-color and border-style (NOT border-width)" can change. Since the original has no border, I'm adding one. But "border-width" - I should not add border-width? Actually the instruction is about not changing border-width values. Adding a new border with width... Hmm. It says "border-color and border-style (NOT border-width)" are things I can change. But adding `border: 1px solid ...` introduces a border-width. In strict conservative mode, maybe I should avoid `border` width and just use `outline` or `box-shadow` for borders. Actually, adding a border can affect layout (box-sizing: border-box might not be set). To avoid layout shift, I should avoid adding borders altogether.

Wait, let's check: if box-sizing is border-box (Bootstrap default), adding a 1px border won't change dimensions. But to be extra safe, I'll use `box-shadow` for any border-like effects, or use `outline`. Actually, Bootstrap 5 sets `*, *::before, *::after { box-sizing: border-box; }`, so adding border is safe. But the conservative instruction says "border-color and border-style (NOT border-width)" - meaning I can change color and style but not width. Adding a new border counts as adding width. To be safe, I'll avoid adding borders and use inset box-shadows for borders.

Let me also use `outline` instead. The instructions say "outline styles (color, type)" can change... but again, adding new outline with width... outline-width is not explicitly listed. To be safe, no outline either.

OK, let me finalize without border/outline:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2b2b45;
        text-shadow: 0 0 24px rgba(124, 58, 237, 0.12);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd43d, #ff922b) !important;
        border-radius: 30px;
        color: #4a2c00 !important;
        box-shadow: 0 0 24px rgba(255, 160, 51, 0.4), 0 4px 16px rgba(255, 140, 51, 0.2);
        transition: box-shadow 0.25s ease-in-out, filter 0.25s ease-in-out;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(238, 242, 255, 0.88));
        backdrop-filter: blur(14px);
        border-radius: 16px;
        color: #2b2b45;
        box-shadow: 0 8px 28px rgba(76, 81, 191, 0.14), 0 0 24px rgba(124, 58, 237, 0.18);
        transition: box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

Hmm, adding `transform` in transition but no transform on hover means nothing. I could add `filter` transition but no filter. Let me simplify the transitions to just box-shadow and background.

Actually, let me also think about whether I should use `