/* ============================================================
   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 respond with rewritten CSS only. Need follow conservative mode. Need inspect original CSS snippet. It's just media query with text-align center, font-size, padding. No colors, shadows. But task wants visual identity refresh. Need preserve selectors exactly and layout only. There are rules:
- .app-hero-section .row .col-lg-7 { text-align: center; }
- .app-hero-section .badge.bg-warning { font-size: 0.85rem; } (font-size cannot change? typography fixed; but original font-size fixed. We should keep same? The locked list includes font-size. So no changing. But note we can change color, shadows etc. In original, no colors. We may add color/border? We are allowed to add? Need refresh visual identity. But selectors keep. Layout unchanged. We can add visual declarations to existing rules, but not alter layout properties. We can add background, border, radius, transitions, etc. Need be cautious with media query breakpoint preserved. Also @media ... first char. Need output only CSS. Since original all rules in media query. We can rewrite with visual additions.

Need decide palette. Target style card-mosaic flat-solid: neutral background, vibrant card accents, no gradients, no shadow, minimal radius. Since CSS snippet only includes media query. Could add visual properties within these selectors. Also maybe add additional selectors? "Keep ALL selectors" maybe can add? The instruction says HTML fixed, selectors preserve. It might be okay to add visual declarations to existing rules, but no new selectors? "Only the rewritten CSS, preserving ALL selectors and layout exactly" means probably no new selectors. But task wants refresh this CSS visually. This snippet is small. We can modify background-color, color, border, etc. But the selectors target hero section column, badge, and contact cards. We need make changes.

Need be careful:
- .app-hero-section .row .col-lg-7 { text-align: center; } Layout property unchanged. Add visual e.g. color? Since text-align is layout; max width etc no? Could add background? That may affect layout? Box-sizing? Need not. But can add border-radius? It's an element maybe column. Setting background could be weird. Maybe add color to a column? Hmm.

- .badge.bg-warning: the class bg-warning typically sets background-color: yellow. We can override background-color to vibrant accent, color, border, border-radius, box-shadow none. Need "flat-solid", "no box-shadow". Original no shadows. We can set box-shadow none? If bootstrap has shadow, but not default. Could set --bs-badge? But in media query. Need preserve font-size exactly 0.85rem. Could add font-weight? No font-weight locked. Avoid.

- contact cards padding declarated. We can set background-color, border, border-radius, transition, box-shadow none. But original has padding var(--space-md) !important; keep padding unchanged. We cannot change padding value. It is within 20%? Original uses var, we keep. Add visual.

Need maybe include CSS custom property values? Target? There are no custom properties. We could add :root? But would add selector. Better not.

Need maybe modify only existing selectors with visual declarations. Since original no colors, output will add colors. Need ensure "Every selector character-for-character preserved" - yes. We can add declarations.

Potential issue: .app-hero-section .row .col-lg-7 { text-align: center; } In mobile only, making column center. Adding visual color: maybe "color: #164..." but column text inherits. That may change text color. Good.

Need choose palette. neutral background maybe body not selected. For cards: contact-card background "vibrant card colors on neutral background"; each card different accent. But we only have .contact-card generic, no per type? Could use pseudo-classes? maybe not. Could set .contact-card background to accent color and maybe color. But both contact-channels-section article and contact-quick-section .contact-card. We can set both? Need not break layout.

Since output only CSS, maybe we can add `box-shadow: none` to all target elements to fulfill flat-solid. But original had no shadows. Add anyway to enforce.

Need maybe use custom property values? We can define variables? Could add within media query? e.g., `.app-hero-section .row .col-lg-7 { ... --accent: #... }`? CSS custom property can be set on selector. Could use. But maybe not needed.

Let's think more. The "File fingerprint" and "Request ID" context irrelevant. Need produce final CSS.

Let's parse 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;
    }
}
```
We need keep these selectors and layout. We can add declarations:
- For first: text-align: center; color: #17233b? But this is a column inside hero, maybe wants no background. Add `caret-color`? Accent? Could set `color: #103b3c`? Need overall. Since there is no body, maybe color on col-lq-7. But text is likely headings/paragraphs. The style target "flat-solid, neutral background, vibrant card colors", need maybe apply to badge and cards.

- For badge: `.app-hero-section .badge.bg-warning { font-size: 0.85rem; background-color: #fb7185; border: 1px solid #e11d48; color: #fff; border-radius: 6px; box-shadow: none; }` Maybe `bg-warning` maybe yellow; override to vibrant. Could be a hero badge. We might want different accent.

- For contact card: `padding: var(--space-md) !important; background-color: #f6d4a0? no.` "Each card type a different accent" cannot because selector generic. Could use `article` and `.contact-card` separately? Already selector list applies to both. If we output:
```
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background-color: #f4f6fb;
    border: 1px solid #d9e2ef;
    border-radius: 6px;
    color: #1f2a44;
    transition: background-color .25s ease;
}
```
But both same background. Could set `.contact-channels-section article { background-color: #2dd4bf; }` as new selector? Is that allowed? It's adding new rule. Hmm.

"preserving ALL selectors and layout exactly" probably means must keep existing selectors, but can add new selectors? In CSS refresh assignment, often all original selectors need to remain; adding new selectors could be okay but might change elements not intended. However "HTML is FIXED — only colors, shadows, and decorative properties may change" means no new selectors? Actually new selectors are not layout if they only apply visuals. But they are still selectors. The instruction says "🏷️ SELECTORS (CRITICAL - HTML is fixed): Class names: keep EXACTLY..." likely means do not alter selectors. Adding new selectors to existing classes is okay? But "HTML is fixed" doesn't prevent. But output must preserve original selectors. Usually safest to avoid new rules, and keep all original selectors.

But the desired style says "Each card type a different accent" impossible with existing selector list. But maybe we can use existing selector list and use `:nth-child`? That is a pseudo-class added to selector; would alter selector (not preserve exactly). Maybe avoid.

Another angle: We can modify variable values. Original uses `--space-md`. We can set `--space-md`? No.

Need maybe include @media must remain. The first char in output: "@" not open. Good.

Need maybe "only colors, shadows, and decorative properties may change" but we are not allowed to add background to hero column? Background is decorative. Fine.

Potential issue: In first rule, `text-align: center;` might be considered layout but original. Keep unchanged. Add `color` maybe. But if we set color on column, it can affect text. Good.

Potential issue: `font-size` locked, so don't change badge font-size. Keep.

Potential issue: `padding` locked; keep exact. We can add padding? It would change. Don't.

Potential issue: `margin` maybe within ±20%; no need.

Need maybe use `!important` on visual properties? Might be necessary to override Bootstrap. Could add to background-color? We should not alter original important? If original padding has !important, keep. For new visual properties, maybe add `!important` to override. Is that acceptable? It's not layout. Use sparingly. Need maybe `box-shadow: none !important;` to satisfy flat solid. But "box-shadow:none everywhere" maybe yes. Need apply to all target elements. We can set `box-shadow: none` on each rule. Also border-radius.

Need maybe define `--color-*` custom property values within selectors? This is allowed. But output may not need.

Let's craft final CSS with no markdown. We can use comments? No comments? It says no AI-rewritten comments. Could include normal comments? Better no. Let's produce.

Need choose palette:
- Neutral background: on body impossible. But for contact card background maybe #f3f6fa. However "flat-solid: Solid background colors only (no gradients)" For card mosaic, each card type different accent. But since no new selectors, perhaps make contact card background: #d9f99d? A vibrant accent. But both same. Could use `background-color #f9a8d4`? Need.

Maybe `.contact-channels-section article` should be "vibrant card" and `.contact-quick-section .contact-card` another accent. But they're in same grouped selector. Can't split without new selector or using `:where(.contact-channels-section article, .contact-quick-section .contact-card)`? That changes selector. But perhaps allowed? The instruction "selector lists (commas)" are in locked. Need not alter. Could leave grouped and use CSS variables maybe with `background-color: var(--card-accent, ... )`. But both same variable. If no variable defined, same. If variable defined elsewhere? Maybe Bootstrap has. No.

Could add `background-color` to parent? Not.

Maybe use `border-color`: all cards different? Not possible.

Maybe use pseudo-elements? They are decorative. Could use `::before` with different background? But new selectors and can affect layout if positioned absolute. Avoid.

Need perhaps output only the same selectors, but add colors. We can still create visual refresh by color/border/radius. Let's do:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #233047;
        background-color: #f7f9fc;
        border-radius: 6px;
        box-shadow: none;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #ffffff;
        background-color: #e4376a; /* vibrant */
        border: 1px solid #b71e4d;
        border-radius: 6px;
        box-shadow: none;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        color: #1e2433;
        background-color: #a3e9dc; /* soft teal */
        border: 1px solid #2bb3a3;
        border-radius: 6px;
        box-shadow: none;
    }
}
```

But flat-solid target says "Vibrant card colors on neutral background" and "defined by color contrast and borders". The background of contact card maybe vibrant teal. But both same. Could choose a more muted purple. Maybe set background-color #f1d0f5? But not solid.

Maybe use `background-color: #fde68a`? Yellow warning? Hmm.

Need perhaps not set background on hero column because if it's a grid item, could look like block. But okay.

Could include `caret-color` and `accent-color` in first or card. This is allowed. Example:
- .app-hero-section .row .col-lg-7 { color: #161e2e; caret-color: #e4376a; accent-color: #e4376a; }

Need maybe "transition" property. We can add `transition: background-color .25s ease, color .25s ease;` to cards; but "transition" visual. However original no transition. Good.

Need "outline" maybe not.

Need "filter, backdrop-filter": maybe no.

Need "border-color and border-style (NOT border-width)" - okay.

Need "box-shadow: none everywhere" We can use `box-shadow: none` on all three rules. Good.

Need "minimal radius (0-6px)" - use 6px. Good.

Should we use "background-color: #ff6b81" maybe vibrant. The card-mosaic target mentions each card type a different accent. We could choose different border-left colors? But same grouped selector. Could use `border-left: 4px solid green` but that affects layout? border width not allowed? Border-width is in can change? Locked says border-color and border-style (NOT border-width). So border-width should not change. But original had no border. Adding border-width could affect layout. Avoid border-width except maybe 0. So set `border: 1px solid`? That changes border-width from 0 to 1, not allowed by "border-width not change"? It says "border-color and border-style (NOT border-width)" means if altering border, don't change width. Since original no border, adding 1px could change width. Avoid? But border-width is considered layout? In locked list under "🔄 CAN change": "border-color and border-style (NOT border-width)". So we can't change border-width; but can we add a border if no original? Adding border width is changing width. Should avoid. Better not use border at all, or use `outline`: "outline styles (color, type)" allowed; outline-width? It says outline-color, outline-style? Actually it says "outline styles (color, type)" maybe no width? Could use `outline: none`? Better avoid outline width. Could use `border-color` if already border exists? There is no border in original, but Bootstrap may set. To be safe, use `border: 0`? That might clear border from Bootstrap. But flat-solid defined by borders; hmm.

Given "NOT border-width" means we cannot set border-width. But maybe we can set `border-color` on existing default border? Default border-width is medium but border-style none, so no color. Adding border-style may create width? It's weird.

Maybe use `box-shadow: none` only. Use background-color and border-radius, no border. But then "defined by color contrast and borders" less. Could use `outline` with outline-width? No.

Instruction: "All color values: background, color, border-color, fill, stroke, outline-color" means can change border-color, but if no border, it's no visual. "border-color and border-style (NOT border-width)" means can add `border-style: solid; border-color: ...` but border-width remains from default or existing. If original no border-width, maybe default medium? But browser default border-width is 0 because border-style none? Actually if set border-style solid, used value of border-width is medium (3px) maybe. That could affect layout. Avoid.

Could use `outline: 1px solid`? Outline doesn't affect layout. But outline-width? It says outline styles color/type; perhaps allowed because outline doesn't affect layout. But "outline styles (color, type)" could include width? Hmm. To avoid width issues, use `outline: none` or `outline-color`.

Use `box-shadow: none` satisfies no shadow. But defined by color contrast and borders could use `background-color` contrast. Fine.

Need maybe for cards to have distinct elevation no shadows, use different background colors. We can use two different declarations by using existing selector list? Maybe we can add individual rules after the grouped rule? The original grouped selector is preserved; adding new rules with only one of the selectors may be okay. Let's evaluate "Every selector character-for-character preserved?" If we add `.contact-channels-section article { background-color: #... }`, we aren't preserving original selector? It is present as part of list in original. But the actual selector in new rule is a subset, not "character-for-character". That violates if strict. Better not.

Could use CSS variables and `--if`? no.

Maybe use new rule with @media? The selector `.contact-channels-section article` might be considered new. We want granular. But maybe accepted. However instruction says "Only the rewritten CSS, preserving ALL selectors and layout exactly" not necessarily "no new selectors." It says "Keep ALL selectors and layout exactly as-is" in task. If we keep the original selector list and add new selectors, are we violating? Could be. Let's avoid to be safe.

But can we add new rules for existing selectors? The first rule already addresses `.app-hero-section .row .col-lg-7`; the badge already; the contact cards already. No need.

Need maybe adapt the media query to target "card-mosaic": There is only one media query at max-width. Could possibly use `@media (prefers-color-scheme: dark)`? No, would add. Avoid.

Let's think if there is a way to give each card type a different accent without changing selector list: Use `background-color: var(--card-accent, teal)` on grouped selector and define `--card-accent` differently on `.contact-channels-section article`? That requires new selector. Could define `--card-accent` on `.contact-channels-section` parent? Existing selector? But no rule. Could add property