/* ============================================================
   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 the CSS in "conservative mode" with the target style "card-mosaic" and effect variant "tight-rhythm". But the CSS provided is very minimal — it's just a media query with three rules. Let me analyze it:

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

Now, I need to apply visual changes only. The things I can change:
- Colors (background, color, border-color, fill, stroke, outline-color)
- box-shadow
- text-shadow
- border-radius
- gradient colors and stops
- transition timing, easing, duration
- filter, backdrop-filter
- opacity
- outline styles
- border-color and border-style (NOT border-width)
- caret-color, accent-color
- CSS custom properties (--color-*, --shadow-*) values

Things I cannot change:
- Selectors
- Layout properties (display, position, grid, flex, width, height, padding, margin)
- Typography (font-size, font-weight, etc.)
- text-align (it's in the original — I should keep it since it's a layout property? Actually text-align is listed under "text-align, vertical-align" in the never-change list)

Wait, text-align is in the "NEVER CHANGE" list under 📐 LAYOUT. So I cannot change `text-align: center;`. And `padding: var(--space-md) !important;` — padding is in the never-change list, but I can vary it by ±20%. However, it uses a CSS variable `var(--space-md)`. I could change the value of the custom property `--space-md`? But that would affect the whole document. Actually the instructions say "CSS custom properties (--color-*, --shadow-*) values" — only color and shadow custom properties. So I shouldn't change `--space-md`.

Actually, let's think about this. The instructions say:
- "padding, margin (keep similar values, ±20% maximum)"

So I could adjust padding within ±20%. But it's `var(--space-md)`. Changing it to a different value like `calc(var(--space-md) * 0.9)` would be modifying the padding but staying within 20%. Hmm, but that might be overreach. Actually, the rule says "keep similar values, ±20% maximum" — so I can adjust. But to be safe, since the target style is "tight-rhythm" with compact spacing, I might reduce padding slightly. But the original already uses `var(--space-md)` which I don't know the value of. Let me be conservative and keep it, or adjust within 20%.

Actually, the instructions say I may change padding by ±20%. So I could do something like `padding: calc(var(--space-md) * 0.85) !important;` to make it tighter. But that changes the expression. Hmm.

Also `font-size: 0.85rem;` is typography — cannot change. `text-align: center;` — cannot change.

So the only things I can really change in this CSS:
1. Add colors, shadows, radius, transitions to the elements targeted by these selectors.
2. Maybe change the `padding` value slightly within ±20%.
3. Add border-radius, box-shadow, background, border, etc. (visual decorations that don't change layout).

Wait, but adding `box-shadow` doesn't change layout. Adding `border-radius` doesn't change layout. Adding `background-color` doesn't change layout. Adding `border` with 0 width? Actually border can affect layout if it has width. The instructions say "border-color and border-style (NOT border-width)" — so I can only change border-color/style if border-width is already present. I shouldn't add a border if there wasn't one, because that would add border-width and change layout. Actually, the instruction says I can change border-color and border-style, but not border-width. If there's no border declared, adding `border: 1px solid` would add width. I could add `outline` instead, since outline doesn't take up layout space. But the instructions say "outline styles (color, type)" — outline-width isn't mentioned. Actually they say "outline styles (color, type)". Hmm, outline-width is not listed as changeable. But adding an outline doesn't affect layout. Let me be careful.

Actually, the "NEVER CHANGE" list includes things that would break layout. Adding box-shadow, outline, backdrop-filter, etc. won't break layout. So I can add those visual properties.

Given the target style "card-mosaic" and variant "tight-rhythm":
- Small border-radius (2-6px)
- Subtle shadows or none
- Compact spacing
- Vibrant card colors on neutral background
- Each card type a different accent

The selectors target:
- `.app-hero-section .row .col-lg-7` — this is a column in the hero section
- `.app-hero-section .badge.bg-warning` — a badge with warning background
- `.contact-channels-section article` — article elements
- `.contact-quick-section .contact-card` — contact cards

For the hero section column, I could add a subtle background or accent border/radius on mobile. But careful — this is inside a media query for max-width 575.98px. The col-lg-7 takes full width on mobile. Adding a background to it might be a visual change. But is it appropriate? The target style says vibrant card colors on neutral background. Hmm.

Actually, let me think about what changes make sense while keeping layout identical:

1. `.app-hero-section .row .col-lg-7` — on mobile, center text. I could add a subtle background tint, border-radius, and maybe a soft shadow. But this is a whole column — adding a background might look like a section. The instructions say I can change background-color. I'll add a subtle background gradient and border-radius.

2. `.app-hero-section .badge.bg-warning` — badge. The `bg-warning` class is Bootstrap's warning color. I can't change the class, but I can override the background color with a new vibrant accent. Also add box-shadow, border-radius, etc. But wait — `font-size` is fixed. I can add `box-shadow`, `border-radius`, maybe `background` with a gradient to make it vibrant.

3. `.contact-channels-section article` — articles. These could be cards. Add border-radius, box-shadow, background gradient, maybe a border-left accent. But `padding: var(--space-md) !important;` is already applied. I can add visual properties.

4. `.contact-quick-section .contact-card` — contact cards. Same treatment.

Also, the variant "tight-rhythm" says:
- Compact spacing (padding 8-16px, gap 8-12px)
- Small border-radius (2-6px)
- Subtle shadows or none

So padding should be 8-16px. But the original uses `var(--space-md)`. I don't know what `--space-md` is, but typically in Bootstrap-like systems, `--space-md` might be around 1rem (16px) or 1.5rem (24px). To be safe within ±20%, I could change it to `calc(var(--space-md) * 0.9)` — that's a 10% reduction. But honestly, changing `var(--space-md)` to a fixed value like `0.9rem` might break the design system. The safest is to keep it, or do a minor calc adjustment.

Actually, the instructions say: "padding, margin (keep similar values, ±20% maximum)". So I am allowed to change padding by up to 20%. To align with "tight-rhythm", I'll reduce by 10%: `padding: calc(var(--space-md) * 0.9) !important;`. Hmm, but this applies to both selectors in rule 3. That's fine.

Wait, but there is a rule: "CSS custom properties (--color-*, --shadow-*) values" — only color and shadow custom properties. `--space-md` is a spacing custom property, so I shouldn't redefine it. But I can use it in calc for padding.

Let me also think about the transition. I can add transitions to these elements for hover/focus states. But there are no :hover rules here. Adding transitions doesn't change layout, so it's fine. The tight-rhythm variant mentions subtle shadows or none. The card-mosaic palette mentions vibrant card colors on neutral background, each card type a different accent.

Let me define a palette:
- Neutral background: soft warm gray / off-white, e.g., `#f8f7f4` or keep transparent.
- Card accents:
  - Hero column: maybe a soft teal/blue tint.
  - Badge: vibrant amber/orange or coral — but it's `bg-warning`, so warning color. I'll use a vibrant orange gradient like `#ff9a3c` to `#ff6b35`.
  - Contact article cards: maybe a soft mint/teal accent, e.g., `#e6f4f1` with teal border.
  - Contact quick card: maybe a soft lavender/blue accent, e.g., `#eeedfb`.

Border-radius: 2-6px per tight-rhythm. I'll use 4px or 6px.

Shadows: subtle or none. I'll use a very subtle shadow like `0 1px 3px rgba(0,0,0,0.08)` or `0 2px 4px rgba(31, 38, 135, 0.06)`.

Let me compose:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, rgba(231, 240, 255, 0.6), rgba(255, 255, 255, 0.2));
        border-radius: 6px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 2px 6px rgba(30, 41, 59, 0.06);
        transition: background-color 0.25s ease;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffb347, #ff7b3d);
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(255, 123, 61, 0.25);
        color: #fff;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: calc(var(--space-md) * 0.9) !important;
        background: #ffffff;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
        transition: box-shadow 0.2s ease;
    }
}
```

Wait — I added `color: #fff;` to the badge. The badge originally might have dark text from Bootstrap (`.badge.bg-warning` typically has dark text). Changing color to white is a visual change allowed. But is the text readable? With a vibrant orange gradient, white text works if the orange is dark enough. `#ff7b3d` is medium — white text on it might have contrast around 3:1, which isn't great but acceptable for a badge. Alternatively, use dark text like `#1f2937`. Bootstrap's warning badge uses dark text (`#664d03` on `#ffc107`). If I change the background to a deeper orange, white text would be better. Let me go with white and a slightly deeper gradient: `#ff9a3c` → `#ff5e3a`. Hmm.

Actually, to keep good accessibility, let me use dark text for the badge. But "vibrant card colors on neutral background" suggests bold colors. Let me use a bold coral-to-orange gradient and dark slate text for contrast:

```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background: linear-gradient(135deg, #ffd166, #ff9f1c);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(255, 159, 28, 0.35);
    color: #5c3a00;
}
```

Hmm, but `bg-warning` might have a background already. Overriding with a gradient is fine.

Actually wait — the instruction says I can change "gradient colors and stops in linear/radial/conic-gradient". So adding a gradient to a background that was a solid color is allowed? The original didn't specify a background, but Bootstrap's `.bg-warning` provides one. So overriding it with a gradient is a visual change. Good.

Also, for the hero column, adding a background could affect the visual hierarchy. The hero section might already have its own background. Adding a subtle tint inside the column could be a nice mosaic touch. But maybe I shouldn't add a background to the whole column because it could conflict with the hero's design. Hmm. The card-mosaic pattern is about cards on a neutral background. The hero column isn't a card. But the target style is "Aggressive only" — wait, the note says "Layout pattern (Aggressive only)" meaning that layout pattern is aggressive, but I'm in conservative mode. Hmm.

Let me re-read: "Target style: card-mosaic" and "Layout pattern (Aggressive only): Grid with mixed spans...". This is describing the style I should emulate visually, but since I'm in conservative mode, I can't change the layout to match. I can only do it visually via colors/shadows/radius. So I'll give card-like treatments to the elements that are present.

Given the small number of rules, I should make meaningful visual changes:

1. Hero column: give a subtle glassy/card feel with a soft gradient overlay, rounded corners, and a faint inner highlight. Maybe add `backdrop-filter: blur(8px)` for a translucent card feel? But backdrop-filter could affect performance and might not be visible. It's allowed though. Actually, adding `backdrop-filter` without a semi-transparent background does nothing. I could add `background: rgba(255,255,255,0.6)` + `backdrop-filter: blur(8px)`. That's a visual change. It doesn't affect layout. Tight-rhythm says subtle shadows or none. I'll keep it subtle.

2. Badge: vibrant gradient, small radius (4px), subtle shadow, dark text for contrast, maybe a slight transition on hover (but no hover selector, so transition won't do much — but it's allowed).

3. Contact articles and quick cards: give them white/off-white backgrounds, small radius (4px), subtle shadow, and a colored accent border (border-left? But I can't add border-width). Hmm — I can't add a border with width because that changes layout. I could use `box-shadow: inset 3px 0 0 ...` which simulates a left border without affecting layout. Or `outline` which doesn't affect layout. Actually, an inset box-shadow with 3px horizontal offset and no blur creates a colored edge. That's a nice mosaic accent and doesn't affect layout. Let me use that.

For the two selectors (`.contact-channels-section article` and `.contact-quick-section .contact-card`), I can differentiate accents:
- `article` gets a teal/mint accent: `box-shadow: inset 3px 0 0 #14b8a6, 0 1px 3px rgba(...)`.
- `.contact-card` gets a violet accent: `box-shadow: inset 3px 0 0 #8b5cf6, 0 1px 3px rgba(...)`.

But they share a selector list — I can't split them without changing the selector. Wait, I could keep the shared rule and then add separate rules for each? The instruction says "Selector lists (commas)" are in the never-change list. But if I keep the original shared rule intact and then add additional rules with single selectors, the selectors are preserved. However, adding new rules with the same selectors might be considered changing the structure? The instruction says "Every selector character-for-character preserved?" — if I keep the original rule and add a new one, the original selector list is preserved. Adding new rules isn't changing selectors. But it adds CSS. The output should be the rewritten CSS — I can add more rules as long as the original selectors are preserved. Hmm, but the task says "Refresh this CSS visually" — adding rules is allowed if they contain only visual properties.

Actually, to be safe and clean, I'll keep the shared rule for common card styles, then add individual rules for accent differentiation. But wait — if I add new rules, the selectors are already present in the original? The original selectors are:
- `.app-hero-section .row .col-lg-7`
- `.app-hero-section .badge.bg-warning`
- `.contact-channels-section article, .contact-quick-section .contact-card`

If I add `.contact-channels-section article { ... }` as a new rule, that selector didn't exist before — but is that "changing selectors"? The instruction says "Selectors: keep EXACTLY" — meaning existing selectors must be preserved character-for-character. It doesn't forbid adding new selectors. But to be conservative, I should avoid adding new selectors. The safest approach is to modify only what's inside the existing rules. That means the shared rule applies the same base styling to both article and contact-card, and I can't differentiate them because they're in one rule.

H