/* ============================================================
   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 CSS. Need follow conservative mode. Need rewrite visual values from original CSS. Original CSS is small:

@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 refresh visually without changing layout structure/class names. But this CSS has no colors/shadows, only media query block with layout/text properties. Target style: sidebar-classic/effects gradient-rich. Need output rewritten CSS preserving selectors and layout exactly. But can we add visual properties within same selectors? We must not change layout properties (text-align, font-size, padding? Padding can keep similar ±20%, but original padding var(--space-md) !important. Need maybe change to some padding? But "HTML fixed—only colors, shadows, decorative properties may change". Padding is in "keep similar values, ±20% maximum"; font-size typography fixed. text-align fixed. The properties in original are not visual colors, but we're allowed to add decorative properties? The instruction says refresh visual identity, but selectors and layout unchanged. We can add color/background/shadow/gradient to these elements? Need be careful not changing layout. Maybe the original has no color palette, so we need introduce visual enhancements within same selectors, while preserving existing properties (text-align, font-size, padding var --space-md). We can add background gradients, border-radius, shadows, transitional effects, etc. But need not alter original property values? Since task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Original has none, so we can add those? Probably yes, but "only change" implies we shouldn't replace layout. Could add new declarations to existing rules. Need maintain media query.

Need maybe include `:root` variables? But HTML fixed, no new selectors? Could define custom properties? It says selectors keep exactly. Could add new :root selector? likely not. Better only modify existing selectors. But need provide complete CSS? "Output the rewritten CSS now" likely only this block. Add decorative properties within.

Need include color palette, gradients. Since target "sidebar-classic" with darker sidebar/main lighter and functional accent. But this CSS media query about hero, badge, contact cards. Could add colors to `.app-hero-section .row .col-lg-7`, badge, contact cards. But classes are generic (bootstrap). We can use background, etc. However `.app-hero-section .badge.bg-warning` is a Bootstrap warning badge; adding gradient backgrounds with warn colors, border, shadow.

Need think about "gradient-rich" effect: linear-gradient on most backgrounds, gradient borders via border-image, multiple stops, smooth long transitions 0.4-0.6s cubic-bezier. We can add transition on backgrounds/shadows/transform? Transform might be layout/visual? It's not listed as forbidden? "Only colors, shadows, radius, transitions, gradients." So can add transitions. Better not transform.

Need preserve padding: `padding: var(--space-md) !important;` in contact cards. Changing padding within ±20%? If var unknown maybe not know. Keep same. Add background, border, border-radius, shadow, transition.

Need preserve text-align center, font-size. Add `color`? Changing color may affect text visibility. Need choose colors. But `.app-hero-section .row .col-lg-7` text-align center—could apply color, maybe background? Hero section may have text; if we add background to col-lg-7, could affect layout? Background no layout. But might be odd to add background to column. Better minimal. We can add color to text? But hero text color may already be set elsewhere. Adding color here could override? That is "colors" allowed. Need choose a fresh dark text? But hero section likely light background. Without context, maybe add `color: #2d3436` or `background: linear-gradient(...)`. But background on text container might not be desired. Yet target "gradient-rich" maybe apply gradient text? We can use `background: linear-gradient(...); -webkit-background-clip: text; color: transparent;` but changes color and may need not support. That's a common visual enhancement. But then text-align remains. However if text contains block? Might be okay. But `.col-lg-7` is a column wrapper containing maybe h1, paragraph. Applying background to wrapper with background-clip text? It only clips to text inside element? Actually background-clip: text applies to element's background and text; the wrapper has text but also nested elements. If set `color: transparent`, all descendant text inherits transparent? Unless descendants set color. Could be risky. Better not apply to col.

Maybe add `color: #1f2a37` to col? That could conflict. Since original has no colors, adding a neutral text color maybe okay but not necessary.

Need perhaps use "fresh palette" and "gradient-rich" through shadows/backgrounds on contact cards. Let's formulate.

Original CSS:
@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 must maintain properties? Could add:
- `.app-hero-section .row .col-lg-7 { text-align: center; color: #243447; }`
- `.app-hero-section .badge.bg-warning { font-size: 0.85rem; background: linear-gradient(135deg, #ffd166, #ff9f1c); border: 1px solid rgba(255,159,28,.3); box-shadow: 0 4px 14px rgba(255,159,28,.25); border-radius: 999px; color: #4a2c00; transition: box-shadow .45s cubic-bezier(.22,.61,.36,1), background .45s cubic-bezier(.22,.61,.36,1); }`
But note background-color from `.bg-warning` may be overridden by our background. Fine.

- `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; background: linear-gradient(145deg, #f8fafc, #eef2f7); border: 1px solid rgba(148,163,184,.25); border-radius: 18px; box-shadow: 0 2px 8px rgba(30,41,59,.06), 0 12px 28px -8px rgba(30,41,59,.12), inset 0 1px 0 rgba(255,255,255,.8); transition: box-shadow .5s cubic-bezier(.22,.61,.36,1), border-color .5s cubic-bezier(.22,.61,.36,1), background .5s cubic-bezier(.22,.61,.36,1); }`
Need if padding var(--space-md) maybe keep exactly. Add maybe `border-radius` no layout.

Need maybe also add `background` to `.col`? But target style sidebar-classic? This is mobile layout, so no sidebar. The target style maybe irrelevant because min-width. But still need apply colors.

Need "gradient border via border-image" maybe one element. Could use `border-image: linear-gradient(...) 1;` on contact cards, but if we also set border-color? border-image overrides border-color. Need perhaps include `border: 1px solid transparent; border-image: linear-gradient(135deg, #e2e8f0, #94a3b8, #e2e8f0) 1;` But border-image with background? Could add to article. Need be careful: border-image doesn't follow border-radius. So if using border-radius, border-image gets clipped? Actually border-image is used in place of border-style; border-radius not applied to border-image. So can't combine nicely. Could use `border: 1px solid rgba(...)` for radius. Instead use gradient-rich with shadow gradients. We can use `background` gradients and box-shadow. That's enough.

Need maybe add `outline`? Not needed.

Need include transition. Since original no transition, adding transitions is allowed.

Need maintain "first char = first CSS character", no markdown. Need no extra comments.

Need ensure no forbidden properties: padding same, font-size same, text-align same. The added properties are allowed.

Need maybe not add `color` to col? Let's decide.

Need maybe use target palette:
- Sidebar darker #252e3a, main lighter. Functional accent #f59e0b/amber.
- Background dark gradient #252e3a to #1e2632 maybe.
- Main lighter #f8fafc / #eef2f7.

For hero section column maybe `color: #1e2632`? But since mobile text-align center, maybe a warm dark text:
```
color: #1f2937;
```
Would not necessarily change background. But no need. We can add `text-shadow`? Text shadow can affect readability. Maybe add to hero heading? But selector is col wrapper, not heading. Better no.

Maybe we can add `background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0))`? Could be okay. But might introduce a background layer on column, visually rich. Yet if parent has background, this could add subtle overlay. It's a visual change, allowed. But it may be considered layout? no.

We need think about "only colors, shadows, radius, transitions, gradients" — if original has no colors, adding color backgrounds is allowed. We should add something noticeable.

Let's inspect the CSS file "assets/css/saishi.css#块2/2" likely a segment, possibly includes only this media query. We should rewrite this snippet, not entire file. The request says "File: assets/css/saishi.css#块2/2", Mode conservative, Original CSS shown. So output should replace original media query with modified media query.

Need preserve selector list:
`.contact-channels-section article,
    .contact-quick-section .contact-card { ... }`
Need keep exact indentation? Not required, but should preserve selectors and structure. Use same media query.

Need maybe include `@media (max-width: 575.98px)` exactly.

Potential issue: "first character = first CSS character" means no leading newline? We'll output from `@media`.

Need no markdown fences. Let's craft.

Need ensure properties are within allowed set:
- color: yes
- background: yes
- background-clip: maybe yes? It's a decorative property. But if we don't use gradient text, no.
- border: border-color/style? We can use `border: 1px solid rgba(...)` includes border-width 1px? Border-width is forbidden? "border-color and border-style (NOT border-width)" means border-width must not change. Original has no border. If we introduce border-width 1px, does that "change border-width"? It adds a border where none existed. Could be considered layout? Border width affects layout (unless content-box). The instruction says "border-color and border-style (NOT border-width)" can change, but "border-width" not allowed to change. Original had no border, adding border-width 1px could alter layout? But border is inside width? With border-box? Unknown. To be safe, avoid setting border-width. Use `box-shadow` with `0 0 0 1px rgba(...)` instead, which doesn't affect layout. For gradient border via border-image, need border width; avoid.

- border-radius: yes, even if no border. Radius on background/shadow works.
- box-shadow: yes.
- transition: yes.
- text-shadow: yes.

Need maybe not add `background` with background-size? Could add. But background-color changes no layout.
Need not add `opacity` maybe allowed but can affect accessibility. Could avoid.

Maybe use a pseudo-element? Since selectors fixed, but can add `::before`? "Pseudo-classes (:hover, :focus, ::before, ::after)" says keep exactly. We can add new pseudo-elements? Hmm "Only change colors, shadows, radius, transitions, gradients" could include pseudo-elements? But adding `::before` could alter layout if content. Better avoid.

Need maybe add `box-shadow` inset highlights for gradient-rich.

Let's craft final:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #ffd166 0%, #f59e0b 55%, #ea580c 100%);
        color: #2b1a03;
        border-radius: 999px;
        box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35), 0 8px 18px -6px rgba(234, 88, 12, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45);
        transition: box-shadow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #f8fafc 0%, #eef2f6 60%, #e2e8f0 100%);
        border-radius: 18px;
        box-shadow: 0 1px 2px rgba(37, 46, 58, 0.06), 0 10px 24px -10px rgba(37, 46, 58, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85);
        transition: box-shadow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), border-radius 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
}
```

But note `.contact-channels-section article` may be `<article>` element with default margin? Adding border-radius works. Background on contact card may override theme card background. Fine.

Need maybe "gradient borders via border-image" not used. Could use `box-shadow: 0 0 0 1px rgba(...)` to simulate border. Should we add to be safe? Maybe yes: `box-shadow: 0 0 0 1px rgba(148,163,184,0.25), 0 1px 2px rgba(...), ...` This draws a border-like line without affecting layout. But border-radius on box-shadow not apply? Actually box-shadow follows border-radius. Good. Let's add `0 0 0 1px rgba(148, 163, 184, 0.2)` as first shadow. This simulates border. Use a slightly darker at edges. Great.

Need maybe add gradient border via `background` and `background-clip: padding-box`? Too complex. Shadow okay.

Need ensure `border-radius: 18px` allowed. Yes.

Need maybe add `transition` to badge for hover? Yes.

Need maybe add `color` for badge and maybe `font-weight`? Typography fixed: font-weight not allowed to change if original had none? "Typography (font system fixed): font-size, font-weight, font-style ... unchanged." If original didn't have font-weight, adding font-weight could change font system. Better not. We can add color.

Need maybe add `background` to `col-lg-7`? We only add color and text-shadow. Text-shadow is allowed. Good.

Need maybe `-webkit-text-fill-color`? Not needed.

Need perhaps "target style sidebar-classic" has "Sidebar darker (#252e3a), main lighter" - our color palette uses #1f2937 for text, #f8fafc background, #252e3a shadow. That's consistent.

Need maybe "Accent for actions" -> amber badge. Good.

Need maybe "smooth long transitions (0.4-0.6s cubic-bezier)" -> done.

Need maybe use `cubic-bezier(0.22, 0.61, 0.36, 1)` okay.

Need ensure no CSS comment. Done.

Potential issue: The original `.app-hero-section .row .col-lg-7` rule only text-align center. If we add `color:` and `text-shadow:`, okay. But if the column contains elements with their own text color, inherited maybe. Fine.

Potential issue: "Only change colors, shadows, radius, transitions, gradients" and "No AI marker comments" no issue.

Need output exactly. But let's think if we should preserve original formatting/indentation? We can use same indentation.

Need maybe include `@media (max-width: 575.98px) { ... }`.

Let's produce final with no preamble.

Need ensure "Only the rewritten CSS, preserving ALL selectors and layout exactly". Selectors exact? Our first selector `.app-hero-section