/* ============================================================
   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 to rewrite this CSS according to the target style: dense-dashboard and sharp-edges. We can only change visual properties, not layout, selectors, typography, etc. But the provided CSS is a media query with three rules. The first rule sets text-align: center, which is a layout property (text-align is in the never change list). So we must keep it exactly. The second rule sets font-size, which is typography, never change. We must keep it exactly. The third rule sets padding, which is layout, never change, but we are allowed to change padding within ±20%? Actually padding is in the never change list, but the instruction says "padding, margin (keep similar values, ±20% maximum)". So we can slightly adjust, but better to keep exactly since it's a media query and original might be fine. The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." In this snippet, there are no colors, shadows, radius, transitions, gradients. So maybe there is nothing to change. But we need to produce a rewritten CSS. We can perhaps add visual properties like border-radius, box-shadow, border, background, transition to the elements? But that would be adding properties not present, which is allowed as long as selectors and layout unchanged. The output should be a refresh of the file. Since this is only a snippet from a larger file, we need to rewrite exactly this portion with visual enhancement while maintaining all existing properties. The rules inside the media query target specific elements.

The identity should be dense-dashboard with sharp edges. So we can add box-shadow, border-radius, transition, background, border, etc. to these elements, but only within the media query. However, we must be careful: the selector .app-hero-section .row .col-lg-7 gets text-align: center. Adding visual properties there may not be appropriate. But we can add maybe nothing. The badge gets font-size. The contact cards get padding. We can add visual flair to the contact cards and badge. But the instruction says "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It doesn't say we cannot add new visual properties. Actually it says "Refresh this CSS visually" and the output should be the rewritten CSS. Since there are no visual properties to change, we need to inject a visual identity. So we can add, for example:

- For .app-hero-section .badge.bg-warning, add box-shadow, border, transform? Transform might be layout? Actually transform is a visual property but can affect layout? It's not in the never change list explicitly, but it could affect visual overlay, but not layout. Better avoid transform since it changes rendering. We can add background gradient? But .badge.bg-warning uses Bootstrap background utility. Changing color might conflict, but we can add border and shadow.

- For .contact-channels-section article and .contact-quick-section .contact-card, add background, border, border-radius, box-shadow, transition. Since padding is set to var(--space-md)!important, we can keep it. We can add background: #fff, border: 2px solid #1e293b, border-radius: 0, box-shadow: 4px 4px 0 #1e293b, transition: box-shadow .15s ease, etc.

- For .app-hero-section .col-lg-7, perhaps no visual change.

But note: The media query is max-width 575.98px, so this is small screens. Adding large shadows might be okay.

We also need to make sure not to change any layout properties. The existing properties are text-align, font-size, padding. We must keep them exactly (or within ±20% for padding, but the original uses var(--space-md)!important with !important flag. We should preserve the property exactly including !important? Actually the instruction says "padding, margin (keep similar values, ±20% maximum)" and "border-color and border-style (NOT border-width)" etc. But !important is part of the value? We should keep it. We can also adjust padding within 20%, but no need. To preserve layout, keep it as is.

We can also add a media query? The original is a media query. We should output a media query with the same condition and selectors. We can also add additional rules outside? The instruction says "Output the rewritten CSS now" and "Keep ALL selectors and layout exactly as-is." We should preserve the media query structure exactly. So we output the same media query block, with the same selectors and existing properties, plus new visual properties.

Potential output:

```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;
        border: 2px solid #1e293b;
        border-radius: 0;
        box-shadow: 4px 4px 0 #1e293b;
        background: #3b82f6;
        color: #fff;
    }

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

But adding `background` to badge might override .bg-warning? The selector .badge.bg-warning has Bootstrap bg-warning which sets background-color: #ffc107. Our rule later? The media query appears to be in the CSS file after Bootstrap? Unclear. If we add background, it may change the badge from warning yellow to blue. Is that a color change? Yes, it's a visual identity refresh. But we need to ensure the target palette uses cool grays and accent blue. So making it blue is okay. However, the badge is a "bg-warning" class, so visually it's a warning badge. Changing to blue might be okay if we are refreshing the identity. But if the class is specifically warning, maybe keep it warning? The target palette says "accent blue #3b82f6" and "cool grays". We can use a warning color that fits? But the instruction says "All color values" must be changed. There were no color values in the original. So we can choose any.

But we must be mindful: The selector `.badge.bg-warning` explicitly uses Bootstrap utility. If we set background, we are overriding it but that's fine. Yet, the point of the exercise may be to not change semantics? The user asked to refresh visually, so changing color is acceptable. But maybe we should not add background to .badge because that changes the meaning of "warning" badge. However, the target style is dense-dashboard with cool grays and blue accent, so warning could become amber? But sharp edges with dark borders and offset shadows. Could use a yellow-ish palette? Let's think.

The "dense-dashboard" color palette: Cool grays #1e293b, #334155, accent blue #3b82f6, white cards on slate background. So if a badge is warning, we can keep it warning-ish but adjust to a more muted amber, e.g., #f59e0b or #d97706. But the instruction says "All color values: background, color, border-color, fill, stroke, outline-color" should be changed. We don't have existing color values, so we introduce new ones. The palette doesn't have amber. But we can use accent blue for a "warning" badge? That would be weird. Alternatively, we can not add a background color at all, only border and shadow. But then the badge remains yellow from Bootstrap, and we add dark border. That may be okay.

Let's parse the original file identity: The file is "assets/css/saishi.css" and block 2/2. This could be the responsive portion. The original CSS in this block only has those three rules. There are no other rules here. So the entire file block is small. We need to rewrite this block with a fresh visual identity. Since the original has no visual properties, we need to inject them. But we must be careful not to alter layout. Adding box-shadow doesn't alter layout? box-shadow doesn't affect layout. border adds to element dimensions unless box-sizing: border-box. The original doesn't set box-sizing, but Bootstrap likely has box-sizing: border-box. Adding border could change dimensions if box-sizing isn't border-box, but we don't know. In the never change list, box-sizing is in the layout category, meaning we must not change it. But adding a border will change layout if box-sizing is content-box. However, in Bootstrap, border-box is default. But to be safe, we can avoid adding border-width? Actually we are allowed to change border-color and border-style, but not border-width? The instruction says "border-color and border-style (NOT border-width)" can be changed. It doesn't say we can't add border-width if there was none. But adding border-width could affect layout. To be conservative, we should avoid adding borders because it can affect layout. Yet the target style explicitly says "Strong borders (2-3px solid)" and "Hard offset shadows: 4px 4px 0px solid color". We need to implement that. But if adding border changes layout, it might violate "keep layout exactly." Since we are in a media query on small screens, adding border might cause slight wrapping. But if Bootstrap uses border-box, it's fine. But we don't know. The instruction "NEVER CHANGE: ... width, height, padding, margin ... box-sizing" implies we cannot change these properties. Adding border-width changes the box model, but box-sizing is a property that determines behavior. Since we're not changing box-sizing, adding border-width can shrink content area. That is a layout change. So should we avoid adding border? The "EFFECT VARIANT" says "Strong borders (2-3px solid)" but that could be on elements that already have border, or using outline instead? But outline doesn't affect layout. We can use outline with solid color, but "sharp-edges" says "hard offset shadows" and "strong borders". Better to use box-shadow for the border effect: `box-shadow: 0 0 0 2px #1e293b, 4px 4px 0 #1e293b;` That creates a hard border-like ring without affecting layout. Yes. We can use box-shadow with 0 0 0 2px to simulate a border without affecting layout. That is a visual decoration. The target "Strong borders" can be emulated via box-shadow ring. And "Hard offset shadows" can be via offset box-shadow. So we can add multi-layer box-shadow without layout changes.

Similarly, border-radius: 0-4px is fine, no layout effect.

So we can add:

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

For the badge:

```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    border-radius: 2px;
    box-shadow: 0 0 0 2px #1e293b, 3px 3px 0 #1e293b;
}
```

But we also need to consider colors. Since the original badge is .bg-warning, Bootstrap sets background-color: #ffc107. We can override with accent blue? To keep meaning, maybe leave background as bootstrap's warning, but add a cool gray border. However, the "dense-dashboard" palette doesn't include amber. But perhaps we can change the badge to a "primary" blue by adding `background: #3b82f6; color: #fff;`. But that changes the meaning. The user requested a visual refresh, not semantic. It's a competition sasshi? Actually "saishi" maybe tournament. A warning badge might indicate "live" or "warning". Changing to blue could be bad. I'd lean to keep the warning color but adjust it to a more vivid amber that fits the palette? The instruction "All color values ... change" doesn't require changing every property because there are no color values. We can introduce a new color for the badge if needed.

Let's think of the overall file context: "assets/css/saishi.css" — saishi could mean "competition" in Chinese. It may have cards, hero section, contact cards. The media query block likely is responsive adjustments. The user wants a visual refresh, but this block only has three rules. We are not seeing the rest of the file. So our changes here should be consistent with a possible overall refresh. If the overall file uses the same classes, our changes may conflict? But we are only rewriting this block. We should produce a coherent refresh for these elements.

Potential approach: For the hero section col, we could add a background? But no, that might affect the layout. It's a text-align center, so perhaps a hero text block. We don't need to add anything there.

For the badge, add a "sharp" badge with dark border and offset shadow, keeping Bootstrap warning colors? But "dense-dashboard" cool grays. Maybe use `#f59e0b` (amber) as a warm accent? The palette only mentions cool grays and accent blue, but not exclusively. It says "Color palette: Cool grays #1e293b, #334155, accent blue #3b82f6, White cards on slate background". It doesn't prohibit other colors, but the target style likely uses these. To stay on palette, make badge blue. But semantically, a warning badge blue is "info". The class bg-warning is tied to color; if we override, it's okay.

Let's see original: `.app-hero-section .badge.bg-warning` — maybe it's a "warning" that the tournament is about to start? Or "live" badge? Actually if it's a badge with bg-warning, it's amber. The hero section might have a "Hot" badge. I'd keep amber but adjust to a richer amber like #f59e0b with border #1e293b. That's within the "fresh palette" if we consider amber an accent. But the instruction says "You MUST CHANGE: All color values ..." but since there were none, we just need to introduce colors. We can choose a palette. "dense-dashboard" wants white cards on slate background, but the badge can be accent blue. Hmm.

Maybe the safest is to add background: #3b82f6; color: #fff; to the badge, making it consistent with the accent. And the contact cards white with slate border.

Let's produce a polished output.

But also we need to consider transitions. We can add transitions for hover states? But there are no hover rules in this block. Adding transitions to base classes is fine.

Also, the selector `.contact-channels-section article, .contact-quick-section .contact-card` — we can add `background: #fff` to make cards white. But original may have a dark slate background elsewhere? If the overall body background is slate, white cards stand out. But we don't know. Since the target is white cards on slate background, adding `background: #fff` is good.

Need to ensure not overriding padding incorrectly. `padding: var(--space-md) !important;` is in the original. We must keep it. We can add other properties under the same rule.

Let's write the output:

```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;
        border-radius: 2px;
        box-shadow: 0 0 0 2px #1e293b, 3px 3px 0 #1e293b;
        background: #3b82f6;
        color: #ffffff;
    }

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

Is `border-radius: 2px` okay? sharp-edges says 0-4px. Use 2px. Good.

But note: If Bootstrap has `btn` or `card` default border-radius, we are overriding with 2px. Fine.

Should we add `color` to contact cards? Original text color might be inherited. For dense-dashboard, text on slate background with white cards should be dark slate. We can set `color: #1e293b;` to ensure contrast. But if original has already a color, changing it is fine. Add to contact cards. Also maybe set `color` for badge to white.

But adding `background` to `.contact-channels-section article` and `.contact-quick-section .contact-card` may be too broad; these elements may already have their own backgrounds. Since we're in a media query, this applies small screens. It's okay.

What about the hero col? Could add a ``text-shadow? Since text-align center, maybe no.

Let's also consider the "dense-dashboard" tight density: maybe reduce padding? But we can't change padding beyond ±20%, and using var(--space-md)!important, we cannot change the variable value. We should keep it.

Maybe we can add `border-left: 4px solid #3b82f6` or something, but border-width changes layout. Instead use box-shadow inset? We can add a left accent via `box-shadow: inset 4px 0 0 #3b82f6, 0