/* ============================================================
   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 given CSS while adhering to the constraints: only visual properties like color, shadow, radius, transitions, gradients, etc., can change. Layout properties must remain unchanged. The original CSS snippet is a media query with three rules. We need to preserve selectors exactly, and layout properties (like padding, font-size, text-align) cannot be changed. Wait: the rule "contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }" contains padding, which is a layout property. According to instructions, padding is in the "NEVER CHANGE" list, but we are allowed to change padding by ±20% maximum? Actually the list says: "padding, margin (keep similar values, ±20% maximum)". So we could adjust slightly, but the target style is flat-solid with minimal radius, but no need to change padding. We should keep padding as is, or perhaps adjust slightly within 20%, but there's no need. The instruction says "Only change colors, shadows, radius, transitions, gradients." Also "border-color and border-style (NOT border-width)" can change. But the original CSS has no colors or shadows. It's just a media query with text-align, font-size, and padding. So there's nothing to refresh? But the task expects us to output rewritten CSS. Maybe we need to add visual properties? No, we cannot add new declarations? The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." But the original rules don't have any of those. We might add color/background/etc. to these elements? That could be considered a "visual identity" change, but the selectors are specific to a mobile media query. Adding new properties is allowed? The instruction says "Only change colors, shadows, radius, transitions, gradients." That implies we can modify existing properties, but not necessarily add new ones. However, the goal is to refresh visual identity, so adding color might be acceptable. But we must not change layout. Adding background, color, border, etc. would be visual. But we must be careful not to change the existing properties. The existing properties are text-align, font-size, padding. We cannot change text-align (it's in the never-change list? Actually text-align is listed under "never change": "text-align, vertical-align". Yes, text-align must not change. font-size is typography, also never change. padding is layout, can change ±20% but better not. So we cannot change anything in the first two rules except maybe color? But they don't have color. We could add color to the text? But that might be beyond scope? The instruction says "Only change colors, shadows, radius, transitions, gradients." It doesn't explicitly say "add" but "change". Since there are no such properties, perhaps we could add them to the elements? However, adding new declarations to existing rules might be considered changing the CSS, and as long as we don't alter layout properties, it's fine. But the original CSS is short; maybe the intent is to apply a visual refresh to these specific elements on mobile. But we need to output a rewritten CSS that preserves all selectors and layout exactly. The safest approach is to keep the rules as-is but perhaps add color, background, border, etc. to the elements within those selectors, and maybe modify the padding within ±20% if we want a new spacing feel. But the target style "flat-solid" with minimal radius, vibrant cards on neutral background. The mobile media query contains elements like .app-hero-section .badge.bg-warning and contact cards. We could add color and background to those. But the original rules only set text-align, font-size, padding. Adding color would not break layout. But is it allowed? The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." This likely means we should modify the values of such properties where they exist, and perhaps introduce them if they are absent? The target style is a "card-mosaic" layout pattern, but the original CSS has no grid or card layout. It's just a media query. This seems like a mismatch. Maybe the file fingerprint and the request are generated, but the actual CSS snippet is just a small part. We are to rewrite only this snippet, not the whole file. The snippet doesn't contain any color or shadow, so the only way to "refresh" is to add visual properties to the existing selectors. But we must be careful: adding properties like background or color could affect layout? No. But could it affect text visibility? Fine.

Let's inspect the original selectors:
1. `.app-hero-section .row .col-lg-7` — a column in the hero section. On mobile, text-align center. We could add color? But that might change text color generally. Perhaps better not to add properties that alter the design globally. The instruction says "Only change colors, shadows, radius, transitions, gradients." That means we can change existing declarations of those types; if none exist, we can add them? The wording "change" might not permit adding. But the goal is a visual refresh; if there are no such properties, adding them is the only way. However, the conservative mode says "HTML is FIXED — only colors, shadows, and decorative properties may change." That suggests we can add or modify decorative properties. So we can add color, background, etc. to the selectors. But we need to output a CSS file that is a refresh of the original. The original is a media query; we should keep the media query and its conditions exactly. We can add new declarations inside each rule. But we must not remove the existing declarations. We must keep text-align, font-size, padding values. We can change padding slightly, but it's better to keep exactly since it's already using var(--space-md). Actually padding is var(--space-md), we cannot change that because it's a custom property value? We could change the custom property? No, that would affect elsewhere. We must keep padding: var(--space-md) !important.

Let's consider the target style: "card-mosaic" and "flat-solid". The target says "Vibrant card colors on neutral background", "Each card type a different accent", "box-shadow: none everywhere", "Solid background colors only (no gradients)", "Minimal radius (0-6px)". This style should be applied to the elements in the media query? The hero section on mobile maybe needs a card-like appearance? The contact cards are already cards. So we can add background, border, border-radius to the contact cards, maybe to the badge. But we must not change layout. Adding border-radius to elements is allowed (visual). Adding background to elements is allowed. But we should be careful: for `.app-hero-section .badge.bg-warning`, we could change the background to a vibrant color, but that would affect the badge's appearance. That's visual. We could also add a border. The existing class `bg-warning` likely sets a Bootstrap background color. We could override it with a new accent color. That is allowed.

But the instruction says "Only change colors, shadows, radius, transitions, gradients." It doesn't say "add". But we can add new declarations as long as they are of these types. For example, in the first rule, we could add `color: #333;` and `background: #fff;`? But that might change the hero text color globally. Better to keep minimal.

Maybe the best approach is to rewrite the CSS exactly as-is, but if there are no visual properties, then we cannot "change" anything. But the task demands output. Perhaps the original CSS is a fragment from a larger file, and the system expects us to output the same fragment with any applicable changes. Since there are no colors, we could add a comment? No comments allowed. We could add `transition: background-color 0.3s ease;`? That's a transition, allowed. But transitions need something to transition. Adding a transition to elements is harmless. We could add `border-radius: 6px;` to the contact card on mobile. But the contact card may already have a radius in the base styles; overriding in mobile is acceptable. But we must keep the existing padding.

Let's examine each rule:

1. `.app-hero-section .row .col-lg-7` — currently text-align: center. We can add color, maybe a font color? But the hero section likely has text. To apply vibrant card colors? This element is a column, not a card. Adding a background might create a card look, but that could be too aggressive and might change layout? Background doesn't change layout. But if we add a background to a column, it might create a card-like block. That's a visual change. But the target style is card-mosaic, which is aggressive, but we are in conservative mode? The "Target Style" says "card-mosaic" and "Layout pattern (Aggressive only)" but mode is conservative? Actually the file header says "MODE: 🛡️ CONSERVATIVE (HTML fixed, visual changes only)" and then "TARGET STYLE: card-mosaic" with "Layout pattern (Aggressive only)"? That seems contradictory. The instruction at the top: "You are an expert CSS designer in 🛡️ CONSERVATIVE MODE." So we are conservative, not aggressive. The target style description is probably generic, but we should apply only visual changes, not layout. The "Layout pattern (Aggressive only)" note says not to change layout. So we must not introduce grid spans. We can only alter colors, shadows, radius, transitions, gradients. So the card-mosaic layout pattern is informational; we can't implement it because that would require layout changes. We can only use its color palette and flat-solid effect. So we should apply flat-solid: no box-shadow, solid backgrounds, minimal radius.

Given that, the original CSS has no shadows, so no box-shadow to remove. It has no radius, so we can add minimal radius to cards. It has no background colors, so we can add vibrant colors to specific elements. But adding background to a column could be considered a "card" visual. Let's see the selectors:

- `.contact-channels-section article` — these are likely article cards.
- `.contact-quick-section .contact-card` — these are contact cards.
So we should give these a flat-solid card look: a solid background, a border (maybe), minimal radius (0-6px), no box-shadow. Also, maybe add a border-left accent? But we can't add pseudo-elements? We can add border. We can also change padding slightly? But padding is set to var(--space-md) !important; we should keep it, or maybe change to calc(var(--space-md) * 0.9)? That would be a change within ±20%? But the instruction says "keep similar values, ±20% maximum" for padding. However, `var(--space-md)` is a variable, changing it to a different value would be a change. We could change it to `var(--space-sm)`? That would be a bigger change. Better to leave as-is.

- `.app-hero-section .badge.bg-warning` — badge, font-size changed to 0.85rem. We can override background color to a vibrant accent, add border-radius, maybe a border.

- `.app-hero-section .row .col-lg-7` — the column. We could add a background and padding? But padding is not set here. We could add padding, but that would be a layout change? Adding padding changes layout. We should avoid adding padding or margin. We could add a background color to create a card, but without padding, the background would be flush against text. That might be ugly. So better not add background to the column. We could add `color` to ensure contrast? But the original probably has color from base styles. We can set a color.

Maybe the intent is to refresh the entire file, but we are given only a fragment. The system expects us to process the fragment. Since there are no visual properties, the safest is to output the same CSS with minor tweaks that don't break anything, such as adding `border-radius: 6px;` to the badge and contact cards, and adding `transition: background-color 0.2s ease, border-color 0.2s ease;` to cards. We can also change the `bg-warning` background color to a new accent. But we need to know the existing colors? Not provided. We can invent.

Let's think about the "flat-solid" effect: defined by color contrast and borders, minimal radius (0-6px), no box-shadow. So we can add a solid background and a border to the card elements. For example:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #f59e0b;
        border: 1px solid #b45309;
        border-radius: 4px;
        color: #1a1a2e;
    }

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

But adding a background to article and contact-card may already have background from base. We can override. But we must be careful not to change layout. Adding border uses border-width, but the instructions say "border-color and border-style (NOT border-width)" can change. Wait, "border-color and border-style (NOT border-width)" means we can change color and style, but not width. It doesn't say we can add border-width if absent. If the original has no border, adding `border: 1px solid ...` introduces a border-width of 1px, which is a layout change because it takes space. Actually border-width does affect layout. The never-change list doesn't explicitly list border-width, but the "can change" list says "border-color and border-style (NOT border-width)". So we are NOT allowed to change border-width. That means we cannot add a border if there is no border, because that would set border-width. We could use `outline` instead? But outline is allowed: "outline styles (color, type)" can change. Outline does not affect layout. We can add an outline to create a border-like visual without affecting layout. Or we can use box-shadow, but the flat-solid effect says box-shadow: none everywhere. So we cannot use box-shadow. We can use outline with a solid color. Outline is allowed and doesn't affect layout. So we can add `outline: 1px solid ...`? The instruction says "outline styles (color, type)" can change. It doesn't say outline-width, but outline shorthand includes width. Better to use `outline-color` and `outline-style` without width? But then it uses the default outline width? Actually if you set `outline-style: solid; outline-color: red;`, the outline width defaults to medium (3px). That could be visual. We can set only color and style. We could also use `border-color` and `border-style` if a border already exists, but if not, adding style would still default width. Better to avoid border width. We can use `background` (solid) and `border-radius` without border. The flat-solid effect says "Defined by color contrast and borders" — but we can use background and outline to simulate.

Alternatively, we can set `outline: 1px solid`? The "outline styles (color, type)" might allow shorthand? The prohibited list says "outline styles (color, type)" can change, meaning the values of color and type. It doesn't say outline-width. But we can interpret that we can modify outline properties, but not layout. Since outline doesn't affect layout, adding a width is probably acceptable as long as it's not layout-affecting. But the self-check says "border-color and border-style (NOT border-width)" — that's specifically for border. For outline, it says "outline styles (color, type)" — likely outline is visual and okay. So we could use `outline: 2px solid #...;` to create a border effect. But the flat-solid effect says no box-shadow, minimal radius, solid colors. An outline is fine.

However, we must ensure we don't change the layout. Adding outline doesn't change layout. So we can add outline to cards. But we need to be careful: outline might overlap with other elements? It doesn't affect layout but can be visually intrusive. We can use a subtle outline.

Maybe we don't need to add anything. The original CSS is minimal; perhaps the correct response is to output it exactly as-is, because there are no visual properties to change. But that would not be a "refresh". The task explicitly asks to rewrite the CSS, so we must produce altered CSS.

Let's read the instruction carefully: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." This could mean that we should only change the values of those properties if they exist, not add new ones. But the target style "flat-solid" says "box-shadow: none everywhere" — if there were box-shadows, we'd remove them. There aren't. "Minimal radius (0-6px)" — we could add radius. "Solid background colors only" — we could add background color. So adding is probably intended.

The "can change" list includes "border-color and border-style (NOT border-width)" — so if we add a border, we must not set border-width. But we can set border-color and border-style; border-width would default to medium (3px) or maybe 0 if not set? Actually if you set `border-style: solid`, the width defaults to medium (3px). That would affect layout. So we shouldn't use border-style without width? But the instruction says "border-color and border-style (NOT border-width)" — I think it means you can change those properties, but you cannot change the width. If the original had `border: 1px solid red`, you could change `border-color` to blue and `border-style` to dashed, but you cannot change the width. If there is no border, adding `border-color` without width has no effect if `border-style` is none.