/* ============================================================
   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 the CSS file with a fresh visual identity while keeping selectors and layout exactly the same.

Let me analyze the original CSS:

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

This is a media query with some rules inside. Let me check what I can change:

1. `text-align: center;` - This is layout/typography alignment. I should NOT change this since text-align is listed under "Typography" as fixed (text-align, vertical-align). Wait, actually looking at the constraints:

```
📐 LAYOUT (HTML cannot adapt to changes):
  • text-align, vertical-align
```

Wait, text-align is listed under LAYOUT as never change. So I need to keep `text-align: center`.

2. `font-size: 0.85rem;` - This is typography, listed as never change. Keep it.

3. `padding: var(--space-md) !important;` - Padding can change within ±20%. But it uses a CSS variable `--space-md`. I could change the variable value, but the variable is defined elsewhere. Actually, the instruction says "CSS custom properties (--color-*, --shadow-*) values" can change — specifically those prefixed with `--color-` and `--shadow-`. The `--space-md` is a spacing variable, not color/shadow. So I should keep `var(--space-md)` as is. Actually, padding can change ±20%, but since it's a variable reference, I'd keep it as-is to avoid breaking things.

Hmm, so this CSS has very few visual properties to change. There are no colors, no shadows, no border-radius, no gradients, no transitions in this snippet.

Wait, but the task says "Refresh this CSS visually." The original CSS has:
- text-align (can't change)
- font-size (can't change)
- padding (could change ±20%, but uses variable)

So practically, there's almost nothing to change here. But I need to output something.

Let me re-read the rules. The rules say I MUST change colors, shadows, etc. — but only if they exist in the file. If there are no color values in the file, I can't change what's not there.

However, I could potentially add visual properties? No — the instruction says "refresh the visual identity WITHOUT changing layout structure or class names" and "only colors, shadows, and decorative properties may change." It doesn't say I can add new properties... Actually, adding new properties could be risky. But maybe I could add subtle decorative properties that don't affect layout?

Actually, wait. Let me reconsider. The instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." Adding new properties like `box-shadow` or `background` to elements that didn't have them before would change the visual identity without changing layout. That seems within scope.

But being conservative, I should be careful. The target style is "flat-solid" with "box-shadow: none everywhere" — so definitely no shadows to add. Minimal radius (0-6px).

Hmm, but if I add `border-radius` to cards, that changes visuals but not layout. Layout-properties like padding are already there and can be adjusted ±20%.

However, since the original snippet is a media query with responsive adjustments, and the target style emphasizes flat solid colors with no shadows, maybe I could:

1. For the badge with `.bg-warning` — it has a warning background color (yellow-ish). In Bootstrap, `.bg-warning` sets background-color. I could potentially override the background color? But `.bg-warning` is a Bootstrap utility class. Adding `background-color` to this rule would change the color. That's a color change, which is allowed.

2. Add `border-radius` to cards, badge, etc.

3. Add transitions.

But wait — the instructions say "preserving ALL selectors exactly" — I must keep the selectors. But can I add new declarations inside existing rules? Yes, that's adding to existing rules, not changing selectors.

Hmm, but the instruction also says the HTML is fixed and only visual properties may change. Adding `background-color` overrides is a visual change. Adding `border-radius` is a visual change. These are within scope.

Let me think about what makes sense.

The original CSS (block 2/2) seems to be the second part of a larger file (saishi.css). This particular chunk is a responsive media query for small screens (max-width: 575.98px, which is Bootstrap's `sm` breakpoint).

The rules:
1. `.app-hero-section .row .col-lg-7` — text-align: center (keep)
2. `.app-hero-section .badge.bg-warning` — font-size: 0.85rem (keep)
3. `.contact-channels-section article, .contact-quick-section .contact-card` — padding: var(--space-md) !important (can adjust ±20%)

Given the target style "flat-solid" and "symmetric-grid", I should:
- Use solid colors, no gradients, no shadows
- Consistent border-radius 0-6px
- Use a balanced harmonious palette

Since the original has no colors, I need to add them. But wait — should I add properties that don't exist? The risk: adding `background-color` to `.bg-warning` might be redundant since Bootstrap already styles it, but it would ensure a specific color.

Actually, let me reconsider. The task says "Refresh the visual identity WITHOUT changing layout structure or class names." The safest approach is to only modify existing declarations and add decorative properties, but keep layout untouched.

Let me check which properties in the original are "visual-only" per the allowed list:
- `text-align: center` — NOT allowed to change (text-align is in layout)
- `font-size: 0.85rem` — NOT allowed to change (font-size is typography)
- `padding: var(--space-md) !important` — padding is layout, can change ±20%. But `var(--space-md)` references a custom property. I shouldn't change the variable name. Could I change the value? `--space-md` is typically 1rem or 1.5rem. If I change padding to `calc(var(--space-md) * 1.1)` that's within ±20%. Hmm, that's hacky.

Actually, the instruction says "keep similar values, ±20% maximum" for padding/margin. `var(--space-md)` — I could keep it as is. Since changing a variable reference might break if the variable isn't defined elsewhere. The variable `--space-md` is presumably defined in `:root` elsewhere in the file. Changing it here in a media query would require the variable to exist — it already does. But changing it to a hardcoded value would break the theme system.

I think the most conservative and correct approach is:

1. Keep all three existing declarations unchanged (since they're layout/typography and must not change).
2. Add decorative visual properties that don't affect layout:
   - For `.app-hero-section .badge.bg-warning`: add `background-color` (override), `color`, `border`, `border-radius`, maybe nothing else.
   - For `.contact-channels-section article, .contact-quick-section .contact-card`: add `border`, `border-radius`, `background-color`, `box-shadow: none` (explicitly per flat-solid), `transition`.

But wait — adding `background-color` to `.contact-card` might change the visual in a way that's intended. In the flat-solid style, cards would have solid backgrounds and minimal radius.

Hmm, but actually adding new declarations could be seen as changing things beyond what the original did. The original media query only reduced padding and centered text. Maybe the intent of this media query is just responsive spacing, not theming.

Let me reconsider the whole thing. This is "block 2/2" — the second part of a CSS file that was split. The original CSS likely has theming rules in block 1. This block is just the responsive tail. The task wants me to refresh the visual identity, so colors should be added/my style applied consistently.

Given the constraints, I think the best approach is to:
- Keep the existing declarations exactly (they're fixed layout/typography).
- Append decorative declarations within each existing rule to apply the flat-solid visual style when these elements appear on mobile.

Let me design the palette. The target is "symmetric-grid" with "flat-solid":
- Balanced harmonious palette, consistent shadows (but flat-solid says no shadows).
- Minimal radius 0-6px. Let's go with 4px or 6px.

Since `.bg-warning` is a warning badge, it's typically yellow/amber. For a fresh palette, maybe a soft amber `#f59e0b` or a more harmonious `#eab308`. Let me pick a modern amber: `#f59e0b` with dark text `#1f2937` or `#78350f` (amber-900 for contrast on amber-400).

Actually, for flat-solid with high contrast, let's define:
- Badge background: `#f59e0b` (amber-500) or `#fbbf24` (amber-400). For a badge, amber-400 `#fbbf24` with dark brown text is classic.
- Badge text: `#78350f` (amber-900) — but wait, the original has `font-size: 0.85rem` and Bootstrap's `.badge` has its own color. Overriding `color` is allowed (color is in the change list).

For cards:
- Background: `#ffffff` (white) — solid.
- Border: `1px solid #e5e7eb` (gray-200) — border-style and border-color can change, but border-width must not change. Wait, border-width is not explicitly in the "never change" list. Let me check:

The "never change" list includes:
- border-color and border-style (NOT border-width)

Wait, that's under the "MUST change" section: "border-color and border-style (NOT border-width)". So border-width is NOT in the must-change list and also NOT in the never-change list. Hmm. Actually, the never-change list doesn't include border-width. But since the original has no border at all, adding a border would introduce border-width. That could affect layout (border takes space). For a `border: 1px solid`, the layout dimensions would change by 2px. The instruction says layout must not change...

Actually, `box-sizing` is in the never-change list. If box-sizing is `border-box` (Bootstrap default), then adding a border without changing padding would keep the total size the same — padding would shrink. That's a safe approach. Bootstrap uses `box-sizing: border-box` globally. So adding `border: 1px solid ...` would not change the element's outer dimensions, just inner padding area.

But wait — the media query sets `padding: var(--space-md) !important;` on the cards. Adding a border would reduce the inner content area by 2px, but the element size stays the same. That's acceptable visual change, not layout breaking.

However, to be super safe in conservative mode, maybe I should avoid adding borders and instead use `box-shadow: none` (no shadow) and `background-color` only. But flat-solid says "Defined by color contrast and borders" — so borders are part of the style. Adding a subtle border is fine.

Hmm, this is getting complex. Let me simplify.

The original CSS in this media query only has three rules. To make a meaningful visual refresh while following the constraints:

1. `.app-hero-section .row .col-lg-7` — keep `text-align: center;` (can't change). Nothing else needed. I won't add anything here because any coloring on a column would be weird.

2. `.app-hero-section .badge.bg-warning` — keep `font-size: 0.85rem;` and add visual refresh:
   ```css
   background-color: #fbbf24;
   color: #78350f;
   border: 1px solid #f59e0b;
   border-radius: 6px;
   transition: background-color 0.2s ease;
   ```
   
   Wait, but adding `transition` without a hover state is pointless. And adding a border changes the badge size slightly. Badges in Bootstrap are inline-block, so adding a border changes dimensions by 2px. Since it's inline content, this might cause slight text reflow. In conservative mode, maybe avoid border on the badge. But the instruction says border-style/color can change, so adding a border is a visual change. Hmm.

   Actually, let me reconsider — for the badge, `border-radius: 6px` would change the badge's pill shape (Bootstrap badges default to `border-radius: 0.375rem` which is 6px already). So overriding to 6px is basically the same. Not a useful change.

   Maybe better: Keep it minimal and just override background and color for a fresh palette.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — keep `padding: var(--space-md) !important;` and add:
   ```css
   background-color: #ffffff;
   border-radius: 6px;
   box-shadow: none;
   transition: background-color 0.2s ease, border-color 0.2s ease;
   ```

   But adding `background-color: #ffffff` when the page background might be different could look odd. Without knowing the parent background, white cards on a white background would need a border to be visible. In flat-solid, we'd use contrast. Maybe `#f9fafb` (gray-50) for cards and the page is white? Or page is a light gray and cards are white.

   Hmm, but this is just the mobile media query. On mobile, if cards have white bg on light gray page, that works.

Actually, I'm overthinking this. Let me look at the instructions once more:

"🎯 YOUR MISSION: Refresh the visual identity WITHOUT changing layout structure or class names."

"✅ YOU MUST CHANGE (visual identity only): All color values..." — I must change all color values present in the file. The file has no color values. So there's nothing to change in terms of existing colors. The instruction then says "Output the rewritten CSS now."

Given there are no colors, shadows, radius, gradients, transitions to modify, the correct output might be essentially the same CSS. But that seems anticlimactic.

Alternatively, the task expects me to add new visual properties that achieve the target style. Since the target style for "flat-solid" explicitly mentions "Defined by color contrast and borders" and "Minimal radius (0-6px)", the expectation is that I add these properties.

Let me decide on a concrete plan:

**Palette:**
- Background for cards/panels: `#ffffff` (white)
- Border color: `#e5e7eb` (gray-200)
- Warning badge background: `#f59e0b` (amber-500) — or a more harmonious palette. Since "symmetric-grid" wants balanced harmonious palette, amber-500 with white text is decent. But Bootstrap `.bg-warning` normally pairs well with dark text. Let me use `#fbbf24` (amber-400) bg with `#78350f` (amber-900) text.
- Hover/active accents: maybe `#d97706` (amber-600).

**Radius:** 6px (within 0-6px limit).

**Shadows:** none (flat-solid).

**Transitions:** 150-200ms ease.

**Border:** 1px solid with the border-color.

Now, adding `border: 1px solid #e5e7eb` to cards and articles — with Bootstrap's border-box, this reduces inner space but not outer layout. The padding is set with `var(--space-md) !important`, which has higher specificity than the border, but padding is a different property than border, so they coexist. The total width inside the border would be padding + content. Since the box-sizing is border-box, element dimensions stay the same, content area shrinks by 2px. Acceptable.

Wait, actually, the instruction says "padding, margin (keep similar values, ±20% maximum)". If I add a border, the padding itself stays the same, but the content box shrinks. That's a layout change technically, but invisible to the grid. I'll consider it acceptable decorative.

Hmm, but actually the safest is to not add borders and instead use background + radius. Flat-solid says "Defined by color contrast and borders" — but if the original uses Bootstrap, the cards might already have borders from default styles or block 1. Without seeing block 1, I can't know. Adding a border override could conflict or duplicate.

Let me be pragmatic. The output just needs to look refreshed and follow the constraints. I'll:

1. Keep all original declarations.
2. Add minimal decorative declarations that clearly follow flat-solid: solid bg colors, border-radius 4-6px, box-shadow: none, subtle border.

Actually, you know what, let me reconsider whether I should even add anything to rule 1. `.app-hero-section .row .col-lg-7` centers text on mobile. Adding any visual props here (like color) would affect a whole column — that changes the look of a large area. Too risky. I'll keep it as-is.

For rule 2 (badge): add `background-color`, `color`, `border-radius`, `border`. But Bootstrap `.bg-warning` already sets background-color. Changing it to a fresh amber is a valid color change. Setting `color` changes the text. Border-radius — Bootstrap badge already has a radius; setting 6px keeps it similar but I could set 0.375rem or 6px. Let me set 6px for consistency with cards.

For rule 3 (cards): add `background-color`, `border`, `border-radius`, `box-shadow: none`, and maybe `transition`.

Wait, but if I add `box-shadow: none`, that's just confirming the absence of shadows. In flat-solid