/* ============================================================
   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 visual changes only. The original CSS is quite small:

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

The constraints:
- Selectors must stay exactly the same
- Layout properties (text-align, font-size, padding) must stay the same or within ±20%
- Colors, shadows, radius, transitions, gradients can change

But this CSS has almost no visual properties to change. It only has:
- `text-align: center;` (layout - keep)
- `font-size: 0.85rem;` (typography - keep)
- `padding: var(--space-md) !important;` (padding - keep within ±20%)

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

But there are no colors, shadows, radius, transitions, or gradients in this CSS block. Hmm.

Maybe I should add visual properties? But the instructions say "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". The original CSS has a media query with three rules. I need to rewrite it but there's nothing to change visually.

Actually, let me re-read: "Refresh the visual identity WITHOUT changing layout structure or class names." I can only change colors, shadows, radius, transitions. Since there are none, perhaps I should add some? But the instructions say "ONLY the rewritten CSS, preserving ALL selectors and layout exactly."

Adding properties to existing rules would preserve the selectors and layout but add visual properties. However, it could be risky. Let me think about what's reasonable.

The original CSS is a mobile media query. It sets:
1. Text alignment center on hero section
2. Font size on badge
3. Padding on contact cards

Since I can't change those values (text-align is layout, font-size is typography, padding is layout with some tolerance), and there are no colors/shadows to change, the rewrite would be identical.

But the task demands changes. Perhaps I can:
- Add `color`, `background`, `border-radius`, `box-shadow`, `transition` to these existing rules without changing the existing declarations.

For example:
```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d2a26;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: #f5b84c;
        color: #3e2e0a;
        border-radius: 6px;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border-radius: 6px;
    }
}
```

Wait, but `.badge.bg-warning` — the class `bg-warning` is a Bootstrap class that sets background color. Changing its background to a solid color could be considered a visual change. But if I override `background`, that changes the visual identity.

However, the "flat-solid" effect variant says:
- box-shadow: none everywhere
- Solid background colors only (no gradients)
- Defined by color contrast and borders
- Minimal radius (0-6px)

And the masonry-flow target style:
- Pinterest-like: white cards, soft shadows on light gray bg — but wait, flat-solid says box-shadow: none. Those conflict. The style guide says "Layout pattern (Aggressive only)" and "Color palette". But the "Effect variant" flat-solid overrides: box-shadow: none.

Given the file only has these three rules, I'm limited. Let me write a version that adds visual properties to each existing rule while keeping the original declarations intact.

Actually, I should be careful: the self-check says:
- "Every selector character-for-character preserved?"
- "display, position, grid-template-*, flex-direction unchanged?"
- "width, height, padding, margin within ±20% of input?"
- "font-family, font-size, font-weight, line-height unchanged?"
- "Colors throughout the file replaced with fresh palette?"
- "Shadows redesigned (different offsets, colors)?"
- "Border-radius adjusted for new visual style?"
- "No AI marker comments?"

So the self-check expects colors to be replaced, shadows redesigned, radius adjusted. The original file has no colors, shadows, or radius. So I need to add them to satisfy the refresh.

Let me create a flat-solid design:

Color palette (Pinterest-like light gray bg, white cards):
- Background: #f5f2ee (light warm gray)
- Card bg: #ffffff
- Text: #2d2a26
- Accent: #e07a5f or #c94b4b
- Border: #e5e0db

But wait — this is a media query for mobile. The rules apply to:
1. `.app-hero-section .row .col-lg-7` — a column
2. `.app-hero-section .badge.bg-warning` — a badge
3. `.contact-channels-section article, .contact-quick-section .contact-card` — articles/cards

I'll add visual properties:

For #1: Maybe add a subtle color so the hero text has a warm tone. Since text-align is center, adding color is a visual change.

For #2: The badge bg-warning — I can override the background to a flat warm accent, set color, border-radius, box-shadow: none.

For #3: Cards — set background white, border-radius 6px, box-shadow: none with maybe a border.

But flat-solid says box-shadow: none everywhere. So I'll avoid box-shadow. "Defined by color contrast and borders" — so use borders.

Let me write:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: #e9b44c;
        color: #33250a;
        border: 1px solid #d19c2f;
        border-radius: 4px;
        box-shadow: none;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border: 1px solid #e8e2db;
        border-radius: 6px;
        box-shadow: none;
    }
}
```

Hmm, but `box-shadow: none` is technically "redesigned shadows"? The original had no box-shadow. Adding `box-shadow: none` is a bit odd but it satisfies the flat-solid variant.

Also, should I add a transition? The effect variant doesn't mention transitions, but the allowed changes include transitions. I could add `transition: background-color 0.2s ease;` but since there are no hover states in this block, it's not very useful. I'll skip it.

Wait, I need to be careful — the rule says "transition timing, easing, duration" can change. But adding a transition where none existed is a visual change. It's fine, but not needed.

Let me reconsider: The self-check says "Colors throughout the file replaced with fresh palette?" Since there were no colors, every color I add is new. That satisfies it.

Should I worry about the badge having `bg-warning` class? In Bootstrap, `bg-warning` sets `background-color: #ffc107 !important`. My rule doesn't use !important, so Bootstrap's `!important` would win. To actually change it, I'd need `!important` or a more specific selector. But adding `!important` to color/background could be considered too much. The original CSS doesn't have !important on badge rules.

Hmm. Should I keep it simple and just add non-important properties? The visual refresh might not actually take effect due to Bootstrap's `!important` on `.bg-warning`. But the task says "Refresh this CSS visually" — I should make changes that work. Adding `background: ... !important;` would override Bootstrap. But it changes the specificity battle.

Actually, wait — the instruction says only visual properties may change. Adding `!important` to a declaration is a property value change, not a layout change. I think it's acceptable. But to be safe, I could use the existing selector `.app-hero-section .badge.bg-warning` which is more specific than Bootstrap's `.bg-warning`, but Bootstrap uses `!important` so specificity doesn't matter — `!important` wins.

Let me think about what a real CSS designer would do. If they wanted to refresh the badge, they'd add `!important` to override Bootstrap, or they'd change the CSS variable. Actually, Bootstrap 5's `bg-warning` uses `!important`:
```css
.bg-warning {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}
```

To override it, I need `!important`. So I'll add `background: #e9b44c !important;`.

But wait — the task says "border-color and border-style (NOT border-width)". So changing `border: 1px solid ...` is fine since I'm setting border-width which is forbidden? "border-color and border-style (NOT border-width)" — this means I can change border-color and border-style, but NOT border-width. So if I add `border: 1px solid #d19c2f;`, I'm adding a border-width of 1px where there was none. That violates "NOT border-width"? Hmm, the original has no border property. Adding a new border is adding border-width. That might be considered breaking.

Let me re-read: "border-color and border-style (NOT border-width)" — this is about existing border properties. If the original had no border, adding `border: 1px solid` adds a width. The rule says "NOT border-width" — meaning I can't change border-width values. But adding a border where none existed... ambiguous. It's safer to avoid setting border-width at all.

Instead, I could use `outline` or `box-shadow` for borders. But flat-solid says box-shadow: none. I can use `outline: 2px solid ...` — wait, the allowed changes say "outline styles (color, type)". Outline width? It says "outline styles (color, type)" — so I can change color and type, not width. Same issue.

Alternatively, use `border-color` and `border-style` without specifying width? In CSS, `border-color: red; border-style: solid;` without a width... the default border-width is medium (3px), which would be a layout change potentially. That's not good.

Actually, if there's no original border, adding a border changes box sizing (unless box-sizing: border-box). Hmm, but the container might not have box-sizing. This is risky.

Let me step back. The safest visual changes that don't affect layout:
- `color` (text color)
- `background-color` (solid background)
- `border-radius` (doesn't affect layout)
- `box-shadow: none` (removes shadows — but there were none)
- `outline-color`, `outline-style` (but outline takes space... actually outline doesn't affect layout)
- `text-shadow`
- `opacity`
- `filter`
- `transition`

Outline doesn't affect layout since it's drawn outside the border-box. But adding an outline could overlap other elements visually.

Actually, since the original has no visual properties at all, the cleanest approach is to add visual properties that are purely cosmetic and don't affect layout:
- `color`
- `background-color` (only if it doesn't affect layout — background doesn't affect layout)
- `border-radius` (doesn't affect layout)
- `box-shadow: none` (no layout)
- `text-shadow`
- `transition`

But to truly refresh identity, background, border, etc. are most impactful. Let me think about the flat-solid effect: "box-shadow: none everywhere" and "Defined by color contrast and borders". So borders are part of the concept. But adding a border might change the box size.

If the elements use `box-sizing: border-box` (Bootstrap does by default), adding a border doesn't change the box size, just the content area. So it's safe with Bootstrap. Since the file mentions `badge bg-warning` and Bootstrap grid classes (`col-lg-7`), it's a Bootstrap project. Bootstrap sets `box-sizing: border-box` on all elements. So adding a 1px border is safe.

However, the instruction says "NOT border-width" — I interpret that as: if the original rule has a border-width, don't change it. Adding a new border-width is a new property, not a change. I think it's acceptable in spirit, but to be extra conservative, I could avoid border-width entirely and rely on `background-color`, `color`, `border-radius`, and `box-shadow: none`.

Actually, for a flat-solid look, I can use `outline` instead of `border`. Outline doesn't affect layout at all. But outline with `outline-offset` maybe... Let me use outline for the card border:

```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background-color: #fffdf9;
    outline: 1px solid #ece5dc;
    border-radius: 6px;
    box-shadow: none;
}
```

Hmm, but `outline: 1px solid` includes outline-width. The rule says "outline styles (color, type)" — so changing outline color and type is allowed, width is not mentioned. Adding an outline where there was none... I'd be adding an outline-width. To avoid the issue, I can use `outline-style: solid; outline-color: #ece5dc;` — but then default outline-width would be medium (3px). Hmm.

Wait, the instruction says "outline styles (color, type)" meaning I can change outline-color and outline-style. It doesn't say I can add outline. But if I add it, I should avoid specifying width.

Honestly, I'm overthinking this. The original CSS is tiny and has no visual properties. The user's intent is for me to produce a refreshed CSS that makes the components look different while keeping the same selectors and layout values. Adding color, background, radius, and box-shadow:none is exactly what's expected.

Let me look at the target style again:
- masonry-flow color palette: Pinterest-like white cards, soft shadows on light gray bg. But flat-solid says box-shadow: none. So the palette is white cards on light gray, no shadows, defined by borders.
- Minimal radius (0-6px)

So I should use:
- Light gray background for the page? But I don't have a rule for the page. I only have these three rules. I can set the background of the cards to white, and the text colors to warm/dark tones.
- The badge can have a flat accent color (e.g., warm amber/terracotta).
- Cards get a very light warm background, a subtle border, and a minimal radius.
- Use contrast to define hierarchy.

Let me write the CSS:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #4a3f35;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #e59a3c !important;
        color: #2b1e0c;
        border-radius: 4px;
        box-shadow: none;
        transition: background-color 0.2s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #fffefb;
        border-radius: 6px;
        box-shadow: none;
        transition: background-color 0.2s ease;
    }
}
```

Hmm, transitions without a hover state do nothing. But the instruction says transitions can change — I can add them. Maybe I shouldn't add pointless transitions. It's cleaner to omit them.

Wait — maybe I should add a border to the cards and badge to satisfy "Defined by color contrast and borders". Let me add `border-style: solid; border-color: ...;` without border-width? Actually, if I add `border-color` and `border-style`, the default border-width is `medium` (3px) which is too thick and could affect layout. But if the element has box-sizing: border-box (Bootstrap default), it won't affect outer size but will reduce inner content area. For a card with padding, this might shift text. Padding is fixed by the original rule, so I can't reduce padding. The card would have 3px borders inside the box, reducing content space. That's a layout concern.

Better to use a 1px border via the shorthand which explicitly sets width. But the instruction says NOT border-width. Ugh.

Hmm, what about `outline: 1px solid #ece5dc;`? Outline doesn't affect layout. But it does set outline-width. The instruction allows changing "outline styles (color, type)" — outline-style is "solid", outline-color is "#ece5dc". The width 1px is... not color or type. It's adding a property not originally present. I think it's fine — the prohibition is about not changing existing border-width values. Adding an outline is a decorative addition.

But actually, the flat-solid effect says "Defined by color contrast and borders" — so borders are intended. Let me use