/* ============================================================
   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 file "assets/css/saishi.css#块2/2" in conservative mode, with target style dense-dashboard and effect variant flat-solid. The original CSS is a small media query block. 

We must preserve all selectors exactly, and not change layout properties. The original has:

@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 only change visual properties: color, border, shadow, radius, gradients, transitions, etc. But text-align is a layout property? Actually text-align is allowed? In the list, text-align is under "NOT CHANGE" as "text-align, vertical-align" — so we must keep text-align: center. Font-size is also not change. Padding is layout but we can keep it same or within 20%? But the instruction says padding, margin keep similar values ±20% maximum. We should keep exactly as is because changing it could affect layout. Since target style says compact padding, but we cannot change because original uses var(--space-md) which may be defined elsewhere. We can't change the var name. We could adjust the value? But it's a var reference. Better leave as is.

We need to add visual changes? The original properties are all typography/layout. There is no color, shadow, etc. In conservative mode, we must preserve all selectors, but we can add visual properties? The instruction says "Only colors, shadows, and decorative properties may change" and "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Since original has no such properties, we can add them? But we must not change layout. Adding color/background would be an enhancement. But the goal is to refresh visual identity, so we should apply the palette to these elements. However, careful: adding background to .col-lg-7 etc might affect layout? No, background is visual. But adding padding? We shouldn't. Adding border-radius? Could be visual. However, these are under a media query for small screens, perhaps hero section. The target style is dense-dashboard flat-solid: slate background, white cards, accent blue. We can add background colors? But we must be cautious not to alter the design unintentionally. Since the user explicitly wants a visual refresh, we can modify existing background/color declarations if present, but if absent, we can add new decorative properties? The instruction says "All color values: background, color, border-color, fill, stroke, outline-color" must change. If there are none, nothing to change. But "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette." That implies the previous AI maybe did too little. The provided original is only a media query snippet without colors. Maybe this file is just a part of CSS. We need to rewrite this snippet and perhaps add visual properties to make it distinct? But the output must be CSS that implements the target style.

Let's examine: We have a media query with three rules. In the target style, we want white cards on slate background. The .app-hero-section and .contact sections could be themed. But we cannot change layout structures like padding. We can add background colors, borders, border-radius, box-shadow? But flat-solid says box-shadow: none everywhere. So no box-shadow. We can add border, background-color, maybe color. We can adjust border-radius (0-6px). We can add transitions. However, the original selectors are broad, and adding backgrounds to .col-lg-7 may be weird. But maybe there is an existing background on hero section elsewhere. Since we don't see it, we need to decide.

The task says "Only colors, shadows, and decorative properties may change" — the output should be a rewritten version of the original CSS. If original has no colors, we could add them, because we are refreshing visual identity. But we must preserve selectors and layout properties exactly. Adding a background-color doesn't change layout. Adding a border might change box-sizing? If border-width is added, it could change layout if box-sizing is content-box. The instruction says NEVER CHANGE border-width. We can change border-color and border-style but not border-width? Wait, it says "border-color and border-style (NOT border-width)" in the "must change" list? Actually it says under "✅ YOU MUST CHANGE": "border-color and border-style (NOT border-width)" — meaning we should change border-color/style but not width. Actually it says "border-color and border-style (NOT border-width)" as one item? Let's re-read: "• border-color and border-style (NOT border-width)" — that is a must-change category, but if no border exists, we can set border-style? Hmm.

Better to keep original layout unaffected. Adding a border of 0 width? Not helpful. Adding background colors is safe. Adding border-radius is safe if no border. But if we add a border, it might affect element size if box-sizing not border-box. But we can't know. Since the file is fragment, maybe best to add only colors that don't affect layout: background-color, color, border-color (but not border-style/width), outline, text-shadow, backdrop-filter? We can add box-shadow: none (as flat-solid). But adding box-shadow none is a no-op.

Maybe we should treat this as a challenge: preserve all existing declarations, and add new declarations that implement the dense-dashboard flat-solid style. The selectors are:

1. .app-hero-section .row .col-lg-7 — a column in a hero section, currently text-align: center. We could add color: #f8fafc? If hero has dark slate bg, then text color should be light. But we don't know the background. However, target palette: cool grays #1e293b, #334155, accent blue #3b82f6. White cards on slate background. So maybe hero is slate, text white. We can set color: #f8fafc; and maybe text-shadow? But text-shadow not needed.

2. .app-hero-section .badge.bg-warning — a badge with Bootstrap's bg-warning. The class bg-warning sets background-color: #ffc107 and color: #000. We can override? We are allowed to change colors, so we can set background-color: #f59e0b (a darker amber) or accent blue? The target style accent blue #3b82f6. Since it's a badge, maybe use accent blue? But it's initially warning (yellow). We can change to a different palette. However, we must keep the class name .badge.bg-warning. To override Bootstrap, we may need to set background-color and color. Since the selector has higher specificity? .badge.bg-warning is a class, same specificity as .bg-warning, but because it appears later, it could override. In the media query, it's inside a media query, so if it comes after Bootstrap, yes. We can set background-color: #3b82f6; color: #ffffff; border-radius: 6px; (but badge already has radius). We can also set font-size unchanged. We can add box-shadow: none? Not necessary.

3. .contact-channels-section article, .contact-quick-section .contact-card — these are contact cards/items. Target style white cards on slate background. We can set background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: none; color: #1e293b; maybe padding is already var(--space-md) !important, we cannot change. We can also add transition? But flat-solid no shadows. We can add a subtle border instead of shadow.

Also for the hero col, maybe we should set background? But a column inside a row maybe shouldn't have background. But for a "dense dashboard" look, hero might have a card-like panel. Yet changing background of .col-lg-7 might make it look like a card. We could set background-color: #1e293b; color: #f8fafc; border-radius: 6px; padding? Already maybe padding? But adding padding would change layout, so don't. But we can set padding? The original rule has only text-align. We can't add padding because it's a layout property and we would be changing it. Actually the instruction says we can keep padding/margin similar ±20%; but we cannot add padding to an element that didn't have it because that changes layout. So no padding.

But we can add a background-color and border-radius to the hero column? Border-radius without border/background may not show. Adding background-color is safe for layout. But if the column is inside a fluid container, adding background might expand to fill. That's fine. But is that in the spirit? Possibly.

Alternatively, we could leave the hero column as is and just set color. But we need "more distinct" changes. Since the original has no colors, maybe the "previous attempt" was just repeating the same CSS. We should add visual declarations that don't break layout.

Let's think about the media query context: max-width 575.98px (<576px, mobile). On mobile, .app-hero-section .row .col-lg-7 is probably a full-width column. We can set a background to create a "hero card". The badge should stand out. Contact cards should become white cards with border.

We must be careful with the `!important` on padding: it's existing, we keep it.

We also need to ensure that any added colors don't conflict with existing CSS file's variables. For example, `--space-md` is a variable, we don't change it.

Let's design:

For `.app-hero-section .row .col-lg-7`:
- `background-color: #1e293b;` (slate dark) to give hero background? But this column might be only one side of the hero. The hero section might have a row with col-lg-7 and col-lg-5. If we set background on the col, it creates a card. But maybe the hero already has background. We don't know. The target palette says cool grays and accent blue. But on mobile, maybe the hero section's background is set elsewhere. Setting background on the col might create a dark box. That's a visual change.

Maybe better: `background-color: #334155;` (slate medium) and `color: #f8fafc;` and `border-radius: 6px;`. But if there is already padding on this column from elsewhere, the background will show. We don't need to add padding. However, the mobile hero's text-align center suggests it's content. The background might look nice.

For `.badge.bg-warning`:
- `background-color: #3b82f6;` (accent blue) or maybe a warm accent for warning? But target uses accent blue. Since it's a warning, maybe changing to blue is weird. But we are refreshing. "Color palette: Cool grays #1e293b, #334155, accent blue #3b82f6, White cards on slate background." We can use accent blue for badge. Also set `color: #ffffff;` and `border-radius: 6px;` (Bootstrap badge already has radius `0.375rem`? Actually badge has `border-radius: 0.375rem`; we can keep same or set to 6px). We can set `box-shadow: 0 2px 4px rgba(0,0,0,0.1)`? But flat-solid says no shadows. So none.

For contact cards:
- `background-color: #ffffff;`
- `border: 1px solid #e2e8f0;` but border-width is 1px, is that allowed? The forbidden list says "border-color and border-style (NOT border-width)" as must-change? Actually it says "border-color and border-style (NOT border-width)" — meaning we must change border-color and border-style, but not border-width? Let's check the exact wording: "✅ YOU MUST CHANGE (visual identity only): ... • border-color and border-style (NOT border-width)". This is ambiguous. It might mean that border-color and border-style are things you must change, but border-width is not to be changed. It says "NOT border-width" to clarify that border-width is not in the must-change list (maybe because it could affect layout). So we should NOT set border-width. If we set `border: 1px solid #e2e8f0;` we are setting border-width, which is not allowed. Instead we can set `border-style: solid; border-color: #e2e8f0;` but without width, the border might not appear? If the element already has a border-width from elsewhere, setting style and color will work. But if not, no border appears. Alternatively, we can set `outline: 1px solid #e2e8f0;`? Outline doesn't affect layout. But outline is not a border; it is allowed? "outline styles (color, type)" are in must-change list. We can add outline. But outline is outside the element, may overlap. Better to use `box-shadow: 0 0 0 1px #e2e8f0;`? But flat-solid says box-shadow none. So no.

If we can't set border-width, we can't create a border. But we can set background-color to white and maybe rely on existing border? Hmm.

The instruction "border-color and border-style (NOT border-width)" is under must-change. It doesn't say we cannot set border-width. Actually the "🔒 NEVER CHANGE" list includes "border-color and border-style"?? Let's re-read:

⚠️ NEVER CHANGE (would break HTML layout):
- ...
- border-color and border-style? Wait, in the user prompt:

```
═══════════════════════════════════════
✅ YOU MUST CHANGE (visual identity only):
═══════════════════════════════════════
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)
  • text-shadow
  • border-radius (visual rounding only)
  • gradient colors and stops in linear/radial/conic-gradient
  • transition timing, easing, duration
  • filter, backdrop-filter
  • opacity
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
  • caret-color, accent-color
  • CSS custom properties (--color-*, --shadow-*) values

═══════════════════════════════════════
🔒 NEVER CHANGE (would break HTML layout):
═══════════════════════════════════════
...
```

So the must-change list includes "border-color and border-style (NOT border-width)" — meaning we are expected to change border-color and border-style, but not border-width. It doesn't explicitly prohibit setting border-width? Actually "NOT border-width" means don't change border-width, but if we set a border shorthand, we might be setting width. So we should avoid that. We can use `border-color` and `border-style` without width. But if the original element didn't have a border, adding border-style alone won't show a border because border-width defaults to medium? Wait, CSS `border-style: solid` sets style, and if border-width is not set, the used border-width is `medium` (3px). That would affect layout. That's bad. So we cannot set border-style without width. To avoid layout change, we can set `border: 0 solid transparent`? But that changes border-width to 0, then border-color not visible. Hmm.

Maybe we can use `outline` to create a visual border without affecting layout. `outline: 2px solid #e2e8f0;` — outline doesn't affect layout. The must-change list includes outline styles and colors, so we can change/add outline. But outline draws outside the element, might be clipped. Yet it's acceptable.

Alternatively, we can just use background-color and no border. Flat-solid "Defined by color contrast and borders" — but if we can't add borders, use background contrast. We can set background-color: white and let the slate page background provide contrast. Since we can't change the page background in this snippet, but we can set the contact cards to white. But without page background, white cards on white background won't show. However, the original CSS is only a fragment; the page background might be set elsewhere to slate. We can assume that. So we can just set `background-color: #ffffff;` and maybe `border-radius: 6px;`. That will create white cards if the surrounding background is dark.

For the hero column, we can set `background-color: #1e293b;` to create a dark panel.

We also need to ensure no box-shadow: `box-shadow: none;` (flat-solid). The target says "box-shadow: none everywhere". So we should explicitly set `box-shadow: none` on these elements to override any existing shadows. That is a visual change and allowed.

Also transition: we can add `transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;`? But flat-solid maybe not necessary. We can add a simple transition for hover? There are no hover states in this media query. We can add transition to elements for when state changes at media queries? Not needed. But the must-change list says "transition timing, easing, duration" — if there is a transition, we should change it. But there is none. We can add a transition to background-color. That's allowed.

Let's craft the CSS:

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 need to keep all selectors and existing declarations