/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We are asked to refresh the CSS visually, but the provided CSS block only contains a media query with layout-affecting rules (text-align, font-size, padding). There are no colors, shadows, or visual properties to change in this block. However, we must still output a rewritten CSS that preserves the selectors and layout exactly, and perhaps add no changes because there is nothing to change. But the instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must change. Since there are none, we should simply output the same CSS, but perhaps we can add visual properties? Wait, we cannot add properties that would change layout? We can only change colors, shadows, radius, transitions, gradients. The existing properties are layout-ish: text-align (not allowed to change), font-size (not allowed to change), padding (allowed to vary ±20%). But we are not required to change every property, only the ones that are visual identity. Since there are no colors/shadows, we can leave the CSS as-is, but maybe we should adjust padding within ±20%? The target style is "tight-rhythm" with compact spacing, small border-radius, subtle shadows. However, the selectors are within a mobile media query. We could add box-shadow or border-radius to those elements? But that would be adding new declarations, which is allowed as long as we don't change the layout structure. But the HTML is fixed, we can add visual properties. The instruction says "Only colors, shadows, and decorative properties may change" — "may change" implies we can modify existing or add new decorative properties. But we must ensure no layout changes. Adding box-shadow, border-radius, transitions, background, etc. is acceptable.

Looking at the original CSS:
- `.app-hero-section .row .col-lg-7 { text-align: center; }` — this is a layout/text property, not to change.
- `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — font-size not to change.
- `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — padding can vary slightly, but `var(--space-md)` is a custom property. We cannot change CSS custom property values? Actually we can change CSS custom properties values. But here it uses var(--space-md), which is defined elsewhere. We can't modify the variable definition because it's not in this file. But we could replace `var(--space-md)` with a concrete value? That would change padding value, which is allowed within ±20%. But the original uses a variable; we don't know its value. To be safe, we can keep the padding as `var(--space-md)`? But that wouldn't be a "visual refresh". We might change it to a smaller padding like `10px`, but that could be more than ±20% if --space-md is small. Hmm.

Since the file snippet is just a media query with three rules, and there are no color properties, the only way to "refresh" is to add decorative properties that don't affect layout. We can add subtle box-shadows, border-radius, transitions, etc. But the target style says "subtle shadows or none" and "small border-radius (2-6px)". We can apply these to the contact cards and hero badge. However, we must be careful: adding padding or border-radius could affect layout? Border-radius doesn't affect layout, box-shadow doesn't affect layout. Transitions don't affect layout. So we can add those. We cannot change text-align, font-size. We could change padding from `var(--space-md)` to `calc(var(--space-md) * 0.9)`? That's still using the variable and within ±20%? Actually 0.9 is 90%, within 20%. That might be a visual refresh. But is calc with var allowed? Yes.

But the instruction says "The HTML is FIXED — only colors, shadows, and decorative properties may change." This suggests we should produce a CSS file that is a refreshed version, possibly with added visual properties. Since the original has no visual properties, any attempt to "output rewritten CSS" could simply be identical. However, that would fail the "self-check" because "Shadows redesigned" — we have no shadows. We should probably add a few decorative touches to meet the target style.

Let's examine the selectors:
1. `.app-hero-section .row .col-lg-7` — a column. In mobile, center text. Could add a subtle transition or background? But adding background might affect design. Better not add background to a column. Maybe add a subtle text-shadow? But text-shadow is a visual property. For a centered hero text, a subtle text-shadow could be nice, but it might affect readability. The target style is "tight-rhythm" and "symmetric-grid", but this is mobile. We can keep it minimal.

2. `.app-hero-section .badge.bg-warning` — a badge with warning background. We cannot change the color? Actually we can change the background color? The class `bg-warning` probably comes from Bootstrap, but the rule here only sets font-size. We could add a new background? But that would override Bootstrap's warning class. The instruction says we can change colors. So we can add `background-color` and `color` to restyle the badge. But the class name includes `bg-warning`, so changing background might be weird, but we are allowed. However, the original CSS doesn't set it, so we're adding new declarations. Adding `background-color` and `color` would be a visual identity refresh. Also add `border-radius`, `box-shadow` to the badge.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — these are contact cards. We can add `border-radius: 6px`, `box-shadow: 0 1px 3px rgba(...)`, maybe a subtle `transition`. Also adjust padding to be more compact, e.g., `padding: 12px !important` instead of `var(--space-md)`. But the original uses `!important`, we should preserve that.

Wait, the original uses `padding: var(--space-md) !important;`. If we change the padding value, we must keep the `!important` to maintain specificity. That's fine.

But we don't know the value of `--space-md`. In many design systems, `--space-md` is 1rem = 16px or 1.5rem = 24px. To be safe, we can set `padding: 14px !important;` which is between 12-16px, likely within ±20% of 16px. But if the variable is 24px, then 14px is a 42% reduction, which violates the rule. Better to use `calc(var(--space-md) * 0.85)` to ensure a slight reduction within 20%. Actually multiplying by 0.85 is a 15% reduction, within 20%. Same for the other.

Let's write:

`.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: calc(var(--space-md) * 0.85) !important;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}`

Wait, can we add `transform`? Transform is a layout-affecting property? It changes visual appearance but not layout. However, the instruction says "display, position, grid-template-*, flex-direction..." are never changed. Transform is not listed. But we should be cautious: adding transform on cards might cause them to move slightly on hover? We didn't add a hover rule. We only add a transition, but without a hover state, the transform won't change. That's pointless. We can add a transition on background-color or box-shadow. Transform might be overkill. Better to keep it simple.

But the instruction says "transition timing, easing, duration" can change, so we can add transitions.

For the badge:
`.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    border-radius: 999px; /* pill shape */
    box-shadow: 0 1px 2px rgba(245, 158, 11, 0.3);
    background-color: #fbbf24;
    color: #1f2937;
}`
But wait, the selector includes `.bg-warning`, which is a Bootstrap utility. If we set background-color, we're overriding the utility. That's allowed. But do we want to do that? The target style is "symmetric-grid" with balanced harmonious palette. We can choose a pleasant amber/blue palette.

However, we must consider the file fingerprint and the fact that this is only block 2 of 2? Actually the file is `saishi.css` and this is "块2/2" (block 2/2). The original snippet is just a media query. We should output the entire block exactly with modifications only to visual properties.

Let's also check the first rule: `.app-hero-section .row .col-lg-7 { text-align: center; }`. We cannot change text-align. We could add a `text-shadow` to this? That might affect readability. Perhaps add a subtle text-shadow to headings only, but this rule targets the column, not the heading. Adding text-shadow to the column would affect all text inside, might be ugly. Better not.

Maybe we should add a background gradient to the hero section? But the selector is only `.col-lg-7`, not the hero section. We could add a background to the column? That would change the look but might be too aggressive. Not needed.

Given the conservative mode, perhaps the correct response is to output the CSS exactly as-is, because there is nothing to refresh. But the task explicitly says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." If there are no such properties, then we have nothing to change. The output would be identical. However, the "self-check" says "Colors throughout the file replaced with fresh palette?" — there are no colors, so it's trivially satisfied. "Shadows redesigned" — there are no shadows, so nothing to redesign. That might be acceptable.

But the "TARGET STYLE" and "EFFECT VARIANT" suggest we should implement a visual style. The AI is expected to generate a styled CSS, not just echo. Let's look at the original: it has only three rules. We can enhance it by adding decorative properties that don't change layout. The instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Adding box-shadow, border-radius, transitions, and possibly background-color is allowed.

Let's think about the target style "symmetric-grid" and "tight-rhythm". For mobile (< 576px), the contact cards should be compact, with small radius and subtle shadows. The hero badge should be pill-shaped with a subtle glow. The col-lg-7 could have a subtle transition for hover? But no hover rule. We could add a `transition` to the col-lg-7? No, it's a layout container.

Maybe we can also add `border-radius: 4px` to the cards, and a subtle border? Border-style can change, but border-width cannot? We can add border: 1px solid? The instruction says "border-color and border-style (NOT border-width)" — we can set border-width? Actually it says "NOT border-width", so we should not change border-width if it exists. But if there is no border, can we add one? Adding a border would change layout (box-sizing could be content-box? Usually border-box, but to be safe, we can use `box-shadow` to simulate a border instead. Or use `outline`. But outline also can be added.

Better to avoid adding borders to prevent layout shifts.

Let's craft a minimal but fresh version:

- Keep `.app-hero-section .row .col-lg-7` as is, maybe add `transition: text-shadow 0.3s ease;` but that's pointless. I'll leave that rule unchanged.
- Modify `.app-hero-section .badge.bg-warning` by adding `border-radius: 999px; box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2); background-color: #fbbf24; color: #78350f; transition: box-shadow 0.3s ease, transform 0.3s ease;` — but transform? No, better not. Let's use `filter: drop-shadow(...)`? That might be too much. We can keep simple.
- Modify the contact cards rule: change padding to `calc(var(--space-md) * 0.85)`, add `border-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04); transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;` and maybe `background-color: #ffffff;`? If the cards already have a background, adding a white background might change design. We can add `background-color: rgba(255, 255, 255, 0.8);` but that's a background. It's visual, allowed. But it might conflict with the existing theme. Hmm.

Since we don't know the rest of the stylesheet, adding background colors could clash. But the instruction tells us to refresh visual identity, so we can choose a fresh palette. Let's choose a palette based on the target style "symmetric-grid" and "tight-rhythm": neutral gray/blue tones. For the contact cards, a subtle white background with a soft shadow is fine. For the badge, since it's `.bg-warning`, keep an amber color.

However, the original uses `!important` on padding. We should preserve that. Also the selector list for contact cards uses a comma; keep it exactly.

Let's write the final 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;
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(251, 191, 36, 0.25);
        background-color: #fbbf24;
        color: #1f2937;
        transition: box-shadow 0.3s ease-in-out;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: calc(var(--space-md) * 0.85) !important;
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
        transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
        background-color: rgba(255, 255, 255, 0.9);
    }
}
```

But wait, we added `transform` in transition, but there's no transform property. Transitioning a property that isn't set is harmless, but might be misleading. Let's change to `background-color` instead of `transform`. Or just keep `box-shadow` and `background-color`.

Also, `border-radius: 6px` aligns with the tight-rhythm variant "small border-radius (2-6px)". Good.

But we must ensure the padding change is within ±20%. `calc(var(--space-md) * 0.85)` is a 15% reduction. If `--space-md` is e.g., 1rem = 16px, the new padding is 13.6px, which is within the 20% range (12.8–19.2). If it's 24px, the new padding is 20.4px, within 19.2–28.8? Wait 24 * 0.85 = 20.4, and 20% reduction from 24 is 19.2, so 20.4 is actually less than 20%? 24 * 0.8 = 19.2, so 20.4 is a 15% reduction, within 20% range (19.2–28.8). Yes, it's within 20%. So it's safe.

However, the original selector had `padding: var(--space-md) !important;` with a single value. We changed to `calc(var(--space-md) * 0.85) !important;` — that's fine. But let's check: the selector list includes both `article` and `.contact-card`. We must keep the entire block as is.

Now, do we need to preserve the `!important`? Yes.

Also, we added `background-color` to the contact cards. If the cards already have a background, this will override it. That's a visual change. Might be okay. But if the cards are on a colored background, a white background could look like a card. This is a common pattern. We'll go with it.

Let's think about the hero badge: The original only set font-size. Adding `background-color: #fbbf24; color: #1f2937;` overrides Bootstrap's `bg-warning`. But `bg-warning` is a background utility; changing it might be inconsistent with the rest of the site. However, we're refreshing visual identity, so it's acceptable. But if the site uses `bg-warning` elsewhere, our override only applies within `.app-hero-section`, so it's scoped. Good.

We should also consider the `.app-hero-section .row .col-lg-7` rule. We could add `text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);` to give depth. But that applies to all text in the column. On mobile, hero text might be