/* ============================================================
   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 rewrite visual identity preserving selectors/layout exactly. Need inspect CSS. Original tiny. We need refresh colors/shadows etc but only these rules. Need maybe there are no colors/shadows. But must output rewritten CSS perhaps add subtle shadows? Need preserve selectors and layout properties exactly? Need not add new selectors? We can change values of color-related properties, but no existing color. Perhaps can add box-shadow etc? But layout unchanged, adding might be fine? Need same style target masonry flow airy rhythm maybe this media query block only. Need output rewritten CSS with same selectors and properties? Need perhaps add shadow/radius to cards? But original has no visual declarations except text-align/font-size/padding. Conservative mode: only visual properties may change, but can we add new visual properties? Likely yes? Need refresh identity. We can change padding within ±20%? Original padding var(--space-md) !important in contact card; can change maybe same? But should not change layout much. visual identity: could add border-radius, box-shadow, background, color? But maybe better not alter since no selectors? We can add visual properties to existing selectors. Must preserve every selector character-for-character. We can add declarations but not change class names. Need maybe use CSS custom properties? Hmm.

Need output CSS only. Need maybe include original @media and selectors. We can adjust text-align? No, that's layout/typography? text-align is typography? It says text-align cannot change? Actually in "typography" list has text-transform, white-space; no text-align? In layout invalid list includes "text-align, vertical-align" under never change? Yes "text-align, vertical-align" in layout section. So don't change text-align center.

font-size keep. padding can vary ±20%. var(--space-md) maybe cannot change? Could set padding: calc(var(--space-md) * 0.9) !important? But that changes var; maybe safe? It says padding/margin similar ±20%. We can perhaps set padding: calc(var(--space-md) + 0px) no. Need maybe just leave as is.

Need generate fresh palette, shadows, radius. But original media only three rules. We can add color/background etc to first? .app-hero-section .row .col-lg-7 maybe no need. Could add new declarations to these selectors: color, border-radius, box-shadow, transition? But maybe unnecessary and perhaps inappropriate. But requirement says "Refresh visual identity". Need do something.

Let's read original CSS carefully. It is a media query for max-width 575.98px. It only sets text-align and font-size and padding. There are no colors/shadows/radius. To satisfy output, we can add visual properties to the same selectors, but need be mindful effects. Perhaps add accent background? But cards inside hero maybe? Let's inspect likely structure from class names. There is an "app-hero-section" with a row col-lg-7. On mobile, text-align center. Could add color? The badge warning font-size. Could add box-shadow? not needed.

"contact-channels-section article, .contact-quick-section .contact-card" are cards. We can add a card visual treatment: background: rgba(255,255,255,0.8); border-radius, box-shadow, backdrop-filter maybe, border. But if original cards already have backgrounds from other CSS, adding background in media query could override at mobile, perhaps layout? But okay? We must not change padding? Could change padding to calc(var(--space-md))? Hmm.

Need "Pinterest-like: white cards, soft shadows on light gray bg; accent strip." Could add background white and box-shadow/multi-layer. But original card likely has padding var(--space-md) !important. We can add border-radius: 24px; box-shadow. Adding background: #fff changes identity. Also apply accent strip via ::before? But cannot add selector ::before? Pseudo-classes allowed? It says pseudo-classes preserve, but can add ::before? "Every selector character-for-character preserved?" If add new selector that wasn't there, not preserve. Better not. Could use border-top or background linear-gradient? But not layout? Could add background: linear-gradient(135deg, #fff 0%, #faf7f2 100%);? This is visual. But "white cards" maybe use background #fff.

Need careful because CSS in mobile media query may override existing desktop with high specificity. Adding background and shadow to .contact-channels-section article and .contact-quick-section .contact-card on mobile could be acceptable. But "HTML fixed, visual changes only". We can.

Need maybe use CSS custom properties? Not needed.

Need output only CSS. But we need "no markdown fences". We'll generate.

However, need consider original has `.contact-channels-section article, .contact-quick-section .contact-card` with padding var(--space-md). If we add box-shadow etc, padding unchanged. Need maybe border-radius: 24px; but existing card may have rounded corners already, overriding with 24px okay. Also maybe first hero section text color: could add color: #2b2f36? But if parent already has color maybe fine. Maybe set `color: #3d3a36`; but hero text could be light? No.

Need maybe adjust `font-size` of badge from 0.85rem to 0.85rem? We can leave because font-size fixed. Could maybe change `font-size`? It is prohibited to change font-size. So leave.

Need maybe change text-align? No. Need maybe change padding? We can leave. But maybe to fit "generous spacing" and airy rhythm, increase mobile padding? But max-width 575.98, "generous spacing" with 32-56 px, gap 32-48. Original card padding var(--space-md) likely maybe 24px. Could increase to `var(--space-lg)`? But if `--space-lg` not defined? Existing CSS file likely defines custom properties. We can use `var(--space-lg)` but we don't know. Better not. We can set padding: calc(var(--space-md) * 1.15) !important; 15% within ±20. But layout shift? Allowed. But changing padding maybe not necessary. Need avoid if custom property multiplication unsupported? Modern okay. Or `padding: clamp(1.25rem, 4vw, 2rem) !important;` But that's layout? It is padding, allowed within ±20%? Need similar to var(--space-md). Hmm.

Need maybe more robust: preserve padding exactly because mobile constrained. Visual changes only.

Need ensure all selectors and layout exact. We can add declarations after existing ones.

Potential output:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f6c453, #f4a259);
        box-shadow: 0 6px 16px -8px rgba(244, 162, 89, 0.5);
        border-radius: 999px;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: rgba(255,255,255,0.86);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255,255,255,0.65);
        border-radius: 24px;
        box-shadow:
            0 2px 6px rgba(67, 58, 48, 0.04),
            0 18px 40px -20px rgba(67, 58, 48, 0.16),
            0 32px 80px -32px rgba(67, 58, 48, 0.12);
        transition: box-shadow 240ms cubic-bezier(0.22, 1, 0.36, 1), transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
    }
}

But need preserve "no layout structure or class names" and "only colors, shadows, decorative properties may change." Adding `backdrop-filter` okay. `transition` okay. But maybe transform not a property? We only transition transform but don't set transform. That's fine.

Need maybe not add `color` to hero section if could affect other elements? On mobile, all text in that col center. Could add `--space`? No.

Need maybe target style masonry-flow: this media block has contact cards with "card own accent strip." We can use `border-top: 4px solid #f4a259` perhaps, but border-width can't change? The NEVER CHANGE list says "border-color and border-style (NOT border-width)" so border-width cannot change? It doesn't explicitly say border-width cannot change? It says "border-color and border-style (NOT border-width)" likely means you can change border-color/style only, not width. So avoid changing border-width. But adding border-width? maybe not. Instead use box-shadow inset top accent line. E.g., box-shadow: inset 0 4px 0 #f4a259, ... That would be visual and not border-width. But adding inset top line may look too aggressive? Could do. But if each card own accent strip, use `box-shadow: inset 0 4px 0 #e67e5a, 0 ...`. However inset shadow with top offset 4px should appear; border-radius clips? yes. This changes visual identity but not layout. Need maybe accent color on contact cards. Yet if cards already have shadow, maybe multi-layer.

Need maybe Pinterest-like: white cards on light gray bg. The body background not in scope. Could apply `background-color: #f8f6f3` to hero? But body? Not in selectors. Could add to card itself.

Maybe output:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f9d976 0%, #f39f86 100%);
        box-shadow: 0 8px 20px -8px rgba(243, 159, 134, 0.5);
        border-radius: 999px;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #fff;
        border-radius: 24px;
        box-shadow:
            inset 0 4px 0 rgba(244, 162, 97, 0.85),
            0 2px 4px rgba(35, 31, 29, 0.03),
            0 16px 36px -20px rgba(35, 31, 29, 0.14),
            0 32px 80px -40px rgba(35, 31, 29, 0.12);
        transition: box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1), background 280ms ease;
    }
}

Need maybe "backdrop-filter" maybe blur 12. But if background #fff, backdrop no need. Could remove.

Need "soft pillowy shadows" yes.

Need maybe "border": 1px solid rgba(255, 255, 255, 0.7) to blend. But can change border-style? no, but adding border? Since none previously, okay? Could use border: 1px solid rgba(255,255,255,0.6). But border width not changed? Hmm. Better avoid border because fixed border width maybe not. Use outline? Not.

Need consider `!important` on existing padding and maybe we add background without `!important`; if background is from base with higher specificity? But scratch. Need maybe within media query, these selectors have same specificity and later order. Since original CSS probably includes base definitions outside; our media query at end? Not know. If base `.contact-card { background: ... }` maybe. To override, add !important? Shouldn't need if same specificity? Actually `.contact-channels-section article` specificity 0,1,1? class + type. `.contact-quick-section .contact-card` specificity 0,2,0. Combined selector list. If base `.contact-card` specificity 0,1,0, our is higher. Good. Could add !important to visual properties? Not necessary but maybe to guarantee. But "background: #fff !important" could override. Should we? Since padding already !important. Perhaps add !important to all new visual props? Might be visually strong. But "no AI markers" okay. Need maybe not use `!important` because it can override user? But CSS already uses important. Conservative mode can use. Maybe okay.

Need maybe use color palette with warm neutrals: #fdfbf7, #f5e9d7, #d9a066, #e07a5f, #3d405b. Need "Pinterest-like" -> white cards, soft shadows on light gray bg. Use `background: #fffdf8;` and `box-shadow` warm gray.

Need maybe all selectors preserved exactly. If output includes `@media` and selectors. Good.

But is there requirement "File: assets/css/saishi.css#块2/2" maybe code block? Need maybe include only CSS. Good.

However, maybe they expect "Output the rewritten CSS" including entire CSS? We have original media block only. Need rewrite it. We can maybe restructure? Need preserve all selectors. Let's think of alternatives.

Because original has only a media query, no colors. If we add visual properties, we are technically adding new declarations. That's allowed? It says "Change all color values ...", "Add shadows, radius" etc. There are no values to change. It would be odd to add none. So adding is correct.

Need maybe apply target style "masonry-flow" "Pinterest-like: white cards, soft shadows on light gray bg, each card may have own accent strip". Could set `.app-hero-section .badge.bg-warning` background "accent gradient" and cards have accent strip. Good.

Need maybe "airy-rhythm" "large border-radius 16-28px, soft pillowy shadows, breathing room everywhere." In media query at max-width 575, cards use padding var(--space-md); maybe not generous. Could change to `padding: calc(var(--space-md) + 0.5rem) !important;` But maybe violates layout? It changes padding, allowed ±20%. If var(--space-md) is likely 1rem or 1.25rem. Adding 0.5rem might exceed. Could use `padding: max(var(--space-md), 1.25rem) !important;`? We don't know base. Better to leave.

Need perhaps include `border-radius: 24px` on card, `border-radius: 999px` on badge, `box-shadow` with multiple layers, `background: linear-gradient`.

Need maybe add `transition` but not required. No keyframes.

Need maybe use `-webkit-backdrop-filter`? Can include for compatibility. But not necessary? Could include both.

Need maybe avoid adding `color` to hero if it's not within "colors"? It's allowed.

Potential issue: `text-shadow` could affect readability but okay.

Need maybe "outline" no.

Need maybe `caret-color` no.

Let's craft final CSS:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #f7d38c 0%, #f0a36b 100%);
        box-shadow: 0 10px 24px -12px rgba(240, 163, 107, 0.6);
        border-radius: 999px;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #fffdf9;
        border-radius: 24px;
        box-shadow:
            inset 0 4px 0 #f0a36b,
            0 2px 4px rgba(62, 53, 43, 0.04),
            0 18px 40px -22px rgba(62, 53, 43, 0.18),
            0 40px 90px -40px rgba(62, 53, 43, 0.14);
        transition: box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1), background 260ms ease;
    }
}
```

Need maybe "each card may have own accent strip": inset 0 4px 0 #f0a36b. But all same accent strip. That's okay "may".

But "background: #fffdf9" makes card white. "soft shadows on light gray bg" not body. okay.

Need maybe add `backdrop-filter: blur(10px)`? It could create "airy" but with solid background no. If background is semi-transparent, blur. Maybe use `background: rgba(255,255,255,0.8); backdrop-filter: blur(14px);` More airy. But if card is over image, nice. For accessibility, okay. "white card" perhaps `rgba(255,255,255,0.85)`. Could include.

Potential problem: The selector list `.contact-channels-section article,