/* ============================================================
   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 are asked to rewrite the CSS visually in conservative mode, targeting "dense-dashboard" with "flat-solid" effect variant. The original CSS snippet is very small, a media query with some rules.

We need to preserve selectors and layout exactly, but change colors, shadows, radius, transitions, gradients, etc. However, the original CSS only has three rules:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — text-align is typography? Actually text-align is listed under "never change" (text-align, vertical-align). So we cannot change that? Wait, the never-change list includes "text-align, vertical-align". So we must keep text-align: center. But we can add other visual properties? But the original rule only has text-align. We are allowed to change colors, shadows, radius, transitions, gradients, opacity, outline, border-color, border-style, caret-color, accent-color, custom properties. But we cannot change text-align. We could add additional properties? The instruction says "Only change colors, shadows, radius, transitions, gradients." But the original rule doesn't have those. We are allowed to add? It says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." This implies we can modify the declarations within the same selectors, but not add new selectors or change layout properties. Since the existing declaration text-align: center is a layout/typography property we cannot change. But we could add new visual declarations like color, background, etc.? However, the target style is flat-solid with no shadows, but the original has no shadows. We can add border-radius? But that might affect layout? No, border-radius is visual. But adding properties to a rule that originally only sets text-align might change the visual identity. The prompt says "Only color values, box-shadow, text-shadow, border-radius, gradients, transition timing, filter, backdrop-filter, opacity, outline styles, border-color, border-style, caret-color, accent-color, CSS custom properties." So we can add these properties. But we must not change "font-size" etc. The second rule changes font-size: 0.85rem — that is font-size, which is in the "never change" list: font-size, font-weight, font-style, line-height, letter-spacing, word-spacing. So we cannot change font-size. We must keep it exactly.

The third rule changes padding: var(--space-md) !important. Padding is allowed to change but "keep similar values, ±20% maximum". We could adjust padding slightly. But the original uses var(--space-md). We could change it to a different spacing variable? That might be a custom property change? The custom properties are allowed to change values. But we don't know what --space-md is. We could change it to a value like 12px or 16px? But "keep similar values, ±20% maximum" relative to the computed value? We don't know computed value. Safer to keep as is, or adjust to a compact padding for dense-dashboard. The target style says "Compact padding (8-16px)". The original uses var(--space-md) which is likely a medium spacing, maybe 16px or 24px. We could change to a smaller padding, but we don't know the actual value. Since this is a media query for small screens, we might want to keep padding similar. But the instruction says only change colors, shadows, radius, transitions, gradients, etc. Padding is not in that list; it's layout. So we cannot change padding unless it's within ±20%? Actually the "never change" list includes "padding, margin (keep similar values, ±20% maximum)" — so we are allowed to adjust padding within ±20% of original. But the original is var(--space-md). We don't know the value. Changing to a different value might be risky. Better keep it.

But wait, the task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Then the detailed "✅ YOU MUST CHANGE" list includes many properties. But the original CSS has no colors, shadows, etc. So we need to add them? Or perhaps the original CSS is incomplete? Maybe the file is chunked and this is just part of a larger file. The file fingerprint and "块2/2" indicates this is block 2 of 2. The original CSS may have been truncated? Actually the user provided the original CSS as three rules. We need to output rewritten CSS with the same selectors, but visually refreshed. Since the original has no colors, but we can add colors to these selectors. However, we must ensure we don't add properties that are not allowed. For example, we can add background-color, color, border-radius, etc. But we need to be careful not to break layout.

The target style is "dense-dashboard" and "flat-solid". So we should use cool grays #1e293b, #334155, accent blue #3b82f6, white cards on slate background. The media query is for small screens. The selectors are:

- `.app-hero-section .row .col-lg-7` — likely a hero section column.
- `.app-hero-section .badge.bg-warning` — badge with bootstrap warning class.
- `.contact-channels-section article, .contact-quick-section .contact-card` — contact cards.

We can add color-related properties to these selectors to refresh the visual identity. But we must keep text-align: center and font-size: 0.85rem and padding var(--space-md) !important. However, we can add additional declarations.

But wait, the "YOU MUST CHANGE" says "All color values: background, color, border-color, fill, stroke, outline-color" — meaning we must change existing color values. There are none. So perhaps there is nothing to change? But that can't be. The original CSS has no colors, so maybe we need to introduce color values to create a "fresh palette" because the target style demands it. In the self-check: "Colors throughout the file replaced with fresh palette?" Since there are no colors, we would add them.

But adding background-color to a column might affect layout? Not directly, but it could change appearance. Is that allowed? Yes, background is visual.

Let's analyze each rule:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — In a dense dashboard style, we might want to add a color to the text? But the hero section might have its own colors. We could add `color: #1e293b;` but that might override inherited colors. We could add `background-color` but that might be too much. Perhaps we don't need to add anything because the rule is a layout rule (text-align). But the task says "Refresh this CSS visually." If we don't change anything, that's not refreshing. So we should add something.

Maybe we can add `border-radius`? That would have no effect on a block? It might round the column if it has a background. But adding border-radius to a column without background does nothing. We could add `color` to set text color. That's a visual change. However, the selector is for a hero section column, likely containing text. Setting color to a slate gray is plausible.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — This is a badge. The class `bg-warning` is Bootstrap, which gives a yellow background. We might want to override the background-color to accent blue? But the instruction says "Only change colors, shadows, radius, transitions, gradients." So we can change background-color. But we must keep font-size. We could change background-color to #3b82f6 and color to white, add border-radius. That would be a visual refresh. But note that `bg-warning` is a Bootstrap utility class, and we are overriding it. That is allowed because selector is `.app-hero-section .badge.bg-warning`. We can change color and background. But we must be careful: the target style "flat-solid" says solid background colors only, no gradients, minimal radius (0-6px). So we could set `background-color: #3b82f6; color: #ffffff; border-radius: 4px;` and keep font-size.

3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — This rule only sets padding. We can add color, background-color, border-radius, border, etc. But the target style is white cards on slate background. So we could set `background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; color: #1e293b;` and maybe remove box-shadow (flat-solid). But we must be careful: `padding` is set to var(--space-md). We can keep that.

However, the instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" and "No markdown fences, no explanations". So we output the CSS with the same selectors and the same existing declarations, but we can add new declarations.

But there is a caveat: The "never change" list includes "text-align" and "font-size" and "padding". We must keep them exactly. So we keep `text-align: center;`, keep `font-size: 0.85rem;`, keep `padding: var(--space-md) !important;`. We can add other declarations.

Let's think about the overall context: This is a media query for max-width 575.98px (Bootstrap's small breakpoint). It's likely part of a larger stylesheet. We are refreshing the visual identity of these specific elements at mobile sizes. We should ensure the new colors align with the dense-dashboard palette: cool grays #1e293b, #334155, accent blue #3b82f6, white cards on slate background.

For the hero column, we might add `color: #1e293b;` (dark slate) to ensure text is readable. But the hero might already have a color. Adding it is not harmful.

For the badge, we can override the Bootstrap warning background to the accent blue. But note: The class is `.badge.bg-warning`. If we change background-color, the badge will no longer look like a warning, but that's the point of refreshing. We could set `background-color: #3b82f6; color: #ffffff;` and maybe `border-radius: 4px;`.

For the contact cards, we can give them a white background, slate border, rounded corners, and a subtle shadow? But flat-solid says box-shadow: none everywhere. So no box-shadow. We could use a border to define the cards. So `background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; color: #1e293b;` — but the target says "White cards on slate background". Since we are on mobile, the background might be slate? We don't set the background of the container. We can set the cards to white. But if the site background is already white, this might not stand out. Maybe use slate background? But "White cards on slate background" suggests the page background is slate. We can set the cards to white. That is fine.

But we must also consider the "✅ YOU MUST CHANGE" list: "All color values: background, color, border-color, fill, stroke, outline-color" — we are adding new color values. Good.

"box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)" — we are not adding box-shadow because flat-solid says none. So no box-shadow.

"text-shadow" — none.

"border-radius (visual rounding only)" — we can add.

"gradient colors and stops" — flat-solid says no gradients.

"transition timing, easing, duration" — we can add transitions? But not necessary.

"filter, backdrop-filter" — none.

"opacity" — none.

"outline styles" — none.

"border-color and border-style" — we can add border.

"caret-color, accent-color" — none.

"CSS custom properties" — we could override `--space-md`? But that would affect layout. Better not.

Now, let's consider whether we should add properties to all three rules. The prompt says "Refresh this CSS visually." If we leave the first rule unchanged except text-align, it doesn't refresh. So we should add color. But is "color" a property that changes visual identity? Yes. So I'll add `color: #1e293b;` to the hero column. But wait, the hero column might contain a heading and text; setting color on the column will inherit to all text. That is fine.

For the second rule, adding `background-color` and `color` changes the badge from warning yellow to accent blue. That's a fresh palette. Also `border-radius` to 4px.

For the third rule, adding `background-color`, `border`, `border-radius`, and `color` turns the contact cards into white cards with slate border. Also we might add a small compact padding? But padding already set via var(--space-md). We cannot change it. We can leave it.

We should also consider that the third selector is a comma-separated list. We must preserve exactly.

Now, let's write the CSS. We need to preserve the media query and the rules. We can add declarations after the existing ones.

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

Rewritten: We'll keep the selectors and existing declarations. Add new declarations.

Potential issue: The second rule's selector `.app-hero-section .badge.bg-warning` has both classes `badge` and `bg-warning`. Bootstrap's `.bg-warning` sets `background-color: #ffc107 !important;`. Our rule needs to override that. Since our selector has higher specificity? Actually `.app-hero-section .badge.bg-warning` has specificity of 0,3,0 (three classes). Bootstrap's `.bg-warning` has 0,1,0. So our rule wins if it comes later? But Bootstrap might load before/after. We can add `!important` to our background-color to be safe. But the original rule doesn't have `!important`. We can add it. However, adding `!important` might be considered a change in property value? It's allowed? The "never change" list doesn't mention `!important`. We can add it. But maybe we don't need it. To be safe, we could add `background-color: #3b82f6 !important;` but that might be too aggressive. The target is flat-solid, so solid color. I'll use `!important` to ensure override. But be careful: The original rule has only font-size without `!important`. We don't need to add `!important` to font-size.

Similarly, for color, we can set `color: #ffffff;`.

For the contact cards, the original padding has `!important`. We keep that. We can add `background-color`, `border`, `border-radius`, and `color` without `!important` unless needed. But Bootstrap might have card styles? The selector is `.contact-channels-section article` and `.contact-quick-section .contact-card`. These are custom, so no Bootstrap conflict. But there might be other styles. We'll add without `!important`.

Now, let's think about the "dense-dashboard" style. It mentions "Tight multi-column grids" and "Small gaps (8-16px)". This media query is for mobile, so columns stack. Our changes should support the dense feel. Adding white cards with borders and compact radius aligns.

One more thing: The "flat-solid" variant says "box-shadow: none everywhere". So we should explicitly set `box-shadow: none`? The original has no box-shadow. We can add `box-shadow: none` to the contact cards to ensure no shadow from any other styles. But adding `box-shadow: none` is a visual property. That is allowed. It reinforces flat-solid. We could add it to all rules? Only the contact cards likely have shadows. The badge might have a shadow? We can add `box-shadow: none` to badge as well. But the target says "box-shadow: none everywhere". So we can add `box-shadow: none` to each rule. However, the first rule is a column, unlikely to have a shadow. Adding `box-shadow: none` is harmless. But is it necessary? It might be redundant. But the instruction says "box-shadow: none everywhere" for the variant. So to be faithful, we can add `box-shadow: none;` to all three rules. That is a visual identity change.

Similarly, "minimal radius (0-6px)" — we can set border-radius accordingly. For the column, adding border-radius might not be visible unless it has a background. But we can add `border-radius: 0;`? Or maybe no need. The variant says minimal radius, not zero necessarily. We can set `border-radius: 6px` for cards and `4px` for badge. For the hero column, we might not want a radius. But we could set `border-radius: 0;` to force sharp corners. But that could be considered adding a property. It's allowed. However, if the column doesn't have background, radius doesn't matter. We can skip.

Let's decide on a coherent set of additions:

Rule 1:
- Keep `text-align: center;`
- Add `color: #1e293b;`
- Maybe `box-shadow: none;`? Not necessary.

Rule 2:
- Keep `font-size: 0.85rem;`
- Add `background-color: #3b82f6;`
- Add `color: #ffffff;`
- Add `border-radius: 4px;`
- Add `box-shadow: none;`

Rule 3:
- Keep `padding: var(--space-md) !important;`
- Add `background-color: #ffffff;`
- Add `border