/* ============================================================
   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 CSS file content with a media query. The task is to refresh visual identity without changing layout structure or class names. However, the provided CSS is very small and contains only layout-related properties: text-align, font-size, padding. There are no colors, shadows, radius, transitions, gradients to change. The instruction says only change colors, shadows, radius, transitions, gradients. But there are none.

We must preserve selectors exactly, and all layout properties (including font-size, padding, text-align) are in the "never change" list. Indeed, font-size is typography, padding is layout, text-align is layout. So we cannot change those.

The only possible changes might be adding new properties? But the task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Since there are no such properties, we might need to output the same CSS unchanged? But the instruction says "Output the rewritten CSS now" with all selectors preserved. However, if there is nothing to change, we output the exact same CSS.

But wait: The "target style" says "sidebar-classic" and "sharp-edges" but the CSS doesn't have any structural elements relevant to that. The original CSS is just a media query for a hero section and contact cards. There are no colors to change. We should not invent selectors or modify the ones present. Adding colors to elements that didn't have them could be considered changing visual identity, but the instruction says "Only change colors, shadows, radius, transitions, gradients." It doesn't say "add" them. However, "Refresh this CSS visually" implies we should make some visual change. But if there are no visual properties to change, we must not change the layout properties.

Let's examine 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;
    }
}

We could change the `--space-md` variable? But that's a custom property value. The instruction says "CSS custom properties (--color-*, --shadow-*) values" can change. But `--space-md` is a spacing variable, not a color/shadow. Also, the never-change list includes padding, margin (keep similar values, ±20% maximum). `var(--space-md)` is a padding value; if we change it, we'd be changing padding. But we don't know its definition. We could leave it.

Maybe we can add a border-radius to the contact cards? But that would change the selectors' properties, not just colors/shadows. The instruction says "Only change colors, shadows, radius, transitions, gradients." So adding radius is allowed, but only if the selector already exists? Actually, we can add properties that are in the allowed list. But we must keep the same layout. Adding border-radius doesn't affect layout. But is it okay to add to existing selectors? Yes, we can change or add allowed properties.

But the instruction is ambiguous: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." This means we can modify existing or add new allowed properties to existing selectors? Typically, in these tasks, we rewrite the entire CSS file, preserving all selectors, and change only the visual properties. If there are no visual properties, we output the same.

However, the "target style" suggests we should apply that style to the file. But the file is only a fragment of a bigger CSS. It might be part of a larger file, but we are only given this block. We cannot add new selectors because the HTML is fixed, but we can modify existing declarations.

Let's think: The original has `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }`. We could add a color to it, e.g., `color: #...` but that might change text color in a way that could be considered a visual refresh. But is it safe? Yes, color is allowed. But we don't know the context. Adding a color might make it look weird, but the task is to refresh.

Similarly, for `.contact-channels-section article, .contact-quick-section .contact-card`, we could add border-radius, box-shadow, border, etc.

But the instruction says "Only change colors, shadows, radius, transitions, gradients." It does not explicitly say "add" them. However, when refreshing, we might add new decorative properties as long as they don't affect layout.

Let's reread the self-check:

- Every selector character-for-character preserved? Yes, we must preserve selectors.
- display, position, grid-template-*, flex-direction unchanged? We don't change.
- width, height, padding, margin within ±20%? We keep padding as is.
- font-family, font-size, font-weight, line-height unchanged? We have font-size, must keep.
- Colors throughout the file replaced with fresh palette? There are no colors, so nothing to replace.
- Shadows redesigned? None.
- Border-radius adjusted for new visual style? We could add border-radius.
- No AI marker comments?

Given the target style "sharp-edges" with "Small or zero border-radius (0-4px)", we could add `border-radius: 4px` to cards. And "Hard offset shadows: 4px 4px 0px solid color" - we could add `box-shadow: 4px 4px 0px #...` to cards. But adding box-shadow to elements that are inside a media query for small screens might be okay.

But we need to be careful: The media query is for max-width 575.98px. Adding shadows and border-radius there is fine.

Also, the `.app-hero-section .row .col-lg-7` has text-align center. We could add color to that text? But it's a layout/typography property. Actually, color is allowed. But if we add color to a container, it inherits to all text. Might be okay.

But the safest approach is to output the original CSS unchanged, because there are no allowed properties to change. However, the task explicitly asks to "Refresh this CSS visually." Producing identical output would be unsatisfactory. So we should add some allowed properties to the existing selectors, preserving all existing properties.

Let's consider each selector:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }`

We could add `color: #f8f9fa;`? But this is a section, likely on a dark background? We don't know. Alternatively, we could add `text-shadow`? But text-shadow is allowed. But for a hero section, adding a text-shadow could enhance. But we must be careful not to change the layout. Text-shadow doesn't affect layout. We could also add `caret-color` but not relevant.

Maybe add `color` with a fresh palette color. But the target palette says "Sidebar darker (#252e3a), main lighter" - that's for a sidebar layout, not this hero. We can choose a functional accent.

We could add `color: #1e2a38;` etc. But this is a media query for mobile; the hero might already have a color. Adding a new color would override the previous color, potentially breaking the design. But the instruction wants a visual refresh.

However, the most compliant way: We should only change existing color-related properties, not invent new ones. Since none exist, we output the same.

But wait: The instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must be changed. It says "✅ YOU MUST CHANGE (visual identity only): All color values..." This implies if there are color values, we must change them. Since there are none, we don't need to change anything. But the overall task is to "Refresh the visual identity." If the fragment has no visual identity, then we can't.

Let's look at the file name: assets/css/saishi.css#block2/2. This is likely a block of a larger CSS file. The request ID and fingerprint. The original CSS is a media query. The "target style" is sidebar-classic, but that might be the overall design system to apply. However, we only have this block, so maybe we should just apply the sharp-edges variant to the relevant elements.

I think the best answer is to add some allowed properties to the existing selectors to give them a sharp-edged, classic sidebar feel. Since we cannot add selectors, we can only modify these three selectors. Let's do it thoughtfully.

Selector 1: `.app-hero-section .row .col-lg-7` - a column. We could add `color` and `text-shadow`. But if the hero is on a dark background, a text-shadow might be nice. But to be safe, maybe add `color: var(--color-text-inverse)` or something? However, we don't know if those custom properties exist. We should use literal colors.

The palette: Sidebar darker (#252e3a), main lighter. For a hero section, we might use a lighter text color with a dark overlay. But without knowing background, adding color could hurt.

Alternatively, we can change the `text-align`? No, that's layout, cannot change.

Selector 2: `.app-hero-section .badge.bg-warning` - a badge with warning background. We can add `color`, `box-shadow`, `border-radius`. The original has `font-size: 0.85rem`. We can add `box-shadow: 4px 4px 0px rgba(0,0,0,0.2)` and `border-radius: 4px` to give sharp edge style. Also maybe `background`? But the class `bg-warning` sets background via Bootstrap, so overriding background might be redundant but allowed. We can change it to a new warning color. But the instruction says change all color values. So let's set `background: #e6a817` or something, and `color: #252e3a` for contrast. But that would be overriding Bootstrap's `.bg-warning` on small screens. That's acceptable.

Selector 3: `.contact-channels-section article, .contact-quick-section .contact-card` - contact cards. We can add `border: 2px solid #252e3a`, `box-shadow: 4px 4px 0px #252e3a`, `border-radius: 4px`. Also maybe `background`? The original has padding only. We can add a background color to make them stand out. But again, there might be existing background. Adding a light background could be fine.

We must be careful: The media query applies at max-width 575.98px. Adding border and background might change visual hierarchy but not layout? Border adds to the box size, but since padding is fixed, adding border increases the total width/height, which could affect layout within the grid. The instruction says "border-width" is in the never-change list. Actually, it says "border-color and border-style (NOT border-width)" can change. So we cannot add border-width! We can only change border-color and border-style if they already exist. If no border exists, adding a border with width would change border-width, which is prohibited. So we cannot add `border: 2px solid` because that sets border-width.

We can add `box-shadow` instead, which doesn't affect layout (shadows don't take up space). So that's safe.

We can add `border-radius` - this is allowed, doesn't affect layout? Actually, border-radius only affects the rounded corners of the background/border, not the layout. It's safe.

We can add `background` - allowed, doesn't affect layout (if no border).

We can add `color` - allowed.

So for the contact cards, we can add:
- `background-color: #f8f9fa;` (light)
- `border-radius: 4px;`
- `box-shadow: 4px 4px 0px #252e3a;`
- transition? But the media query is for static state, we could add `transition: box-shadow 0.15s ease;` but there is no hover state in this block. Adding transition is allowed but might not be used.

For the badge:
- `background-color: #f0b429;` (a warning color)
- `color: #252e3a;`
- `border-radius: 4px;`
- `box-shadow: 4px 4px 0px rgba(37,46,58,0.3);`

For the hero column:
- `color: #f8f9fa;`? But the hero might have its own color. To avoid messing, we could add `text-shadow: 2px 2px 0px rgba(37,46,58,0.3);`. But if the hero already has a text color, adding a text-shadow could be a nice effect. We must ensure the text-shadow doesn't become invisible. Alternatively, we can add `color` to change to a dark color, but if the background is dark, it would be unreadable. Since this is a hero section, often the text is light on a dark background. Let's use a light color like `#fdfdfd`. But is that safe? We don't know. The instruction doesn't require us to know context; it's a "refresh". We can pick a palette.

Given the target "sidebar-classic" with sidebar darker and main lighter, maybe the hero is part of the main content, so lighter background. Then dark text is fine. But the hero is usually a prominent section with contrasting background. Hmm.

Maybe we should be conservative: only modify properties that are definitely safe and clearly part of visual identity, like box-shadow and border-radius and color of the badge. For the hero column, adding text-shadow is safe and doesn't affect layout. Text-shadow doesn't change background, but if the text color is unknown, text-shadow will just add a shadow behind the glyphs; even if weird, it's a visual change.

Also, we could add `caret-color`? Not relevant.

Let's decide on a concrete set of changes.

But first, let's check the "NEVER CHANGE" list: It includes "transition timing, easing, duration" in the "YOU MUST CHANGE" list. So transitions can be changed if present. None are present. We can add transitions? Not required.

Also, "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)" - we can add.

"text-shadow" - we can add.

"border-color and border-style (NOT border-width)" - if we want to change border color/style on an existing border. Since none exist, we shouldn't add border-width.

"outline styles" - could add outline, but outline doesn't affect layout? Actually, outline doesn't take up space, but it is drawn outside the border. We could add `outline: 2px solid #...` but that sets outline-width, which might be considered layout? Outline doesn't affect layout, but it is not in the allowed list? The allowed list includes "outline styles (color, type)" and "outline-color". It doesn't say outline-width, so we should not add outline-width.

So adding box-shadow and border-radius is best.

Now, the selectors must remain exactly. We can add declarations inside each rule.

Let's craft the output:

The original:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

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

We can add to each rule:

1. `.app-hero-section .row .col-lg-7`:
   - color: #2c3e50; (dark slate)
   - text-shadow: 2px 2px 0px rgba(255,255,255,0.3);? Actually, text-shadow with 0 blur and a light color might look like a hard shadow. To match sharp edges, use `text-shadow: 3px 3px 0px rgba(37,46,58,0.15);` But if the text is light, a dark shadow works; if dark, a light shadow works. Let's use a neutral shadow with slight dark: `text-shadow: 2px 2px 0px rgba(37,46,58,0.2);`.

2. `.app-hero-section .badge.bg-warning`:
   - background-color: #f0b429; (a warm warning color)
   - color: #252e3a; (dark text for contrast)
   - border-radius: 4px;
   - box-shadow: 4px 4px 0px rgba(37,46,58,0.2);

3. `.contact-channels-section article, .contact-quick-section .contact-card`:
   - background-color: #ffffff;
   - border-radius: 4px;
   - box-shadow: 4px 4px 0px #252e3a;
   - transition: box-shadow 0.15s ease, transform 0.15s ease; But adding transform could be layout if applied? But transition property itself is fine. However, the instruction says we can change transition properties, but not add? It says "transition timing, easing, duration" can change. Adding is fine.

But be careful: The media query is for mobile. Adding `background-color` to cards might override a more specific rule? The selector has low specificity, but `!important` is used on padding. We won't use `!important`. It's fine.

But we must ensure the `padding` stays exactly the same. We keep it.

Now, let's verify the self-check:

- Selectors preserved exactly? Yes.
- display/position/etc unchanged? Yes, none changed.
- width/height/padding/margin within ±20%? We didn't change padding/margin.
- font-family/font-size/font-weight/line-height unchanged? We didn't change font-size (0.85rem stays).
- Colors replaced with fresh palette?