/* ============================================================
   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 the provided CSS while preserving all selectors and layout properties. The original is:

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

It's a media query with only text-align, font-size, padding. We are told to change visual identity only, but these properties are not colors/shadows/radius/transitions. However, we may adjust paddings within ±20%? Actually, padding is allowed to change within ±20% per instructions: "padding, margin (keep similar values, ±20% maximum)". But the original uses `var(--space-md) !important`. We can replace it with a similar value. But we must be careful: we should keep the same selectors, same structure. We can add new properties like border-radius, box-shadow, background, etc. But the original CSS doesn't have any of those. The target style is "sidebar-classic" with "airy-rhythm", but this CSS snippet is just a media query for small screens. We can apply visual enhancements to those elements.

We need to "Refresh the visual identity WITHOUT changing layout structure or class names." Since original is minimal, we can add colors, shadows, radius etc. to those selectors. But we must preserve the existing property declarations? Wait, the rules say "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." That means we need to keep all selectors and any layout properties (display, position, width, height, padding, margin, etc.) unchanged or nearly unchanged. But we can add new visual properties. We should definitely keep the existing properties like text-align, font-size, padding. We can adjust padding slightly, but the instruction says padding/margin keep similar values ±20% max. `var(--space-md)` is a variable, we don't know its value. But we can replace with a fixed value that is plausible? Maybe better to keep the var? But the instruction says "CSS custom properties (--color-*, --shadow-*) values" may change, but `--space-md` is a spacing variable, not color/shadow. The "NEVER CHANGE" list includes "padding, margin (keep similar values, ±20% maximum)". So changing `--space-md` to another variable could be risky. Better to keep it as is. But we can add other properties.

We should also consider whether the media query itself can change? "Media query breakpoints (conditions only)" are in "NEVER CHANGE" – so keep `(max-width: 575.98px)` unchanged.

So we will output the same media query, same selectors, same existing declarations, plus additional visual properties that fit the target style. But we must ensure not to break the layout. Adding border-radius, box-shadow, background, color, etc. is fine. But note: these elements might already have their own styles outside this media query; adding properties here will apply at small screens. We need to be careful about using `!important` – we can add `!important` if needed? But not necessary.

What visual changes can we add to:
- `.app-hero-section .row .col-lg-7`: this is a hero section column, centered on small screens. We could add a subtle background, border-radius, box-shadow, padding? But adding padding might be layout change; but within ±20%? It doesn't have padding currently. We could add padding but that changes layout. Better to avoid adding spacing. Add color, text-shadow, maybe a background gradient? But the col is a grid column; adding a background could be visually nice. But "aggressive" target says sidebar classic, but this is just a snippet, not the whole file. We need to apply the "airy-rhythm" variant: generous spacing, large border-radius, soft pillowy shadows. We can add border-radius and box-shadow to the elements.

- `.app-hero-section .badge.bg-warning`: a warning badge. We can change background color? But `bg-warning` is a Bootstrap class; if we override background, we need to use a different color. We can add box-shadow, border-radius, maybe a new background gradient? But we should keep the class name. The original only has font-size. We can add `background`, `color`, `box-shadow`, `border-radius` to make it more "airy".

- `.contact-channels-section article` and `.contact-quick-section .contact-card`: these are cards. We can add border-radius, box-shadow, background, border, transition.

But we must keep the existing `padding: var(--space-md) !important;` as is or slightly adjust. We'll keep it.

The "TARGET STYLE: sidebar-classic" mentions a two-column grid, but that's not present in this snippet. Since the original CSS does not contain any grid layout, we cannot introduce new layout properties. The "Aggressive" description is irrelevant. We'll focus on the "airy-rhythm" variant: large border-radius, soft shadows, breathing room.

We need to output only CSS. So I'll produce:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, rgba(37, 46, 58, 0.06), rgba(37, 46, 58, 0.02));
        border-radius: 24px;
        box-shadow: 0 12px 32px -8px rgba(37, 46, 58, 0.12), 0 4px 12px rgba(37, 46, 58, 0.06);
        backdrop-filter: blur(8px);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f6c85f, #f0a03c);
        color: #252e3a;
        border-radius: 999px;
        box-shadow: 0 8px 20px -6px rgba(240, 160, 60, 0.45);
        padding: 0.35rem 0.75rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 20px;
        box-shadow: 0 16px 40px -12px rgba(37, 46, 58, 0.18), 0 4px 16px rgba(37, 46, 58, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.6);
        transition: box-shadow 0.3s ease, transform 0.3s ease, background 0.3s ease;
    }
}

But wait, we added `padding` to the badge, which is a layout property change. The original badge did not have padding; adding padding could change its size. But it's a badge, padding is typical. However, instruction: "width, height, padding, margin (keep similar values, ±20% maximum)" – if there was no padding, adding padding is not "similar". Better avoid adding new padding/margin. We can instead use border-radius and box-shadow only. For the badge, maybe we can leave it without padding. But to achieve pill shape, border-radius is enough. We can add background and color. But `bg-warning` already has a background; we can override with a custom gradient. That's visual.

For the contact cards, we added `background`, `border-radius`, `box-shadow`, `border`, `transition`. The original had no background, so adding a background might obscure underlying design. But the target "airy-rhythm" likely expects cards to pop. However, to be conservative, we should avoid adding background if it changes the look drastically? Actually, the task is to refresh visual identity, so adding background is fine. But ensure that we don't override necessary layout properties. Background doesn't affect layout.

We also added `backdrop-filter` to the hero column; that's allowed.

But we must consider the "self-check" list: every selector preserved, display/position/grid unchanged, width/height/padding/margin unchanged or within ±20%, font properties unchanged, colors replaced, shadows redesigned, border-radius adjusted. We didn't change padding/margin except we didn't change existing padding. We added `padding` to the badge, but the original had no padding. The self-check says width, height, padding, margin within ±20% of input. If input didn't have padding, adding padding could be considered a violation. So better not add padding to the badge. But a pill badge usually needs horizontal padding; yet the badge may already have padding from Bootstrap. In this media query, we are only overriding font-size. If we add padding, we might override Bootstrap's padding? Actually, `bg-warning` is a Bootstrap utility class, and `.badge` has its own padding. Adding `padding` may be redundant but could change the badge size. To be safe, we can omit padding from the badge, or we can use `padding: 0.35em 0.75em` but that might differ from Bootstrap's. Better not add.

For the contact cards, the original has `padding: var(--space-md) !important;`. We keep that. We can add `border-radius`, `box-shadow`, `background`, etc. That's fine.

For the hero column, original has only text-align. We can add background, border-radius, box-shadow, text-shadow. But adding `background` to a `.col-lg-7` might make the whole column stand out. That could be okay. But it might affect layout if the column has a background that extends to edges. The column has no padding; adding background could look odd. Perhaps add `border-radius` and `box-shadow` with a subtle background. However, to avoid layout changes, we can use a pseudo-element? But we cannot add pseudo-element selectors because those are not in original? Wait, we can add pseudo-elements? The rule says "Pseudo-classes (:hover, :focus, ::before, ::after)" are in the "NEVER CHANGE" list meaning keep them as they are, but we cannot add new selectors that weren't there? Actually, the instruction: "Every selector character-for-character preserved?" It means we must not alter existing selectors; but can we add new selectors? The output should be the rewritten CSS for the given file. We are not supposed to add arbitrary new CSS rules that weren't in the file? The original file contains only these rules. The task is to "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is." That implies we keep the same selectors and properties, but we can change values and add new declarations within the existing rules. We should not add new rule blocks. So no pseudo-elements.

Thus, within each existing rule, we can add declarations. That's safe.

Now, we need to decide on a color palette. The target style mentions "Sidebar darker (#252e3a), main lighter". The airy-rhythm variant: large border-radius, soft pillowy shadows. Let's use a palette:

- Dark ink: #252e3a
- Accent: #e8a33d (golden)
- Soft background: rgba(255,255,255,0.6)
- Shadow colors: rgba(37,46,58,0.08), rgba(37,46,58,0.15)

Let's craft the rewritten CSS:

- For `.app-hero-section .row .col-lg-7`:
  - `background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.8), rgba(255,255,255,0.2));`? Or use a soft gradient.
  - `border-radius: 28px;`
  - `box-shadow: 0 20px 50px -20px rgba(37, 46, 58, 0.2), 0 6px 18px rgba(37, 46, 58, 0.05);`
  - `backdrop-filter: blur(10px);`
  - Maybe `color: #252e3a;`? But the original didn't set color; inheriting body color. We can set a text-shadow for airy feel: `text-shadow: 0 2px 8px rgba(255,255,255,0.6);`
  - `transition: box-shadow 0.4s ease, background 0.4s ease;`? On a media query, transitions may not matter.

- For `.app-hero-section .badge.bg-warning`:
  - `background: linear-gradient(135deg, #ffd86b, #f5a623);`
  - `color: #252e3a;`
  - `border-radius: 999px;`
  - `box-shadow: 0 10px 24px -8px rgba(245, 166, 35, 0.6);`
  - No padding.

- For the contact cards:
  - Keep `padding: var(--space-md) !important;`
  - `background: rgba(255,255,255,0.75);`
  - `border-radius: 24px;`
  - `box-shadow: 0 24px 60px -20px rgba(37,46,58,0.2), 0 8px 20px rgba(37,46,58,0.06);`
  - `border: 1px solid rgba(255,255,255,0.7);`
  - `transition: box-shadow 0.35s ease, transform 0.35s ease, background 0.35s ease;`
  - Perhaps `backdrop-filter: blur(12px);`

But careful: the original selector list is `.contact-channels-section article, .contact-quick-section .contact-card`. We can add a hover state? We cannot add `:hover` because that would be a new selector. But we can add `transition` to the existing rule; if there is already a hover rule elsewhere, it will use the transition.

Now, do we need to preserve the `!important` on padding? Yes.

We must not change `font-size: 0.85rem` or `text-align: center`.

One more thing: the instruction says "✅ YOU MUST CHANGE: ... All color values: background, color, border-color, fill, stroke, outline-color ... box-shadow ... text-shadow ... border-radius ... gradient colors ... transition timing ... filter, backdrop-filter ... opacity ... outline styles ... border-color and border-style ... caret-color, accent-color ... CSS custom properties (--color-*, --shadow-*) values". The original CSS has no colors/shadows/radius, so we need to introduce them. That's fine.

Should we change the media query condition? No.

Let's also consider whether adding `background` to the hero column could be seen as changing the "visual identity" but not layout. Yes.

Now, "sidebar-classic" target suggests "Functional accent for actions" – our accent is the golden badge. Good.

Let's produce the final CSS. Ensure no markdown fences. Ensure first character is `@`.

Potential issue: We are adding `backdrop-filter` to an element within a media query for small screens. It's allowed.

Let's write the CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.25));
        border-radius: 28px;
        box-shadow: 0 20px 50px -20px rgba(37, 46, 58, 0.18), 0 6px 16px rgba(37, 46, 58, 0.06);
        backdrop-filter: blur(12px);
        text-shadow: 0 2px 12px rgba(255, 255, 255, 0.5);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffdb6b, #f2a33c);
        color: #252e3a;
        border-radius: 999px;
        box-shadow: 0 12px 28px -10px rgba(242, 163, 60, 0.65);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.72);
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.8);
        box-shadow: 0 24px 60px -22px rgba(37, 46, 58, 0.2), 0 8px 20px rgba(37, 46, 58, 0.06);
        backdrop-filter: blur(10px);
        transition: box-shadow 0.35s ease, background 0.35s ease, transform 0.35s ease;
    }
}

Check: Did we change any layout? The `background` with gradient on `.col-lg-7` might overflow because of border-radius, but border-radius will clip. No layout properties changed. `backdrop-filter` doesn't affect layout. Good.

But we should be careful: adding `background` to the hero column might cover the background image of the hero section. The class `.app-hero-section` likely has its own background. By applying a semi-transparent white background to the column, we may lighten the hero, which is a visual identity change. That's acceptable.

Also, we set `color` on the badge; that's okay.

Make sure the `transition` on the cards doesn't affect layout. It does not.

One more thing: The instruction says