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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

We need to rewrite the CSS provided, while keeping selectors, layout, typography unchanged. The original CSS snippet contains a media query with three rules:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }`
2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }`
3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }`

These declarations are layout/typography. According to the rules, we cannot change text-align, font-size, padding? Wait, padding is allowed to change ±20% maximum, but the instruction says "width, height, min/max-width, min/max-height, padding, margin (keep similar values, ±20% maximum)". However, in the original CSS, padding uses a CSS variable `var(--space-md)`. We might change the value? But that would affect the padding. We are allowed to change colors, shadows, radius, transitions, gradients. The original CSS doesn't have any colors or shadows. It's just media query with layout and typography.

We need to "refresh this CSS visually" without changing layout structure. Since there are no visual properties in the original, we need to add some visual enhancements? But the input CSS is only these rules. Possibly we need to preserve them but we can add additional visual declarations? The instructions say "Only colors, shadows, and decorative properties may change." But since there are none, we might add new properties to existing selectors? However, the output should be a rewrite of the given CSS. We can add color, background, border, etc. to the same selectors, but careful: the selectors are inside a media query. We can add visual-only properties to each of these rules. Also we might preserve the original declarations exactly because they fall into non-changeable categories.

Let's interpret: The file is `assets/css/saishi.css`, and this is a fragment? The original CSS is just that media query. We need to "rewrite the CSS" with same selectors and layout, but visual identity changed. Since there are no colors, we need to introduce some? But the constraints say "All color values: background, color, border-color, fill, stroke, outline-color" must change. Since there are none, there's nothing to change. But maybe we are supposed to add color-related declarations to satisfy the task? The prompt says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." That implies we should add or modify these properties where present. But if absent, perhaps we can add them to enhance visual identity. The self-check says "Colors throughout the file replaced with fresh palette?" That suggests there should be colors. But the original doesn't have any. Hmm.

We must be careful: The "HTML is fixed — only colors, shadows, and decorative properties may change." The snippet contains only media queries with layout/typography. To create a visually distinct result, we can add new declarations (e.g., `color`, `background`, `border-radius`, `box-shadow`, `transition`) to these existing rules, while preserving the original declarations. That would qualify as "visual identity without changing layout structure or class names." We will add properties that are allowed to change (colors, shadows, radius, transitions, gradients) and preserve the non-changeable properties exactly.

Let's decide on a target style: "vertical-flow" and "gradient-rich" as described. The palette: warm minimal off-white #faf8f3, soft black #2d2d2d, muted accent sage #87a878 or terracotta #c47b5a. We can use these colors to add subtle text shadows, background gradients, etc.

But note: The selectors are:

- `.app-hero-section .row .col-lg-7` — likely a column in a hero section. Adding background, color, border-radius? That could affect layout? It might alter visual appearance but not layout. We can add a subtle text color, maybe a gradient text? But careful not to change display, width etc.

- `.app-hero-section .badge.bg-warning` — a badge with bootstrap warning background. We could change its background gradient, box-shadow, border-radius. But `.bg-warning` is a Bootstrap class that sets background color; our CSS can override it. We can add a gradient, box-shadow, border-radius, transition, etc. But we cannot change `font-size` (already specified, keep same).

- `.contact-channels-section article, .contact-quick-section .contact-card` — cards. We can add background, border-radius, box-shadow, transition, etc. But padding is set to var(--space-md) with !important; we keep that.

We also need to consider the media query itself. We cannot change the media query condition.

Let's craft the rewritten CSS. We'll keep the original declarations and add visual ones. Ensure we don't modify any property that is in the "never change" list. We can add `color`, `background`, `background-image` with gradients, `border-radius`, `box-shadow`, `text-shadow`, `transition`, `backdrop-filter`, `outline`, `caret-color`, `accent-color`, `opacity`, etc. These are all allowed.

Let's plan:

1. For `.app-hero-section .row .col-lg-7`:
   - text-align: center; (keep)
   - Maybe add color: #2d2d2d; or a gradient text? But to keep it simple, we can add `color: #2d2d2d;` and maybe `text-shadow: 0 2px 8px rgba(0,0,0,0.08);` or something. However, adding text-shadow to a column might affect readibility. Maybe better to add a subtle gradient background? But that could change the visual of the column, not layout. We can add `background: linear-gradient(135deg, rgba(250,248,243,0.8), rgba(196,123,90,0.15));` and `border-radius: 1.5rem;` and `box-shadow: ...` but this might make the column look like a card, which may be desired? It's a col-lg-7. Hmm. Actually, adding background to a grid column might be okay. But we need to be careful that we don't accidentally affect the layout via padding/margin. We can add `padding`? No, padding is not allowed to change? Actually padding is allowed within ±20%, but we don't need to add padding unless we want to. We could add `background-clip: padding-box;` etc.

Given the target style "vertical-flow" with generous spacing and card-like elements, adding subtle backgrounds and shadows to column and cards makes sense.

2. For `.app-hero-section .badge.bg-warning`:
   - font-size: 0.85rem; (keep)
   - We can override the background with a gradient: `background: linear-gradient(135deg, #c47b5a, #e0a98f);` (terracotta gradient). But `.bg-warning` in Bootstrap sets `background-color: #ffc107` (depending on version). Our rule is inside media query, and uses `.badge.bg-warning` specificity. We can set `background-image` instead of `background-color` to create a gradient. It's allowed. We can also set `border-radius: 50rem;` (pill), `box-shadow: 0 4px 12px rgba(196,123,90,0.35);`, `color: #fff;` (if we change background to terracotta, white text would be better). But the original badge may have dark text from Bootstrap; we can change it. Also add `transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ...;` but transform is not in the allowed list? `transform` is not listed in never-change, so we could add a transition on transform but not change transform itself. But adding a `transition` property is allowed. We can add `transition: box-shadow .4s ease, background-image .4s ease;` but `background-image` transitions can be problematic. We'll use `background-color` or `opacity`. Maybe just add `box-shadow` transition.

3. For `.contact-channels-section article, .contact-quick-section .contact-card`:
   - padding: var(--space-md) !important; (keep)
   - Add `background: linear-gradient(145deg, rgba(255,255,255,0.85), rgba(250,248,243,0.95));` or using off-white.
   - Add `border-radius: 1.25rem;`
   - Add `box-shadow: 0 8px 24px rgba(45,45,45,0.08), 0 2px 6px rgba(45,45,45,0.04);`
   - Add `border: 1px solid rgba(135,168,120,0.25);` but border-width is not allowed to change? The original had no border, so adding border-width? The rules say "border-color and border-style (NOT border-width)" may change. It doesn't say adding border is forbidden, but we should avoid altering layout via border-width because it adds to box size unless `box-sizing: border-box` is set. Since we don't know if it's border-box, adding a border could change size. To be safe, we can use `box-shadow` to simulate border, or use `outline` which doesn't affect layout. Or use `background-clip: padding-box;` with a border? But border-width would add 1px or 2px to dimensions, potentially changing layout. The original didn't have border, so we shouldn't add border-width. We can use `outline` (doesn't affect layout) or `box-shadow` inset. Better to avoid border entirely.

   - Add `transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.5s ease;` or `background-image` transition may not animate. We can use `background-color` but we are using `background` shorthand with gradient. To transition, we could use `opacity` or `filter`. Also `backdrop-filter`? We can add `backdrop-filter: blur(8px);` for a glass effect. But that may affect visuals not layout. But we must ensure it works.

Keep in mind that we need to "preserve ALL selectors and layout exactly." The original selectors may have other rules elsewhere; we don't know. We are only rewriting this snippet. We should not remove anything.

Let's write a polished version that introduces the target style and effect variant.

We need to decide on colors:

- Base off-white: #faf8f3
- Soft black: #2d2d2d
- Sage: #87a878
- Terracotta: #c47b5a

We can use gradients with multiple stops, e.g., `linear-gradient(135deg, #faf8f3 0%, #f0ede5 100%)`. For cards, maybe `linear-gradient(145deg, rgba(255,255,255,0.92), rgba(250,248,243,0.98))`. For badge, `linear-gradient(135deg, #c47b5a, #a85e3d)`.

Let's prepare the output:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d2d2d;
        background: linear-gradient(135deg, rgba(250,248,243,0.7), rgba(196,123,90,0.12));
        border-radius: 2rem;
        box-shadow: 0 12px 32px rgba(45,45,45,0.06), 0 4px 16px rgba(196,123,90,0.08);
        text-shadow: 0 1px 2px rgba(250,248,243,0.8);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #c47b5a 0%, #e3a28a 50%, #d98e6f 100%);
        color: #2d2d2d;
        box-shadow: 0 6px 16px rgba(196,123,90,0.35), 0 2px 4px rgba(45,45,45,0.1);
        border-radius: 3rem;
        transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(250,248,243,0.9) 50%, rgba(232,226,214,0.95) 100%);
        border-radius: 1.5rem;
        box-shadow: 0 10px 30px rgba(45,45,45,0.06), 0 2px 8px rgba(135,168,120,0.12), inset 0 1px 0 rgba(255,255,255,0.8);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

But we need to check: Are we allowed to change `color`, `background`, etc. on `.app-hero-section .row .col-lg-7`? Yes, those are visual properties. But note: `border-radius` on a column could create a visually distinct block. It's okay.

However, the rules say "never change" includes `text-align`, which we preserve. Font-size preserved. Padding preserved exactly. Good.

We must also be mindful of `!important` on padding. We preserve that.

Potential issue: Using `background` shorthand on the badge alongside Bootstrap's `.bg-warning` will override background-color and background-image, so okay. But if Bootstrap's `.badge` has other styles, we don't need to care.

Should we use `background-image` instead of `background` to avoid resetting background-position/size? The original rule had no background, so using `background` is fine. To be safe, we can use `background-image` only. But `background` shorthand resetting background-color might be okay. However, to ensure we don't lose background-size or other, we can use:

```
background-color: #c47b5a;
background-image: linear-gradient(135deg, #c47b5a 0%, #e3a28a 50%, #d98e6f 100%);
```

That's fine. Similarly for others.

Also note: Adding `transform` in transition is allowed? The property `transform` is not in the never-change list, but we don't change transform. We only mention it in transition. That's okay. But `transition: transform ...` means if transform changes elsewhere, it will transition. That's fine. We can also add `transition: box-shadow, transform` but transform isn't currently set. No harm.

Now, is there any need to add `@keyframes`? Not necessary. The style variant gradient-rich says "Linear-gradient or radial-gradient on most backgrounds" and "Gradient borders via border-image", "Multiple stops for richness", "Smooth long transitions (0.4-0.6s cubic-bezier)". We have gradients and transitions. We didn't use border-image because of layout risk. We can use `outline` with a gradient? Border-image with a pseudo-element? But no need.

We might want to include a `border-image`? Could be risky. Better stick to box-shadow.

Let's ensure the self-check:

- Every selector character-for-character preserved? Yes.
- display, position, grid-template-*, flex-direction unchanged? Not present.
- width, height, padding, margin within ±20%? Padding unchanged, no others.
- font-family, font-size, font-weight, line-height unchanged? font-size unchanged.
- Colors throughout the file replaced with fresh palette? Yes, we introduced fresh colors.
- Shadows redesigned (different offsets, colors)? Yes.
- Border-radius adjusted for new visual style? Yes.
- No AI marker comments? Yes.

One thing: The original CSS only had those three rules. We added properties. But we also might be missing the fact that the file fingerprint suggests a larger file? The "file" is just this block? The prompt says "File: assets/css/saishi.css#块2/2" meaning block 2 of 2, so this is a chunk to rewrite. We should output only this chunk's rewritten CSS. Good.

Let's consider if adding `text-shadow` to col-lg-7 is good: It could affect text readability. A subtle shadow is fine. But maybe `text-shadow` on a container with many elements might apply to all inline text inside, but only if they don't have their own. That could be messy. Perhaps we should avoid text-shadow on the column. Instead, we could add a `box-shadow` and `background` to create a hero column card. But the column likely contains a heading and paragraph; adding a background to the column could look like a panel. That's a visual change. Okay.

But there is a caveat: The media query is `(max-width: 575.98px)`. On small screens, the column becomes full width. Adding padding? We didn't