/* ============================================================
   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 snippet from a file called `saishi.css`. The original CSS is:

```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 block. I need to refresh the visual identity WITHOUT changing layout structure or class names. However, this block only contains:
- `text-align: center;` — this is layout (text-align is in the "never change" list)
- `font-size: 0.85rem;` — typography (never change)
- `padding: var(--space-md) !important;` — padding is in the "never change" list (keep similar values, ±20% maximum)

Wait, but the instructions say I must change colors, shadows, radius, transitions, gradients. But none of these properties exist in this snippet. The selectors use classes like `.app-hero-section .badge.bg-warning` which in Bootstrap typically has a background color (bg-warning). But in this media query, only font-size is set.

Hmm. This is tricky. The media query itself has a breakpoint — I cannot change it. The properties inside are all in the "never change" list (text-align, font-size, padding).

What can I do? I need to add visual properties to these selectors without breaking layout. For example:
- For `.app-hero-section .badge.bg-warning`, I could add a gradient background, box-shadow, border-radius, etc. But wait — if I add background to `.badge.bg-warning`, I'd be overriding Bootstrap's warning color. But that's a visual change, which is allowed. However, adding background might change the badge appearance. Since the instruction says I can change colors, background, gradients, that's fine.

But careful: I must not change the existing declarations (text-align, font-size, padding). I can add new declarations.

For `.app-hero-section .row .col-lg-7` — it only has text-align: center. I could add color, text-shadow, etc. But adding color to a column might affect inherited text color. That could be considered a visual refresh.

For `.contact-channels-section article, .contact-quick-section .contact-card` — it has padding. I could add background, border-radius, box-shadow, transition, etc.

But the output must preserve the selectors exactly and the existing declarations. I should add new visual properties.

Wait, there's a catch: `--space-md` is a CSS custom property. I can't change the value of `--space-md` in this snippet because it's not defined here. But I could define `--space-md`? No, that would be risky and change layout. Keep padding as-is.

Actually, the task says "CSS custom properties (--color-*, --shadow-*) values" can change. But `--space-md` is a spacing variable, not color/shadow. I should leave it.

Given the original is so small, I need to make the changes count. Let me think about what "symmetric-grid" and "gradient-rich" mean for this snippet:

- symmetric-grid: equal grids, uniform gaps, baseline alignment. This is a media query for mobile, so grid stuff may not apply. But I can't change layout anyway.
- gradient-rich: linear/radial gradients on most backgrounds, gradient borders, multiple stops, smooth long transitions (0.4-0.6s cubic-bezier).

So I'll add:
- To `.app-hero-section .row .col-lg-7`: maybe a subtle text-shadow or color, but keep text-align. Actually, adding text color could be nice. But careful — changing color on a column might be too broad. Maybe just add a text-shadow? That's a decorative property allowed. But text-shadow on a whole column might look odd. Still, it's a visual change.

- To `.app-hero-section .badge.bg-warning`: add a gradient background, box-shadow, border-radius, transition. This is a badge; making it gradient-rich fits. I could add `background: linear-gradient(135deg, ...)` to override Bootstrap's `bg-warning`. Also add `border: 1px solid` with a color? Border-style can change but border-width cannot (I must not change border-width — but if there's no border, adding one with width would add layout? Actually, adding border-width changes layout because border takes space. The instruction says "border-color and border-style (NOT border-width)" — so I should not add border-width either because that would be a new border width. Hmm. But I could use `box-shadow` with `inset` to simulate a border without affecting layout. Or use `outline` which doesn't affect layout. Or use `border-image` with no border-width? That doesn't work without border-width.

Let me re-read: "border-color and border-style (NOT border-width)" — I can change border-color and border-style, but not border-width. If the original has no border, adding `border: 1px solid` changes border-width. So avoid adding border-width. Use `box-shadow: inset 0 0 0 1px ...` for a faux border. Or `outline`.

- To `.contact-channels-section article, .contact-quick-section .contact-card`: add background gradient, border-radius, box-shadow, transition. Padding stays. Note these elements probably already have padding from elsewhere; here they're just overriding with `var(--space-md)`. Adding background, radius, shadow is fine.

Also, I need to consider that the media query is `max-width: 575.98px` — mobile. Shadows and gradients should still work.

I should also consider transitions: "Smooth long transitions (0.4-0.6s cubic-bezier)". I can add `transition: background-color 0.5s cubic-bezier(...), box-shadow 0.5s cubic-bezier(...), transform ...` Wait, transform is layout-adjacent? transform isn't in the never-change list explicitly. Actually, it's not mentioned. But changing transform could affect layout visually. I'll avoid transform to be safe. Transitions on background-color, box-shadow, border-radius, filter are fine.

Let me craft the new CSS:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #2d2a32;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd166 0%, #f4a261 50%, #e76f51 100%);
        box-shadow: 0 4px 12px rgba(244, 162, 97, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
        border-radius: 999px;
        transition: box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 244, 255, 0.95) 100%);
        border-radius: 18px;
        box-shadow: 0 8px 24px rgba(45, 42, 50, 0.08), 0 2px 6px rgba(45, 42, 50, 0.04);
        transition: box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }
}
```

Wait, but there might be existing styles for these elements outside the media query. Adding a background to `article` and `.contact-card` might override something, but that's fine — it's a visual change. However, I should be careful: `.contact-channels-section article` might already have a background; overriding with a gradient is exactly the kind of change requested.

But hold on: the instruction says "Only colors, shadows, and decorative properties may change" and "layout structure or class names" stay. Adding `background`, `box-shadow`, `border-radius`, `transition`, `color`, `text-shadow` is all decorative.

Also, should I add hover states? The original media query has no `:hover` pseudo-classes. Adding them would be adding selectors that weren't there. The instruction says "Pseudo-classes (:hover, :focus, ::before, ::after)" must be kept exactly — meaning if they exist, keep them. But adding new ones? It says "SELECTORS (CRITICAL - HTML is fixed): keep EXACTLY". Adding new pseudo-class selectors would be adding new selectors. The target style mentions transitions; transitions can exist without hover. To be safe, I will not add new selectors or pseudo-classes. Just add properties to existing selectors.

Also, should I use `!important`? The existing `padding` uses `!important`. I should keep that as-is. For my added properties, no `!important` needed unless to override Bootstrap. Actually, Bootstrap's `.bg-warning` sets background-color. To override with a gradient, `background` shorthand should override `background-color` because it's a shorthand that resets. But specificity: `.bg-warning` is a single class; `.app-hero-section .badge.bg-warning` has higher specificity (3 classes). So it will override. Good.

For `.app-hero-section .row .col-lg-7` — adding `color` and `text-shadow`. That's fine. But is it risky? The hero section text might become a different color. That's a visual refresh. I'll pick a color that fits the palette.

For `.contact-channels-section article, .contact-quick-section .contact-card` — adding background with gradient, border-radius, box-shadow. Since the original only sets padding with `!important`, adding these is fine.

Let me refine the palette for "gradient-rich" and "symmetric-grid". Symmetric-grid suggests harmonious, balanced colors. Let me pick a palette:

- Primary: deep teal/indigo? Or warm sunset? The badge is a warning (yellow/orange). Let's create a cohesive palette:
  - Background gradient for cards: soft lavender to light blue — `linear-gradient(145deg, #f8f9ff, #eef1f8)` or something.
  - Badge: warm gradient from amber to coral — `linear-gradient(135deg, #ffd166, #f4a261, #e76f51)`.
  - Text color: dark slate — `#2b2d42` or `#353b48`.
  - Shadows: soft indigo-tinted shadows.

Also, gradient borders via `border-image`. But adding `border-image` requires border-width. I can't add border-width. I can simulate gradient borders with box-shadow inset. Or use `outline` with a gradient? `outline` can't be gradient. So I'll use inset box-shadow for a faux border.

Let me add a subtle inset border to cards:

```css
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 8px 24px rgba(43, 45, 66, 0.08);
```

That gives a light inner border.

For the badge:

```css
background: linear-gradient(135deg, #ffd166 0%, #f4a261 50%, #e76f51 100%);
box-shadow: 0 4px 14px rgba(244, 162, 97, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
border-radius: 999px;
```

Badge border-radius — Bootstrap badges have `border-radius: 0.375rem` by default. Changing to a pill (999px) is a visual change. Good.

For the hero column, maybe a subtle text-shadow and color. Or maybe nothing? The target says "gradient-rich" — most backgrounds. But a text column doesn't need a background. I could add `background` to the col? That's risky because it might cover the hero background. Better not add background to the column. Maybe add a subtle gradient text effect? `background-clip: text; color: transparent;` would make the text transparent and show gradient — but that changes color and could look bad for a whole column with mixed content. Also, if the column contains multiple elements, `color: transparent` would affect all text. Too risky. I'll just add a deep text color and a soft text-shadow.

Actually, wait — the `.col-lg-7` inside `.app-hero-section .row` — in Bootstrap, `col-lg-7` means on large screens it's 7 columns; on mobile (max-width 575.98) it's stacked full-width. Text-align center is set. Adding a color is safe.

Let me also consider: should I add `transition` to the col? Transitions on text-align won't animate. Color transitions could work, but without a hover, transitions do nothing. Still, the target wants "smooth long transitions (0.4-0.6s cubic-bezier)". Transitions are for state changes; even without hover, they'd apply when media query changes. But to keep it meaningful, I'll add transitions to badge and cards.

Now, one more consideration: the instruction says "Only colors, shadows, and decorative properties may change" but also "border-color and border-style (NOT border-width)" and "outline styles (color, type)". I should avoid border-width entirely. My inset box-shadow uses no border. Good.

Also: "border-radius (visual rounding only)" — allowed.

Let me also ensure I'm not changing `padding` value. Original: `padding: var(--space-md) !important;`. Keep exactly. Font-size keep. Text-align keep.

Now, should I use `color` on `.app-hero-section .row .col-lg-7`? If the hero section has a light background, dark text works. If it has a dark background, dark text would be bad. Hmm. I don't have context. To be safe, maybe I should not set a color that could harm readability. But the task is to refresh visual identity; color changes are required. However, if the hero has a dark background and I set dark text, that breaks readability severely. That's a risk.

Alternative: set `color` to a modern hue but rely on the existing background. Since I don't know the background, maybe pick a neutral dark that works on light backgrounds (most hero sections in this kind of template are light). The file is `saishi.css` — likely a sports event/tournament site ("赛事" = competition). These often have dark hero sections with light text. If I set dark text on a dark background, it's bad. 

Hmm. Let me reconsider. Maybe I shouldn't add `color` to the column. The instruction says I must change colors, but not necessarily every selector needs a color change. The badge and cards get color changes. The column could get a `text-shadow` only. But text-shadow on dark background also risky... Actually a subtle white text-shadow on dark text would be invisible. On light background with dark text, a soft white glow looks fine. Let me just add a very subtle text-shadow and skip color? But then the color palette change is less comprehensive.

Wait, I could use `caret-color` and `accent-color`? Those are for inputs, not relevant.

Let me think about the actual context: `.app-hero-section` — app hero section. In a sports event site, app hero sections often have a gradient background (blue/purple) with white text. If I set `color: #2b2d42` on the column, text becomes dark on a dark gradient — bad. 

So I will NOT set a text color on the hero column. Instead, I'll add a subtle text-shadow with low opacity white, which enhances legibility on dark and is invisible on light. Actually, white text-shadow on dark text on light background = invisible, which is fine. On dark background with white text, it adds a glow. That's safe-ish.

But wait, adding `text-shadow` to a column that may contain multiple elements could look odd. Still, it's purely decorative and low risk.

Alternatively, skip the column entirely and only modify the other two rules. But the instruction says "All color values" must change. Since there are no color values in the original, I'm adding new ones. It's fine if I add to only some. But to be thorough, I'll add a subtle text-shadow to the column.

Actually, maybe I can add a background gradient to the column? That would be too risky for layout? No, background doesn't affect layout. But it might cover the hero section's background and look weird. The column is inside `.row` inside `.app-hero-section`. Adding a background to the column on mobile would make a card-like box — that changes the visual design significantly, which is allowed (visual identity refresh). But it might conflict. I'd rather keep the column background transparent.

Let me finalize with a safe approach:

1. `.app-hero-section .row .col-lg-7`:
   - Keep `text-align: center;`
   - Add `text-shadow: 0 2px 8px rgba(255, 255, 255, 0.25);` (subtle)
   - Maybe add `