/* ============================================================
   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 address user asks rewrite CSS. Need conservative mode: visual only. Input CSS small: media query max 575.98 with three rules. Layout properties none except text-align? Actually text-align considered layout? It says typography includes text-align? They list text-align in layout? Under typography they say font-family etc including text-align? It says under 📝 TYPOGRAPHY: font-family, font-size, font-weight, font-style, line-height, letter-spacing, word-spacing, text-transform, white-space, word-break. not text-align? Actually they list text-align under layout. Hmm "text-align, vertical-align" in layout (cannot change). But original has text-align: center. Should preserve.

We need change colors, shadows, radius, transitions, gradients. But no colors etc in original. We can add them? Need refresh visual identity. Since media query only has text-align and padding/size. We can change visual properties within same selectors: e.g. add color, background, border-radius, box-shadow, transitions? But must preserve layout. Adding colors to elements? Need target classes. We can add properties not originally present? likely yes, as long as layout unchanged. But need careful: original CSS snippet only. Need output rewritten CSS preserving selectors and layout declarations exactly? It says All color values etc can change. Since no color values exist, we can add color properties? The instruction: "Refresh this CSS visually" and "Only change colors, shadows, radius, transitions, gradients." We can introduce these properties. Need not change selectors. Need output only CSS.

We need infer original full context? Not enough. We can add visual properties to existing selectors: 
- .app-hero-section .badge.bg-warning: font-size unchanged 0.85rem, add maybe background gradient, color, border-radius, box-shadow, backdrop-filter? We can set visual.
- .contact-channels-section article, .contact-quick-section .contact-card: padding unchanged, add background, border-radius, box-shadow, transition, backdrop-filter maybe. But could affect layout? box-shadow no layout. solid colors. Need ensure no layout changes. 
- First rule text-align center preserved. Could add maybe color? But changing text color in hero? Might affect if inherited? unnecessary. But visual refresh should modify colors. We can add color only to badge and cards, not all hero.

Need avoid changing padding more than ±20: original `var(--space-md) !important` remains same. For badge `font-size: 0.85rem` remains same. We can add line-height? no.

Need perhaps add `background`, `border`, `border-radius`, `box-shadow`, `transition`, `backdrop-filter` to these elements. Need stay responsive mobile only. Implement gradient-rich editorial magazine palette: cream/beige, ink, deep red/olive accent. Use gradients on most backgrounds. For badge.bg-warning, replace background with linear-gradient, maybe border: 1px solid rgba? border-color. But adding border could alter dimensions if box-sizing border-box? Most CSS bootstrap uses border-box, but adding border without width maybe no. If we add border-width 1px, it could affect layout if box-sizing not border-box. Safer no layout properties? It says border-color and border-style can change but NOT border-width. Since original has no border, adding border-width maybe violates? "border-color and border-style (NOT border-width)" means if border-width exists, can change color/style but not width. To be safe, don't add border-width. We can use box-shadow as border-like outlines.

Add `border-radius` allowed. Add `box-shadow`. Add `transition`. Add `background` with gradients. Add `color`. Add `text-shadow` maybe. Need ensure no `position` etc.

Need preserve `!important`? Original includes padding `!important`; we should preserve important on padding? yes. For added properties maybe no important. But "Every selector character-for-character preserved?" Selectors unchanged. Properties? Need preserve layout declarations exactly: text-align and padding. We can keep them. `font-size` preserved. `padding` var.

Need maybe include same media query. Output only CSS. No markdown.

We need decide exact CSS. Let's craft:

@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;
        color: #1a1a1a;
        background: linear-gradient(135deg, #d9a05b 0%, #c44536 100%);
        border-radius: 999px;
        box-shadow: 0 4px 15px rgba(196, 69, 54, 0.25), inset 0 1px 0 rgba(255,255,255,0.25);
        text-shadow: 0 1px 0 rgba(255,255,255,0.15);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        backdrop-filter: blur(4px);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(245,241,232,0.7));
        border-radius: 16px;
        box-shadow: 0 12px 32px rgba(26,26,26,0.08), 0 2px 6px rgba(26,26,26,0.04);
        transition: transform 0.4s ease, box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s ease;
        backdrop-filter: blur(8px);
    }
}

Wait: adding `transform` transition but no transform. Could be fine. But transition property includes transform not changing layout? transitions of transform no layout. But if no transform, nothing. Could be okay. Maybe add `transition: box-shadow, background`. No need transform. Need "smooth long transitions 0.4-0.6s cubic-bezier". Use transition on visual properties. If no hover style, transition irrelevant. Could include `@media (hover:hover)`? no.

Need ensure background gradient with rgba might be okay. Could use editorial neutrals. Need perhaps change `.app-hero-section .badge.bg-warning` background from Bootstrap warning yellow to accent gradient. Need `color: #1a1a1a` maybe contrast with gradient? If gradient deep red + amber, #1a1a1a okay. Could use `#2b2b2b`. Fine.

Need maybe add `border: 1px solid rgba(196,69,54,0.3)`? Border-width violation? Avoid.

Need maybe use `outline`? Allowed outline style. But no need.

Need ensure `backdrop-filter` okay; if unsupported no layout. Need add `-webkit-backdrop-filter` maybe. Allowed.

Need perhaps add `background` on `.app-hero-section .row .col-lg-7`? Could set color? but no need.

Need think about context: These rules are mobile only. We can apply visual styles inside media query. If original had desktop styles for these elements, our mobile-only additions may override? Since selector same, media query later? We are rewriting only snippet; but entire file maybe includes these selectors outside media query. Our additions inside media query will override only mobile. Fine.

Need perhaps preserve `padding: var(--space-md) !important;` exactly? It is layout property and should keep. We can keep. "padding, margin (keep similar values, ±20% maximum)" We keep exactly. Good.

Need maybe preserve `font-size: 0.85rem;` exactly. Keep. It is typography, no change. Good.

Need maybe preserve `text-align: center;` exactly. Keep.

Need maybe use `--space-md` unchanged. Fine.

Could add `background`, `border-radius`, `box-shadow`, `transition`, `color`, `backdrop-filter`. All visual.

Need perhaps "All color values throughout the file replaced with fresh palette?" There were no colors. We introduce fresh palette. Fine.

Need output no preamble. Should we include exactly media query with blank lines. Fine.

Need maybe include `filter` or `opacity`? Not necessary.

Need perhaps use gradients "on most backgrounds". We have two gradients. Good.

Need maybe no markdown fences. Our response should be just CSS. Need ensure no extra text.

Let's craft final:

@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;
        color: #1a1a1a;
        background: linear-gradient(135deg, #e9b15c 0%, #c44536 100%);
        border-radius: 999px;
        box-shadow: 0 4px 16px rgba(196, 69, 54, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s ease;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #ffffff 0%, #f5f1e8 90%);
        border-radius: 18px;
        box-shadow: 0 12px 30px rgba(26, 26, 26, 0.08), 0 3px 8px rgba(26, 26, 26, 0.04);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s ease, transform 0.4s ease;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

Need check: transition includes transform but no transform property. Not harmful, but maybe "transform" is not a visual transition? Could cause no issue. Maybe avoid transform to abide? The instruction says transitions can change, and animation values can change. Adding transition isn't layout. But maybe `transform` property if no transform, nothing. Could keep. However, if some existing transform on article due to other CSS? We don't know. If existing transform on article, adding transition could animate it, visual. That's allowed. But in conservative class, no layout changes. Fine.

Need perhaps add `border-radius: 18px` to article/card; but if original card already has radius or pill, okay. This changes visual. Fine.

Need maybe `color: #1a1a1a` on article? Could cause text color but if article text not inheriting? It sets. But not necessary. Could set `color: #2b2b2b;` to editorial ink. Since original maybe body color. Fine. Add? It's visual. But if parent has color? It overrides. Could be okay. But if card has headings etc, color inherited by children unless headings have own color. Usually fine. Need maybe not because could affect links? But okay. Add `color: #1a1a1a` to card and badge. But gradient-rich.

Need perhaps for `.app-hero-section .badge.bg-warning`, `background` uses Bootstrap warning color, replacing. Good.

Need perhaps use `border-radius: 999px` on badge; might be originally pill. Fine.

Need perhaps use `box-shadow` with multiple layers, allowed.

Need maybe use `outline`? no.

Need make sure no comment. Good.

But hold on: The task says "File: assets/css/saishi.css#块2/2" and "File fingerprint". It might want full CSS? Input only this snippet. We output rewritten snippet only. Fine.

Need consider whether to include `@media` no changes. Yes.

Let's think if any rule could violate "text-align is typography" or "layout" no, preserve.

Potential issue: adding `background` to `.contact-channels-section article` could override article background from original, maybe okay visual. But if card already had background transparent? Fine.

Potential issue: `backdrop-filter` not layout but may require background transparency to show. We have background opaque gradient; backdrop-filter won't show much. Could use gradient with rgba alpha to let backdrop blur show. We used opaque? Actually gradient from #ffffff to #f5f1e8 both opaque, so backdrop-filter invisible. Could use `rgba(255,255,255,0.85)` to allow. That is visual. Let's use:
background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(245,241,232,0.75));
Then backdrop-filter visible. Also shadows. Good.

Badge backdrop with background opaque maybe invisible too. Use rgba? Badge background gradient with rgba? Could use `background: linear-gradient(135deg, rgba(233,177,92,0.9), rgba(196,69,54,0.9));` Then backdrop visible. But badge may be over image. Fine.

Need maybe ensure text color contrast. `#1a1a1a` on rgba gradient with amber and red maybe okay but red may be low contrast. Could use dark text, but deep red background can make dark text less readable. White text on red? But badge is `.bg-warning` originally yellow with dark text. If we switch to red, dark text may not be ideal. Editorial magazine accent red with cream text might be better: `color: #f5f1e8; text-shadow: 0 1px 2px rgba(26,26,26,0.2);`. But original badge likely dark text. This is visual. We can choose. Need "fresh palette" and editorial. Deep red #c44536 with cream text is elegant. Gradient `#e9b15c` to `#c44536`; dark text on amber side okay, on red side low. Cream text on amber might low contrast. Could use gradient with olive? Maybe badge uses `#6b705c` to `#c44536` both medium, white text okay. Or use beige background with red text. But "single accent color deep red or olive" maybe background cream and text accent. However badge.bg-warning is likely meant as a chip. Could use `background: linear-gradient(135deg, #6b705c, #c44536); color: #f5f1e8;` Good. This is fresh.

Maybe use "ink black text" for cards: color #1a1a1a. Badge cream text. Let's set:
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    color: #f5f1e8;
    background: linear-gradient(135deg, #6b705c 0%, #c44536 100%);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(196,69,54,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 2px rgba(26,26,26,0.25);
    transition ...;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

Need maybe `background` with alpha? Could use `rgba(107,112,92,0.9), rgba(196,69,54,0.9)`. backdrop blur visible if element background translucent, but if original element behind? Actually backdrop-filter blurs whatever behind the element. If element background has alpha, then blurred background shows through. If opaque, backdrop filter still blurs behind but covered by opaque so invisible. With alpha, visible. Use alpha 0.85. E.g. `linear-gradient(135deg, rgba(107,112,92,0.9), rgba(196,69,54,0.9))`. Fine.

Cards: `background: linear-gradient(145deg, rgba(255,255,255,0.85), rgba(245,241,232,0.7));` and backdrop-filter. Good.

Need maybe use `border: 1px solid rgba(...)`? Could use box-shadow as border? Maybe no. Could add `outline: 1px solid rgba(196,69,54,0.15);`? Allowed outline style but adds outline no layout. But maybe no. Could use `box-shadow: 0 0 0 1px rgba(...)` to create interior border. But box-shadow spread may be okay. We can incorporate.

Need maybe "gradient borders via border-image" in target style. We can't add border-width? Could add `border: 2px solid transparent; border-image: linear-gradient(...) 1;` But that adds border-width, violating. Also border-image doesn't affect layout if border-box? But border-width width could. We should avoid.

Need maybe "border-radius visual rounding only" we adjust. Good.

Need perhaps "filter" no need.

Need maybe "opacity" no.

Need maybe "caret-color, accent-color" no form elements.

Need maybe "CSS custom properties values" no variables except --space-md used; we preserve.

Need maybe use semicolons. Fine.

Need perhaps "No AI marker comments." We won't have comments.

Let's ensure no markdown fences. Fine.

Need maybe check if output starts with CSS char, not blank? User says first character = first CSS character