/* ============================================================
   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;
    }
}

The user wants me to rewrite a small CSS snippet following the "dense-dashboard" style with "gradient-rich" effects. The original CSS is a media query with three rules:

```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;
    }
}
```

Let me analyze what I can change:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — `text-align` is a typography property but is listed under "never change" (text-align, vertical-align). Actually wait, let me check. The never change list includes "text-align, vertical-align" under 📐 LAYOUT. So `text-align: center` must stay. The selector must stay. But there are no colors to change here. I could add transitions, but that might be weird. Actually the task says "Only change colors, shadows, radius, transitions, gradients." Since this rule has no visual color properties, I shouldn't add things that change layout. But I could add a transition? Hmm, transitions are allowed to change. But is that wise? The conservative mode says I can change transition timing, easing, duration. Adding a transition to text-align would be odd but not layout-breaking. I'll be careful.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — `font-size` is in the never-change list. So this stays. Could add color/gradient? A badge bg-warning — but the class is `bg-warning` from Bootstrap, which sets background-color. I shouldn't change the class definition, but I can add a `background` gradient to this selector? That would change the visual identity. But wait — adding a background to this selector would override Bootstrap's `.bg-warning` background-color. That's within "visual identity only" since background-color is a color value. But I must be careful: the original rule only sets `font-size`. I can add color-related properties. Is that allowed? The task says "Refresh the visual identity WITHOUT changing layout structure or class names." and "✅ YOU MUST CHANGE (visual identity only): All color values: background, color, border-color..." — "MUST CHANGE" means I should change all color values in the file. There are no color values in this file. So I should probably add some visual properties to fulfill the target style. But conservative mode says "only colors, shadows, and decorative properties may change." Adding decorative properties is allowed.

Hmm, but the instruction also says "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." So adding gradients/shadow transitions to these rules might be acceptable.

However, I need to be careful. The safest interpretation: rewrite the CSS, preserving selectors and all non-visual declarations, but introduce the new visual identity. Since there are no existing colors, I can add a background gradient to the badge, maybe a text-shadow or transition, and for the padding rule, I can't change padding much (max ±20%, but `var(--space-md)` is a custom property — I could change the value of `--space-md`? No, that would affect layout across the whole site. But padding is within ±20% allowed. `var(--space-md)` — I shouldn't change it because it's a variable reference that I don't control. The original says `padding: var(--space-md) !important;` — I must keep padding value similar. Better to keep it exactly.

Let me think about what a "gradient-rich" dense-dashboard style would do here.

For the badge:
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);  /* border-width must be same? border-width is never change. Original had none. Adding a border would add layout? border-box sizing? box-sizing is never change, but if box-sizing is border-box, adding a border would reduce content area. Don't add borders. */
}
```

Actually, adding border-width would change layout if box-sizing is content-box. Avoid adding borders. Adding background and box-shadow is safe (box-shadow doesn't affect layout).

For the hero section centered text, maybe nothing to add. But I could add a transition to color/background for hover states? There's no hover here. Adding `transition` is harmless.

For the contact cards padding rule: padding must stay similar. `var(--space-md)` is maybe 16px. I should keep it. Could I add `border-radius` and `box-shadow`? The selector matches elements that have padding. Adding border-radius and box-shadow would be decorative. But careful: `.contact-channels-section article` and `.contact-quick-section .contact-card` are cards; adding radius/shadow fits dense-dashboard. But wait — the target style says "White cards on slate background". The original CSS here doesn't set backgrounds. Hmm.

Actually, let me reconsider the scope. This is a fragment (#块2/2) — only the media query at max-width 575.98px. The rest of the stylesheet is elsewhere. My job is to refresh this fragment. If I add a lot of new declarations, I may conflict with the rest of the stylesheet. Conservative approach: keep the existing declarations identical, and only alter/embellish visual properties that are safe.

Given the instruction "✅ YOU MUST CHANGE (visual identity only): All color values..." — there are no color values. So there's nothing I *must* change. But the target style wants gradient-rich. I'll add decorative properties that don't break layout:

For `.app-hero-section .badge.bg-warning` in mobile: 
- Keep `font-size: 0.85rem;`
- Add `background: linear-gradient(135deg, #fbbf24, #d97706);` (this overrides bg-warning yellow with a richer gradient — still warm amber).
- Add `box-shadow: 0 2px 12px -2px rgba(217, 119, 6, 0.4);`
- Add `transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);` — wait, transform is layout? `transform` is not in the never-change list, but adding transform on the element would visually move it. Actually the never-change list doesn't include transform. But adding transform could be considered visual. Hmm, better not add transform to avoid weirdness. Just box-shadow and background transition.

For `.app-hero-section .row .col-lg-7`: keep `text-align: center;`. I could add nothing. Maybe add `transition`? Not needed.

For `.contact-channels-section article, .contact-quick-section .contact-card`: keep `padding: var(--space-md) !important;`. Add:
- `border-radius: 12px;` — wait, border-radius is in the "must change" list but adding it might conflict with existing card styles. Actually adding border-radius to cards is fine.
- `box-shadow: 0 4px 16px -4px rgba(30, 41, 59, 0.12);`
- `background: linear-gradient(180deg, #ffffff, #f8fafc);` — "White cards on slate background" — but if the original card had a different background, overriding with white gradient changes visual. That's within scope.
- `transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);`

But wait — the selector also includes `.contact-channels-section article` — articles inside contact channels. Adding white background gradient might look fine.

However, I worry about conflicting with the original full stylesheet. The instruction says "Refresh the visual identity" — so adding these is the point.

Let me also consider: `padding: var(--space-md) !important;` — I'm allowed to change padding within ±20%. `--space-md` is typically 16px. I could change to `calc(var(--space-md) * 0.9)`? That's messy. Better keep the variable. Or change to `padding: 0.9rem !important;` if `--space-md` is 1rem → 0.9rem is within ±20%? Actually 1rem = 16px, 0.9rem = 14.4px, that's -10%, allowed. But I don't know the actual value. Safer to keep `var(--space-md)` exactly. Actually the constraint says "padding, margin (keep similar values, ±20% maximum)". Keeping exactly is safest. I'll keep it.

Should I add a `--space-md` override? No — that would affect everything, too invasive.

Now about the media query itself: I must keep `@media (max-width: 575.98px)` exactly.

Let me draft:

```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;
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
        box-shadow: 0 2px 12px -2px rgba(217, 119, 6, 0.45);
        transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
        border-radius: 14px;
        box-shadow: 0 4px 20px -6px rgba(51, 65, 85, 0.18), 0 1px 4px -1px rgba(30, 41, 59, 0.06);
        transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
}
```

Hmm, `transform` in transition is fine (transition property doesn't apply transform unless it changes). Adding `transition: transform` without a transform change does nothing. But it sets up for hover. There's no hover rule here. I'll keep transition simple.

Wait, should I use the target style's colors? "Cool grays #1e293b, #334155, accent blue #3b82f6. White cards on slate background." So for the badge, maybe accent blue? No — the class is bg-warning, so amber gradient is appropriate. The "gradient-rich" variant says linear/radial gradients, multiple stops, smooth long transitions (0.4-0.6s cubic-bezier).

I'll use a cubic-bezier like `cubic-bezier(0.4, 0, 0.2, 1)` which is common. Duration 0.5s.

For the contact cards, use slate-tinted shadows: `rgba(30, 41, 59, ...)`.

For the badge, maybe also add `text-shadow` for the label text? Badge text is inside. Adding `text-shadow: 0 1px 2px rgba(0,0,0,0.15)` could improve readability. But bg-warning is amber with dark text, so a subtle dark shadow could be ok. Actually Bootstrap's `.badge` with `.bg-warning` has `color: #000` or similar. Adding dark text-shadow might look smudgy. Better a subtle white glow? Hmm. I'll skip text-shadow or add a very subtle one.

Also I could add `border-radius` to the badge? Bootstrap badges already have border-radius. Adding `border-radius: 10px` would round the badge pill more. That's fine — visual rounding. But careful: Bootstrap's badge default is `border-radius: 0.375rem` (or pill). Overriding to `10px` is fine, but on a small badge 10px could make it a pill. Acceptable.

Actually, keep it simpler and safer. Let me not add too much. Let me reconsider: the original snippet has no visual declarations at all except font-size and padding. The "dense-dashboard" style is mostly about color. Adding gradients to badges and cards fulfills the task.

But hold on — is `text-align` really forbidden to change? Yes: "text-align, vertical-align" under "NEVER CHANGE". Good, keep `center`.

Also "font-size: 0.85rem" — must keep. Good.

Let me also consider: should I add a `background` to the `.col-lg-7` rule? That would be weird (the whole column gets a background). No.

Final check on forbidden list:
- Selectors: preserved exactly.
- `text-align: center` kept (layout/typography).
- `font-size: 0.85rem` kept.
- `padding: var(--space-md) !important` kept, `!important` kept (important flag is part of the declaration).
- `@media (max-width: 575.98px)` kept.
- Added `background`, `box-shadow`, `border-radius`, `transition`, possibly `text-shadow` — all allowed.

One concern: adding `background` to `.contact-quick-section .contact-card` and `.contact-channels-section article` — if the original had `background-color` set elsewhere, this gradient overrides it. That's the visual refresh.

Let me also add a `backdrop-filter`? No, not appropriate.

Should I decorate the `.app-hero-section .row .col-lg-7` rule with anything? The target style "gradient-rich" might want a text-shadow? No — text-align center is for a hero text block. Adding text-shadow to the hero text would be a visual change. But we don't know what's inside. The selector targets the column; adding text-shadow to a column applies to all text inside. In a mobile hero section, maybe there's a heading. Adding text-shadow could be risky. I'll leave that rule untouched.

Actually, to "change something" in each block, I might add `transition` to the col-lg-7? Transitions on text-align are pointless. Better leave it.

Wait — is it okay if one rule has no changes? Yes. The instruction says "Only change colors, shadows, radius, transitions, gradients" — I'm not forced to change every rule.

Let me refine the badge gradient: multi-stop amber:
`linear-gradient(135deg, #fcd34d 0%, #f59e0b 45%, #d97706 100%)`.
Shadow: `box-shadow: 0 2px 8px -2px rgba(217, 119, 6, 0.5), 0 1px 3px rgba(30, 41, 59, 0.08);`.

Badge border-radius: maybe `border-radius: 999px`? Bootstrap badge might already be pill-shaped if `.rounded-pill`. But default badge is not pill. Dense-dashboard would use slightly rounded: `border-radius: 6px`. Hmm. Actually `badge.bg-warning` — I'll set `border-radius: 8px` for a modern rounded chip.

Also add `text-shadow: 0 1px 1px rgba(30, 41, 59, 0.12);` — subtle.

For the cards:
`background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);`
`border-radius: 14px;`
`box-shadow: 0 8px 24px -8px rgba(30, 41, 59, 0.15), 0 2px 6px -2px rgba(30, 41, 59, 0.08);`
`transition: box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s cubic-bezier(0.4, 0, 0.2, 1);`

The padding stays.

Now, wait — the rule `.contact-channels-section article, .contact-quick-section .contact-card` has `padding: var(--space-md) !important`. If I add `border-radius` to an article, and the article has a background, the radius will clip the background nicely. Good.

Should I use `border-image` for gradient borders? The effect variant mentions "Gradient borders via border-image". But applying border-image requires setting border-width, which is forbidden (border-width in never-change). Actually the never-change list doesn't explicitly say border-width... let me re-check. Original at the very top: "🔒 NEVER CHANGE (would break HTML layout): ... border-width" — I didn't see it in the provided list. Let me re-read the user's list.

The user's list under "NEVER CHANGE" includes:
- selectors
- display, position, grid stuff, flex stuff
- width, height, min/max, padding, margin, gap, justify-content, align-items, align-self, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit/position, text-align, vertical-align
- typography: font-family, font-size, font-weight