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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

We need to rewrite the given CSS while following conservative mode. The original CSS is:

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

We must preserve selectors exactly, and layout properties exactly. In this case, text-align: center is a layout property (text-align is considered layout? The instructions say "text-align, vertical-align" under "Typography & layout" are not allowed to change. Actually in the "NEVER CHANGE" list under 📐 LAYOUT they include text-align, vertical-align. So we must keep text-align: center unchanged.

font-size is typography, so we must keep font-size unchanged. padding is layout (within ±20%) but we can keep it as is because changing would be risky. The instruction says may change margins/paddings within ±20% but we don't need to change. The main goal is to refresh visual identity: colors, shadows, radius, transitions, gradients. In this CSS there are no colors, shadows, radius, transitions, gradients. It only has layout/typography. So what can we change? Nothing? But the task says refresh this CSS visually. However, in conservative mode, we can only change allowed properties. The original media query has no allowed properties. Could we add new declarations within existing rules? The instruction: "Only change colors, shadows, radius, transitions, gradients." It doesn't say we can add new properties unless they are visual and don't affect layout. But adding properties like box-shadow, border-radius, background-color could change layout? No, they don't affect layout if box-sizing border-box? But adding padding? No. We could add border-radius to these elements? That's visual. However, the original selectors are specific. But is it appropriate to add properties? The task says "Refresh this CSS visually." It implies we can rewrite the CSS block but preserving selectors/layout. We might add visual custom properties or declarations. But we must be careful: we cannot change the existing declarations. We can add new declarations to the existing rules, as long as they are visual properties and don't affect layout. However, adding box-shadow, background, border-radius, transition to these elements could change the visual identity. That's allowed. But note the original rules are within a media query for max-width: 575.98px. Adding visual properties for mobile is fine.

But also we must consider that `.app-hero-section .badge.bg-warning` is a badge; adding border-radius, box-shadow etc. But the badge already has Bootstrap classes, so we can add custom styles. Also `.contact-channels-section article` and `.contact-quick-section .contact-card` can get background, border-radius, box-shadow, transitions. That would be a visual refresh.

Alternatively, the instruction "Only change colors, shadows, radius, transitions, gradients" means that all values of those categories in the original CSS should be changed if present. Since no such values exist, there is nothing to change. But the meta-task expects us to output a CSS that is refreshed. In many similar tasks, if original CSS has no colors etc., we can introduce them. 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 modify only those properties, but if there are none, we can add those properties? The phrasing "Only change colors, shadows, radius, transitions, gradients" means limit your modifications to those categories. Adding them is a modification. So allowed.

Let's infer the target style: "masonry-flow" with soft shadows, white cards, light gray bg, large border-radius, smooth transitions. But the original selectors are not about cards necessarily. The contact sections might be cards, article elements. We can style them as soft cards with white background, soft shadows, rounded corners, subtle transitions. The app-hero section row col-lg-7 is a text alignment, we can't add visual to it? Could add color? That would change text color, but is that layout? Color is visual. We can add color, but the selector is a column, not exactly a card. We should avoid changing text color unexpectedly. But we can add maybe no change to that rule except keep text-align. We could add a transition? But transition on a row is odd.

Maybe the safest is to not add any properties to the first rule, because text-align is not visual in the allowed list. But the instruction says "All color values... box-shadow... border-radius... transition..." can change. If there are no such values, we can leave them. But to fulfill the refresh, we could add `transition` to the row? Not needed.

However, the prompt likely expects a rewritten CSS with visual changes. Let's think of what a typical transformation would look like:

Original:
@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;
    }
}

We can preserve layout (text-align, font-size, padding) and add visual properties. For the badge, add border-radius, box-shadow, maybe a color? But badge has bg-warning, so background already yellow. We can override with a gradient? But that would change bg-warning's background. Could be okay. But the class `bg-warning` is Bootstrap, its background is defined elsewhere. We can add `background: linear-gradient(...)`? That changes color. It might be too aggressive. Better to add border-radius and box-shadow only.

For contact cards, add background: #fff, border-radius: 16px, box-shadow: layered soft, transition: transform .3s ease, box-shadow .3s ease. But adding `transform` on hover? We can't add pseudo-class? Actually we can preserve existing selectors, but we cannot add new selectors? The instruction says "Selectors: keep EXACTLY" and "Every selector character-for-character preserved?" Under never change, we cannot add new selectors. It says "Selector lists (commas)" keep exactly. That means we cannot introduce new selectors. We can only modify declarations within existing rules. So we cannot add a `:hover` rule. We can add `transition` property to the existing selector though. That is allowed. But transition on hover needs a state change. We could add transition because the element may be hovered by default from other CSS, but not in this media query. Transition properties are allowed.

Could we add `transform`? Transform is not listed as allowed or disallowed. Is transform a layout property? It can affect visual layout but not document flow. The allowed categories are colors, shadows, radius, transitions, gradients. Transform is not listed. Therefore we should avoid transform because it could affect layout (if transform changes position, it doesn't affect layout but changes visual position). But the prompt says only those categories. So don't add transform. We can add transition for box-shadow, background-color, border-color, etc.

We can add `border-radius`, `box-shadow`, `background`, `transition`. Background is a color/gradient property. That's allowed. We can add `backdrop-filter` maybe? It's allowed but not needed.

Now, the first rule: `.app-hero-section .row .col-lg-7` is a column. Adding a background or box-shadow to a column could be weird. Maybe we can add `transition`? Not necessary. But to refresh, we could add a `color` property? But color is a visual property. However, changing text color in hero section might be unwanted. But it's an allowed change. We could add `color: #2d2a32` to set a dark text color. That's a color change. But the original didn't have color. Adding color is a "change" but if the original had no color, we're adding a declaration. Is that allowed? "Only change colors" means you can change color values; adding a color is effectively changing the computed color if there is inherited color. It might be considered okay. But let's be conservative: In a mobile media query, text-align center might be paired with a subtle text shadow? No.

Maybe the appropriate approach: Since the original CSS has no visual properties, the only way to "refresh" is to add visual properties. So we'll add to all three rules maybe a visual property that makes sense.

Let's craft a coherent style:

- For `.app-hero-section .badge.bg-warning`: add `border-radius: 999px; box-shadow: 0 4px 8px rgba(255, 193, 7, 0.25);` maybe `backdrop-filter: blur(4px);` but no need. Also transition.
- For `.contact-channels-section article, .contact-quick-section .contact-card`: add `background-color: #ffffff; border-radius: 16px; box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12); transition: box-shadow 0.4s ease, transform 0.3s ease;` But transform not allowed. Better `transition: box-shadow 0.4s ease, background-color 0.4s ease;` Padding remains.

But wait, adding background-color to article/contact-card might conflict if they already have a background from other CSS. But this is inside media query and with same specificity? Actually the specificity is (0,2,0?) for .contact-channels-section article = two classes? .contact-channels-section is a class, article is element => specificity 0,1,1; .contact-quick-section .contact-card = 0,2,0. Other styles might define backgrounds. Our declarations in the media query will apply if they come later in source order, but we don't know. Usually custom CSS after Bootstrap will override. That's fine.

For the hero row col, adding `color` maybe not. We can leave it unchanged because the only allowed change is colors, but there are none. But might be expected to change nothing? The instruction says "Only change colors, shadows, radius, transitions, gradients." If no such values exist, maybe output same CSS. But that would not be a "refresh". The prompt explicitly says "Refresh this CSS visually." So we need to add something. Let's see if there is a way to alter within existing declarations:

- `text-align: center;` could be paired with `text-shadow`? Text-shadow is allowed. We can add text-shadow to the row? Maybe a subtle text shadow? But that might make text blurry. Not ideal.
- `font-size: 0.85rem;` is typography, but we can add `letter-spacing`? Letter-spacing is typography, not allowed.
- `padding: var(--space-md) !important;` we can add `background` etc.

So the most logical is to add visual styling to the contact cards and badge.

Let's consider target palette: Pinterest-like white cards, soft shadows on light gray bg. The contact cards likely sit on a light gray section. We can make them white with soft shadows, large radius. The badge can be rounded pill with a soft glow.

We also might add `border: 1px solid`? Border-style is allowed, border-color allowed, but border-width not allowed. We can add `border: 1px solid rgba(...)`? That adds border-width (1px). The instruction says "border-color and border-style (NOT border-width)" can change. It doesn't say we cannot add border-width. Actually it says "border-color and border-style (NOT border-width)" meaning when changing border properties, do not change border-width. Adding a new border declaration includes border-width, which might be considered adding a new property, not changing an existing one. To be safe, avoid border-width. We can use `outline` with outline-color/outline-style, but outline-width also. Avoid.

We can use `box-shadow` to create border-like effect? `box-shadow: inset 0 0 0 1px rgba(...)` is a shadow, allowed. That's a good trick to add a border without border-width.

So for cards:
- background: #fff;
- border-radius: 16px;
- box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(226, 232, 240, 0.6);
- transition: box-shadow 0.4s ease, background-color 0.4s ease;

But adding `background-color` with color #fff will override any existing background. Fine.

For badge:
- border-radius: 999px;
- box-shadow: 0 4px 8px rgba(255, 193, 7, 0.2), 0 2px 4px rgba(0,0,0,0.05);
- transition: box-shadow 0.3s ease, filter 0.3s ease; (filter is allowed)

Could also add `background` gradient? But bg-warning already sets background. Maybe add a subtle gradient overlay via `background-image`? That's a gradient. Allowed. But better not to override Bootstrap's warning color too much. We can do `background: linear-gradient(135deg, #ffd166, #ffb703);` That would change the badge from Bootstrap warning to a custom gradient. It fits the palette. But `bg-warning` might be used for semantic warning; changing color might be okay. However, the target style is Pinterest-like, so a warm amber gradient could be nice. Let's do that: `background: linear-gradient(135deg, #ffd166, #ffb703);` This overrides `background-color` set by `.bg-warning`; but `background` shorthand resets background-image to gradient. Good.

But note: in Bootstrap, `.bg-warning` has `background-color: #ffc107 !important`? Actually Bootstrap uses `.bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; }` Wait, Bootstrap 5.3 uses `background-color` with `!important`. If our rule has lower specificity and no `!important`, it won't override. Let's check selector specificity: `.app-hero-section .badge.bg-warning` = 3 classes => specificity 0,3,0. Bootstrap's `.bg-warning` = 1 class => 0,1,0. Even with `!important`, specificity not important? Actually `!important` declarations override normal declarations. Bootstrap has `!important`, so our normal declaration cannot override it. To override, we would need `!important` too. We could add `background: linear-gradient(...) !important;` but adding `!important` is not a property value alteration? It's allowed? The prompt says "All color values... gradient colors and stops" can change. Adding `!important` is not layout. But it's a bit aggressive. We can avoid overriding background and just add box-shadow and border-radius. `bg-warning` will remain yellow. Soft shadows with yellow-ish shadow. That's fine.

But target palette "white cards, soft shadows on light gray bg" – if cards are already on a gray background, the white background will make them stand out. Good.

Let's think about the first rule: Could we add `text-shadow`? The hero row col-lg-7 contains text. A subtle text shadow could be part of visual identity, but on mobile text centered, a text-shadow might look odd. Better not.

Perhaps we should add `transition` to the row? Not needed.

Maybe we can add `caret-color`? No.

Given the strict conservative mode, the safest approach is to modify only existing declarations? But there are no color/shadow/radius/transition/gradient declarations. So we must add them to satisfy the task. We'll add sensible visual properties to the selectors where they make sense, and leave the first rule unchanged because it's a layout/typography rule? But then the output would not be fully refreshed. We could add a `color` to the first rule to set text color; that's allowed. Let's add `color: #2b2d42;` to the hero column. That ensures consistent text color. But if the column contains headings etc. with their own colors, this might override inherited color but not direct styles. It's fine.

Alternatively, add `text-shadow: 0 1px 2px rgba(0,0,0,0.05);` to the hero row? That is a shadow, allowed. Could be a subtle depth. But text-shadow on a whole column affects all text, maybe okay. But it might reduce readability. We can set `text-shadow: 0 1px 2px rgba(255,255,255,0.8);` maybe.

Let's decide: We'll add to `.app-hero-section .row .col-lg-7` nothing? The instruction says "Refresh the visual identity". We need to make changes. Let's add a `text-shadow` to the hero column? Actually hero sections often have headings with text shadow for imagery. But this is a column, not a hero overlay. Hmm.

Maybe we can use the custom properties route: At the top of the file, we could define `:root` custom properties? But `:root` is a new selector, not allowed. We cannot add new selectors. So no.

Thus we can only modify within existing rules. So we need to add visual declarations to each of the three existing rules. Let's do that.

For rule 1: `.app-hero-section .row .col-lg-7 { text-align: center; }`
Add `text-shadow: 0 1px 2px rgba(0,0,0,0.04);` and `color: #1e293b;`. But adding color might be okay. However, if the hero section is on a dark background, dark text color would