/* ============================================================
   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 respond to the user query. We are given a file: assets/css/saishi.css, with a block of CSS. We are in "conservative mode" targeting style "sidebar-classic" with effect variant "glow-effects". Need to refresh the visual identity without changing layout structure or class names. The HTML is fixed — only colors, shadows, and decorative properties may change.

But note: The provided original CSS is just a media query block with a few rules. Most of the content is just text-align, font-size, padding. There are no colors, shadows, radius, transitions, gradients explicitly. So we need to add visual refresh? But we must preserve layout properties. The original CSS has:

@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 only a responsive block. The challenge: we need to change colors, shadows, radius, transitions, gradients. But there are none. We can introduce new properties? But the instruction says "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It doesn't say we can add properties. But to "refresh visual identity" perhaps we need to add visual properties that were not present? However, the original CSS is part of a larger file? The user says "File: assets/css/saishi.css#块2/2" meaning block 2/2. We are only given this block. We must output the rewritten CSS with the same selectors and layout. If we add properties like background, box-shadow, etc., we'd be altering the layout? No, decorative properties are allowed. The instruction says "Only colors, shadows, radius, transitions, gradients." It says "you MUST change" those categories if present, and "NEVER CHANGE" layout. It doesn't say we cannot add new decorative properties. But the mission: "Refresh the visual identity WITHOUT changing layout structure or class names. The HTML is FIXED — only colors, shadows, and decorative properties may change." So we can add color, shadow, etc. to the elements selected. However, we need to be careful: adding box-shadow to a hero section might affect layout? Not layout, but overflow? It's within the media query, max-width 575.98px. Adding shadows could cause horizontal scroll? Not necessarily if box-shadow doesn't affect layout. But it could be clipped by overflow. But we are allowed to change shadow properties. The target style "sidebar-classic" with "glow-effects" suggests we should apply glow shadows, medium radius, subtle pulsing animations. But we need to preserve the original selectors and layout properties.

Let's parse the instruction carefully. It says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." The original CSS has no colors, shadows, radius, transitions, gradients. So in order to "change" them, we need to add them? Or perhaps the intent is that we should produce a visually refreshed version by introducing new visual properties while preserving the existing ones. But the instruction "Only change colors, shadows, radius, transitions, gradients" could be interpreted as "you may modify only these categories; you may add new declarations from these categories." The "MUST CHANGE" list: "All color values: background, color, border-color, fill, stroke, outline-color; box-shadow; text-shadow; border-radius; gradient colors; transition; filter; opacity; outline styles; border-color/border-style; caret-color, accent-color; CSS custom properties." So these are categories that we should change/update. Since the original doesn't have them, we can add them.

But we must be careful: the selectors are:
- .app-hero-section .row .col-lg-7
- .app-hero-section .badge.bg-warning
- .contact-channels-section article, .contact-quick-section .contact-card

Within a media query for max-width 575.98px. The original rules set text-align, font-size, and padding. Those are layout/typography, which we cannot change. So we need to keep those declarations exactly. Then we can add new decorative declarations to the same rules. But if we add color, background, border-radius, box-shadow, etc., we might change the visual identity.

However, the target style "sidebar-classic" with "glow-effects" seems more appropriate for a layout with sidebar. But this media query is for small screens, where perhaps the layout becomes stacked. The target style might apply to the whole file, but we only have this block. We need to apply a "glow effects" variant to these elements within the media query. For example:
- For .app-hero-section .row .col-lg-7, maybe add text-shadow glow, or background glow? But it's a column containing hero content. It might be appropriate to add glow to the badge instead.
- For .badge.bg-warning, we can change the background? But bg-warning is a Bootstrap utility class. The original CSS doesn't change its color; it only sets font-size. We could add box-shadow glow with accent color, and maybe adjust background gradient? But background-color from Bootstrap remains. We can override with our own background? We need to be careful: if we set background, we override the Bootstrap warning color. That might be acceptable. But the instruction says "All color values: background, color, border-color..." So we can set new background colors.

But also, the media query is for small screens. Adding glow shadows to elements in a hero section could look nice. Let's think of a coherent visual refresh.

We need to preserve the exact selectors and the layout declarations. We can add after the existing declarations within each rule. We must also not change the media query breakpoint. We should output a complete CSS block.

Let's design:

Original media query:
@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 preserve:
- text-align: center;
- font-size: 0.85rem;
- padding: var(--space-md) !important;

We can add:
- For .app-hero-section .row .col-lg-7: maybe add text-shadow? But text-align center is on the container. We could add a subtle text glow to headings inside? Not possible without adding selectors. But we can add color, maybe a background gradient? That might alter the appearance. But the column is part of a row; setting background might create a box. Maybe not appropriate. We need to keep "only colors, shadows, radius, transitions, gradients" as decorative. Adding background to a column might be a visual change but could be okay. However, the target "sidebar-classic" suggests sidebars, but this is a hero section. Perhaps we should be conservative and only add subtle effects that don't create big boxes. For the col-lg-7, we could add a text glow to the text inside via text-shadow? But text-shadow on the container won't apply to children unless it inherits, but text-shadow is not inherited. Actually, text-shadow is inherited? According to CSS, text-shadow is not an inherited property. Wait, is it? Let's check: text-shadow applies to text of the element itself. For a container, it doesn't inherit to children. So applying text-shadow to .col-lg-7 would only affect text directly in that column, if any. That might be none. So maybe not.

Could add filter: drop-shadow() to the container? That would affect the entire column, possibly creating a glow around its content. But filter can affect layout? No, but it creates a containing block for fixed/absolute descendants. It might affect performance, but okay. Yet adding filter to a column might be weird.

Alternatively, we can add a no-op? The instruction says "Only change colors, shadows, radius, transitions, gradients." If there are none in the original, perhaps the intended output is the same CSS? That seems pointless. The user likely wants us to inject visual refresh. We need to add some decorative properties to these rules.

Let's examine the context: The file is saishi.css, probably for a sports tournament site. "saishi" means competition/tournament. The target style "sidebar-classic" with "glow-effects" suggests we want a classic sidebar layout with glowing accents. But this media query is for mobile. Maybe the overall file has a sidebar layout, and this block handles mobile responsiveness. We need to refresh the CSS in this block.

We should create an output that:
- Keeps the media query.
- Keeps the selector list.
- Keeps the existing layout/typography declarations.
- Adds new visual declarations that align with "glow-effects": glow shadows, medium radius (8-16px), subtle pulsing animations. But note: cannot change @keyframes names, but we can add @keyframes? The original doesn't have any. The instruction says "@keyframes names (values inside CAN change)" and "animation-name (values like duration/timing CAN change)". We can add @keyframes and animation, but "Only change colors, shadows, radius, transitions, gradients" — animation is not explicitly listed except "transition timing, easing, duration" and "opacity". The effect variant wants "subtle pulsing animations". We can add animation, but that might be beyond the list. Still, the effect variant describes what to achieve. It says "Subtle pulsing animations". So we should add an animation. But we must be careful: adding animation to a container could pulse its opacity, but that might distract. Perhaps pulse the badge.

Let's consider each selector:

1. `.app-hero-section .badge.bg-warning` — This is a badge with Bootstrap warning color (yellow/orange). We can give it a glow shadow in an accent color, maybe with pulsing animation. This fits "glow-effects". We can change its background to a gradient? But bg-warning is a utility class, changing background here might override. That's okay. We can set background: linear-gradient(...) with warning-like colors but more contemporary. Add box-shadow: 0 0 12px rgba(...), 0 0 24px rgba(...) with accent. Add border-radius: 10px or 12px. Add transition: box-shadow 0.3s ease. Add animation: pulseGlow 2s infinite. But we cannot use @keyframes names? We can define new @keyframes, but the instruction says "@keyframes names (values inside CAN change)" meaning if there were existing ones, we can change values but not names. Since there are none, we can add a new one. However, do we want to add an @keyframes inside the media query? It's valid to define @keyframes within a media query? Yes, @keyframes can be nested inside @media. But it might be better to define it outside? But we're only outputting this block; original block starts with @media. If we add @keyframes outside, it would be outside the media query, not in the original block. But the instruction says "Output the rewritten CSS now" and "only colors, shadows, radius, transitions, gradients". Adding @keyframes adds an animation, which is gray area. But the effect variant explicitly says "Subtle pulsing animations", so we should include one. We can add @keyframes inside the media query? That's unusual but valid. Or we can animate using transition? No, pulse requires animation. We can add `animation: pulseGlow 2s ease-in-out infinite;` and define `@keyframes pulseGlow` after the media query. But the original CSS block is just the media query; adding after it would still be part of the output. The user might accept. But the instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Adding @keyframes doesn't change selectors. It's a new at-rule, but it's not a selector. Is that allowed? The "NO MARKDOWN" says output CSS. It doesn't forbid adding keyframes. The "Animation & Media" section says "@keyframes names (values inside CAN change)" and "animation-name (values like duration/timing CAN change)" — this implies we are allowed to have @keyframes. So yes, we can add.

But to be safe, we can define the @keyframes exactly as `pulseGlow` (new name). But the instruction says "Preserving ALL selectors" — @keyframes is not a selector. So it's fine.

2. `.contact-channels-section article, .contact-quick-section .contact-card` — These are contact cards. They have padding. We can add border-radius, box-shadow, background, maybe transition for hover. But hover requires a separate rule; we cannot add a new selector? The instruction says "Selectors: keep EXACTLY". We cannot add separate rules like `.contact-card:hover`. But we can add `transition` to the base rule, so when they are hovered (if there is a hover rule elsewhere in the original file), the transition applies. That's fine. We can also set box-shadow and border-radius. Adding background could change the card color. The target style says "Sidebar darker (#252e3a), main lighter", but these are contact cards; maybe we make them glassy.

3. `.app-hero-section .row .col-lg-7` — This is the hero column. We can add a subtle text-shadow? Or maybe a background with radial gradient? But setting a full background on the column might create a huge block. Alternatively, we can set a `filter: drop-shadow()` to give the content a glow. Or add `opacity`? No. We need to change only colors, shadows, radius, transitions, gradients. We could add `background: radial-gradient(ellipse at center, rgba(accent,0.15), transparent 70%)` to create a subtle glow behind the text. That is a gradient. It would overlay but not affect layout. However, it might create a visual element. Since it's a hero section, a radial glow could be nice.

Let's choose an accent color. The target "sidebar-classic" says sidebar darker (#252e3a), main lighter. Functional accent for actions. We can pick an accent color like #e63946 or #ff6b6b or #f0b429? Since bg-warning is yellow, maybe accent is amber/gold. Let's define custom properties? The instruction allows CSS custom properties. But since this is a media query block, we can define variables at the top of the block? That would be within @media, not global. But adding custom properties inside @media is okay. However, the instruction says "Never change CSS custom properties (--color-*, --shadow-*) values"? Actually, in the "MUST CHANGE" list, it includes "CSS custom properties (--color-*, --shadow-*) values". That means we should change them if they exist. They don't exist in our block. We could add `--glow-color: #f0b429;` inside the media query. But new custom properties are allowed? Probably.

Let's formulate a new visual identity:
- Palette: dark slate sidebar (#252e3a), light background (#f8f9fa), accent amber (#f59e0b) or coral (#ff6b6b). For "glow-effects", we want glow shadows in accent color.
- For the hero column: add a subtle gradient background: `background: radial-gradient(circle at 50% 30%, rgba(245,158,11,0.12), transparent 75%);` and maybe `filter: drop-shadow(0 8px 24px rgba(245,158,11,0.15));` But filter not in allowed? It is: "filter, backdrop-filter" is in must-change list. We can add filter. But adding filter to the column might create a containing block; okay. Actually, drop-shadow could create a glow around the column's content, but with a drop-shadow filter, it follows the alpha shape of the content. In a hero section with text, it might apply to the text and images, creating a subtle glow. Nice.

- For the badge: change `background` to a gradient: `linear-gradient(135deg, #ffd166 0%, #f59e0b 100%)`; `color: #252e3a`; `border: 1px solid rgba(255,255,255,0.3)`? Border style changes allowed. But border property involves width? We can only change border-color and border-style, not border-width. Border-width can't be changed. We can set `border-color` only if there is a border already. If not, setting `border: 1px solid` changes border-width, which is prohibited. So avoid border-width. Could set `outline`? outline is allowed, but outline may not affect layout. We can add `outline: 2px solid rgba(...)` but outline width not specified in the "NEVER CHANGE" list? The list says "outline styles (color, type)" can change. It doesn't say outline-width, but presumably we could change outline-color and outline-style only. If we add outline, we'd set width; that might be okay? But safer not to add border/outline if not necessary. We can add box-shadow and border-radius instead.
- Set `border-radius: 999px` for pill badge (but original badge may already be rounded from Bootstrap). Changing border-radius is allowed. Let's make it 999px for a pill.
- Box-shadow: `0 0 12px rgba(245,158,11,0.5), 0 0 32px rgba(245,158,11,0.3)`.
- Transition: `transition: box-shadow .3s ease, transform .3s ease;` But transform is a layout property? Transform is not listed in "NEVER CHANGE" but it's not in "MUST CHANGE" either. The allowed changes are colors, shadows, radius, transitions, gradients. Transition can include transform property, but the value of transform itself isn't changed; we only add a transition.