/* ============================================================
   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. Need analyze original. Only media query with few rules. Need refresh visual identity while preserving selectors and layout/font etc. 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;
    }
}

We can change colors, shadows, radius, transitions, gradients, custom props? But these rules only text-align, font-size, padding. We must preserve text-align, font-size, padding within ±20%. Need add visual changes maybe color, background, border-radius, box-shadow, transitions, filter, backdrop-filter, opacity, caret/accent. But HTML fixed, can add new declarations to same selectors. Need respect media max-width unchanged. Need preserve selectors exactly. Need maybe use vertical-flow target style? Since original media query only. Need add vertical flow? But layout changes forbidden. However could add flex-direction? Not in selector? HTML unknown. We should not alter layout except maybe adding flex? But instructions say layout must not change. "vertical-flow" target style suggests aesthetic but can apply to colors maybe. Need likely output same selectors with additional visual properties. Since media query stays. Need add color values: text color, background colors, borders, box shadows, border-radius, transitions, maybe filter, text-shadow. But existing selectors don't have color declarations, so we can append. Need decide.

Need use warm minimal palette off-white #faf8f3, soft black #2d2d2d, muted accent sage #87a878 or terracotta #c47b5a. Glow effects: glow shadows accent, halo hover, radius 8-16, subtle pulsing animations. Need animations? Could add @keyframes? Original no keyframes. We can add @keyframes inside media? But selectors? Need preserve @media. We can add keyframes with new name? Self-check says "no AI marker comments"; However "animation-name (values like duration/timing CAN change)". Adding new @keyframes may be considered changing CSS but not selector? Need maybe add keyframes outside? But output should include @media only? We can include inside media? Could define keyframes within media? @keyframes within @media is valid. But output should preserve selectors and media. Should we add keyframes to cause pulse? It might change animation if applying to elements. But no existing animation-name, so adding animation may affect layout? It's visual only. But could be okay. However risk: adding animation to .contact-card might cause transform? Need avoid layout changes. Pulse via opacity/box-shadow maybe okay. But no need? "Subtle pulsing animations" effect variant. We can perhaps add a custom @keyframes "softGlow" and apply to article/contact-card? But careful: `animation` property can use transform? If it changes transform, layout no but visual. Could use opacity/box-shadow only, not transform. But applying to contact-channels article may affect? Should be okay. But maybe in mobile only.

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

We can add declarations. But if adding box-shadow to contact-card maybe okay. Need maybe add rounded corners, background colors. But note padding uses var(--space-md), allowed? "padding keep similar values ±20%" using var, we cannot change? We should preserve. Could add border-radius. Need maybe `transition: box-shadow .3s ease;` and hover selectors? But if add hover style, need new selector `.contact-channels-section article:hover`? Is that allowed? It is new selector not in original. Instructions say selectors preserved exactly, but can we add new selectors? The output should be CSS file, perhaps adding new rules is allowed? "Only rewritten CSS, preserving ALL selectors and layout exactly." That likely means don't remove/rename existing selectors, but can add? Usually "refresh this CSS visually" can add declarations, maybe new selectors? But "HTML is fixed" means selectors must match existing HTML; can add but might be okay. But self-check says "Every selector character-for-character preserved?" It doesn't say no new selectors. But to be safe, we can avoid new selectors and just add declarations to existing selectors within media. But box-shadow on all cards maybe enough. No need hover. The effect variant "Halo on hover" would require hover selectors. We might add `:hover` to existing selector? That changes selector list? Actually `.contact-channels-section article:hover` is a new selector. Could add new rules after. But user explicitly says "Only rewrite CSS preserving all selectors" Might permit adding. However "no markdown" and first char CSS. We can include new @keyframes and hover rules.

Need maybe change first rule `.app-hero-section .row .col-lg-7` text-align center. Could add color/background? Not necessary but can. New declarations can be added without layout change. Need maybe use `color: #2d2d2d;` to force soft black. Add `text-shadow: 0 2px 12px rgba(196,123,90,0.15);`? Maybe.

Need maybe change badge `.badge.bg-warning` font-size unchanged `0.85rem`; add background? But `.bg-warning` is Bootstrap class, existing background. We can override background-color maybe? But "colors changed" perhaps. We can add `background-color: #c47b5a !important;`? But Bootstrap `.bg-warning` would have `!important` maybe. We need not worry? Since .badge.bg-warning specificity 0,2,0. Bootstrap `.bg-warning` maybe 0,1,0, our selector wins if no important? Actually same specificity? `.badge` and `.bg-warning` two classes specificity 0,2,0 vs `.bg-warning` 0,1,0, so wins. But `bg-warning` background maybe important? Bootstrap 5 `.bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; }` has !important. Need use `!important` to override. Could set `background-color: #c47b5a !important; color: #faf8f3 !important; border-radius: 999px !important; box-shadow: 0 0 16px rgba(...);`. But font-size fixed; adding color okay. Need ensure `border-radius` maybe visual. `badge` warning color perhaps terracotta. Could add `caret-color`? Not.

Need maybe `.contact-channels-section article, .contact-quick-section .contact-card` add:
  background-color: #fffdf9;
  border: 1px solid rgba(196,123,90,0.18); (border-style/color change okay, border-width? We can set border shorthand? Border-width not in original, so adding is okay; but "border-color and border-style (NOT border-width)" should avoid changing width? The instruction says never change border-width, but can add? It says "border-color and border-style (NOT border-width)" likely means don't change border-width values if existing. Adding a border where none existed maybe changes layout due to border box? But box-sizing likely border-box. Border consumes space, could alter visual layout slightly. Better use box-shadow for outline-like border: `box-shadow: inset 0 0 0 1px rgba(196,123,90,0.18), 0 8px 24px rgba(45,45,45,0.06), 0 0 24px rgba(196,123,90,0.12);` No border. Add `border-radius: 14px;`. But box-shadow doesn't affect layout. Good.

Need maybe `backdrop-filter: blur(8px)`? But if no background transparency, okay. Could add `background-color: rgba(250,248,243,0.9);`. But original no background. Adding background could change visual but okay. Need maybe use `filter: drop-shadow(0 6px 12px rgba(45,45,45,0.08));`? Box-shadow enough. Need "glow shadows in accent color: 0 0 24px rgba(accent, 0.4)" We can set `box-shadow: 0 0 24px rgba(196, 123, 90, 0.22), 0 12px 24px rgba(45, 45, 45, 0.06);` but instruction effect says 0.4, but maybe too strong. We can use 0.35. Need "halo on hover 0 0 32px rgba(accent, 0.6)" via hover rule. Add `transition: box-shadow .45s ease, background-color .45s ease, transform .45s ease;` but transform might be layout? Not. Could include transform in hover? But effect "glow" no need. If transition `transform` okay. But if we animate transform on hover, visual. Could add `transform: translateY(-2px)`? But layout? It's visual and okay, but "vertical-flow" maybe. However instructions say layout unchanged; transform doesn't affect layout. But to be safe, no transform. But transition property can include box-shadow only. Hover rule: `.contact-channels-section article:hover, .contact-quick-section .contact-card:hover { box-shadow: 0 0 32px rgba(196,123,90,0.5), 0 16px 32px rgba(45,45,45,0.08); }` Need preserve selectors? New.

Need maybe add pulse animation. We can add @keyframes softPulse:
@keyframes softPulse {
  0%, 100% { box-shadow: 0 0 24px rgba(196,123,90,0.18), 0 10px 24px rgba(45,45,45,0.06); }
  50% { box-shadow: 0 0 36px rgba(196,123,90,0.3), 0 10px 28px rgba(45,45,45,0.08); }
}
Then apply to contact card/article with `animation: softPulse 4s ease-in-out infinite;`. But if also hover changes box-shadow, hover may be overridden by animation? Since animation overrides box-shadow. Need maybe no pulse with hover. Could use animation on something else maybe hero title? But not. Or use `animation: softPulse 6s ease-in-out infinite;` and hover set `animation-play-state: paused`? Hmm. We can add `animation` to `.app-hero-section .badge.bg-warning` maybe pulse glow. But badge already maybe. Better to apply to contact cards but then hover shadow won't show due to animation. Could include hover selector with `animation-play-state: paused;`? Need no. Could set keyframes to include hover impossible.

Maybe don't add pulse animation, since not necessary. But variant says "Subtle pulsing animations". We could add `@keyframes glowPulse` and apply to `.contact-quick-section .contact-card::after`? Need pseudo-element may not exist; if using ::after, HTML fixed but generated content not layout? Could be okay. But maybe not.

Maybe apply glow pulse to `.app-hero-section .badge.bg-warning`:
  animation: badgeGlow 3s ease-in-out infinite;
Keyframes:
@keyframes badgeGlow { 0%,100% { box-shadow: 0 0 12px rgba(196,123,90,0.35); } 50% { box-shadow: 0 0 24px rgba(196,123,90,0.55); } }
This doesn't affect layout. Good. But the media query applies only max-width mobile. Could be okay.

Need think about "Target Style: vertical-flow" and "Layout pattern (Aggressive only)" Actually it says Layout pattern (Aggressive only) but mode is conservative? Wait mode says 🛡️ CONSERVATIVE (HTML fixed, visual changes only). The target style says "vertical-flow" with layout pattern (Aggressive only). But we are conservative, so cannot change layout. We can maybe use colors and spacing only. The original CSS is media query with text-align and padding. We can maybe apply vertical flow through "width: 100%; max-width: 760px; margin-inline: auto;"? That changes layout (width/max-width), prohibited? Actually width and margin are layout; in original no. Instruction says width, height, padding, margin keep similar if existing; cannot add? Probably not. So avoid.

Need maybe use `background-color`, `color`, `border-radius`, `box-shadow`, `transition`, `filter`, `backdrop-filter`, `opacity`, etc. Need maybe adjust border-radius, shadows, colors. We need output only CSS. Since original is a media query, we can rewrite inside it. We can also add hover and keyframes. But need maybe all selectors preserved exactly in the media query. Hover selectors are new. Should we include? It says "preserving ALL selectors" not necessarily "only existing." If we add new keyframes name and hover rules maybe fine. But to be safe in conservative mode, maybe avoid adding selectors? Yet "glow-effects" variant explicitly "Halo on hover: 0 0 32px rgba(accent, 0.6)" so need hover. Could implement hover by adding `transition` and applying `:hover` pseudo-class? It's a new selector. Since HTML has these elements, it's fine. The self-check says "Every selector character-for-character preserved?" We might not preserve "only" but if they check diff, new selectors may be seen as not in original. They said "Keep ALL selectors exactly" maybe not "do not add selectors." The output must be a "rewritten CSS" not necessarily "same rules." I'd include new rules but not alter original selectors.

Need also maybe include `@media (prefers-reduced-motion: reduce)`? That would be new selector, not needed. Avoid.

Need maybe use CSS variables? Original references var(--space-md). We can define custom properties in root? Could add `:root { --glow-accent: #c47b5a; ... }`; But adding custom props at root before media might be okay. But "CSS custom properties --color-* --shadow-* values" are allowed to change. But if original CSS didn't define them, maybe not. Could define variables inside selector? E.g. `.contact-channels-section article, .contact-quick-section .contact-card { --card-glow: rgba(...); }`. Better avoid maybe.

Need maybe use `color: var(--text-soft)`? Not defined. Better direct colors.

Need perhaps adapt the existing selectors:
- `.app-hero-section .row .col-lg-7` is a column; adding `color` would set text color. Could add `color: #2d2d2d;` and `text-shadow: 0 1px 0 rgba(250,248,243,0.6);`? Text shadow subtle.
- `.app-hero-section .badge.bg-warning` add background, color, border, border-radius, box-shadow, animation, maybe `display: inline-block`? No, display layout change? Not necessary.
- `.contact-channels-section article, .contact-quick-section .contact-card` add background, border-radius, box-shadow, transition, maybe backdrop-filter, filter. Need maybe "padding: var(--space-md) !important;" keep. Add `border: 0;`? No.

Need perhaps include `color` for contact card? Add `color: #2d2d2d;`. But often article may contain headings with own colors. Fine.

Need maybe `background-color: #faf8f3` for body? But no selector. We can add `body {}`? That is new selector. Could add to first rule? `.app-hero-section .row .col-lg-7` no. `body` not in original. Should avoid? "HTML fixed" so body exists. But maybe adding body rule is okay, but maybe not needed. Colors in components sufficient. But background not set. Hmm.

Need perhaps "soft black #2d2d2d" used as text color via `color: #2d2d2d`. "off-white #faf8f3" for background maybe `background-color: #fffdf8`? Need exact #faf8f3 maybe. Use `background-color: #faf8f3;` for contact cards, but on off-white page, cards may need slightly different. Could use `#fffdf7`? But target says off-white #faf8f3. We can use #faf8f3 as card background and body not set. Maybe `background-color: rgba(250, 248, 243, 0.92);` with backdrop-filter. Need maybe contact cards over hero? Unknown.

Need maybe use slight transparent background + `backdrop-filter: blur(10px);` for glassmorphism? Effect variant not glass. Warm minimal. Could avoid.

Need maybe change `.badge.bg-warning` to terracotta: `background-color: #c47b5a !important; color: #faf8f3 !important; border-radius: 999px; box-shadow: 0 4px 14px rgba(196,123,90,0.35), 0 0 24px rgba(196,123,90,0.25); animation: badgeGlow 3.2s ease-in-out infinite;` This uses accent glow. Good.

Need maybe `.contact-channels-section article...` add glow shadows:
```
    background-color: #faf8f3;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(45, 45, 45, 0.07), 0 0 24px rgba(196, 123, 90, 0.18);
    transition: box-shadow 0.4s