/* ============================================================
   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 rewrite CSS visually conservative. Need output only CSS no markdown. Need consider original has media query max-width 575.98px with rules:
.app-hero-section .row .col-lg-7 { text-align: center; } text-align is layout? Typography? But allowed? It's not visual color etc. Conservative mode: "text-align" listed in typography? "text-align, vertical-align" under 🌟 LAYOUT? Actually in allowed list: text-align, vertical-align appears in "📐 LAYOUT (HTML cannot adapt to changes): ... text-align, vertical-align" Wait it says never change. Under typography, text-align included? It says "📐 LAYOUT ... text-align, vertical-align" So must not change. Also font-size? Original .badge font-size 0.85rem must keep. padding uses var(--space-md) !important; cannot change? "padding, margin (keep similar values, ±20% maximum)" Need maybe can change but keep similar. But only visual changes allowed. Need decide.

Need "sidebar-classic" + tight-rhythm. But CSS only has media query with three rules. Need "refresh visual identity WITHOUT changing layout structure or class names" Can add new properties? We can alter colors only? Need produce rewritten CSS with same selectors, media at same condition. We could add color/background/border-radius/box-shadow to relevant sections. But we must be careful: Original only has one line text-align and one font-size and padding. The font-size is "font-size" is grouped under "Typography (font system fixed)". It says "font-size, font-weight, font-style" cannot change. So leave.

Need perhaps apply colors to the selected elements. However the elements in media query only: `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article, .contact-quick-section .contact-card`. We can add color-related declarations within same rules, e.g. for col-lg-7 maybe color; for badge maybe background-color, border, box-shadow; for contact cards maybe background-color, border-radius, box-shadow, transition. But we cannot change layout. Could add `padding` maybe keep exactly. Need maybe use CSS custom properties? Original uses --space-md so defines elsewhere. We can add color properties. Need maintain media query condition exactly. We can also add new declarations not in original if they don't affect layout. But must preserve selectors exactly and media. We can also include only those three rules, or add new rules? The instruction says "Keep ALL selectors and layout exactly as-is", "HTML fixed", only colors etc. It doesn't say can't add selectors? "Only the rewritten CSS, preserving ALL selectors and layout exactly" Maybe adding selectors not allowed because HTML fixed but can target same elements? Better not add unsolicited selectors. We can add properties within existing rules.

Need style "sidebar-classic": two column not relevant. "tight-rhythm": compact spacing, small border-radius, subtle shadows. We can set small radius, subtle shadows/colors.

But original CSS is a mobile media query. The "visual" changes should not affect desktop, but can alter within. Need maybe use CSS variables? There's no root. We can refer to colors directly.

Need check "border-color and border-style (NOT border-width)" maybe can add border: 1px solid? But border-width? "NOT border-width" means don't change width, but we could add new border? Hmm if no border existed, adding border changes border-width effectively. Better avoid border. Use background, box-shadow, border-radius.

Need "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)" We can add box-shadow to contact cards, badge. Subtle shadows or none. Need "small border-radius (2-6px)".

Need perhaps "background-color" to contact cards. They have `padding: var(--space-md) !important;` so background.

Need "transition" perhaps add transition on hover. But media query only? It can be there. Need not.

Need perhaps "color" for col-lg-7? Could set `color: #f8fafc;` but hero section background unknown. Better use "color: #eceff4". Need maybe `text-align: center` left.

Need perhaps for `.badge.bg-warning` currently background warning (yellow) via bg-warning. We can change `background-color` to accent, and maybe `color`, `box-shadow`, `border-radius`. But `.badge` has likely border-radius from Bootstrap, but can adjust. Also `.bg-warning` is a Bootstrap utility with background-color!important? Actually `.bg-warning` sets background-color var(--bs-warning) !important? In Bootstrap 5, `.bg-warning` has `--bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb),var(--bs-bg-opacity)) !important;` If we set background-color without !important, won't override due to important. We need use important perhaps. We can write `background-color: #d97706 !important;` But "outline style" etc. It is fine. Add `box-shadow: 0 1px 2px rgba(0,0,0,0.08);`

Need maybe `.app-hero-section .row .col-lg-7` can set `color: #...` in mobile; but if no background, perhaps harmless.

Need perhaps `.contact-channels-section article, .contact-quick-section .contact-card` add `background-color: #ffffff; border-radius: 6px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);` But if these elements already have background from parent, adding white might override? Could be okay. But original had no bg; don't want to drastically alter. Maybe use subtle background `#f8fafc`? Need visual refresh. "sidebar-classic": sidebar darker, main lighter. These are contact cards, not sidebar. But we can use neutral light cards.

Need maybe "sidebar-classic" palette: Sidebar #252e3a, main lighter, functional accent for actions. Could define a custom property in rules? No. Use colors: darker #252e3a in hero? Hmm.

Need output only CSS. Need no markdown fences. Need maybe include media query and selectors exactly.

Let's think if this is enough. The user request is "File: assets/css/saishi.css#块2/2" and in original only part. They expect rewritten CSS for entire file? The original provided is just a portion. They want output only CSS that corresponds. Need not invent other selectors not in original. We can rewrite original block.

Need ensure `text-align: center;` is kept as is (can't change). `font-size: 0.85rem;` kept. `padding: var(--space-md) !important;` kept. We can add extra declarations.

Potential concern: `padding` includes `!important`; if we add `padding` with different value maybe not allowed. Keep exact. We can include color etc after.

Need perhaps use `box-shadow` on `.badge.bg-warning`: but `border-radius` on badge may globally affect. maybe okay. Need "small border-radius" 4px. Bootstrap badge radius .375rem = 6px? Actually `.badge` has border-radius var(--bs-border-radius-pill) maybe? In Bootstrap 5.3: `.badge { --bs-badge-border-radius: var(--bs-border-radius); ... border-radius: var(--bs-badge-border-radius);}` default .375rem. If we set border-radius: 4px, that's smaller, okay.

Need maybe add background-color to `.contact-channels-section article` with `!important`? No need if no existing utility. But article may have padding only. We can add.

Need maybe if there is `color` inherited. Add.

Need maybe "filter" or "backdrop-filter" could affect. No.

Let's craft elegantly:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #d97706 !important;
        color: #1e293b;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #f8fafc;
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(37, 46, 58, 0.08), 0 1px 2px rgba(37, 46, 58, 0.04);
        transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    }
}

But need check "transition" with transform may cause layout? transform is visual but can affect? It is allowed? Not in never-change list? Actually "animation values" but transform not listed explicitly. Could be visual. However transition only on hover maybe not used. We shouldn't add transform use. transition property can include transform but if no transform changes, fine. But no hover selector. We might avoid transition because no hover state. But can add.

Need maybe `box-shadow` "fully redesign with multi-layer effects" subtle shadows. Good.

Need maybe "sidebar-classic" dark sidebar? We could add not relevant. Could use `color: #252e3a` (sidebar dark). Let's use `color: #252e3a;` for col. Actually "Sidebar darker (#252e3a), main lighter" We can make text #252e3a. But hero background might be dark and text originally white; changing to dark could break visual contrast. Hmm original no color, so inherited. If hero section has dark background, dark text would be disastrous. Need conservative. Better not set color if not known. But instruction says refresh colors; perhaps need add color. Yet could be risky. Maybe set color to `#1f2937` only if hero text is already dark? The hero section might be "app-hero-section" and has `.col-lg-7`, likely text. Without original full CSS, we don't know. Safer to not set text color for large text? But need refresh. Maybe set `color: var(--bs-body-color)`? That's just inherited. Not an actual change. But we can set `color: #334155` to align palette? Hmm.

Need perhaps adjust `text-shadow`? no.

Need maybe `accent-color`, `caret-color` no.

Maybe better produce a minimal rewrite that only modifies padding? But padding cannot be changed. Original only has no colors. So to "refresh" we need add decorative properties.

Let's infer from class names: `.app-hero-section` likely a hero with a bright background? `.badge.bg-warning` is warning label. `.row .col-lg-7` inside hero. The hero may have text light? App hero section maybe from a SaaS theme with gradient? Because using Bootstrap and custom CSS. The mobile rule centers hero text. In many themes, hero text is dark on light background or white on dark. Without context, changing color could be bad. But we can rely on `currentColor`? Not.

Maybe use CSS `color: inherit;` not a refresh. Hmm.

Could add `background-color` to `.contact-channels-section article, .contact-quick-section .contact-card`, which are likely cards on gray background. The default cards may already have white background. Setting to light #f8fafc is okay. If already white, subtle change. But if there is no background, it's fine. `color` for badge maybe set with `color: #1c2430` to maintain dark on amber? warning text should be dark. Actually `.bg-warning` often has white? `.badge.bg-warning` has yellow background and Bootstrap default `color: #000`? In Bootstrap, `.badge` has `color: #fff` but `.bg-warning` only bg, text color remains default? Actually `.text-bg-warning` is the correct with dark text. `bg-warning` only sets background, so text inherits. Setting `color: #1e293b` is safe.

Need maybe set `background-color` on `.badge.bg-warning` with !important because Bootstrap's `.bg-warning` uses !important. But if we set a new accent, good. However original is "bg-warning" (yellow), and target "sidebar-classic" has functional accent. In classic sidebar, actions could be `#c2571a` maybe. Let's pick #c2410c (orange-700) or #b45309 (amber-700). But if badge bg warning should remain yellow. The instruction says "All color values ... original replaced with fresh palette", so we can replace warning yellow with dark accent. But since class `bg-warning` is a Bootstrap utility, changing to orange? Maybe not. Target "Functional accent for actions" #d97706 (amber) still warning-like. It's okay.

Need maybe `box-shadow` on badge: `0 2px 4px rgba(201, 90, 20, 0.25)`? That's accent glow. Use subtle.

Need maybe "tight-rhythm" "Subtle shadows or none" so `box-shadow: 0 1px 2px rgba(0,0,0,0.06)`. Good.

Need maybe "border-radius (visual rounding only)" we can set small 4px. Good.

Need maybe adjust `background` on card to light dark? "sidebar darker, main lighter" maybe cards are main lighter. Use `#fff`? Let's use `#fdfdfc`? Fine.

Could include `box-shadow: 0 1px 2px rgba(37,46,58,0.05), 0 0 0 1px rgba(37,46,58,0.03);` That's multi-layer but subtle. Use `0 0 0 1px` is like border without border. It is box-shadow, not border. Good.

Need maybe include `transition: box-shadow 0.2s ease, background-color 0.2s ease;` Since no hover, transition won't trigger. Could add `@media (prefers-reduced-motion)`? No.

Need maybe if we add `transition` property, it is allowed (transition timing, easing, duration CAN change). Fine.

Need maybe preserve `padding: var(--space-md) !important;` exactly. Use `var(--space-md) !important;` not `var(--space-md)!important`? Original has space before !important? "padding: var(--space-md) !important;" preserve.

Need maybe preserve `text-align`? Keep exactly. Need maybe order of declarations? Not critical. But "Only rewrite CSS". We can output.

Let's think if adding `!important` to background-color is acceptable. It changes color with same important as Bootstrap. If Bootstrap's `.bg-warning` has !important, our !important same specificity? Actually `.app-hero-section .badge.bg-warning` specificity is higher than `.bg-warning`, even without !important, but Bootstrap `.bg-warning` appears later? It's included before custom? Usually custom after. But to be safe, use !important. It doesn't affect layout.

Need perhaps use `color: #1f2937 !important;`? Badge text may have Bootstrap `.badge` color? Bootstrap `.badge` sets `color: var(--bs-badge-color,#fff)`? In Bootstrap 5.3: `.badge { --bs-badge-color: #fff; }` maybe. `.bg-warning` does not set text. But `.badge` has `--bs-badge-color: #fff;` and `color: var(--bs-badge-color);` maybe. Actually Bootstrap badge uses `--bs-badge-color: #fff` but `.text-bg-warning` overrides to dark. `.bg-warning` doesn't. So if we set `color: #1f2937;` without !important, it may be overridden by `.badge` `color: var(--bs-badge-color)` depending order/specificity. Specificity: `.badge` 0,1,0 vs `.app-hero-section .badge.bg-warning` 0,3,0, so ours wins without !important. But if `.badge` uses `color: #fff` with same order? Specificity lower. Good. Still okay.

Need maybe apply color to `.contact` cards? `color: #252e3a` maybe. But if card background is light, good. Let's set `color: #2d3a4b;` for card. If card has `color` inherited from body, it's okay. This is a refresh. Good.

Need maybe set `.col-lg-7` color to `#2d3a4b;` But if hero background dark, that is bad. Hmm. Let's maybe set `color: #e2e8f0`? If hero background is dark, works; if light, bad. Without context, any color might break. Better avoid changing text color on large area. But maybe use `color: inherit;` not refresh. Yet instruction says color values "All color values ... replaced with fresh palette" but if original no color, nothing to replace. But to satisfy, add only safe colors on badge/card backgrounds.

Need maybe `background-color` for `.app-hero-section .row .col-lg-7`? Could set `background-color: transparent;` no. Hmm.

Maybe `text-shadow` on hero text? Could set `text-shadow: 0 1px 2px rgba(255,255,255,0.4)` if hero light; but if dark, bad. Avoid.

Need perhaps modify `caret-color` etc not relevant.

Could we add new property `accent-color: #d97706;`