/* ============================================================
   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 CSS visually while keeping selectors and layout exactly. Original CSS is a media query block with only font-size, padding, text-align properties. These are typography/layout, not allowed to change? Actually task says keep layout, typography fixed. The original has font-size: 0.85rem and padding: var(--space-md) !important. We must keep those as they are typography/layout. But we can add visual changes like color, background, border, box-shadow, etc. However original doesn't have colors. We can add new visual properties without changing existing ones? The instruction says "refresh visual identity WITHOUT changing layout structure or class names" and "Only colors, shadows, and decorative properties may change". So we can add color, background, border, box-shadow, etc. But we must preserve all original declarations? The constraint says "Keep ALL selectors and layout exactly as-is" and "NO layout changes". So we cannot remove existing padding, text-align, font-size because they are layout/typography. We can add new declarations inside the same rules. Also we can change any color values, but there are none. So we can enhance.

The target style: sidebar-classic, glow-effects. But this CSS portion is media query for small screens, not sidebar-related. Still we need to apply visual refresh to the elements.

We need to output rewritten CSS with same selectors, same existing declarations, plus new decorative properties. Since no markdown, no comments. We need to ensure we don't change existing values. We can add things like background, border-radius, box-shadow to .app-hero-section .row .col-lg-7? But that's a column, adding shadow might affect layout? box-shadow doesn't affect layout. Border-radius no layout. But for col-lg-7, text-align center remains. But adding background might change visual, but not layout. However note that the col classes are from Bootstrap grid. Adding background to col might be weird. But the task is to refresh visual identity. We can add a subtle background with border-radius? But the column contains hero content. Probably okay.

Also .badge.bg-warning has background color from Bootstrap. We can change background-color to a glow accent, but badge has Bootstrap bg-warning class. We can override with new background-color and box-shadow. But original only has font-size. We can add background-color, color, box-shadow, border-radius.

Also .contact-channels-section article and .contact-quick-section .contact-card are cards. We can add box-shadow, border, background, border-radius, backdrop-filter, transition.

Need to preserve padding: var(--space-md) !important. We can add border-radius: 12px; etc.

We must be careful with media query: max-width: 575.98px. We'll keep exactly.

We can define custom properties? There are no :root or vars. Could add var declarations? But that would add selectors, not allowed? We can add CSS custom properties within the existing blocks? Better not.

Let's design:

For .app-hero-section .row .col-lg-7:
- Perhaps add a subtle radial gradient background? But that might be too much. To avoid layout changes, background is decorative. Maybe add glow behind badge? Let's add `background: rgba(37, 46, 58, 0.05); border-radius: 16px; backdrop-filter: blur(4px); box-shadow: 0 8px 32px rgba(37, 46, 58, 0.1);` But that could affect text readability? It's a column, background behind all hero content. Might be okay but could alter appearance significantly. However the instruction says "keep same layout", adding background won't change layout. But visually it might be considered refresh. Hmm.

Alternatively, for col-lg-7 on mobile, just text-align center. We could add a glowing text-shadow to headings? But selector is col-lg-7, not inner h1. We can't add pseudo. We could add `color: #252e3a;` not very useful. Maybe add a subtle drop-shadow.

For .badge.bg-warning:
- Original is a warning badge. We can override `background: linear-gradient(135deg, #f6a609, #f0a500); color: #1a1a2e; box-shadow: 0 0 24px rgba(246, 166, 9, 0.4); border: 1px solid rgba(255,255,255,0.25);` But color is typography? color is allowed to change. Yes, color is in allowed list. Need to change all color values. The existing font-size remains.

For .contact cards:
- Add `background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); border: 1px solid rgba(37,46,58,0.12); border-radius: 16px; box-shadow: 0 12px 40px rgba(37,46,58,0.12), 0 0 24px rgba(97, 123, 245, 0.15); transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;` But transform is layout? transform changes visual position, but not layout. But the instruction says "display, position, ... unchanged" but transform not listed. However better avoid transform? It might be considered decorative. But "transition timing, easing, duration" can change, but we need a property to transition. We can transition box-shadow, background-color, border-color. Avoid transform because it's motion, but could be okay. Let's avoid transform to be safe.

Also add hover states? Original CSS doesn't have :hover in this media query. We can add `:hover` selectors? No, we must keep selectors exactly as-is. Cannot add new selectors. So we cannot add :hover. We can only change existing rules. So no hover effects. But we can add transitions anyway.

Also add animation? We cannot add @keyframes because that adds new at-rule, but @keyframes names are allowed? "animation-name" doesn't exist. Can we add animation property? It is not in the list of never change? Actually "animation-name" is listed under "Animation & Media: @keyframes names (values inside CAN change)" and "animation-name (values like duration/timing CAN change)". We can add animation property to existing rules if we also add @keyframes. But adding @keyframes might be allowed if it's new? The instruction says "Keep ALL selectors and layout exactly as-is" and "No new selectors"? But @keyframes is not a selector per se. It says "Every selector character-for-character preserved?" Not "no new @keyframes". However "Selectors list" includes pseudo-classes, but @keyframes names are not in preserved list. We can add new @keyframes? The task says "revise the CSS" with only visual changes. Adding @keyframes is fine if we use it. But to avoid issues, we can add subtle pulsing via `animation` with existing animation? There is no existing animation name. We can define a new one, but the instruction says "animation-name (values like duration/timing CAN change)" implies we can change, but adding new animation-name might be considered new? In conservative mode, we should not add new selectors but @keyframes might be okay. However the output must preserve all selectors exactly; adding @keyframes might be acceptable as decorative. But to be safe, we can avoid animation or add a simple glow pulse to badge using `animation: pulse 2s ease-in-out infinite;` and define @keyframes. But adding @keyframes might be considered as new "selector"? Not exactly. The self-check says "Every selector character-for-character preserved?" @keyframes doesn't select HTML. So probably allowed. But the output target says "Only colors, shadows, and decorative properties may change" — animation with pulsing glow is decorative. Let's include a subtle pulse.

Need to know color palette: sidebar-classic has sidebar darker #252e3a, main lighter, functional accent. Glow effects accent color. We need an accent. We'll use a blue/violet accent e.g., #6c63ff or #5b8cff. Since this is a media query for mobile, the sidebar isn't present. But we can apply accent to badge and card shadows.

Let's define accent: `--accent: #5b8cff`? But we're not adding custom props because the original CSS doesn't have them. We could set actual colors.

For the badge warning, we can make it a glowing amber accent: #f5a623. Because warning color is yellow-ish. We'll use that as accent for glow.

Need to change colors throughout the file. There are no colors currently. So we add new colors.

Let's rewrite.

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

We'll add declarations:

For col-lg-7:
Could add `background: radial-gradient(circle at 50% 0%, rgba(91,140,255,0.12), transparent 70%); border-radius: 20px; padding: 1.5rem;` But padding is layout, cannot change? We can add padding? The original has no padding on col-lg-7. Adding padding will change layout. However the instruction says padding/margin keep similar ±20% if present. "width, height, padding, margin (keep similar values, ±20% maximum)" means if we change them, but we should not add new padding? It would change layout. Better avoid adding padding/margin because it changes layout. We can add background and border-radius without affecting layout. Also box-shadow doesn't affect layout. But background on a full column could be nice. However the column has no defined width? In Bootstrap, col-lg-7 is width 58.333% at lg breakpoint, but at max-width 575.98px it's full width. Adding background would create a full-width block. That's decorative. We'll add a very subtle background with border-radius. Border-radius on a full-width block at mobile might look odd, but okay.

We need to ensure no padding/margin changes. So not adding padding.

For col-lg-7:
```
background: linear-gradient(180deg, rgba(37,46,58,0.04), rgba(37,46,58,0));
border-radius: 16px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 32px rgba(37,46,58,0.08);
backdrop-filter: blur(4px);
```
But `backdrop-filter` may be heavy. Still allowed.

However the original "text-align: center" remains.

For badge:
```
font-size: 0.85rem;
background: linear-gradient(135deg, #ffb347, #f57c00);
color: #1a1a2e;
border: 1px solid rgba(255,255,255,0.35);
box-shadow: 0 0 24px rgba(245,124,0,0.4), 0 4px 16px rgba(245,124,0,0.25);
border-radius: 999px;
animation: badgeGlow 2s ease-in-out infinite;
```
Need to preserve font-size. Add new @keyframes below.

For cards:
```
padding: var(--space-md) !important;
background: rgba(255,255,255,0.9);
backdrop-filter: blur(12px);
border: 1px solid rgba(37,46,58,0.1);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(37,46,58,0.1), 0 0 24px rgba(91,140,255,0.12);
transition: box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
```
But note original selector has two selectors. We keep both. Also `padding` must remain exactly `var(--space-md) !important`. We can keep it.

Also maybe add `color`? No need.

Need define @keyframes badgeGlow:
```
@keyframes badgeGlow {
    0%, 100% { box-shadow: 0 0 12px rgba(245,124,0,0.3), 0 0 24px rgba(245,124,0,0.2); }
    50% { box-shadow: 0 0 20px rgba(245,124,0,0.6), 0 0 40px rgba(245,124,0,0.35); }
}
```
This changes box-shadow, allowed.

But adding @keyframes after media query? It must be outside the media query? @keyframes can be inside media query as well? It can be global. To keep original structure, we can append @keyframes inside the media query? Actually @keyframes rules can be nested within media queries? CSS allows @media inside @keyframes? No, @keyframes can be inside @media? Yes, you can define @keyframes inside a media query. But it's more common to define at top level. If we add inside the media query, it's fine. But the output should preserve original CSS exactly and add new. We'll add @keyframes after the media query block or inside? If inside, it's within media. The original media query block contains only rules. We can add @keyframes at the end of the media query block? Syntax: inside media, you can have @keyframes. But for compatibility, better to place at root alongside media. But if we place at root, it's an additional at-rule, not a selector. Should be okay. However the instruction says "Keep ALL selectors and layout exactly as-is" and "First character = first CSS character" — if we add @keyframes before the media query, the first character would be `@` not `@media`. The original starts with `@media`. We need to preserve the order? The instruction says "preserving ALL selectors and layout exactly." It doesn't specify order of at-rules. But if we put @keyframes at the end, the first character is still `@media`. That is safe.

But the media query may be part of a larger file; outputting only this portion? The original file is just that media query. We can include @keyframes after it. That's fine.

Also note: we must not change `font-size: 0.85rem`. Keep.

Also, if we add `backdrop-filter` to col-lg-7, that may blur content behind, but the column has no background? We add a background. Good.

Need to ensure no `padding` added to col-lg-7. Use no padding.

We may add `text-shadow` to col-lg-7? Could add `text-shadow: 0 2px 8px rgba(37,46,58,0.12);` But this would affect all text in the column including headings and paragraphs. Could be subtle. Allowed. But maybe not necessary. Since our target is glow effects, maybe add a subtle text-shadow to hero text? But selector is col, not text. We can add `text-shadow` to all text in column. That's decorative. But it might make text less readable. We'll skip or add very subtle.

We can add `color: #252e3a;` to col-lg-7 to set base text color. But inheriting anyway. We'll set for a consistent palette. But careful: if the theme has different text colors, overriding to #252e3a might be okay.

Also for `.app-hero-section .badge.bg-warning` we change background color. Bootstrap's `.bg-warning` has `background-color: #ffc107;`. We override with gradient. That's fine.

Now check allowed properties:
- background: allowed (colors/gradients)
- border-color and border-style allowed (not width), but we can add border? Border adds to layout? Border-width defaults to 0, so adding border-width would change layout because border-box? If box-sizing border-box, adding border-width could change width? In Bootstrap, box-sizing is border-box, so adding a border of 1px would reduce content area but not overall width. That could affect layout. The instruction says "border-color and border-style (NOT border-width)" — so they specifically allow changing border-color/style, but not border-width. But can we add a new border with width? The instruction says "border-color and border-style (NOT border-width)" likely means we can change existing border-color and border-style, but we shouldn't change border-width. It doesn't explicitly forbid adding new border property with a width. However to be safe, if we add `border: 1px solid ...`, that sets border-width, which is not allowed. The allowed list includes "border-color and border-style (NOT border-width)" so we should avoid specifying border-width. But if we want to add a border, we could use `border-style: solid; border-color: rgba(...);` without border-width. But the default border-width is medium (3px) unless reset. That would be bad. Better not add border at all, or use `outline` instead. Outline is in allowed list: "outline styles (color, type)" but not outline-width? It says "outline styles (color, type)" and outline-width not mentioned, similar maybe don't change. If we add `outline: 1px solid` sets outline-width. Not advisable. So avoid adding border. Use box-shadow inset to create visual border without affecting layout. E.g., `box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), ...` That's a shadow, not border, no layout. Great.

For badge, we can use box-shadow inset to create border-like ring. Use `box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3), 0 0 24px ...`. That's allowed. So no border-width.

For cards, similarly `box-shadow: inset 0