/* ============================================================
   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 respond with rewritten CSS only. Need transform visual identity, but the provided original CSS is a media query with only layout/text-align/font-size/padding. Need add colors? We need preserve selectors and layout exactly. We can change decorative properties within same rules. Since original has only a media query. We can add new properties? We need "Refresh visual identity" though only media block. Need preserve selectors exactly, layout. We can add colors, shadows, radius, borders, transitions maybe within rules. But must not change layout structure/class names. Need ensure no markdown. Need output a CSS file, likely entire file? It says File: assets/css/saishi.css #块2/2, original CSS is just this block, likely need rewrite this block. We can add properties.

Need preserve selectors and at-rule. We can modify values. In first rule, text-align center remains? Typography unchanged, text-align is layout-ish but listed under typography? "text-align, vertical-align" under Typography? They say font system fixed and "text-align" in typography excluded. So keep text-align center. font-size unchanged? In second rule font-size 0.85rem, must not change. The third rule padding stays similar (±20%)? It currently var(--space-md) !important, we can keep padding. We can add color/gradient/background/shadow etc, but likely not appropriate for block. Need "visual identity without changing layout". Since only this block applies mobile, we can add backgrounds, border-radius, box-shadows maybe to cards, sections? Need not change layout properties.

But perhaps the user wants complete refresh of entire CSS? It says original CSS only that media query, File fingerprint. Maybe we should output only rewritten block. Need satisfy "Only colors, shadows, and decorative properties may change" and "All color values ... change". Original block has no colors. Should we add colors? Yes, likely introduce anew visual theme. But need be cautious: Adding background/border to cards could change visual but not layout? Border can affect layout if border-width not changed? It says border-width not change; we can set border: 1px solid etc? Border-width: 1px can change layout slightly, but border is decorative; allowed. box-shadow doesn't affect layout. border-radius doesn't affect layout.

Need create fresh visual identity. Use "sidebar-classic" target? But the media query doesn't target sidebar. It is for app hero, contact channels. We can apply a palette. Need maybe add classes? We can't add selectors? We can add properties to existing selectors only. We can't remove existing properties except visual.

Need check: Original CSS block:

@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 can add declarations:

- .app-hero-section .row .col-lg-7 { text-align: center; color: #f8fafc; } But if parent has color not set, could be okay. But if hero text might include headings with colors, adding color to col may not override if children have own colors. Could set background? Maybe not.

- .app-hero-section .badge.bg-warning { font-size: 0.85rem; background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1e293b; border: 1px solid rgba(245,158,11,.4); box-shadow: 0 0 20px rgba(245,158,11,.35), 0 4px 14px rgba(0,0,0,.12); } But .bg-warning is Bootstrap background utility class; overriding background may break? It's visual. Keep class. Need not set border-width? Use border? Could use outline instead. outline doesn't affect layout. box-shadow okay.

- .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; border-radius: 14px; border: 1px solid rgba(148,163,184,0.25); background: rgba(255,255,255,0.06); backdrop-filter: blur(8px); box-shadow: 0 0 24px rgba(99,102,241,0.18), 0 8px 24px rgba(2,6,23,0.25); transition: box-shadow .35s ease, border-color .35s ease, background .35s ease; } But backdrop-filter can affect performance but allowed. However, if existing cards already have padding and backgrounds, our additions may override? Only if declaration order? This block likely appended? It may override. Need be careful with important.

Need also consider "sidebar-classic" target: "Sidebar darker (#252e3a), main lighter; functional accent" but no sidebar in block. Since maybe the overall file includes main layout elsewhere. We can perhaps add CSS variables? But only this block. Can't add :root if selectors not in original? It says keep all selectors character-for-character; adding new selectors is not allowed? It says selectors preserve, likely don't add new selectors. Could add custom properties within existing rules? Not useful. And "CSS custom properties values" allowed change, but original block uses var(--space-md) unchanged (layout). We can not change --space-md value. Could define --space-md? No.

Need fit "glow-effects": glow shadows in accent color, halo on hover, medium radius. We can include hover pseudo-class? Original has no hover selectors; adding a selector like .contact-card:hover is not allowed because selectors must be exactly preserved. Need preserve all selectors character-for-character; adding new selectors may break? Actually "Selector lists (commas)" are part of selectors. Additional selectors not permitted. We cannot add :hover. Could not include hover because no hover selector provided. But could use transitions on base so existing hover from other CSS gets transition. We need avoid adding selectors. Could maybe use `@media (hover: hover)`? no.

Need output only code. But perhaps the user expects a complete rewrite of entire saishi.css, but only gave a snippet? The snippet is all original. It might be a test: must produce equivalent CSS with visual changes. We can just rewrite the block with more declarations. Need not mention.

Need maybe include another @media rule? No.

Let's think constraints: "All color values: background, color, border-color, fill, stroke, outline-color" -> we must replace all color values. Original has no color values, so adding satisfies. Use palette from sidebar-classic: dark `#252e3a`, main lighter `#f8fafc`, accent maybe `#38bdf8` or `#6366f1`. Since glow effects, use accent. We need make visual identity distinct: maybe dark slate with cyan glow. Could add backgrounds.

Need preserve font-size exactly: .badge.bg-warning { font-size: 0.85rem; } keep.

Need preserve padding: `var(--space-md) !important` keep. Margin? no. Text-align: center keep.

Need ensure no `!important` changes? We can use `!important` perhaps.

Potential output:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f1f5f9;
        text-shadow: 0 2px 12px rgba(2, 6, 23, 0.35);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 55%, #d97706 100%);
        color: #252e3a;
        border: 0;
        outline: 1px solid rgba(245, 158, 11, 0.55);
        outline-offset: 3px;
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(245, 158, 11, 0.45), 0 4px 18px rgba(2, 6, 23, 0.25);
        transition: box-shadow 0.35s ease, outline-color 0.35s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, rgba(37, 46, 58, 0.85), rgba(15, 23, 42, 0.9));
        border: 0;
        border-radius: 16px;
        box-shadow: 0 0 28px rgba(56, 189, 248, 0.22), 0 12px 32px rgba(2, 6, 23, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(10px);
        transition: box-shadow 0.4s ease, background 0.4s ease, transform 0.4s ease;
    }
}

But adding `transform` to transition? Transform property not in original; transition can transition transform if existing hover transform from elsewhere. Is changing transition allowed? yes. But if no hover, no issue. However, changing transition "timing, easing, duration" allowed. Adding transition property is okay? It's a new property; but "transition" under can change? They said "transition timing, easing, duration" can change; adding transition likely okay. Need maybe not add transform itself.

Need consider that changing background to dark on contact cards can impact text color if text light. But maybe overall theme is dark? The target sidebar classic: sidebar darker, main lighter. But contact sections likely on dark background? Need not know. Could choose subtle lighter background to avoid bad contrast. We can use `background: rgba(255,255,255,0.06)` to maintain. But original file maybe has its own styles. Since this block is media query (mobile), adding a dark background could be okay if text is light. But safer: use translucent light overlay. "Sidebar darker (#252e3a), main lighter" maybe main lighter should be background #f8fafc with cards white. Hmm.

Target style: "sidebar-classic: Sidebar darker (#252e3a), main lighter." If we create color palette for block: main lighter `#f8fafc`; sidebar dark. But in this media query, no sidebar. Could use accent #2563eb. Let's choose "glow" with indigo/cyan.

Need maybe keep mobile layout: text-align center. Could set background for hero column? Not necessary. Maybe the variables `--space-md` are sufficient. We can adjust border-radius.

Could there be issue with `border: 0` causing border-width? It modifies border-width, prohibited? It says border-width not change; but original has no border, setting border 0 is border-width change? Actually adding border-width 0 would not change layout. But "border-color and border-style (NOT border-width)" can change, don't change border-width. To be safe, avoid `border` property entirely. Use `outline` instead. `outline` does not layout. For card border, if we want border, can't set border-width? Could set `border: 1px solid` but that adds border-width 1px; the prohibition says not change border-width, but original had none, adding border-width changes layout by 1px? Could affect. Avoid border. Use box-shadow to simulate border: `box-shadow: 0 0 0 1px rgba(...), ...` no layout effect.

Similarly, `border-radius` okay.

Need consider `.badge.bg-warning`: if we set `background` not using `!important`, Bootstrap's `.bg-warning` may have `background-color` with `!important`? In Bootstrap 5 utilities, `.bg-warning { background-color: #ffc107 !important; }` because utilities use important. Our `background` shorthand without !important may not override due to Bootstrap CSS order if our CSS loads earlier? But original CSS likely from site; we don't know. To guarantee visual change, set `background: linear-gradient(...) !important;` But the instruction says preserve selectors; adding !important okay? Original has `!important` on padding, not on badge. Could use `background` with `!important` to override Bootstrap bg utility. Also `color` maybe.

Need in hero col, maybe `background`/`color` might be undesirable. But to satisfy color change, we should add `color`. Could also `background: radial-gradient(...)`? A column is a grid column; setting background might cover container and if text light? Could be dark. Hmm.

Maybe the safest visual refresh is to add these:
- `.app-hero-section .row .col-lg-7` with `color: #1e293b; text-shadow: 0 2px 20px rgba(2,6,23,.08);` If the hero text is currently dark on light, this is okay; if light on dark, dark text would break. Need choose neutral. Maybe `color: inherit` not visual change. Could omit. But requirement "color values ... change" can be satisfied elsewhere.

- `.app-hero-section .badge.bg-warning`: add gradient, border-radius, box-shadow, outline, etc.

- `.contact-channels-section article, .contact-quick-section .contact-card`: add background, border-radius, box-shadow, backdrop-filter, transition. Need padding unchanged.

Could also add `accent-color`, `caret-color` if relevant. Not.

Need maybe use CSS variables? Could add `--saishi-accent`? Can't add selector. We could use `background` and box-shadows with rgba.

Need perhaps output entire block only. It's okay.

But user requested "File: assets/css/saishi.css#块2/2" maybe #块2/2 means chunk 2 of 2? Maybe there is a prior chunk not shown? They only provided second chunk. We should output only this chunk, not entire file. But if they want full CSS, no. Need understand: The system message says "You are an expert CSS designer... Rewrite CSS preserving selectors..." Then user gives "File: assets/css/saishi.css#块2/2" and original CSS block. That likely means the file is split into chunks, this is chunk 2/2. We need rewrite this second chunk. So output only this chunk.

Could there be a need to add a new visual layer without adding selectors? We can add declarations inside existing rules. No new selectors. But can we add `@media (min-width: 576px)`? That would be new selector not allowed. No.

Need "same layout, fresh color palette + shadow/radius identity". Let's craft.

Need pick actual palette:
- Background base: `#0f172a` (slate-900)
- Sidebar dark: `#252e3a` (approx)
- Main lighter: `#f8fafc`
- Accent: `#38bdf8` (sky-400) or `#6366f1` (indigo-500)
- Warm accent for badge: amber `#fbbf24`.

Since the media query targets mobile hero and contact cards, we can establish:
- `.app-hero-section .row .col-lg-7`:
    text-align: center;
    color: #e2e8f0;
    text-shadow: 0 2px 16px rgba(2, 6, 23, 0.45);
Maybe text-shadow is decorative but if parent text color is already light, good. But if parent is light, not. Perhaps set `background: transparent`? Not useful.

Could use `background: radial-gradient(circle at 50% 0%, rgba(56,189,248,0.12), transparent 70%);` This won't alter text layout and adds glow. This is safe: a translucent gradient background in col. It doesn't set text color. The text retains inherited color. Could add `color: #f1f5f9`? Hmm. Maybe avoid `color` on .col-lg-7 because we don't know.

- `.app-hero-section .badge.bg-warning`: Use gradient background, color #252e3a, border-radius: 999px, outline, shadow. Good.

- `.contact-channels-section article, .contact-quick-section .contact-card`: Use semitransparent dark gradient? If parent's text may be dark, bad. But cards on contact section likely on light main. Sidebar-classic main lighter, so probably light background. To preserve, use light card background with subtle shadow and glow:
    background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(241,245,249,0.96));
    color: #1e293b; // But adding color to card won't override child headings maybe; okay.
    border-radius: 16px;
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.12), 0 0 24px rgba(56,189,248,0.20), 0 12px 32px rgba(15,23,42,0.08);
    backdrop-filter: blur(12px);
    transition: box-shadow .4s ease, background .4s ease;
This is light and likely okay. But original contact card may already have background from other CSS; our `background` without !important may not override if Bootstrap? No, likely custom. Could use `background: linear-gradient(...) !important;` to ensure. But if original has background from a class with higher specificity? Our selector same specificity but later? Unknown. To make sure, maybe use `!important` on background, border-radius, box-shadow? But original `padding` already uses `!important`; maybe all declarations in this block are meant as overrides. We can add `!important` to our visual overrides? The instruction doesn