/* ============================================================
   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. This is a small fragment. We need to apply style: symmetric-grid and tight-rhythm. But the CSS is a media query with specific selectors. We need to preserve selectors exactly. We can change colors, shadows, radius, transitions, but not layout. The original uses `!important` and padding. Padding is layout, but we can adjust within ±20%. Original padding: var(--space-md). Need to know what --space-md is? Not provided. But we can't change variable value unless we define it? The original CSS uses custom property `--space-md`. We are allowed to change custom property values, but only if they appear? This media query doesn't define --space-md. We could change padding value to a new one, but must keep within ±20% of original. Since we don't know the original computed value. Better to keep the same variable or use a similar value. But the instruction says width, height, padding, margin keep similar values ±20%. So we can change padding from var(--space-md) to calc? That would be weird. Since we don't know the actual value, we can leave padding as is. But "tight-rhythm" variant suggests compact spacing; padding 8-16px. We could change to a specific value like 12px? But that might be within ±20% if --space-md is around 16px? Hard to know. Safer: keep padding as is. But we can add/change other visual properties.

The original has only two rule sets inside a media query. We can add visual enhancements like border-radius, background, box-shadow? But the selectors are for text align, font size, padding. Adding colors/shadows may not be appropriate. But we can refresh visually by changing the badge background warning color? The selector `.badge.bg-warning` is a Bootstrap class. We could change its background? But the original only changes font-size. We are allowed to change color values. We could add a new background color? But the selector is `.app-hero-section .badge.bg-warning` — we can alter background, but that's a color property. We can also add border-radius.

Need to produce a rewritten CSS with same selectors and layout properties. Let's analyze each rule:

1. @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 text-align? That's a layout property? text-align is listed under "text-align, vertical-align" as 'never change'. So keep text-align: center.

font-size is a typography property, never change. Keep font-size: 0.85rem.

padding is layout, keep similar. We can keep var(--space-md) !important.

So there are almost no color/shadow properties to change. But the task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." But this CSS has none of those. We need to transform it while preserving the same selectors and layout. We can add new properties to the existing rules, but that would alter the CSS beyond the original. However, the instruction says "All color values... may change" and "fully redesign with multi-layer effects" but we don't have any. We could introduce them? The original didn't have them. Adding box-shadow, border-radius, background etc. would be additional visual changes, but they don't break layout. Since the goal is to refresh visual identity, we can add decorative properties.

But we must be careful: We cannot change the original properties that are layout or typography. We can add new properties. For example:

- For `.app-hero-section .badge.bg-warning`, we could add `background` with a gradient, `border-radius`, `box-shadow`? But the badge is a Bootstrap warning badge, likely has its own background color. We can override with a new color palette. The target style is "symmetric-grid" with balanced palette. Since we don't know the full page, we can choose a palette. But the media query only affects mobile.

- For `.contact-channels-section article, .contact-quick-section .contact-card`, we can add `border-radius`, `box-shadow`, `background-color`, `border`? But adding background and padding? Padding already exists. Adding border-radius and box-shadow could be nice. However, we need to keep the padding as is.

- For `.app-hero-section .row .col-lg-7`, maybe add something? It's a text-aligned center, likely for hero content. We could add `color`? But that might change text color, which is visual. We can add color.

But we must not change the structure. Adding properties is allowed.

However, the original CSS block is a mobile-only media query. The new style "symmetric-grid" and "tight-rhythm" might not apply well. But we can still implement the visual variant: compact spacing, small radius, subtle shadows.

Let's craft a refresh:

We need to preserve all selectors exactly, including the media condition. We'll output the same @media block with same selectors and layout properties. Then we add visual properties.

Potential new properties:

For `.app-hero-section .row .col-lg-7`:
- Could add `color: #2d3748;` but that may be a text color; however, the original had no color, so inheriting from parent. We could set a color to ensure consistent palette. But changing text color could be considered changing a color value, allowed. But it may affect layout? No.

Maybe better not to add anything unnecessary because the selector is specifically for centering text. Adding color might be fine.

For `.badge.bg-warning`:
- We can override the background with a new warning color, e.g., a softer amber: `background: linear-gradient(135deg, #f6ad55, #dd6b20);` but that changes background. Also add `box-shadow: 0 2px 4px rgba(221, 107, 32, 0.15);` and `border-radius: 2px;` But the badge might have border-radius already from Bootstrap. Overriding with 2px matches tight-rhythm small border-radius. Also maybe `font-size` stays 0.85rem.

But careful: Bootstrap badge .bg-warning sets background-color. We can override with a gradient. That's allowed.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- Add `border-radius: 4px;` (small)
- Add `box-shadow: 0 1px 2px rgba(0,0,0,0.04);` subtle
- Add `background: #ffffff;` or `rgba(255,255,255,0.8)`? But these elements may already have background. Adding background could change appearance. We can use a transparent background? Better to keep as is? But adding a background could be okay if we choose a subtle background to fit palette. However, the contact card might already have a background from elsewhere. Overriding might be undesired. But we don't have full context. To be safe, we can add only border-radius and box-shadow, and maybe transition.

Also add `transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;` but we cannot change transform? Actually transform is layout? Transform changes visual and can affect layout? But transform is not listed as forbidden. However, adding a transform could be okay if we only use on hover? No hover selector here. Adding transition alone is fine.

But we could add a subtle background gradient to these cards to align with palette, but without knowing their current background, it might be okay. Let's choose a light surface color like `#f8fafc`? But that would override existing white background if any, making it gray. Not necessarily good.

Given the task asks to "refresh the visual identity WITHOUT changing layout structure or class names." It's okay to add decorative properties. But we should be cautious.

Let's think of the palette. "symmetric-grid" balanced harmonious palette. Could choose a cool neutral with a primary accent. But we don't have the rest of the CSS. We can use CSS variables? We can define new variables within the media query? But that might be overkill. We can just use hex values.

Maybe the best approach: Since the original CSS is only about spacing and typography, the "visual refresh" can be minimal but still present. We can change the padding to a more compact value (tight-rhythm) and add border-radius/shadow. But padding must be within ±20%. We don't know --space-md. If --space-md is 24px, then 20% is 4.8px, value range 19.2-28.8. Tight-rhythm wants 8-16px. That would be a bigger change, not allowed. So better to keep padding as is.

But we can introduce `--space-md`? No.

Let's parse the original more: `padding: var(--space-md) !important;` So the custom property is defined elsewhere. We are not to modify custom properties? We can change custom property values if we define them? But the custom property is likely defined in :root or a base style. We could add a new definition inside the media query? That would be a new selector? But we can't add new selectors? The instruction says "Only rewrite the CSS" — we can output the same selectors and possibly new declarations. But adding a `:root` block isn't part of original selectors. The instruction says preserve all selectors exactly. It doesn't say we can't add new selectors? Actually "Preserving ALL selectors and layout exactly" implies selectors must be exactly the same; we shouldn't add new selectors. So we cannot add :root. We can only modify declarations within existing selectors.

Thus we cannot change the value of --space-md because that's not in scope.

So the only actual layout property is padding with var(--space-md). We keep it.

What color values are there? None. So we can add colors to the selected elements. Let's create a fresh look.

Given the small media query, perhaps we can add:

- For `.contact-channels-section article` and `.contact-quick-section .contact-card`: add `background: rgba(255,255,255,0.8); backdrop-filter: blur(4px);`? That adds a frosted glass effect. But backdrop-filter can change visuals. It's allowed. But might be too much.

The effect variant "tight-rhythm" says "Subtle shadows or none", "Compact spacing", "Small border-radius". Let's apply: border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); maybe.

For `.badge.bg-warning`, add `border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.1);` and maybe background color.

For the hero col, maybe add `color: #1a202c;` but it might not be visible because text inside has its own colors. Could add `text-shadow`? Not advisable.

Perhaps we should not force additions where they could be semantically wrong. The task says "Only change colors, shadows, radius, transitions, gradients." It implies changing existing occurrences of those properties, not necessarily adding new ones. But if there are none, we can still add? The target style is aggressive, but this is conservative mode. So we should be conservative: only modify visual properties that already exist? But they don't exist. However, the instructions: "✅ YOU MUST CHANGE (visual identity only): ..." lists categories. It doesn't say "only where present". It says "Refresh this CSS visually." So adding new visual properties is acceptable as long as layout unaffected.

Let's craft a coherent rewrite.

We'll keep the media query. For each rule, we'll add a few visual properties.

Rule 1: .app-hero-section .row .col-lg-7 { text-align: center; }
We can add `color: #243b53;` but that may be too arbitrary. Or add nothing? To satisfy "change colors", maybe we can add a subtle text-shadow? But text-shadow changes visual. Let's add `text-shadow: 0 1px 2px rgba(255,255,255,0.3);`? That would be a highlight shadow, but might look odd. Better not.

Actually, text-align is not visual identity; it's layout. The only visual property that could be added to a column is maybe `color`. But the column contains text and likely it's already set. Adding color to the column will inherit to all text unless overridden. That could be a proper way to set a base text color for the hero section on mobile. The palette "symmetric-grid" might have a dark slate text: `color: #1e293b;`. Let's use a balanced slate.

Rule 2: .badge.bg-warning { font-size: 0.85rem; }
We can add:
  background: linear-gradient(135deg, #f59e0b, #d97706); (amber gradient)
  border: 1px solid rgba(217,119,6,0.25);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(217,119,6,0.2);
  color: #fff? But Bootstrap warning badge text is dark, not white. If we change background to darker amber, we need white text for contrast. But if the original badge text is dark, changing to white might make it better. Let's choose a softer palette: background #fbbf24, color #78350f (dark amber). That preserves contrast. But we can set `color: #78350f;` which is a color change. However, the original badge.bg-warning in Bootstrap uses `color: #856404`? Actually bg-warning often uses white text? Let's check Bootstrap 5: .bg-warning { background-color: #ffc107 !important; } and text color inherits. So we can override with our own. Use `background: linear-gradient(135deg, #ffd666, #f5b942);` and `color: #5a3e00;`. That's nice.

Rule 3: .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }
We can add:
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.02);
This creates a subtle card look. But if these elements already have a background, this overrides to white. That might be okay.

Also add `transition: box-shadow 0.25s ease, border-color 0.25s ease;` but no hover selector. We could add a transition for future hover but not necessary.

We must ensure style="padding: var(--space-md) !important" is kept exactly? The !important is part of the value. Keep it.

We can add declarations before or after. Order matters? Not much. We'll keep original declaration first? Or add after. Since we are rewriting, we can order as: original layout property first, then visual props. That's fine.

Let's verify constraints:

- Selectors exactly:
  `@media (max-width: 575.98px) { .app-hero-section .row .col-lg-7 { ... } .app-hero-section .badge.bg-warning { ... } .contact-channels-section article, .contact-quick-section .contact-card { ... } }`
Need to preserve the exact selector list for the last group, including comma and spaces.

- Layout properties:
  `text-align: center;` unchanged.
  `font-size: 0.85rem;` unchanged.
  `padding: var(--space-md) !important;` unchanged.

- Media query breakpoints unchanged.

- Borders: We add border declarations. The instruction says can change border-color and border-style, not border-width. We can add `border: 1px solid #eef2f6;` which sets border-width, border-style, border-color. Border-width is normally not allowed to change? The instruction says "border-color and border-style (NOT border-width)". That means we are allowed to change border-color and border-style, but not border-width. But adding a new border with width 1px is creating a border that didn't exist. That violates "border-width not". So we should avoid using `border: 1px solid ...`. Instead, if we need a border, we could use `outline`? But outline is allowed? Outline-color yes, outline style. But outline adds visual border without layout. We could use `box-shadow` to simulate border: `box-shadow: 0 0 0 1px #eef2f6 inset;` or `0 0 0 1px #eef2f6;` That uses box-shadow, allowed. Great. So we can simulate a 1px border with box-shadow. This also avoids changing border-width.

For badge, we might want a border? Not necessary. We can use box-shadow.

For contact cards, use box-shadow: `0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(255,255,255,0.5) inset`? Actually to create a border, use `0 0 0 1px #eef2f6;` combined with drop shadow. That is allowed as box-shadow.

- Border-radius: allowed. Add `border-radius: 2px` or 4px. Since tight-rhythm says small radius 2-6px. Use 4px for cards, 2px for badge.

- background, gradient: allowed.

- transitions: allowed.

- text-shadow: allowed. Could add to hero col? Maybe not.

- filter/backdrop-filter: allowed. We