/* ============================================================
   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 rewritten CSS only. Need inspect file: one media query block. Need refresh visual identity without changing layout/selectors. Original CSS has no colors except font-size and padding with !important and CSS var? Need apply target style and effect variant, but output preserve selectors and layout. Need perhaps add color/shadows? We can only change visual properties that exist? We can add declarations? "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Since original has only text-align, font-size, padding. We may need enhance colors/shadows where possible without changing layout. But can add box-shadow etc? Need preserve layout. Likely we can alter padding? It says padding keep similar ±20%. Original padding var(--space-md) !important. We can include same var but maybe change custom property? There's no custom properties defined. Cannot change font-size. We need maybe add color etc. But HTML fixed; adding attributes in media query okay. Need output CSS preserving selectors. Could add background, color, box-shadow, border-radius, transition for those elements. Need target: sidebar-classic palette with glow effects. However original snippet is only media max-width 575.98 and targets hero section and contact cards. Need visual changes only. We can introduce color/glows. But need maybe no need to change base because only one snippet. Yet task expects rewrite entire CSS? It says file #block 2/2. We need output CSS only, with same selectors. Could include all original declarations and new visual ones. Need ensure no layout changes.

Let's parse original:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}

Need preserve all selectors. Could add to first rule `color` maybe; second rule add color/background? But `.badge.bg-warning` background may be warning. Should avoid changing font-size? Cannot change font-size. Could add box-shadow, border-radius. Third rule add background, box-shadow, border-radius, transition, maybe border. Need target style: sidebar darker? This is mobile, no sidebar. Use functional accent for actions. Maybe use accent color #10b981? Need choose palette. Could use `--accent: #00d4ff`? Need pick consistent.

Need perhaps output with CSS custom properties? But selectors unchanged. Could define on `:root`? Not allowed? Original no root. But could add? No selectors? Could add new selector? Should not. We can only rewrite within same selector blocks. Could add declarations in existing rules.

Need no markdown. Need output first char CSS.

Let's think: Original CSS has no customization. Our task is to apply visual identity. We can alter text-align? No, layout style property? text-align is typography? Under never change: text-align, vertical-align. So keep text-align center.

Can add `color: #e2e8f0; text-shadow` etc. But likely doesn't change layout.

Need perhaps adjust padding var? The custom property is "space-md"; not defined. We need keep similar. Could replace with calc? But preserving CSS var is okay. Maybe add `padding: 1.25rem !important;` within ±20%? But original uses var, unknown. Better keep.

Need maybe transform? Not layout.

Need satisfy effect variant "glow-effects": glow shadows accent color, halo on hover, medium radius, subtle pulsing animations. We can add @keyframes? But original has no keyframes. We could add `@keyframes` within media query? That's a new rule; selector not issue. But "ONLY rewritten CSS, preserving ALL selectors and layout" adding keyframes okay? Original didn't have. But output should be CSS. However they said no new selectors? Rule says selectors: keep exact. It doesn't forbid adding new at-rules? But likely not needed. We can add animations using existing `animation` property; we'd need define @keyframes; adding keyframes might be safe. But target says subtle pulsing animations. Need maybe `animation: cardPulse 2s ease-in-out infinite;` on cards. But could cause too much. We can include.

Need be careful: `.contact-channels-section article, .contact-quick-section .contact-card` selector list. We can add box-shadow, border-radius, background, border, transition, animation. But need "preserve selector list". yes.

Need decide exact colors. Target: sidebar-classic with darker sidebar and main lighter. But this media query is content, no sidebar. Use palette darker cards on light? Let's define accent `#00e5a0`? Hmm.

Let's implement:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f8fafc;
        text-shadow: 0 0 18px rgba(34, 211, 238, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #0f172a;
        background-color: #fbbf24; // Wait .bg-warning maybe sets background-color; overriding could change warning. Is that allowed? Yes colors. But original bg-warning class may be bootstrap; our property comes later? If we set background-color in same rule, could override with accent? If accent maybe not warning. But target style "functional accent for actions" maybe keep warning? Need maintain warning semantics. Could set background-color: #fcd34d; color: #0f172a; border-radius: 999px; box-shadow: 0 0 14px rgba(251,191,36,0.45); 
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(30,41,59,0.94), rgba(15,23,42,0.98));
        border: 1px solid rgba(148, 163, 184, 0.15);
        border-radius: 16px;
        box-shadow: 0 0 20px rgba(34, 211, 238, 0.25), 0 8px 24px rgba(2, 6, 23, 0.45);
        transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, transform 0.35s ease;
    }

    .contact-channels-section article:hover,
    .contact-quick-section .contact-card:hover {
        box-shadow: 0 0 36px rgba(34, 211, 238, 0.6), 0 12px 28px rgba(2, 6, 23, 0.55);
        border-color: rgba(34, 211, 238, 0.5);
    }
}

But we added hover selectors and keyframes? In media query, `.contact... :hover` allowed? They said pseudo-classes preserved, but we're adding new selector not originally there. "Selectors: Keep EXACTLY" maybe means don't modify existing selectors, adding new? They likely want rewriting same selectors; adding new selectors could be considered not preserving. We should avoid adding new selectors. We can include interactions via existing rules? Can't `:hover` without selector. Could use transition plus animation. Also no new selector blocks except within existing. No `@keyframes`? Could add `@keyframes` but maybe too. Better only existing selectors.

But target effect says "Halo on hover" requires hover selector. Maybe okay to add? The instruction "Selectors (CRITICAL - HTML is fixed): Class names: keep EXACTLY; IDs; element types; pseudo-classes; attribute selectors; combinators; selector lists" suggests we can use them, but not necessarily add. "Every selector character-for-character preserved?" self-check says "Same selectors" preserve? It says "preserving ALL selectors and layout exactly", "Every selector character-for-character preserved?" Could be interpreted as no additions. So avoid adding new selector blocks.

Need maybe add `:hover` rule? It would be a new rule, not matching original. We should not.

Can use `transition` and `animation` on existing rules, with keyframes added? Keyframes might be new but not selector. If we add @keyframes no selector; okay? But self-check "every selector" unaffected. But output "only rewritten CSS" with original selectors; adding keyframes likely accepted. But they explicitly mention @keyframes names can change? In forbidden section: "Animation & Media: @keyframes names (values inside CAN change)" meaning if original had keyframes, preserve names but change values. There were none. Adding keyframes maybe not necessary.

Need perhaps use `@media` needs preserve max-width. We can include.

Need decide if layout unchanged. We shouldn't change `text-align` or `font-size`. `padding` okay. Add `background`, `border`, `border-radius` won't affect layout except background can be behind. Adding `box-shadow` won't affect layout. Transitions don't affect layout. Animation no layout if transform? Could use opacity only? But "pulsing animations" maybe `animation: glowPulse 2.4s ease-in-out infinite;` with `@keyframes` changing box-shadow and opacity only, no layout. Need add @keyframes inside or outside media? Could place inside media query to avoid global. But it's a new at-rule. Should be okay. However user asked "No markdown fences, no explanations"; output can have @media and @keyframes.

Need maybe ensure CSS "first character = first CSS character". Output exactly.

Let's craft final CSS:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f1f5f9;
        text-shadow: 0 0 14px rgba(56, 189, 248, 0.4);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #0f172a;
        background-color: #fcd34d;
        border-radius: 999px;
        box-shadow: 0 0 16px rgba(251, 191, 36, 0.5), 0 0 32px rgba(251, 191, 36, 0.2);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.98));
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 16px;
        box-shadow: 0 0 24px rgba(56, 189, 248, 0.35), 0 10px 30px rgba(2, 6, 23, 0.4);
        transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, background-color 0.3s ease;
        animation: card-glow-pulse 2.6s ease-in-out infinite;
    }
}

@keyframes card-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 24px rgba(56, 189, 248, 0.35), 0 10px 30px rgba(2, 6, 23, 0.4);
    }
    50% {
        box-shadow: 0 0 36px rgba(56, 189, 248, 0.55), 0 10px 30px rgba(2, 6, 23, 0.4);
    }
}
```

Need "halo on hover" maybe not included. Since no hover selector. Could perhaps add `:hover`? Hmm.

Could use existing selector with `&:hover`? No preprocessor. Adding separate `@media (hover:hover)`? No.

Could add `animation` with pulse. Good.

But need consider background from `.bg-warning` in Bootstrap: if our CSS later? In same rule with `.badge.bg-warning`, same specificity as Bootstrap? We set background-color to `#fcd34d`, but `.bg-warning` has `background-color: #ffc107!important`? Bootstrap uses `!important`. Our declaration doesn't use `!important`, so Bootstrap's `!important` would override. Original `.badge.bg-warning` likely color? Could avoid because not necessary. But if we want visual change, need use `!important`? In original only font-size. Adding `background-color` without important may not override `.bg-warning` if it's `!important`. To be robust, should set background-color with `!important`? Is that a visual property allowed? Yes. But "padding: var(--space-md) !important" already. We can include `background-color: #fcd34d !important;` maybe. But if design wants glow, okay. But not change layout. Could also `box-shadow`. Need perhaps keep warning color `#ffc107` and use accent glow? But target "functional accent for actions" perhaps warning? Hmm.

Potential issue: We're outputting a media query only. The original file may contain more blocks; but "File: assets/css/saishi.css#块2/2" means this is block2/2, maybe user gave only this block, not full file. Our output should be just rewritten block? It says "Output the rewritten CSS now" and "ONLY the rewritten CSS". So yes.

Need maybe preserve use `var(--space-md)`? It mentions custom properties can change but no definitions. Could change `--space-md`? No.

Need consider "Only change colors, shadows, radius, transitions, gradients." We added `color`, `background-color`, `border`, `box-shadow`, `border-radius`, `transition`, `animation`, `text-shadow`, `background`. Good.

Need "border-style" can change, not border-width. We set `border: 1px solid` which is border-width. Is border-width allowed? They say border-color and border-style can change, NOT border-width. Original had no border. Adding border-width 1px might affect layout if box-sizing? It would add to size if not border-box. But likely global box-sizing. To be safe, avoid border-width? But we can use `outline` maybe. Or use `border-color` only would require an existing border. Could use `box-shadow` for border effect instead. Better not add border because border-width forbidden? We should never change border-width. "border-color and border-style (NOT border-width)" means add border-color/style without changing width? But original has no border; adding border-width can alter dimensions. So better avoid `border` or set `border: 1px solid`? Width 1 is not changing? Original had none; adding 1px could break margin. Conservatively, use `outline: 1px solid`? Outline doesn't affect layout, and outline-width? The forbid says outline styles (color, type) can change, not outline-width? Actually under allowed: `outline styles (color, type)`; outline-style and color, not width. Adding outline could be okay? But maybe no.

Better use `box-shadow: inset 0 0 0 1px rgba(...)` to simulate border without layout. This changes only shadow. Great. Use `box-shadow` layers including inner ring. For card, use `box-shadow: inset 0 0 0 1px rgba(148,163,184,0.18), 0 0 24px..., 0 10px 30px...` etc. This is a box-shadow, allowed. No actual border property. For badge, use inset ring.

Hover effect impossible without selector; could use transition only. Pulsing animation with box-shadow keyframes. Good.

Need maybe use `.contact...` existing selector includes two elements; we can add `background` and `box-shadow`. This changes cards to dark color. In mobile, contact cards likely on light background; adding dark may affect text? We cannot change text color? We can add `color: #f8fafc` maybe helps. If text is originally dark, adding color will override? Same specificity? Need perhaps `color: #f8fafc;` on card to ensure readability. This is color only. But if children have dark colors via their own classes, they may not inherit? Actually if child has color set, will remain dark. But we can't target children without new selectors. Could rely on original child colors maybe designed for light background. Changing to dark may make text dark on dark. Hmm. Since original rules don't set background, adding dark background to cards may cause contrast issues. But target sidebar-classic says sidebar darker, main lighter. Maybe we can add light background? Better to keep card background light? Effect variant glow effects could use accent shadows on light background. Need "main lighter". Let's set card `background: rgba(255,255,255,0.72)` and backdrop-filter? But mobile. Contact cards could be light. Add `background: linear-gradient(145deg, rgba(255,255,255,0.85), rgba(241,245,249,0.9));` and colored shadows. This preserves dark text readability. But target says "sidebar darker (#252e3a), main lighter" so main lighter. Good.

Could add `backdrop-filter: blur(10px)` but not necessary and unsupported.

Need "functional accent for actions": perhaps accent in shadow and badge. Use cyan/teal. The glow effects: accent color. let's pick `#0ea5e9` sky