/* ============================================================
   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 answer only rewritten CSS preserving selectors/layout. Need interpret task. Original CSS snippet only media query with text-align, font-size, padding. There are no colors/shadows/radii/gradients/transitions. We need refresh visual identity without changing layout. But cannot change allowed? It includes layout-ish text-align? "text-align" is locked under typography? It says text-align, vertical-align in layout block NEVER CHANGE. We must preserve. font-size locked. padding can change ±20%. .badge font-size locked. We can perhaps add visual properties within media query? Need careful: They asked "Rewrite this CSS now", but original has only layout rules. To meet visual identity, maybe we can extend with color/background/gradient properties for selectors? But selectors must be preserved exactly; can add declarations to existing rules? "Only the rewritten CSS, preserving ALL selectors and layout exactly." We can add new declarations maybe. However if we add properties to existing rules, no layout change. We must not add new selectors? likely no. Need maybe include media query same.

Need think: The target style "symmetric-grid gradient-rich", but original snippet block only part of file? File segments? It's only css block. Maybe need rewrite given CSS to include visual changes such as background gradients, border radius etc. But original has none. We can perhaps change padding values? within ±20%: `--space-md` unchanged? Can change to `calc(var(--space-md) * 0.9)`? That's padding value change, but may be considered layout. If not needed, keep same. Since no visual properties to change, maybe output original unchanged. But task demands refresh. We might add "transition", "box-shadow", "background", "border-radius" to `.app-hero-section .badge.bg-warning` or contact cards? Need ensure no layout break. Adding background/border-radius to hero section? It might affect visual but okay. But original does not indicate background. Could set properties on selected elements.

Need obey "HTML fixed—only colors, shadows, and decorative properties may change." Thus adding decorative properties allowed. Need not change layout.

Need produce CSS with same selectors and media query. 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;
    }
}

Need maybe visually refresh:
- For `.app-hero-section .row .col-lg-7`, maybe add `text-shadow`? But text-align remains center. Could add `background` no because layout? adding background might change visual. But no need?
- For `.badge.bg-warning`: change visual to gradient-rich: `background: linear-gradient(...)`; `box-shadow`, `border-radius`, `transition`; but if originally bg-warning, we can set background. It doesn't change layout. Font-size unchanged.
- For contact cards: add `background: linear-gradient(...)`, `border-radius`, `box-shadow`, `transition`, maybe `backdrop-filter`. But padding same. Need ensure !important? For new properties maybe not need !important? If original CSS later maybe. To ensure override? We can add `!important`? In conservative mode? Since output new CSS, properties may need important? Hmm.

Need preserve selector list exactly with comma and newline. Need only visual properties. Need maybe use custom properties? Not necessary.

Need "No AI marker comments". No markdown fences. Just CSS.

Need maybe include original declarations plus added. Since "Refresh visual identity WITHOUT changing layout structure or class names" — adding `background` to `.col-lg-7` could alter visual but not layout. But "all selectors preserved" — yes.

Could we choose to add new declarations to existing selectors only. Which selectors? Use allowed properties.

Let's craft a stylish refresh:
- `.app-hero-section .row .col-lg-7` in mobile: maybe add `text-shadow: 0 2px 8px rgba(..., .35);` But if text-align center. Fine. But hero section might contain text; text-shadow maybe okay. Also maybe `background`? no.
- `.app-hero-section .badge.bg-warning`: to make gradient-rich: `background: linear-gradient(135deg, #f6d365 0%, #fda085 50%, #f093fb 100%);` But class `bg-warning` maybe Bootstrap, setting linear-gradient okay. Also `border: 1px solid rgba(255,255,255,0.25);` But border-style, color allowed; width? Existing border maybe default? Border-width could be changed? Not allow? "border-color and border-style (NOT border-width)" So can't add border: 1px solid? That sets width. We could use `outline` or `box-shadow` instead. Could use `border-style: solid; border-color: ...` plus border-width untouched? No original width maybe none. Not good.
Better add `box-shadow`, `border-radius: 999px;`, `transition: background 0.5s cubic-bezier(.22,1,.36,1), box-shadow .5s;`. Also `backdrop-filter` maybe not needed.
- `.contact-channels-section article, .contact-quick-section .contact-card`: Add `background: linear-gradient(...); border-radius: 20px; box-shadow: 0 10px 30px -12px rgba(...); transition: ...;` plus maybe `border: 1px solid rgba(...)`? Avoid width. Could use `outline: 1px solid rgba(...); outline-offset: -1px;` allowed? outline style/color but width? They allow outline styles (color, type) not width. Could set `outline-style: solid; outline-color: rgba(...)`. But no width. Fine.
Need maybe add `backdrop-filter: blur(12px);` to cards.

Need avoid changing padding. Keep `padding: var(--space-md) !important;`.
Need maybe add `background` to contact cards with gradient. "Multiple stops for richness" yes.

Need perhaps add new `@keyframes`? Not allowed? Could but no need. Transition long 0.4-0.6.

Need ensure no punctuation missing. We can include original property declarations plus new.

Need think about potential conflict: `.badge.bg-warning` background: if Bootstrap sets background-color via class, our `background` shorthand may override. But only media query max-width; fine. Could set `background-image`? Better use `background: linear-gradient(...)` which includes background-color. We want gradient-rich. Also maybe background-size etc? No.

Need not change font-size. We'll keep `font-size: 0.85rem;`.

Need maybe add `background-image` to `.col-lg-7`? Not necessary. But to make visual identity refreshing overall, add gradient/background only to some elements. However "accent palette" maybe enough.

Need maybe add `background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));` to col? If text-align center. But this may change hero section block (col) background and radius. But "layout structure" unchanged. Could be okay. Yet adding a background to col-lg-7 might be undesirable if hero section already has background. But target "gradient-rich on most backgrounds"; maybe we should.

Need be conservative: Avoid adding backgrounds to large containers unless specified. But CSS block includes only these elements; we can add to the contact cards and badge. That's enough.

Need maybe create "symmetric-grid" style by adding `border-radius` consistent 16px/24px. For cards `border-radius: 24px`; badge `border-radius: 999px`. Shadow consistent.

Need maybe use CSS variables? Not necessary. Could add custom properties? We shouldn't add custom property definitions in media query maybe okay.

Need produce final answer exactly. Let's craft carefully.

Let's write:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f6d365 0%, #fda085 45%, #f093fb 100%);
        border-radius: 999px;
        box-shadow: 0 8px 20px -8px rgba(253, 160, 133, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.92) 50%, rgba(241, 245, 249, 0.88) 100%);
        border-radius: 24px;
        box-shadow: 0 12px 32px -12px rgba(30, 41, 59, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(12px);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

Need consider transform in transition only; no hover selector. Fine.

But maybe `transform` in transition is not a visual property? Actually property name "transform" not allowed? They didn't list transform in lock; but if not setting transform, transition property can include it. However to avoid concern, remove `transform` from transition because if user has no hover rule? But might be used elsewhere? Since transition property can change. Fine. But "animation & media" allow transition timing/easing/duration. To be safe, no transform. Let's use only background, box-shadow. Transition property: `background 0.5s cubic-bezier(...), box-shadow 0.5s cubic-bezier(...)`. Good.

Need maybe use `border: 0 solid`? no. Could add `border-style: solid`? No default. We can skip.

Need perhaps `outline-style: solid; outline-color: rgba(...)` on cards to give gradient border effect? But if no width, not visible. Can't change width. Could use `outline: 1px solid ...`? They said outline styles (color, type) NOT border-width. Width of outline? They mention outline styles (color, type) but not width. It might be okay? Hmm "outline styles (color, type)" means outline-color and outline-style values, not outline-width. So don't use width. Could use `box-shadow` ring to emulate border: `box-shadow: 0 0 0 1px rgba(...) ...`. That's allowed. Add ring maybe.

Need maybe use `border-image` for gradient borders? The target says gradient borders via border-image. But border-image with no border width won't show. Could set border-image-source and border-image-slice, but border-width remains maybe 0 from original? In those frameworks, contact cards may have borders already from CSS; setting border-image could apply to existing border widths? Not sure. But cannot change border-width. Could use `border-image: linear-gradient(...) 1;` without border-width? If element has no border, no effect. Could use `outline` no. So skip.

Need maybe add `background-clip: padding-box`? Not necessary.

Need maybe "symmetric-grid" target style—not much to do. Maybe add `border-radius: 24px` consistent.

Need maybe update `.contact-channels-section article, .contact-quick-section .contact-card` with `background-color` not gradient? We have gradient.

Need maybe add `background: linear-gradient(145deg, #ffffff, #f8fafc, #eef2f7);` stronger. Since gradient-rich, include multiple stops.

Need maybe add `color`? Original no color; but if we add colors maybe okay. But don't need.

Potential issue: If apply backdrop-filter, might affect mobile performance, but okay.

Need maybe include `-webkit-backdrop-filter` for Safari; allowed. Could add both.

Need maybe include `border-radius` with `!important`? Not necessary but to override Bootstrap. Could add `border-radius: 24px;` may not override because same specificity? `.contact-channels-section article` specificity 0,1,1? Actually 2 classes + element = (0,2,1); Bootstrap `.card` maybe (0,1,0); our rule inside media query will override if later? We don't know order. To be safe, `!important` on visual properties? Original padding has !important. But adding !important to all decorative props might be too aggressive. If task needs "refresh", could be okay. But "conservative" maybe avoid !important except needed. The original has important; adding to new props? We can use !important for padding only as original. Don't add.

Need maybe due to CSS source order, our media query maybe before Bootstrap? But output only this block; no guarantee. !important on padding indicates they wanted override. For new properties, maybe not necessary but could use !important to guarantee. But more `!important` maybe not ideal. Could use `background: ... !important;` etc. But no.

Need maybe produce exactly 3 rules. Need no new selectors. Good.

But before final, let's re-evaluate if we are allowed to add `background` to `.app-hero-section .row .col-lg-7`. The hero col likely a text container; adding text-shadow changes visual. But no issue. Should we add? Target "gradient-rich on most backgrounds" but hero col may not. Maybe add a subtle gradient? It could affect entire background causing an ugly block. Better not. The specific elements:
- `.app-hero-section .badge.bg-warning` is a badge; gradient-rich looks good.
- contact cards are cards; gradient-rich good.
So only two elements with background.

Need maybe maybe add background to article and contact-card; if those elements already have background from classes, gradient override okay.

Need maybe include `border-radius` on article/card; good.
Need maybe include `box-shadow` consistent, and inset highlight. Good.
Need maybe add `transition` on badge/cards.
Need maybe add `background-size`? no.

Need maybe change `padding` from `var(--space-md)` to a slightly different value within ±20%? Since target says visual changes only? The style variables are fixed but padding can vary ±20%. But no need. Keep exact to avoid layout.

Need maybe change `text-align: center`? No, locked. Keep.
Need maybe change `font-size: 0.85rem`? No, locked. Keep.

Need maybe use palette: "balanced harmonious palette" with warm pastel, cool slate. Our badge warm gradient; cards cool light. Shadow color slate. Good.

Need maybe output only CSS with no markdown.

Let's compose final.

However, let's think about details:
- The `transition` property in `.app-hero-section .badge.bg-warning`: originally no transition. We add. Good.
- "smooth long transitions (0.4-0.6s cubic-bezier)" Use 0.5s.
- "shadow multi-layer effects" We have multi-layer shadow: `0 8px 20px -8px rgba(...), inset 0 1px 0 rgba(...)` and cards `0 12px 32px -12px ..., inset 0 1px 0 ...`. Good.
- "border-radius" changed. Good.
- "Gradient borders via border-image" could be interesting. Maybe we can use `border-image` if we also add `border-style: solid` and `border-color`? But "border-width not change" and border-width might be settable by class? Hmm in many frameworks, `.contact-card` might have border: 1px solid var(--...); If we set `border-image: linear-gradient(...) 1;` on an element with no border, it won't show. But if it has border from existing CSS (not in this block) and we don't know, border-image will apply to existing width. We can add `border-image: linear-gradient(135deg, rgba(...), rgba(...)) 1;` as a visual property. Is `border-image` allowed? They said "gradient borders via border-image" in effect variant. So yes. It doesn't change border-width. We can add to cards:
```
border-image: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(203,213,225,0.6)) 1;
```
But if we set `border-radius` with border-image, border-image ignores border-radius? Actually border-image doesn't follow border-radius; not a problem. Maybe use `outline`? no.

Need maybe set `border-style: solid;`? Existing style? If border-style none, border-image doesn't apply. But not necessary. Could set `border-style: solid;` and `border-color: transparent;`? This changes border-style to solid (allowed) but if original had no border, border-width default medium (3px) causing layout shift! Because border-width would default to medium if border-style set