/* ============================================================
   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 output rewritten CSS preserving selectors and layout, but only modifying visual properties. The original is a small media query with three rules. We need to apply dense-dashboard style: cool grays #1e293b, #334155, accent blue #3b82f6, white cards on slate background, sharp edges, hard offset shadows, small radius, strong borders, snappy transitions.

However, the existing rules only set text-align, font-size, padding. We can only change visual properties allowed. The selectors must remain exactly. We need to consider the properties present:

1. .app-hero-section .row .col-lg-7 { text-align: center; } - text-align is in the "never change" list? Actually text-align is listed under typography as "text-align, vertical-align" in never change. So we cannot change text-align. But it's already center. Keep as is.

2. .app-hero-section .badge.bg-warning { font-size: 0.85rem; } - font-size is never change. Keep.

3. .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; } - padding is layout, can vary ±20% only, but var(--space-md) is a custom property. We could keep padding but maybe adjust with a different custom property? But custom property values are allowed to change if they are --color-* or --shadow-*. --space-md is not a color/shadow. To be safe, keep padding exactly as var(--space-md) !important. We can't change it because it's not a visual property allowed? Padding is in never change list with "keep similar values, ±20% maximum". So keeping exactly is fine.

But the task says "Refresh this CSS visually" but if we only have those three rules, there's not much to change. We need to add visual properties to these selectors? Wait, the constraint: "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." But if the original rules don't have colors/shadows, we can add new declarations to the same selectors? The instruction says "Rewritten CSS" with same selectors. We can add new visual properties within those selectors as long as we don't change layout. We should not add new selectors. We can add background, color, border, border-radius, box-shadow, transition, etc. to these existing selectors. That would refresh visual identity.

But is that allowed? The mode says "HTML fixed, visual changes only" and "Only colors, shadows, and decorative properties may change." Adding decorative properties to existing selectors is arguably allowed. We need to be careful not to change layout. Adding border may affect box-sizing if not set, but border-width is in allowed change? Actually border-color and border-style can change, not border-width. Adding a border where there was none might change layout box size (if box-sizing not border-box). That could break layout. To be safe, we can add border with width? But "border-color and border-style (NOT border-width)" means we cannot change border-width, but can we add a border? Likely not advisable because it changes width. But we can use box-shadow with 0 0 0 2px to simulate a border without affecting layout. That's allowed: box-shadow is allowed to change. So we can add box-shadow to create hard offset shadows plus border-like ring.

However, the original selectors are likely elements inside a hero section. Adding a box-shadow to .app-hero-section .badge.bg-warning might be okay. But we must keep layout. Adding a hard offset shadow 4px 4px 0px color is allowed because box-shadow doesn't affect layout.

But we also need to change existing colors? There are no colors in the original. So we can add color properties. But we should be careful: The target style is dense-dashboard: cool grays, accent blue, white cards. The existing selectors reference .badge.bg-warning which is a Bootstrap warning badge. We can override its color and background? But background-color is a visual property. We can change .app-hero-section .badge.bg-warning to have new background and color. However, .bg-warning is a Bootstrap class; overriding it in the media query is acceptable. We can add background-color, color, border-radius, box-shadow, transition. But we should not add font-size change? Font-size is fixed. Keep.

We also have .contact-channels-section article and .contact-quick-section .contact-card. These are probably cards. We can add background-color, border-radius, box-shadow, border maybe via box-shadow, transition. But we cannot add padding beyond var(--space-md). That's fine.

But the instruction: "Output the rewritten CSS now". It expects a CSS file that contains the same selectors and layout properties, but with visual changes. Since the original CSS has no visual properties except font-size and text-align and padding, the rewritten CSS might be nearly identical, but we can add visual declarations to each rule. Would that violate "Keep ALL selectors and layout exactly as-is"? Adding new declarations doesn't change selectors or layout. It only adds visual properties. That seems the point.

However, the user explicitly says "Only change colors, shadows, radius, transitions, gradients." That implies we should modify existing color etc. But there are none. To fulfill, we need to add some.

We need to be careful with the media query: it's under @media (max-width: 575.98px). We should preserve that condition and all selectors. We can rewrite the rules with added visual properties but not change the media query.

Let's craft:

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

We can add to the first rule: nothing? Maybe not needed. But we can add something? text-align center is layout, keep. Could add color? But that might affect text. Maybe add background? But col-lg-7 is a column. Adding background could be okay but might be too much. To maintain conservative, maybe don't add to first rule. But to "refresh visual identity", we can add to the second and third.

For the badge: .app-hero-section .badge.bg-warning. If it's a warning badge, we can make it more "dense-dashboard" with accent blue? But warning is typically yellow. Maybe we can change to a cool gray background with blue text? But class bg-warning should still look like a badge. We can set background-color to #3b82f6, color: #ffffff. But that would override warning semantics. That's allowed. But then the class name bg-warning no longer matches background. It's okay for visual refresh. However, it might confuse. Better to keep a warning-ish but updated: use slate background with amber? But target palette says cool grays and accent blue. We can use accent blue. Let's do:

.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background-color: #3b82f6;
    color: #ffffff;
    border-radius: 0;
    box-shadow: 3px 3px 0 0 #1e293b;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

But adding transform might be considered layout? transform doesn't affect layout, but it's a visual change. Is transform in allowed list? It's not listed in "never change" explicitly. But "position" etc. Transform can be changed? It's a decorative property. Should be okay. But to be conservative, avoid transform. Transition is allowed. box-shadow allowed.

But the "hard offset shadows: 4px 4px 0px solid color" describes a shadow style, but box-shadow doesn't have "solid" in syntax; it's 4px 4px 0px 0px color. Actually "4px 4px 0px solid color" maybe means no blur, no spread, offset. We'll use 4px 4px 0px 0px #1e293b or 4px 4px 0px rgba(...). But the variant says "4px 4px 0px solid color" - maybe they mean a hard shadow with 0 blur and 0 spread, offset. We'll do 4px 4px 0px 0px #0f172a. But since we're in a small screen media query, larger offsets might be too much? Still okay.

For the card rule: .contact-channels-section article, .contact-quick-section .contact-card. We can add:

background-color: #ffffff;
border-radius: 0;
box-shadow: 4px 4px 0px 0px #334155;
transition: box-shadow 0.15s ease, background-color 0.15s ease;

But if cards are on slate background, white cards. Need to ensure the page background maybe? But we don't have page background selector. We can't add new selectors. So we can't change body background. But we can set card background to white. That will give contrast.

Also maybe add border? Could use box-shadow: 0 0 0 2px #1e293b, 4px 4px 0 0 #3b82f6? But that's two shadows. The variant says hard offset shadows, strong borders. We can combine a solid border-like ring via box-shadow plus offset. But need to be careful not to change layout. box-shadow doesn't.

Let's use:

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

The first shadow 0 0 0 2px #334155 acts as a 2px border. The second is an offset hard shadow. Good.

But wait: The rule also matches `.contact-quick-section .contact-card`. They might already have padding. Fine.

Should we add to the first rule? Maybe not. But maybe we can add color to the hero column? Not necessary. To be safe, keep it as is. But the requirement says "Refresh this CSS visually" so at least two rules changed enough.

However, the user may expect the entire CSS block to be transformed in a way that all existing properties are preserved exactly? Actually the instruction says "Refresh the visual identity WITHOUT changing layout structure or class names." And the "ORIGINAL CSS" is just this media query. Since there are no visual attributes, adding them is likely expected. But we need to double-check the constraints: "Only change colors, shadows, radius, transitions, gradients." If there are no existing ones, adding new ones is not "changing" but "adding". The task says "Only colors, shadows, and decorative properties may change." That implies we can alter them. Adding is allowed? Probably yes because otherwise impossible. The file fingerprint and request suggests a code transformation.

Let's produce a rewritten CSS that preserves the exact selectors, media query, and layout properties (text-align, font-size, padding). We can add visual declarations.

Need to ensure no markdown fences, no explanations. First character must be CSS. We'll output:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #3b82f6;
        color: #ffffff;
        border-radius: 0;
        box-shadow: 4px 4px 0px 0px #1e293b;
        transition: background-color 0.15s ease, box-shadow 0.15s ease;
    }

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

But check: box-shadow offsets in target style "4px 4px 0px solid color" maybe should be "4px 4px 0 0 #1e293b". Fine.

But wait: For the badge, if we add background-color #3b82f6 and color white, the font-size stays. That's fine.

What about custom properties? The padding uses var(--space-md). That's fine. We don't need to change.

But the instruction "ALL color values: background, color, border-color, fill, stroke, outline-color" - we changed background-color and color. Good.

Now, do we need to make sure that the media query itself is not altered? Yes.

Let's think if we should add `!important`? Not needed.

One concern: The rule `.contact-channels-section article, .contact-quick-section .contact-card` might have multiple cards. Adding white background and hard shadow creates a strong look. Good.

But what about the first rule? Should we add something like `color: #1e293b`? The hero text might be on a light background. We don't know. But to avoid changing text color in a large column, maybe not. The target palette says white cards on slate background. But without being able to change body background, we cannot create the full effect. But we can at least make cards white.

Maybe we can add `color: #1e293b` to the first rule? That would set text color in hero column to dark slate. That's a visual change. But if there are headings, they might inherit. Could be okay. However, the first rule only applies on mobile. The hero section might have a dark background, and text should be white. Changing to dark could hurt. No info. Conservative mode: don't add unnecessary color to the first rule. Keep it as is.

But the user asked to "refresh the visual identity" for all rules? Not necessarily. The three rules are all within the media query. It's okay to have some unchanged.

Alternatively, we could add `color` and `background-color` to the first rule to make it a "dense-dashboard" panel. But .col-lg-7 is a column inside a row. Adding background would make a box, but not specified.

I think the best approach is to add visual properties only to the second and third selectors, and keep the first unchanged. That demonstrates change while preserving layout.

But wait: The instruction in the task "Only change colors, shadows, radius, transitions, gradients." If we add them to only two of three, it's okay.

Let's ensure we don't add any property that is in the never-change list. We added border-radius (allowed), box-shadow (allowed), transition (allowed), background-color (allowed), color (allowed). Good.

No width, height, padding, margin changed. Font-size unchanged. Text-align unchanged.

One more thing: The "EFFECT VARIANT: sharp-edges" says small or zero border-radius (0-4px). We used 0. Good. Strong borders (2-3px solid) via box-shadow ring. Good. Snappy transitions (0.15s). Good.

Now, should we include a subtle background gradient? The request says "gradients colors and stops CAN change" but if no gradients, we can add one maybe. But we don't need to.

Let's consider if adding `background-color: #ffffff` to the card might conflict with existing background-image or gradient from Bootstrap. It would override. Fine.

Potential issue: The selector `.contact-channels-section article` might already have padding. Our rule includes padding `var(--space-md) !important`. This is from original; we keep exactly. Adding background etc. is fine.

Now output just the CSS.

We need to keep spacing between selectors and braces same? We can preserve the original formatting exactly, adding lines. That's fine.

Let's make sure no extra spaces at the end.

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

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

Is box-shadow `0 0 0 2px` a valid hard border? Yes, it's a ring. Combined with offset shadow. Good.

But the target style "dense-dashboard" says "Tight multi-column grids" etc. That's about layout, but we cannot change grid. We just apply palette.

Now, let's double-check the original CSS had `padding: var(--space-md) !important;`. We keep it exactly. Good.

Should we add `!important` to our new visual properties? Not necessary. But for the card background, if other styles have higher specificity? Our selector has two class names plus element for article, so specificity high. But background-color could be overridden by Bootstrap `.bg-*` if present. The card likely doesn't have background class. To ensure visual refresh, we could add `!important`. But that might