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

The user wants me to rewrite this CSS with a fresh visual identity while keeping the exact same selectors and layout properties. Let me analyze the original CSS:

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

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

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

This is a media query block. The visual properties I can change:
- Colors (none present)
- box-shadow (none present)
- text-shadow (none present)
- border-radius (none present)
- gradients (none present)
- transition (none present)
- filter, backdrop-filter (none present)
- opacity (none present)
- outline styles (none present)
- border-color and border-style (none present)
- caret-color, accent-color (none present)
- CSS custom properties values (there's `var(--space-md)` reference but I can't change the variable value without seeing the definition... Actually I could add a fallback, but that's risky)

Wait — the original CSS has almost no visual properties! It only has:
- `text-align: center;` (layout — cannot change)
- `font-size: 0.85rem;` (typography — cannot change)
- `padding: var(--space-md) !important;` (layout — cannot change, but it uses a custom property)

So there's literally nothing visual to change here. Hmm. But the task says I must refresh the visual identity. However, the constraints say I cannot change layout, typography, etc.

The only thing I can do is add new visual properties that don't exist yet, like box-shadow, border-radius, transitions, etc., to the elements within the media query. But wait — the media query is `max-width: 575.98px`, so these would only apply on small screens.

Actually, I think the intent here is: for the given CSS snippet, apply the target style (symmetric-grid with glow effects) by adding visual properties that are allowed:
- box-shadow: 0 0 24px rgba(accent, 0.4)
- border-radius: 8-16px
- transition for hover effects
- etc.

But I need to be careful: these selectors are already in a media query. Adding box-shadow to `.contact-channels-section article` and `.contact-quick-section .contact-card` could be fine.

However, the instructions say "Every selector character-for-character preserved?" — so I must keep the selectors exactly. I can add additional declarations inside the existing rules.

Wait but also: "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." This means I can only modify/add visual properties. Since the original has none, I can add them.

The target style is symmetric-grid with glow-effects:
- Glow shadows in accent color: 0 0 24px rgba(accent, 0.4)
- Halo on hover: 0 0 32px rgba(accent, 0.6)
- Medium radius (8-16px)
- Subtle pulsing animations

But adding hover effects requires the `:hover` pseudo-class, which doesn't exist in the original selectors. The instruction says "Pseudo-classes (:hover, :focus, ::before, ::after)" are in the "NEVER CHANGE" category — meaning I keep them exactly if they exist, but I shouldn't add new selectors? Actually, "Selectors (CRITICAL - HTML is fixed)" says keep class names, IDs, element types, pseudo-classes exactly. Adding new pseudo-class rules would be adding new selectors, which changes the selector list. That's risky.

Actually, let me re-read: "🏷️ SELECTORS (CRITICAL - HTML is fixed): • Class names: keep EXACTLY (.post-card stays .post-card) ... • Pseudo-classes (:hover, :focus, ::before, ::after)" — this means if a selector uses :hover, I keep it. It doesn't necessarily forbid adding new selectors, but the overall instruction says "preserving ALL selectors and layout exactly" and "Keep ALL selectors and layout exactly as-is." So I should not add new selectors.

Since I can't add `:hover` rules, I can only add visual properties to the existing rules. Let me see what I can add to each:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — I can't change text-align (layout). I could add `color`, but that would change the text color of the whole column, which might be too aggressive. Actually, adding a color is allowed (color values can change). But this is a column in the hero section — changing its text color could be fine. But it might break the visual hierarchy. Hmm.

Actually, since this is a media query for small screens, adding subtle glow/color is fine.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — `bg-warning` is a Bootstrap class (yellow-ish). I can't change font-size. I could add `background-color`, `color`, `box-shadow`, `border-radius`, `transition`. But wait — bg-warning in Bootstrap uses `background-color: #ffc107 !important`. Adding `background-color` here would be overridden unless I use `!important`. Also, the instruction says border-color and border-style can change but NOT border-width. Adding a background-color to a `.bg-warning` element could conflict with Bootstrap's `.bg-warning`. But visually refreshing means we might want a different warning color. However, this is a media query (small screens only), so changing the color only on small screens might be odd but allowed.

3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — I can add `border-radius`, `box-shadow`, `background`, `transition`, etc. This is where the glow effects + symmetric-grid style would shine.

Now the target style says "symmetric-grid" with "Strict equal grids: 'repeat(3, 1fr)' or 'repeat(4, 1fr)'" and "Uniform gap (24px throughout)" — but I cannot change grid-template-columns or gap because those are layout properties in the NEVER CHANGE list. And they don't exist in this snippet anyway. So I'll ignore the grid part since it's not applicable to these selectors, and focus on the glow-effects variant which is visual.

The glow-effects variant:
- Glow shadows in accent color: 0 0 24px rgba(accent, 0.4)
- Halo on hover: 0 0 32px rgba(accent, 0.6) — can't add :hover
- Medium radius (8-16px)
- Subtle pulsing animations — I could add an animation, but @keyframes names... I can add a @keyframes if I add the animation property. But adding @keyframes is adding new CSS, not changing existing. Hmm. The instruction says "@keyframes names (values inside CAN change)" — meaning existing keyframes can keep names but change values. Adding new keyframes isn't forbidden explicitly, but "preserving ALL selectors" suggests I shouldn't add new rules/selectors. Also, the media query is a conditional; adding @keyframes inside the media query is possible. But a subtle pulsing animation on cards at small screens could be unwanted and risky (animation changes layout? No, it doesn't). Let's consider.

Actually, re-reading the task: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." The word "Only change" implies modifying existing properties, not necessarily adding new ones. But since the original has zero visual properties, to make any visible difference I must add new declarations within the existing rules. I think that's the intended challenge. I'll add visual declarations (colors, box-shadow, border-radius, transition, background) to the existing rules, keeping the existing declarations intact.

Let me pick a fresh palette. The target style mentions glow effects with accent color. Since this is a "saishi.css" (赛事 = competition/event), maybe a sports/event theme. Let me pick a fresh palette:

- Accent: indigo/violet: #6d5ef2 or maybe a teal-green. For glow effects, a violet/indigo glow looks modern. Or a cyan glow.
- Let's go with a balanced harmonious palette:
  - Primary accent: #6366f1 (indigo-500)
  - Glow: rgba(99, 102, 241, 0.4)
  - Hover halo: rgba(99, 102, 241, 0.6)
  - Background tint: rgba(99, 102, 241, 0.06)
  - Card surface: #ffffff or a soft tint
  - Text color: #1e1b4b (indigo-950) or keep default?

But careful: changing text color of `.col-lg-7` might affect Bootstrap typography. Since it's inside a media query for small screens, it's fine. I'll set a subtle color.

Actually, for `.app-hero-section .row .col-lg-7`, adding a color would color all text in the hero column. That could be a big visual change. But the target is a visual refresh, so it's okay. But maybe safer to not add color there and only add to the cards. Hmm.

Let me think about what's really needed. The previous attempt "didn't change enough." So I need to go bold. Add strong glow shadows, distinct border-radius, background colors, transitions.

Plan:

1. `.app-hero-section .row .col-lg-7`:
   - Keep `text-align: center;`
   - Add `color: #312e81;` (indigo-900) — but this might alter heading colors too. Bootstrap headings have their own color, so this cascades. It's a visual refresh. Alternatively, I could add `text-shadow: 0 2px 20px rgba(99, 102, 241, 0.25);` for a subtle glow on text. That's a visual property. But text-shadow on a large block of text might look odd. Maybe just color.

2. `.app-hero-section .badge.bg-warning`:
   - Keep `font-size: 0.85rem;`
   - Add `background: linear-gradient(135deg, #fbbf24, #f59e0b);` — but Bootstrap's `.bg-warning` sets `background-color: #ffc107 !important;`. To override, I'd need `background: linear-gradient(...) !important;` or `background-image`. Actually `background` shorthand resets background-image; but Bootstrap's `!important` would still win if it sets `background-color`. Let me check Bootstrap: `.bg-warning { background-color: #ffc107 !important; }`. If I add `background: linear-gradient(...)` without `!important`, the `background-color` from Bootstrap with `!important` will still apply, but the gradient background-image would also apply since background-image isn't set by Bootstrap. Actually, `background` shorthand resets background-image too. The cascade: Bootstrap rule `.bg-warning { background-color: #ffc107 !important; }` sets background-color important. My rule sets `background: linear-gradient(...)` without important. The background-color important wins, so background-color becomes #ffc107, but background-image from my shorthand is the gradient. The gradient would show, with the yellow color behind it (gradient covers it anyway). Hmm, this is getting complex. Since the file fingerprint and context are unknown, and it's "saishi.css" (probably custom styles on top of Bootstrap), it's plausible the CSS is loaded after Bootstrap. To be safe and bold, I'll add:
   - `background: linear-gradient(135deg, #fcd34d, #f59e0b) !important;` — wait, `!important` on `background` shorthand would override the background-color important? Actually `!important` on the shorthand sets all longhands to important (background-image, background-color, etc.), which then override Bootstrap's `background-color !important` because both are important and mine comes later in source order... actually, important declarations with same specificity: source order decides. If my stylesheet comes after Bootstrap, mine wins. But I don't know the order. I could add `background-color: transparent !important` too. Hmm.
   
   Maybe simpler: add a glow shadow to the badge instead of changing its background. That's a clear visual change:
   - `box-shadow: 0 0 24px rgba(245, 158, 11, 0.45), 0 4px 16px rgba(245, 158, 11, 0.25);`
   - `border-radius: 999px;` (pill) — wait, Bootstrap badge is already pill-rounded if using `.rounded-pill`, but not always. Setting border-radius to 999px could be a nice visual change.
   - `transition: box-shadow 0.3s ease, transform 0.3s ease;` — transform is not allowed? `transform` isn't in the NEVER CHANGE list explicitly, but it's a layout-ish property? The NEVER CHANGE list includes "display, position, grid-template-*, flex-direction, width, height, padding, margin, gap, justify-content, align-items, align-self, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, object-position, text-align, vertical-align". `transform` isn't listed. So I could add transform, but adding transform on hover would require a :hover rule. I'll skip transform to be safe. Transition of box-shadow is fine.

3. `.contact-channels-section article, .contact-quick-section .contact-card`:
   - Keep `padding: var(--space-md) !important;`
   - Add `border-radius: 16px;` (glow-effects medium radius 8-16)
   - Add `background: linear-gradient(145deg, rgba(99, 102, 241, 0.06), rgba(99, 102, 241, 0.02));` — but these are articles/cards inside contact sections. They might already have backgrounds. Adding a `background` might conflict with existing styles, but a gradient tint is a nice refresh. Alternatively, use a solid surface: `background: #ffffff;`. Cards in contact sections usually have white background. Overriding with gradient could be a fresh look.
   - Add `box-shadow: 0 0 24px rgba(99, 102, 241, 0.18), 0 8px 30px rgba(30, 27, 75, 0.12);` — multi-layer glow.
   - Add `border: 1px solid rgba(99, 102, 241, 0.15);` — border-color allowed (not width). Wait, the elements might already have a border. Setting `border: 1px solid ...` would set border-width to 1px, which might change an existing border width. The instruction says "border-color and border-style (NOT border-width)" can change. So I should not set border-width. If I want a border color, I should set `border-color: rgba(...)` — but if the existing border-style is none, border-color won't show. Adding a border would require setting border-style, which is allowed. But if the original border-width is 0, setting border-style: solid with 0 width shows nothing. Hmm. To avoid layout shifts (border-width affects layout), I should avoid adding any border. I'll skip borders and rely on shadows and backgrounds.
   - Add `transition: box-shadow 0.35s ease, background 0.35s ease, border-radius 0.35s ease;` — transitions on hover would apply if there's a hover rule elsewhere (e.g., Bootstrap or other CSS). Adding transition is safe.

Wait, but for the "glow-effects" variant, it says "Halo on hover: 0 0 32px rgba(accent, 0.6)". Since I can't add a :hover selector, I could use `@media (hover: hover)` ... no, that's adding a media query. Actually, I can't add selectors. But I can add a transition so that any existing hover styles animate smoothly. That's the best I can do.

Hmm, but actually, could I add declarations with `:hover` attached to the same rule? Like:

```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    border-radius: 16px;
    box-shadow: ...;
    transition: box-shadow 0.35s ease;
}
```

I can't write `.contact-channels-section article:hover` because that's a new selector not in the original. But the instruction about selectors might be interpreted as: don't change existing selectors; adding new ones is... "Keep ALL selectors and layout exactly as-is" — this strongly implies the selector list must be identical. Adding a new selector changes the CSS structure. The self-check says "Every selector character-for-character preserved?" — so I must not add selectors. OK.

So my output will have the exact same three rules inside the media query, with added visual declarations.

Now let me pick a fresh, distinct palette. The target style is "symmetric-grid" which is about balanced grids (not applicable here). For glow effects, the accent color should be visible. Let me choose:

- Accent: `#6d5ef2` (deep periwinkle / soft violet) — modern, fresh.
- Or maybe teal: `#0ea5e9` (sky blue) for a competition/event vibe. Sky blue glow: rgba(14, 165, 233, 0.4).

Let me go with a violet/indigo accent for a premium tech-event look. Actually, "赛事" (competition) — energetic. Let's use a coral/orange glow? Orange glow is common. Let's pick a distinct "electric violet" for a fresh identity.

Palette