/* ============================================================
   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 refresh CSS visually, but the original CSS is just a media query with a few rules that are layout/text-alignment related. The instructions say we must change colors, shadows, radius, transitions, gradients, but we cannot change font-size, padding? Actually font-size is typography, not allowed. text-align is layout. padding is layout, we can change within ±20% but here it's with !important and var(--space-md). We could change padding? But it's layout. The user asks to refresh visual identity without changing layout structure or class names. The original file snippet has only a media query with three rules. We must preserve selectors exactly, and only change visual colors, shadows, etc. But there are no colors or shadows in the original CSS snippet. So what can we change? Possibly we can add new properties? The output must be only rewritten CSS preserving all selectors and layout exactly. It says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". We could add visual properties to these rules? But the selectors are fixed, we can add color, background, border-radius, etc. However, if we add properties, we're changing the CSS but not the HTML. That's allowed. But we must not change font-size? Actually font-size is typography, forbidden. But original has font-size: 0.85rem; we must preserve it. Padding must keep similar, so we keep var(--space-md) !important; or adjust within 20%? It's a variable, can't calculate. Keep.

We need to output rewritten CSS. The target style sidebar-classic with gradient-rich. But this is a small media query. We can add visual properties to the elements listed: .app-hero-section .row .col-lg-7, .app-hero-section .badge.bg-warning, .contact-channels-section article, .contact-quick-section .contact-card. We can set background gradients, box-shadow, border-radius, transitions maybe. But we must be careful: these are responsive rules applied under max-width 575.98px. We can add colors, shadows, radius, transitions. But we need to ensure the layout doesn't change. Adding background, border-radius, box-shadow won't affect layout substantially (box-shadow doesn't affect layout, border-radius doesn't, background doesn't). We can also change color, border-color, but original doesn't have those. We can add them. But we must not change padding from var(--space-md) !important? We can maybe change to a different var? But that would change padding. Keep as is.

We need to preserve all selectors and layout exactly. The original has three rules. We can rewrite with added visual flair. Also need to preserve the media query condition. We can add transition for color/background/box-shadow. We can add gradients. Also for the badge, we might want to add a gradient background? But note .badge.bg-warning is a Bootstrap warning badge; adding a background gradient would override bg-warning, which is a visual change, allowed. But we must not change font-size.

We need to include all original properties. Let's list:

Rule 1: .app-hero-section .row .col-lg-7 { text-align: center; }

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

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

We can add to each:

Rule 1: maybe a background gradient? But it's a column container, maybe not. Could add color? text-align center is layout. We can add a subtle text-shadow? But no text content maybe. Could add transition? Not needed. To be conservative, we might leave rule 1 unchanged? But task says refresh visual identity. We could add a background gradient to the hero section? But the selector targets the column only. We can add a background gradient but that would change the look of the column only, possible. But without seeing HTML, risky. However, allowed as visual. Let's add a subtle radial gradient background and border-radius? But that might affect layout if padding? Background doesn't affect layout. Border-radius on a column might look odd. Maybe not.

Alternatively, we can add a color/background to the badge and cards. But rule 1 has no visual properties. We could set color? That would change text color inside col-lg-7. It's a visual change, allowed. But we need to be careful with the palette.

Original file fingerprint and target style "sidebar-classic" suggest this is part of a larger CSS file; the snippet is only a media query. We need to output the entire snippet rewritten, not the whole file. So we only have this snippet.

Let's create a fresh palette. Sidebar darker #252e3a, main lighter. Accent for actions. We'll use gradient-rich. Under 575.98px, maybe mobile. We can add gradients to cards.

For each rule:
- .app-hero-section .row .col-lg-7: maybe add background: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.15), transparent 40%); but if the column is the text container, adding a background might be okay. Better to add a subtle color? But text-align center remains. We can add -webkit-background-clip: text? That would make text gradient, but that would change text color and background. But this rule applies to the column, not text directly. It might affect all text inside. That could be nice. But background-clip text means background on the column, and text transparent? Actually background-clip: text uses the background of the element, and text is transparent to show background. But if we set background on the column, the text becomes gradient. But the column's background is painted behind text, but background-clip: text clips the background to the text only. That is a visual change, doesn't affect layout. However, if there are child elements, the background might not appear? It's fine. But we must include -webkit-text-fill-color: transparent? That changes text color, allowed. But maybe too aggressive for hero column. Alternatively, simpler: add text-shadow with subtle color. For conservative mode, adding text-shadow is safe.

- .app-hero-section .badge.bg-warning: We can add background: linear-gradient(135deg, #ffd166, #f4a261); color: #252e3a; border: none; box-shadow: 0 4px 15px rgba(244, 162, 97, 0.4); border-radius: 50rem; transition: transform 0.3s, box-shadow 0.3s; But transform is layout? Transform changes visual, not layout. It's allowed? The forbidden list doesn't mention transform explicitly. Actually transform affects rendering and can create stacking context, but doesn't change layout flow. It's okay. But we need to be careful with "only colors, shadows, and decorative properties may change" — transform is decorative. But original rule has only font-size; adding transform on hover? We can't add :hover since selector list must preserve? We can add pseudo-class? "Pseudo-classes (:hover, :focus, ::before, ::after)" must be preserved exactly. We cannot add new selectors. So no :hover rule. We can add transition but no hover.

- .contact-channels-section article and .contact-quick-section .contact-card: Add background: linear-gradient(145deg, #ffffff, #f0f4f8); box-shadow: 0 8px 20px rgba(37, 46, 58, 0.08); border-radius: 1rem; border: 1px solid rgba(37,46,58,0.05); transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; But adding border changes border-box? box-sizing is likely border-box globally. Original padding var(--space-md) !important, adding border would increase total size if box-sizing is content-box. But Bootstrap uses border-box, so okay. But to be safe, we can use box-shadow with inset for border? Or add border-color? We need to preserve border-width if there is one. If no border originally, adding border-width 1px changes size if box-sizing is content-box. Most likely border-box, but conservative mode says border-width must not change. It says "border-color and border-style (NOT border-width)" can change. That implies border-width should remain same as original. If original had no border, then we cannot add border-width because that would change border-width from 0 to 1px. So we should not add border-width. We can use box-shadow to create a border effect: box-shadow: 0 0 0 1px rgba(...) , which doesn't affect layout. That's good. So we can use box-shadow for border. We can also use background gradient, border-radius, box-shadow. Good.

Also for the media query itself, we need to keep @media (max-width: 575.98px). We can add spacing? No.

We must also preserve the comma in selector list and line breaks. We can format as original.

Let's craft a rewritten CSS with added visual properties.

Rule 1: .app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #2c3e50; /* maybe */
    text-shadow: 0 1px 2px rgba(255,255,255,0.6); /* But if background has gradient? */
}

However, the hero section maybe has a dark background. The color #2c3e50 could be bad. Better to not add color if unknown. Use a subtle text-shadow only? Text-shadow with white on white could be invisible. Perhaps add a background gradient to the column: background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.5), rgba(255,255,255,0) 70%); This adds a subtle highlight. No layout change. Add border-radius? Maybe 0.5rem. But if the column has full width, border-radius might clip? Could be okay. But I'd avoid changing rule 1 drastically. But the task is to refresh visual identity. Maybe we can add a filter? For example, filter: drop-shadow? No.

Alternatively, we can leave rule 1 unchanged? The task says "You MUST CHANGE: All color values, box-shadow, text-shadow, border-radius, gradients, transition, filter, backdrop-filter, opacity, outline styles, border-color/style, caret-color, accent-color, CSS custom properties values" — if there are none, we can't change. But we can add them. "No changes" might violate the spirit. But the rule is only layout; we could add a decorative property that doesn't affect layout. Let's add a text-shadow to make text pop, and maybe a subtle background gradient.

We need to ensure we don't alter font-size, line-height, etc. The original rule 2 has font-size: 0.85rem. We keep it. We can add text-transform? That's typography, forbidden. Don't.

Let's define a palette:
- Sidebar darker: #252e3a
- Main lighter: #f0f4f8
- Accent: #f4a261 or #e07a5f (warm orange). We'll use #e07a5f with #f4a261 gradient.
- Text dark: #1e293b
- Card background gradient: linear-gradient(145deg, #ffffff, #eef2f6)

For the badge (warning): bg-warning is yellow. We'll override with a warm amber gradient: linear-gradient(135deg, #f6d365, #fda085). Text dark brown #4a3a2a. Add box-shadow: 0 4px 12px rgba(253, 160, 133, 0.35). Border-radius: 50rem. Maybe letter-spacing? No, typography. Add transition: transform .3s? But no hover. Could add transition: box-shadow .3s, background .3s. But without hover, transitions are only useful if state changes (e.g., if class changes). Still can include.

For cards: use two selectors. We'll set background: linear-gradient(145deg, #ffffff, #f0f4f8); border-radius: 1.25rem; box-shadow: 0 10px 20px -8px rgba(37,46,58,0.15), 0 3px 6px rgba(37,46,58,0.08); transition: box-shadow .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1), background .4s ease; But transform? We aren't changing. Could be transitioned if some existing hover later. But no hover rule. It's okay. Add backdrop-filter? Maybe not.

Also border-style? We can set border-color: transparent? But border-width 0? No effect. Use box-shadow ring.

We need to keep padding: var(--space-md) !important. We could change to calc(var(--space-md) * 0.9) to within 20%? That's not necessary. Keep.

Also for rule 1, we can add background: radial-gradient(ellipse at top, rgba(255,255,255,0.6), transparent 70%); border-radius: 1rem; box-shadow: inset 0 -1px 0 rgba(37,46,58,0.05); This creates a subtle highlight at top of column. But if the column is a text container, inset shadow may look weird. Maybe skip.

Let's think: The snippet is only part of the CSS, and the target style "sidebar-classic" indicates a two-column layout with sidebar darker. But this media query is for mobile, so sidebar likely collapses. The hero section on mobile is centered. So we can add visual polish to cards and badge.

The instruction "Keep ALL selectors and layout exactly as-is" — we need to output the same selectors. We can add properties to each rule. We must also preserve the @media (max-width: 575.98px) and the blank lines. We'll output as:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.5), transparent 70%);
        border-radius: 1rem;
        box-shadow: inset 0 -1px 0 rgba(37, 46, 58, 0.04);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f6d365, #fda085);
        color: #3e2f23;
        border-radius: 50rem;
        box-shadow: 0 4px 12px rgba(253, 160, 133, 0.4), 0 1px 2px rgba(37, 46, 58, 0.1);
        transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff, #eef2f6);
        border-radius: 1.25rem;
        box-shadow: 0 10px 20px -8px rgba(37, 46, 58, 0.15), 0 3px 8px rgba(37, 46, 58, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
        backdrop-filter: blur(12px);
        transition: box-shadow 0.45s cubic-bezier(0.4, 0, 0.2, 1), background 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

Wait, backdrop-filter on article? It might not have a background behind? It's okay but maybe heavy. Also backdrop-filter can be tricky on mobile. We can skip.

But we need to change CSS custom properties values? There are no custom properties in the snippet. We can't define new ones because selectors fixed? We could add variable definitions inside the media query? That would be new rules, not allowed. So no.

Important: The self-check says "Every selector character-for-character preserved?" We must preserve the exact selector text. Yes.

Also "width, height, padding, margin within ±20% of input?" We keep padding exactly. Good.

"font-size, font-weight, line-height unchanged?" We keep font-size 0.85rem.

"Colors throughout the file replaced with fresh palette?" We added colors.

"Shadows redesigned (different offsets, colors)?" Yes.

"Border-radius adjusted for new visual style?" Yes.

"No AI marker comments?" Yes.

We need to ensure that we don't add any disallowed properties. Let's review forbidden: display, position, grid-template-*, flex-*, width, height, min/max, padding, margin, gap, justify-content, align-items, align-self, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, object-position, text-align, vertical-align. We didn't change text-align. We didn't change padding. We added background, color, border-radius, box-shadow, backdrop-filter, transition. Those are allowed. border-radius is allowed. transition is allowed. backdrop-filter is allowed. color is allowed. background is allowed. box-shadow is allowed. Good.

But wait: "background" is allowed? Yes, color values, gradients. It says "All color values: background, color, border-color, fill, stroke, outline-color"; also "gradient colors and stops in linear/radial/conic-gradient". So yes.

We should ensure no font-size changed. Good.

Potential issue: "text-align: center" is layout and we preserve. Good.

The rule 1