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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

We need to rewrite the CSS with visual changes only, while preserving selectors and layout properties. The original CSS is a media query block with three rules. We need to apply a "card-mosaic" target style with "sharp-edges" variant. But the given CSS has no colors, shadows, etc. It only has text-align, font-size, padding. Wait, we need to keep layout and typography unchanged. Font-size is typography, so we cannot change font-size. text-align is layout/typography? It's in the "text-align" allowed unchanged. Padding is layout, we can keep same or within ±20%. Actually the instructions say "padding, margin (keep similar values, ±20% maximum)". So we can slightly adjust padding but better to keep exact to avoid breaking. But the task is to refresh visual identity. The original CSS only has those properties. Since there are no colors/shadows/radius to change, we might need to add visual properties? But the instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." But if there are no such properties, we can add them? The output should preserve all selectors and layout exactly. We can add color, background, border, box-shadow, etc. But we must be careful: adding properties to selectors is allowed? The instruction says "Only change colors, shadows, radius, transitions, gradients." That means we can modify existing ones or add new ones, but we should not change layout/typography. Since the original has no visual properties, adding them will refresh the visual identity. But we must also consider that the selectors are within a media query. We need to output the same media query and same rules.

Let's examine the rules:

1. .app-hero-section .row .col-lg-7 { text-align: center; } — This is a layout/typography property. We cannot change text-align. We can add visual properties? We could add color, background, but that seems weird for a column. Maybe we shouldn't add random properties to elements that don't need them. The target style is "card-mosaic", but this CSS doesn't target cards. However, the task is to refresh "this CSS" specifically. The original CSS has only these three rules. We need to modify what we can. The only mutable properties in these rules are: padding (can adjust within 20%), font-size (cannot change), text-align (cannot change). But wait, font-size is in the second rule: .app-hero-section .badge.bg-warning { font-size: 0.85rem; }. Typography is fixed, so we cannot change it. So we cannot change anything? That's not acceptable.

Perhaps the intent is that we can add visual properties to these selectors even if they weren't originally there, as long as we don't alter layout. For example, add a background color to .contact-card, add box-shadow, border, etc. But the selectors include .app-hero-section .badge.bg-warning — we could add color, background-color, border, box-shadow, etc. Similarly for .contact-channels-section article, .contact-quick-section .contact-card — these are card-like. We can add border-radius, box-shadow, border, background, etc.

But we must not change layout: no display, position, sizing, etc. Adding background/border/box-shadow is fine.

Also note the "sharp-edges" variant: hard offset shadows, 0-4px border-radius, strong borders, snappy transitions. We can apply that.

We need to keep the media query condition exactly: @media (max-width: 575.98px). The selectors exactly.

We can adjust padding slightly but not necessary. The padding in third rule is var(--space-md). We cannot change the custom property value? Actually CSS custom properties are allowed to change? The instructions say "CSS custom properties (--color-*, --shadow-*) values" can change. But --space-md is not a color/shadow. So we should not change that. It's a spacing variable, which is layout. So keep padding the same.

We can add new properties to each rule. Let's decide what to add:

For .app-hero-section .row .col-lg-7: Maybe we don't want to add a background to a column. But perhaps we can add text-shadow? Or color? The hero section column. "card-mosaic" implies vibrant cards on neutral background. But this selector is a column, not a card. Adding a background to a column might change visual identity. Could add a subtle color? But the instruction for "Aggressive only" is target style description, not necessarily something to apply to every selector. We're in conservative mode, but the style variant is "sharp-edges" for effects. We need to "refresh visual identity". If the original has no visual properties, we can add some to the card-like elements. The third rule has .contact-card, which is clearly a card. The second rule has a badge, which could have a background color. The first rule is a column, maybe not.

Maybe we should interpret the task as: Given the CSS, replace all color-related properties with a fresh palette, and redesign shadows/radius. Since there are none, perhaps we should not invent properties that could alter the design unexpectedly. But the task explicitly says "You MUST CHANGE: All color values, box-shadow, text-shadow, border-radius, gradients, transition, filter, backdrop-filter, opacity, outline, border-color, caret-color, accent-color, CSS custom properties (--color-*, --shadow-*) values." There are none. In that case, we might output the CSS unchanged? But that wouldn't be a refresh.

Alternatively, we can add new declarations that are within the allowed categories. For example, we can set a background-color, color, box-shadow, border-radius, transition to each rule. That would change the visual identity. We need to ensure that we don't accidentally change layout.

Let's think: The first rule .app-hero-section .row .col-lg-7 { text-align: center; } — adding a color to text is allowed (color property). But changing text color might be fine. Adding a background to a column might be too much. We can add a vibrant gradient or background? But columns often shouldn't have backgrounds. Yet the target style is "card-mosaic" with vibrant card colors on neutral background. Maybe we can add a background color to the column to make it stand out? But the column spans maybe 7 columns, adding a background could alter the look. But the instruction says "visual identity" changes, so it's okay. However, we should be careful not to break readability.

Perhaps the safer approach is to focus on the card elements. The third rule has .contact-channels-section article and .contact-quick-section .contact-card. These are card-like. We can add background, border, box-shadow, border-radius, transition. The second rule .badge.bg-warning: we can change the background-color? But .bg-warning is a Bootstrap class. If we set background color, we might override the bootstrap warning color. But the selector is more specific, so it's fine. We need to keep the class name .bg-warning exactly, but we can change its background color. Since the instruction says "all color values" should be changed to fresh palette. We can set background-color to a vibrant accent.

But note: The media query is for max-width 575.98px (mobile). The original only sets font-size for badge, text-align for hero, and padding for cards. It might be that the desktop styles are elsewhere. Our changes will only apply on mobile. That's fine.

Let's design a cohesive refresh while preserving layout. We'll add:

- To .hero-section .row .col-lg-7: maybe add a color (text color) and text-shadow? But text-shadow is allowed. Could set color to a dark slate and text-shadow to a subtle hard shadow? Sharp-edges variant: text-shadow: 2px 2px 0 rgba(0,0,0,0.1). But that might look odd. Alternatively, we can add a background color to make a hero panel? But the column is inside a row, changing background could be heavy. Perhaps simple: add a color to text and maybe a subtle background for the column? Let's see.

The "card-mosaic" target style: "Vibrant card colors on neutral background". The cards are the contact cards. The hero column isn't a card, but we can still add a neutral background to the whole page? There is no body selector here. We can only modify these selectors.

Let's parse the original 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;
    }
}
```

There are 3 rule sets. We will rewrite each, keeping the existing declarations but adding new visual declarations. We can restructure the order of declarations, but that's not necessary. Let's keep the original declarations intact and add new ones. We must ensure the visual properties are new.

For the first rule:
- Keep text-align: center.
- Add color: #1e293b? But we need fresh palette. Let's choose a palette. "Vibrant card colors on neutral background". For a neutral background, maybe #f8fafc. For text, maybe #0f172a. But the hero section maybe has a dark background already? We don't know. Adding a color could be okay.
- Add text-shadow: 2px 2px 0 rgba(15, 23, 42, 0.1) — sharp edges.
- Maybe add background? Not necessary.

For the second rule:
- Keep font-size: 0.85rem.
- Add background-color: a vibrant yellow? But .badge.bg-warning already has a yellow background. We can change to a custom vibrant accent like #f59e0b or #fbbf24. To be fresh, maybe use a bright orange or pink. But we don't know the overall context. We can choose a vibrant palette: for warnings, maybe #ff6b35 (vivid orange). Or #eab308 (yellow).
- Add color: #1e293b (dark text for contrast).
- Add border: 2px solid #1e293b (strong border).
- Add box-shadow: 4px 4px 0 0 #1e293b (hard offset).
- Add border-radius: 0 (sharp edges), but a badge might have pill shape? The original class .badge in Bootstrap often has border-radius: 50rem. If we set border-radius: 0, we change the visual shape, which is allowed (border-radius is visual). But we need to be careful: the badge might be intended to be pill-shaped. The target style is sharp edges, so 0-4px is fine. Let's set 0 or 2px.
- Add transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease? But transition is allowed. We can add a transition. However, adding transform in transition doesn't change layout, but if we don't have a transform on hover, it's harmless. We can just transition background-color, color, box-shadow.
- Maybe add padding? No, padding is layout, keep as is. The badge might have its own padding from Bootstrap, we don't need to change.

For the third rule:
- Keep padding: var(--space-md) !important.
- Add background-color: #ffffff? But cards should be vibrant. Different card types each a different accent. We have two selectors in a list: one for article in contact-channels-section, one for .contact-card in contact-quick-section. We can apply different background colors to each. But the rule is combined. We cannot easily differentiate within the same rule without splitting the selector. However, we can split the rule into two: keep the combined selector? The instruction says "Selector lists (commas)" are preserved exactly. We must keep the selector list as a single rule. If we split, we would alter the selector. So we need to keep the combined selector. That means both elements get the same visual properties. If we want different colors per card type, we would need additional rules, but we cannot add new selectors because the HTML is fixed and we must preserve selectors exactly. Actually, can we add new rules? The instruction says "Only the rewritten CSS, preserving ALL selectors and layout exactly." It implies we should preserve the existing selectors, but can we add new selectors? It doesn't explicitly forbid adding, but "rewritten" suggests the same structure. The task: "Output the rewritten CSS now" with "Goal: same layout, fresh color palette + shadow/radius identity". Adding new rules might be acceptable if they don't change layout. But the instruction also says "Keep ALL selectors exactly as-is." That probably means every selector in the input must remain. It doesn't necessarily forbid adding new ones. However, to be safe, we should not add new selectors because that would be modifying the CSS structure. We can only modify declarations within existing rules.

Thus, in the combined rule, both .contact-channels-section article and .contact-quick-section .contact-card will get the same background, border, shadow. That's okay; they are both cards in the mosaic, maybe all cards have the same neutral background with different accents via other existing classes. But the target style says "Each card type a different accent" — we cannot do that without additional rules. But we can vary the accent inside the card through other means? Maybe not.

Alternatively, we can split the rule? No.

We can change the padding? The instruction allows ±20%. But we don't need to.

Let's choose visual properties for the cards:
- Background: #ffffff (neutral card background) or a subtle off-white #fef3c7? The "vibrant card colors" suggests maybe the cards themselves are colored, not the background. "Each card type a different accent" — but we can't differentiate. Perhaps the contact-card and article are different types but share the rule. Could set a gradient background that includes multiple colors? E.g., linear-gradient(135deg, #ff6b35, #f7c948). That would be vibrant but same for both. Or we can set a solid accent color like #4f46e5 for both.

Given "sharp-edges" variant: strong border, hard offset shadow, small border radius. Cards should have:
- background: #ffffff (so the hard shadow and border pop). But "vibrant card colors" suggests the cards themselves are colorful. Maybe use a light pastel: #fff3e0 (orange-ish) for one card type and #e0f2fe for another. But can't separate. We could use a CSS variable? But no custom property defined. We could set the same background using a linear-gradient that has different color stops, but both same.

Perhaps we should not overthink. The target style is "Aggressive only" but we are in CONSERVATIVE mode? The instruction says "Refresh the visual identity WITHOUT changing layout structure or class names." The target style is provided as a direction. We should implement the sharp-edges variant on the card elements.

Let's decide on a cohesive palette:

Palette: "card-mosaic" — vibrant cards on neutral background, but we don't control background. Maybe set card background to #ffffff, border to #111111, box-shadow: 6px 6px 0 #111111. The accent colors could be through border or a top border? We can add a border-left with a vibrant color? That's allowed (border-color). But border-width is constrained: we must not change border-width? Actually the "NEVER CHANGE" list doesn't include border-width. It says "border-color and border-style (NOT border-width)" are in the "MUST CHANGE" list? Wait, let's re-read.

✅ MUST CHANGE:
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)
  • text-shadow
  • border-radius (visual rounding only)
  • gradient colors and stops in linear/radial/conic-gradient
  • transition timing, easing, duration
  • filter, backdrop-filter
  • opacity
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
  • caret-color, accent-color
  • CSS custom properties (--color-*, --shadow-*) values

🔒 NEVER CHANGE:
  • ...
  • There is no mention of border-width. So border-width is not in the never-change list. But it's likely layout-affecting? Border width can affect box size and layout. However, the "NEVER CHANGE" list doesn't include it, but to be safe, we should not change border-width because it could affect layout. The instruction says "Only colors, shadows, and decorative properties may change." Border-width is arguably layout-affecting. So we should keep border-width unchanged. But the original has no border-width declarations. If we add a border, we are adding a new border-width, which could affect layout because the element's border-box may change. Adding a border to an element that previously had none will increase its size unless box-sizing: border-box is set. We don't know. To avoid layout shift, we should not add border-width to elements that didn't have it, unless we use box-shadow or outline, which don't affect layout. The instructions mention border-color and border-style, but not border-width. To be safe in conservative mode, we should avoid adding border-width. Instead, we can use box-shadow for the "strong border" effect? The sharp-edges variant says "Strong borders (2-3px solid)." But adding border-width might break layout. However, if the target style demands strong borders, and we are allowed to change border-color and border-style, maybe we can add a border only if we also compensate with padding? But padding is layout and we can change within ±20%, but we don't know original padding. Hmm.

Given that the original selectors don't have borders, adding a 2px border will likely change the computed size. But the elements are likely block-level or flex items; adding a border could cause reflow. In a media query for mobile, it could affect layout.