/* ============================================================
   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 provided. It's a small media query block with three rules. We need to change visual properties only, preserving layout and selectors exactly.

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 need to keep selectors exactly. We can change visual properties that appear. But here there are almost no colors/shadows. We can add new visual properties? The instruction says "Only change colors, shadows, radius, transitions, gradients." But we should not add layout-affecting properties. We can adjust e.g., border-radius, background, box-shadow, etc. But the selectors have text-align, font-size, padding. These are in the "NEVER CHANGE" list: text-align, font-size, padding (within ±20%). So we must keep those values exactly? Actually padding is in layout, keep similar ±20%. But original uses var(--space-md). We can keep it as is because changing variable would affect all. We shouldn't change padding value. We need only output visual changes. Since original CSS has no colors/shadows, we can add them within the same selectors? The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It doesn't say we must keep property count the same. We can add properties like background, border-radius, box-shadow, transition to existing rules. But we should be careful: adding box-shadow to `.badge` could be okay. Adding border-radius to contact cards okay. But adding background to `.app-hero-section .row .col-lg-7` might be okay. However, the target style "centered-stage" and "airy-rhythm" suggests generous spacing, large radius, soft shadows. We can add these visual enhancements.

But we must preserve layout exactly. Adding margins/paddings? No. Adding border-radius doesn't affect layout. Adding box-shadow doesn't affect layout. Adding background doesn't affect layout. Adding transition doesn't affect layout. Adding backdrop-filter could affect maybe. We should avoid adding width/height/margin/padding.

Also, we need to ensure we don't break any original properties. Original properties:
- text-align: center; (keep)
- font-size: 0.85rem; (keep)
- padding: var(--space-md) !important; (keep)

We can add visual properties to each selector. Let's design a fresh palette: dark stage #0f0f1a, premium gold/deep purple accent. Airy rhythm: large border-radius 16-28px, soft pillowy shadows.

But these are small elements in a mobile media query. We can add:
- For hero section column: maybe add a subtle text-shadow? But it's a column, text-align center. Could add a background gradient? But that would change layout? It might create a big block. Better to keep minimal. Maybe add a color? but text color? The selector is a column, not a text element. We could add a `color` property? That would inherit to text but might be inappropriate. Let's think.

Actually the CSS file is "saishi.css" and this is a block. We need to rewrite the entire block. We can add visual declarations that are safe.

Let's design:
1. `.app-hero-section .row .col-lg-7` — on small screens text centered. Maybe add a subtle drop shadow to text? `text-shadow: 0 2px 8px rgba(0,0,0,0.35);` This affects visual only. Also may set `color: #f5f0e6;`? But that could override existing color? It's allowed to change colors. But if the original has color elsewhere not in this rule, adding color here might be okay because it's a refresh. However, we must not change hidden states? But we are only rewriting this CSS. We could add color. But careful: if the text is dark on dark, would break. But we don't know context. Better avoid adding color unless necessary. But the instruction says "All color values ... change" but there are no color values originally. So we can introduce them. But maybe safer to not introduce unnecessary properties that might break if background not changed.

But the target style is "centered-stage" with dark stage and bright content area. Since we cannot change layout, we can still change backgrounds. But adding a background to a column might create a block with background only as wide as column. That's okay.

Let's consider what's likely in a hero section. The hero section has a row, with col-lg-7. On mobile, text center. We can add `background: rgba(255, 255, 255, 0.05); border-radius: 24px; padding: 1rem;`? But adding padding changes layout? Actually padding is within ±20% allowed, but we shouldn't add padding if not originally there because it would change layout. The instruction says layout properties must keep similar ±20%, but adding padding where none existed changes layout significantly. So avoid adding padding/margin.

Similarly, adding `background` with padding? Without padding, background covers exactly the column. That's fine.

Let's see: We can add a soft shadow to the column? But it's a full-width column, box-shadow around it might look odd. But okay.

Perhaps better to focus on the selectors that are cards: `.contact-channels-section article, .contact-quick-section .contact-card` — these are article/cards. We can add border-radius, box-shadow, background, transition, border? We can change border-color and border-style but not width. If no border originally, adding border would change layout (because border adds to size unless box-sizing border-box). Since box-sizing may be global, but adding border could change size. Avoid adding border. Adding background/shadow/radius is safe.

Also `.app-hero-section .badge.bg-warning` — this is a badge with background warning. We can change its background color? The class includes `.bg-warning` which is likely Bootstrap utility. But we can override `background-color` in this rule? The original rule only sets font-size. We can add `background-color` and `color` to refresh the badge. That's a visual color change. We can also add `box-shadow`, `border-radius`, `transition`.

Let's do:
- `.app-hero-section .badge.bg-warning`: keep font-size 0.85rem. Add `background: linear-gradient(135deg, #f9d976, #f39f86); border-radius: 100px; box-shadow: 0 4px 15px rgba(243, 159, 134, 0.35); color: #1a1a2e; transition: box-shadow 0.3s ease, transform 0.3s ease;` But transform is layout? transform doesn't affect layout? Actually transform is allowed? It's not in NEVER CHANGE list explicitly, but "transition" is okay. Adding `transform` could be considered visual. But better not add transform to avoid layout? Transform creates stacking context but not layout. However, hover effects not in original. We can add transition but no hover rule. Not necessary.

Maybe just add `box-shadow` and `border-radius` and `background-color`.

For contact cards:
- `border-radius: 20px; background: rgba(255,255,255,0.06); box-shadow: 0 12px 32px -8px rgba(0,0,0,0.45), 0 4px 8px rgba(0,0,0,0.2);` Also maybe `backdrop-filter: blur(12px);`? That might affect visual but okay. `transition: box-shadow 0.3s ease, background 0.3s ease;`

For hero column:
- `text-shadow: 0 2px 12px rgba(0,0,0,0.3);` Maybe also `color: #f8f4ec;`? But if background is dark, nice. However, we shouldn't set color if not sure. But target style says "bright content area" on dark stage. We can set `color: #faf9f6;` and `text-shadow`. This is a refresh. It's okay.

Also might add `border-radius` to the column? It's not a card. Maybe skip.

But wait: The instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must change. Since there are no colors in the original, we can leave them? But it says "Refresh the visual identity WITHOUT changing layout structure". We need to change as much as possible. Adding colors is good.

But there's a nuance: The original CSS is a media query with three rules. We must preserve the media query and selectors exactly. We can rewrite the property declarations, adding new ones. We must not change the original property values (font-size, text-align, padding) because they are layout/typography. So keep them as-is.

Let's craft a fresh palette:
- Dark stage: #0f0f1a
- Deep purple accent: #6d28d9
- Gold accent: #fbbf24
- Soft cream text: #fafaf9
- Card background: rgba(17,17,34,0.7) or rgba(255,255,255,0.05)

We can introduce CSS variables? The original uses var(--space-md). We could add custom properties in the media query? That would change values but not layout. But it might be better to directly use values.

Let's produce:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #fdfcf9;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fcd34d, #f59e0b);
        color: #1c1917;
        border-radius: 100px;
        box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
        transition: box-shadow 0.3s ease, filter 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
        border-radius: 24px;
        box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: background 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
    }
}
```

But wait: We added `color` and `text-shadow` to hero column. That changes text appearance. Fine.

However, the `.app-hero-section .badge.bg-warning` original had font-size only. Adding background gradient overrides the Bootstrap `.bg-warning` background. That's fine. But note `.bg-warning` may have `--bs-badge-color` and background-color. Our gradient will apply. Good.

For contact cards, we added `background`, `border-radius`, `box-shadow`, `backdrop-filter`, `transition`. These are visual. Padding unchanged.

But we used `!important` on padding only, keep that.

Potential issue: `transition` on `border-radius` is unnecessary but allowed. We can simplify.

Also, the "airy-rhythm" variant says large border-radius 16-28px. We have 24px for cards, 100px for badge (pill), hero column no radius. Good.

Soft pillowy shadows: multi-layer shadows with large blur. We have that.

Also maybe add `outline`? Not needed.

Check constraints:
- Selectors preserved exactly: `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article, .contact-quick-section .contact-card`. Yes.
- Media query preserved.
- Font-size unchanged: 0.85rem.
- Padding unchanged: var(--space-md) !important.
- Text-align unchanged: center.

- Display/position/etc unchanged because we didn't add.

- Colors changed: we added new colors, gradients, shadows. Good.

But one nuance: We added `color` to hero column. The original didn't specify color. If the original rule was inside a media query, there might be underlying color from other rules. Adding color now overrides. That's okay, part of refresh.

Another nuance: Using `backdrop-filter` might affect performance but okay.

Now, is there any need to add `-webkit-backdrop-filter`? Yes for Safari. Included. We added both.

Could also add `border: 1px solid rgba(255,255,255,0.08)` to cards? But border adds to layout unless box-sizing. Avoid.

One more thing: The instruction says "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)" We did.

"border-radius (visual rounding only)" We did.

"gradient colors and stops in linear/radial/conic-gradient" We used linear gradients.

"transition timing, easing, duration" We changed from none to 0.3s ease.

"filter, backdrop-filter" We used backdrop-filter.

"opacity" We didn't use, but not required.

"outline styles" not used.

"caret-color, accent-color" not needed.

"CSS custom properties (--color-*, --shadow-*) values" not used, but okay.

Now, output only the CSS, no markdown. The original had an empty line after each rule? We can keep.

Need to ensure no comments like "AI-REWRITTEN".

Let's finalize.

But let's double-check if we need to preserve the exact structure: The original had a blank line between rules. We can keep.

Potential issue: The original media query might contain only these three rules. We added new properties, but did we change any layout? No.

But wait: The `transition` property we added could be considered a layout change? No.

Maybe we should also add a subtle `border-radius` to the badge? We did.

One concern: `background` shorthand on `.badge.bg-warning` including gradient overrides `background-color`. It also resets `background-image` and other background properties. Fine.

Now, let's think if we should add `color` to contact cards? The cards might have text that is dark-on-dark if background is white? But we set background to a translucent white, and if original text is dark, it could be ok. We don't know. But adding `color: #f8fafc;` to cards might make text light; if the original text was dark on light background, this could break. However, target style is "dark stage #0f0f1a, bright content area". To be safe, we might want to set `color` to a light color. But if the card already has dark text, this would be bad. But we are changing the visual identity; we can assume dark background is desired. However, the user's target style is "centered-stage" with dark stage. So setting color on cards is probably good. But the selector includes `article` and `.contact-card`. We could add `color: #ece5d8;`. But that might override existing. I think it's safe to add color? The instructions say "change all color values". Since original had none, adding color is a change. But to minimize risk, we might leave color alone. Yet the prompt says "Spotlight feel: dark stage #0f0f1a, bright content area". That implies we might need to set backgrounds to dark. But we can't change the page background because we only have this block. We can only change these specific elements. Adding a dark background to cards without changing surrounding background could look odd. But if the page is already dark, translucent white on dark is good. If page is light, translucent white will be barely visible. Hmm.

Maybe better to use a semi-transparent dark background on cards: `background: rgba(15, 15, 26, 0.7);` and light text. That would work on dark and light? On a dark page, dark translucent might blend. On a light page, dark cards with light text would stand out as "spotlight". That's okay. But if the page background is dark, dark cards might not have enough contrast, but we have box-shadow to separate.

Alternatively, use a gold-tinted dark background: `rgba(30, 27, 40, 0.85)` with box-shadow.

Let's refine the palette:
- Hero column text: cream #fdfaf6
- Badge: gold gradient with dark text
- Cards: deep purple-tinted dark translucent background with cream text and gold border? But border would add layout; avoid. We can use `outline`? Outline doesn't affect layout. We can add `outline: 1px solid rgba(251, 191, 36, 0.2);` But outline can be okay. The instruction says we can change outline styles. But adding outline may be okay. However, some browsers outline follows border-radius? With border-radius, outline may not match in older browsers. Better use `box-shadow` to simulate border: `box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 16px 36px -12px rgba(0,0,0,0.5);` This adds an inset-like border via shadow. That doesn't affect layout. Good.

Let's craft final:

```css
@media