/* ============================================================
   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 in conservative mode, visual changes only. But the provided CSS snippet is very small, only a media query with text-align and padding, plus font-size. There are no colors or shadows to change. We must preserve selectors and layout exactly, and only change visual properties like colors, shadows, radius, transitions, gradients. But there aren't any in this snippet. However, the task wants us to refresh this CSS visually. We can add visual properties? But constraint says keep layout exactly, only change colors etc. Since there are no existing color values, we cannot change them. But perhaps we can adjust the padding? Wait padding is layout, must keep similar ±20% maximum. But we are told to change only colors, shadows, and decorative properties. The original snippet has padding: var(--space-md) !important; That is a padding property, which is layout, but can change within ±20%? Actually padding is in the "NEVER CHANGE" list, but with "keep similar values, ±20% maximum". So we can adjust padding slightly? But the target style says centered-stage with large padding, but that's aggressive layout pattern. Conservative mode says only visual changes, but padding is allowed to vary ±20%. However, we must not change the meaning too much. But the original media query is for small screens. The target style "centered-stage" suggests centering, but we can't change text-align? Actually text-align is in the "NEVER CHANGE" list as well. It says typography fixed: text-align, vertical-align are in the never change list. Wait, in the instructions: "text-align, vertical-align" are under TYPOGRAPHY (font system fixed), so we cannot change them. So we must keep text-align: center as is.

The mention "Mode: CONSERVATIVE (HTML fixed, visual changes only)" means we should only alter visible styling. The original snippet is a media query with text-align and padding. There is no visual identity to refresh. But we can add box-shadow? No, because that would change layout? No, box-shadow doesn't affect layout. But we shouldn't add new properties that may affect layout? It's allowed to add decorative properties. However, the instruction says "Only colors, shadows, and decorative properties may change." So we can add box-shadow, background, etc. But we must preserve selectors exactly.

We need to output the rewritten CSS. The safest is to output the same CSS but perhaps adjust padding slightly and add maybe a background? But the selectors target elements in a media query. Adding background to .contact-card might change visual. But is that within scope? Yes, colors are visual. But the original didn't have any colors. We need to refresh to target style "centered-stage" with dark stage and gold accent. But the media query is for small screens. We could add a background color to the contact-card? However, the contact-card might be a card that already has its own styling outside this media query. Since this snippet is only the media query, adding background here would override outside styles? It would apply only within the media query. That might be okay.

But we must be careful: the instruction says "preserving ALL selectors and layout exactly" and "ONLY the rewritten CSS". We need to rewrite the existing CSS, not add extra selectors. So we must keep the exact selectors and declarations, but we can change the values of visual properties. For the declarations present:
- text-align: center; is not a color/shadow/radius/transition/gradient. It is layout/typography, cannot change. So keep.
- font-size: 0.85rem; is typography, cannot change. Keep.
- padding: var(--space-md) !important; is layout, can change within ±20%. We could change to calc? But var is a custom property; we can change the value to something else? The instruction allows changing CSS custom property values. So we can change --space-md? But that variable is defined elsewhere, not in this snippet. We cannot define it here without adding a selector. Actually we can change var(--space-md) to a different value? That would change the value of padding, perhaps within ±20%. But we don't know the value of --space-md. To be safe, we can keep it as is, or replace with a specific padding that is similar? But if the original uses a variable, removing the variable might break. Better keep it.

Since there are no color properties, the new palette cannot be applied here. But the instruction "refresh the visual identity" suggests we should make some changes. Perhaps we can add a background-color to the .badge.bg-warning? But that would be adding a new property, not changing an existing one. Is that allowed? The instructions say "All color values: background, color, border-color, fill, stroke, outline-color" are MUST CHANGE. But if there are none, we might not need to. However, the self-check says "Colors throughout the file replaced with fresh palette?" If there were no colors, it's vacuously true. But the task specifically says "Refresh this CSS visually". With no visual properties, we can't do anything.

Maybe the original file has more content, but the user only provided one block. The request ID and file fingerprint indicate this is part of a larger file. But our job is to rewrite this given CSS. We need to output something. Perhaps we can add a subtle transition to the elements to match "snappy transitions (0.15s)" — but transition is not a layout property, it's visual. We can add `transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;` to the elements. But adding a new property to existing selectors is within "transition timing, easing, duration" must change? Actually we can add transitions because they're decorative. But does adding a transition change layout? No.

But we must be careful with the selector `.app-hero-section .badge.bg-warning` in media query. Adding a transition might be okay. However, the instruction says "NEVER CHANGE ... transition timing, easing, duration" is actually in the MUST CHANGE list? Let's read: "✅ YOU MUST CHANGE (visual identity only): ... transition timing, easing, duration" — that means if there are transitions, change them. There are none. Adding is fine.

Also, "border-radius" is a must change. We could add border-radius to the contact-card? But if we add border-radius to a card that already has one, it might override. But within the media query only on small screens. It might be okay. The target effect is "sharp-edges" with 0-4px radius. The original card may have a radius; in this media query we could set border-radius: 4px or 0. But that might change the visual appearance on mobile, which is allowed.

Similarly, we could add a box-shadow to the cards: `box-shadow: 4px 4px 0px 0px rgba(255,255,255,0.1);` or something. But adding box-shadow to .contact-card in media query might change the intended layout? Box-shadow doesn't affect layout. It's visual. So allowed.

But we must preserve the other properties. Let's think about the overall style: "centered-stage" with dark stage #0f0f1a, bright content area, premium gold or deep purple accent. "sharp-edges" hard offset shadows: 4px 4px 0px solid color, small radius, strong borders 2-3px solid, snappy transitions.

Since the original snippet doesn't have colors, we can add a border to the contact-card? But adding a border changes dimensions? Actually box-sizing is not changed, but border is layout? Border width is not allowed to change, but we can change border-color and border-style, not border-width. The instruction says "border-color and border-style (NOT border-width)". So if we add a border, we are changing width from 0 to 2px, which would affect layout. That's not allowed. So we cannot add a border unless it's already there. Similarly, we cannot change padding to a hardcoded value if we don't know the variable? We can use `padding: var(--space-md) !important;` but we could change the value to something else, but layout must stay similar. We don't know --space-md. To be safe, keep.

Maybe we can add `background: #0f0f1a;` to the `.contact-quick-section .contact-card`? That would add a dark background to the card, but the card may already have a background. This is a media query, so on small screens it would become dark. That's a visual change. But would that be appropriate? The target style suggests dark stage with bright content area. Maybe the card is a content area, so bright background? Actually "dark stage, bright content area" means the overall page is dark, and content cards are bright. So card background should be light. We could set `background: #ffffff;` but that's a strong change.

But we don't know the original styles. Adding properties in a media query might override existing styles unexpectedly, but that's the point of a refresh. The instruction allows changing colors, shadows, etc. So we can add color properties.

However, the self-check demands "Every selector character-for-character preserved?" If we add new declarations to the same selector, the selector itself is preserved. So okay.

Let's rewrite the CSS content:
- Preserve the @media rule and selectors exactly.
- Keep text-align, font-size, padding as is (or slightly adjust padding within ±20%? We can change padding from var(--space-md) to a similar spacing value? But we don't know the base. The variable likely represents a spacing scale like 1rem or 1.5rem. We could replace with `padding: 1.25rem !important;` which might be similar? But that would break the use of CSS custom property, which is not ideal. Since the instruction says "CSS custom properties (--color-*, --shadow-*) values" must change, but --space-md is a spacing custom property, not a color/shadow. The instruction specifically says CSS custom properties values under "MUST CHANGE" are those for colors and shadows. So --space-md is a spacing custom property, which is layout, and should not be changed. So keep `var(--space-md)`.

Thus, the only changes we can make are adding new visual properties. Let's add to each selector:
1. `.app-hero-section .row .col-lg-7` — already has text-align: center. We can add `transition: transform 0.15s ease;`? But this is a column, adding transition may not be needed. Maybe add `backdrop-filter: blur(0);`? Not helpful. Could add `box-shadow: none;`? That would be weird. Better leave as is? But then no refresh. Maybe add `background: rgba(15,15,26,0.0);`? That's pointless.

2. `.app-hero-section .badge.bg-warning` — This is a badge with warning background. We can change the background-color to a premium gold? But the class `bg-warning` likely comes from Bootstrap, and its color is defined elsewhere. We can override here: `background-color: #f7c948;` or something. But the selector includes `.bg-warning`, so we can explicitly set a gold accent. That would be a color change. Great. Also change `color` to a dark purple? But the original doesn't have color. We can add `color: #1a1a2e;` for contrast. But must ensure it's on small screens only. Also add `box-shadow: 4px 4px 0px rgba(212,175,55,0.4);` and `border-radius: 4px;`? But border-radius on a badge might be small. Actually Bootstrap badges have border-radius 0.375rem. We can override to 4px. Also add transition: `transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;`. But if the badge has :hover states elsewhere, not in this media query. Adding transition is fine.

3. `.contact-channels-section article` and `.contact-quick-section .contact-card` — These are cards. We can add background, border-radius, box-shadow. But if we add background, it might override existing. Let's choose a bright content area color: `background: #f8f9fc;` (light). But the target is dark stage with bright content. The cards should be bright. Also add `box-shadow: 4px 4px 0px rgba(111,66,193,0.2);` (deep purple accent shadow). And `border-radius: 4px;` to match sharp-edges. And `transition: box-shadow 0.15s ease, transform 0.15s ease;`. But transform is not a color/shadow, but transitions can include transform; however, changing transform is not allowed unless it's already there. But adding a transition doesn't change transform value, only enables transitions if transform changes elsewhere. That's okay. But to avoid any potential interference, we might not include transform. Also `background-color` might change the card's appearance. But note the selector is `article` within `.contact-channels-section`, and `.contact-card` within `.contact-quick-section`. There are two selectors with a comma. Adding same visual props to both.

Also, the padding already exists: `padding: var(--space-md) !important;`. We can keep that. If we add background, border-radius, box-shadow, that would be a refresh.

But we must be cautious: adding background to `article` element might interfere with any background images or colors already applied. But that's a visual change, which is desired. Since we are in conservative mode, we can change colors. So okay.

We also need to consider the `@media (max-width: 575.98px)` block. The media query condition is fixed, cannot change. We'll keep it.

Let's write the new 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;
        background-color: #f7c948;
        color: #0f0f1a;
        box-shadow: 4px 4px 0px rgba(212, 175, 55, 0.35);
        border-radius: 4px;
        transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border-radius: 4px;
        box-shadow: 4px 4px 0px rgba(111, 66, 193, 0.15);
        transition: box-shadow 0.15s ease, background-color 0.15s ease;
    }
}
```

But wait: the `.badge.bg-warning` is a Bootstrap warning badge. The background-color `#f7c948` is gold. The text color `#0f0f1a` is dark. But `color` typography? The instruction says font-family, font-size, font-weight, line-height, etc. cannot change, but `color` is not typography? Actually color is in the "MUST CHANGE" list: "All color values: background, color, border-color, ..." So we can change color. Good.

But note: `.app-hero-section .badge.bg-warning` already has `font-size: 0.85rem`. We keep that. Adding `color` changes the text color, which is visual. Good.

Now, do we need to preserve the original declaration order? Not necessarily. We can keep the original declarations then add new ones. The output should have the original declarations for layout/typography, plus new visual declarations. That's fine.

But we must ensure "All color values throughout the file replaced with fresh palette?" Since we added fresh colors, yes.

Let's consider if adding transition to `.col-lg-7` is necessary. Probably not.

One more thing: The instruction says "border-radius (visual rounding only)" must change. We are changing border-radius from perhaps default to 4px. Good.

Also, "strong borders (2-3px solid)" but we cannot add border-width. We can add outline? `outline: 2px solid #...;` Since outline doesn't affect layout, it's allowed. Actually outline is a visual property. Could add an outline to the cards: `outline: 2px solid #e8e8f0;` But the instruction says "outline styles (color, type)" can change, and "outline-color" must change. But if we add an outline with a width, that's allowed because outline-width isn't explicitly forbidden? The "NEVER CHANGE" list includes "outline styles (color, type)"? Wait, it says under MUST CHANGE: "outline styles (color, type)" and "outline-color". Under NEVER CHANGE, there is no mention of outline-width. But "border-width" is not allowed; outline-width is not specifically forbidden. However, adding an outline with a width may be considered a layout-affecting element? Outline does not affect layout. So we could add `outline: 2px solid rgba(15,15,26,0.1);` to the cards for a strong border feel without affecting layout. That would align with "sharp-edges strong borders". But the instruction says "border-style (NOT border-width)" and "border-color". Adding a border is not allowed because border-width would change. But outline is a separate property. So we can use outline.

Should we add outline? It might be too much. The cards already have a shadow and background. Maybe enough.

Let's also think about the "centered-stage" pattern: dark stage #0f0f1a, bright content area. We can add a dark background to the body? But there is no body selector. We cannot add new selectors. We can only modify existing selectors. So the background of the stage cannot be changed without adding a selector. We must not add selectors. So only the card backgrounds become bright. The surrounding area stays as is. That's fine.

The effect