/* ============================================================
   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 modify the CSS visually while preserving selectors and layout. The provided CSS is a media query block with a few rules. We need to change visual properties only. However, the rules contain font-size, padding, text-align. Font-size and padding are layout/typography? Font-size is typography, cannot change. Padding is layout, can change ±20%. But the target style says symmetric-grid, soft-shadows. However there are no colors or shadows in the original. We need to inject visual properties without changing existing ones? We can add new properties that don't affect layout? But we must not change layout. Adding box-shadow or border-radius won't change layout, but may alter visual. Also we can change colors for elements if they have none. But the original has no colors. We should add background, border-radius, box-shadow to the mentioned elements? We must preserve all selectors exactly. We can append new declarations within the existing rules, but we cannot change the selectors. Also we can change existing property values that are visual: font-size is typography, cannot change. padding is layout, can change ±20% but better leave as is. text-align is layout? It's typography? Actually text-align is in the NEVER change list. So we cannot change text-align. So we must keep those properties as is.

We need to refresh the visual identity. Since the CSS only contains a media query with limited rules, we can add new visual properties to the given selectors: .app-hero-section .row .col-lg-7, .app-hero-section .badge.bg-warning, .contact-channels-section article, .contact-quick-section .contact-card. But adding properties like background, border-radius, box-shadow to these elements might be okay. However we need to be careful: adding background to .app-hero-section .row .col-lg-7 might change look but not layout. Could be too much. Alternatively, we can add a new rule? No, we must preserve selectors; we can only modify existing rules. But we can also add new rules? The instruction says "Rewrite this CSS visually. Keep ALL selectors and layout exactly as-is." This means we can retain existing selectors and rules, but we can also introduce new CSS rules? Typically "keep all selectors" means don't delete or rename them, but adding new ones is allowed? It says "Output the rewritten CSS". We can add new rules to refresh visual identity, but they might modify layout if applied to same elements. Better to stay within existing selectors and adjust or add visual properties.

Let's examine the original 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;
    }
}
```

We need to change colors, shadows, radius, transitions, gradients. There are none. So we need to introduce them. But we must keep layout exactly: no change to display, position, grid, width, height, padding, margin, gap, etc. We cannot change text-align, font-size. So we can add visual declarations that don't affect layout: background-color, color, border-radius, box-shadow, transition, border? Border width is not allowed to change? Actually border-color and border-style can change, but border-width is not in the never-change list? It says "border-color and border-style (NOT border-width)" so border-width cannot change. But adding a border where none exists would add layout effect (border-width affects layout unless box-sizing border-box). So avoid adding borders to elements without border.

We can add background-color, border-radius, box-shadow, transition, maybe backdrop-filter. These do not affect layout typically. Also color, text-shadow. But color might affect text. That's fine.

But the selectors target specific components. We can create a fresh visual style: soft-shadows, large border-radius, smooth transitions, balanced palette. We need to decide a palette. The "symmetric-grid" target style suggests equal grid but the CSS doesn't have grid; it's a media query. We might not need to apply that. The effect variant "soft-shadows" is relevant: multi-layer shadows, large border-radius, smooth transitions.

Since the original CSS has few properties, we can add these visual properties within the existing rules. But note: the first rule .app-hero-section .row .col-lg-7 has text-align: center; adding box-shadow to a column might be odd. But it's a generic class. We can add visual flair.

Also we need to ensure we don't break the media query. We can add properties to each rule. But is it acceptable to add properties? Yes.

We also might add a new rule? The instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." If we add new selectors, we are not preserving exactly? It says "preserving ALL selectors" not "only existing selectors". But adding new selectors could be seen as not preserving. Safer to only modify existing rules, adding new declarations.

However, to satisfy the task, we need to refresh visual identity. We can add a color palette via CSS custom properties? But the original doesn't define any. We can add declarations inside the media query, for example setting custom properties? That would not affect layout. But custom properties are not visual by themselves. We can add background etc.

Let's craft a rewritten CSS:

- For .app-hero-section .row .col-lg-7: keep text-align: center; add maybe background: transparent? Hmm. The hero section column may need background? Better not. Could add a subtle transition, border-radius, box-shadow? Adding shadow to a column could be weird. But the instruction says change visual identity. We need to produce a fresh palette. Perhaps we can set color and text-shadow? But col-lg-7 is a layout container, not a text element.

Maybe we should focus on the elements where visual properties are meaningful: .badge.bg-warning and .contact-card/article.

We can add:

```
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background: linear-gradient(135deg, #f6d365, #fda085);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
    border-radius: 12px;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
```

But transform is an animation property that changes layout? It doesn't affect layout, but transform is not listed in never-change? It's not listed. But adding transform to an element could change visual; but we need to be careful: transform can change appearance but not layout. However adding transform on a static element might shift it. Better avoid transform unless on hover. We don't have hover. Since original had no hover, we can add transition without transform. But transition property is allowed.

- For .contact-channels-section article, .contact-quick-section .contact-card: keep padding: var(--space-md) !important; add background, border-radius, box-shadow, transition.

We need to ensure the padding remains same or within ±20%. We'll leave as is.

Also for the first rule, we can add a background? Perhaps a very subtle radial gradient? But if it's a column inside a row, adding background could affect the look but not layout. We can add border-radius and box-shadow to create cards. But text-align: center remains.

Maybe we can add a `color` to set text color. But .col-lg-7 may contain text. We can set color: #2d3436; and text-shadow maybe. But without knowing context, could be okay.

We also need to adjust existing values if they are visual? font-size and padding are not visual (font-size typography, padding layout). So we leave.

We need to use "symmetric-grid" target style? It mentions Layout pattern (Aggressive only). But our mode is conservative, so we don't change layout. We can apply balanced harmonious palette and consistent shadows. Let's choose a palette:

- Primary warm accent: #f6d365 to #fda085 (for badge)
- Neutral background: maybe rgba(255,255,255,0.8) with backdrop-filter: blur(10px) for cards.
- Shadow layers: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)
- Border-radius: 16px or 20px.

We need to be careful with `!important` in padding. We can append declarations with or without !important.

Let's write a full rewritten CSS, preserving everything and adding visual properties.

Potential issue: If we add transition to elements that don't have hover, it does nothing but okay.

Let's also change text-shadow? For .app-hero-section .row .col-lg-7, we could add `text-shadow: 0 2px 4px rgba(0,0,0,0.08);` but text-align center plus text shadow on container may apply to all text. Might be okay.

Let's craft:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d3436;
        text-shadow: 0 2px 4px rgba(0,0,0,0.06);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffecd2, #fcb69f);
        border-radius: 12px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
        transition: box-shadow 0.3s ease, filter 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255,255,255,0.85);
        backdrop-filter: blur(8px);
        border-radius: 16px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
        transition: box-shadow 0.35s ease, background-color 0.35s ease;
    }
}
```

But wait: adding backdrop-filter can affect visual but not layout. It creates a new stacking context? It can affect layout? Not really. But in conservative mode, allowed.

We need to ensure we didn't change any selector. Yes.

But the original had `.app-hero-section .badge.bg-warning` with font-size. Adding background gradient might override the badge's inherited background? Since it's bg-warning, likely has a background from Bootstrap. We can override with gradient. That's a color change.

Now, we should also consider that padding with `!important`: we keep exactly. We added `background: rgba(...)` and `border-radius` etc. No conflict.

But is "background" a color replacement? Yes. It's visual.

Maybe we should also adjust the color of the badge text? We could add `color: #fff` or something. But the badge probably has dark text. We shouldn't assume. Maybe don't set color to avoid accessibility issues. Better add a subtle border? No.

We need to output only CSS.

But we must not include comments.

Let's see if there's a requirement to follow "target style symmetric-grid" with equal grids and 24px gap. There is no grid in this CSS; we cannot add grid without changing layout. So ignore.

One thing: The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It doesn't say "add" properties, but "change" implies modifying existing values. Since there are no colors, shadows, radius, transitions, gradients, we need to introduce them. That's acceptable.

Let's make sure the CSS is valid and doesn't include any markdown.

We might also want to use CSS custom properties? Could define in :root? But original CSS is inside media query, no root. Adding a `:root` block would add new selector, which might violate. Better not.

We can use variables? Not necessary.

Let's refine the shadow style. Multi-layer soft shadows: `0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12)`. We'll use exactly that.

Large border-radius: 16px, 20px, 24px. Use 16px for cards, 12px for badge. Good.

Smooth transitions: `0.3s ease`, `0.35s ease`, `0.4s ease`. Good.

Now, for `.app-hero-section .row .col-lg-7`, adding `color` and `text-shadow` may be okay. But text-shadow on the column creates a shadow on all text; maybe too much. But it's a visual identity refresh.

Could also add a background gradient to the hero column: `background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0));` But that might look odd. I'll keep color and text-shadow subtle.

Alternatively, we can add `border-radius` and `box-shadow` to the column to make it a card. But it's a column inside a row; adding card style might be intended. However, the target style symmetric-grid likely wants uniform cards. But not knowing the HTML, maybe safe.

Let's think: The media query is for small screens. The existing rules are mobile adjustments. We shouldn't add big shadows to a column that occupies full width. But soft shadows can be okay.

Maybe a better approach: Add `border-radius: 24px` to `.contact-channels-section article` and `.contact-card`, and to badge, but not to the hero column. Instead, for hero column, add a soft background radial gradient? Hmm.

The instruction says "Refresh the visual identity WITHOUT changing layout structure or class names." So we can change the look of any selected element. The first selector is specifically `.app-hero-section .row .col-lg-7`; we can style it.

Let's produce final output.

We must preserve exact selectors and property values for unchangeable properties. We'll keep `text-align: center;` and `font-size: 0.85rem;` and `padding: var(--space-md) !important;`.

Let's write final CSS:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d3436;
        text-shadow: 0 2px 4px rgba(0,0,0,0.06);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f6d365, #fda085);
        border-radius: 12px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
        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(255,255,255,0.85);
        backdrop-filter: blur(8px);
        border-radius: 16px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
        transition: box-shadow 0.35s ease, background-color 0.35s ease;
    }
}
```

Wait: we added `transform` in transition for badge. If there is no hover, it's okay. But adding `transform` in transition not changing any value; it's fine. However the instruction says only change transitions. Yes.

We added `backdrop-filter: blur(8px)` which is allowed. But note: backdrop-filter can affect performance and also if background is semi-transparent, it blurs what's behind. That's a visual change.

Need to ensure that `background: rgba(255,255,255,0.85)` is a color change. Good.

One concern: The contact cards may originally have no background, now they get white translucent background, which could change contrast. But that's intended.

Also, `color: #2d3436` on hero column might override text color and make it dark. Could be okay. But if the hero section already has a dark background, this would break. But we don't know. Maybe we should not set color. The task is to refresh visual identity, but without knowing context, we should be conservative. But the mode is conservative. We should only change visual properties where they won't break readability. Setting `color` without knowledge might be risky. Maybe we can skip color and text-shadow for the column; instead, give it a subtle border-radius and box-shadow? But that might look like a card. Hmm.

The original rule for hero column only had `text-align: center;` to center content on mobile. Adding box-shadow to the column would create a box around the whole column; maybe not desired. Adding color may affect text color but not layout. I think it's okay, but to be safer, I'd set color to a neutral dark that works on light backgrounds. Most hero sections have light text on dark backgrounds? Actually "app-hero-section" might be a dark hero. If we set color dark on dark background, bad. Better not set color. Instead, we can add a background gradient that is very subtle, but that could