/* ============================================================
   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 file (saishi.css) with visual changes only. The original CSS is:

```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 small snippet. The constraints say:
- I must change colors, shadows, radius, transitions, gradients, etc.
- I must NOT change layout properties (display, position, width, height, padding, margin within ±20%, etc.)
- I must NOT change typography (font-family, font-size, font-weight, line-height, etc.)
- I must keep all selectors exactly.

But this CSS block only contains:
1. `text-align: center;` — text-align is in the "never change" list.
2. `font-size: 0.85rem;` — font-size is in the "never change" list.
3. `padding: var(--space-md) !important;` — padding is in the "never change" list, though ±20% allowed. But it uses a CSS variable. I could change the variable value? But the variable definition isn't in this file block.

Hmm. The block is very small and has very few visual properties that I can change. Actually, there are none that are safe to change except maybe the `padding` value within ±20%? But padding is "keep similar values, ±20% maximum". `var(--space-md)` is a variable reference. I can't know its value.

Wait — the instructions say I'm a CSS designer in conservative mode. The target style is "masonry-flow" with "glow-effects". But the original CSS snippet is just a media query with three rules. There's nothing here about cards, shadows, etc.

Let me re-read: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

Given the constraints, I need to make changes that are allowed. But the only properties present are `text-align`, `font-size`, and `padding`. All three are in the "never change" list. However, the instructions say padding can vary ±20%.

But `padding: var(--space-md)` — if I change it to something else, I'd be changing padding. I could change it to `calc(var(--space-md) * 1.2)` to be within 20%? That seems overkill.

Also for `font-size: 0.85rem` — that's typography, explicitly forbidden. `text-align` — layout, forbidden.

This is tricky. The safest approach given the strict rules: the output CSS should be identical because there's nothing allowed to change. But the mission says "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette."

I think the intent of this test is to see if I can find creative ways to add visual changes while respecting the constraints. Since the original CSS has no colors, shadows, or radius, I could add new properties like `box-shadow`, `border-radius`, `color`, `background`, etc. But adding properties changes the visual identity without changing layout. The "never change" list doesn't say I can't ADD new declarations. It says don't change listed properties. Adding new properties like `box-shadow` or `border-radius` to existing rules would be a visual change and is allowed.

However, the rules say "Selectors: keep EXACTLY". So I keep the selectors. I can add declarations to existing rules.

For rule 1: `.app-hero-section .row .col-lg-7 { text-align: center; }` — I could add `color`, maybe a subtle text-shadow? But that changes hero text color. It's allowed since color is supposed to be changed.

For rule 2: `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — I could add `box-shadow`, `border-radius`, `background`, etc. But `.badge.bg-warning` is a Bootstrap badge with bg-warning. Adding a glow shadow in accent color would fit.

For rule 3: `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — I could add `border-radius`, `box-shadow`, `background`, `border` color, etc. Adding glow effects would fit the variant.

But wait — the constraints say: "border-color and border-style (NOT border-width)" can change. "outline styles (color, type)" can change. "filter", "backdrop-filter", "opacity", "caret-color", "accent-color" can change.

Given the target style (masonry-flow, glow-effects), I should add a fresh palette with glows.

But hold on — is it acceptable to add new declarations to existing rules? The output instructions say: "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." Adding declarations doesn't change selectors or layout. So yes.

Also, since it's a small snippet, I could add an `@media` block with the same breakpoint? No, @media query breakpoints are in the never-change list ("@media query breakpoints (conditions only)"). I can't add new media queries? It says I can't change breakpoints, but adding a new media query might be considered changing the structure. Better not add any.

Actually, "animation-name (values like duration/timing CAN change)" — I could change animation values but there's no animation here.

Let me think about what "conservative mode" means here. The user says: "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette."

So the expected behavior is to output a meaningful visual refresh. If I just output the same CSS, I fail. I need to add visual properties.

Let me craft a fresh palette. Pinterest-like: white cards, soft shadows on light gray bg, accent strips, glow effects. Palette ideas:

- Background: #f8f9fa (light gray) or a soft warm gray #faf7f5
- Card white: #ffffff
- Accent: rose/pink (#e60023 is Pinterest red) or a modern indigo/violet. Let's use a rich accent like #6366f1 (indigo) or #e11d48 (rose). Since glow effects requested: `0 0 24px rgba(accent, 0.4)` and halo on hover `0 0 32px rgba(accent, 0.6)`, medium radius 8-16px.

Let's pick:
- Accent primary: #f43f5e (rose-500) or #e11d48 (rose-600). For Pinterest-like, a coral/rose accent works. But could also be indigo. Let's go with a warm rose/coral: #ef4444? Hmm.

Let me define a cohesive palette:
- Primary accent (for badges/articles/cards): #ff6b6b (soft coral) or #f0595c. Use rgba(255, 107, 107, ...) for glows.
- Headings color: #1f2937 (dark slate)
- Body text: #4b5563
- Card background: #ffffff
- Page background: #f9fafb

Since rule 1 is hero section col, I can set a text color and a subtle text-shadow, maybe a drop-shadow.
Rule 2 is badge with bg-warning — Bootstrap's bg-warning is yellow (#ffc107). I can add a glow box-shadow in a warm accent, border-radius, border color, maybe a background gradient overlay? But bg-warning is a Bootstrap utility class; adding `background:` would override it. The original snippet just sets font-size. I can add `box-shadow: 0 0 20px rgba(255, 193, 7, 0.5); border-radius: 999px;` etc. Actually keep it subtle.

Rule 3 is contact cards — I can add `background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(..., 0.1), 0 0 0 1px rgba(..., 0.05); transition: box-shadow 0.3s ease;` etc.

But adding `transition` on padding rule? The selector targets articles and contact cards. Adding a box-shadow and transition is fine.

Also, the padding is `var(--space-md) !important`. I shouldn't change it, but I could wrap it: `padding: var(--space-md) !important;` stays. The instructions say padding within ±20%. `var(--space-md)` is unknown, so I leave it as-is to be safe.

Wait, could I add `outline` or `border` declarations? The HTML is fixed; adding a border might change layout because border-width adds to box size if box-sizing is content-box. But the original CSS likely has Bootstrap's box-sizing: border-box globally, so borders wouldn't change size. Still, adding border-width is technically a layout change? The forbidden list says "border-color and border-style (NOT border-width)" — so border-color and border-style are allowed to change, but border-width is not mentioned as forbidden either... Actually it's implicitly: "border-color and border-style (NOT border-width)" means you can change color/style but not add/change width. Adding `border: 2px solid ...` would change border-width, which is risky. I'll avoid adding border-width. I could add `box-shadow` to simulate borders, or `outline` (outline doesn't affect layout). Outline is allowed: "outline styles (color, type)" can change. But adding an outline means adding a new property — I think that's fine.

Let me keep it clean: add background, color, border-radius, box-shadow, transition, text-shadow where appropriate.

Now the tricky part: rule 1 `.app-hero-section .row .col-lg-7 { text-align: center; }` — text-align must remain center. I'll keep it and add:
- `color: #1f2937;` (or maybe `#111827`)
- `text-shadow: 0 2px 8px rgba(255, 255, 255, 0.6);`? A subtle white glow? Or a soft drop shadow.
- Maybe `animation`? There's no animation originally, but I can add one. However, I'd need @keyframes, and adding @keyframes is allowed? The never-change list mentions "@keyframes names (values inside CAN change)" — that implies existing keyframes. Adding a new @keyframes rule would be adding a new rule, which might be okay but it's not "preserving all selectors exactly" — it's adding new selectors. Risky. Better avoid adding keyframes.

I'll avoid adding new keyframes or media queries. Just add declarations to existing rules.

Let me design:

Fresh palette: "Coral dusk" — light gray background like #faf9f7, cards white, accent coral/rose #f2709c or #ff5e7a, with teal secondary? Let's be cohesive.

Actually target style says "Pinterest-like: white cards, soft shadows on light gray bg". Pinterest's accent is red #e60023. Glow effects in accent color.

Let's use:
- Card surface: #ffffff
- Card shadow: layered soft gray + accent glow
- Accent: #e60023 (Pinterest red) or a softer rose #f43f5e. For glow, rgba(230, 0, 35, 0.35).

Rule 1 (hero col):
```css
.app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #27272a;
    text-shadow: 0 1px 12px rgba(244, 63, 94, 0.12);
}
```

Rule 2 (badge):
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    border-radius: 999px;
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.45), 0 4px 12px rgba(245, 158, 11, 0.25);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}
```
Wait, `transform` is not in the forbidden list (it's not listed at all). Actually the forbidden list doesn't mention `transform`. But adding a transform to a badge could change layout slightly. On hover? I shouldn't add :hover rules because there's no :hover in the original. Adding a new selector with :hover would violate "Selectors: keep EXACTLY". So no :hover. But `transition` is fine even if there's no hover.

Hmm, but if I add `transition: box-shadow 0.35s ease, transform 0.35s ease;` and no hover state, transform never changes. Better to only transition box-shadow, or add `transition` for `box-shadow, border-radius`. Actually transition with no state change is useless but harmless. I could add a `transition` that covers color/box-shadow in case there's a hover elsewhere (Bootstrap might have hover on badges from other CSS). That's fine.

Rule 3 (articles/cards):
```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.6), 0 0 24px rgba(244, 63, 94, 0.18);
    transition: box-shadow 0.4s ease;
}
```

But wait — `background: #ffffff` on `.contact-channels-section article` — the article might already have a background from another stylesheet. That's fine, we're refreshing.

But adding a solid background to an article could hide a background image if there was one. The original CSS doesn't set one, so it's fine.

Also, the rounded corners: medium radius 8-16px. 14px good.

Glow shadow: `0 0 24px rgba(accent, 0.4)` — for accent #f43f5e, rgba(244, 63, 94, 0.4). I'll use a slightly softer version in the layered shadow.

Also, `backdrop-filter`? Could add `backdrop-filter: blur(0)` — no, that's pointless. Skip.

Now, I want to be careful about the `!important` on padding: I need to keep `padding: var(--space-md) !important;` exactly. I can add other declarations after it.

Also, the text-align center in rule 1 — keep exactly. The font-size in rule 2 — keep exactly.

Let me also consider: should I change the badge's `background`? `.bg-warning` in Bootstrap sets `background-color: #ffc107 !important` typically? Actually Bootstrap's `.bg-warning` is `background-color: #ffc107 !important;`. With !important, my added `background` (non-important) would be overridden. So better not set background on the badge. Instead, I can set a `box-shadow` glow that complements the existing warning yellow. Add `border-radius: 999px` (visual only), `box-shadow: 0 0 20px rgba(255, 193, 7, 0.5)`.

Alternatively, override the background with `background`... but it would need !important to beat Bootstrap's. But adding !important to a new declaration is allowed? It's a visual change. However, overriding Bootstrap's warning yellow changes the badge's color identity; the target palette uses accent colors. The instruction says "Use a fresh palette" and "All color values: background, color, border-color..." So changing the badge background to a fresh accent could be good. But to keep Bootstrap's semantic "warning" while refreshing: I could set `background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;` but that changes the gradient. Since the badge has `bg-warning`, maybe I shouldn't change its base color; instead just add the glow. Actually "glow-effects" variant says "Glow shadows in accent color: 0 0 24px rgba(accent, 0.4)". The warning badge is yellow, so a yellow glow `rgba(251, 191, 36, 0.5)` fits.

Wait, the accent color in the palette should be consistent across the file. If the hero badge is yellow, and cards use rose accent glow, it's a bit inconsistent but acceptable. Let me pick a warm palette overall:

- Accent primary: coral/rose #f43f5e → for card glows
- Warning badge: amber #f59e0b → keep yellow-ish glow
- Typography: slate #1e293b

Let me refine:

Rule 1:
```css
color: #334155;
text-shadow: 0 2px 16px rgba(244, 63, 94, 0.15);
```

Rule 2:
```css
border-radius: 999px;
box-shadow: 0 0 18px rgba(245, 158, 11, 0.5), 0 4px 14px rgba(245, 158, 11, 0.25);
transition: box-shadow 0.35s ease, opacity 0.35s ease;
opacity: 0.95;  /* hmm, changing opacity slightly? It's allowed (opacity in change list). But 0.95 on a badge might look odd. Maybe skip opacity. */
```

Rule 3:
```css
background: #ffffff;
border-radius: 16px;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0