/* ============================================================
   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 CSS only. Need follow instructions. Need rewrite provided CSS but visual only. The original is small media query. Need keep selectors exact. Can change colors, shadows, radius, transitions etc. But there are only layoutish properties text-align and font-size and padding. Padding can vary ±20%. text-align and font-size protected? font-size protected cannot change. text-align protected. padding can adjust ±20% of original. But only visual changes possible within this snippet. Need produce rewritten CSS with same selectors. Need maybe add visual properties like color, border-radius, box-shadow? But elements targeted are article/card maybe can add border/color. Need preserve padding within ±20%: original padding: var(--space-md) !important; Need know --space-md maybe 1rem? Could keep same. To be "fresh palette, shadows" perhaps add colors, border, border-radius, box-shadow, transition, etc. However this is a media query with only selectors; adding extra declarations is okay as long as no layout changes? Need avoid display/position etc. Colors/shadows/radius okay.

Need target style "card-mosaic" but no grid changes because HTML fixed? We can add visual accents. Need maybe create shadow and border to cards. But selectors include "article" and ".contact-card". We can set border, background, box-shadow, border-radius, transition. But must be careful: maybe original CSS didn't include those; adding them could change visual identity but okay.

The target style also asks "sharp-edges" with hard offset shadows. Need use 4px 4px 0px solid color? That's box-shadow maybe "4px 4px 0px #..." not solid color. Border radius small.

Need maybe adjust backdrop etc. We can also replace border-color? There are no colors originally.

Need preserve all selectors exactly. The media query condition must remain. Could add new declarations inside. Need maybe add to `.app-hero-section .badge.bg-warning` visual color? But font-size unchanged. Maybe add color, background, border, box-shadow. However `.badge.bg-warning` already has Bootstrap bg-warning; changing background-color maybe can work. But must be careful with "!important"? We can add `background-color: #f59e0b !important;`? That is visual. But if we change background-color of badge with `!important` might be okay. But target palette vibrant card colors. We can add.

But the original CSS has no colors, only three rule blocks. The task likely expects to rewrite CSS with new palette. Since no colors in original, we need infuse colors.

Need ensure no invalid CSS? For `.app-hero-section .row .col-lg-7` text-align: center; cannot change text-align per protected. So keep. We can add color perhaps? But text-align and visual. Same selector. Maybe add `color: #2a1e2f;`? That changes text color. Okay. But target style card-mosaic maybe not necessary.

Need maybe adjust padding ±20%. For `.contact-channels-section article, .contact-quick-section .contact-card`, padding: var(--space-md) !important. Keep as is. Maybe add background, border, box-shadow. Need avoid changing layout. Good.

Need no markdown fences. Need output first character CSS. Let's craft.

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

Need preserve selectors, media query. We can add properties. Need maybe change `font-size`? Cannot. Keep. Add `letter-spacing`? protected, don't.

Need maybe ensure no property changes create layout. `width`, `height` no. `box-sizing` no. Good.

Need maybe include `--space-md`? Can't define custom property? It might affect layout if --space-md used elsewhere? But we're not changing value. Could define `--shadow-color: ...`? But not necessary.

Need target style "sharp edges": border-radius: 0; box-shadow: 4px 4px 0px #000; border: 2px solid #000; transition: box-shadow 0.15s ease; Background maybe.

Need "Vibrant card colors on neutral background": maybe article background #fef08a? But each card type different accent? Contact channels article and contact quick cards. We can use distinct colors:
- `.contact-channels-section article`: `background-color: #fef3c7; border: 2px solid #111; border-radius: 0; box-shadow: 5px 5px 0 #f59e0b;`
- `.contact-quick-section .contact-card`: `background-color: #e0e7ff; border: 2px solid #1e1b4b; border-radius: 0; box-shadow: 5px 5px 0 #6366f1;`

Need preserve selector list? We could split into two rules? The instruction says selector lists preserved? "Selector lists (commas)" under never change. Should preserve exactly. So keep combined selector and set common properties. Cannot assign different colors to each. Could maybe within one rule use CSS variables? No. Could use `.contact-channels-section article {}` separately, and `.contact-quick-section .contact-card {}` separately, but then the combined rule must remain? The original combined rule includes both. To avoid changing selector structure, we should keep combined. But we can also use descendant selectors separately additional rules, but that adds selectors. Is that allowed? The output should preserve all selectors exactly? It says "Every selector character-for-character preserved?" It doesn't necessarily forbid adding rules, but "HTML is FIXED — only colors, shadows, and decorative properties may change" and "Keep ALL selectors and layout exactly as-is" and "Only change colors, shadows, radius, transitions, gradients." Adding new selector rules with color is okay? But "FRESH palette" maybe can add. However they asked "Output rewritten CSS now" preserving all selectors. Usually safely preserve all rules and selectors, maybe add declarations. But adding new selectors could be considered changing selectors? Since "selector lists" must remain; adding declarations to existing selectors best.

Let's inspect original: no colors, so to meet "all color values replaced" impossible. Need add. Could also set `border-radius: 0;` on elements. Good.

Maybe the best approach:
- In first rule, add `color: #2d2a26;` and maybe `text-shadow: 0 1px 0 rgba(255,255,255,0.6);`? But text-shadow okay. However on centered hero, adding text-shadow maybe okay.
- In second rule, add background-color: #facc15; border: 2px solid #0f172a; border-radius: 0; box-shadow: 3px 3px 0 #0f172a; color: #0f172a; transition: transform? no transition is okay but transform property? transition can include transform, but actual transform maybe not. Adding `transition: box-shadow 0.15s ease, background-color 0.15s ease, transform 0.15s ease;` but transform not set; okay. But transition is visual. Could add `transform`? No, layout? transform is visual, not layout? But position? It may move. Not needed.
- For combined rule: add `background-color: #fff7ed; border: 2px solid #1c1917; border-radius: 0; box-shadow: 4px 4px 0 #1c1917;` But then both same. But original combined rule, adding background to both. We could also add `transition: box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;` okay.

Need maybe include `outline`? no.

Need perhaps set `accent-color`, `caret-color`? Not applicable.

Need maybe "gradient colors" not in original. We can add `background-image`? For hero or card? Could use linear-gradient? But if we add background-image while respecting background-color? On cards, gradient would be okay. Need no layout. Maybe `background-image: linear-gradient(135deg, #fef3c7, #fde68a);` etc.

However the target style "card-mosaic" mentions "Each card type a different accent" but selector list restricts. We can maybe use `&`? No.

Alternative: Use CSS variables? No, same rule can set variable to accent maybe not per element.

Could add separate after combined? It's okay? Let's consider instruction "NEVER CHANGE ... Selector lists (commas)" meaning in original selector list should remain. We can preserve it. Adding additional rules isn't changing original selector list. But they might not want additional selectors because HTML fixed? It's not HTML, CSS selection. "Keep ALL selectors" doesn't mean no new selectors. But "Output only rewritten CSS, preserving ALL selectors and layout exactly" likely means don't change selectors, but adding new selectors could be okay if targeting same elements. However to avoid risk, keep only existing selectors. Could still use exact selector list and use CSS `:not()`? no.

Maybe we can split out to allow different colors:
```
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
}
.contact-channels-section article {
    background-color: #...
}
.contact-quick-section .contact-card {
    background-color: #...
}
```
This adds the original combined rule plus two new rules. But "Every selector character-for-character preserved" — the original combined selector is preserved. Additional selectors are new, but not changed. The instruction "NO AI marker comments" fine. But maybe they want exact CSS with same selectors; adding rules would be a change to CSS structure. Is that acceptable? Usually "Refresh this CSS" can add declarations, but should avoid adding selectors. Yet to achieve card type accents, we might not need.

Could use CSS variables with selectors that use original combined rule? Define variables on parent? We don't have parent selectors. We could in combined rule set `background-color` only. That may be enough.

Need maybe adjust padding within ±20%. Original uses `var(--space-md)`. Keep exactly if unknown. Could change to `calc(var(--space-md) - 2px)` maybe within range, but no need.

Need maybe include comments? no.

Let's think like CSS designer: We need produce completely refreshed visual identity. The original CSS is tiny, so the bulk of visual change must come through added declarations. Need maybe use `color-scheme: dark`? Could add to root but no.

Could maybe use `@media` same. Within media, add:
```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1e1b2e;
        text-shadow: 0 2px 0 rgba(255, 255, 255, 0.3);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fbbf24, #d97706);
        border: 2px solid #1c1917;
        border-radius: 0;
        box-shadow: 3px 3px 0 #1c1917;
        color: #1c1917;
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #fff7ed;
        border: 2px solid #1c1917;
        border-radius: 0;
        box-shadow: 4px 4px 0 #292524;
        transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    }
}
```
Need check "background" vs background-color okay. If we set `background:` gradient, that's visual. `border-radius: 0` okay. `border` shorthand: sets width 2px; is that allowed? "border-color and border-style (NOT border-width)" Wait they say NEVER CHANGE: "border-color and border-style (NOT border-width)" That's confusing: In "MUST CHANGE" they list border-color and border-style, but "NEVER CHANGE" says "border-color and border-style (NOT border-width)"? Let's read prompt:

"⚠️ Previous attempt didn't change enough..." etc.

"YOU MUST CHANGE ... All color values: ..., border-color, fill, stroke, outline-color ... border-color and border-style (NOT border-width)"
Actually in "MUST CHANGE" includes "border-color and border-style (NOT border-width)"? Let's parse: In MUST CHANGE bullet list:
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow ...
  • ...
  • border-radius
  • gradients ...
  • transition ...
  • filter...
  • opacity
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
  • caret-color, accent-color
  • CSS custom properties ...

So border-color and border-style are allowed/required to change. "NOT border-width" means shouldn't change border width. So if original no border, can we add border width? Hmm "border-color and border-style (NOT border-width)" means don't change border widths. If original has no border, adding border-width 2px introduces new width. Is that allowed? It says "border-color and border-style (NOT border-width)" — likely means we may change colors/styles, but not width values. But if adding border where none existed, it's changing border-width from 0 to 2px. That could influence layout if box-sizing content-box. But generally adding border changes layout. Since layout protected, adding border-width may break. So we should avoid adding border width if original didn't have it. But maybe can use `outline`? Outline doesn't affect layout. But they say outline styles can change. However to get "strong borders (2-3px solid)" from target style, we might need border. But if border-width changed from none, could violate "NOT border-width". But we can use `outline: 2px solid #...` or `box-shadow` for border-like edge. Box-shadow doesn't affect layout. But target says strong borders. Could use `box-shadow: 0 0 0 2px #1c1917, 4px 4px 0 #...`; that creates border effect without layout. That's safer. But maybe adding `border: 2px solid` is common. Let's check if original CSS has no border declarations at all; adding border width might be considered a layout change. The instructions "NEVER CHANGE ... width, height, padding, margin" not border. But in MUST CHANGE they mention border-color and border-style (NOT border-width). This is ambiguous: They might mean border-width is part of layout? The "NOT border-width" probably from a list of allowed changes saying border-color and border-style can change but border-width cannot. Therefore no new border widths. So use `box-shadow` with 0 0 0 2px to emulate border, plus offset. That changes color, shadow, radius; no layout.

Similarly `background-image` gradient won't affect layout. `border-radius` is explicitly allowed.

Transition property is visual, but if adding transition to properties that don't exist okay. Need not include `transform`.

Need maybe set `color` in first rule. For `.app-hero-section .row .col-lg-7`, adding color and text-shadow. Text-shadow doesn't affect layout. Good.

Need maybe for `.badge.bg-warning`, adding background gradient, box-shadow, color, border-radius. The badge will change visuals. Instead of border, use `box-shadow: 0 0 0 2px #1c1917, 3px 3px 0 #1c1917;` But box-shadow's second layer with 3px 3px 0 is offset hard shadow, no spread? Actually `box-shadow: 0 0 0 2px #1c1917, 3px 3px 0 0 #1c1917;` Need double `0 0 0 2px` to outline. Or `0 0 0 2px` with no color? Syntax: `box-shadow: 0 0 0 2px #1c1917, 3px 3px 0 0 #d97706;` This yields a "border" and offset shadow. But box-shadow doesn't expand layout. Good. However if element has border radius, box-shadow with spread follows radius. Good.

Need maybe set background-color to a custom property? Not necessary. Could use `background: linear-gradient(...)` plus `background-color`.

Need maybe for combined rule: set `background-color: #fafaf9;` or gradient? But if these elements are maybe cards with padding, background color changes visual. We can set `background-color: #fdf6e3;` or `#fff7ed`. But "card-mosaic" says vibrant card colors on neutral background. We can make them `#fef9c3` (yellow), `#ede9fe` (purple). But combined selector cannot differentiate. Could use same `#fef9c3` and rely on surrounding? Hmm.

Maybe we can use a CSS variable in combined rule that default is one accent, then override for one subtype with an additional rule. But additional rules maybe okay. But to be safe, maybe not. Yet the target style says each card type a different accent; but maybe not necessary given only two card types. Let's decide.

We can preserve combined selector and also add individual rules after it. Does adding rules break "same selectors"? It doesn't remove. It will apply specific colors. I think it's acceptable because "Refresh this CSS" not "do not add selectors". But the system says "HTML is F