/* ============================================================
   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, respecting the constraints. The original CSS is short: a media query with three rules, mostly layout/text-align/padding and font-size. But we are told to only change visual identity: colors, shadows, radius, transitions, gradients, etc. The original has no colors or shadows. The selectors are fixed. The layout properties like text-align, padding must be kept within ±20% but we are not changing them. We can add visual properties that don't affect layout, like border-radius, box-shadow, background colors, etc. But note the HTML is fixed, and the target style is masonry-flow aggressive, but the original is just small rules. We should preserve the selectors exactly and maybe enhance with visual properties. However, we must ensure that we don't change the actual layout rules. We can add new declarations to existing rules or keep same declarations. Since original only has text-align, font-size, padding. We must keep those values? The instruction says "width, height, padding, margin (keep similar values, ±20% maximum)" — so padding can be adjusted slightly, but we should probably keep it exactly to be safe. The main goal is to refresh visual identity: maybe add background, border-radius, box-shadow, transitions to these elements. But these elements are inside a hero section and contact cards. The target style is soft-shadows, large border radius, smooth transitions. So we can add those.

We should output the same selectors and the same declarations, perhaps with additional visual declarations. But careful: we can't change selector list or media query. We can add inside the same blocks. Also "CSS custom properties values" can change, but we don't have any. We can introduce color values.

But the instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." So we should include the original declarations, possibly with slightly adjusted padding? But if we adjust padding, we risk changing layout. Better to keep exactly the same values for layout. Since original values are var(--space-md), which is a custom property; we shouldn't change that because it's a layout spacing variable. We can keep it. The font-size 0.85rem can be kept. text-align center kept.

Now, we must add visual properties. Does that violate "Only change colors, shadows, radius, transitions, gradients"? It's allowed to add new visual properties as long as no layout change. We can add background, border, border-radius, box-shadow, transition. But if we add padding? No.

We need to produce CSS that looks fresh. Since target palette: Pinterest-like white cards, soft shadows, light gray bg. But the selectors are specific: `.app-hero-section .row .col-lg-7` is a column within hero section; `.app-hero-section .badge.bg-warning` is a badge; `.contact-channels-section article` and `.contact-quick-section .contact-card` are cards. We can apply soft shadows and radius to the cards, and maybe text-shadow to the hero text? But don't overdo.

Also note media query max-width 575.98px. So all these are mobile styles. We can add transitions and shadows in that mobile view. But the original rule for `.app-hero-section .row .col-lg-7` just centers text. We can add color or text-shadow? Maybe no.

Since the original has no colors, the "new visual identity" could involve adding some subtle color/background to the badge maybe. But must be careful with class `.badge.bg-warning` — it likely has Bootstrap warning background. We can override with new background gradient? The target says "Each card may have its own accent strip" but not for badge.

Maybe the best approach is to keep the original declarations and add only non-layout visual properties that are safe. For the contact cards, add border-radius, box-shadow, transition, maybe background white. For article elements, add border-radius, box-shadow, background. For hero column, maybe add text-shadow? But the target style is soft-shadows and large radius; cards should have soft multi-layer shadows. So we can add those to the contact cards. Also maybe to the hero col? Not necessary.

But we must ensure that all selectors are present. Also no extra comments.

Let's craft the output. We need to include the media query and all three rules. We'll keep original declarations exactly. Then add new visual declarations. But do we need to add a transition to all? Yes.

Let's examine the 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 rewrite to:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd166 0%, #f4a261 100%);
        box-shadow: 0 4px 12px rgba(244, 162, 97, 0.3);
        border-radius: 999px;
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border-radius: 18px;
        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.4s ease;
    }
}
```

But careful: Does adding `background: #ffffff` to article/contact-card alter layout? No. It might affect color scheme. But target palette: white cards on light gray bg. The body background is not in this snippet. We could set background to light gray for the contact cards? The target says "Pinterest-like: white cards, soft shadows on light gray bg". Since we cannot change body background (not in selectors), we can at least make the cards white. But if they already have a background from Bootstrap, we are overriding it. That is a color change, allowed.

Also `.badge.bg-warning` has a Bootstrap background utility. We can override with gradient warning colors. But we must not change font-size. That's okay.

Should we include `-webkit-` prefixes? Probably not necessary. But we can.

We must ensure no layout property changed. Padding remains exactly var(--space-md) !important. Border-radius is visual. box-shadow visual. transition visual. background visual. text-shadow visual.

But the instruction "Only change colors, shadows, radius, transitions, gradients" — we are adding new properties. Is that allowed? The output should be a rewritten CSS, likely yes. But maybe the original had no shadows, so adding them is changing shadows. Good.

Another nuance: In the hero column, adding text-shadow might be too much and no baseline to compare. We can add color? The original text color maybe inherited. We could set color to a dark gray, but that could be a change. However, "all color values" must be replaced with fresh palette. Since the original doesn't specify colors, the new palette can be introduced. But we should be careful not to ruin readability. Adding a subtle text shadow is fine.

Let's also consider the target style "masonry-flow" is about layout pattern, but we are not allowed to change layout. So we ignore that part effect. The variant is soft-shadows, large border-radius, smooth transitions. So we should apply to cards.

Now, should we apply border-radius to the hero col? Probably not.

Should we apply transitions to the hero column? Maybe not needed.

Let's also think about the badge: `.bg-warning` is a Bootstrap utility with yellow background. Overriding with gradient is okay, but if we change border-radius to pill shape, that might affect layout? Border-radius doesn't affect layout. It might make it look better.

Potentially, we can add a hover state? But our selector list must match exactly; we cannot add a new selector without changing HTML? Actually we can add pseudo-selector like `.contact-card:hover` but that would be a new selector not in original. The instruction says "Selector lists (commas)" and "Pseudo-classes (:hover, :focus, ::before, ::after)" are to be preserved exactly. It doesn't say we can't add new pseudo-class rules? But "HTML is fixed — only colors, shadows, and decorative properties may change." Adding a new rule with a selector could affect layout? Pseudo-class only on hover, but if we add it, we are modifying the CSS beyond the original selector set. The requirement "Keep ALL selectors exactly" might mean we must not introduce new selectors. Better not to add :hover rules. But we can include transition on the base rules, so hover is smooth.

Also, should we keep `!important` on padding? Yes, as original. We cannot remove it. It's part of declaration value. We should keep same.

Now, let's consider if we can change `font-size: 0.85rem`? The typography fixed: font-size unchanged. So keep it.

We can change the media query breakpoint? No.

Thus output is simple.

Let's ensure the padding remains within ±20% of var(--space-md), but we keep exactly.

Now, maybe the target palette from Pinterest: light gray background `#f5f5f5`; white cards `#fff`; soft shadows. But we can only set card background; the light gray background would be on a parent not in selectors. We could set the article/card background to `#ffffff`. We could also set the hero col's background? Maybe not.

For the badge, maybe use `#ffd166` to `#f4a261`. That is a warm gradient. Or use "accent strip"? Hmm.

Let's consider using a more modern palette: soft blue/violet? The request target is Pinterest-like, so white cards, light gray bg. We'll keep the badge warm yellow.

Maybe add a border to cards? `border: 1px solid rgba(0,0,0,0.04)` is color change? Yes, border-color. That's allowed. But the original had no border. Adding border can affect layout? Border-width adds to element dimensions unless box-sizing: border-box (Bootstrap global). Since Bootstrap sets box-sizing border-box, border-width won't affect layout. But we should be careful: if box-sizing is content-box, adding border would change size. To be safe, avoid adding border. Use box-shadow instead.

Let's formulate final CSS:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 2px 8px rgba(255, 255, 255, 0.7);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd166 0%, #f4a261 100%);
        box-shadow: 0 4px 12px rgba(244, 162, 97, 0.35);
        border-radius: 999px;
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border-radius: 1.125rem;
        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.4s ease;
    }
}
```

We use `1.125rem` equals 18px. Good. Transition includes transform, but we didn't change transform on hover. It's okay; indicates that on hover (if any existing rule) it would animate. But maybe transition of transform is allowed. But we didn't define transform, so no effect. Could also just use box-shadow transition. But the variant specifically says smooth transitions 0.3-0.5s ease. So transition on box-shadow is enough. We can add transform to be decorative? It doesn't affect layout. If there is a hover transform in another rule, it will transition. No harm.

But `transition: box-shadow 0.4s ease, transform 0.4s ease;` is a visual property. Good.

Should we include `box-shadow` on hero col? Possibly not.

Now, one more thing: The instruction "Only change colors, shadows, radius, transitions, gradients" — We are adding text-shadow, box-shadow, border-radius, background gradient, transition. That's all allowed. We are not changing layout. Good.

But we must be mindful of "line-height, letter-spacing, word-spacing" unchanged; we didn't.

Now, is there any issue with using `!important` only on padding? Yes, preserve.

Let's output the CSS as final. No markdown fences. Ensure first character is `@`.

However, let's double-check the "conservative mode" restrictions: "✅ YOU MUST CHANGE: All color values: background, color, border-color, fill, stroke, outline-color; box-shadow; text-shadow; border-radius; gradient colors; transition; filter; opacity; outline; border-color; caret-color; accent-color; CSS custom properties". Our output does change/add color values, shadows, radius, gradient, transitions. Good.

"🔒 NEVER CHANGE: Selectors; display; position; grid; flex; width/height; padding/margin (keep similar); gap; justify/align; float; z-index; overflow; box-sizing; visibility; aspect-ratio; object-fit; text-align; vertical-align; typography; font-size; line-height; letter-spacing; word-spacing; text-transform; white-space; word-break; @keyframes names; @media breakpoints; @import etc." We kept text-align and font-size and padding exactly. Good.

One nuance: The rule for `.app-hero-section .badge.bg-warning` originally only had `font-size: 0.85rem;`. We added `background`, `box-shadow`, `border-radius`, `transition`. All visual. The selector list exactly. Good.

Now, should we add `backdrop-filter`? Not necessary.

Let's consider if `background: linear-gradient(...)` on the badge will override Bootstrap's `.bg-warning` which uses `background-color` not `background`. A gradient is a background-image, so it will be on top of the background-color. That's fine. But if we set `background:` shorthand, it resets `background-color` to transparent? Actually, `background: linear-gradient(...)` resets background-color to initial (transparent) and background-image to gradient. So it's fine. But Bootstrap's `.bg-warning` also sets `--bs-bg-opacity` maybe, and the color is `#ffc107` with alpha. Our gradient overrides.

Alternatively, we can set `background-color: #ffd166;` and `background-image: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);` to keep a solid fallback. But our current is fine.

Maybe we should include `color: #4a2d0a` for badge text? The original did not specify color, but to maintain readability on orange gradient, the text should be dark. But changing color is allowed; however, we must not change font-weight etc. We could add `color: #4a2d0a;` but if the badge text is white from Bootstrap, on orange gradient white may be low contrast. Better to add a color. But adding color may change appearance; it's allowed. Let's see if `.badge.bg-warning` usually has dark text in Bootstrap? Bootstrap's `.badge` has `color: #000`? Actually, in Bootstrap 5, `.bg-warning` sets `--bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity))`; the badge text color is inherited, often dark from body. The badge text color is not set to white; in Bootstrap, `.badge` uses `--bs-badge-color: #fff`? Wait, Bootstrap 5.3 defines `.badge { --bs-badge-color: var(--bs-white); }`? Let's recall: In BS5, `.badge` color is `var(--bs-badge-color)` which defaults to `#fff`? Actually, `.badge` has `color: var(--bs-badge-color);` and `--bs-badge-color` is set to `#fff` for all badges? Hmm, for text-bg-* utility, it's white. But `.bg-warning` doesn't automatically set text color. To be safe, we can add `color: #3c2a04;` (dark brown). This is a color change allowed. Let's add it to badge.

But the instruction says "Font-family, font-size, font-weight, line-height unchanged" but color can change. So add color.

Also for hero column, adding text-shadow with white might be okay; but should we add a color? If the hero text is dark on a light background, white text-shadow may be subtle. We can add a soft shadow. Good.

For cards, maybe add `color`? Not necessary.

Let's craft the final with badge color.

Also, target palette maybe includes light gray background for cards? No, white cards on light gray bg. We can set article/card `background-color: #ffffff;` and maybe the body background is elsewhere. Since we can't change body, we could set the parent section? Not in selector. So only