/* ============================================================
   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 CSS with a conservative mode - only visual changes allowed. The original CSS is very small - just a media query with some rules. Let me analyze:

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

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

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

Wait - the constraints say:
- text-align is in the "never change" list (typography)
- font-size is in the "never change" list
- padding can change ±20%

Hmm, but the selector `.app-hero-section .row .col-lg-7 { text-align: center; }` - text-align is listed under "📐 LAYOUT" as never change. So I can't change text-align from center to something else.

But wait - the task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

The issue is this CSS has no colors, shadows, radius, transitions, or gradients in it. It only has:
- text-align: center (layout - can't change)
- font-size: 0.85rem (typography - can't change)
- padding: var(--space-md) (padding - can change ±20%)

So what can I do? I can change the padding slightly (±20%). I can also add visual properties that don't break layout. But I must preserve selectors exactly and keep layout properties.

Hmm. But the instructions say "Only change colors, shadows, radius, transitions, gradients." Since there are none in this file, I have a few options:

1. Add new visual properties (color, background, border-radius, box-shadow, transition) to the existing rules without changing the existing properties.
2. Adjust padding within ±20%.

But I need to be careful: "Every selector character-for-character preserved?" Yes, I keep the selectors.

"display, position, grid-template-*, flex-direction unchanged?" - not present.

"width, height, padding, margin within ±20% of input?" - padding: var(--space-md) - I can change the value but it's a var reference. I could change it to something like var(--space-md) still... or calc(var(--space-md) * 0.9) which is within 20%. Or I could change to a slightly different value.

Actually, since `--space-md` is a custom property defined elsewhere, I don't know its value. Changing padding to another var or calc might be risky. But ±20% is allowed. I could use `calc(var(--space-md) * 0.9)` to reduce by 10%.

Hmm, but that's about it. The rest of the properties are locked.

The best approach given the "dense-dashboard" + "glow-effects" target style: I should add visual properties like:

- For `.app-hero-section .row .col-lg-7`: keep text-align: center. Could add color? But it's a hero section... adding color might be fine.
- For `.app-hero-section .badge.bg-warning`: keep font-size. Could add background, box-shadow glow, border-radius, etc. But `.bg-warning` is a Bootstrap class - adding background-color would override Bootstrap's warning color. Actually `.badge.bg-warning` - the bg-warning class sets background-color. If I add background-color, I'd override it. That's a visual change that's allowed.

Wait - but the rules say I must preserve class names. `.badge.bg-warning` stays as a selector. I can change the background color value.

- For the contact cards: keep padding (possibly adjust). Add box-shadow, border-radius, transition.

Let me think about what makes sense. The target is "dense-dashboard" with "glow-effects". But this is a mobile media query for a hero section, badges, and contact cards. I should add:

- Background colors for the hero text? Maybe not - could break things. But color is allowed to change. However, changing text color for `.col-lg-7` in hero section could be fine.
- Glow shadows for the badge.
- Card glow shadows and border-radius for contact cards.
- Transitions.

But I must be careful: the "NEVER CHANGE" list includes properties like color? No - color IS allowed to change. "All color values: background, color, border-color, fill, stroke, outline-color" are in the MUST CHANGE list.

But the original CSS doesn't have any color properties. I can add them though. The instruction: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

So adding color properties is consistent with the task. Adding box-shadow, border-radius, transition, backdrop-filter, etc. is also fine.

But I need to be careful with layout. Adding box-shadow and border-radius doesn't affect layout. Adding transition doesn't affect layout. Adding color/background doesn't affect layout.

However, there's a subtle issue: if I add `background-color` to `.badge.bg-warning`, Bootstrap's `.bg-warning` sets `--bs-badge-bg` or similar. Overriding might be fine visually.

Let me craft the new CSS:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1e293b;
        text-shadow: 0 2px 12px rgba(59, 130, 246, 0.15);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f59e0b, #f97316);
        box-shadow: 0 0 24px rgba(59, 130, 246, 0.4), 0 4px 12px rgba(30, 41, 59, 0.15);
        border-radius: 12px;
        transition: box-shadow 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: calc(var(--space-md) * 0.9) !important;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(8px);
        border-radius: 14px;
        box-shadow: 0 2px 16px rgba(30, 41, 59, 0.08), 0 0 0 1px rgba(59, 130, 246, 0.06);
        transition: box-shadow 0.3s ease, transform 0.2s ease;
    }
}
```

Wait - `transform` in transition is fine, but adding a `:hover` rule would require adding a selector. Can I add new selectors? The instructions say "Selectors (CRITICAL - HTML is fixed): Class names: keep EXACTLY" - that means I keep existing ones. Adding new selectors could be risky because I'd need to make sure they're valid. The instruction says "Every selector character-for-character preserved?" - preserved means the existing ones stay. Adding new ones like `:hover` pseudo-class is allowed: "Pseudo-classes (:hover, :focus, ::before, ::after)" - it says keep them, but adding new pseudo-class selectors would add new selectors not in the original. 

Hmm, the rules say "Keep ALL selectors" - it doesn't explicitly forbid adding new selectors, but "HTML is FIXED — only colors, shadows, and decorative properties may change." Adding a `:hover` rule is a decorative change. But to be safe, I should avoid adding new selector rules. I can add transition on the base rule so any hover state (from other CSS) transitions smoothly.

Actually, let me reconsider. The safest interpretation: preserve every existing selector exactly, change only property values within the rules, and add decorative properties to those existing rules. Don't add new rules or selectors.

Also need to double check the padding change: `calc(var(--space-md) * 0.9)` - this is a 10% reduction, within ±20%. Good. But is `--space-md` defined? The original uses it, so it must be defined globally. Using calc on it should work in modern browsers.

Wait, but is changing padding even necessary? The task says "width, height, padding, margin within ±20% of input?" - this is a check, not a mandate to change. But the task also says "MAKE MORE DISTINCT THIS ROUND" - the previous attempt didn't change enough. Since there are almost no changeable properties in this file, I should maximize visual distinction through added decorative properties.

Let me also reconsider whether to change `text-align` - NO, it's in the never-change list. Keep it center.

`font-size: 0.85rem` - in never-change list (typography). Keep it.

So my changes:
1. Add color/text-shadow to hero col.
2. Add gradient background, glow box-shadow, border-radius, transition to badge.
3. Adjust padding slightly (within 20%), add background, backdrop-filter, border-radius, box-shadow, transition to contact cards.

But wait - should I add a background to `.app-hero-section .row .col-lg-7`? The hero section likely has its own background. Adding a text color and text-shadow could improve readability and add the glow effect. That's safe.

Hmm, but is `color: #1e293b` appropriate for a hero section? If the hero has a dark background, dark text would be bad. But the target palette says "White cards on slate background" with cool grays #1e293b, #334155, accent blue #3b82f6. Hmm, but I don't know the hero's background. To be safe, maybe I shouldn't set a text color that could clash. But the task says "Colors throughout the file replaced with fresh palette" - the file has no colors, so I need to add them.

Actually, the instruction says "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette." So I should be bold.

Let me look at the original again. This is a fragment - part 2/2 of a file. The rest of the CSS likely defines `--space-md`, hero section colors, warning badge colors, contact card styles, etc. So my changes will override/augment those for mobile.

For the hero col-lg-7: adding a text color might override a set color. Since I don't know the original, I'll use a slate color that fits the dashboard theme. Actually, maybe I should use `color: inherit` to be safe? No, that changes nothing. Let me use a color that fits "cool grays" but with a glow text-shadow. Actually, text-shadow with a blue glow would look good on the hero heading.

Let me think about the badge: `.badge.bg-warning` - Bootstrap warning is yellow/orange. The target palette uses accent blue #3b82f6. But replacing a warning badge's background with blue would be semantically weird (warning = yellow/orange). However, the task says to change colors. I can make it a vibrant amber gradient with blue glow shadow - that matches both warning semantics and the glow variant.

For contact cards: white cards on slate background with glow shadows. Good.

Let me also consider adding `outline` or `border` - border-color is in the must-change list. But adding borders could affect layout (border-width adds to box size unless box-sizing: border-box). Bootstrap sets box-sizing: border-box globally, so borders are fine. But to be safe, I could use `box-shadow` with an inset ring instead of a border, or just add border-radius.

OK here's my plan:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1e293b;
        text-shadow: 0 2px 20px rgba(59, 130, 246, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24, #f97316);
        box-shadow: 0 0 24px rgba(59, 130, 246, 0.45), 0 4px 14px rgba(30, 41, 59, 0.2);
        border-radius: 999px;
        transition: box-shadow 0.3s ease-in-out, filter 0.3s ease-in-out;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: calc(var(--space-md) * 0.9) !important;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(12px);
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(30, 41, 59, 0.08), 0 0 32px rgba(59, 130, 246, 0.12);
        transition: box-shadow 0.3s ease, transform 0.2s ease;
    }
}
```

Wait, I should consider `!important` on padding - the original had `!important`, I must keep it. Yes, I kept it.

Should I keep the badge's border-radius? A pill shape (999px) is a common badge style. Or a medium radius (8-16px) per the target. Let me use 12px to match "medium radius (8-16px)".

Also, I could add a subtle pulsing animation - "Subtle pulsing animations" is in the effect variant. But adding `@keyframes` would require adding a keyframe name. The rules say "@keyframes names (values inside CAN change)" - I can add new keyframes? It says "Preserve" for the list: "@keyframes names (values inside CAN change)". It doesn't forbid adding new keyframes, but it's safer to avoid adding new selectors/rules. However, adding an animation to the badge would be a nice glow effect. Hmm.

The task says "Only colors, shadows, and decorative properties may change." Adding an animation is decorative. But to be conservative and avoid adding new at-rules, I could use `transition` only. Actually, adding `@keyframes` is allowed per the rules? Let me re-read: "🎬 ANIMATION & MEDIA: @keyframes names (values inside CAN change)" - this means if the original had keyframes, I must keep the names but can change values. It's under "NEVER CHANGE" section but with a parenthetical that values can change. Adding new keyframes isn't explicitly forbidden. But "NEVER CHANGE" means the structure of keyframes (names) stays. Adding new ones might violate "Keep ALL selectors" spirit.

I'll avoid adding new @keyframes to be safe. The transition on the badge will create a subtle glow change on hover (from other CSS rules that might trigger hover). Actually without a hover rule, transition does nothing. Hmm.

Let me reconsider: I could add a `:hover` pseudo-class rule for the existing selectors. Example:

```css
.contact-channels-section article:hover {
    box-shadow: 0 0 32px rgba(59, 130, 246, 0.6);
}
```

Is this allowed? The rules list "Pseudo-classes (:hover, :focus, ::before, ::after)" under "NEVER CHANGE" as "Selectors (CRITICAL - HTML is fixed)". It says "keep EXACTLY" for class names. Adding a new rule with `.contact-channels-section article:hover` adds a selector that wasn't there. This might be considered changing selectors. To be maximally safe, no new rules.

OK, I'll stick with modifying only the three existing rules, adding decorative properties within them.

Let me also double-check: padding `calc(var(--space-md) * 0.9)` is within ±20%. The original `var(--space-md)` could be, say, 16px. 0.9 * 16 = 14.4px, which is a 10% reduction. Fine.

Actually, wait - do I even need to keep `!important`? Yes, because the original had it, and "padding, margin (keep similar values, ±20% maximum)" - the important flag is part of the declaration. I'll keep it.

One more consideration: The `.badge.bg-warning` rule in Bootstrap uses `--bs-badge-color` for text color. The badge text might be dark (e.g., #000) on a warning background. If I change the background to a darker amber gradient, the dark text still works. Good.

Also, `app-hero-section .badge.bg-warning` - a badge in the hero. With glow shadow, it pops. Good.

Now, is `backdrop-filter` safe? It's decorative, listed in the must-change list. It doesn't affect layout. Fine.

Let me also think about whether to change `color` for the hero col-lg-7. If the hero section already has white text (e.g., on a dark hero image), setting `color: #1e293b` would break it. Hmm. But target style says "Cool grays #1e293b, #334155, accent blue #3b82f6" for text on slate background. A hero section likely has its own background. Without knowing it, setting a dark color on the column text could be risky.

But the task says: "Colors throughout the file replaced with fresh palette?" - self-check. The file has no colors, so to satisfy "make it MORE distinct," I should add colors. I'll use `#1e293b` for the hero text with a subtle glow text-shadow. This matches the dense-dashboard palette.

Actually, let me reconsider - maybe use a slightly lighter slate for the text, or keep the accent. I'll go with `#1