/* ============================================================
   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 answer rewritten CSS only. Need follow conservative mode. Original CSS has media query with rules. Need refresh visual identity without changing layout structure/class names. But original is tiny; colors? text-align is layout? It's allowed unchanged? Need preserve selectors and layout exactly. We can modify color, box-shadow, etc. Here no colors. Need perhaps add visual properties? It says ONLY rewritten CSS, preserving selectors and layout exactly. Need not add properties? Hmm.

Need output CSS with same selectors, same properties? "Refresh visual identity WITHOUT changing layout structure or class names." "Only colors, shadows, and decorative properties may change." In original media rules:
- .app-hero-section .row .col-lg-7 { text-align: center; }
  text-align is typography? They list text-align under typography? Actually under 📐 LAYOUT they include text-align, vertical-align? Wait list: "text-align, vertical-align" under LAYOUT? Let's check: In Layout they included "text-align, vertical-align" yes. So must keep text-align center.
- .app-hero-section .badge.bg-warning { font-size: 0.85rem; } font-size fixed, keep.
- .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; } padding variable? "keep similar values, ±20% maximum" -- custom property value maybe okay to change? Could change padding to calc? But need keep same padding. We can adjust custom properties? The original CSS uses var(--space-md). Need output same.

Need "colors, shadows, radius, transitions, gradients" maybe no color to change. Could add color? But that would not preserve? Adding visual properties could be acceptable "decorative properties may change" and "CSS custom properties values." But no need.

Need maybe add sharp-edges hard offset shadow? But then need selectors. Could incorporate transform? no.

Let's parse request: It's a "block 2/2" maybe only this fragment. Need refresh it. We can change color values existing: none. Could change text-align? no. font-size? no. padding? maybe to var(--space-md) exactly. If want visual identity, we could change padding to something like calc(var(--space-md) - 2px) maybe but no.

Maybe need introduce new colors/shadows while maintain same selectors. E.g. add `box-shadow: 4px 4px 0px #e5e0d8;` to contact card? But selector includes article and .contact-card, both padding. Adding box-shadow to contact card would alter visual maybe fine but not present. However adding box-shadow to article may be layout? It doesn't affect layout? box-shadow no layout. So okay.

Need target style masonry-flow, sharp-edges, Pinterest. But selectors maybe hero section and contact cards only. Could add background, border, box-shadow to cards maybe. Need preserve layout exactly. Adding border can affect box sizing? box-sizing maybe border-box? But we must never change border-width (currently no border). Adding border-width would alter layout if box-sizing content-box. Safer not add border.

Could change color of text? It doesn't specify color. Could set `background-color`? But no.

Need maybe final output:
@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;
    }
}
This is identical. But task expects refresh. Might be okay? But need change something? Let's think.

The instruction says "You MUST CHANGE (visual identity only): All color values ... box-shadow ... text-shadow ... border-radius ... gradient ... transition ... filter ... opacity ... outline ... border-color/style ... caret-color/accent-color ... CSS custom properties." There are no such values in source. Maybe we can add them? "Only colors, shadows, and decorative properties may change" means can change if present. But can also introduce? Hmm.

Need maybe use CSS custom properties? Original has `var(--space-md)`. We can change custom property `--space-md`? That's from root, not in file. No.

The safest conforming output is original. But user requested "rewritten CSS" and "fresh color palette." Need satisfy by adding decorative properties not affecting layout. Yet adding to selectors maybe okay. Need preserve selectors exactly. Could add:
- For `.app-hero-section .badge.bg-warning`, perhaps change `color`, `background-color`? But className includes bg-warning so likely Bootstrap warning background. Changing background-color on it would override class. But visual refresh maybe. However font-size remains fixed. Need not.

- For contact cards, add `border-radius: 2px;` and `box-shadow: 4px 4px 0 rgba(...)`? But `border-radius` doesn't affect layout (unless overflow). Fine.

- For hero col, maybe add `color`? Not layout.

But CSS output should only include rules for selectors in original? "HTML is fixed — only colors, shadows..." Could add new rules? "Output rewritten CSS preserving all selectors and layout exactly." It doesn't explicitly forbid adding new selectors? But would create new CSS not in original and potentially affect HTML layout? In conservative mode, selectors should be preserved exactly; adding new selectors maybe not allowed. We should not add selectors.

Could add declarations to existing rules. Let's consider each rule.

1. `.app-hero-section .row .col-lg-7 { text-align: center; }`
- Add `color: #...;`? This changes text color maybe. Add `text-shadow`? Maybe. But col-lg-7 in hero could contain text; text-shadow decorative. Add `text-shadow: 2px 2px 0 rgba(...)` maybe.
- But target style "sharp-edges": text-shadow can be 2px 2px 0 color. Hmm. That creates hard offset text shadow. Could be nice.
- If no color value specified originally, adding color changes visual identity. That's okay.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }`
- Add `color: #...;` maybe warning badge text. But Bootstrap's `.bg-warning` sets background-color and color? Actually bg-warning only background. Text color inherited. If add color maybe okay.
- Add `box-shadow: 3px 3px 0 #...`? Badge inline-block? Could look.
- Add `border-radius: 2px`? Bootstrap badge has border-radius. We can override `border-radius: 2px` to sharp edges. Good.
- Add `transition: box-shadow 0.15s ease-in-out`? Maybe.
- But not too much.

3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }`
- Could add `background-color: #ffffff; border-radius: 2px; box-shadow: 4px 4px 0 #...; transition: box-shadow 0.15s ease, transform 0.15s ease;` But `transform` could affect layout? No, transform visual and can move? But if hover, no. Add transition no issue.
- But adding `background-color` to article may be visible. If it's already card maybe no layout. Good.
- Could add `border: 2px solid`? Avoid because layout.
- Add `box-shadow` and `border-radius`.

Need ensure not changing padding. We can keep `padding: var(--space-md) !important;`.

The target "sharp-edges": small border-radius, hard offset shadows 4px 4px 0 solids. Use 4px 4px 0 0 rgba? Maybe hard offset solid color. Colors: Pinterest-like: white cards, soft shadows on light gray bg. But sharp edges: use strong borders? We can't add border. Use hard offset shadow.

Let's choose a palette:
- Background of cards white: `#fffdf9`? On light gray bg `#f6f4f0` maybe. Since body background not in file. Add background-color white to cards. For article, if not card, it's okay? "Each card may have its own accent strip" maybe no.

But if we set background-color to article, could cover some background? It's visual. But might be unwanted. Yet task says refresh.

Need maybe use `background-color: #ffffff;` for article and contact-card, `box-shadow: 4px 4px 0 #e8e2d8;` or `#d6cfc4`. Sharp edges: hard shadow 4px 4px 0 `#e2ddd4`. Good.

Need maybe add `border-radius: 4px` to badge and cards. Sharp edges "0-4px." Choose 4px or 2px. Let's choose 4px maybe still sharp.

Need maybe add `box-shadow: 3px 3px 0 0 #d8cfc4;` to `.app-hero-section .badge.bg-warning`.
And `transition: box-shadow 0.15s ease-in-out;`? But no hover state. If no hover, transition irrelevant but okay. Could set transition to animate on hover if Bootstrap has hover? Fine.

Need maybe add `transition` on cards: `transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;` But no transform on hover. Could add `&:hover` not allowed. So maybe not.

Maybe add `box-shadow: 4px 4px 0 0 #d9d0c5;` to cards. Since shadow can be 4px 4px 0 0? CSS `box-shadow: offset-x offset-y blur spread color`. "4px 4px 0px solid color" means no blur no spread. So use `4px 4px 0 0 #e6dfd6` or `4px 4px 0px #e6dfd6`. If we want stronger shadows use `4px 4px 0 0 #d6cec3`.

But adding background-color and shadow to `.contact-channels-section article` maybe perhaps all articles in section, not just cards. The selector applies to all `article` elements in `.contact-channels-section`, not necessarily cards. If it's a contact channel card, likely okay. But if some article is text block, adding white background and shadow might alter appearance significantly. Yet layout unchanged.

Alternative: We can avoid adding properties to nonexistent things, and output original. But then "rewrite" fails. Need weigh.

Maybe original block only media query for responsiveness; visual refresh impossible without altering layout? But we can adjust `--space-md` variable? The padding uses var(--space-md), if variable defined globally, changing it in root affects all. But not in block. Could change padding to `calc(var(--space-md) - 2px)`? That violates "padding keep similar ±20%" maybe okay, but also layout. Better not.

Let's examine original 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;
    }
}
```
This is only mobile styles. There is no visual design here. "Refresh visual identity" likely in other blocks? But this block only. Could perhaps change `font-size` from .85rem to .85rem? No.

Maybe the "File fingerprint" and "Block 2/2" means this is one of multiple blocks; they expect rewriting this block in aesthetic style. We can add "dark mode"? But no.

Maybe we can change `@media (max-width: 575.98px)` breakpoint? No media condition must not change. Cannot.

Need maybe read user: "assets/css/saishi.css#块2/2" means file portion block 2/2. The CSS is small. They want only rewrite this block. The target style aggressively says masonry-flow; but original doesn't have grid. Yet conservative mode says visual only. Maybe they expect us to add color/shadows to the rules. Let's do that.

Let's design new CSS:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2a2623;
        text-shadow: 2px 2px 0 rgba(255, 253, 249, 0.8);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #3d2f1d;
        background-color: #f7d98b;
        border-radius: 4px;
        box-shadow: 3px 3px 0 0 #a89572;
    }

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

But we need preserve "text-align" etc. This is fresh. However adding `background-color` to `.badge.bg-warning` changes Bootstrap bg-warning from yellow to custom. That's okay. But maybe `bg-warning` class used in hero, we set background-color. Need use a warning color: `#f7d98b` soft. Good.

Need maybe "sharp edges" with hard offset shadows. The shadows use `4px 4px 0 0`. Good. Border radius 4px. Transitions 0.15s.

Need maybe "Pinterest-like: white cards, soft shadows on light gray bg" We add white cards and hard shadow. But background of page remains. Could add `background-color: #faf8f5` to article? No.

Could set `.contact-channels-section article` with `background-color: #fff`; `.contact-card` maybe no. It's okay.

But do we risk extra shadow on mobile cards could cause overflow? Box-shadow doesn't affect layout, but can overflow horizontally causing horizontal scroll? Actually box-shadow doesn't trigger scrollbars? It can paint outside border box but doesn't affect scrollable overflow? Box-shadow is not considered for scrollable overflow? I think it's painted but doesn't cause scroll? It might cause overflow in some cases? Usually box-shadow doesn't affect layout but can overflow visually, not scroll. Fine.

Need maybe if `article` has no background previously, adding white background and shadow may create card look. Fine.

Need maybe "border-radius" in media query mobile, okay. But existing card maybe has border-radius; changed to 4px. Good.

Need maybe add `transition` to both cards and badge. But if no hover, irrelevant. Fine.

Need maybe include `!important` on padding only? We preserve. Could we set `box-shadow` important? No need.

Need maybe "background-color" is a color value. Yes.

Need maybe `text-shadow` on col-lg-7. But text-shadow on a container/column may be heavy. It applies to text inside. It can make all hero text have hard offset shadow. Might be too aggressive. But "sharp-edges" effect. Yet maybe hero section could have image? Maybe okay.

Need maybe set `-webkit-text-stroke`? Not in list. Avoid.

Need maybe set `accent-color`? Not relevant.

Need maybe "mode: 🛡️ CONSERVATIVE (HTML fixed, visual changes only)" => no layout changes. Our additions don't alter layout except box-shadow/background. Background doesn't affect layout. Border-radius not layout. Text-shadow not layout. Transition no layout. Good.

Need self-check:
- Selectors preserved exactly? `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article`, `.contact-quick-section .contact-card`, yes.
- Media query same? Yes.
- display, position, grid templates unchanged? none.
- width/height/padding/margin? padding unchanged. text-align unchanged. font-size unchanged.
- colors replaced? We added/replaced background color. There were no colors. We introduced.
- shadows redesigned? Yes.
- border-radius adjusted? Yes.
- no AI comments.

Need maybe consider ordering: Original first rule {
text-align:center;
}
We add color/text-shadow. Should we order `text-align` first then color. Fine.

But let's think: `.app-hero-section .badge.bg-warning` has font-size 0.85rem; if we add `background-color`, `color`, `border-radius`, `box-shadow`, maybe Bootstrap class uses `--bs-badge-color` etc? It's okay. But "bg-warning" class sets `--bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;` Actually Bootstrap 5 `.bg-warning` uses `--bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;` Note `!important` on background-color if set via utility. If our rule lacks `!important`, it won't override `.bg-warning`. Wait important. CSS specificity: `.app-hero-section .badge.bg-warning` specificity (0,3,0) vs `.bg-warning` (0,1,0), but `.bg-warning` declaration has `!important`. Important declarations beat normal. Our `background-color` normal won't override. Need add `!important` to override Bootstrap utility. But "border-width" no. Should we add `!important` to background-color? Could be necessary. But if Bootstrap version uses utility classes with `!important`, to refresh we need `!important`. Should we add `background-color: #