/* ============================================================
   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 to rewrite the given CSS with conservative mode: keep selectors exactly, keep layout properties (padding, margins, font-size, etc.) within ±20%, but change colors, shadows, radius, transitions, gradients, etc. The target style is symmetric-grid, sharp edges variant. The original CSS is a small media query. It contains:

@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 must keep all selectors and layout exactly. The only changes we can make are visual properties. But there are no colors, shadows, radius, transitions in the original. The task says "Refresh this CSS visually" and "Only change colors, shadows, radius, transitions, gradients." However, the original has no such properties. We need to add new visual properties? The instructions say preserve all selectors and layout exactly, but we can add new declarations that change colors, shadows, radius, transitions, gradients, filter, backdrop-filter, opacity, outline styles, border-color, border-style, caret-color, accent-color, CSS custom properties values. We cannot change display, position, width, height, padding, margin beyond ±20%, font-size, font-weight, line-height, etc.

Given the target style "symmetric-grid" and "sharp-edges", we should add some visual flair to these elements within the media query. But we need to be careful: we can add declarations to existing rules, but we cannot add new selectors? Actually we can add new declarations inside existing selectors, but not change selectors. We can also add new CSS rules? The instruction says "preserving ALL selectors and layout exactly" but does it allow adding new selectors? It says "Every selector character-for-character preserved?" We need to preserve the existing selectors, but we can add new selectors? The task says "REWRITTEN CSS" and "preserving ALL selectors and layout exactly" and "Only the rewritten CSS, preserving ALL selectors and layout exactly". It might be safest to only modify existing rules, not add new selectors. However, the original CSS is very sparse. To achieve the target style, we need to change visual identity. We can add properties to existing selectors. But the media query itself is a selector. We can add new declarations inside it? The media query is a rule, but the declarations inside the existing rules are the ones we modify.

Alternatively, we can add new CSS custom properties definitions? But that would require a new selector (:root) which is not preserved. The instruction says "CSS custom properties (--color-*, --shadow-*) values" can change, but only values of existing ones. The original doesn't define any. So maybe we just add new declarations to existing rules.

But the existing rules target elements: .app-hero-section .row .col-lg-7, .app-hero-section .badge.bg-warning, .contact-channels-section article, .contact-quick-section .contact-card. We can add colors, shadows, border-radius, transitions to these elements. But we must be careful: adding padding? The third rule already has padding: var(--space-md) !important; we must keep that exactly, maybe within ±20% but padding is layout, so keep as is. We can add other padding? No, that would change layout. So we shouldn't add padding/margin.

We can add border to .contact-card, background colors, box-shadow, border-radius, transition, etc. For the badge, we can change its background-color, color, border-radius, box-shadow, but keep font-size exactly (0.85rem). For the hero text alignment, we can add color? text-align is layout, keep.

We need to output only CSS. The target style "symmetric-grid" and "sharp-edges" suggests strong borders (2-3px solid), hard offset shadows (4px 4px 0px solid color), small radius (0-4px), snappy transitions (0.15s). We can apply these to the elements.

Let's craft a fresh palette. Since it's a sports/competition site (saishi = 赛事), maybe use e.g. indigo/teal or crimson/gold. But we should keep it generic. Let's choose a balanced harmonious palette: maybe deep navy background? But we shouldn't change background of body because not in selector. We can change the elements in question.

Let's think: We can add declarations to each rule:

Rule 1: .app-hero-section .row .col-lg-7 { text-align: center; } We can add color? But text-align is the only property. Adding color could be okay: maybe color: #1e293b; But this is a hero section, maybe keep. Also transition? Not needed. To show visual change, we could add text-shadow? But system says text-shadow is a visual property we can change. Maybe add a subtle text-shadow? But sharp edges variant doesn't emphasize text-shadow. Maybe do nothing? But the task says "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round." So we need to change something. Since this rule has no color, we can add a color or text-shadow to make it distinct. But it might affect the hero text color, which could be a visual change. Good.

Rule 2: .app-hero-section .badge.bg-warning { font-size: 0.85rem; } We can change background-color, color, border-radius, box-shadow, border, transition. But note .bg-warning is a Bootstrap class that sets background-color: #ffc107. We can override it. But preserve font-size. We'll add fresh badge style: background-color: #f59e0b? But bg-warning already yellow. To make distinct, change to e.g. #d97706 (amber-600), color #fff, border: 2px solid #92400e, box-shadow: 4px 4px 0px #78350f, border-radius: 0 (sharp), transition: all 0.15s ease.

Rule 3: .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; } We can add background-color, border, box-shadow, border-radius, transition. But padding stays. We can also add margin? No, keep padding. We'll add a card style: background-color: #ffffff? But maybe dark? Let's choose a light palette.

But we must be careful: adding background-color to .contact-channels-section article might affect overall design. But that's the point. We'll add a new color scheme.

Let's also note the media query max-width 575.98px, so it's mobile. Maybe we want to keep it clean. The target style is symmetric-grid but the media query doesn't define grid. We can't change layout. We can only add visual decorations.

Maybe we should also add a new rule? No.

Let's craft:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1e293b;
        text-shadow: 0 2px 0 rgba(255,255,255,0.5); /* but maybe not */
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #d97706;
        color: #ffffff;
        border: 2px solid #92400e;
        border-radius: 4px;
        box-shadow: 4px 4px 0px #78350f;
        transition: all 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #f8fafc;
        border: 2px solid #334155;
        border-radius: 4px;
        box-shadow: 4px 4px 0px #94a3b8;
        transition: all 0.15s ease;
    }
}

But wait: The original rule 3 has a comma-separated selector. We need to preserve it exactly, including the line break. We'll keep the same selectors. We can add declarations after padding.

We need to ensure we don't change padding value. It remains `var(--space-md) !important;`. Fine.

Now, is adding `background-color` to .contact-channels-section article too much? It changes visual identity.

But note: The target style is "symmetric-grid" and "sharp-edges". This is a media query for small screens. Maybe we should also add some custom properties? The original didn't have any. But we can't add :root because it's a new selector. So no.

Let's consider perhaps changing the existing `padding: var(--space-md) !important;` to something else? No, padding is layout, cannot change. We could add `border-radius` etc.

Also, the original has no `box-sizing`, no `outline`. We can add.

Maybe we should include a hover state? But cannot add new selectors? Actually we can add pseudo-classes? The instruction says "Pseudo-classes (:hover, :focus, ::before, ::after)" must keep exactly? It says "Pseudo-classes (:hover, :focus, ::before, ::after)" in the NEVER CHANGE list. That means we should not change existing pseudo-classes, but it might mean if a selector has a pseudo-class, keep it. It doesn't say we cannot add new pseudo-class selectors. But the instruction "preserving ALL selectors exactly" might imply we cannot introduce new selectors. To be safe, we only modify existing selectors. We won't add hover.

Let's think about colors fresh palette. The target says "Balanced harmonious palette" and "Consistent shadows". Let's pick an indigo/teal palette: primary #0f172a (slate-900), accent #0ea5e9 (sky-500), secondary #14b8a6 (teal-500), background #f1f5f9 (slate-100), border #475569 (slate-600), shadow #0f172a? Actually hard offset shadow needs a color darker than the base. For sharp edges, we can use a dark slate shadow.

For the badge (originally bg-warning yellow), we can use a fresh amber or orange to keep the semantic warning, but shift. Let's use #ea580c (orange-600) with border #9a3412 and shadow #431407. The background should be distinctly different from Bootstrap's warning. Good.

For the contact cards, use #ffffff background with border #0f172a and shadow #cbd5e1? Actually hard offset shadow should be a solid darker color, e.g. #0f172a. But if cards have white bg, shadow black might be too harsh. Sharp edges variant says "Hard offset shadows: 4px 4px 0px solid color" — that implies a solid shadow, like a neo-brutalist style. Let's use a colored shadow: #cbd5e1 (light slate) or #94a3b8. To make distinct, use #334155 as shadow. But border is #0f172a, shadow #334155? Better: border #0f172a, shadow #64748b? Actually neo-brutalism usually uses a dark shadow offset.

Let's set contact card: background-color: #fff; border: 2px solid #0f172a; border-radius: 0; box-shadow: 4px 4px 0px #0f172a; That's a bold black shadow. But then the card appears to float. Could be fine.

For the hero text: add color: #0f172a; text-shadow: 2px 2px 0px #e2e8f0? That's not necessary. But to make a change, maybe add a subtle text-shadow: 1px 1px 0px rgba(255,255,255,0.8). But this might look weird. The text-align center is the only layout. We can also add letter-spacing? No, letter-spacing is typography forbidden. We can add color only. To satisfy "change colors", we need to change color values. The original has no color, so adding one is a change. Good.

But perhaps we should add a background-color to the hero section? We cannot because selector doesn't include the section itself? Actually `.app-hero-section .row .col-lg-7` is a child, we can set background-color on it. But that might make a block background. Could be okay. But maybe not.

Let's keep it minimal but distinct.

Another idea: Add CSS custom properties? The original doesn't define any. We could add e.g. `--color-primary: #0f172a;` inside the media query? But custom properties are inherited, but they are declarations. We can add them at the top of the media query? Actually within a media query, you can have custom properties. The instruction says "CSS custom properties (--color-*, --shadow-*) values" can change. It doesn't say we cannot add new ones. But if we add new custom properties, they are new declarations, not new selectors. The media query already exists. We can add `:root`? No, we can't add new selector. But we can add custom properties to the existing selectors. For example, in the first rule, we could set `--foo: bar;` but that would be inherited by that element only. It's unnecessary.

Better to just add visual properties directly.

Let's ensure the output is only one media query with the three rules. We'll include exactly the same selectors, same font-size, same text-align, same padding. We'll add visual properties.

But wait: The file fingerprint and request ID suggest this is part of a larger file. The "File: assets/css/saishi.css#块2/2" means this is block 2 of 2. So the original CSS is just this media query block. We need to rewrite it entirely. We can add all necessary new visual declarations.

Let's verify constraints:

- Selector preservation: `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article, .contact-quick-section .contact-card`. We keep exactly (including comma, spacing? The original has comma at end of first line and then the second selector on next line. We should preserve that formatting? The instruction says preserve selectors character-for-character. That likely means the exact selector strings, not necessarily whitespace. But to be safe, we can preserve the same line structure? It says "Every selector character-for-character preserved?" The selector text itself, e.g. `.contact-channels-section article,` is the selector list. The comma is part of the selector. The whitespace between selectors and line breaks is not part of the selector string, but we should preserve the formatting to be safe. We'll keep the same multi-line formatting.

- Layout: `text-align: center` is layout. `font-size: 0.85rem` is typography. `padding: var(--space-md) !important` is layout. We keep them exactly.

- Colors: we'll add new colors, shadows, radius, transitions.

- No new selectors.

Potential issue: Adding `background-color` to `.contact-channels-section article` or `.app-hero-section .badge.bg-warning` may override Bootstrap classes. That's fine.

Let's craft a fresh palette. We need "symmetric-grid" style but not necessarily grid changes. Maybe use uniform gap? We can't change gaps because not present. We can maybe set `gap`? No, that's layout. Don't.

Maybe we should add a `box-shadow` to the hero col? But that would affect layout? box-shadow doesn't affect layout. Good.

Let's decide on exact values:

Palette:
- Ink: #0f172a
- Slate: #475569
- Muted: #94a3b8
- Paper: #f8fafc
- Accent (amber/badge): #ea580c
- Accent dark: #9a3412
- Accent shadow: #431407
- Card border: #0f172a
- Card shadow: #334155? Or #0f172a? Let's use #0f172a for strong contrast.

For the badge:
background-color: #ea580c;
color: #ffffff;
border: 2px solid #9a3412;
border-radius: 4px; (sharp edges allows 0-4)
box-shadow: 4px 4px 0px #431407;
transition: all 0.15s ease;

For the contact card:
background-color: #ffffff;
border: 2px solid #0f172a;
border-radius: 2px; (or 4px)
box-shadow: 4px 4px 0px #0f172a;
transition: all 0.15s ease;

Note: The selector `.contact-channels-section article, .contact-quick-section .contact-card` is combined, so both get same style. Good.

For the hero col:
color: #0f172a;
text-shadow: 1px 1px 0px rgba(255,255,255,0.7); Actually text-shadow with hard offset? Sharp edges might use text-shadow: 2px 2px 0 #cbd5e1. But the text is centered, maybe a subtle text-shadow not needed. Could we add `background-color: #f8fafc`? That would make the col a block with background, maybe not desired. Better keep it to color.

But the instruction says "All color values: background, color, border-color, fill, stroke, outline-color" MUST CHANGE. In the original, there are no colors. So we must introduce color values. If we only add color to first rule, that's okay. The second and third rules also get colors.

Let's ensure "border-color" changes: we add border, so border-color. Good.

We also need to ensure we don't accidentally set any property values that are in the NEVER CHANGE list. We won't.