/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need to rewrite the CSS according to the instructions. The given CSS is minimal: only a media query with some rules. The task is to refresh visual identity without changing layout structure or class names. However, the original CSS contains very few properties: text-align, font-size, padding. These are layout/typography which are "never change" categories? Let's read carefully.

The instructions:
- You MUST CHANGE: colors, box-shadow, text-shadow, border-radius, gradients, transition, filter, opacity, outline, border-color/style, caret-color, accent-color, CSS variables.
- NEVER CHANGE: selectors, layout (display, position, grid, flex, width, height, padding/margin keep similar ±20%, gap), typography (font-family, font-size, font-weight, line-height, letter-spacing, text-transform, white-space).

In the original CSS, there are properties:
- text-align: center; -> layout? It's not in the never change list, but it's not a visual color/shadow property. The instructions say "visual identity only" but layout structure should not change. text-align is layout-ish. We probably should keep it as is because changing could alter layout. Similarly font-size is typography and must remain unchanged. padding is margin/padding; "keep similar values, ±20% maximum". Actually the original has `padding: var(--space-md) !important;` which is using a CSS variable. We are allowed to change CSS custom property values? Yes, "CSS custom properties (--color-*, --shadow-*) values" but note `--space-md` is a spacing variable, likely should not change because it's layout spacing. The never change says "padding, margin (keep similar values, ±20% maximum)". Changing the variable value could affect padding globally, but we can adjust within ±20%. However, the CSS file provided only contains these rules. We need to output the same structure, but perhaps we can add visual properties like background, border, box-shadow, etc. within the existing selectors? But the instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Since original CSS does not contain many visual properties, we may need to inject new visual declarations into the existing rules? But careful: "HTML is fixed — only colors, shadows, and decorative properties may change." That implies we can add color/shadows/etc. to existing selectors, but we cannot change layout. Adding properties like background doesn't change layout. So we can enhance.

However, the file fingerprint and block says "#块2/2", so this is only a chunk of a larger CSS file? The input is a small media query snippet. We need to rewrite this snippet with the target style in mind. The target style: sidebar-classic, glow-effects. But the current selectors are about `.app-hero-section` and contact sections. They don't have sidebar. Nonetheless, the style guide provides palette: sidebar darker #252e3a, main lighter, accent. We can use those colors in decorative properties.

We need to output only the CSS. Since the original uses `var(--space-md)`, maybe we can add CSS variables at the top? The original starts with @media, we can't add outside? We can include a `:root` block? But that would change selectors? The instruction says preserve all selectors exactly. Adding a new selector is probably not allowed? Hmm. "Selectors - keep EXACTLY" means the existing selectors should remain. But can we add new selectors? The output should be the rewritten CSS preserving ALL selectors. It doesn't explicitly forbid adding new selectors, but "preserving ALL selectors" likely means the existing ones must be there. Adding a `:root` block might be acceptable if it's just to define variables, but we can also just use raw colors instead. Since we are allowed to change CSS custom property values, but the original uses `var(--space-md)`. We cannot change the selector but we could redefine `--space-md`? That would affect layout (padding) if the variable is used. But we can keep it.

Given the small snippet, the best approach: keep the @media query and the selectors exactly, preserve all existing declarations exactly (or adjust padding within ±20%? It says "keep similar values, ±20% maximum", so we could change `var(--space-md)` to a new custom property or a value that is within 20% of original? But original is a variable, not a numeric value. We don't know the value. Safer to leave it as `var(--space-md)` or use a literal within 20%? We should leave as is to avoid breaking layout.

Then add visual properties to each existing rule? But the selectors target elements. We can add `background`, `border-radius`, `box-shadow`, `transition`, etc. to those elements. But we need to be careful: the media query is max-width 575.98px (mobile). Adding heavy shadows might be fine. But the target style "glow-effects" includes glow shadows, halo on hover, pulsing animations. We can add those.

However, the original rules:
1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — this is a column in a row. Adding background to a column could affect layout? It's decorative. Could add a subtle background? But the target palette says sidebar darker #252e3a, main lighter. On mobile hero section, maybe not. We could add `text-shadow`? But text-align is not color. The instruction says change text-shadow. We can add `text-shadow` to this heading area? But the selector is a column, not text. Adding text-shadow to the container might affect text inside. But we should be cautious.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — this is a badge with class `bg-warning`. In Bootstrap, `bg-warning` sets a background color. We can change that by overriding background? But the class name `bg-warning` is a Bootstrap utility. In this rule, only font-size is set. We can add `background` and `box-shadow` to create glow. But the selector includes `.badge.bg-warning`; we can set `background: #f0b429;` or use accent color? The palette says functional accent. We can set background to a warm warning color, plus glow.

3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — these are contact cards. We can add `background`, `border`, `border-radius`, `box-shadow`, `transition`, `backdrop-filter`, etc. But we must not change padding. We can keep padding exactly.

We should output the CSS with added visual declarations. But note that the selector list has a comma: `.contact-channels-section article, .contact-quick-section .contact-card`. We must preserve that exactly.

Also, the original uses `!important` on padding. We can add new declarations without !important maybe, but to override Bootstrap backgrounds, we might need !important. However, the instructions don't mention preserving !important? It says "preserving ALL selectors and layout exactly". `!important` is part of the declaration, not selector or layout. But if we change it, layout? It's a weight. We should probably keep it for padding. For any new declarations, we can add as needed.

But wait: the original file only has those rules. We are to rewrite "this CSS" meaning we should output the same structure with modifications. We must not change the selectors or the properties that are layout/typography. So for `.app-hero-section .row .col-lg-7`, `text-align: center;` must stay. We can add e.g. `color: #2c3e50;`? But the hero section likely has text; changing color is allowed. But the selector is a column, not text. Setting color on the column will affect all text inside. That's okay.

But how does the target style "sidebar-classic" fit? Maybe we can add a subtle background to the main column? The target style says "Sidebar darker (#252e3a), main lighter". But there is no sidebar in these selectors. The style is just a general direction. We can use #252e3a for cards or accents? We can use a lighter main background.

The "glow-effects" variant says "Glow shadows in accent color: 0 0 24px rgba(accent, 0.4); Halo on hover: 0 0 32px rgba(accent, 0.6); Medium radius (8-16px); Subtle pulsing animations". We can define an accent color, e.g., #4f8fde or #6c5ce7. Since the context is competitions (saishi), maybe accent blue. Let's choose a sophisticated palette: sidebar dark #252e3a, main lighter #f5f7fa, accent #4a7cf7 or #3b82f6. Warning color #fbbf24.

Given the snippet, we need to add:
- For badge: background warning color, box-shadow glow, maybe border.
- For contact cards: background, border, border-radius, box-shadow, transition, maybe a pseudo-element? But pseudo-element selector would add new selector? We should avoid adding `::before` because it would change selectors? Actually pseudo-elements are part of selectors. We are not allowed to change selector lists, but adding new rules with the same selector and a pseudo-element? That would be a new selector, likely not allowed. So we can only use the given selectors.

We can add `transition` to these selectors so hover effects work. But to have a hover effect, we need a `:hover` selector. The instruction says "Pseudo-classes (:hover, :focus, ::before, ::after)" are selectors that we preserve exactly. It doesn't say we can add new ones. "Selectors - keep EXACTLY" probably means we cannot change existing selectors; adding new selectors is not preserving exactly. So we should not add `:hover` rules because they weren't in the original. However, the output should be a rewrite of the given CSS, not an extension. So we should not add new selectors. But we can add `transition` so that if there are existing hover rules elsewhere in the full stylesheet (not shown), they will animate. Since this is only block 2 of 2, there might be other blocks with hover rules. Our job is just this block. So we can add `transition` properties to the selectors.

We also can add `animation` to create subtle pulsing animations. But adding an animation requires @keyframes. We can add @keyframes inside the media query? That would be a new at-rule. Is that allowed? The "Animation & Media" says "@keyframes names (values inside CAN change)" — so @keyframes are allowed. But adding new @keyframes might be okay. However, the original CSS has no @keyframes. Adding one would be adding to the file but not changing existing ones. The instruction says "ANIMATION & MEDIA: @keyframes names (values inside CAN change)" which implies if there are existing keyframes, we can change values, but adding new keyframes might not be forbidden. But "preserving ALL selectors and layout exactly" — @keyframes isn't a selector. We can add a keyframe for pulse. But the keyframe name must be new; if there are existing keyframes with similar names, adding could conflict? Not likely. But to be safe, we can use a generic animation like `animation: heroGlow 3s ease-in-out infinite` on the badge, and include @keyframes heroGlow. But does adding @keyframes alter the layout? No. But is it within the scope of rewriting? The task says "Refresh this CSS visually" — yes, adding animation is visual.

However, we must be careful about output format: "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". If we add new @keyframes, we are adding new at-rule not present. Is that considered "not preserving"? It says "preserving ALL selectors" means all original selectors should still be there. Adding new isn't necessarily forbidden. But the safer approach is to only modify values of existing properties and add new declarations to existing rules without adding new at-rules. But the target style explicitly mentions "Subtle pulsing animations". To achieve that, we need animation. We could use a built-in animation? No. We could add `transition` for hover glow but not for pulse. The "glow-effects" variant likely expects us to add animations. Since the instructions mention @keyframes values can change, perhaps we are allowed to add/modify keyframes. Let's add a keyframe.

But wait, the original CSS is a media query. If we add a keyframe inside the media query, it's fine. However, if the original file has other keyframes outside, adding inside media query might be okay. We can do:

@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;
        background-color: #fbbf24;
        border-color: #f59e0b;
        box-shadow: 0 0 24px rgba(251, 191, 36, 0.4);
        animation: badgePulse 2.5s ease-in-out infinite;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(37, 46, 58, 0.08);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    @keyframes badgePulse {
        0%, 100% { box-shadow: 0 0 16px rgba(251, 191, 36, 0.3); }
        50% { box-shadow: 0 0 28px rgba(251, 191, 36, 0.6); }
    }
}

But we must not change padding - we kept exactly. We changed `font-size`? No. We kept text-align. We added color/shadow/background. This is okay.

But hold on: The first rule `.app-hero-section .row .col-lg-7` has only text-align. We could add a color and text-shadow? Maybe to create glow on the hero text? Since it's a column, setting a text-shadow might apply to all text inside. That could be a nice glow effect. But "glow-effects" variant says "Glow shadows in accent color: 0 0 24px rgba(accent, 0.4); Halo on hover: 0 0 32px rgba(accent, 0.6)" — this typically applies to interactive elements, not all hero text. We could add a subtle text-shadow to the hero column:

color: #1e293b;
text-shadow: 0 2px 8px rgba(37, 46, 58, 0.12);

But text-shadow on a container is inherited by inline text. It might affect all text in the hero. Could be okay. Let's add.

Also maybe add `background` to the column? No, that could change layout? Background doesn't change layout. But if the column has no padding, a background might touch edges. Better not.

The second rule: `.app-hero-section .badge.bg-warning` — this is a badge, we can add `color: #1f2937` for contrast, and border-radius. The badge already has border-radius from Bootstrap, but we can override. We can add `border-radius: 999px` (pill). The original font-size is 0.85rem; we keep it. We can also add `background` with a gradient perhaps. But the class is `bg-warning`, so Bootstrap sets `background-color: var(--bs-warning)`. Our rule can override with a defined color. Use `background-image: linear-gradient(...)`? That's allowed. Gradient changes allowed. Let's create a vibrant warning badge.

Third rule: contact cards. We can add nice card styling. The selector list has line break: comma and newline. We must preserve that exact formatting? The output should preserve selectors exactly, including whitespace? Probably yes. We can keep the same selector list with comma and newline.

But note the instruction: "No markdown fences, no explanations". So output only CSS.

We also need to consider the "target style" "sidebar-classic" maybe implies a dark sidebar, but we don't have a sidebar. Could we add `background-color` to the body? That would require a `body` selector, not allowed. So we just use the palette in the elements we have.

Now, should we add `box-shadow`, `border`, `border-radius` to `.app-hero-section .row .col-lg-7`? The hero column might not need a card look. But we can add a subtle text-shadow and color. We'll add.

Potential issue: The original file might be part of a larger stylesheet with `:root` variables already defined. We are not allowed to change global variables because they might be defined in another block. But we can use raw colors. The instruction says CSS custom properties values can change, but we don't have them here. We can introduce `--accent-color`? That would be a new custom property, but if defined on a selector that already exists? The existing selectors could define custom properties? For example, `.contact-quick-section .contact-card { --card-glow: ...; }` would be a new property. That is not layout. However, defining custom properties on an element could cascade. But since we can just use raw colors, no need.

Let's decide on a color palette:
- Dark sidebar: #252e3a
- Main lighter: #f8fafc or #f5f7fa
- Accent: #4f8fde or #3b82f6 (blue)
- Warning: #fbbf24 (amber)
- Text: #1e293b
- Border: #e2e8f0

Let's craft:

1.