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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

We are given a small CSS block. It's a media query for max-width 575.98px. It contains:

@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 must refresh visual identity without changing layout structure or class names. Selectors must remain exactly. The properties inside include text-align, font-size, padding which are layout/typography. According to constraints, we cannot change font-size, text-align, padding (unless within ±20%? padding is layout, but says padding, margin keep similar values, ±20% maximum). But wait, it says "visual identity only" and lists colors, shadows, border-radius, transitions, etc. But our current CSS doesn't contain any colors or shadows. It has layout-only properties. The task says output rewritten CSS preserving all selectors and layout exactly, but "only change colors, shadows, radius, transitions, gradients." So if there are no such properties, what do we do? We need to output the same CSS? But perhaps we can add new visual properties? However we cannot change the selectors or layout. Adding properties would change behavior but not layout if they are color/shadow etc. Are we allowed to add properties? The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It doesn't explicitly prohibit adding visual properties. But if we add visual properties to selectors that didn't have them, that might be within scope, but could alter appearance. Since the target style is asymmetric-blocks and soft-shadows, maybe we should add some visual enhancements to these elements? However, the input CSS is only a media query block. The user likely wants this specific CSS transformed in light of the style. But there are no colors to change. We need to be careful: The system says "You are an expert CSS designer... Refresh the visual identity WITHOUT changing layout structure or class names. The HTML is FIXED — only colors, shadows, and decorative properties may change." Then in the list of MUST CHANGE: all color values, box-shadow, text-shadow, border-radius, gradient colors, transition, filter, opacity, outline, border-color, caret-color, accent-color, CSS custom properties. So for selectors where these properties don't exist, we should not necessarily add them? But to "refresh the visual identity," we can add declarations for these properties to the existing rules if they don't exist, as long as we don't alter layout. But the instructions also say "NEVER CHANGE would break HTML layout: ... width, height, padding, margin..." So we cannot change padding. So the third rule contains padding: var(--space-md) !important. We cannot change that because it's layout (padding). But the style target might want "bold padding contrasts", but we cannot change padding. So the padding stays. The other properties text-align and font-size also cannot change.

Thus, the only allowed changes are to color-related, shadow, radius, transition properties. Since there are none, we might need to add them to the existing selectors. But adding e.g., color to a hero section might be acceptable. Yet we must be careful: "only colors, shadows, radius, transitions, gradients" are allowed to change. That likely means we can alter existing declarations of those types, and possibly add new ones? It's ambiguous.

Given the request is to "Refresh this CSS visually" and the "only change colors, shadows, radius, transitions, gradients", I think the intent is to preserve all existing declarations, and possibly introduce new visual declarations to achieve the style. But the instructions also say "keep ALL selectors and layout exactly as-is" — if we add e.g., background color to a selector, that's not layout. So it's allowed.

But there is a risk: The output should be only the rewritten CSS, preserving all selectors and layout exactly. Adding new properties could change visual identity in a way that's desired. The "SELF-CHECK BEFORE OUTPUT" checklist: "Every selector character-for-character preserved?" yes. "display, position, grid-template-*, flex-direction unchanged?" yes, none. "width, height, padding, margin within ±20%?" yes, padding stays exactly. "font-family, font-size, font-weight, line-height unchanged?" yes, font-size stays exactly. "Colors throughout the file replaced with fresh palette?" There are no colors, so nothing to replace. "Shadows redesigned?" None exist. "Border-radius adjusted?" None exist. "No AI marker comments?"

So perhaps the answer is simply the same CSS? That seems too trivial. But the task expects a visual refresh; if there are no visual properties, we cannot change anything. But maybe we can add some declarations that don't affect layout, e.g., adding color, background, border-radius, box-shadow, transition to these selectors. However, we need to ensure it's appropriate. Let's analyze the selectors:

- .app-hero-section .row .col-lg-7: This is a column inside a hero section. At small screens, text-align center. We could add a color or something, but changing text color could be a visual change. But there's no original color. We'd be setting it perhaps to a new palette color. But the parent might have color inherited. Setting color to a specific value could override. That's allowed? It's a color change.

- .app-hero-section .badge.bg-warning: This is a badge with Bootstrap's bg-warning. At small screens font-size 0.85rem. We could add box-shadow, border-radius, maybe a background color? But bg-warning already sets background color. We could change the background-color? Actually bg-warning is a Bootstrap class that sets background-color: #ffc107; color: #000;. We could override it with a new color. Since we're allowed to change colors, yes.

- .contact-channels-section article, .contact-quick-section .contact-card: padding. We could add border-radius, box-shadow, background-color, border, transition. Those are visual.

But the instruction "The HTML is FIXED — only colors, shadows, and decorative properties may change." So adding decorative properties is fine.

However, we must be careful not to alter layout. Adding box-shadow doesn't affect layout. Adding border-radius doesn't. Adding background-color doesn't. Adding transition doesn't. Adding border-color? But adding border with width would affect layout (box-sizing? if border-width added, it increases size unless box-sizing border-box, but we don't know). We should not add border-width. We can add outline, box-shadow, background, color, etc.

But the request is "Rewrite the CSS" for this specific media query. The target style "asymmetric-blocks" and "soft-shadows" suggests we should give these elements a fresh visual treatment. But there aren't many elements.

Maybe the original file is larger, but the provided CSS is just "块2/2" (block 2 of 2). We are to rewrite this block. So we need to produce a version of this media query with visual enhancements.

Let's think: The media query is for max-width 575.98px. It already adjusts alignment, font-size, padding. We can add colors, shadows, radius, transitions to those elements. But we must keep the existing declarations exactly.

Let's propose:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d2a32; /* maybe not needed */
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ffb347;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
        border-radius: 20px;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border-radius: 18px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);
        transition: background-color 0.4s ease, box-shadow 0.4s ease;
    }
}

But is it okay to add background-color to article/card? It may already have one. Adding might override. This is a color change, allowed.

However, the instructions say "CSS custom properties (--color-*, --shadow-*) values" can change. The original uses var(--space-md). That's a custom property for spacing, not color or shadow. We must not change --space-md. We can add new custom properties maybe, but not necessary.

Another concern: The "CONSERVATIVE MODE" and "asymmetric-blocks" target might suggest we should use a bold palette. The original has no colors, so we need to choose a fresh palette. Since it's a "saishi.css" (赛事 = competition/event), maybe sports theme. But we don't know.

But the system prompt says "You are an expert CSS designer in 🛡️ CONSERVATIVE MODE." It wants us to follow the output exactly. The "TARGET STYLE: asymmetric-blocks" is provided for aggressive mode? It says "Layout pattern (Aggressive only)" but this is conservative mode, so we ignore layout patterns. The color palette and effect variant still apply? Yes, the target style includes palette.

Let's choose a palette. The "asymmetric-blocks" palette: "Bold contrasting blocks: each section different background, High contrast borders." But our selectors are for a small screen, and we can apply different backgrounds to each block. For the col-lg-7, maybe no background; for badge, a warning color; for contact cards, a light background with border.

The effect variant "soft-shadows" specifies multi-layer soft shadows with 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12). Large border-radius 12-24px. Smooth transitions 0.3-0.5s ease.

So we can apply exactly those shadow values. Let's do that.

But we must be careful: The original CSS contains no color declarations. If we add color declarations, are we "replacing" or "adding"? The instruction "All color values: background, color, border-color, fill, stroke, outline-color" — means change them if they exist. "CSS custom properties (--color-*, --shadow-*) values" can change. It doesn't say we must add. Yet the goal is to refresh the visual identity. Without any visual properties, the only way is to add.

Let's look at the examples in the instructions: "Same layout, fresh color palette + shadow/radius identity." So we should produce a version that indeed has a fresh color palette and shadow/radius identity. So add them.

Now, let's formulate the output. Keep all original declarations exactly. Add allowed declarations.

Potential issue: If we add `background-color` to `.app-hero-section .row .col-lg-7`, that might change a large column's background and affect visual design, but not layout. It's a decorative property, so allowed. But the hero section column might already have a background from parent; setting a new background might be too bold. We can skip it and instead add maybe a `color`? But color inherits from parent; setting it could be unnecessary. Perhaps we should not add anything to the first rule because it's just a text-align adjustment. But to give a "fresh palette," we could add a `color` to the column? Hmm.

Maybe better to keep minimal: add only to the badge and the contact cards. The col-lg-7 rule is about text-align; adding color might be okay. But if we want to emphasize the asymmetric blocks, we could make that column a different background. But on small screens, the column is full width? Actually col-lg-7 is a Bootstrap column that at large screens is 7/12, but at small screens it's full width stacked. Adding a background to the column could create a block. That aligns with "asymmetric-blocks: each section different background." So we can set background: linear-gradient(...) or solid color. But we need to be careful: changing background of a column might be intended. The selector .app-hero-section .row .col-lg-7 at small screen might contain hero content. A background could be nice.

However, we don't know the existing structure. Adding background-color to a column can be a significant visual change, but it's within the scope of "background" changes. Since there was no background, adding one is allowed? The list says "All color values: background, color, border-color..." meaning those properties are allowed to change. I'd say yes.

But "conservative mode" says "visual identity only" and "same layout". Background doesn't change layout. So okay.

Let's decide on a palette. Since it's a sports/competition site, maybe use a bold contrast: deep navy/teal for hero column, amber/orange for badge, white/light gray for cards with borders. But we don't want to clash. Use the soft-shadows variant.

Let's craft:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, #1e2a4a 0%, #2c3e6b 100%);
        color: #f8f9fc;
        border-radius: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #ffb347;
        color: #1e2a4a;
        border-radius: 24px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: background-color 0.4s ease, box-shadow 0.4s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border: 1px solid #e6eaf2;
        border-radius: 18px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.12);
        transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    }
}

But we added `border: 1px solid #e6eaf2;` — this changes border-width from 0 to 1px, which is a layout change because border-width contributes to element size unless box-sizing border-box. The original padding/margin might not account for border. The rule says "border-color and border-style (NOT border-width)" cannot change? Actually in the MUST CHANGE list, it says "border-color and border-style (NOT border-width)" are allowed to change. But if there was no border, adding one adds border-width. That's not allowed. We should avoid adding border-width. Instead, we can use `outline` or box-shadow to create a border-like effect without affecting layout. Or use `box-shadow: 0 0 0 1px #e6eaf2` as an inset or outside border? That also doesn't affect layout. Or use `outline: 1px solid #e6eaf2; outline-offset: -1px;` But outline is allowed? In MUST CHANGE list: "outline styles (color, type)" but not width? Actually "outline styles (color, type)" — maybe they mean outline-color and outline-style, not outline-width. We could add `outline: 1px solid #e6eaf2` but that includes width. To be safe, avoid adding any width. Use box-shadow for border: `box-shadow: 0 0 0 1px rgba(230, 234, 242, 0.8), 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);` This adds a border-like ring and soft shadows in one property. Does it affect layout? No, box-shadow doesn't affect layout. Good.

Also, `transition: transform ...` implies transform on hover? We didn't add transform. Adding a transition property is allowed, but if there's no transform, it's harmless. But we could add `transform` on hover? That would require a new rule with :hover, which would change selectors? The original selectors don't include :hover, so we cannot add new selectors. We can only modify existing rules. We can't add a :hover rule because that would be a new selector, not allowed. So we can't add transform on hover. But we can still set transition for box-shadow/background-color; those can change on hover via existing Bootstrap hover? But we can't style :hover. So transition might be useless. However, we can still set transition for properties that will change due to media query or something? Not needed. But the effect variant says "smooth transitions" — we can add transition property to the badge and cards, even if hover not defined. It's still a visual property. I think it's acceptable.

But wait, "Only change colors, shadows, radius, transitions, gradients." Adding a transition is explicitly allowed. So yes.

Now, the first