/* ============================================================
   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 CSS with conservative mode: only colors, shadows, radius, transitions, gradients, etc. The original CSS is a media query block. Need to preserve selectors exactly. But we can add properties? The task says "Refresh the visual identity WITHOUT changing layout structure or class names." We can change color values, add gradients, shadows, transitions, etc. But we must not change layout properties. Also the original CSS includes only font-size, padding, text-align. But they are typography/layout? font-size is typography fixed, padding is layout within 20% allowed? Actually "font-size, font-weight, font-style" are typography fixed. So we cannot change font-size. But we can add visual properties like background, color, box-shadow, border-radius, transition, etc. However, the selectors are for hero section and cards. We can add gradients, shadows, etc. Need to produce valid CSS. Also preserve the media query condition. Let's inspect 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 need to keep all selectors exactly. We can add declarations inside each rule. Must not change existing declarations: text-align center, font-size 0.85rem, padding var(--space-md) !important. We can add color, background, border-radius, box-shadow, transition, etc. But we need to be careful: adding background might affect layout? No, color changes are allowed. Also gradient-rich variant says "Linear-gradient or radial-gradient on most backgrounds" and "Smooth long transitions (0.4-0.6s cubic-bezier)". So let's add background gradients to these elements. But .badge.bg-warning already has bg-warning class, likely Bootstrap background warning. We could override with gradient? That is visual only. Need to ensure padding unchanged. We can add background-image, color, box-shadow, border-radius, transition. But we should not change font-size. Also .contact-channels-section article and .contact-quick-section .contact-card could get gradient backgrounds, shadows, border-radius, transitions. But careful: contact card might have padding only in mobile, but adding background gradient could affect look but not layout.

We must output only CSS, no markdown. Let's craft.

Media query same. For each rule:

1) .app-hero-section .row .col-lg-7 { text-align: center; } We can add? Maybe add a subtle text gradient? But text-align center is layout. Add color? For hero text maybe a gradient text? But to avoid messing, maybe add background? The hero section row col-lg-7 is a container. Adding background gradient might be heavy. But target style "gradient-rich". Could add background: linear-gradient(...); -webkit-background-clip: text; color: transparent; but that would affect text. But original color not set. If we set color transparent, need background-clip text. But then the text might become gradient. Is that allowed? It changes color, allowed. But could cause accessibility issues. Better to add a subtle text-shadow or drop-shadow? Let's do: color: #1a2b4a; text-shadow: 0 2px 8px rgba(255,255,255,0.4); background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.1)); -webkit-background-clip: text; background-clip: text; This would make text white-ish gradient? Might be too much. Alternatively no change except maybe color. But need "gradient-rich" — most backgrounds. We can add to the container: background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)); border-radius: 24px; box-shadow: ...? But adding background to col may create visible box around the column. Hard to know. Since original is mobile hero section, col is likely text. Adding background could be fine.

The requirement: "Refresh the visual identity WITHOUT changing layout structure or class names." We can add decorative properties. So adding background, border-radius, box-shadow to existing elements is okay.

Need to preserve padding exactly, but padding declaration uses var(--space-md). We can't change it. But can add margin? Margin is layout, forbidden unless within ±20%. We won't add margin.

Let's design a fresh palette: maybe deep indigo and soft gold gradients. Balanced harmonious palette. The prompt gives target style: symmetric-grid, but original is media query, no grid structure. We can just apply gradient rich.

Use custom properties? We can define CSS variables? The original doesn't have :root. We could add variables inside media query? But that would add a selector :root or .app-hero-section? To avoid changing selectors, better not add new global selectors. We can use literal colors.

Need to ensure all selectors preserved character-for-character. We'll write same selectors.

Let's craft:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1e2a5a;
        background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
        border-radius: 28px;
        box-shadow: 0 12px 40px rgba(30, 42, 90, 0.12), 0 2px 6px rgba(30, 42, 90, 0.08);
        transition: background 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f7c948, #f5a623, #e8920c);
        color: #1e2a5a;
        box-shadow: 0 8px 24px rgba(245, 166, 35, 0.35), inset 0 1px 2px rgba(255,255,255,0.5);
        border-radius: 999px;
        transition: box-shadow 0.45s 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, #ffffff, #f8f9ff);
        color: #1e2a5a;
        border-radius: 24px;
        box-shadow: 0 16px 48px rgba(30, 42, 90, 0.12), 0 4px 12px rgba(30, 42, 90, 0.06);
        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:hover,
    .contact-quick-section .contact-card:hover {
        background: linear-gradient(145deg, #ffffff, #eef1ff);
        box-shadow: 0 24px 64px rgba(30, 42, 90, 0.18), 0 8px 20px rgba(30, 42, 90, 0.08);
    }
}

But wait: original selector list has a comma and line break. We preserved exactly? The selector text: ".contact-channels-section article,\n    .contact-quick-section .contact-card" We need preserve exactly including whitespace? "Every selector character-for-character preserved." That likely means class names and structure, whitespace maybe not critical, but to be safe, keep same spacing. We can keep same format.

Also we added hover pseudo-class? The original selectors did not include :hover. We added new selector .contact-channels-section article:hover, .contact-quick-section .contact-card:hover. Is that allowed? The rules say: Pseudo-classes (:hover, :focus, ::before, ::after) — "keep exactly" in the sense of existing ones? Actually "🏷️ SELECTORS (CRITICAL - HTML is fixed): ... Pseudo-classes (:hover, :focus, ::before, ::after)" Under NEVER CHANGE list. It says keep exactly? The line says "Pseudo-classes (:hover, :focus, ::before, ::after)" as selectors, and "Selector lists (commas)" are never change. So we should not add new selectors? Yes, "NEVER CHANGE" means don't change the structure. Adding new selectors like :hover might be considered changing selector list, not allowed. Even if it's just adding a new rule, the instruction says "Keep ALL selectors and layout exactly as-is." So we cannot add a new selector rule. We should not add hover states. We can add transitions inside existing rules, but not new selectors. However, we can add pseudo-elements? No. Avoid adding new selectors.

Also, "transition" is allowed to change. We can add transition to existing rules. But no hover state. So remove the hover rule.

Also, adding background to .col-lg-7 might be questionable. The original selector .app-hero-section .row .col-lg-7 is a column. Adding background and border-radius maybe fine, but "border-radius" allowed. However, adding box-shadow to a col inside a row might affect layout? No, box-shadow doesn't affect layout. But it might create visual box around the column that might be okay. Yet the target style "symmetric-grid" not really relevant.

Need to ensure we don't change font-size etc. We didn't.

But we added "color" to .col-lg-7. That's allowed. But if the text already has color, our color might override. That's okay.

Also for .badge.bg-warning, original has font-size: .85rem. We add background gradient, color, box-shadow, border-radius, transition. But Bootstrap .badge might have padding, display inline-block etc. We don't change. Good.

For contact cards, we add padding same. Background gradient with light color. But if original cards already have background, we override. Fine.

Need to consider the "symmetric-grid" target. It says "Layout pattern (Aggressive only): ..." But we are in conservative mode, and original CSS has no grid. We just follow the specified variant "gradient-rich": "Linear-gradient or radial-gradient on most backgrounds" — we did. "Gradient borders via border-image" — maybe we could add border-image? But adding border-image might require border-width? We cannot change border-width. Could add border: 0? No. Maybe we can skip border-image. "Multiple stops for richness" — we have 3 stops in badge. "Smooth long transitions (0.4-0.6s cubic-bezier)" — we did.

Need to include only the rewritten CSS, no markdown.

But let's double-check if any property is layout-related that we shouldn't touch: We added "border-radius" which is allowed. "box-shadow" allowed. "transition" allowed. "background" allowed. "color" allowed. All good.

However, one potential issue: adding background to .col-lg-7 might cause the entire column to have a background, potentially covering hero background? But only in mobile. Could be okay.

Let's also maybe use CSS variables? Not necessary.

Need to preserve "!important" on padding. We keep.

Let's think about the palette. The prompt says "Balanced harmonious palette" and "Consistent shadows." Our palette: deep indigo #1e2a5a, white/light, gold gradient. That's harmonious.

Let's refine with more gradient-rich backgrounds. Perhaps for .col-lg-7, instead of background, maybe just text-shadow. But "gradient-rich on most backgrounds" suggests we should put gradient on the badge and cards. The hero column can have a subtle radial gradient.

Let's craft final CSS carefully.

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

Rewritten:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1e2a5a;
        background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
        border-radius: 28px;
        box-shadow: 0 12px 40px rgba(30, 42, 90, 0.12), 0 2px 8px rgba(30, 42, 90, 0.06);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f7c948, #f5a623, #e8920c);
        color: #1e2a5a;
        box-shadow: 0 8px 24px rgba(245, 166, 35, 0.35), inset 0 1px 2px rgba(255,255,255,0.5);
        border-radius: 999px;
        transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s 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, #ffffff, #f4f6ff);
        color: #1e2a5a;
        border-radius: 24px;
        box-shadow: 0 16px 48px rgba(30, 42, 90, 0.12), 0 4px 12px rgba(30, 42, 90, 0.06);
        transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}

But wait: adding transition to elements that don't have hover is okay, but if there is an existing hover somewhere else, the transition will apply. Good.

Need to ensure "border-radius: 28px" on .col-lg-7 might look odd. But okay.

Could we add a gradient border via border-image? To satisfy "Gradient borders via border-image", we could add border: 1px solid transparent; border-image: linear-gradient(...) 1; But that changes border-width? We set border-width 1px, but original had no border. Adding a border changes layout (border-box vs content-box). Since box-sizing? We don't know. Border adds to element size unless box-sizing border-box. If global box-sizing is border-box, width same. But to be safe, avoid adding border. Border-image without border-width won't show. So skip.

Need to not change font-size. Good.

Potential issue: we added "color: #1e2a5a" to .badge.bg-warning. But bg-warning is a Bootstrap color with yellow background and dark text? We override background with gradient and color dark. Good.

Let's ensure no comments.

Output only CSS. No markdown.

But let's double-check the instruction: "Goal: same layout, fresh color palette + shadow/radius identity" — yes.

One more thing: The media query condition is `(max-width: 575.98px)`. Keep exactly.

Need to maybe use "backdrop-filter" or "filter" for gradient-rich? Could add `backdrop-filter: blur(12px);` to cards? But that might require background transparency. It is visual only. But might not be supported. We can add to cards if desired. But the original selector .contact-channels-section article likely articles with solid backgrounds. Adding backdrop-filter without transparent background does nothing. We can skip.

We need to be conservative: don't change layout or add selectors. Our output is fine.

Let's consider if adding `transition` to `.contact-channels-section article, .contact-quick-section .contact-card` with `background` and `box-shadow` is okay. It won't affect layout.

Potential issue: padding is `var(--space-md) !important`. Our added background etc. use `!important`? No need.

Let's think about "symmetric-grid" target style: It mentions strict equal grids, uniform gap, baseline. Our original CSS doesn't have grid, but the media query might be for a section with grid rows. We can't change grid. But we can add "gap: 24px" to something? No, gap is layout property. We must not add gap. So skip.

We could add `border-radius: 24px` to cards. Already.

Let's verify the original file fingerprint? Not needed.

Let's produce