/* ============================================================
   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. Need follow conservative mode. Original CSS is a media query with rules under max-width. Only visual properties. Need preserve selectors exactly. We can change colors? But original has no color properties except font-size? It has text-align, padding, font-size; those are in forbidden? font-size must not change, text-align, padding can change ±20%. But target style asks visual refresh. There are no colors to change. Need maybe add colors? We are allowed to change visual properties; but cannot add selectors or change layout? Could add color declarations to existing selectors? The instruction: "ONLY colors, shadows, and decorative properties may change" and "Refresh visual identity WITHOUT changing layout structure or class names." Need output CSS with same selectors and properties? It says preserve selectors and layout exactly, only colors etc. We can add color, background, border? Need ensure not change layout? Adding background color maybe okay. But HTML fixed. We can add visual properties to these selectors? Need probably rewrite. But careful with "PADDING may change ±20%" but original padding: var(--space-md) !important. We can change? It's layout? allowed ±20%; but font-size and text-align forbidden. Since target "flat-solid" suggests shadows none; no shadows in original. Need add colors perhaps.

Need understand request: The file is #块2/2, only this media query. Need generate CSS from input with visual changes. Since no color properties, we might add colors to accent? But adding color could affect text contrast. Need maintain layout. Could assign background/border to .app-hero-section etc? But selectors are inside media query. Need not alter selectors or media condition. Need output same media query with perhaps additional visual-only declarations. But "Every selector character-for-character preserved?" If adding declarations within existing rule is fine. But must preserve original declarations? The instruction says "rewritten CSS" and "Only change colors..." We can leave non-visual properties unchanged. To demonstrate palette, add background/color/border-radius perhaps. But no shadows because flat variant. Need maybe alter `padding: var(--space-md) !important;`? Since padding is visual but layout; allowed ±20%. But if changing, maybe unnecessary. Also if add declarations, need avoid conflicting with original? Use existing values. Could add `background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px;` etc to `.contact-channels-section article` and `.contact-card`. But it's inside media, okay. But visual refresh perhaps only colors. Need consider mobile, dark sidebar palette maybe irrelevant. Target style sidebar-classic: two-column, but media query is max-width mobile, one column probably. We can only output media block.

Need maybe include @media with three rules. Need keep selectors. We can add colors within each rule. Since `.app-hero-section .badge.bg-warning` is a warning badge. We can style with background color, color, border-radius? But original only font-size; if we set color to #212529 etc. Since badge bg-warning with Bootstrap? We can override. But careful: `.badge.bg-warning` has background-color from Bootstrap with `!important`? In Bootstrap 5 `.bg-warning` has background-color: #ffc107!important. Our CSS maybe can override with same specificity and later? If no !important maybe Bootstrap might win depending order. Could add `background-color: #f59e0b !important;` but `!important` is valid visual. However instruction didn't forbid important. But "not change layout." Color okay. Need maybe no shadows.

Need maybe set `.app-hero-section` background? The rule's scope only children. Could add:
```
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    color: #1f2937;
    background-color: #fbbf24;
    border: 1px solid #d97706;
}
```
But `bg-warning` already has background. If target flat solid, use solid. Is adding border potentially layout? Border affects box-size if box-sizing border-box? Bootstrap uses border-box, so no layout if border-width? Border changes size but if box-sizing border-box no. But border is visual. We can keep border: 1px solid. But "reserved? border-color and border-style allowed, not border-width." Actually instruction says "border-color and border-style (NOT border-width)" but later list "border style" under can change. It says border-radius allowed. So adding border-width is not allowed? It says "NOT border-width" in list of can change? Let's review User message: 
✅ MUST CHANGE:
- border-radius
- border-color and border-style (NOT border-width)
So means can change border-color/style but NOT border-width. This likely means if original had border-width, don't change it. Adding border-width? Under "never change" no explicit border-width? Wait "NOT border-width" from can-change. So do not alter border-width. Better avoid adding new border if possible. But maybe border radius okay. We can add `border-radius: 6px`; no width. If there is no border, border-radius no effect. Could add outline? But no.

Need maybe remain flat solid by setting box-shadow: none. But original no shadow. We can set box-shadow: none maybe redundant. It is permitted and reinforces style.

Need maybe set colors everywhere? There are no major elements. Could add:
- `.app-hero-section .row .col-lg-7` maybe text-align center; maybe add background: transparent? no.
- `.contact-channels-section article, .contact-quick-section .contact-card` padding; can add background-color, border-radius, border-left? But border-left uses width, avoid. `box-shadow: none` and `border-radius: 6px` okay. Could add `background-color: #fff` but that may be okay. But if used on mobile, cards become colored. Yet not enough.

But the target is "sidebar-classic" and "flat-solid". Maybe we should not invent huge. Need align with "fresh palette." Maybe set background-color on `article` and `.contact-card` to `#ffffff`? But original had none, maybe page background. To create card feel, use:
```
background-color: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 0.375rem;
```
But border-width would be 1px. Is that changing border-width? No original no border, but we're adding. Instruction says border-width not change? Maybe this is a violation. It explicitly says "border-color and border-style (NOT border-width)" means if changing, not border-width. Adding a border of 1px could be considered changing layout. Avoid border. Use `background-color` and `border-radius` and `box-shadow: none` (but if background no shadow). Could use `outline`? But outline width? similar. Better only change colors and radius. But original has no colors, so adding background-color is allowed. We can add `color` maybe. Need maybe no border.

Need maybe set `.contact-channels-section article` and `.contact-quick-section .contact-card` to a light background and dark text:
```
padding: var(--space-md) !important;
background-color: #f8fafc;
color: #1e293b;
border-radius: 0.375rem;
box-shadow: none;
```
But if these elements are cards with background already, overriding to #f8fafc on mobile may look different. But okay.

Could perhaps set `.app-hero-section .badge.bg-warning` to custom:
```
font-size: 0.85rem;
color: #3b2f0a;
background-color: #fbbf24;
border-radius: 0.25rem;
box-shadow: none;
```
Need maintain `font-size`. Since bootstrap bg-warning uses !important, if our background not !important may not override if stylesheet order after Bootstrap? It depends. To guarantee, use `background-color: #fbbf24;` without important. The CSS file probably loaded after Bootstrap? likely. But if Bootstrap's `.bg-warning { background-color: #ffc107 !important; }`, it'll override. We can put `background-color: #f59e0b !important;` but `!important` is style; allowed. However not necessary? Since file might be custom after Bootstrap but not with important. Could use `background-color: #fbbf24 !important;` but target "flat-solid" and safe. User can change but okay. But instruction says no "AI-REWRITTEN" comments. Good.

Need maybe add `transition`? Original no transition. Could add `transition: background-color 0.2s ease;` but no hover states. It's visual only. But "transition timing, easing, duration" can change. Could include. But maybe unnecessary. The output should be cleaned.

Need consider "File fingerprint" not relevant.

Need maybe output only:
```
@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;
        color: #78350f;
        background-color: #fbbf24;
        border-radius: 0.375rem;
        box-shadow: none;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #f8fafc;
        color: #1f2937;
        border-radius: 0.375rem;
        box-shadow: none;
    }
}
```
But if adding background-color to cards, maybe they are on a colored background and white cards could appear. No issue.

Need ensure no forbidden layout properties changed: text-align remains, font-size remains, padding remains. `box-shadow: none` okay. `border-radius` okay. `background-color`, `color` okay.

Need maybe apply color palette with dark sidebar? In mobile there is no sidebar. Maybe not relevant. Could use palette but no.

Need perhaps alter `.app-hero-section .row .col-lg-7` with color? Adding color could affect if there is no explicit color. Could set `color: #374151;`. It's okay. But text-align remains. Should we? The target says "main lighter" maybe. Could add `color: #374151;` to hero. But it's a column; setting color inherits to all text. Could be good. If original did not specify, browser default is inherited from body. Changing to #374151 can refresh. But may affect child headings if they have their own colors? Inherited only if not set. Fine.

Maybe:
```
.app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #374151;
}
```
Maybe not necessary. But target "colors need replaced" but there were none. Adding colors demonstrates.

Need maybe maintain responsive @media condition exactly. Yes.

Could there be any issue with `font-size: 0.85rem` + `border-radius` on inline badge? okay.

Need maybe use CSS variables? User says can change custom properties values, but no custom properties. Avoid.

Need maybe set background color on `.contact-channels-section article` and card, but "flat-solid: no gradients, no shadows." okay.

Need perhaps use `background-color: #ffffff` for cards, and `background-color: #f8fafc` for hero? Let's choose palette consistent with classic sidebar #252e3a and light main.

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #3b2f0a;
        background-color: #fbbf24;
        border-radius: 0.375rem;
        box-shadow: none;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        color: #1e293b;
        border-radius: 0.375rem;
        box-shadow: none;
    }
}
```
But `.contact-channels-section article` and `.contact-quick-section .contact-card` are likely cards already. Adding white background could cover their parents' background; okay.

But wait: Because original has `padding: var(--space-md) !important;` and if we added `background-color` default maybe not important. Fine.

Need maybe add "box-shadow: none" everywhere? We can include only in rules; target says box-shadow none everywhere. That's okay.

Need maybe prefix `border-radius: 0.5rem`? Target minimal radius 0-6px. 0.375rem = 6px. Good. Badge radius 0.375? fine.

Need maybe not use `#fbbf24` because bg-warning originally #ffc107. Refresh to a slightly more amber? Use `#f0b429` or `#d97706`? But class is "warning" and should still look warning. Maybe `#f59e0b` is more orange. Use `#f5b041`? Need choose. Let's choose `background-color: #fbbf24` (amber 400) and text `#78350f` (amber 900). That's fresh.

Need maybe "color palette: sidebar darker #252e3a, main lighter." Since no sidebar, maybe no. Use `#1f2937` main text. Fine.

Need perhaps preserve `line-height` etc. No.

Need perhaps add `transition: background-color 0.2s ease, color 0.2s ease;` to cards. But no hover. Not necessary. Avoid.

Need maybe if we set `.app-hero-section .row .col-lg-7 { text-align: center; color: #334155; }` This changes color for all text inside; maybe okay. But if it contains headings like h1 with default `color: #000`, this rule may not override because element selector has lower specificity than h1? `col-lg-7` class specificity 0,1,0 and h1 0,0,1; class wins if same origin and no style? Actually color inheritance is only if h1 doesn't have color. Bootstrap maybe headings have `color`? Not likely. Fine.

Need maybe use `background-color: #ffffff` on `article` and `.contact-card`, but these may be transparent originally. This will give them card look. But if they're already standalone sections with no padding except var, okay.

Could perhaps set `border-radius: 0` to flat-solid? Minimal radius 0-6, "minimal radius". Maybe 0 would be more flat. But target says "Minimal radius (0-6px)" and "flat-solid". We can choose 4px or 6px. Let's choose 4px to keep flat:
```
border-radius: 0.25rem;
```
Need use rem: 0.25rem = 4px. Badge maybe `0.25rem`. Good.

Need maybe `box-shadow: none` in `badge` too. Could add.

Need maybe set `background-color` to `#ffffff`? If cards are already white, no change. Better use `#fafbfc` to not overdo. But on mobile page background could be gray, cards white. Good.

Potential issue: Added color declaration in `.contact-channels-section article, .contact-quick-section .contact-card` might override text colors inside headings? No.

Need maybe "Output only the rewritten CSS, preserving ALL selectors and layout exactly" So our rewriting should perhaps include even original declarations that we don't change. We will include all original declarations and new color declarations. Good.

Need perhaps not use comments. Fine.

Need maybe ensure every selector character-for-character preserved? We have exact selectors:
- `.app-hero-section .row .col-lg-7`
- `.app-hero-section .badge.bg-warning`
- `.contact-channels-section article,` line break and `.contact-quick-section .contact-card` with comma preserved. Comments not needed.
Media condition same.

Need maybe include no extra indentation? Not matter.

Need maybe "No markdown fences" output raw. Good.

Let's craft final.

But let's revisit instruction: "✅ YOU MUST CHANGE (visual identity only): All color values: background, color, border-color, fill, stroke, outline-color; box-shadow; text-shadow; border-radius; gradient; transition; filter; opacity; outline; border-color/style; caret-color, accent-color; CSS custom properties." It doesn't say must change every rule; but "goal: fresh color palette + shadow/radius identity". Since original no colors, adding color is good.

Potential requirement "Output ONLY rewritten CSS preserving ALL selectors and layout exactly" could mean if original had no colors, we shouldn't add properties? But since task asks color refresh, adding is necessary. Yet "HTML fixed", adding CSS color doesn't change HTML. Good.

Need maybe if we add `background-color` to `.app-hero-section .badge.bg-warning` and use `!important` to override Bootstrap. But if `.bg-warning` uses `!important`, our own declaration without important won't apply. In Bootstrap 5, `.bg-warning` is `background-color: #ffc107 !important;` Because utility classes have `!important`. To change it, we need `!important`. Is using `!important` acceptable? It's not layout. But maybe "Constrained" allows? The original rule didn't use important except padding. If we add a declaration with `!important` that's fine but we need maybe maintain style. But maybe if our CSS comes after Bootstrap with equal specificity, `!important` wins. Without it, Bootstrap wins, so color refresh not applied. Should we add `!important`? I think yes:
```
background-color: #fbbf24 !important;
color: #78350f !important;
```
But `color` for bs badge likely `color: #000`? Actually Badge uses `.badge` color maybe `var(--bs-badge-color)`? In Bootstrap 5, `.badge` color is `var(--bs-badge-color, #fff)`? Wait default badge has