/* ============================================================
   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 the CSS visually without changing selectors or layout. The original CSS is a media query block with three rules. We can change colors, shadows, radius, transitions, gradients. But we need preserve all selectors and layout. The original CSS has declarations like text-align (layout, cannot change), font-size (typography, cannot change), padding (layout, may change ±20% only; but "padding: var(--space-md) !important;" — we can change the value? Padding is layout; allowed to change within ±20%? We must be careful. The instruction says "width, height, padding, margin (keep similar values, ±20% maximum)". We can change padding value slightly, but better to keep same. Also "font-size" typography cannot change. "text-align" cannot change. So actually the only thing we can change in this block is maybe nothing? Let's inspect: The original rules have only declarations that are all layout/typography, no colors, shadows, radius. The task says refresh visually, but if there are no visual properties, we need to add decorative properties? We can add new declarations? The instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" and "Only change colors, shadows, radius, transitions, gradients." We might add box-shadow? But that would change visual identity without changing layout. However the original CSS has no color properties. The target style is dense-dashboard, tight-rhythm. The media query is for small screens. We can add background, border-radius, box-shadow to the elements? But adding properties could affect layout? Border-radius doesn't affect layout. Box-shadow doesn't affect layout. We can also adjust padding maybe but it's already var(--space-md) at small screens. We might want to keep the var. To satisfy the task, we need to output something that includes visual changes. But the original CSS is already minimal. Could we replace the values of var(--space-md)? No, that's a custom property reference; changing the variable value is allowed only if it's defined in this file? But our output must be a complete CSS replacement. The user gave only a snippet. We need to output the same selectors with changed/added visual properties. The safest is to add box-shadow, border-radius, background colors? But we must not change the layout. Adding background-color to .contact-card might be fine. But the original selectors include `.contact-channels-section article` and `.contact-quick-section .contact-card`. We can add a subtle shadow, border-radius, maybe a border? Border-color allowed, border-style allowed, border-width not allowed. Adding a border with 0 width? Useless. Adding border-style only without width has no effect. Border-width not allowed to change, but adding border-width from 0 to something would change layout? Border is part of box model, but border-width is not explicitly forbidden? Actually "border-color and border-style (NOT border-width)" means you can change color and style but not width. Adding a border where none existed would change width from 0 to something, forbidden. So don't add border.

We can add box-shadow, border-radius, background-color, color. But if we add background-color to `.contact-channels-section article`, that changes the visual. However it might not be wanted. We need to make a coherent redesign.

Maybe we should change the `.badge.bg-warning` font-size? But typography cannot change. We can't change font-size. The original rule says `font-size: 0.85rem;` — per rules, font-size cannot change. We must leave it.

So the only possible changes are to add new declarations that are allowed. We can also change padding? It says keep similar values ±20%. We could change `padding: var(--space-md) !important;` to `padding: calc(var(--space-md) * 0.9) !important;`? That's a visual density change. But using calc with var is fine. Is calc allowed? Yes. But changing padding might break layout? It's within ±20%. However we might not want to change.

Given the constraints, the output will look almost identical to the original, but with added box-shadow and border-radius and maybe background color to the cards. The task explicitly says "Refresh this CSS visually." So maybe we should add those properties to make it look like a dense dashboard. But we need to preserve all selectors. We can add new declarations within each rule. Let's design:

- `.app-hero-section .badge.bg-warning` — maybe add a box-shadow, border-radius? But it's a badge. Original only font-size. We can add background-color? But the class `bg-warning` likely sets background via Bootstrap. Adding our own background-color overrides? Allowed. We can add a subtle shadow to make it pop. But this is a hero section, not relevant.

- `.contact-channels-section article` and `.contact-quick-section .contact-card`: add border-radius: 6px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); maybe background-color: #fff; But if the card already has a background, adding is fine. Also maybe a transition: box-shadow 0.2s ease; But no hover rule here.

The media query is for max-width 575.98px. We can also change the text-align? No, layout.

Let's think: The instruction "Only change colors, shadows, radius, transitions, gradients." If there are no existing such properties, we can add them. That is within scope.

To satisfy the self-check "Every selector character-for-character preserved?" We must keep the selectors exactly: `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article`, `.contact-quick-section .contact-card`. We need to keep the media query and the braces.

We need to ensure padding and font-size remain within allowed. We'll keep padding exactly the same: `padding: var(--space-md) !important;`. We'll keep font-size exactly the same. We'll keep text-align exactly the same.

We can add color/background/shadow/radius declarations. But there is a possibility that adding `background-color` to `.app-hero-section .badge.bg-warning` might override Bootstrap's `bg-warning`. That's allowed. However the target palette includes white cards on slate background. So maybe set cards to white background, with subtle shadow, small radius. The hero badge could be accent blue background with white text? But `bg-warning` is typically yellow; changing to blue might conflict with the class name but it's allowed. However we need to consider the visual identity: dense-dashboard with cool grays and accent blue. Since the original has `bg-warning`, maybe we should not change background-color because it's a warning badge. But the task says "Refresh visual identity" and "All color values: background, color, border-color..." We can change background-color. Yet the class `bg-warning` is a Bootstrap utility; overriding it might be intentional. But if we change the badge to blue, it might not make sense semantically. But we can leave it as is and only add box-shadow. Adding a shadow to a warning badge is safe.

Let's add:
- For hero badge: box-shadow: 0 1px 3px rgba(251, 191, 36, 0.4); border-radius: 4px; maybe transition.
- For contact cards: background: #fff; border-radius: 6px; box-shadow: 0 1px 2px rgba(148, 163, 184, 0.4), 0 0 0 1px rgba(226, 232, 240, 0.5); transition: box-shadow 0.2s ease, transform 0.2s ease; But transform might be considered layout? Transform doesn't affect layout, it's a visual property? It's not listed as forbidden. But adding transform on non-hover may shift element, not good. Don't add transform.

We also might add `background-color` to the col-lg-7? No, that would change layout? Not layout but maybe weird. Skip.

Because the original CSS has no colors, the output might seem too minimal. Maybe we should also change the padding slightly to make it denser. The target says "Compact padding (8-16px)" and "Aggressive: padding 8-16px". The original uses `var(--space-md)` which probably is 16px? We can change to `calc(var(--space-md) * 0.875)` to reduce to 14px. That's within ±20%. But `--space-md` is likely defined elsewhere; multiplying by 0.875 is okay. This changes padding, but the instruction says keep similar values ±20%, so allowed. However the selector `.app-hero-section .badge.bg-warning` has font-size; no padding. The contact cards get padding reduced. Let's do that for denser feel. But if we add calc, is that allowed? Yes, calc is a value expression, not changing the property. It's still padding. Let's do it.

But wait: The original uses `!important` on padding. We need to keep the `!important`? It's part of the declaration value. Changing to `padding: calc(var(--space-md) * 0.875) !important;` is acceptable. But maybe better to keep exactly. Let's decide.

We also need to consider the `.app-hero-section .row .col-lg-7` rule has `text-align: center;` — no visual properties to change. We could add nothing. But the output needs to include it. We can leave as is, perhaps add color? No.

Maybe we can add `background` to `.app-hero-section .row .col-lg-7`? That might change layout? No, but visually it might create a block. However unnecessary.

Let's craft a final CSS that adds visual properties while keeping layout. We need to not add any comments. Let's produce:

```
@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: 4px;
        box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: calc(var(--space-md) * 0.9) !important;
        border-radius: 6px;
        background-color: #ffffff;
        box-shadow: 0 1px 2px rgba(30, 41, 59, 0.06), 0 1px 3px rgba(30, 41, 59, 0.1);
        transition: box-shadow 0.2s ease, background-color 0.2s ease;
    }
}
```

But we need to ensure that `background-color: #ffffff;` doesn't override something important? It's allowed. The target palette: white cards on slate. Good.

However, maybe the contact card already has a background; overriding to white might be fine. But if the original had a transparent background, now white. This is a visual change.

Should we add `color`? Maybe not.

We also should consider that the `.badge.bg-warning` might now have a blue shadow even though it's yellow. That's a bit odd. Maybe use a warm shadow `rgba(245, 158, 11, 0.4)` to match warning. But the target palette uses accent blue #3b82f6. Since the badge is warning, we can keep the badge's default background but give a subtle shadow. Let's use a blue-ish shadow? Actually the palette says accent blue #3b82f6. But `bg-warning` is not blue. To make it cohesive, we could override background to #3b82f6 and color to white? But `bg-warning` class would be misleading. Still, it's a hero badge, maybe it's a "warning" that needs attention, but blue? Hmm.

Let's review the original context: `app-hero-section .badge.bg-warning` — probably a "New" or "Beta" badge. In a dense dashboard, accent blue is common. We can change background-color to #3b82f6 and color to #fff, with border-radius 4px and box-shadow. That would be a more dramatic visual refresh. But is changing color allowed? Yes. Is `color` a visual property? Yes. It doesn't affect layout. Let's do it. But wait, the rule `font-size: 0.85rem;` remains. We'll add `background-color: #3b82f6; color: #ffffff; border-radius: 4px; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);`. This is a coherent dashboard accent. However, we should ensure that the class `bg-warning` still implies warning? The instruction says only visual, not semantic. It's okay.

Let's also maybe adjust the first rule to include a color? No.

For the contact cards, add a border-left accent? That would require border-width, not allowed. No.

We should make sure not to change `font-size` or `text-align`. Good.

Let's produce final output with no markdown. But we need to ensure we didn't miss any restrictions. Check each property in output:

- `text-align: center;` — allowed (must keep)
- `font-size: 0.85rem;` — allowed (must keep)
- `background-color: #3b82f6;` — allowed
- `color: #ffffff;` — allowed
- `border-radius: 4px;` — allowed
- `box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);` — allowed
- `padding: calc(var(--space-md) * 0.9) !important;` — layout, within ±20%, allowed
- `border-radius: 6px;` — allowed
- `background-color: #ffffff;` — allowed
- `box-shadow: 0 1px 2px rgba(30, 41, 59, 0.06), 0 1px 3px rgba(30, 41, 59, 0.1);` — allowed
- `transition: box-shadow 0.2s ease, background-color 0.2s ease;` — allowed

However, the transition property adds a new declaration; okay. But do we need to include the `background-color` on the hero badge? If we set it to blue, the class `bg-warning` won't show warning color. But the task is a visual refresh, so it's fine.

But wait: The original CSS has no `background` on the badge; Bootstrap's `.bg-warning` sets `background-color: rgba(255, 193, 7, 1)` or similar. Our override will override it. That's a visual change. Good.

Alternatively, to avoid changing too much, we could keep the badge warning background and just add a shadow. The target style is "dense-dashboard" with accent blue, but not necessarily all elements blue. Let's think: The badge is probably a small pill. If we change it to blue, it may look like a primary badge, not warning. Since the class name says warning, maybe the content is "Warning" or "Alpha". But the target style doesn't care. The instruction says "all color values: background, color..." can change. It doesn't require semantic preservation. So it's okay.

Let's also add `transition` to the badge? Could add, but not necessary.

We should also maybe add `border-radius` to the first rule? No, it's a column.

Let's check the media query: `max-width: 575.98px` — we must keep. No changes.

Now, one nuance: The instruction says "No markdown fences, no explanations". We output just the CSS. Each selector list must be preserved. We changed the padding value in the combined selector list. The selector list is exactly the same: `.contact-channels-section article, .contact-quick-section .contact-card`. Good.

But we need to preserve punctuation and spacing? "character-for-character pre served?" The selectors themselves must be identical. The whitespace around them can vary? The instruction says "Every selector character-for-character preserved?" That means the selector text should be the same. Our selector text is the same: `.contact-channels-section article` and `.contact-quick-section .contact-card`. We can keep the line break and comma as in original.

Let's 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: 4px;
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: calc(var(--space-md) * 0.9) !important;
        border-radius: 6px;
        background-color: #ffffff;
        box-shadow: 0 1px 2px rgba(30, 41, 59, 0.06), 0 1px 3px rgba(30, 41, 59, 0.1);
        transition: box-shadow 0.2s ease, background-color 0.2s ease;
    }
}

Is `padding: calc(var(--space-md) * 0.9) !important;` within ±20%? If `--space-md` is e.g. 24px, 0.9*24=21.6, a 10% reduction. Fine. If it's 16px, 14.4px. Good. But note that using `calc` might be considered more than just a value change? It's still padding. Allowed.

However, if the original `--space-md` is a unit like `1rem`, 0.9