/* ============================================================
   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;
    }
}

让我们逐步思考如何根据要求重写这个CSS。

1.  **分析输入:**
    *   **文件:** `assets/css/saishi.css` (块 2/2)
    *   **模式:** 🛡️ 保守模式 (HTML 固定，仅视觉变化)
    *   **请求 ID:** #4ff41d2d
    *   **原始 CSS:** 包含在 `@media (max-width: 575.98px)` 查询中的三条规则。
        *   规则 1: `.app-hero-section .row .col-lg-7` -> `text-align: center;`
        *   规则 2: `.app-hero-section .badge.bg-warning` -> `font-size: 0.85rem;`
        *   规则 3: `.contact-channels-section article, .contact-quick-section .contact-card` -> `padding: var(--space-md) !important;`
    *   **目标视觉风格:** `card-mosaic` (网格，不同跨度，中等间隙，不同强调色) + `glow-effects` (发光阴影，悬停光晕，中等圆角，微妙脉动动画)。
    *   **约束条件 (自查清单):**
        *   选择器必须完全一致。
        *   布局属性 (display, position, grid, flex, width, height, padding, margin, font-size 等) 必须保持不变。
        *   仅颜色、阴影、圆角、过渡、渐变、滤镜、不透明度可以更改。

2.  **评估原始 CSS 中哪些可以更改:**
    *   `text-align: center;` -> **不能更改** (布局属性)。
    *   `font-size: 0.85rem;` -> **不能更改** (排版/字体系统)。
    *   `padding: var(--space-md) !important;` -> **不能更改** (布局/间距 - 即使通过 CSS 变量也只能在允许的 ±20% 范围内更改，但原始使用了 `!important`，而且改动可能会破坏依赖于特定间距的布局。最好保持间距不变。等等，它说 "padding, margin (keep similar values, ±20% maximum)"。由于它使用了变量 `var(--space-md)`，我无法控制这个值，除非我也重写这个变量。但变量可能会影响其他部分。规则是 "CSS custom properties (--color-*, --shadow-*) values" 可以更改。`--space-md` 不在可更改列表中。所以我不能碰它，或者必须保持完全相同。)
    *   等等，是否有任何颜色、阴影或圆角可以更改？
        *   规则 1 和 2 没有颜色、阴影或圆角。
        *   规则 3 也没有颜色、阴影或圆角。
    *   这看起来像是响应式设计的片段。为了应用 "card-mosaic" 和 "glow-effects" 主题，我需要添加*新的* CSS 规则吗？不，指令说 "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."
    *   等等，我可以添加 CSS 变量或者向现有选择器添加新的声明吗？指令说 "Only change colors, shadows, radius, transitions, gradients." 和 "You MUST CHANGE (visual identity only)". 这意味着我应该只修改*现有*声明中的值，或者可能向这些特定选择器添加新的视觉属性，前提是不改变布局。
    *   *自我修正:* 原始 CSS 在这个特定的媒体查询块中并没有任何颜色、阴影或圆角的声明。它只有 `text-align`、`font-size` 和 `padding`。根据规则，这些都不能改变。
    *   如果此块中没有颜色/阴影可以更改，我该如何应用 "card-mosaic" 和 "glow-effects" 主题？
    *   也许目标视觉风格是提示“添加”这些效果。但是严格的约束条件说 "keep ALL selectors and layout exactly as-is"。向现有选择器添加新的声明（如 `box-shadow`）会改变视觉风格，但如果没有指定 `box-shadow`，添加一个是否算作“更改”？指令说 "You MUST CHANGE (visual identity only)" 和 "NEVER CHANGE (would break HTML layout)"。添加阴影不会破坏布局。
    *   让我们仔细阅读 "🎨 TARGET STYLE" 和 "✨ EFFECT VARIANT"。
    *   "Layout pattern... Grid with mixed spans..." - 布局模式是针对*整个*应用程序的，但给出的 CSS 块并没有定义网格。它只是响应式调整。我无法添加 grid-column 或 grid-row，因为这些是布局属性，会改变 HTML 的结构要求。
    *   "Color palette... Vibrant card colors..." - 原始选择器是 `.app-hero-section .badge.bg-warning`。`bg-warning` 是一个 Bootstrap 类。我可以添加 `background-color` 或 `color` 吗？指令说 "border-color and border-style (NOT border-width)"，所以背景颜色可能可以更改。
    *   让我们安全行事。由于原始 CSS *只*包含布局/排版声明，而约束条件禁止更改这些，我是否应该只输出完全相同的 CSS？
    *   不，指令说 "Refresh this CSS visually"。如果没有什么可以重写，我应该添加符合目标的视觉属性（颜色、阴影、圆角）。
    *   *策略:* 在不更改现有声明的情况下，向这些选择器添加新的视觉声明（颜色、阴影、过渡、圆角）。
        *   `.app-hero-section .badge.bg-warning` -> 添加 `box-shadow: 0 0 24px rgba(255, 193, 7, 0.4);` (发光警告色) 和 `border-radius: 8px;`，以及 `transition: box-shadow 0.3s ease;`.
        *   `.contact-channels-section article, .contact-quick-section .contact-card` -> 添加 `box-shadow`、`transition`、`border-radius`。
        *   `.app-hero-section .row .col-lg-7` -> 添加 `text-shadow`？
    *   让我们完善超发光的 "card-mosaic" 视觉风格。
    *   等等，指令说 "Only change colors, shadows, radius, transitions, gradients." 如果我想应用一个主题，我应该无缝地重写它。
    *   让我们检查一下自查清单。 "✓ Every selector character-for-character preserved?" 是的。 "✓ display, position, grid-template-*, flex-direction unchanged?" 是的。 "✓ colors throughout the file replaced with fresh palette?" 此块中没有颜色。 "✓ Shadows redesigned (different offsets, colors)?" 我将添加阴影。 "✓ Border-radius adjusted for new visual style?" 我将添加圆角。 "✓ No AI marker comments?" 是的。

3.  **起草新的 CSS:**
    *   *原始规则 1:* `.app-hero-section .row .col-lg-7 { text-align: center; }`
        *   目标: 添加过渡和文本阴影以实现发光效果。
        *   *新规则:* `text-align: center; transition: text-shadow 0.3s ease;`
        *   等等，悬停状态在哪里？如果要实现脉动发光，可以使用动画。让我们添加一个微妙的脉动文本阴影。
        *   `animation: heroGlow 2s ease-in-out infinite;`
        *   等等，`@keyframes` 名称是可以更改的，但如果不存在，我需要创建它。创建 `@keyframes` 会不会破坏“不更改”的原则？原则说 "@keyframes names (values inside CAN change)"。这意味着如果存在 keyframes，我可以更改值。但如果不存在，添加新的 keyframes 和动画是否安全？是的，这完全是视觉上的。
    *   *原始规则 2:* `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }`
        *   目标: 添加发光阴影和圆角。也许是一个脉动光晕。
        *   *新规则:* `font-size: 0.85rem; box-shadow: 0 0 24px rgba(255, 193, 7, 0.4); border-radius: 8px; transition: box-shadow 0.3s ease, transform 0.3s ease;`
        *   等等，`transform` 是一个布局属性，有破坏布局的风险吗？是的，最好不要碰 transform。
    *   *原始规则 3:* `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }`
        *   目标: 添加卡片样式的阴影、圆角、背景颜色（如果适用）。等等，背景颜色可能会改变卡片的外观，但如果它是透明的呢？透明是安全的。
        *   *新规则:* `padding: var(--space-md) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); border-radius: 12px; transition: box-shadow 0.3s ease; background-color: rgba(255, 255, 255, 0.05);`
        *   等等，对于 "card-mosaic" 主题，每种卡片类型应该有不同的强调色。我无法根据 HTML 定位具体的文章，除非使用 `:nth-child`，但这将添加一个新的选择器，原则禁止这样做（原则说 "Pseudo-classes (:hover, :focus, ::before, ::after)" 但为了安全，我不会添加新的复合选择器，只是添加新的声明）。
        *   让我们完善一下 "glow-effects" 视觉风格。我将添加 `box-shadow: 0 0 24px rgba(accent, 0.4)` 变体。由于我无法更改 HTML，我假设 `.contact-channels-section article` 是卡片。

    让我们仔细检查目标风格的确切要求：
    "Layout pattern (Aggressive only): Grid with mixed spans... Vary card sizes..."
    "Color palette: Vibrant card colors on neutral background, Each card type a different accent"
    "Effect variant: glow-effects: Glow shadows in accent color, Halo on hover, Medium radius, Subtle pulsing animations"

    由于这是一个保守模式的重写，我只能更改值。但是，我可以通过 CSS 变量注入这些主题颜色，或者向现有选择器添加新的视觉声明。
    *让我们向现有选择器添加新的视觉声明：*
    1. `.app-hero-section .row .col-lg-7 { text-align: center; /* + text-shadow + transition */ }`
    2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; /* + box-shadow + border-radius + transition */ }`
    3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; /* + box-shadow + border-radius + transition + background */ }`

    *但是等等*，提示说 "Layout pattern (Aggressive only): ... Grid with mixed spans". 这个模式是为了实现砖石/瀑布流布局。这些选择器是针对 hero 部分的，而不是卡片网格。如果我将网格属性添加到这些选择器，就会破坏布局。
    让我们提供一些能增强视觉效果的 CSS，而不触及布局。

    *重写草案：*
    ```css
    @media (max-width: 575.98px) {
        .app-hero-section .row .col-lg-7 {
            text-align: center;
            text-shadow: 0 0 24px rgba(0, 123, 255, 0.3);
            transition: text-shadow 0.3s ease;
        }

        .app-hero-section .badge.bg-warning {
            font-size: 0.85rem;
            box-shadow: 0 0 24px rgba(255, 193, 7, 0.4);
            border-radius: 8px;
            transition: box-shadow 0.3s ease;
        }

        .contact-channels-section article,
        .contact-quick-section .contact-card {
            padding: var(--space-md) !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 24px rgba(108, 99, 255, 0.2);
            border-radius: 16px;
            transition: box-shadow 0.3s ease, transform 0.3s ease;
            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
        }
    }
    ```

    等等，`@keyframes` 不存在。提示说 "Subtle pulsing animations"。我可以添加一个。
    但是，添加 `@keyframes` 需要定义动画。这是视觉上的改变，但我是被允许更改 "animation-name (values like duration/timing CAN change)" 的。等等，如果动画名称不存在，我可以添加它吗？是的，我可以，但 "NEVER CHANGE" 下的 "animation-name" 特别指出 "values like duration/timing CAN change"。这意味着如果它存在，我可以更改它的值。添加一个新的 keyframe 会不会带来难以预料的后果？不会。
    让我们为发光效果创建一个微妙的脉动动画。
    ```css
    @keyframes pulseGlow {
        0%, 100% { box-shadow: 0 0 24px rgba(108, 99, 255, 0.2); }
        50% { box-shadow: 0 0 48px rgba(108, 99, 255, 0.4); }
    }
    @keyframes heroTextGlow {
        0%, 100% { text-shadow: 0 0 24px rgba(0, 123, 255, 0.3); }
        50% { text-shadow: 0 0 48px rgba(0, 123, 255, 0.6); }
    }
    ```
    将 `animation: pulseGlow 2s ease-in-out infinite;` 添加到卡片，将 `animation: heroTextGlow 2s ease-in-out infinite;` 添加到 hero 文本。
    *等等*，如果用户停留，悬停动画可能会冲突。最好还是使用 transition，或者让它脉动。提示说 "Halo on hover: 0 0 32px rgba(accent, 0.6)"。
    让我们使用 transition，这样悬停时光晕会增强。
    ```css
    .contact-channels-section article:hover,
    .contact-quick-section .contact-card:hover {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 48px rgba(108, 99, 255, 0.6);
    }
    .app-hero-section .badge.bg-warning:hover {
        box-shadow: 0 0 48px rgba(255, 193, 7, 0.6);
    }
    ```
    这个修改非常完美。它添加了 "glow-effects" 主题，而没有改变布局。

    让我们完善一下颜色。目标风格是 "card-mosaic: Vibrant card colors on neutral background, Each card type a different accent".
    由于这是保守模式，我不能添加像 `article:nth-child(1)` 这样的选择器，因为我不能更改选择器本身（它说 "Class names: keep EXACTLY (.post-card stays .post-card)" 和 "Selector lists (commas)"）。等等，原始选择器是 `.contact-channels-section article, .contact-quick-section .contact-card`。我不能更改这些选择器。我*可以*向这些选择器添加新的声明。
    我无法根据它们是第几个文章来定位不同的强调色，除非使用 CSS 变量（例如，在 HTML 中内联设置，但 HTML 是固定的）。
    所以，我必须为所有的 `.contact-channels-section article` 和 `.contact-quick-section .contact-card` 使用一个通用的强调色，或者使用一个通用的渐变。
    让我们使用一个通用的渐变背景和发光效果。
    ```css
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.1), rgba(255, 107, 107, 0.1));
    border: 1px solid rgba(108, 99, 255, 0.2);
    ```
    等等，`border-color` 和 `border-style` 是可以更改的。但 `border-width` 不能。添加 `border: 1px solid ...` 算不算更改 `border-width`？是的，它设定了宽度。我应该只设置 `border-color` 和 `border-style`，但我需要确保没有设置宽度。我可以这样写：
    ```css
    border-color: rgba(108, 99, 255, 0.2);
    border-style: solid;
    ```
    但是，如果原始样式没有边框，这会不会增加边框？是的，但这是一种视觉上的改变。为了安全，我可以完全跳过边框，只使用背景和阴影。

    *让我们仔细对比 "NEVER CHANGE" 列表和 "YOU MUST CHANGE" 列表。*
    "YOU MUST CHANGE" 列表: color values, box-shadow, text-shadow, border-radius, gradient colors, transition, filter, backdrop-filter, opacity, outline styles, caret-color, accent-color, CSS custom properties.
    "NEVER CHANGE" 列表: display, position, grid props, flex props, width, height, padding, margin, gap, justify/align, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, text-align, vertical-align, font-family, font-size, font-weight, font-style, line-height, letter-spacing, text-transform, white-space, @keyframes names, @media breakpoints, @import, @font-face, animation-name.

    所以，添加 `background: linear-gradient(...)` 是允许的，因为 `gradient colors and stops in linear/radial/conic-gradient` 是必须更改的。
    添加 `transition` 是必须更改的。
    添加 `box-shadow` 是必须更改的。
    添加 `border-radius` 是必须更改的。
    添加 `animation`（属性）是允许的，因为 `animation-name` 的值不能更改（如果存在），但 animation 的其他值可以更改。等等，"animation-name (values like duration/timing CAN change)"。这意味着我可以添加一个新的 animation 属性，只要我不更改现有的 animation-name