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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

We need to rewrite the given CSS. But the given CSS is a media query with only a few rules: text-align, font-size, padding. These are layout/typography properties that we are not allowed to change? Let's examine.

Original:
@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;
    }
}

Constraints: We can change only visual identity: colors, shadows, radius, transitions, gradients, etc. text-align is typography? Actually text-align is in the layout/typography section? The instructions say typography fixed includes font-family, font-size, font-weight, font-style, line-height, letter-spacing, word-spacing, text-transform, white-space, word-break. text-align is listed in layout: "text-align, vertical-align" under never change. So we cannot change text-align: center. font-size is fixed. padding is fixed within ±20%. But the request says "Refresh this CSS visually" but the original contains no colors or shadows. We need to apply the target style to these rules without changing selectors or layout properties. However there are no visual properties. We could add new properties? The instruction says keep all selectors and layout exactly. It says only colors, shadows, radius, transitions, gradients may change. The original has padding, text-align, font-size. We cannot change those. We can add declarations? The output should preserve the existing declarations? The task: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." That implies we can modify the declarations of colors etc. If there are none, we could add them? The original CSS is minimal. We need to produce a rewritten CSS that matches the target style: horizontal strips, sharp edges. The target style suggests full-width sections, alternating backgrounds, strong borders, hard offset shadows. But the original CSS is only a media query for mobile. We probably need to preserve the media query and selectors, but we can add visual properties like background, border, box-shadow, border-radius, transition, etc. to those selectors. However instructions: "NO changes to layout structure or class names" and "You are an expert CSS designer... Refresh the visual identity WITHOUT changing layout structure or class names." The original file is only this snippet. We need to output the rewritten CSS. Since the original has no color, we can add color/background/shadow properties to the selected elements. But we must be careful not to violate "padding: var(--space-md) !important" — we can keep it exactly. For the badge font-size, keep exact. For text-align, keep exact.

At the same time, there is a "target style" that is aggressive but we are in conservative mode? The target style says "Aggressive only" but the top says conservative mode. The first message says "🛡️ CONSERVATIVE MODE" and then later "TARGET STYLE: horizontal-strips" with "Layout pattern (Aggressive only)". This is confusing. The system says conservative mode, but the target style description says "Aggressive only" maybe indicating that the provided target style is for aggressive mode? Actually the user prompt has both. The assistant is in conservative mode, meaning only visual changes, no layout. The target style is horizontal-strips with sharp-edges. We can apply color, border, shadow, radius, transition to the existing selectors. But we need to be careful about the layout pattern: "Full-width sections (width: 100%), Each strip with distinct padding (60-100px vertical), Alternating background colors per strip". That would require layout changes (padding vertical 60-100px) which would violate conservative mode. Since the original selectors are specific elements inside a hero section, contact cards, etc. We cannot change widths or padding drastically. The target style likely is just to guide the visual identity (color palette, shadows, edges). We should implement a "sharp edges" variant with hard offset shadows, small border-radius, strong borders, snappy transitions on these elements. Also color palette: alternating white/cream/dark/white pattern. We can choose colors. But the original CSS doesn't include any colors, so we need to add backgrounds, borders, shadows, transitions to the selected elements.

Let's parse the original selectors:

1. .app-hero-section .row .col-lg-7 — inside hero row. It has text-align: center. We can add color, background? It's a column; adding background would be a visual change. The target style "horizontal strips" suggests each strip has distinct background. Maybe we can set background to cream? But this is a column inside a row; maybe the hero section itself is a strip. We can set a background color, border, box-shadow, border-radius? But the selector is a col, so if we add a background, it will look like a card. That's acceptable as visual identity.

2. .app-hero-section .badge.bg-warning — a badge with bootstrap class bg-warning. The original only font-size. We can override background-color? Or add box-shadow, border, etc. The class bg-warning sets background warning color; we can change to a different color? Since the instruction says all color values can change, we can set background-color to a custom color. But we need to keep the class selector. The target sharp edges: strong border, hard offset shadow. We can add border: 2px solid #1a1a1a; box-shadow: 4px 4px 0 #1a1a1a; border-radius: 0; transition: all 0.15s. This will change appearance. Also maybe change background to a strong color zone. The palette says alternating white/cream/dark/white. We can set the badge background to dark? But then text color? Not specified. We can set color for contrast. But original doesn't have color property. We can add color: #fff. That's allowed because it's a color property.

3. .contact-channels-section article,
   .contact-quick-section .contact-card — a list. It has padding: var(--space-md) !important. We can add background, border, box-shadow, border-radius, transition. The target style: horizontal strips, alternating background colors. For contact cards, maybe each card has strong border and hard offset shadow. Need to keep padding value or within ±20%. We'll keep exactly var(--space-md) !important. We can add margin? No, margin is layout. We can add background: #fff; border: 2px solid #1a1a1a; box-shadow: 4px 4px 0 #1a1a1a; border-radius: 0; transition: box-shadow 0.15s, transform 0.15s? But transform is not in allowed? Actually transform is not in the never-change list? Let's check the forbidden list: display, position, grid, flex, width, height, min/max, padding, margin, gap, justify, align, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, object-position, text-align, vertical-align. Transform is not listed in NEVER CHANGE, but in the allowed changes are "transition timing, easing, duration" — no transform. Wait, "transition" is allowed, but changing transform value would be a visual change? The list of allowed changes does not include transform, but the forbidden list does not include transform. However "visual changes only" normally can include transform? But the allowed list says "✅ YOU MUST CHANGE (visual identity only): ..." and includes list of properties. Transform is not in that list, but also not in never change. The safe approach is to avoid adding or changing transform. We can use box-shadow changes on hover, not transform. But transition property can include multiple properties, including transform if we wanted. But to be safe, don't add transform. We can transition box-shadow, background-color, border-color.

We also need to consider the "alternating" pattern. Since only a few selectors, we can give different backgrounds to the hero column and contact cards. The hero column could be cream (#f5f0e8), badge dark (#1a1a1a) with white text, contact cards white (#fff) with dark border. That fits white/cream/dark/white pattern. Actually order: hero section could be cream, badge dark, contact cards white. Nice.

Need to maintain media query. The target style says vertical padding 60-100px, but that's for full-width strips. Our original has padding: var(--space-md) !important in contact cards. We cannot change. Could perhaps add padding to hero column? But no, that would be layout. We can only add colors, borders, shadows, radius, transition. So we'll not change padding.

Also, the input is only a media query. That means all these styles are within max-width 575.98px. We must output the same media query and selectors. We can add declarations inside each rule. We need to preserve the existing declarations exactly? The instruction says "Only change colors, shadows, radius, transitions, gradients." It doesn't say we can remove or add other property types. But to apply the visual refresh, we must add visual property declarations. Since there are none originally, adding them is the only way. We'll keep existing declarations unchanged and add new ones. Make sure the selector list remains exactly: ".contact-channels-section article,\n    .contact-quick-section .contact-card" — actually original has:
    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
We need to preserve that comma and newline. We'll write the same selector and braced block, with the original padding declaration plus additional visual declarations. For the hero column, keep text-align: center; plus add visual declarations. For badge, keep font-size: 0.85rem; plus add visual declarations.

Be mindful of CSS indentation. We can output formatted CSS. No markdown fences.

Let's craft the new CSS.

First, let's consider the exact properties we can add:

- background-color
- color
- border: 2px solid #1a1a1a (strong border)
- border-radius: 0 (sharp edges)
- box-shadow: 4px 4px 0 #1a1a1a (hard offset shadow) — but box-shadow property value uses comma for multiple shadows; a hard offset shadow with 0 blur and spread. It should be e.g., `4px 4px 0 0 rgba(26,26,26,1)` or just `4px 4px 0 #1a1a1a`. In CSS, box-shadow syntax is: offset-x offset-y blur-radius spread-radius color. If we use `4px 4px 0 #1a1a1a`, the blur radius is 0 and no spread. That's valid. To be safe, `4px 4px 0 rgba(0,0,0,0.9)`. The target says 4px 4px 0px solid color. Actually shadow doesn't have "solid" but offset. So `4px 4px 0 #1a1a1a`.

- transition: all 0.15s ease-in-out; But target says snappy transitions 0.15s. We can specify properties. Maybe `background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease`. But `transition: all 0.15s ease` is simpler and allowed (transition property). Need to be careful not to transition layout properties? It's fine, transition of visual properties only. Could use `transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease`.

- Maybe add `border-color` etc.

For the hero column (.app-hero-section .row .col-lg-7):
- background: #f5f0e8 (cream)
- border: 2px solid #1a1a1a
- border-radius: 0
- box-shadow: 4px 4px 0 #1a1a1a
- transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease
- Maybe padding? Not allowed to add padding? It's not in original; adding padding would change layout. So no padding.
- But if we add background and border, the column will have a box around it. Without padding, the content may touch edges. That could be a visual issue, but it's within the existing layout? We are modifying visual identity, not layout. Adding background without padding is okay visually if content is inside. But a column in a row spans full width; background may cover entire col. Acceptable.

For the badge (.app-hero-section .badge.bg-warning):
- background-color: #1a1a1a (dark) to replace bg-warning? The class bg-warning sets background-color to warning color (yellow) with !important? Bootstrap .bg-warning uses background-color: #ffc107 !important? Actually .bg-warning might have !important. Our rule has specificity 0,3,0? Actually .app-hero-section .badge.bg-warning has classes: 3 classes -> specificity (0,3,0). Bootstrap's .bg-warning is (0,1,0). So ours wins if later or not important. But Bootstrap may use !important? In Bootstrap 5, .bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; } It uses !important. So our background-color without !important will not override. We could use `background-color: #1a1a1a !important;` to override. But the instruction says don't change selectors, but adding !important is allowed? It's a declaration change, not selector. However, adding !important might be necessary. But we want to avoid changing the "padding !important" existing. We can add background-color: #1a1a1a !important; to override. Similarly border-color? Bootstrap badge has border-radius: 0.375rem; We can override with border-radius: 0; but Bootstrap .badge has border-radius: 0.375rem (not important), so our rule should override if specificity higher. For background-color, we need !important. Alternatively, we can set `background: #1a1a1a !important;` shorthand. But the allowed property palette includes background? We can use background-color. Since original CSS did not have any color, we'll add with !important to override bg-warning. Also set color: #fff !important? Bootstrap .badge uses color: #fff? Actually text color inherits? We should set color: #fff to ensure contrast. Use `color: #fff !important;` if necessary? Bootstrap .badge text color might be inherited? .text-bg-warning sets color: #000? But .bg-warning only background, not color. So we can set color: #fff. No need !important unless something else. Also add border: 2px solid #1a1a1a; box-shadow: 4px 4px 0 #f5f0e8;? The badge sits on a cream background? Actually inside hero col which we set cream. A dark badge with a cream shadow? Target sharp edges: hard offset shadows. The shadow color could be dark or cream? Usually shadow is black/dark. But if the badge is dark, a dark shadow on dark border may not read. We can use shadow color #1a1a1a; border also #1a1a1a; so it will just look like a solid block with offset. But there is no contrast with background? The badge background could be #ffcc00? The "alternating" pattern says dark zones. Let's set badge background to #1a1a1a and color to #fff. Border: 2px solid #1a1a1a; box-shadow: 4px 4px 0 #f5f0e8? That would create cream offset shadow against the cream column? Actually if the col background is cream, a cream shadow would be invisible. Better: set badge background to #1a1a1a, border to #1a1a1a, box-shadow to 4px 4px 0 #f5f0e8 (cream) would show as a cream block to the right/bottom, but since the parent background is cream, it might blend. Hmm.

Maybe set the hero column background to white, not cream. Then the badge can be dark with a cream shadow? Let's define palette: white, cream, dark. We can set hero column background: #fff; badge background: #1a1a1a; box-shadow: 4px 4px 0 #f5f0e8; border: 2px solid #1a1a1a. That gives a hard cream offset shadow visible against white. Good.

Contact cards: alternating? The selectors are two separate groups. We can give the first (contact-channels-section article) a cream background, and second (contact-quick-section .contact-card) a white background, or vice versa. Since they're in the same comma-separated selector, we cannot style them differently within the same rule. We need to split them? But instruction says selector lists (commas) must be preserved exactly. It says "Selector lists (commas)" under never change. That means we must keep the comma-separated list as a single rule. So both groups get the same style. We cannot alternate between them. But we can still choose a background. Maybe set them both to white with dark border and hard shadow. That fits.

If we want alternating backgrounds, we would need separate rules, but we can't change selector list. The original selector list is fixed. So we must keep them together. Thus both get same background. We can choose cream, and hero col white, badge dark -> alternating: white (hero), dark (badge), cream (cards). That's pretty good.

Alternatively, we could add a rule before/after the media query? No,