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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

The user wants me to rewrite a CSS file with a conservative mode, meaning I can only change visual properties like colors, shadows, radius, transitions, gradients, etc. But the original CSS is very minimal—it only contains a media query with three rules that mostly deal with text-align, font-size, and padding. Let me look at each rule:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — text-align is a layout property that I cannot change. So this stays as-is.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — font-size is typography, cannot change. So this stays.

3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — padding is layout, can change within ±20%. The padding uses a CSS custom property `var(--space-md)`. I can change the value of `--space-md` if it's defined, but it's not defined in this file. Actually the instruction says CSS custom properties (--color-*, --shadow-*) values may change, but `--space-md` is a spacing variable, not a color/shadow variable. The padding must keep similar values ±20%. So I should keep `var(--space-md)` as-is since I don't know its value. Actually, I could change it to a literal value, but that would be risky. Better to keep it as-is.

Wait, the instructions say "Only change colors, shadows, radius, transitions, gradients." The original CSS has no colors, shadows, radius, transitions, or gradients. So actually there is nothing to change? But the task asks me to refresh the visual identity.

Let me re-read: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

The original CSS is inside a media query and only has text-align, font-size, and padding. None of these are visual properties I'm allowed to change (except padding within ±20%, but the padding is `var(--space-md)` which is a spacing custom property, not a color/shadow one).

Hmm, but maybe I should add new visual properties? The instruction says "Only change colors, shadows, radius, transitions, gradients." It doesn't say I can add them. But the target style is "sidebar-classic" with "flat-solid" effect. The flat-solid variant says "box-shadow: none everywhere" and "Minimal radius (0-6px)".

Wait, the original CSS has no box-shadow or border-radius. So adding `box-shadow: none` and `border-radius: 0` to these selectors would be consistent with the flat-solid variant, but would that violate "Keep ALL selectors and layout exactly as-is"? Adding new declarations to existing selectors doesn't change the selectors or layout. It only adds visual properties. But is it okay to add? The instruction says "Only change colors, shadows, radius, transitions, gradients." This suggests I should modify existing ones, but since there are none, maybe I should add them? Actually, re-reading: "Refresh the visual identity WITHOUT changing layout structure or class names." and "You MUST CHANGE (visual identity only): ... colors, box-shadow, text-shadow, border-radius, gradients, transition, filter, backdrop-filter, opacity, outline, border-color/style, caret-color, accent-color, CSS custom properties (--color-*, --shadow-*) values."

Since the original has none of these, I could add some to fulfill the "refresh" requirement. But I need to be careful not to break the layout.

Let me think about what makes sense:

- `.app-hero-section .badge.bg-warning` — this is a warning badge. I could add `border-radius: 0.375rem` or something, but the flat-solid variant says minimal radius (0-6px). Also could add colors? But the class `bg-warning` is a Bootstrap class that sets background. I shouldn't override Bootstrap's bg-warning? Actually I can, but it would change the visual. The target palette says "Sidebar darker (#252e3a), main lighter" and "Functional accent for actions". This seems more about a sidebar layout, but the actual CSS is for a hero section, contact channels, etc.

- `.contact-channels-section article` and `.contact-quick-section .contact-card` — these could get `border-radius`, `border`, `background-color`, `box-shadow: none` etc.

But wait, the flat-solid variant says "box-shadow: none everywhere". So I should add `box-shadow: none` to these elements to ensure they have no shadow. And minimal radius 0-6px.

Also the palette: sidebar darker #252e3a, main lighter. But these elements are not sidebars. Hmm. The "Target Style" is more of an overall guide. But I shouldn't invent selectors or change layout.

Actually, let me re-read the original CSS carefully. It's a media query for max-width 575.98px. Inside:

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

So the selectors are only active on mobile. Adding visual properties like background colors, borders, etc. would change the look on mobile. That could be a visual refresh.

What can I change?

1. `.app-hero-section .badge.bg-warning` — I can add `background-color`? But `bg-warning` is a Bootstrap utility. Overriding it might be okay. But the palette says "Functional accent for actions". Warning is typically yellow/amber. Maybe I can adjust the badge's appearance: add `border-radius: 0.375rem` (but flat-solid says 0-6px, so maybe 0.25rem), `box-shadow: none`, maybe a custom border.

2. `.contact-channels-section article, .contact-quick-section .contact-card` — I could add `border-radius: 0.375rem` (or 0.25rem), `background-color`, `border`, `box-shadow: none`.

But the instruction says "Only change colors, shadows, radius, transitions, gradients." Adding these properties is within scope. However, I must be careful: the padding uses `var(--space-md)` — that's fine, I keep it.

Also note: the instruction says "CSS custom properties (--color-*, --shadow-*) values" can change. There are no such properties in this snippet. So nothing to change there.

What about transitions? I could add `transition` declarations. But that might affect mobile behavior. It's allowed.

Let me think about the flat-solid variant more: "box-shadow: none everywhere" means if there were box-shadows, I should remove them. Since there are none, adding `box-shadow: none` ensures flat. I'll add it to be consistent.

"Solid background colors only (no gradients)" — so background-color solid, no background-image gradients. I can add solid backgrounds.

"Defined by color contrast and borders" — so use borders to define elements.

"Minimal radius (0-6px)" — so border-radius 0-6px. E.g., 0.25rem (4px) or 0.375rem (6px).

"Color palette: Sidebar darker (#252e3a), main lighter. Functional accent for actions."

Since these are mobile layouts for a hero section and contact cards, I might use:
- Main lighter background: e.g., #f8f9fa (light gray)
- Darker text: #252e3a
- Accent: something like #e67e22 (warning orange) for the badge? But `bg-warning` is already warning color. Overriding it with an orange accent fits the "functional accent" idea.

Actually, let me consider: the `.app-hero-section .badge.bg-warning` — a badge with warning background. I could restyle it to have a solid warning color like `#f59e0b` (amber) with white text? But Bootstrap's `.bg-warning` sets background-color: #ffc107 (in Bootstrap 5). If I add `background-color: #f59e0b`, that overrides it. But do I want to change it? The palette wants a "darker sidebar" and "main lighter". The badge is an accent. I could make it a deep accent.

Wait, but the instruction says "All color values: background, color, border-color, fill, stroke, outline-color" — I MUST change. So I need to introduce color values. Since the original has none in this file (besides `bg-warning` class name which references Bootstrap), I should add color declarations to these selectors.

Hmm, but "You MUST CHANGE (visual identity only)" — that applies to properties present in the file. If a property isn't present, I can't "change" it. But to fulfill the task, I think adding visual properties is expected, because otherwise the output would be identical to input, and the task says "Refresh the visual identity".

Let me add meaningful visual styling:

For `.app-hero-section .badge.bg-warning`:
- `background-color: #e8a020` (solid warning/amber, a bit darker than Bootstrap's #ffc107 for contrast)
- `color: #252e3a` (dark text)
- `border-radius: 0.25rem` (4px, within flat-solid 0-6px)
- `box-shadow: none`
- Maybe `border: 1px solid #d18e1a`? But that changes border-style and border-color — allowed. But the flat-solid says "Defined by color contrast and borders" so a border is fine.
- `transition: background-color 0.2s ease`? But transition on a badge that doesn't change on hover in this snippet might be pointless. Still allowed.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- `background-color: #ffffff` (solid white, main lighter)
- `border: 1px solid #e5e9f0` (subtle border)
- `border-radius: 0.375rem` (6px, within max)
- `box-shadow: none`
- `transition: box-shadow 0.2s ease, transform 0.2s ease`? But transform is layout? Actually transform is a visual property, but the instruction says "layout pattern" — transform changes positioning. It's not in the "never change" list explicitly, but "position" is. Transform is not position. However, to be safe, I won't add transform. I'll add a color transition only.

Wait, the flat-solid variant says box-shadow: none everywhere. So I should NOT add box-shadow except to set it to none. Good.

What about the `.app-hero-section .row .col-lg-7` rule? The only property is `text-align: center;` which I cannot change (it's layout/typography? text-align is in the "never change" list: "text-align, vertical-align"). So I keep it exactly. Adding color to this selector? It's a text container. I could add `color` but that might affect heading colors. Hmm. The instruction says I can change "color" — text color. But adding a color to the hero section's col could be a visual change. But if I add `color: #252e3a` to `.app-hero-section .row .col-lg-7`, it would set the text color of that column. That's a visual change. But it might interfere with child elements that have their own colors. I could add it, but it's optional. Since the rule only has text-align, and text-align is not changeable, I'd leave the selector as-is with just text-align. But then I'm not changing anything in that rule. That's fine—the instruction says "Keep ALL selectors and layout exactly as-is" — I keep the selector and its existing declaration, and I can add new declarations.

Actually, to be safe and conservative, I'll add only visual properties that make sense and don't affect layout.

Let me draft:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #e8a020;
        color: #252e3a;
        border: 1px solid #d18e1a;
        border-radius: 0.25rem;
        box-shadow: none;
    }

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

Wait, I added `color` to the col-lg-7. That changes text color on mobile to a dark color. That seems fine. But is it safe? The hero section likely has headings and paragraphs. Setting color on the column will cascade. That's a visual change consistent with the palette. Good.

But hold on: the badge `bg-warning` — in Bootstrap, `.bg-warning` sets `background-color: #ffc107` and there's already a `font-size` override. If I add `background-color`, it overrides. But what about `color`? Bootstrap's `.badge` typically has `color: #fff` for dark backgrounds, but `bg-warning` uses dark text? Actually in Bootstrap 5, `.bg-warning` sets `--bs-bg-opacity: 1` and `background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity))`. The badge text color defaults to `var(--bs-badge-color, #fff)`? Hmm, in Bootstrap 5, `.badge` has `color: var(--bs-badge-color, #fff)` wait no: Actually `.badge` uses `--bs-badge-color: #fff;`? Let me check. In Bootstrap 5.3, `.badge` has `color: #fff`. But for warning, the bg is yellow, white text is bad contrast, so Bootstrap might handle it. Actually, Bootstrap 5 uses `color: #fff` for badges by default, which on yellow has poor contrast. Many people override. Adding `color: #252e3a` (dark) on yellow is better. Good.

Now the contact cards: adding `background-color: #ffffff` — if they were transparent, now they become white on mobile. That's a visual change. Good. Border and radius define the card.

Should I add a transition? The flat-solid variant doesn't mention transitions. The "you must change" list includes "transition timing, easing, duration" — but if there are no transitions in the file, I could add them. But adding transitions to elements that don't change state in this snippet is harmless but maybe unnecessary. I'll add a simple transition to the contact cards for hover states that might be defined elsewhere? Wait, there are no :hover rules in this snippet. If the original CSS (not shown) has hover rules, adding a transition here would affect them. That could be a nice touch. But conservative mode says "transition timing, easing, duration" can change. Adding a transition is a visual property. I'll add a subtle transition to the contact cards:

`transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;`

But wait, the flat-solid variant is about "no shadows" and "solid backgrounds". Transitions are fine.

However, I must be careful: the instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Adding new declarations to existing rules is preserving selectors and layout. Good.

But should I keep the `!important` on padding? Yes, it must stay.

Also, the instruction says "box-shadow: none everywhere" for flat-solid. So I explicitly set `box-shadow: none` on the elements. Good.

Let me reconsider the badge border. In flat-solid, borders define elements. A 1px border on the badge is fine. But `border: 1px solid #d18e1a` — border-width is 1px, which is not in the never-change list? Actually border-width is explicitly excluded: "border-color and border-style (NOT border-width)". So I can set border-width? Wait, "NOT border-width" means I should NOT change border-width. But the original has no border at all. Adding a border with width 1px is introducing a new border-width. Is that allowed? Hmm. The list says "border-color and border-style (NOT border-width)" — meaning if there's an existing border, I can change its color and style but not its width. Adding a new border could be seen as violating "NOT border-width" because I'm introducing a width. To be safe, maybe I should avoid adding borders, or use a border that uses a variable? Hmm.

Actually, the "You MUST CHANGE" list includes "border-color" and "border-style"—these are properties to change. "NOT border-width" means don't change border-width. But if a border doesn't exist, adding one with `border: 1px solid ...` sets width. That might be considered a violation. To be conservative, I could use `border-style: solid; border-color: #e5e9f0;` and no border-width... but then the width defaults to `medium` (3px), which would change layout? Actually border-width doesn't affect layout in the flex/grid sense, but it does take up space. The instruction says padding/margin must stay within ±20%, but border-width isn't mentioned. Still, adding a 1px border is probably fine. The "NOT border-width" is more about not modifying existing border widths. I think adding a subtle border is acceptable for the flat-solid style which is "Defined by color contrast and borders."

But to be extra safe, I could use `outline` instead? No, outline also has width. Or I could skip borders entirely and rely on background color + radius. The flat-solid