/* ============================================================
   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 given a small CSS snippet within a media query. The instruction is to refresh visual identity without changing layout. The original 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;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}

Now, the constraints: we must keep all selectors exactly. We can only change colors, shadows, radius, transitions, gradients, etc. However, this CSS has only text-align, font-size, and padding. Those are layout/typography properties that are forbidden to change. text-align is forbidden (see list: text-align, vertical-align). font-size is forbidden. padding is allowed but only within ±20% of original. Wait, padding is allowed with ±20% max. But here, padding is var(--space-md) !important. Changing the CSS custom property value? The instruction says CSS custom properties (--color-*, --shadow-*) values may change, but --space-md is a spacing variable, not color/shadow. So we shouldn't change that value. Also we can't change padding value? Actually padding is in the allowed list with "keep similar values, ±20% maximum". So we might adjust padding slightly? But the original uses var(--space-md). We could change it to calc? But that might change layout. Since layout must remain identical, and we can't change the spacing variable, we should leave padding as is. Similarly text-align and font-size must remain unchanged.

So what can we change? The snippet contains no colors, no shadows, no radius, no transitions. The only visually changeable properties are none. But the task says "Refresh this CSS visually". There might be nothing to change. But we must output "rewritten CSS" preserving all selectors and layout exactly. So we should output the same CSS, perhaps with no changes. But that seems too trivial. However, maybe we can add some visual properties? But adding properties would change layout? Not necessarily. We could add color, background, border-radius, box-shadow, transitions to these elements. But the instruction says "Only colors, shadows, radius, transitions, gradients may change" and "keep all selectors and layout exactly". Adding new declarations to existing rules doesn't change layout if they don't affect layout properties. But we must be careful: adding background, color, border-radius, box-shadow is okay. But would that alter layout? No, box-shadow doesn't affect layout. border-radius doesn't affect layout. color doesn't. background doesn't. transition doesn't.

However, the target style "card-mosaic" and "tight-rhythm" suggests adding colors, shadows, small radius. But these are inside a media query for small screens. We can add declarations to the existing rules. But the original rules are about text-align, font-size, padding. We can add color, background, etc. But selectors like .app-hero-section .row .col-lg-7 — adding a background to that column might change visual identity but not layout. That's acceptable.

But there's a risk: adding visual properties to elements not originally having them could be considered "changing layout"? No, layout is box dimensions, positions. Background and color don't affect layout. Box-shadow doesn't affect layout. So we can add them.

The instruction: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." That allows adding new visual declarations. But it also says "Every selector character-for-character preserved?" Yes. "display, position, grid-template-*, flex-direction unchanged?" Yes. "width, height, padding, margin within ±20% of input?" We won't change padding. "font-family, font-size, font-weight, line-height unchanged?" We won't change font-size. "Colors throughout the file replaced with fresh palette?" There are no colors. We can introduce colors. "Shadows redesigned (different offsets, colors)?" We can add shadows. "Border-radius adjusted for new visual style?" We can add radius. "No AI marker comments?" Good.

So we will output the same media query, with the same selectors and original declarations, but add color/background/border-radius/box-shadow/transition to each rule. Also, there are two selectors in the third rule: .contact-channels-section article, .contact-quick-section .contact-card — we must preserve that selector list exactly.

But we must be careful: the first rule is .app-hero-section .row .col-lg-7, which is a column. If we add background to the column, it might look different but okay. We can also add a subtle transition. The second rule is .app-hero-section .badge.bg-warning — a badge. We can add background color, color, border-radius, box-shadow. The third rule is the contact cards — we can add background, border-radius, box-shadow, etc.

However, the original third rule uses padding: var(--space-md) !important. We must keep that exact declaration. We can add other declarations after it. The property order doesn't matter.

But wait: The instruction says "Keep ALL selectors and layout exactly as-is" and "Only change colors, shadows, radius, transitions, gradients." It might mean we should only replace existing values of those properties, not add new properties. But since there are none, we might have to add them. The task says "Refresh this CSS visually" — implying we must make some visual change. If we output exact same CSS, no refresh. So adding visual declarations is the only way.

Alternatively, could we adjust the media query breakpoint? No, @media breakpoints are forbidden to change. So breakpoint remains.

Let's craft a fresh palette. The target style is card-mosaic with tight-rhythm. Since it's a mobile responsive snippet, perhaps we can give the hero column a subtle background tint, the badge a vibrant warning color, and the contact cards a card-like background with subtle shadow and small radius. Use CSS variables? The original uses var(--space-md). We can define new custom properties? But adding custom properties at top of the media query? That's allowed? It's a CSS rule? We could add :root {} but that would be an extra selector? Actually inside a media query, we could add a custom property definition on the selectors themselves, like .app-hero-section { --card-bg: ...; } but that changes the selector? It would be a new rule, adding selector .app-hero-section, which is not in original. The instruction says preserve selectors exactly, but we can add new rules? The task says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" — that likely means every selector from the original must appear, but we might add new selectors? It says "every selector character-for-character preserved?" That implies the selectors in the output should match the input selectors. Adding new selectors might be a violation. Better to only modify existing rules by adding declarations or changing values.

But the target style mentions "grid with mixed spans" etc. That would require changing layout, which is forbidden. So we ignore that.

Let's create a visual refresh within the existing rules.

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 will add:

For .col-lg-7: maybe a subtle gradient background? But adding background to a column might conflict with existing layout? It will show as a background behind content. Since text-align is center, maybe a gradient background on the column would be a visual refresh. But we must be careful: if the column had no background originally, adding one will change appearance but not layout. That's fine.

Let's use a palette. The target says "Vibrant card colors on neutral background" and "Each card type a different accent". We have three selectors/types: hero column, badge, contact cards. So give each a different accent.

Also tight-rhythm: small border-radius (2-6px), subtle shadows. So use border-radius: 4px or 6px. Use box-shadow subtle.

We also need to preserve font-size etc. We can add color.

Let's propose:

- .app-hero-section .row .col-lg-7: add a soft gradient background from a muted blue to transparent, maybe border-radius, padding? Padding is layout? Could add padding? But original doesn't set padding for this element, adding padding would change layout. So don't add padding. Can add background, border-radius, box-shadow? box-shadow on a column might be okay. But adding border-radius and background could be considered visual. We'll add a subtle background gradient and maybe a bottom border? But border-color is allowed, border-style allowed, not width. Adding a border with width 0? Not useful. We can add box-shadow. We'll keep it simple.

- .badge.bg-warning: badge is likely already a warning color (yellow). We can change its background to a vibrant gradient, or add a box-shadow and border-radius. Since bg-warning is a Bootstrap class, our rule can override background. Add color, border-radius, box-shadow, transition.

- contact cards: add background, border-radius, box-shadow, border? We'll add a card-like appearance.

But we must ensure the CSS validates: We cannot change font-size, so keep 0.85rem. We cannot change padding, so keep var(--space-md) !important. We cannot change text-align, so keep center.

Now, consider adding transitions. Transitions don't affect layout, so okay. Add transition: background-color 0.3s ease, box-shadow 0.3s ease, etc. But without hover rules, transition won't do anything. Could add a transition property anyway, but it's useless. However, the instruction allows transitions, but we don't have :hover rules to use. We could add a transform? That is layout? transform is a visual property, but it can affect layout in terms of rendering, but not layout flow. The instruction says never change "display, position, grid-template-*, flex-direction, width, height, padding, margin, gap, justify-content, align-items, align-self, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, object-position, text-align, vertical-align". Transform isn't listed, but it can change visual position. It might be considered a visual identity change, but it could also affect layout? In a tile context, transform on hover? No hover. We shouldn't add transform.

Better to add simple visual properties: background, color, border-radius, box-shadow. Maybe border-color if there is a border. But we cannot add a border-width from 0 to 1px? The rule says "border-color and border-style (NOT border-width)" can change. It doesn't say we can't add a border. Adding a border with a width would change layout because border adds to box size (if box-sizing is border-box, it might not affect layout? Actually border width does affect layout if box-sizing content-box, but with border-box, it doesn't affect outer size? It still affects inner content area. But to be safe, we shouldn't add border because it might change layout. Instead, use box-shadow as a border substitute.

Thus, we'll add:

- background: linear-gradient(...)
- color: ...
- border-radius
- box-shadow
- transition

For the .col-lg-7, maybe use a background with low opacity so it doesn't overpower. But if the column is a large area, a gradient background could be nice. We'll use a soft neutral gradient.

Let's select a palette. Since it's "card-mosaic", we can use vibrant accents: coral, teal, indigo, amber. Neutral background: #f8fafc or a soft gray. But we are not setting background on body, just on these specific elements. The element backgrounds should be vibrant but still readable.

But careful: The badge already has .bg-warning, so overriding background to something else might conflict. We'll set background: linear-gradient(135deg, #f59e0b, #d97706) (amber/orange gradient). Color: #1f2937 for contrast. border-radius: 4px. box-shadow: 0 1px 3px rgba(245, 158, 11, 0.4). font-size remains 0.85rem.

For the hero column, a gradient from #eff6ff to #eef2ff (light blue/indigo). But "vibrant card colors on neutral background" suggests cards are vibrant, while background neutral. The hero column is not necessarily a card. Maybe we should not make it a card; instead just a subtle background texture. But the task says refresh visual identity, so a subtle tint is fine.

Alternatively, we can add a background to the .contact cards: a vibrant card color with white text. But we must ensure the text remains readable. Since we cannot change padding, font-size, etc., only color. We can set color: white or dark depending on background. Let's make contact cards a dark indigo background with white text? But we don't know if there are already text colors. Overriding might break if there are child elements with their own colors. But this is a mobile override. It's okay.

But the rule is for both .contact-channels-section article and .contact-quick-section .contact-card. We can give them both the same style.

Let's craft:

.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background: linear-gradient(145deg, #312e81, #4f46e5);
    color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

But adding transform in transition doesn't mean we use transform. We can omit transform from transition and just include box-shadow and background-color. If there is no hover, transition won't matter.

However, if these elements already have a background from other CSS, our background will override. Good.

But the target style "tight-rhythm" says "Subtle shadows or none" and "Small border-radius (2-6px)". So 6px is max. Use 4px.

Let's also consider the .badge: border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.1). Good.

Now, the first rule: .app-hero-section .row .col-lg-7. We can add a background gradient but since it's a column in a row, giving it a background color might create a block of color. The target style says cards have distinct elevation, but this is not a card. Maybe we can add a subtle shadow to the column? But a shadow on a column might look odd if there are other columns. However, it's inside a media query, likely single column stack. It could be fine.

Let's craft:

.app-hero-section .row .col-lg-7 {
    text-align: center;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.02));
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    transition: background-color 0.3s ease;
}

But an inset shadow maybe too subtle. We can use a soft outer shadow: 0 1px 3px rgba(0,0,0,0.04). Since it's a column, an outer shadow could be okay.

However, we need to be careful not to modify layout. Adding background doesn't modify layout. Good.

Alternatively, we could not add anything to the first rule because there's no visual property to change. But the instruction says "Refresh this CSS visually" and "Colors throughout the file replaced with fresh palette?" Since there are no colors, we should introduce colors. So adding is necessary.

Let's make sure we do NOT change text-align, font-size, padding. We can add declarations after them.

The final output must be exactly the CSS with no markdown fences, no explanations. Preserve the original declarations and add new ones. The media query wraps everything.

Let's write the final CSS:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(180deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.02));
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(99, 102, 241, 0.08);
        transition: background-color 0.3s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: #1f2937;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(245, 158, 11, 0.35);
        transition: box-shadow 0.2s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #1e1b4b, #4f46e5);
        color: #f8fafc;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
        transition: box-shadow 0.2s ease;
    }
}

But wait: The instruction says "Shadows redesigned (different offsets, colors)" — we added shadows. "Border-radius adjusted" — yes. "Colors throughout the file