/* ============================================================
   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 rewrite CSS visually. Need inspect original CSS block only given media query with three rules. Need preserve selectors and properties. Visual changes only. Original mostly typography/layout: text-align, font-size, padding !important. We can change? font-size is typography forbidden? It says typography font-size unchanged. Cannot change font-size. text-align layout unchanged? Horizontal alignment? "text-align, vertical-align" under layout never change. Padding keep similar ±20%. Original padding var(--space-md)!important can change? It's padding, can alter within ±20% but we don't know value. But likely should keep? Task says visual changes only, can change padding +/-20%. Need target style dense dashboard sharp edges. Also all color values, shadows, etc. Original has no colors. But can add colors/shadow? We can only modify existing? "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It permits replacing color values, but there are no color values. We can add properties? We need be careful. CSS media query with existing declarations. We may add visual properties (colors, shadows, border-radius, transition) to selectors without changing layout. Also keep selector exact. Could add background, color, border-radius, box-shadow, transition to selectors. Need not change text-align/font-size/padding? Could maybe change padding but constrained. Since original padding var(--space-md) likely 24px? In dense-dashboard, compact padding 8-16. But rule says keep margin/padding similar ±20%, so cannot change to small if var space md is significantly large. Need maybe leave padding unchanged. Could set padding to calc? But no. Need maintain.

"All colors values removed?" We can use CSS variables? Need define? We can add custom properties? But first character? Need no comments. Since file fragment maybe includes earlier block? Actually block 2/2 likely just this media query. Need output only rewritten CSS.

Need perhaps add transition, background colors? Since selectors have only .app-hero-section etc. We can add new declarations. But "preserving ALL selectors and layout exactly" means same selector list and all original property/value pairs? Likely yes plus changes. Need not add selectors. Need include same declarations, perhaps changed padding? Let's parse original:

@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;
    }
}

No colors. Need visual refresh. Target sharp edges: border-radius 0, hard offset shadows, strong borders, snappy transitions. For container classes maybe add background? We need not alter layout. Could add:
.app-hero-section .row .col-lg-7 { text-align:center; }
But visual? Maybe no.

For .badge.bg-warning, can add background-color? But bg-warning from Bootstrap likely overridden with important? We can add color, border, box-shadow? Need preserve or alter? We shouldn't alter background? We can add background-color: #f59e0b? But "colors replaced" no originals. Could define new palette. But adding background/border/box-shadow could enhance.

For contact cards, add background-color, border, border-radius, box-shadow, transition. Need preserve padding. Add declaration after padding.

Maybe define CSS variables? Could include :root? No selectors? Original didn't have, but we can add? The rule says "preserving ALL selectors and layout exactly", but adding @media unchanged? We can add :root outside? Probably avoid extra top-level selectors, but could add variables in @media? Not needed.

Need think "Block 2/2" from file, perhaps there are multiple blocks. Output rewritten CSS only this block. Need maintain media query.

Need ensure self-check:
- Every selector character-for-character preserved? Yes.
- display etc unchanged? None.
- width/height/padding/margin within ±20%? Original padding unchanged (100%). No other.
- font-family, size etc unchanged? font-size remains 0.85rem (can't change). text-align remains center.
- Colors replaced with fresh palette? We will add/choose values and no original colors to replace. But if adding colors, we satisfy.
- Shadows redesigned? Add.
- Border-radius adjusted? Add.
- No comments.

Need perhaps use CSS custom properties? Could change var(--space-md)? No.

Need decide what properties to add.

Target style: dense-dashboard with cool grays #1e293b, #334155, accent blue #3b82f6, white cards on slate background. Sharp edges: hard offset shadows 4px 4px 0px solid color; small/zero border radius; strong borders 2-3px solid; snappy transitions 0.15s.

Need maybe add:
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    border: 2px solid #1e293b;
    border-radius: 0;
    box-shadow: 4px 4px 0 #1e293b;
    transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
}
But transform could be layout? transition includes transform, but we didn't change transform property. Could be okay. But no transform property. Need avoid adding animation? Could add background-color? bg-warning maybe #ffc107. Replace with #f59e0b? But color palette maybe. Since bg-warning is Bootstrap class, overwriting color. It's a visual class. Maybe not needed. But to refresh identity, adding color/border/shadow good.

.contact-channels-section article, .contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background-color: #ffffff;
    border: 2px solid #334155;
    border-radius: 0;
    box-shadow: 4px 4px 0 #1e293b;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
But these are likely cards; use white cards on slate background. Need maybe set background: slate? Since page body likely. We could add background-color #f8fafc? But not needed. The @media only. Need maybe not add color to .col-lg-7? Could set color? It would likely inherit. Maybe set color: #1e293b; on hero content.

Original "dense-dashboard" but mobile query with max-width 575.98. Need maintain media. Need perhaps style badge warning:
- background: #3b82f6? But bg-warning means warning, target accent blue. Dense-dashboard palette has accent blue. Since badge is warning, but target style maybe color all cool. Could set background-color: #3b82f6; color: #fff; border-radius: 0; border: 2px solid #1e293b; box-shadow: 3px 3px 0 #1e293b; font-size remains 0.85rem. But if bg-warning class originally yellow, new visual identity blue. Good.

Need maybe add to .app-hero-section .row .col-lg-7:
color: #334155;
text-shadow? If hero text, add color but no layout. Could add transition? Not necessary.

Need be cautious: existing properties should be preserved exactly? "Only change colors, shadows, radius, transitions, gradients." It doesn't say you may add properties not in original. But only visual changes possible. Adding color, border, shadow, border-radius, transition is allowed. Not changing layout. Need "only colors, shadows, and decorative properties may change." So adding decorative properties okay.

Need not mention "all selectors exactly" maybe combine declarations? Need output with same media query and indentation.

Need include selector list exactly:
.contact-channels-section article,
.contact-quick-section .contact-card {
...
}
Keep same.

Need be mindful of existing !important padding. If we add background-color etc no !important.

Need maybe use CSS variable? We can define:
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background-color: #ffffff;
    border: 2px solid #334155;
    border-radius: 0;
    box-shadow: 4px 4px 0 #1e293b;
    transition: box-shadow 0.15s ease-in-out;
}
This exactly target. For hover, no pseudo selectors. Could add declarations with :hover? Selectors would change/add pseudo-classes. "Pseudo-classes (:hover, :focus, ::before, ::after)" Must preserve? Could add? It says keep exact. Better not add selectors. But transition can handle.

Need maybe include "border-radius: 0" on badge and cards. Strong borders.

Need ensure "transition timing, easing, duration" can change if existing? None. Add.

Need maybe add "accent-color" etc? Not necessary.

Need maybe replace "var(--space-md)" because custom property values cannot be changed? Actually CSS custom property values might be elsewhere; here `var(--space-md)` is a value, not property. We shouldn't change to hardcoded because might alter layout. Keep.

Need maybe use "color" property on text. Since original no color, adding color to `.app-hero-section .row .col-lg-7` could be visual. But since text-align center. Add color: #334155. Good.

Need maybe use "background-color" on contact cards to white. However in mobile, if contact card not previously white, adding white background may be significant. But target style wants white cards. Good.

Need maybe create "slate background" for body? Not part of selectors. Avoid adding body selector.

Need perhaps set ".contact-channels-section article, .contact-quick-section .contact-card" to `background-color: #fff; border: 3px solid #1e293b; border-radius: 4px; box-shadow: 4px 4px 0 #334155;` But target sharp edges: small radius 0-4. Use 0 or 2. Strong borders 2-3. Use 2px. Offset shadow.

Need maybe include "transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;" two transitions.

Need maybe for badge:
background-color: #3b82f6;
color: #ffffff;
border: 2px solid #1e293b;
border-radius: 0;
box-shadow: 3px 3px 0 #1e293b;
transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;

Potential issue: `.badge.bg-warning` may have default `padding` etc but we don't alter. Good.

Need maybe no "markdown fences, no explanations, first character CSS" final.

Need ensure exactly "font-size: 0.85rem;" unchanged. yep.

Let's write final CSS:

@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;
        background-color: #3b82f6;
        color: #ffffff;
        border: 2px solid #1e293b;
        border-radius: 0;
        box-shadow: 3px 3px 0 #1e293b;
        transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
    }

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

Need maybe "sharp edges" use radius 4? small or zero. Could use 0. But target sharp edges: small or zero. Use 0 to be more sharp. However "dense dashboard" often cards with 4px. We'll use 4px maybe too much. Effect says small or zero border-radius (0-4px). Strong. Good.

Need maybe "Hard offset shadows: 4px 4px 0px solid color" note "0px solid color" sounds shadow not solid? Actually offset shadow no spread. Use `4px 4px 0 #1e293b`. Good.

Need maybe "border-radius: 0;" for badge and "4px" for cards. Good.

Need perhaps for `.col-lg-7` adding color but no visual? Fine.

Need consider if `.badge.bg-warning` uses `.bg-warning` from Bootstrap with `--bs-badge-bg` or `background-color` with `!important`? Bootstrap 5 `.bg-warning { background-color: #ffc107 !important; }` Actually `.bg-warning` has `--bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;`. Our `background-color: #3b82f6` without !important will not override due to !important in Bootstrap. But if our stylesheet loaded after Bootstrap, same specificity: `.bg-warning` one class, `.app-hero-section .badge.bg-warning` has 3 classes, specificity higher, so overrides despite !important on lower specificity. Good. Better add `!important`? Not necessary, but to be safe? If `.bg-warning` !important, our higher specificity not !important should still override? Specificity beats important? No, important declarations beat normal regardless of specificity. With equal importance, specificity. But `.bg-warning {background-color: rgb(...) !important}` is important; normal declaration cannot override. To override need `!important` or some cascade layers? In CSS, important wins over normal even if higher specificity. So adding `!important` to background-color/color may be needed. But if we add important, that's allowed? `!important` is not layout. Could add. But the original in this media block had `padding` with important only. We can add important to visual overrides if needed. Need not if stylesheet loaded after? Important wins. Actually if Bootstrap has `!important`, to override need `!important`. So use `background-color: #3b82f6 !important;` and maybe `color: #fff !important`. But that changes "important" property values? Allowed. Does `!important` affect layout? No. But target "Keep all selectors and layout exactly as-is", adding important not selectors/layout. Fine. However style may not require. To be robust, add `!important` to background and color on badge. But need no comments. Could add to contact cards? No need.

But are we allowed to change "font-size" no. Original `font-size: 0.85rem;` no important. We keep.

Need maybe add color to `.col-lg-7` maybe no important but fine.

Potential issue: "border-width" never change, but there is no border-width. Adding border sets border-width from 0 to 2px. This is a decorative addition, not "border-width" change? It changes border-width from none to 2px. The instruction says "border-color and border-style (NOT border-width)" cannot change border-width. But if no border initially, adding border creates border-width. Is that considered changing border-width? Hmm important: They allow "border-color and border-style (NOT border-width)" in must change. If there is no border, setting `border: 2px solid` adds border-width, which might violate. But effect variant "Strong borders (2-3px solid)" suggests adding border is part of style. They explicitly request sharp-edges with strong borders. Yet system says not border-width. But "border-color and border-style (NOT border-width)" likely means if existing `border-width: 1px`, don't change to 3px. But adding a border when none is a visual change that could affect layout (box-sizing? If box-sizing not border-box maybe width changes). Since HTML fixed and layout should not break, adding border can alter size. Need consider. They allowed "decorative properties" maybe border is allowed. But "border-width" never change. Hmm.

Could use `box-shadow` to simulate border without affecting layout? Or `outline` (does not affect layout) strong border. They specifically allowed "outline styles (color, type)" and "border-color and border-style (NOT border-width)". We can simulate border with outline: 2px solid #1e293b; outline-offset: -2px; That doesn't affect layout and can be strong. But effect variant says strong borders. Since they say border-width NOT change, adding border-width is risky. Better use `outline: 2px solid` or `box-shadow: inset 0 0 0 2px` to avoid layout shift. However target style explicitly includes strong borders, but "only colors, shadows, and decorative properties may change"; border-width is not decorative? They forbid.

Could still use `box-shadow` inset as border, plus offset external shadow. Multi-layer shadow can include inset and offset. For cards: `box-shadow: inset 0 0 0 2px #334155, 4px 4px 0 #1e293b;` This adds no layout size. This matches no border-width. But effect variant asks strong borders; inset shadow visually creates border. Good. Need also border-radius? If radius, inset shadow follows border-radius. Good.

For badge, use inset shadow instead of border. But target "Strong borders"; inset 2px is okay. Let's use box-shadow multi-layer.

Need maybe use `outline`? Box-shadow doesn't affect tab focus? Visual only. But cards not focus. Use outline? Outline can affect? no layout. But outline is allowed. For badge, use `outline: 2px solid #