/* ============================================================
   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 CSS block with a fresh visual identity. Let me analyze the original CSS:

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

This is a media query block with three rules. However, I need to be careful:

1. The selectors must be preserved exactly:
   - `@media (max-width: 575.98px)` - breakpoints cannot change
   - `.app-hero-section .row .col-lg-7` - selector must stay
   - `.app-hero-section .badge.bg-warning` - selector must stay
   - `.contact-channels-section article, .contact-quick-section .contact-card` - selector must stay

2. Layout properties that CANNOT change:
   - `text-align: center` - this is in the "never change" list (text-align)
   - `padding: var(--space-md) !important` - padding can change ±20% max... but this uses a CSS variable. I could change the variable value if `--space-md` is defined elsewhere, but since I don't see the variable definition, I should keep it. Actually wait — the instructions say "CSS custom properties (--color-*, --shadow-*) values" can change. `--space-md` is a spacing variable, not color/shadow. And padding can only change ±20%. Since `--space-md` is a custom property, I shouldn't change its value because it would affect layout beyond tolerance perhaps. Actually, I don't know the value of `--space-md`. Since the HTML is fixed and layout must be preserved, I should keep `padding: var(--space-md) !important` as-is.
   - `font-size: 0.85rem` - font-size cannot change.

3. What CAN I change in this specific block?
   - Nothing in these rules actually uses colors, shadows, radius, transitions, gradients, filters, opacity, outline, border-color, caret-color, accent-color... 

Hmm. This is a tough situation. The original CSS only contains layout/typography properties that are in the "never change" list. The instructions say to only output the rewritten CSS, but if the CSS has no visual properties to change, what do I do?

Let me re-read the constraints:
- ✅ MUST CHANGE: colors, shadows, radius, gradients, transitions, filters, opacity, outline, border-color, border-style, caret-color, accent-color, CSS custom properties (--color-*, --shadow-*) values
- 🔒 NEVER CHANGE: selectors, display, position, grid, flex, width, height, padding (within ±20%), margin, gap, justify/align, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, object-position, text-align, vertical-align, typography, animation names, @media breakpoints, @import, @font-face, @supports, @charset, animation-name.

The original CSS genuinely has nothing that's on the "must change" list. The rules are:
1. `text-align: center` → layout (never change)
2. `font-size: 0.85rem` → typography (never change)
3. `padding: var(--space-md) !important` → spacing variable (padding can change ±20%, but the variable value is unknown; changing `--space-md` would affect layout in other places, so I shouldn't)

So the safest and most instruction-compliant output is to return the exact same CSS, because changing anything would either break layout or violate the constraints. The instructions emphasize preserving layout exactly, and they say "Only change colors, shadows, radius, transitions, gradients." Since none exist in this block, the faithful rewrite is to keep it as-is.

However, the user's prompt says "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round." This suggests they expect changes. But the original CSS block simply has no visual properties to change. I cannot invent selectors or add new rules — the instructions say "preserving ALL selectors and layout exactly" and "Only the rewritten CSS, preserving ALL selectors and layout exactly." Adding new rules would be changing the CSS structure, which is not allowed.

Actually, wait. Let me reconsider. Could I add properties within existing rules? For example, in the media query, for `.app-hero-section .badge.bg-warning`, I could add color, background, box-shadow, etc. But the instruction says the HTML is fixed and I must not change the layout structure. Adding new visual properties to an existing rule wouldn't change the layout structure (display, position, sizes stay the same). However, it could potentially change the visual appearance in ways that the original author didn't intend.

Hmm, but the task is explicitly "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." This means I'm allowed to change color/shadow/radius/transition/gradient properties wherever they appear — but the original has none. Adding them would be "changing" the CSS in a way that goes beyond what the original specified.

The instruction also says "First character = first CSS character" and "Goal: same layout, fresh color palette + shadow/radius identity." Since the original CSS has no color/shadow/radius, I cannot apply a fresh palette to it without adding new declarations.

Let me think about what the safest interpretation is. The strictest reading: output exactly the original CSS because there's nothing to change. That satisfies "same layout" perfectly but doesn't satisfy "make colors more distinct."

Another interpretation: within the media query, I can add color/background/box-shadow/border-radius to the existing selectors to achieve the visual refresh while preserving the layout properties exactly. The never-change list says "display values stay," "padding stays within ±20%," etc. It doesn't forbid adding new property declarations. But it says "Keep ALL selectors and layout exactly as-is." Adding declarations is technically keeping selectors and layout as-is, and only adding visual properties.

But would that be faithful? The rule `.app-hero-section .badge.bg-warning` is a badge in a hero section. Adding colors to it would make it look different. Given the "dense-dashboard" target style with Blue/White palette and gradient-rich variant, I could:

- For `.app-hero-section .badge.bg-warning`: add a gradient background, box-shadow, border-radius, color adjustments.
- For `.contact-channels-section article, .contact-quick-section .contact-card`: add a background, border-radius, box-shadow, transition.

But wait — the original `padding: var(--space-md) !important` uses `!important`. If I add a background with `!important`? No, I shouldn't use `!important` unless needed. Adding non-important declarations alongside an `!important` padding is fine.

However, adding new property declarations to a rule could be seen as altering the CSS structure beyond "visual-only." The prompt explicitly says: "Only change colors, shadows, radius, transitions, gradients." This phrasing suggests that the properties that are forbidden to change are everything else (layout, typography). It doesn't necessarily forbid adding visual properties.

Hmm, but is adding a declaration "changing" an existing value? The original rule:

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

If I add:

```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background: linear-gradient(...);
    border-radius: 12px;
    box-shadow: ...;
}
```

This changes the visual appearance. The padding is unchanged. Selectors unchanged. Layout unchanged. This seems within the spirit of the task.

But then, in "dense-dashboard" style, the cards are "White cards on slate background." The hero badge `bg-warning` would be a warning/yellow badge. In the target palette, accent blue #3b82f6 is primary. `bg-warning` is Bootstrap's warning class. Changing it to blue might be weird since `bg-warning` implies warning semantics. But it's a visual refresh; I could keep it amber but make it gradient-rich with an amber-to-orange gradient, plus a warm glow shadow. That preserves semantic color while refreshing the look.

Actually, let me re-read the constraints more carefully:

"✅ YOU MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow ..."

This says "All color values" must change. But there are no color values in this file. So it's impossible to comply literally.

"⚠️ Previous attempt didn't change enough." — This indicates the previous output likely was too conservative. The user is frustrated that the output was almost identical to the input.

Given this, I think the intended behavior is to inject a fresh visual identity into the existing rules by adding color/shadow/radius/gradient declarations (and possibly modifying the `padding` variable). But the padding variable `--space-md` — I don't know its value. I could override it within the media query? No, that doesn't make sense.

Actually, wait. Could the original file contain more CSS than this block? The user says "File: assets/css/saishi.css#块2/2" which means this is block 2 of 2. The first block probably contained the bulk of the CSS with colors, shadows, etc. This second block is the responsive part. So maybe the first block got the major visual refresh, and this block needs some matching adjustments.

Given the fragment shown, I have very little to work with. Let me consider the most likely evaluation criteria:

1. All selectors preserved exactly.
2. All layout properties preserved exactly.
3. Visual properties (colors, shadows, gradients, border-radius, transitions) changed or added to create a distinct new look.
4. No markdown fences, no explanations.

I'll go with adding a rich set of visual properties to the existing rules within the media query, while keeping the layout properties exactly as they are.

Let me design the changes:

### Rule 1: `.app-hero-section .row .col-lg-7`

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

`text-align: center` must stay. Can I add anything? This is a column container. I could add:
- `color: var(--color-text, #e2e8f0)`? But changing text color in the hero section could affect readability. The target palette uses cool grays on slate. Actually, the hero section in dense-dashboard is likely a slate background. But I don't know the context. Adding color might be risky but it's a "visual" change.

Hmm, but what about `background`? The `.col-lg-7` is a grid column; adding a background to it would visually alter the section. It might be appropriate for a dense-dashboard card look. But the original had no background, so adding one could be a big visual change. The task says "Make colors, shadows, and radius MORE distinct this round." So being bold is desired.

Still, changing a plain column into a card could break the design (e.g., if there are multiple columns, adding backgrounds to just one would look odd). I need to be careful.

Let me think about what's actually in the hero section. `.app-hero-section .row .col-lg-7` is the left column (7 cols) in a Bootstrap row, typically containing text content. In the "dense-dashboard" style, hero sections are usually on a dark slate background. Adding a subtle text color and maybe a text-shadow could enhance it.

Actually, I think the safest "must change" additions for a column that centers text:
- `color: #e2e8f0` (slate-200) for text
- `text-shadow: 0 2px 4px rgba(15, 23, 42, 0.3)` for depth
- Maybe `background`? No, I'll skip background here.

But wait, changing text color of a column that contains headings might conflict with heading colors defined elsewhere. If the headings have their own color, the inherited color would be overridden. So setting `color` on the column is a safe fallback.

### Rule 2: `.app-hero-section .badge.bg-warning`

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

`font-size: 0.85rem` must stay. I can add:
- `background: linear-gradient(135deg, #fbbf24, #f59e0b)` — rich amber gradient (keeps warning semantics)
- `color: #1e293b` — dark slate text for contrast
- `border-radius: 999px` — pill shape (badges usually pill; but Bootstrap badges already have `border-radius: 0.375rem`. Changing to 999px makes it more distinct)
- `box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35)` — warm glow
- `border: 1px solid rgba(251, 191, 36, 0.4)` — gradient border feel? Not exactly, but a subtle ring.
- `transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);` — smooth transition. But `transform` transition implies a hover state that changes transform; there's no hover rule here. Adding a transition alone is fine.

Actually, `border-width` can't change? "border-color and border-style (NOT border-width)" — so I can set border-color and border-style but not change the width. Bootstrap's `.badge` has `border: 1px solid transparent`? Let me recall: Bootstrap 5 `.badge` has no border by default. Adding a border would add 1px to the box size, which changes layout slightly. But borders don't affect layout if `box-sizing: border-box` is set (Bootstrap sets `box-sizing: border-box` globally). So adding `border: 1px solid` wouldn't change the rendered layout with border-box. However, the instruction says I can change border-color and border-style, but NOT border-width. So I cannot add `border: 1px solid` because that sets width. I could set `border-style: solid` and `border-color: ...` but if there's no border-width, it won't show. Also adding a border where none existed might be considered a layout change. I'll skip borders.

I'll use box-shadow to create a ring effect instead: `box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2), 0 4px 12px rgba(245, 158, 11, 0.35)`. The `0 0 0 2px` creates a ring without affecting layout.

### Rule 3: `.contact-channels-section article, .contact-quick-section .contact-card`

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

`padding: var(--space-md) !important` must stay. I can add:
- `background: linear-gradient(145deg, #ffffff, #f1f5f9)` — white cards on slate (dense-dashboard style). But wait, if the cards already have a background, this would override it. That's the point — change colors. But I don't know the original. Given "white cards on slate background" target, using a white gradient is appropriate.
- `border-radius: 12px` — needs to be distinct.
- `box-shadow: 0 4px 16px rgba(30, 41, 59, 0.08), 0 1px 3px rgba(30, 41, 59, 0.06)` — soft layered shadows.
- `transition: box-shadow 0.45s cubic-bezier(0.4, 0, 0.2, 1), transform 0.45s cubic-bezier(0.4, 0, 0.2, 1)` — smooth transitions.
- Maybe `border-top: 3px solid` — no, border-width can't change. Skip.

Now, the gradient-rich variant also mentions "Gradient borders via border-image." But border-image would require border-width to be set (to show). Without border-width, border-image shows nothing. And I'm not allowed to change border-width. I could use a background gradient plus a border-image... but border-image with `fill` might be tricky. Actually, `border-image` doesn't work with `border-radius` (it ignores radius). And we can't set border-width. Skip border-image.

Should I use `background-clip: padding-box`? That's more advanced; probably unnecessary.

Also, should I change `--space-md`? The instruction says I can change "CSS custom properties (--color-*, --shadow-*) values". `--space-md` is not a color or shadow variable, so I must NOT change it. Keep it as-is.

Now, "gradient-rich" says "Smooth long transitions (0.4-0.6s cubic-bezier)". I'll use 0.45s cubic-bezier(0.4, 0, 0.2, 1).

The `@media (max-width: 575.98px)` breakpoint must stay exactly.

Let me also consider whether to keep `text-align: center` in rule 1. Yes, it's explicitly in the never-change list.

Also `font-size: 0.85rem` in rule 2 — never change.

Also `padding: var(--space-md) !important` — padding variable, keep. Although padding changes ±20% are allowed, the variable itself is likely defined in a `:root` block elsewhere. Changing it