/* ============================================================
   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 respond with rewritten CSS for given snippet. Need follow conservative mode, target style centered-stage with glow effects. Need keep selectors, layout. Original CSS is just media query with 3 rules. We can change visual properties only. But existing declarations: text-align center cannot change? Actually text-align is typography? In no-change list includes text-align. So must keep exactly. font-size 0.85rem cannot change. padding? Layout: padding can keep similar ±20%, but in original uses var(--space-md) !important. We can change value? "padding, margin (keep similar values, ±20% maximum)" but custom property value? Better leave padding as var? Could adjust --space-md? But no custom definitions. We can change padding? Need perhaps not. We can add visual properties to these selectors within media query: color, background, border, border-radius, box-shadow, etc. But content: hero section row col-lg-7 is text-centered. Badge.bg-warning has font-size. Contact cards have padding. We can add styles? Need preserve selectors. We can add declarations to each rule. Is it allowed? Yes, visual only. Need use target palette: dark stage #0f0f1a, gold/deep purple accent. But body not here. We can add glow effects to elements? Need ensure not layout. Could change padding value? no, keep. Add border-radius, border? But border-width might affect layout unless box-sizing border-box. Better use box-shadow with inset? It doesn't affect layout. Use background maybe. But .badge.bg-warning is bootstrap class, adding background-color would override; okay. But perhaps should preserve .bg-warning semantics? We are refreshing. Need maybe add "text-shadow" for heading? But selectors fixed, can add properties. Need output only CSS, preserving selectors. Need no markdown fences. Need maybe use color variables? We can use variables. But only original has no custom props. We can add custom properties? Yes values. But need consider scope. Could use colors directly.

Let's inspect original snippet:
@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;
    }
}

Need refresh visual identity. Since only mobile media query, add glow subtle. Maybe for hero text, color/background? But text-align remains. Could set color to spotlight? But original maybe inherits. We can set color: #f5f0e6; text-shadow: 0 0 12px rgba(212,175,55,0.35); But would dark text? We need know context. Target centered-stage: dark stage #0f0f1a, bright content area. For heading col-lg-7, likely in hero. Set color? If hero has dark bg maybe. Could add text-shadow glow. But if text color is dark, gold glow weird. Better set color: #fff? But preserving readability. Hmm.

Contact cards: add background: rgba(255,255,255,0.04); border: 1px solid rgba(212,175,55,0.25); border-radius: 16px; box-shadow glow. But adding border can alter layout by 2px unless box-sizing border-box. Bootstrap might use border-box globally. But conservative mode says border-width can't? Actually "border-color and border-style (NOT border-width)" means don't change border-width? It says NEVER CHANGE: border-color and border-style? Wait list says:
  • border-color and border-style (NOT border-width)
Under "✅ YOU MUST CHANGE": "border-color and border-style" can change. Under "🔒 NEVER CHANGE": "border-color and border-style" is listed? Let's read carefully:
✅ YOU MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow...
  • text-shadow
  • border-radius...
  • ...
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
🔒 NEVER CHANGE:
  ...
  Padding, margin, gap, etc. width height...
  ...
Actually Never Change list doesn't mention border width except in "width". It says "border-color and border-style (NOT border-width)" under must change means can change color and style, but not border-width. So adding border-width 1px would be change from 0? That might be layout. Better avoid adding border-width unless using box-shadow inset to simulate border.

Also need no pseudo, no animations? Could add transition: box-shadow .3s ease; But media query only, no hover rule. Add transitions okay.

Need maybe adjust border-radius on .contact-card to 16px. But padding unchanged. Background color. But "centered-stage" target aggressive layout not needed. However our task says refresh visual identity without changing layout. Need output.

Let's think if we can add a rule to :root or body? No, must preserve selectors? "Every selector character-for-character preserved?" We can add selectors? Probably no, only existing. Could add new keyframes? Maybe not necessary.

Let's craft:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f8f4ec;
        text-shadow: 0 0 18px rgba(212, 175, 55, 0.45), 0 0 42px rgba(111, 66, 193, 0.3);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #d4af37, #9b59b6);
        color: #0f0f1a;
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(212, 175, 55, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 16px;
        box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.22), 0 0 22px rgba(212, 175, 55, 0.12), 0 12px 32px rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(8px);
        transition: box-shadow 0.35s ease, background 0.35s ease;
    }
}

Need preserve padding: var(--space-md) !important same. Add background etc. Is backdrop-filter layout? no. But might be overkill.

Need consider "font-size unchanged" yes. "text-align unchanged" yes. "padding unchanged" yes. "color values throughout fresh palette" yes changed/add. "Shadows redesigned" yes. "Border-radius adjusted" yes. No layout changes.

Need maybe not set .badge background because .bg-warning is Bootstrap warning color; but target palette gold/deep purple gradient. Could be okay.

Need output only CSS, no markdown. Ensure first char @. Also no comments.

But need maybe include more glow. The centered-stage layout pattern: dark stage #0f0f1a, bright content, accent. Since not seeing rest, maybe should define color scheme via variables in media? Could add custom props to existing rules? For instance .contact-card { --surface: rgba(...) }? But not needed.

Need think if adding `color` to col-lg-7 could affect descendants? It sets inherited color. Good. `text-shadow` on hero column. But if col contains multiple elements, text-shadow inherited? text-shadow is inherited? Yes text-shadow is inherited? Actually text-shadow is inherited? CSS text-shadow property is inherited: yes? I think text-shadow is inherited (yes, it's inherited). Hmm, maybe okay.

Need maybe not set text-shadow because it can make text illegible if colored. But we set color bright.

Need maybe include `-webkit-backdrop-filter` for Safari? Could. But output should not be too long. Use standard.

Need maybe alter transition timing from default? On mobile no hover but okay.

Need ensure `.badge.bg-warning` with `background` declaration as `linear-gradient` might override Bootstrap's `background-color`, but not layout. Might affect `background-image` with important? Bootstrap's `.bg-warning { background-color: #ffc107 !important; }` Actually Bootstrap utility bg-warning uses `background-color` with !important. Our linear-gradient is background shorthand (background-image), not background-color. So the yellow bg-color remains behind; our gradient is image over yellow? The background shorthand resets background-color? In CSS, `background: linear-gradient(...)` sets background-image and resets background-color to transparent? Actually shorthand sets all background properties, including background-color to initial transparent. But specificity, Bootstrap `.bg-warning` has `background-color: #ffc107 !important;` Since our `background` shorthand does NOT have !important, important wins for background-color? But background-color from Bootstrap important will override. But background-image is separate and not from Bootstrap. The final may show gradient over solid yellow if image opacity? Gradient covers full, background-color not visible. Fine. But shorthand might not override important. Good.

Need maybe set `border-radius: 999px` not "medium radius"? Target wants medium radius 8-16px, but badge pill is okay? It says effect variant medium radius 8-16px, but badge perhaps okay. Could use `border-radius: 16px` to align. But badge typically pill. Since target says medium radius (8-16px), use `border-radius: 14px` maybe. Yet `font-size 0.85rem` badge, 14px radius on badge okay. Use `border-radius: 14px` for contact cards and badge? Maybe glow. For "centered-stage" no requirement. Let's use 14px.

Need maybe set `.app-hero-section .badge.bg-warning` text-shadow? Could add `text-shadow: 0 0 8px rgba(255,255,255,0.4);` not needed. But color dark #0f0f1a on gold gradient. Good.

Need perhaps set `box-shadow` on col-lg-7? It's a column, box-shadow could outline area. But maybe not. Could add `text-shadow` only.

Need maybe apply to contact cards: `background: linear-gradient(145deg, rgba(212,175,55,0.08), rgba(111,66,193,0.06));` instead of single color. Since palette deep purple. Use gold/purple.

Let's refine:
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #faf6ee;
        text-shadow: 0 0 12px rgba(212, 175, 55, 0.35), 0 0 40px rgba(111, 66, 193, 0.2);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #120f1d;
        background: linear-gradient(135deg, #d4af37 0%, #b78628 45%, #9b59b6 100%);
        border-radius: 14px;
        box-shadow: 0 0 24px rgba(212, 175, 55, 0.45), 0 0 48px rgba(155, 89, 182, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(212, 175, 55, 0.06), rgba(111, 66, 193, 0.05));
        border-radius: 14px;
        box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.18), 0 0 18px rgba(212, 175, 55, 0.1), 0 14px 36px rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(6px);
        transition: box-shadow 0.3s ease-in-out, background 0.3s ease-in-out;
    }
}

But one issue: `background` shorthand with gradient and no background-color: If element has existing background from Bootstrap or theme, this overrides. Good. But contact card may have its own background; okay.

Need maybe `box-shadow: 0 0 0 1px rgba(...)` uses a 1px spread as border, doesn't affect layout. Good.

Need perhaps `filter: drop-shadow(...)`? Not needed.

Need maybe `caret-color/accent-color`? Not relevant.

Need maybe include `transition` but no hover rule. Fine.

Need check "Only CSS preserving ALL selectors and layout exactly" We output only these rules with same selectors. Good.

Need perhaps avoid adding `border-radius` to `.badge.bg-warning`? It's visual. fine.

Need no markdown, no comments. Ensure no empty lines? okay.

But the instruction says "Colors throughout the file replaced with fresh palette?" Original file has no colors except variables perhaps. We added. Good.

Need maybe use CSS variables? Could define:
:root {
  --spot: #0f0f1a; etc
}
But adding :root would change selectors and not in original. Avoid.

Need perhaps modify `padding: var(--space-md) !important` to `padding: 1.5rem !important`? No, keep same.

Could alter `font-size`? No. Keep.

Need maybe use `font-size: 0.85rem` exactly. Yes.

Need maybe not set `text-align`? keep exactly.

Need consider mobile media max-width 575.98. "centered-stage" uses max-width 720-960 centered content. Not enough context. Could add `margin-inline: auto`? no.

Need maybe target "centered-stage" in output? We cannot change layout but can center with margin? The instruction says "layout pattern Aggressive only" maybe not enforce. We should not change layout. So no.

Need perhaps add `background: #0f0f1a` to body? Not in selectors. No.

Need maybe for `.contact-channels-section article` and `.contact-card`, in mobile only, we can add `text-align: center`? But text-align is layout/typography no change? No need. "centered-stage" center content. But original leaves text align. Could add text-align center? It would alter layout; avoid.

Need think through whether `backdrop-filter` can cause performance; okay.

Need maybe set `border: 1px solid`? Use box-shadow.

Let's ensure no violation:
- No changes to display, position, grid etc. None.
- No changes to original declarations: `text-align: center`, `font-size: 0.85rem`, `padding: var(--space-md) !important` preserved.
- New declarations are visual: color, background, border-radius, box-shadow, text-shadow, backdrop-filter, transition. All allowed.
- No selector changed.
- No keyframes, @import etc.
So valid.

Need maybe not include "!important" on new declarations? No need. But if original padding had `!important`, padding unchanged. Fine.

Potential issue: The `.contact-channels-section article, .contact-quick-section .contact-card` selector list spans lines. We preserve exactly.

Need maybe perhaps `border-radius: 14px` on `.badge` could be considered not "medium radius"? 14px within 8-16. Good.

Need maybe use "deep purple accent" with gold. Good.

Need perhaps add `outline`? No.

Need perhaps add `accent-color`? no.

Need maybe use `box-shadow` with multiple layers. Yes.

Need maybe output with "line" breaks. Fine.

Let's think if there is a need to use color palette from target: `#0f0f1a` dark stage. Our text color `#faf6ee` bright. We used gold and purple. Good. Could add `background: rgba(15, 15, 26, 0.6)`? Not needed.

Need maybe use `text-shadow` on `.badge` too? Maybe not.

Need perhaps "glow shadows in accent color: 0 0 24px rgba(accent, 0.4)" We have `0 0 24px rgba(212,175,55, .45)` exactly. "Halo on hover: 0 0 32px" no hover selector. Could add hover rule? No, selector list must be preserved; adding `.contact-card:hover` would be adding selector, not allowed? The instruction says "Every selector character-for-character preserved?" It probably means can't change or remove; adding new selectors? "HTML is fixed — only colors ... may change." Adding a hover rule would be adding new CSS, not in original. In conservative mode, avoid adding selectors. So no hover.

Could add transition so if existing hover elsewhere, it animates. Good.

Need maybe set `box-shadow: 0 0 24px color, 0 0 48px ...` matches glow. Good.

Need maybe use `@media (max-width: 575.98px)` original, keep.

Need perhaps include `transition` with duration 0.3s "transition timing" allowed. Good.

Need maybe set `backdrop-filter: blur(6px)`; if element has no background? but we gave background.

Need perhaps set `-webkit-backdrop-filter: blur(6px)`? Might be helpful but not necessary.

Need now final output