/* ============================================================
   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;
    }
}

The CSS provided is a media query block with selectors. The instructions say to refresh visual identity without changing layout structure or class names. The original CSS is small:

```css
@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;
    }
}
```

The target style is "centered-stage" with tight-rhythm variant. But the constraints say layout (display, position, width, height, padding, margin, font-size, text-align, etc.) should not change. However, the target style says "Aggressive only" at the top, but the mode is CONSERVATIVE, so layout properties must remain unchanged.

Wait: the original CSS contains `text-align: center`, `font-size: 0.85rem`, and `padding: var(--space-md) !important`. Per the "NEVER CHANGE" list:
- text-align: keep (it's in the layout list)
- font-size: keep
- padding: keep similar values, ±20% maximum. The value is `var(--space-md)` — we could change the variable? But the variable itself is referenced; changing the variable value would affect the padding. The instruction says "padding, margin (keep similar values, ±20% maximum)". We don't know the value of `--space-md`. It's likely defined elsewhere. We could either keep it as-is, or replace with a slightly different value like `calc(var(--space-md) * 0.9)` — but that might break. Safer to keep padding as-is.

The task is to refresh the visual identity. Since the original CSS has almost no color properties, the changes are minimal. We can add color, background, border-radius, box-shadow, transitions etc. to these selectors, as long as we don't change layout properties.

But we must preserve the selectors exactly. We can add new declarations inside those rules. Also we can add new rules? The instruction says preserve selectors; it doesn't forbid adding new selectors, but the goal is to rewrite the given CSS. We could add declarations to the existing rules. However, adding selectors would change the CSS file structure. The instruction: "Only the rewritten CSS, preserving ALL selectors and layout exactly". It doesn't explicitly forbid adding new selectors, but the output should be the rewritten version of the given CSS. Better to keep the same structure, just add visual declarations.

Let's interpret: We need to make the colors, shadows, radius more distinct. But the selectors are specific. We can:

For `.app-hero-section .row .col-lg-7` — text-align: center (layout) — we can add color, maybe a text-shadow? But it's a column containing content, unlikely to have text directly. But we can add color and maybe font-weight? No, font-weight is typography (can't change). We can add `color`, `text-shadow`, `caret-color`, `accent-color`.

For `.app-hero-section .badge.bg-warning` — font-size (can't change) — but we can add background gradient, border, box-shadow, border-radius, color, etc. The class `badge.bg-warning` typically is a Bootstrap warning badge (yellow). We can restyle it with a fresh palette. Target style: premium gold or deep purple accent. Tight-rhythm: small border-radius 2-6px, subtle shadows. So we can give the badge a gold gradient background, a subtle shadow, small radius.

For `.contact-channels-section article, .contact-quick-section .contact-card` — padding var(--space-md) (keep) — we can add background, border, box-shadow, border-radius, transition.

Also we might want to add transitions to these elements.

We should also consider that the media query is for mobile. We can keep it.

Let's craft the rewrite:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f0e9d6;
        text-shadow: 0 2px 8px rgba(15, 15, 26, 0.6);
        caret-color: #d4af37;
        accent-color: #d4af37;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f5d76e 0%, #d4af37 100%);
        color: #1c1c2e;
        border: 1px solid rgba(212, 175, 55, 0.6);
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(212, 175, 55, 0.3), 0 1px 2px rgba(15, 15, 26, 0.4);
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .app-hero-section .badge.bg-warning:hover {
        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.5), 0 2px 4px rgba(15, 15, 26, 0.5);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(30, 30, 48, 0.9), rgba(15, 15, 26, 0.95));
        border: 1px solid rgba(212, 175, 55, 0.15);
        border-radius: 6px;
        box-shadow: 0 4px 14px rgba(15, 15, 26, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(4px);
        transition: box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
    }

    .contact-channels-section article:hover,
    .contact-quick-section .contact-card:hover {
        border-color: rgba(212, 175, 55, 0.4);
        box-shadow: 0 6px 20px rgba(15, 15, 26, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.2);
    }
}
```

Wait: We added a hover rule with the same selector list but with `:hover`. Is that allowed? The instruction says preserve pseudo-classes — we can use them. But adding new selectors with `:hover` — the original didn't have them. Is that allowed? "Preserving ALL selectors" means we must keep the existing ones. Adding new selectors is not forbidden, but it changes the CSS. The target output says "rewritten CSS, preserving ALL selectors". Adding pseudo-class variants is a common way to refresh. But to be safe, we might not add new rules; we can only modify declarations inside existing rules. However, the instruction "Only colors, shadows, and decorative properties may change" — transitions are decorative. Hover effects are decorative. But if we add a new selector, we're adding new selectors. The constraint: "Selectors (CRITICAL - HTML is fixed): Class names: keep EXACTLY". It doesn't say we can't add. But it says "preserving ALL selectors" — meaning all original selectors must appear. It doesn't say "no additional selectors". Yet, the safest interpretation for a CSS refresh is to keep the exact same selector blocks and only change/append declarations. But adding hover effects is a visual refresh. I'll consider whether to include them.

The original file excerpt may be just a fragment (block 2/2). Adding hover rules might be acceptable, but to be conservative, I could integrate transition on the existing rules and skip the hover rule. However, the instruction asks to "Refresh this CSS visually" and "make colors, shadows, and radius MORE distinct". Adding hover is a nice touch but not required. I'll include hover as part of the refresh, but ensure original selectors remain.

Check: The selector list `.contact-channels-section article, .contact-quick-section .contact-card` has a comma — we keep it exactly. For the hover rule, we add `:hover` to each — that's a new selector list. It doesn't break HTML. I think it's fine.

But wait: The prompt says "Selector lists (commas)" — preserve. So we preserve the original comma list. Adding a new rule with `:hover` is an additional selector, not modifying the original. Should be acceptable.

Alternatively, we could use `:hover` on the same rule? No, you can't put `:hover` in the same rule without changing the selector. The original selector list has no `:hover`. To preserve exactly, we must keep that selector list as is. Adding a separate rule with `:hover` is an addition.

Let's also double-check constraints:

- "display, position, grid-template-*, flex-direction unchanged" — not used.
- "width, height, padding, margin within ±20%" — padding uses `var(--space-md)`, we keep it exactly. Good.
- "font-family, font-size, font-weight, line-height unchanged" — font-size in badge is 0.85rem, kept. We didn't add font-family. Good.
- "text-align" — kept `text-align: center` in col-lg-7. We didn't add text-align elsewhere.
- "Colors throughout the file replaced with fresh palette" — the original had no colors. We added a dark stage + gold accent palette.
- "Shadows redesigned" — we added multi-layer shadows.
- "Border-radius adjusted" — added 4px/6px radius.

We should be careful not to change `padding` value. We keep `padding: var(--space-md) !important;` exactly.

Also we added `backdrop-filter: blur(4px);` — allowed (decorative).

Also `transition: ...` — allowed.

Now, regarding the target style: "centered-stage" — dark stage #0f0f1a, bright content area, premium gold or deep purple accent. We used #0f0f1a as dark background for cards, gold #d4af37 accent. Good.

"tight-rhythm" — compact spacing, small border-radius 2-6px, subtle shadows. We used 4px/6px radius, subtle shadows with small blur. Good.

Now check if adding `color` to `.app-hero-section .row .col-lg-7` could affect layout? No, color doesn't affect layout.

One concern: `.app-hero-section .badge.bg-warning` — Bootstrap badge uses inline-block; changing background to gradient is fine. But we need to ensure `background` property is allowed — yes, color values can change. We can change `background` from `var(--bs-warning)` to a gradient.

But the original CSS had no background for badge. So we're adding. That's fine.

Now the output must be only CSS, no markdown fences, no explanations. First character = first CSS character.

Let's craft the final output. Should we keep the media query as is, with the exact same structure and indentation? Yes.

I'll produce:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f5f0e1;
        text-shadow: 0 2px 10px rgba(15, 15, 26, 0.7);
        caret-color: #d4af37;
        accent-color: #d4af37;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #1b1b2a;
        background: linear-gradient(135deg, #f7d774 0%, #d4af37 55%, #b8942a 100%);
        border: 1px solid rgba(212, 175, 55, 0.65);
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(15, 15, 26, 0.45), 0 0 12px rgba(212, 175, 55, 0.25);
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .app-hero-section .badge.bg-warning:hover {
        box-shadow: 0 4px 10px rgba(15, 15, 26, 0.55), 0 0 18px rgba(212, 175, 55, 0.4);
        transform: translateY(-1px);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(150deg, rgba(28, 28, 46, 0.92), rgba(15, 15, 26, 0.96));
        border: 1px solid rgba(212, 175, 55, 0.12);
        border-radius: 6px;
        box-shadow: 0 6px 18px rgba(15, 15, 26, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(6px);
        transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    }

    .contact-channels-section article:hover,
    .contact-quick-section .contact-card:hover {
        border-color: rgba(212, 175, 55, 0.45);
        box-shadow: 0 10px 26px rgba(15, 15, 26, 0.65), 0 0 0 1px rgba(212, 175, 55, 0.15);
        background: linear-gradient(150deg, rgba(32, 32, 52, 0.95), rgba(18, 18, 32, 0.98));
    }
}
```

Wait — we added a `:hover` rule for `.app-hero-section .badge.bg-warning`. Is that allowed? It's an additional selector, but it changes the visual on hover. The instructions say "Pseudo-classes (:hover, :focus, ::before, ::after)" are in the "NEVER CHANGE" list — meaning we must preserve them if they exist. It doesn't forbid adding new ones. But to be extra safe, maybe we shouldn't add new selectors because the prompt says "preserving ALL selectors exactly" — this could be interpreted as the set of selectors should be identical. Adding new selectors would violate "preserving ALL selectors" if interpreted as "the selector set must remain exactly the same". Hmm.

The exact wording: "🏷️ SELECTORS (CRITICAL - HTML is fixed): Class names: keep EXACTLY (.post-card stays .post-card) ... Pseudo-classes (:hover, :focus, ::before, ::after)" — it lists things to preserve, not things to avoid adding. And later: "Every selector character-for-character preserved?" — that means the original selectors must be preserved character-for-character in the output. If we add new selectors, the original ones are still preserved. So I think it's fine.

But the instruction also says "The HTML is FIXED — only colors, shadows, and decorative properties may change." Adding hover rules is decorative, not structural. So it's fine.

However, there's another consideration: The original file may have more CSS outside this media query; we only see a fragment. The output should be the rewritten version of this fragment. Adding hover rules increases the CSS size. That's acceptable.

Let me double-check the "NEVER CHANGE" list for transitions: "transition timing, easing, duration" is in the "MUST CHANGE" list — actually it says "transition timing, easing, duration" under "✅ YOU MUST CHANGE". So we must change transition properties. The original had no transitions. So adding transition is good, and we should specify timing/easing/duration. We did.

Now, for the badge, we added `transform: translateY(-1px)` on hover. `transform` is not in the forbidden list explicitly, but it can affect layout? It doesn't affect layout flow; it's a visual transform. It's allowed as decorative. But wait: "position" is layout; transform is not listed. It should be fine, but to be maximally safe, maybe avoid transform. The target variant "tight-rhythm" suggests subtle shadows or none. We can remove the transform to avoid any potential layout shift concerns (though transform doesn't affect layout). I'll keep it minimal: just shadow change on hover. Actually, `transform: translateY(-1px)` creates a subtle lift. It's decorative. But to be conservative, I'll drop it from the badge hover and keep only box-shadow. Or keep transition for `transform` but not change it. Hmm.

Let's refine:

Badge hover:
```css
.app-hero-section .badge.bg-warning:hover {
    box-shadow: 0 4px 10px rgba(15, 15, 26, 0.55), 0 0 18px rgba(212, 175, 55, 0.4);
}
```
Remove `transform`.

For the card hover, we change border-color, box-shadow, background. That's fine.

Now, about `backdrop-filter: blur(6px);` — it's decorative. Allowed.

One more check: The original CSS uses `var(--space-md)`. We keep it. Good.

Now, "font-size: 0.85rem" in badge — we keep it. Good.

"text-align: center" — keep it