/* ============================================================
   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. Need inspect original: It's a fragment inside @media max-width 575.98px with three rules. We need change visual identity without layout. But original has no colors/shadows? We can add color, shadow, border-radius, transition, etc to same selectors? Need preserve selectors and layout. But "target style sidebar-classic" and glow affects. Need output CSS with same media query + selectors and declarations? We can add visual properties not present; avoid changing layout properties. Need keep font-size? Original font-size 0.85rem. Can't change? It's typography fixed, so keep font-size exactly. Padding original var(--space-md) !important; keep within ±20%; keep same var maybe okay. We can add color, box-shadow, border-radius, transition, background, etc. Need "colors throughout file replaced" but no colors present. Could add. Need be careful .app-hero-section .row .col-lg-7 text-align center cannot change (layout/typography? text-align fixed). We keep. Add color? Maybe. There are badge.bg-warning visual. We can change background? But .bg-warning is Bootstrap class; original file doesn't define. Could add color/background? Need selectors exact, no extra? We can add declarations. But "same layout". Need perhaps rewrite whole file with additional declarations. However "only colors, shadows, and decorative properties may change"; adding box-shadow etc okay. Must not introduce new selectors.

Need consider media query selectors:
@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 preserve all. For first rule add maybe color, text-shadow? But text-align center unchanged. Need perhaps no need. But user wants visual changes; if only adding to badge and contact cards. But perhaps .col-lg-7 is text container, can add color maybe but shouldn't affect layout. Could add color: var(--text-light, #f0f3f8) if background? But uncertain. Better not.

For badge.bg-warning add background? But class bg-warning already background; adding background might override Bootstrap? Could set background: linear-gradient(...), color, border, box-shadow, border-radius, transition. The original CSS didn't have those; adding is within allowed? But selectors same, class names fixed. Fine.

Contact cards rules: can add background, border-radius, box-shadow, border etc. Need padding unchanged. Need maybe transition. Need "side-classic" color palette? Since HTML fixed, no layout. We'll add visual styling for these elements. But need no extra selectors. Could output with extra declarations. We should avoid changing font-size. Fine.

Need decide style: dark sidebar #252e3a? But this is hero/badge/contact cards. Could use dark surfaces with glow. Need relevant. Maybe set variables? Wait original uses var(--space-md) and var(--space-md); if we define --space-md? No, don't need. Use CSS variable names maybe but if undefined, could break? The existing code uses var(--space-md) so there must be root definitions. Don't define.

Let's create refreshed CSS:
- Keep media query.
- .app-hero-section .row .col-lg-7 { text-align: center; color: #252e3a; text-shadow: 0 2px 12px rgba(144, 224, 239, .25); } Maybe don't change color? But okay. However text-align center fixed. Color is not typography? It's visual, allowed. text-shadow visual.
- .app-hero-section .badge.bg-warning { font-size: 0.85rem; background: linear-gradient(135deg, #ffd166, #f4a261); color: #252e3a; border: 1px solid rgba(255, 209, 102, .6); box-shadow: 0 0 24px rgba(255, 209, 102, .45), 0 4px 16px rgba(37, 46, 58, .18); border-radius: 999px; transition: box-shadow .3s ease, transform .3s ease; } But transform is layout/decorative? It doesn't affect layout? Could add transform on hover? Need pseudo? Not allowed add pseudo no. We can set transition but no hover. Maybe fine. But box-shadow "0 0 24 px rgba(accent, .4)" exactly. Glow yes. Need maybe background linear gradient. Keep font-size no change. Padding? not touch.
- .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; background: rgba(37, 46, 58, .85); border: 1px solid rgba(255, 209, 102, .14); border-radius: 16px; box-shadow: 0 8px 28px rgba(37, 46, 58, .12), 0 0 0 1px rgba(37, 46, 58, .04), 0 0 24px rgba(144, 224, 239, .18); backdrop-filter: blur(12px); transition: box-shadow .35s ease-in-out, background-color .35s ease-in-out, border-color .35s ease-in-out; } Wait article and .contact-card may have padding only; adding background may alter visual but okay. Need be careful background-color transition has no background-color property; okay but harmless. backdrop-filter allowed.
But "contact-channels-section article" might refer to articles; good.

Need maybe no use of transform if not. Need "Subtle pulsing animations" but can't add @keyframes? We can add? The rule "animation-name values CAN change" but adding animation to selector maybe allowed? It says @keyframes names (values inside CAN change) but don't add new? Probably can add. But "Only colors, shadows, decorative" animation? It is visual. We can animate box-shadow? But perhaps adding animation to badge creates attention. Need if we add animation, we'd need @keyframes. But output must preserve all selectors; adding @keyframes changes nothing. But user says output CSS only, no AI comments. Could add @keyframes badgeGlow? But in original there were none. Is that allowed? "Keep ALL selectors and layout exactly as-is." @keyframes not a selector? Could add. But to be conservative, maybe avoid animation because no line references impossible? We can use transition only. But target effect says "Subtle pulsing animations." Yet if we add @keyframes inside media? valid but must ensure not affect layout. Let's consider.

Could write:
@keyframes softPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(255,209,102,.35); }
  50% { box-shadow: 0 0 30px rgba(255,209,102,.55); }
}
Then apply animation to .badge.bg-warning: animation: softPulse 2.8s ease-in-out infinite; But animation modifies box-shadow, visual. This is allowed? "animation-name (values like duration/timing CAN change)" suggests animation names preserved if in original, but not necessarily no new. Could introduce new @keyframes; but user asked "Keep ALL selectors" not "no new keyframes". It might be okay. But in CSS output, ensure @keyframes outside media? Could be inside. Need maybe no, because it's extra.

But the prior attempt "didn't change enough." Thus we should make more pronounced visual. Use multi-layer shadows, gradients, new palette. Add animation if possible. Need be careful with "layout structure" not change. Adding backdrop-filter, border-radius, etc okay.

Need check modifiers: .bg-warning class original Bootstrap has background-color #ffc107 !important maybe. To override, need background with !important? But original file may have `.badge.bg-warning { font-size: .85rem; }` and Bootstrap includes `.bg-warning { background-color: #ffc107 !important; }`. To override background, we need `background: linear-gradient(...) !important;`. Since our rule specificity .app-hero-section .badge.bg-warning (0,3,0) > .bg-warning (0,1,0), both !important, higher specificity wins. Even without !important, our background shorthand does not override class? CSS: `.bg-warning { background-color: #ffc107 !important; }` and ours `.badge.bg-warning { background: linear-gradient(...) !important; }`. Use !important for both maybe. But we are "rewriting CSS" only this file. We can add background: linear-gradient(135deg, #ffd166 0%, #f4a261 100%) !important; But should we use !important? It won't break layout. Also color: #252e3a !important maybe. Border: 1px solid rgba(...) might add dimensions? Border width 1px could affect layout (box-sizing? bootstrap box-sizing border-box, so no layout shift? Actually border within width due border-box, but for inline element? Badge is inline-block maybe no shift. Still layout? Border width changes size but no because border-box. But conservative says border-color and border-style can change, NOT border-width. So don't set border-width, but setting border shorthand includes width 1px—violates! Need avoid setting border-width. We can set border-color or border-style? The instruction "border-color and border-style (NOT border-width)" so if we want border, must not set border-width. If element has existing border, change color? But no. We can use outline instead? Outline not layout. Use `outline: 1px solid rgba(...)`? But outline-width is not prohibited? It says outline styles (color, type) can change; maybe outline-width not specifically but layout? It doesn't affect layout. But to be safe, could use `box-shadow: 0 0 0 1px rgba(...)` — no layout. So avoid border-width entirely. Good.

Could set `border-radius` can be changed only if border-radius property exists? Original not, adding okay. `border-style`? no. We can set box-shadow inset ring. Great.

Similarly contact cards adding border-style? no.

Need maybe not add border width. Use box-shadow ring.

Need preserve padding exactly; yes.

Need ensure no property with transition on `background-color` because no original? Fine.

Need consider color palette. Need choose "sidebar-classic": Sidebar darker #252e3a, main lighter, functional accent. Since this fragment no sidebar. Use dark surfaces and warm/cool accents. Let's choose palette:
- Deep slate: #252e3a
- Soft light: #f8f3e9 or #eef1f5
- Accent gold: #ffd166, #f4a261
- Cool cyan glow: #7fd8e6 maybe.

Need output only CSS no markdown. Could include @keyframes. But maybe "Only rewrite selectors and declarations preserving all selectors" They said "No  comments" and "first character first CSS character". We can output.

Need decide final content. Let's plan exactly:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #252e3a;
        text-shadow: 0 2px 16px rgba(127, 216, 230, 0.25);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd166 0%, #f4a261 100%);
        color: #252e3a;
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(255, 209, 102, 0.4), 0 6px 20px rgba(37, 46, 58, 0.18);
        animation: badgeGlowPulse 2.8s ease-in-out infinite;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(37, 46, 58, 0.88), rgba(37, 46, 58, 0.72));
        color: #f8f3e9;
        border-radius: 16px;
        box-shadow: 0 12px 32px rgba(37, 46, 58, 0.16), 0 0 0 1px rgba(255, 209, 102, 0.12), 0 0 28px rgba(127, 216, 230, 0.14);
        backdrop-filter: blur(14px);
        transition: box-shadow 0.35s ease, background 0.35s ease, color 0.35s ease;
    }
}

@keyframes badgeGlowPulse {
    0%, 100% { box-shadow: 0 0 18px rgba(255, 209, 102, 0.35), 0 6px 20px rgba(37, 46, 58, 0.18); }
    50% { box-shadow: 0 0 32px rgba(255, 209, 102, 0.6), 0 6px 24px rgba(37, 46, 58, 0.24); }
}

But wait, "No markdown fences" so final should be CSS. @keyframes after media maybe okay. But if @keyframes was not in original, maybe "all selectors preserved" yes no selector? @keyframes has keyframe selectors 0%,100%,50%; not HTML. Fine.
Need check `background` shorthand vs `background-color` maybe okay. Need no border-width. Good.

Need consider transition on `.contact-*` with `background` shorthand; okay. But if no hover interaction, transition only on state changes perhaps not triggered. We can set `transition: box-shadow 0.35s ease, background 0.35s ease, color 0.35s ease;` If there is hover elsewhere, changes apply. Fine.

Need maybe color property on .contact-channels-section article could override text color; it's okay visual. But if article contains headings with specific colors, base color cascades. Fine.

Need danger: `backdrop-filter: blur(14px)` might create new stacking context and affect layout? "visual only" okay. But if support absent, no layout. Fine.

Need maybe not include `color` on `.col-lg-7` because it might alter text legibility. But safe. Maybe "text-align: center" plus color and text shadow. If the original background from app hero could be dark? We should ensure text color visible. It might be in light section. Hmm. Since no context, adding dark text #252e3a may be wrong if hero background dark. But target style "sidebar-classic" has sidebar dark, main lighter. This section likely not sidebar. We could avoid text color on col-lg-7 and contact cards? Need make changes enough. We can still add subtle text-shadow. But target "Fresh palette" maybe should set text. However HTML fixed but unknown backgrounds. We can use CSS variables? Hmm.

Let's infer from class names: `.app-hero-section` likely app landing hero; `.badge.bg-warning` is warning badge; `.contact-channels-section` / `.contact-quick-section` contact cards. The original only contains responsive tweaks. We can't assume background. But adding dark card backgrounds to `.contact-card` may be okay if section has light background? The app likely has consistent design. Better to use a neutral warm light card background instead of dark? Target "sidebar-classic" palette says sidebar darker #252e3a, main lighter. The contact cards are probably main content, maybe should be lighter card with dark text and shadow, not dark cards. However target style in the instruction: "Sidebar darker (#252e3a), main lighter." This file doesn't have sidebar; perhaps use darker accent on badge and card hover? Hmm.

Need "original CSS" contains only responsive overrides. We are allowed to add visual properties to these selectors. For contact cards, if original section already has styles elsewhere, our file is a responsive override. The classes likely already have card styles. We shouldn't override background with a dark theme unless we know. But the user requested "Refresh this CSS visually" regardless. Since no context, a bold change is expected. Let's be more distinct.

Need maybe use CSS variables? But root variables not in fragment; adding variables would require new `:root` selector, not allowed? Could but not. Avoid.

Need maybe maintain "padding same"; yes.

Could use `filter: drop-shadow`? But box-shadow enough.

Need perhaps add "accent-color" or "caret-color"? no.

Need think about the "two-column structure" target? It doesn't appear in original; maybe target style description is irrelevant to this fragment. But perhaps the file fragment should represent sidebar? No.

Need output exactly CSS.

Let's re-read system prompt:
"You are expert CSS designer in CONSERVATIVE MODE. Refresh visual identity WITHOUT changing layout structure or class names. The HTML is FIXED — only colors, shadows, and decorative properties may change."

Then "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette."

Allowed:
- All color values...
- box-shadow fully redesign multi-layer
- text-shadow
- border-radius
- gradient colors/stops
- transition timing/easing/duration
- filter, backdrop-filter
- opacity
- outline styles
- border-color and border-style (NOT border-width)
- caret-color, accent-color
- CSS custom properties (--color-*, --shadow-*) values

Never change:
- display, position, grid etc
- width, height, padding, margin (keep similar ±20%)
- font properties...
- text