/* ============================================================
   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 process the request. The user provided a snippet of CSS within a media query. They want a visual refresh, conservative mode. Need to output only rewritten CSS preserving selectors and layout. The original CSS is quite small: a media query with three rules. We can change colors, shadows, radius, transitions, gradients, opacity, etc. But there are only some properties: text-align, font-size, padding. We need to maintain layout properties: padding can change ±20% max. Text-align is layout? It's listed under typography but also layout? Actually text-align is under "Typography" in the NEVER CHANGE list? It says "text-align, vertical-align" under 🏷️? Wait, let's read: Under "📐 LAYOUT (HTML cannot adapt to changes):" includes "text-align, vertical-align" in the list. Yes, they explicitly list text-align as layout that cannot change. So we cannot change text-align. font-size cannot change. Padding can change within ±20% of original. The original padding: var(--space-md) !important. We can change the custom property value? But the property is using a CSS variable. Changing the variable value would affect padding, but we must keep similar padding ±20%. We don't know the value of --space-md. But we could replace var(--space-md) with a fixed value that is within 20%? Risky. Better to keep var(--space-md) but we could change the variable definition elsewhere? The snippet does not include variables. We are only outputting this CSS. Could change padding values directly? But the original uses var(--space-md). We can leave it as is? To refresh visual identity, we might add colors, background, border-radius, etc. But there is not much to change. Let's inspect 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;
    }
}

Need to preserve selectors exactly. We can change values inside: text-align? no. font-size? no. padding? can change by ±20%. But using var is not a numeric value. We can replace with a pixel value that approximates? Let's think: --space-md likely from a design system maybe 1rem or 1.5rem. But without knowing, changing to a different value could break layout? Conservative says keep similar values, ±20%. If we replace var(--space-md) with a different value, it might be more or less. Better keep var(--space-md) because it's a variable reference, not a value we can safely change. But the instruction says "CSS custom properties (--color-*, --shadow-*) values" can change. --space-md is not color/shadow. So we shouldn't change it. We can add other properties to these rules: color, background, border-radius, box-shadow, etc., as long as they don't affect layout? Adding padding? no, padding is layout. Adding border-radius is okay. Adding background color is okay. Adding box-shadow is okay. But for the badge, we can add background color? But it has class bg-warning from Bootstrap. We could override background-color with a custom accent? Since it's a warning badge, the target style is cool grays and accent blue. But warning is yellow/orange. However we can change color palette to a custom blue-ish warning? Hmm. We need to "refresh visual identity" across the file. But there is only this media query. We can add properties like border-radius, box-shadow, background, color, border, etc. But careful: The original includes Bootstrap classes maybe. The selectors target specific elements. We can add visual styles.

The instruction says: "Refresh the visual identity WITHOUT changing layout structure or class names." We can change "all color values", "box-shadow", "text-shadow", "border-radius", "gradient colors", "transition timing", "filter", "opacity", "outline styles", "border-color/styles (not width)", "caret-color", "accent-color", "CSS custom properties (--color-*, --shadow-*) values". Also "border-color and border-style" can change, but not border-width. Also "outline styles". So we can add border, background, border-radius, box-shadow, opacity, transition, etc. Need to ensure we don't add layout properties like display, width, height, padding, margin? Actually we could add margin? No, margin is layout, must keep similar, but adding new margin isn't preserving. Better not add margins. We can add colors, background, border, radius, shadow. But for elements that may not have background/border currently, adding them changes appearance but not layout. That's acceptable.

Since the style target is dense-dashboard, tight-rhythm: compact spacing, small border-radius (2-6px), subtle shadows or none, cool grays, white cards on slate background, accent blue. We can apply to these elements. But these are specific components: hero section column, badge, contact articles/cards. We can give them subtle shadows, border-radius, background colors? The hero section row col-lg-7 is a text container; adding a background might be odd. But we can add color? There's no color set. We can add maybe a subtle text color? But text color is color, can change. However the original didn't set color; if we add color it may override Bootstrap default? It's within media query. We can set color to a cool gray? But hero section likely has dark text. We could set color to #1e293b. But that might be same as default. Hmm.

We need to output only the rewritten CSS. It can be small but should reflect visual refresh. Since there is very little to change, we can add properties to each rule. Maybe also add some transitions to the badge and cards. Add border-radius to cards, box-shadow. Add background to badge? Since badge is bg-warning, we could override with a different accent? But target style says accent blue. But warning semantically should remain warning. However we can change bg-warning to a custom warning color? But the class name bg-warning suggests Bootstrap yellow. We can change background-color to a custom amber that fits cool grays? But color palette provided doesn't include amber; it includes cool grays and blue. But warning is a functional color; we can keep it yellow-ish but maybe adjusted. Yet "Refresh this CSS visually" maybe wants to show new palette. There is no color palette in original, so we can introduce CSS variables? The instruction says custom properties can change, but we can also define new custom properties? The original doesn't define any. We can add a :root block? But selectors? We must preserve all selectors exactly. Adding new selectors? Not allowed? "Preserving ALL selectors and layout exactly" means we shouldn't add new selectors, but we can add declarations within existing rules. We shouldn't add :root because it's a new selector. Better keep only the media query and existing selectors.

Maybe we can add `--space-md` override? But that would be a custom property change, but not color/shadow. And also we don't know if the media query is the right place. But the instruction says "CSS custom properties (--color-*, --shadow-*) values" can change. --space-md is not in that list. So no.

Given the minified nature, maybe the safest is to add visual-only declarations to the existing selectors, preserving existing declarations. For each rule:

1. .app-hero-section .row .col-lg-7 { text-align: center; }
We cannot change text-align. We can add `color: #1e293b;` maybe? But text-align is the only property. Adding color won't affect layout. But is it needed? We can add `text-shadow`? Not necessary. Maybe add `opacity`? That would alter visibility. Better not.

2. .app-hero-section .badge.bg-warning { font-size: 0.85rem; }
Can't change font-size. We can add `background-color: #3b82f6; color: #fff; border-radius: 4px; padding?` No padding is layout, but adding padding would change layout. Don't add padding. Add box-shadow? Badge is inline element? Adding box-shadow may be okay. But if it's inline, box-shadow may not be visible? It can. Add `border-radius: 4px;` (already Bootstrap badge has radius maybe). We can override `background-color` and `border-color`? Since bg-warning class sets background via Bootstrap. We can override background-color to accent blue? But then it's not warning. Perhaps keep warning color but adjust to a more vivid amber. We'll set `background-color: #f59e0b;`? But target palette says cool grays and accent blue. Hmm.

The user might expect the same selectors but with different visual properties. If we change bg-warning to blue, the badge will look like a primary badge, which may be inconsistent with class name. But the instruction says "Refresh the visual identity" not semantic. However the class named bg-warning is a Bootstrap utility; changing it to blue would make the name misleading but the HTML fixed. But the user explicitly asks to change color values; they expect color changes. We can choose to override `background-color: #f59e0b` (amber) to fit a dark slate theme? The palette doesn't have amber. Maybe use `#fbbf24` for warning. But that's not in palette. Or use accent blue `#3b82f6` for a modern dashboard aesthetic. Let's consider target style "dense-dashboard": cool grays #1e293b, #334155, accent blue #3b82f6. Likely they want to replace all colors with those. Yellow doesn't fit. We can set background to #f59e0b? Hmm.

3. .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }
We can't change padding. We can add `background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);` But adding background might make cards stand out. The contact cards likely already have backgrounds from other CSS not in snippet. Adding background could be okay but might conflict. But since this is a media query, these styles only apply on small screens. Adding background and border-radius on small screens might be fine.

Need to satisfy "same layout, fresh color palette + shadow/radius identity". We can add border, border-radius, shadows, maybe transition.

Let's craft output:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #3b82f6;
        color: #ffffff;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(30, 41, 59, 0.2);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(30, 41, 59, 0.08);
    }
}

But check: We added color to hero col. Could that alter layout? No. But if the original color was maybe dark, setting to #1e293b is okay. However text-align center remains. We didn't change font-size. Good.

But there's a potential issue: adding `background-color` to .contact card could override existing background color from elsewhere? That's intended to refresh. Adding a border could change box-sizing? Border width is 1px, which is considered border-width change? The instruction says "border-color and border-style (NOT border-width)" can change. That means we can change the color and style of existing borders, but NOT introduce new border-width? It says "border-color and border-style" can change, but border-width is never listed as changeable. It may mean we cannot set border-width. If we add a new border with width, that's a border-width change, which is not allowed. To be safe, do not add border or border-width. Similarly, adding padding is not allowed. We didn't. Adding border-radius is allowed. Adding box-shadow allowed. Adding background-color allowed.

So avoid `border`. Also avoid `outline` maybe but can add outline? Outline width? Probably avoid.

Instead of border, use box-shadow with `0 0 0 1px`? That would mimic border without border-width property. That's acceptable? It's a box-shadow, which is allowed. We can use ring shadow. Let's do that: `box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.8), 0 1px 3px rgba(30, 41, 59, 0.08);`. This is a box-shadow, not border. Great.

Need to ensure layout unaffected: background doesn't affect layout. border-radius no. box-shadow no. color no. opacity no. transition? We could add `transition: background-color 0.2s ease, box-shadow 0.2s ease, border-radius 0.2s ease;` But transitions only apply on changes; not layout. Could add to cards. But maybe not necessary.

Also need to consider existing Bootstrap `bg-warning` sets background color. Our override `background-color: #3b82f6` would be more specific? The selector `.app-hero-section .badge.bg-warning` has higher specificity than `.bg-warning` alone, so it wins. Good. But if we set `color: #ffffff`, it might override badge default color (which is dark). That's okay.

Should we keep warning semantics? Hmm. Maybe use a different color like `#f59e0b`? Let's read the target "Color palette: Cool grays #1e293b, #334155, accent blue #3b82f6. White cards on slate background." That suggests background slate, cards white, accent blue. Warning badge could be accent blue to keep palette cohesive. I'll use accent blue. But if it's a warning badge, blue might be misleading. However the class name is just a Bootstrap utility; the actual content may be "New" or "Info". It's okay.

But the target style "dense-dashboard" also says "Tight multi-column grids... Small gaps... Compact padding..." We can't change grid because none. We can apply compact radius 4px/6px. Good.

We also need to consider the `!important` on padding. We preserve it.

Let's check if any property in our output violates "NEVER CHANGE": text-align unchanged, font-size unchanged, padding unchanged. We added color, background-color, border-radius, box-shadow, transition. All allowed. Good.

However, we changed color to #1e293b. Is color a "color value" we are allowed to change? Yes. But we are adding a new property, not changing existing. That's allowed under refresh.

But maybe the original `color` for .col-lg-7 is inherited; setting it could be okay. Could also set `color: #334155`. Let's decide. Use #1e293b for strong text.

For the badge, use background #3b82f6, white text, border-radius 4px, box-shadow subtle. Maybe add `display: inline-flex; align-items: center; gap: 4px;`? No, display is layout, cannot change. Don't.

For the contact cards, use white background, border-radius 6px, shadow ring. Use `box-shadow: 0 1px 2px rgba(30, 41, 59, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.6);` This creates a border-like line. Good.

Should we add `transition` to cards? It's a media query for small screens; transitions not necessary. But the request says "transition timing, easing, duration" can change. We can add `transition: box-shadow 0.2s ease, background-color 0.2s ease;` But there's no hover state, so it won't do much. Still fine. Maybe not needed.

Maybe add `opacity`? No.

Let's see whether we need to include the original declarations exactly? Text-align and font-size and padding. Yes.

Potential issue: The output should be only CSS, no markdown. We'll produce exactly. Need to maintain the media query. Ensure no extra comments.

Let's craft final:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #3b82f6;
        color: #ffffff;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(30, 41, 59, 0.15);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(30, 41, 59, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.7);
        transition: box-shadow 0.2s ease, background-color 0.2s ease;
    }
}

Will this pass self-check? Selectors preserved. Layout properties unchanged. Colors replaced with fresh palette. Shadows redesigned. Border-radius adjusted. No comments.

But we added `color` and `background-color`. Are those "colors