/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

The user wants me to rewrite CSS with visual changes only. The original CSS is a media query block. There are only a few properties here:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

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

The constraints:
- Keep selectors exactly
- Keep layout (display, position, grid, flex, width, height, padding/margin within ±20%, font-family/size/weight/line-height, text-align, etc.)

Wait, `text-align: center` is in the "never change" list (text-align, vertical-align). The `font-size: 0.85rem` is also in the never-change list (font-size). `padding: var(--space-md) !important` — padding is within the never change list (keep similar values, ±20% maximum). Since it's a CSS variable, I can't change the variable value necessarily... well, actually I could redefine the variable but that might affect layout elsewhere.

The instruction says "Colors, shadows, and radius more distinct this round. Use a fresh palette." But this particular CSS block has no colors, shadows, or radius. It only has text-align, font-size, and padding.

The centering layout pattern requested (centered-stage) and flat-solid variant (box-shadow: none, solid backgrounds, no gradients, minimal radius 0-6px). However, there's nothing here to change in terms of background, color, shadow, radius.

What can I do? I must keep the layout properties unchanged. I cannot change text-align, font-size, or padding. So the CSS would essentially remain identical. But the task says "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round."

Since there are no colors/shadows/radius in this block, I have limited options. Could I add new properties? The instruction says "Only colors, shadows, and decorative properties may change." But adding properties to existing rules... that would be adding visual properties that don't change layout. For example:

- Add `border-radius` to `.app-hero-section .badge.bg-warning`? But the badge has no border-radius in the original. Adding border-radius wouldn't change layout (well, it changes visual only). But wait, the rule is `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — adding border-radius would be a visual change. However, it might be undesirable to add properties not originally present. The instructions say "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It doesn't strictly prohibit adding decorative properties. But the "NEVER CHANGE" list includes "padding, margin (keep similar values, ±20% maximum)" — adding padding isn't allowed. But border-radius isn't in the never list.

Hmm. Let me think more carefully. The safest approach: since this block is inside a media query for small screens, and the only rules are layout/typography (which must not change), the rewritten CSS would be identical. But the task explicitly says to make changes. Maybe I can add decorative properties that don't affect layout — like `box-shadow: none` to satisfy the "flat-solid" variant, or add `border-radius: 0` or `border-radius: 6px` to cards. But adding border-radius to `.contact-card` could be considered a visual change only — yes, border-radius is visual.

The "flat-solid" variant says box-shadow: none everywhere, solid backgrounds only, minimal radius (0-6px). So maybe I should add `border-radius: 0` or a small radius, and `box-shadow: none` to these elements. But the cards in the original might have shadows; this media query block might be overriding padding only. Adding `box-shadow: none` here would enforce flat design in mobile view.

However, the instruction "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" — adding properties to existing rules preserves selectors and layout. I think it's acceptable to add decorative properties like border-radius, box-shadow, background, color, etc., as long as layout is unaffected.

But wait — the "NEVER CHANGE" list includes typography: font-size, font-weight, line-height, letter-spacing, text-transform, white-space, word-break. So `font-size: 0.85rem` must stay. And text-align must stay.

Padding: `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — must keep padding. I could keep it exactly.

So what can I actually change? The only properties I can add without affecting layout:
- `background-color` / `background`
- `color`
- `border-color`, `border-style` (not width)
- `border-radius`
- `box-shadow`
- `text-shadow`
- `outline-color`, `outline-style`
- `opacity`
- `filter`, `backdrop-filter`
- `caret-color`, `accent-color`
- `transition` properties
- `transform`? Wait, transform changes layout visually but not layout flow — but it's not in the allowed list explicitly. The allowed list is "colors, shadows, radius, transitions, gradients." Transform isn't listed. Avoid.

Given the target style "centered-stage" — dark stage #0f0f1a, bright content area, premium gold or deep purple accent. And "flat-solid" — no shadows, solid backgrounds, minimal radius.

Maybe I should add a subtle `background-color` to the contact cards? But adding background could reveal new colors. However, the original CSS didn't have background on these elements in this media query. If I add `background-color: #0f0f1a` to body or something... but there's no body selector here.

Let me reconsider. The instruction says "Only colors, shadows, and decorative properties may change." It doesn't say "add new declarations." In conservative mode, I should be careful. Perhaps the best output is to keep the file essentially the same, since there is nothing to change. But the user explicitly complains that "Previous attempt didn't change enough." So I need to make visible changes.

I think adding decorative properties to the existing selectors is the way to go. Let me design:

Target style: centered-stage + flat-solid. The elements:
1. `.app-hero-section .row .col-lg-7` — on mobile, text centered. I can add `color`? The hero section content text color. But changing color might affect readability. Since the target palette is dark stage with bright content, maybe set `color: #f5f2e6` (bright warm white). That's a solid background? No, it's text color. Allowed.

2. `.app-hero-section .badge.bg-warning` — a badge with bg-warning class. Bootstrap's `.bg-warning` sets background color via Bootstrap CSS. In this media query, font-size is set. I could add `border-radius: 6px` (minimal radius), `box-shadow: none`, and maybe `color: #0f0f1a` (dark text on gold badge). But `.bg-warning` already has a background from Bootstrap. Adding `background-color` would override? Actually in the original there's no background declaration. If I add `background-color: #d4a017` (premium gold), it would change the badge's background in mobile. That's a color change. But is that allowed? It's adding a property, not changing an existing one. The instruction says "All color values: background, color, border-color..." — sounds like all color values present must be replaced. It doesn't say "you may only change existing properties." I think adding is acceptable.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — these are cards. Add `border-radius: 6px`, `box-shadow: none`, `background-color`? Adding background could be risky because it might conflict with existing backgrounds — but since it's a media query for mobile, we can set a solid background color. The flat-solid variant wants solid backgrounds. Perhaps `background-color: #1a1a2e`? But if the page is light-themed, this would look weird. The target is dark stage. Let's go with a dark theme.

However, I'm worried about violating the "layout" rules by adding padding? No, I won't touch padding. Border-radius doesn't affect layout. box-shadow doesn't affect layout. background-color doesn't. color doesn't.

Let me craft:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #d4a017;
        color: #0f0f1a;
        border-radius: 6px;
        box-shadow: none;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #1a1a2e;
        border: 1px solid #2d2d44;
        border-radius: 6px;
        box-shadow: none;
    }
}
```

Wait — "border-color and border-style (NOT border-width)" is in the changeable list. Adding `border: 1px solid #2d2d44` sets width (1px) which is technically a border-width. The instruction says border-width is NEVER change. Adding a border-width where none existed before — is that changing border-width? The original rule has no border. Adding a border with width might be considered a layout change because border adds to the box size (unless box-sizing: border-box is set... still layout). Hmm. In conservative mode, adding border-width could alter dimensions. But if the element already has a border from another rule, adding a different color would be okay. I don't know the rest of the stylesheet. To be safe, avoid adding `border` with width. I could add `border-style: solid` and `border-color: #2d2d44` without a width — but if no width is set anywhere, it defaults to `medium` (3px), which would add layout. That's risky too.

Better avoid border entirely. Use background-color and border-radius, and maybe outline? Outline doesn't affect layout! Outline is drawn outside the box and doesn't affect layout. But outline adds visual. The changeable list includes "outline styles (color, type)". I could add `outline: 1px solid #2d2d44`? Outline width is similar to border-width but outline doesn't affect layout. The rule says "outline styles (color, type)" can change — but adding outline with width? Outline width isn't in the never-change list, and outline doesn't affect layout, so it's safe. Actually, outline is a visual property. Let me use `outline: 1px solid #2d2d44; outline-offset: -1px;`? Outline-offset is fine.

Actually, better to keep it simple. Flat-solid: no shadows, minimal radius. Use background-color and border-radius only.

But hold on — the target style "centered-stage" mentions max-width 720-960px, margin 0 auto, etc. Those are layout properties that are in the "Aggressive only" plan, but we're in conservative mode so we cannot change layout. We can't center content or add max-width because that would violate layout constraints. So we only apply the color palette and flat-solid variant.

The palette: dark stage #0f0f1a, bright content area, premium gold accent. Let's use:
- Background of content area: #f5f0e6 (bright warm ivory) for text color in hero? But if the page is dark, text should be light. The "dark stage" suggests the overall background is dark. For text on dark, use #f5f0e6.
- Accent gold: #d4a017 or #c9a227.
- Deep purple: #5a3d8a or #3c2a5d.

Let me define:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c9a227;
        color: #0f0f1a;
        border-radius: 6px;
        box-shadow: none;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #1a1a2e;
        color: #d8d4c8;
        border-radius: 6px;
        box-shadow: none;
    }
}
```

Wait, adding `background-color: #1a1a2e` to cards could be bad if the original design was light — but the target style explicitly says dark stage. Since we're refreshing the visual identity, this is fine. But will it blend with the rest of the stylesheet? Unknown. But the task wants a fresh palette.

However, one concern: The instruction says "box-shadow: none everywhere" for flat-solid. Adding `box-shadow: none` to these selectors enforces that. Good.

Another concern: `color: #f5f0e6` on `.col-lg-7` might affect headings and text inside the hero, making them light. That's a visual change, allowed.

Let me also consider transitions. The changeable list includes "transition timing, easing, duration". I could add transitions, but on a media query for mobile, transitions might be fine. But adding transition properties to these elements... e.g., `transition: background-color 0.3s ease, color 0.3s ease;` This doesn't affect layout. But it's an addition. Should I? The flat-solid variant doesn't mention transitions. I'll leave them out for simplicity and safety.

Also, the never-change list says "margin (keep similar values, ±20% maximum)" — I'm not touching margin.

Now, about the "centered-stage" max-width 720-960px, margin 0 auto — I can't add those because they are layout properties (max-width, margin). The rules are inside a media query specifically for small screens (max-width: 575.98px), so adding max-width: 960px would actually do nothing on small screens anyway. So skip.

Let me double-check the selectors are preserved character-for-character:
- `@media (max-width: 575.98px)` — preserved.
- `.app-hero-section .row .col-lg-7` — preserved.
- `.app-hero-section .badge.bg-warning` — preserved.
- `.contact-channels-section article, .contact-quick-section .contact-card` — preserved.

Layout properties:
- `text-align: center;` preserved.
- `font-size: 0.85rem;` preserved.
- `padding: var(--space-md) !important;` preserved.

Added properties are all decorative: color, text-shadow, background-color, border-radius, box-shadow. Good.

But wait — `text-shadow` is in the changeable list. `background-color` is a color value. `border-radius` is explicitly changeable. `box-shadow` is changeable. `color` is changeable.

Should I add `background-color` to the hero col? No, that might create a block background. Better not.

Let me also consider if `border-radius: 6px` on the badge might be overridden by Bootstrap's `.badge` styles with `border-radius: 0.375rem` (6px). Actually Bootstrap badges have `border-radius: 0.375rem`. If there's a `.rounded-pill` class... we don't know. Adding border-radius to the mobile media query is fine.

For the cards, Bootstrap `.card` has `border-radius: 0.375rem` (or 1rem in Bootstrap 5.3). Setting `border-radius: 6px` is consistent with flat-solid minimal radius.

The text-shadow on the hero: is that wanted? The target style says "Spotlight feel: dark stage #0f0f1a, bright content area". A subtle text-shadow can enhance legibility on dark backgrounds. But if the original background is light, adding a dark text-shadow would look odd. Hmm. Since I'm also setting color to a light ivory, it implies a dark background. But I haven't set the background of the hero section. The color alone doesn't change the background. If the hero background is a dark image (from Bootstrap's hero), light text makes sense. Given the target style explicitly says dark stage, I'll go with it.

Actually, let me reconsider whether to set `color` on the hero col. The original CSS had no color there. Adding color could make text invisible if the background is dark but the original text was dark. Wait — if background is dark and original text is dark, then adding light color improves it. If background is light and original text is dark, adding light color breaks it. The target style says the page should be dark stage, so we're intentionally darkening. But we're not setting the background. That's a risk. However, the task wants a bold visual refresh. I'll keep the light text.

Alternatively, I could set `background-color` on the hero col to dark, but that would create a large dark block.

Let me think about what else I can change. The "flat-solid" variant also says "Solid background colors only (no gradients)" — but we have no gradients. Good.

Maybe I should include `accent-color` or `caret-color`? Not relevant for these elements.

Let me