/* ============================================================
   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 answer rewritten CSS only. Need inspect original CSS block. It's a media query with three rules: text-align center (layout, unchanged), font-size (typo unchanged), padding (layout, keep similar maybe unchanged). No colors/shadows/radius/transitions/gradients to change. Target style sidebar-classic / gradient-rich but original has no colors. Need output CSS preserving all selectors/layout, visual changes maybe none? Need perhaps introduce visual properties? But HTML fixed, only colors shadows decorative may change. Since there are no decorative properties, "refresh visually" could mean maybe add color properties? However rule text-align comment says unchanged. We should only output rewritten CSS preserving selectors and layout exactly. But "Only colors, shadows, and decorative properties may change" means if no decorative existing, output same? But target style "gradient-rich" maybe apply to these elements? However media query only mobile. Need decide.

We are expert CSS designer in conservative mode. Original CSS only typography/layout in media query. We cannot change font-size (typo) cannot change text-align (layout). Padding within ±20% could change but should keep similar. Since no colors, shadows to refresh. Could output same CSS. But request ID expects rewrite? We can maybe adjust padding values within 20%? But target style perhaps should add background? Need be careful because adding background or gradient could alter visual identity but no layout. Since HTML fixed and selectors existing, can add decorative properties to the selected elements? It says only colors, shadows, and decorative properties may change. That means we can add colors/background gradients/border-radius/shadow if not originally present? But "Refresh this CSS visually" and "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". It doesn't say you can't add declarations. Need obey can't change typography/layout. Could add visual enhancements to those elements. But original rules include text-align, font-size, padding. To meet target style, maybe set background gradients for .contact-card etc? But it's a media query only at max-width 575px. Hmm.

Need preserve all selectors. Could rewrite with same exact selectors and declarations. But maybe to satisfy "gradient-rich" we can add a linear-gradient for .app-hero-section etc? Yet "text-align: center" remains. Need not change selectors. We can add colors etc.

Let's analyze original:

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

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

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

This is likely a fragment from a stylesheet. Our output should be same media query, same selectors, same layout declarations, and maybe visual additions. The target style "sidebar-classic" (darker sidebar etc) seems irrelevant because no sidebar. "gradient-rich" says "Linear-gradient or radial-gradient on most backgrounds" "Gradient borders via border-image" "Multiple stops for richness" "Smooth long transitions (0.4-0.6s cubic-bezier)". Could add to selected elements.

Need decide whether to add decorative properties at all. Since original has no colors, maybe it's okay to add `background` to `.app-hero-section .badge.bg-warning`? But that could conflict with utility classes `bg-warning` Bootstrap. It might overwrite background-color with gradient. But no layout implications. However media query and utility class: `.bg-warning` uses Bootstrap's important? Actually `.bg-warning` sets background-color with !important? Tailwind/CSS? Here `badge.bg-warning` likely Bootstrap. Overriding background with gradient could be okay if more specific. But target style wants gradient-rich.

But is adding declarations "refresh visual identity"? Yes.

Need preserve "padding: var(--space-md) !important" maybe can adjust? We can keep exactly. Padding is layout, within ±20%, but don't change.

Need consider output should be "only colors, shadows, and decorative properties may change" means values in padding cannot change. So keep text-align, font-size, padding unchanged. We can add new declarations. But if output includes additional declarations, "preserving ALL selectors and layout exactly"—yes.

Need perhaps no markdown fences. First character CSS. Need final no explanation.

Let's craft thoughtful CSS within media query.

Original selectors:
1. `.app-hero-section .row .col-lg-7 { text-align: center; }` We can add maybe text-shadow? But that affects typography? text-shadow is visual. Could add `text-shadow: 0 1px 20px rgba(...)` but text-shadow could affect readability and not layout. However typography system fixed, text-shadow allowed. But if background not changed, weird. We should avoid adding unnecessary.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` We can add `background: linear-gradient(...)`, `border-radius`, `box-shadow`, maybe `padding`? But font-size unchanged. We can add background gradient. Need maybe utility class `.bg-warning` has background-color; to override, use `background-image: linear-gradient(...) !important`? If only `background: linear-gradient` not important, `.bg-warning` may be higher specificity? `.badge.bg-warning` has specificity 0,2,0 (two classes). `.bg-warning` is one class, so our rule wins if same source? Actually `.app-hero-section .badge.bg-warning` (0,3,0) higher than `.bg-warning` (0,1,0). For media query, normal source order with higher specificity wins. If `.bg-warning` has `!important`, need important? Bootstrap's `.bg-warning` does have `background-color: #ffc107 !important;` I think utilities often use !important. In Bootstrap 5, `.bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; }`? Actually yes utilities are important. To override, we'd need `background-color: ... !important` or use `background-image` doesn't override background-color? A gradient sits over background-color? CSS background-image renders over background-color, so even if background-color remains, gradient image visible. We can set `background-image: linear-gradient(...) !important` to be safe. But that changes mostly visual. Could use `background: transparent`? No.

3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` We can add `border-radius`, `box-shadow`, `border: 1px solid`? Border width? Border added with width could affect layout? Box-sizing likely border-box? But adding border could alter width if box-sizing not border-box. "border-style" can change but border-width must not change. We shouldn't add border-width because layout? Border width is layout dimension but maybe not listed forbidden? It says only border-color and border-style (NOT border-width) may change. Adding a border-width would violate? Could add no border. Better avoid.

Could add `background` with gradient to these cards, `border-radius`, `box-shadow`. Border-radius doesn't affect layout. Box-shadow doesn't. Background doesn't. Transition maybe add.

Need preserve `transition`? Original none. We can add transition for color/shadow but no properties changing. "Smooth long transitions (0.4-0.6s cubic-bezier)" Maybe add `transition: background 0.5s cubic-bezier(...), box-shadow 0.5s cubic-bezier(...), transform 0.5s`? But transform property may be okay? To be conservative, visual only. However could affect hover? No. We can add `transition` without layout. But adding transform property not needed. We can add transition for background/box-shadow. But no hover rules in block. Maybe okay.

Need think if this is only chunk from file. They called "assets/css/saishi.css#块2/2" "块2/2" means block 2 of 2. Maybe original CSS includes blocks, this one only media query. They want rewrite full CSS file? But they input only one block. We must output CSS based on given block. No markdown.

Need maybe include only within media query; no extra media? Already has media.

Potential final:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 2px 12px rgba(37, 46, 58, 0.12);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-image: linear-gradient(135deg, #ffb347 0%, #ff6b6b 50%, #c94b4b 100%) !important;
        border-radius: 999px;
        box-shadow: 0 6px 18px -6px rgba(255, 107, 107, 0.55), 0 2px 6px rgba(37, 46, 58, 0.1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 16px;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
        box-shadow: 0 8px 24px -12px rgba(37, 46, 58, 0.35), 0 2px 6px rgba(37, 46, 58, 0.06);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

But is `text-shadow` on col-lg-7 okay? It might affect readability, but it's decorative. However if no background, maybe subtle. But maybe unnecessary.

Need consider "preserving ALL selectors and layout exactly"—we preserved. But adding `background-image` to `.badge.bg-warning` might make text color unreadable if original badge text is white? Could use gradient with yellow/orange and dark text? Bootstrap badge default color? `.bg-warning` text color is `var(--bs-badge-color)` maybe white? Actually badge color is color-contrast? But not our concern. Still target gradient rich with "functional accent". We need choose palette: Sidebar darker (#252e3a), main lighter, functional accent. Maybe use #252e3a for shadows, accent #ff6b6b.

Need maybe set `background` on article and card to a richer gradient? But these are contact cards, likely on light background. Adding dark translucent gradient could be odd. Maybe use `linear-gradient(135deg, rgba(37,46,58,0.04), rgba(37,46,58,0.01))` and border? Wait target gradient-rich wants gradients on most backgrounds. Use subtle.

Need avoid `background` with `rgba` if no base background. It could overlay.

Need maybe use `backdrop-filter: blur`? Decorative, but may not support; okay. But no.

Need perhaps use `border-radius` to achieve "classic" rounded style. Contact cards currently padding only; adding radius/box-shadow is good.

Need maybe add `background-clip` or `border-image` for gradient borders. But to use gradient borders without changing border-width? Could use border: 1px solid transparent, border-image: linear-gradient(...) 1; But adding border-width violates. Could use `outline`? outline doesn't affect layout but width may be decorative. Original "outline styles (color, type)" can change but not width. If we add outline with width, not allowed? Outline is visual but can add; however `outline` shorthand includes width. Could use `outline: 1px solid` adding width for focus? Avoid.

Could use `box-shadow` to simulate border: `box-shadow: inset 0 0 0 1px rgba(...)`. That is decorative, doesn't affect layout. Good. This creates gradient-like border without border property. Use `box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), ...`. Great.

Need maybe on article/card use `background: linear-gradient(...)`, `border-radius: 18px`, `box-shadow: inset 0 0 0 1px rgba(...), 0 10px 30px -15px rgba(...)`.

Need ensure transition duration 0.5s cubic-bezier.

Let's revisit task: "Refresh the visual identity WITHOUT changing layout structure or class names. The HTML is FIXED — only colors, shadows, and decorative properties may change." This means we can modify any property values that are colors/shadows/decorative. But original has no such properties; adding them is allowed? Probably yes. But "Refresh this CSS visually" implies output should include visual changes. Need output no comments.

Potential issue: Because original file is only a media query, and target style "sidebar-classic" has "grid-template-columns" etc. But our block no grid. We must not alter layout. So simply add visual properties within existing selectors.

Need maybe add `transition: all 0.5s cubic-bezier(...)` but `all` could animate layout properties if changed later. Better specify `background-color, background-image, box-shadow, border-radius`. But transition property allowed? It's decorative (transitions). We can add.

Need maybe `filter`? Decorative. Could add `filter: drop-shadow(...)` to hero? But not needed.

Need maybe preserve "font-size: 0.85rem" and "text-align: center" as is. Good.

Need consider selector `.app-hero-section .badge.bg-warning` in media query: This is a Badge with class bg-warning. If we change background-image gradient, utility background-color still present behind. Since `background-image` renders above background-color, gradient visible. No need `!important` unless some other background-image. Bootstrap's `.bg-warning` only background-color. Use `background-image: linear-gradient(...);` without important. But in media query, if base `.badge` has `--bs-badge-bg`? Actually `.badge` uses `background-color: var(--bs-badge-bg);` Bootstrap 5.3? Let's check: `.badge { --bs-badge-padding-x: 0.65em; --bs-badge-padding-y: 0.35em; ... }` not set background. `.bg-warning` applies `background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;`. Background-color remains, background-image gradient on top; okay. Color of text may be dark? fine.

Need maybe set `color`? Not necessary.

Need maybe in `.app-hero-section .row .col-lg-7`, add `background: radial-gradient(...)`? But that would put background on a column centered text. Could be too much. Since it's hero section, maybe set background to transparent? Not safe. Could add `text-shadow: 0 2px 12px rgba(37, 46, 58, 0.15);`. But if hero has image, text-shadow helps. However target maybe "gradient-rich", we could add a background gradient to `.col-lg-7`? That would alter background of content area, maybe okay. But could look like a colored block in hero. Not recommended.

Could use `background: linear-gradient(180deg, rgba(37,46,58,0.12), rgba(37,46,58,0))`? Hmm.

Need maybe output not too much. Since original CSS is small, final output should be concise but visually refreshed. We can include only added properties for badge and cards, maybe shadow for hero? Let's plan.

Let's perhaps use palette:
- Sidebar darker (#252e3a) as shadow base and text shadow.
- Main lighter (#f8fafc) for backgrounds maybe.
- Accent gradient: `linear-gradient(135deg, #f9d976 0%, #f39f86 40%, #df5b58 100%)`? Or `#ffb74d` to `#ff8a65`. For gradient-rich.

We need ensure we don't conflict with class name `bg-warning` (yellow). A warm gradient appropriate: `linear-gradient(135deg, #ffd86f 0%, #ff9d5c 45%, #ff6b6b 100%)`. We can use `background-image` gradient with not !important. Maybe add `color: #252e3a`? But text color is typography? `color` is color property, allowed. It might improve contrast. But if original badge text designed a certain color, changing could affect readability but allowed. Could keep.

For contact cards:
- `background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));` This only works if underlying background is dark? Actually rgba white low opacity adds light overlay; on light background it looks almost white. Better use `linear-gradient(145deg, #ffffff, #f2f5fa)`. This is solid, would cover any existing background. Is that okay? Contact cards likely on light section with white cards; fine. But if there is an image background behind, covering with white may alter. Use `background-color`? Original didn't set, so adding solid gradient could be safe if section background is light. But not guarantee.

Maybe use `background: linear-gradient(160deg, rgba(255,255,255,0.5), rgba(255,255,255,0.1))` to add glassy highlight. Since no layout, okay. But if not visible on light background? Slight.

Could use `background-image` only, preserving existing background-color from other