/* ============================================================
   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 given CSS with visual changes only, keeping selectors, layout, typography etc. The original CSS is a media query with three rules. We can change color values, box-shadow, border-radius, transitions, etc. But there are no colors, shadows, radius, transitions here except font-size and padding. Wait there is padding with !important and font-size. Those are layout/typography? The instructions say typography: font-size, font-weight etc cannot change. So we cannot change font-size. Padding/margins: keep similar, ±20% maximum. But the original has padding: var(--space-md) !important. We can change the padding value? It says padding, margin (keep similar values, ±20% maximum). However the target layout pattern is aggressive asymmetric but we're in conservative mode, so we cannot change layout much. We should only change visual properties. The only visual properties available in these rules are none. But maybe we can add box-shadow, background, color, border-radius? The HTML is fixed, but we can add decorative properties to the same selectors. However we must be careful not to alter layout. Adding box-shadow, background, border, etc. could affect sizing? Box-shadow doesn't affect layout. Background doesn't. Border would affect layout unless we use outline or box-shadow. Border-radius doesn't affect layout. So we can add visual effects.

We need to "refresh visual identity". For the media query, we can add glow shadows to these elements. But there are no color values in original. We need to introduce colors, shadows, radius. For .app-hero-section .row .col-lg-7 we can add a subtle glow? But that's a column, maybe not appropriate. For the badge, we can add box-shadow, background? For contact cards, we can add background, border-radius, box-shadow.

However, the original CSS only contains these three rules. The task says output only rewritten CSS preserving all selectors and layout exactly. We can change the padding values slightly but keep within 20%. The original padding: var(--space-md) !important. We don't know the value of --space-md. But we can replace with a value like 1.25rem? Wait we must not change the custom property? Actually custom property values can change if defined elsewhere, but here it's a var reference. The instructions say CSS custom properties (--color-*, --shadow-*) values can change. But --space-md is not a color/shadow property. We can replace with a fixed value? But that would change padding, potentially layout. Better keep the var reference. Since visual identity only, we can modify the var? But --space-md not defined in snippet. We could change to calc? Not safe. Keep it.

We need to add visual properties. Let's think about target style: asymmetric-blocks, glow-effects. Since the selectors are within a mobile media query, we can add box-shadow and border-radius to contact cards and badge.

But we must not add selectors? We can add declarations within existing rules. That's fine. We can also add new rules? The instructions say "Keep ALL selectors and layout exactly as-is" and output only rewritten CSS. The original is a media query with three rules. We should preserve the media query and the rules, and modify/add declarations. We can also add new declarations to existing selectors. But can we add a new rule for ::before etc? Not necessary.

We need to use a fresh color palette. Let's choose an accent color. For "glow-effects", accent color maybe cyan or violet. Since this is saishi.css (tournament?), perhaps a vibrant orange or cyan. Let's choose a palette: deep navy background? But we shouldn't set background on col? Hmm.

We need to ensure no layout changes. Adding background-color to .app-hero-section .row .col-lg-7 could change appearance but not layout. On mobile, text-align center. Maybe set a subtle gradient text? Not possible.

Let's examine each selector:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` We could add text-shadow? But text-shadow is visual. Maybe a subtle text-shadow for hero? But text-shadow could affect readability. Add a soft glow? Alternatively, keep as is, maybe add text-shadow: 0 0 20px rgba(accent,0.2). That's visual. Also could add background? But a column background might be weird. Better just text-shadow.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` We can add box-shadow: 0 0 24px rgba(accent,0.4); border-radius: 999px; background? But background might be set by .bg-warning elsewhere. We can override background to a new gradient? Since .bg-warning is a Bootstrap class, changing background color could affect identity. That's allowed. Let's set a custom background: linear-gradient(135deg, #f6ad55, #ed8936)? But then .bg-warning is a utility class, maybe not. We can set background to a bold gradient and add glow. Also add border: none? But border width changes layout? Border width if added could change layout because border-box? But box-shadow safer.

3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` We can add background, border-radius, box-shadow, transition. But adding background to all contact cards might create blocks. That aligns with asymmetric-blocks. We can add background: rgba(255,255,255,0.05) or solid alternating? Can't alternate because same rule. Use a consistent surface color. Add border-radius: 16px; box-shadow: 0 0 24px rgba(accent,0.3), 0 8px 32px rgba(0,0,0,0.2). Add transition: box-shadow 0.3s ease, transform 0.3s ease? But transform changes layout? transform doesn't affect layout, but the original rule doesn't have hover. If we add hover state? That would be a new selector, not allowed? We can add a `:hover` pseudo-class? It says pseudo-classes can be preserved, but adding new ones? Probably not. The instruction says "Every selector character-for-character preserved" — that means we shouldn't add new selectors, but adding hover would be a new rule, which is a selector change. Better avoid. Alternatively, add `transition` so when hover styles from other rules apply, it's smooth. But adding transition is allowed. Also add `backdrop-filter`? Could be visual but may affect performance.

Let's craft a visually rich CSS within the existing rules.

We need to output the CSS with the same selectors and declarations, plus new declarations. Also we can replace the padding value? The instruction says padding, margin keep similar ±20%. The original uses var(--space-md). We don't know the computed value. To be safe, keep var(--space-md) but maybe define fallback? We can write `padding: max(var(--space-md), 1rem) !important;` but that changes layout? Not exactly. Better keep exactly `padding: var(--space-md) !important;`. The visual changes should come from added properties.

Also for badge, font-size must stay as 0.85rem. But perhaps we can add `letter-spacing`? That would change typography? letter-spacing is typography? It says line-height, letter-spacing, word-spacing cannot change. So no.

For the contact cards, we can add `background` but if the original cards had a background, it's okay. Need to choose colors in a fresh palette. Since target style is asymmetric-blocks, bold contrasting blocks, high contrast borders. But in a mobile viewport, cards with bright backgrounds may look good. Let's create a cohesive palette.

Let's define accent color: maybe `#ff6b6b` coral? Or `#4ecdc4` teal? Let's use "glow-effects" with a violet accent: `#a855f7` (Purple 500) and `#6366f1` (Indigo 500). Backgrounds maybe dark navy `#0b1120` or light? The original CSS likely for a dark theme? Not sure. We can use semi-transparent white.

Since this is a partial file (block 2/2), there may be other styles. We'll add visual properties.

Let's write:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 0 20px rgba(168, 85, 247, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24, #f97316);
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(251, 191, 36, 0.4), 0 4px 16px rgba(249, 115, 22, 0.3);
        transition: box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(168, 85, 247, 0.12), rgba(99, 102, 241, 0.08));
        border-radius: 16px;
        box-shadow: 0 0 24px rgba(168, 85, 247, 0.25), 0 8px 32px rgba(2, 6, 23, 0.3);
        backdrop-filter: blur(8px);
        transition: box-shadow 0.3s ease, background 0.3s ease;
    }
}

But wait: the contact rule has a selector list with a line break between. We need preserve exactly the same selector formatting? The instructions say "Every selector character-for-character preserved". In the original, there is:

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

So we should keep the line break after comma? It's part of the selector list but whitespace between selectors is not significant. But "character-for-character" would mean the exact text including whitespace/newlines. Our output should preserve the selector text exactly. That includes the newline after the comma. We'll format similarly.

Also, the original has two spaces indent. We'll preserve.

Now, we need to check if added `background` on `.contact-quick-section .contact-card` could affect layout? Background doesn't affect layout. `border-radius` doesn't. `box-shadow` doesn't. `backdrop-filter` doesn't. `transition` doesn't. Good.

But the `.app-hero-section .badge.bg-warning` rule now has background gradient and border-radius. Could border-radius affect layout? It might clip content but doesn't change box dimensions. Good.

However, if we add `background` to `.badge.bg-warning`, the Bootstrap warning background will be overridden. That's fine.

Potential issue: The first rule `.app-hero-section .row .col-lg-7` with `text-shadow: 0 0 20px rgba(...)` might add a glow to all text in the hero section on mobile, possibly too much. But we can make it subtle. Alternatively, we could add `filter: drop-shadow`? But text-shadow is visual.

Another potential issue: These rules are inside a media query max-width 575.98px. The target style "asymmetric-blocks" and "glow-effects" suggests we might want to add a lot of visual flair. But we should not add new selectors for hover. We could add `@keyframes` pulse and apply to the badge? Animation-name is allowed? It says animation-name cannot change? Actually "animation-name (values like duration/timing CAN change)" means we can change the value? It says "animation-name (values like duration/timing CAN change)" - hmm. It means the animation-name property value cannot change? Let's read exactly: "🎬 ANIMATION & MEDIA: • @keyframes names (values inside CAN change) • @media query breakpoints (conditions only) • @import, @font-face, @supports, @charset • animation-name (values like duration/timing CAN change)". This is ambiguous: "animation-name (values like duration/timing CAN change)" could mean the list includes animation-name, and inside parentheses clarifies that values like duration/timing can change, not the name itself? It says "animation-name (values like duration/timing CAN change)" maybe meaning "animation-name: values like duration/timing CAN change" - actually animation-name's value is a name; duration/timing are different properties. The likely meaning: You can change animation-name? Wait the list says "animation-name" under "ANIMATION & MEDIA" and then "values like duration/timing CAN change". It might mean that for animation properties, you may change duration/timing, but not the name? Actually in the CHANGELOG section at top, it says "✅ YOU MUST CHANGE ... transition timing, easing, duration" and in "🔒 NEVER CHANGE" list under ANIMATION & MEDIA includes "animation-name (values like duration/timing CAN change)" This is confusing. Let's parse: The parent category "animation & media" is in the NEVER CHANGE list? Actually the structure: The output shows "🔒 NEVER CHANGE (would break HTML layout):" and then categories: "🏷️ SELECTORS", "📐 LAYOUT", "📝 TYPOGRAPHY", "🎬 ANIMATION & MEDIA". So ANIMATION & MEDIA is a category under never change. It says: • @keyframes names (values inside CAN change) • @media query breakpoints (conditions only) • @import, @font-face, @supports, @charset • animation-name (values like duration/timing CAN change). This means: @keyframes names cannot change, but values inside can change. @media query breakpoints cannot change (conditions only). @import etc. cannot change. animation-name cannot change? Then "(values like duration/timing CAN change)" refers to animation-duration, animation-timing-function can change, not animation-name. So we cannot add new @keyframes? Actually we can add new @keyframes? It says @keyframes names cannot change. It doesn't say we can't add new @keyframes. But to be conservative, avoid adding animations. We can change animation duration/timing if existing, but no existing. So no new animation.

Thus our added `transition` is allowed, since transitions can change. We should avoid `animation`.

Now, the target style "glow-effects" includes "Subtle pulsing animations" but conservative mode prevents adding keyframes? Hmm. The EFFECT VARIANT says "Subtle pulsing animations" as part of the target style, but we can maybe not implement it due to conservative constraints. We could implement `animation` if we add a keyframe? But that would require adding @keyframes name, which is not allowed? Actually adding a new @keyframes would create a new name, not changing existing. But the instruction says "animate name (values like duration/timing CAN change)" - It likely means you cannot change the animation-name property on existing rules because that would change behavior. Adding a new keyframes would not break layout, but it's a new selector (keyframe name). Since the constraints say "Every selector character-for-character preserved" - @keyframes selectors are keyframe selectors like `from`, `to`. Maybe not. To be safe, skip animation.

But we need to ensure the output is valid CSS and preserves all original layout. Let's check if our modifications comply with "border-color and border-style (NOT border-width)" - We're not touching borders. "caret-color, accent-color" - no. "CSS custom properties" - we are not changing var definitions.

What about "backdrop-filter" - allowed. "filter" - allowed. We are not using filter.

We should maybe add `outline`? No.

Let's think about the exact wording: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." So we should only change/add those categories. Our added properties are exactly colors, shadows, radius, transitions, gradients, plus backdrop-filter (decorative). That's fine.

We must output the CSS with no markdown fences, no explanations. The first character should be the first CSS character. We'll output the media query.

Let's refine the colors for a fresh palette. In the original none. We need to replace "all color values" — none exist, so we're adding. We should pick a cohesive palette. Let's use a dark theme with electric cyan and violet? Since target is "asymmetric-blocks" with bold contrasting blocks, high contrast borders. We can add border? But adding border changes layout (unless using box-shadow). We can add `border: 1px solid rgba(...)`? That changes layout dimensions if box-sizing is border-box, it would occupy space. But if box-sizing is border-box, width includes border, but the element's width might be set; adding border could compress content. To avoid layout change, use `outline`? Outline doesn't affect layout. But outline might overlap. Or `box-shadow` can simulate border via inset? But not necessary. We can add `border-radius` and background. High contrast borders maybe via box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset? That doesn't affect layout. Let's use `box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 0 24px ...` That creates a border-like line inside. Nice.

For the badge, `.bg-warning` already has a background color from Bootstrap, but we can override with a gradient. Let's use a high contrast orange gradient: `#ffd166` to `#f97316`. That fits glow.

For contact cards, we could use dark glass surface: `background: linear-gradient(145deg, rgba(15, 23, 42, 0.7), rgba(30, 41, 59, 0.5));` with violet glow. This gives bold blocks