/* ============================================================
   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 visual properties only. Original CSS has a media query with three rules. We must preserve selectors and layout (padding might change ±20%? but note the !important padding in third rule: var(--space-md) is a custom property. We can change the custom property value? But it's used elsewhere. Since we only output this file snippet, we can't redefine --space-md necessarily. However, we are allowed to change CSS custom properties values. But if we change --space-md globally, could affect other rules. But the instruction says we can change custom properties values. But careful: this snippet is just a media query, no root definitions. So we might not want to introduce new custom properties. We can adjust padding within ±20% of original value? Original uses var(--space-md) which is unknown. We should keep the same padding value (var(--space-md)) to avoid layout change. However, the target style tight-rhythm wants compact padding. But we are allowed to change padding/margin within ±20%. Since var(--space-md) is defined elsewhere, we can't know its value. To be safe, keep padding unchanged. The task says "visual changes only" and "padding, margin (keep similar values, ±20% maximum)". Since we don't know the computed value, better to keep exactly var(--space-md). So we will keep padding declaration.

We need to refresh colors, shadows, radius, transitions, etc. In this snippet, there are no colors, shadows, radii, transitions. The only visual property is padding and font-size. Font-size is typography fixed, so we must keep font-size. Padding is layout? Actually padding is allowed to change within ±20%, but we'll keep.

But to fulfill the request, we need to produce a rewritten CSS that visually changes something. Since the original snippet has no color, shadow, radius, transition, we might need to add some? But the instructions say "Only change colors, shadows, radius, transitions, gradients." We cannot add selectors or properties that are not present? Actually we can add decorative properties to existing selectors, as long as we don't change layout. But the output should be the rewritten CSS preserving all selectors and layout exactly. Adding color, background, border-radius, box-shadow to existing rules is allowed, as long as selectors remain. But the original rules didn't have those; adding them could change appearance but not layout. However, we must be careful: for `.app-hero-section .row .col-lg-7 { text-align: center; }`, if we add color, that's fine. For `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }`, we could add background-color, border-radius, etc. But the badge already has bg-warning class elsewhere; if we change background-color here, it might conflict with Bootstrap's .bg-warning. But we are allowed.

But the instruction says "Refresh the visual identity WITHOUT changing layout structure or class names." It implies we should apply the target style to the provided CSS. Since the original snippet is inside a media query, we can add visual properties within the same media query, preserving selectors.

Alternatively, perhaps we should interpret that we need to output the entire CSS file? But the user gave a snippet "File: assets/css/saishi.css#块2/2" meaning block 2/2. The original CSS is just this media query. They want us to rewrite this block. So we'll rewrite the rules within the media query, adding visual styling.

We must preserve selectors exactly. For the first rule, selector `.app-hero-section .row .col-lg-7 { text-align: center; }` – text-align is not in the forbidden list? It says text-align is under typography? Actually "text-align, vertical-align" are listed under layout? Wait in the "NEVER CHANGE" section, under Typography: "text-align, vertical-align" appears? Let's check: In the prompt, under 📐 LAYOUT, it says "• text-align, vertical-align" under LAYOUT? Actually the prompt says:

```
📐 LAYOUT (HTML cannot adapt to changes):
  • display values ...
  • 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
```

Yes text-align is under layout. So we must keep text-align: center. Font-size is typography fixed, keep.

So we cannot change text-align or font-size. We can add colors, shadows, border-radius, maybe background, border, etc.

Target style: dense-dashboard, tight-rhythm. Cool grays #1e293b, #334155, accent blue #3b82f6, white cards on slate background. Compact spacing, small border-radius (2-6px), subtle shadows or none.

Let's apply:

1. For `.app-hero-section .row .col-lg-7`: It's a centered column. Could add color: #334155? But the hero section likely has its own color. To be safe, maybe add a subtle text-shadow? But that might be ugly. We can add color but it might override inherited. Since this is a media query for small screens, text-align center. We could add padding? No, padding is layout. Better to leave it as is? But then no visual change. We need to show some change.

Maybe we can add a decorative background to the hero section on mobile? But the selector is only `.col-lg-7`, not the section. Adding background to a column could change visual identity. However, we must avoid breaking layout. Background doesn't affect layout. We can add `background: rgba(255,255,255,0.03); border-radius: 4px;` but that might create a visible box around the text that wasn't there before. That's a visual change.

But since the target style is "dense-dashboard", we might want to make the hero content more compact. But we can't change padding of col-lg-7 because not in original. We could add a margin? No.

Alternatively, we could change the `badge.bg-warning` to have a new background, border, shadow, border-radius. That would clearly change visual identity. Since the badge already has `bg-warning` from Bootstrap, we can override its background color to accent blue? But "bg-warning" semantically means warning (yellow). Overriding to blue might be confusing but allowed. Or we can keep warning color but adjust with box-shadow.

We could also add a transition to the badge.

For the third rule `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` – we can add border-radius, box-shadow, background, border etc. That would give the card feel.

We must respect the "no AI-REWRITTEN comments", no markdown.

Let's design a cohesive transformation:

- Use slate background: `#1e293b` or `#334155` for sections? But we don't have the section selectors. We only have these specific elements.
- For `.contact-channels-section article` and `.contact-quick-section .contact-card`: these are cards. Add `background-color: #ffffff; border-radius: 6px; box-shadow: 0 1px 3px rgba(30, 41, 59, 0.12), 0 1px 2px rgba(30, 41, 59, 0.08); border: 1px solid #e2e8f0;` But the original padding is `var(--space-md)`, which we keep. That would make white cards on slate background. Good.

- For `.app-hero-section .badge.bg-warning`: change to accent blue background with white text? But the badge has bg-warning class, but if we set `background-color: #3b82f6; color: #ffffff;` Then the badge becomes blue. It's a warning badge originally (yellow) but now blue. Does that change layout? No. Also add `border-radius: 4px; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);` Maybe.

- For `.app-hero-section .row .col-lg-7`: Could add `color: #e2e8f0;` to make text light on dark hero background. But if the hero section already has dark background, this is fine. But we don't know. Since the dashboard theme uses cool grays, maybe the hero section background is dark. To be safe, add `color: #f8fafc;` to ensure readability. However, if the hero section background is light, this would be bad. But the original snippet didn't specify, so changing text color is a visual change that could break readability. But we are allowed to change color. We need to be confident. The target style "cool grays #1e293b, #334155, accent blue #3b82f6, White cards on slate background" suggests the overall page background is slate (dark) and cards are white. So hero section likely dark. Adding light text is appropriate.

Also could add a subtle text-shadow to the col-lg-7? Not necessary.

Let's craft final:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f8fafc;
        text-shadow: 0 1px 2px rgba(15, 23, 42, 0.4);
    }

    .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.4);
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

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

Wait: The original third rule has a selector list on two lines. We must preserve exactly including line breaks? The instruction says preserve selectors character-for-character. We can format the same. Original:

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

We should keep same line breaks? The instruction says "Every selector character-for-character preserved" but whitespace between selectors? The selector list includes the comma and newline. We can keep it exactly. It's safer to keep as original formatting. We'll output the properties indented.

Also check: `transition: background-color 0.2s ease, box-shadow 0.2s ease;` That's allowed (transition timing/easing/duration can change). But adding a transition is a new property. Is that allowed? The prompt says "transition timing, easing, duration" can change. It doesn't say we can add transitions, but it's part of visual changes. Adding transitions is a visual change. Allowed.

However, the third rule doesn't have a transition. Adding transition to cards might be good but not necessary. But we can avoid adding to keep minimal. The instruction says "transition timing, easing, duration" can change, implying existing transitions can be modified, not necessarily added. But adding transitions to elements that didn't have them is a visual behavior change, not layout. Probably acceptable. But to be safe, maybe omit transitions? Yet the task asks to refresh visual identity; transitions are part of visual identity. I'll include a subtle transition on the cards too.

But wait: The `.app-hero-section .badge.bg-warning` original has `font-size: 0.85rem;`. We must keep `font-size` exactly. Adding `background-color` and `color` is okay. But the badge also needs to remain readable. Good.

Let's ensure no forbidden layout changes: We are not changing display, position, width, height, margin, padding (except we're keeping padding same), gap, flex, grid, text-align, font-size, font-family, font-weight, line-height, etc. Good.

We added border: 1px solid #e2e8f0; Border-style and border-color are allowed to change, but border-width is not? Actually "border-color and border-style (NOT border-width)" can change. We added `border: 1px solid #e2e8f0;` This sets border-width to 1px, which is a border-width change. Is that allowed? The instruction says "border-color and border-style (NOT border-width)" can change. That means we can change border-color and border-style, but not border-width. If the original element had no border, adding border-width 1px changes layout (because border adds to box size unless box-sizing: border-box). This could alter layout. Also "border-width" is not listed under cannot change? Actually it says "border-color and border-style (NOT border-width)" can change, implying border-width must not change. If original had no border, adding border-width is changing it. To be safe, avoid adding border. Use box-shadow to simulate border? Or use outline? Outline doesn't affect layout. But outline is allowed (outline styles can change). But outline may overlap. We can use `outline: 1px solid #e2e8f0; outline-offset: -1px;` but outline-offset is not mentioned. Actually we can change outline-color and outline-style, but outline-width? The prompt says "outline styles (color, type)" can change, not width. So adding outline-width 1px is also a change. However, if original had no outline, adding an outline-width changes visuals but not layout (outline doesn't affect layout). It says "outline styles (color, type)" can change; not "width". But outline-width is part of outline. To be conservative, use `box-shadow` to create a border-like effect: `box-shadow: 0 0 0 1px #e2e8f0 inset;` This is a box-shadow, not a border-width. But inset box-shadow doesn't affect layout. We can use that. However, inset shadow may be clipped by border-radius. We can also use `border: 0`? Not needed.

Better: avoid explicit border. Use background and box-shadow. The cards can have no border, just shadow. That maintains dense dashboard look. But white cards on slate background often have border. We can use `box-shadow: 0 1px 3px rgba(30,41,59,0.12), 0 1px 2px rgba(30,41,59,0.08);` That's enough.

For the badge, we can set background-color, color, border-radius, box-shadow. No border.

For the hero column, set color and text-shadow.

Thus final CSS:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f8fafc;
        text-shadow: 0 1px 2px rgba(15, 23, 42, 0.4);
    }

    .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.4);
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

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

But we need to ensure the padding remains exactly the same. Yes.

But wait: The instruction says "Only change colors, shadows, radius, transitions, gradients." We added `color: #f8fafc;` and `text-shadow`, `background-color`, `border-radius`, `box-shadow`, `transition`. Good.

We also added `border-radius` to the badge and cards. Good.

We need to ensure no AI comments.

Potential issue: The selector list `.contact-channels-section article, .contact-quick-section .contact-card` – original indentation had the second selector aligned. We should preserve the exact same selector lines. In our output, we'll keep the line break and indentation.

Let's double-check the original formatting:

```
@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'll preserve the same structure. We'll add properties in the same positions.

One more thought: The target style "tight-rhythm" says small border-radius 2-6px. We used 4px and 6px. Good.

"Subtle shadows or none" – we used subtle shadows.

We should make sure the transition on badge is okay. But the badge is on mobile only; fine.

But wait: The `.app-hero-section .badge.bg-warning` maybe has a background from Bootstrap's `.bg-warning`. We override with blue. But the class is `bg-warning` and the badge might be