/* ============================================================
   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 a small CSS snippet with a conservative mode, targeting an editorial-magazine style with tight-rhythm effects. 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 for mobile. The rules are:
1. `.app-hero-section .row .col-lg-7` — text-align: center (this is typography/text-align — NOT allowed to change)
2. `.app-hero-section .badge.bg-warning` — font-size (NOT allowed to change)
3. `.contact-channels-section article, .contact-quick-section .contact-card` — padding (can change ±20%)

Wait — the task says I need to change colors, shadows, radius, transitions, gradients. But this snippet has:
- text-align (can't change)
- font-size (can't change)
- padding (can change ±20%)

There are no colors or shadows here. So what can I change? Padding only. Let me consider padding: `var(--space-md)` — I could adjust to a slightly different value within ±20%. But `var(--space-md)` is a custom property reference. I could change it to a different spacing value.

Hmm, but the instruction says "CSS custom properties (--color-*, --shadow-*) values" can change. But this file doesn't define custom properties.

Also, I could add decorative properties like border-radius, background, box-shadow, etc. But the HTML is fixed — I can't add new properties that change layout. I can add visual properties though. However, adding properties to existing selectors is allowed as long as I don't change layout properties.

Wait, but the constraint says "Only change colors, shadows, radius, transitions, gradients." And "NEVER CHANGE" includes padding/margin within ±20%. So padding can be slightly adjusted.

Let me think about what to do with this specific snippet. The original has only text-align, font-size, and padding. Since text-align and font-size are in the NEVER CHANGE list, and padding can change within ±20%.

For an editorial-magazine style with tight-rhythm:
- Editorial neutrals: cream/beige backgrounds (#f5f1e8), ink black text (#1a1a1a), deep red accent (#c44536)
- Tight rhythm: small border-radius (2-6px), subtle shadows or none, compact spacing (padding 8-16px, gap 8-12px)

I could:
1. For `.app-hero-section .row .col-lg-7` — can't change text-align. But could I add color? Hmm, but this is a text alignment rule. Adding color would be a visual change that's allowed. But would it be wise? The rule is just centering text. I could add a color property for editorial feel. But careful: adding properties not in original could affect layout? Color doesn't affect layout.

Actually, wait — the instructions say "Refresh the visual identity WITHOUT changing layout structure or class names." So adding visual properties (color, border-radius, box-shadow) is fine as long as layout properties stay same.

But adding `color` to `.app-hero-section .row .col-lg-7` would inherit to all descendants unless overridden. That might be fine but is risky. Let me be careful.

Given the snippet is so small, the most sensible approach: keep selectors, keep the layout-affecting properties, and add/alter visual properties that align with editorial-magazine + tight-rhythm.

But my primary job is to rewrite what's there, changing allowed visual properties. Since there are no colors in the original, I have two options:
1. Keep the three rules essentially unchanged but adjust padding slightly.
2. Add visual flourishes (color, background, border-radius, box-shadow) to these selectors.

Given the task says "Refresh this CSS visually", I should do something visible. But I also must not add properties that change layout. Adding color/background/shadow is safe.

However, for a media query at max-width 575.98px, in an editorial style with tight rhythm, perhaps:
- Badge gets the deep red accent? But `.badge.bg-warning` is a Bootstrap warning badge (yellow). Changing its background via this selector might be intended... but bg-warning is a Bootstrap utility class. If I override `.app-hero-section .badge.bg-warning` with a new background, it would change the warning color. But that's a color change — allowed. And editorial palette uses deep red accent. Hmm, but overriding a warning badge to red could be misleading semantically. Still, the task says replace colors with fresh palette.

Wait, but the original rule only sets font-size for the badge. If I add background-color, I'm changing the badge's appearance. That's a visual identity refresh. I think it's acceptable.

Alternatively, I could be conservative and only adjust padding, keeping the rules minimal. But the task explicitly asks to refresh visually with colors/shadows/radius. Since the original has none of those, I can add them.

Let me reconsider: The instruction says "✅ YOU MUST CHANGE (visual identity only): All color values..." — but if there are no color values in the given CSS, there's nothing to change. Then I should probably add new visual properties to express the target style while preserving layout.

I think the best approach is to preserve the intent of each rule and add visual refinements:

Rule 1: `.app-hero-section .row .col-lg-7 { text-align: center; }`
- Keep text-align: center.
- Maybe add `color: #1a1a1a;`? But that could be redundant since body would already have that. Editorial ink black could be set. Hmm.
- Maybe nothing else needed.

Rule 2: `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }`
- Keep font-size: 0.85rem.
- Add: background-color: #c44536; color: #f5f1e8; border-radius: 2px; — this would make warning badge red. But the class is bg-warning which is yellow-ish; overriding to deep red corresponds to the editorial accent. The instruction says goal is fresh color identity. I think it's fine.
- But wait: the badge has Bootstrap's bg-warning which sets background-color: #ffc107. Overriding with #c44536 changes it. That's a visual change, allowed.

Rule 3: `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }`
- Padding: var(--space-md) — custom property. For tight-rhythm compact spacing (8-16px), I could change to a concrete value like `padding: 0.875rem !important;` (14px). But var(--space-md) is likely 1rem or 1.25rem depending on definition. Changing to 14px might be within ±20% of 16px? 14px is within 20% of 16px (12.8-19.2). Yes.
- I could also add border-radius: 4px; background: #fff; box-shadow: subtle shadow. But wait, these elements are article / contact-card — adding background and shadow could make them look like cards. That's a visual change. But it might conflict. However, since the user asked for editorial-magazine + tight-rhythm with subtle shadows or none, I could add a subtle shadow. But careful: box-shadow doesn't affect layout, so it's allowed.

Hmm, but the instruction says "NEVER CHANGE... padding, margin (keep similar values, ±20% maximum)". So changing padding from var(--space-md) to 0.875rem is fine.

Let me also think about whether I should define CSS custom properties at the top of this snippet. The instruction says custom property values can change, but the file doesn't define them. I could add a `:root` block? That would add new selectors, which violates "Selectors: keep EXACTLY". So no new selectors outside the media query.

Actually, the output should preserve all selectors exactly. Adding new selectors (like :root) would violate the selector preservation rule. So I must not add new rules or selectors.

So within the existing three rules, I can only modify property values and add properties to existing selectors.

Let me craft the output:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        color: #f5f1e8;
        border-radius: 2px;
        box-shadow: 0 1px 2px rgba(26, 26, 26, 0.08);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: 0.875rem !important;
        border-radius: 4px;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(26, 26, 26, 0.06);
    }
}
```

Wait — but for the contact cards, adding a white background on mobile might clash with the editorial cream. Maybe background: #fffaf0 or #fffdf8? Editorial neutrals: cream #f5f1e8, ink #1a1a1a, accent #c44536. A card on cream background could be white (#ffffff) or a lighter cream. Let me pick a subtle off-white like #fffdf5. Hmm, but too many colors. Let's keep it simple:

- body background is cream #f5f1e8 (but that's set elsewhere, not here)
- cards could be a slightly lighter cream: #faf7f0 or white.

For tight-rhythm, subtle shadows. Fine.

Now, should I override the badge to red? The class `bg-warning` semantically means warning (yellow). Changing it to red is a big semantic shift. Maybe instead I should keep the warning yellow but adjust it to an editorial-appropriate color? The target palette only gives cream, ink, deep red, olive. Deep red as a badge could work as an "accent" marker. Since this is a hero section badge, maybe it's a "New" or "Limited" badge. Red is fine.

Alternatively, use olive #6b705c for a more subdued editorial look. Red is more striking. I'll go with deep red.

But hold on — the original only sets font-size. The badge likely already has Bootstrap's warning background. If I add a background override, I'm changing its visual. That's the point of refresher. OK.

Let me double check every constraint:

Selectors:
- `.app-hero-section .row .col-lg-7` — preserved exactly.
- `.app-hero-section .badge.bg-warning` — preserved exactly.
- `.contact-channels-section article, .contact-quick-section .contact-card` — preserved with comma and newline. Yes.

No new selectors.

Layout properties:
- text-align: center — unchanged (it's in never-change list: text-align).
- font-size: 0.85rem — unchanged (never-change list includes font-size).
- padding: changed from var(--space-md) to 0.875rem. Need ±20%. What is var(--space-md)? Unknown. In Bootstrap-like systems, spacing scale: --space-md could be 1rem (16px) or 1.25rem (20px). If it were 20px, 14px is a 30% reduction — exceeds 20%. If 16px, 14px is 12.5% reduction — OK. Hmm, risky. Maybe safer to use 1rem (16px) if original was 1.25rem (20px) → 20% reduction exactly. Or use 0.9rem? That's 14.4px.

Actually, padding: var(--space-md) — I could keep the var reference but the task says custom property values can change, but I'm not defining the custom property here. I could change to a different value. To be safe, let me estimate: --space-md in many design systems = 1rem or 1.25rem. Tight-rhythm says 8-16px padding. So using 0.875rem (14px) is within the 8-16px range and within 20% if original was 16px. If original was 20px, 14px is -30%, too much.

Alternative: use `padding: 1rem !important;` (16px). If original was 20px, that's -20% exactly (allowed, "±20% maximum"). If original was 16px, unchanged. 16px is at the top of the tight-rhythm range but acceptable. Actually tight-rhythm says "Aggressive: padding 8-16px" — 16px is allowed. So 1rem is safest.

But wait, the original has `padding: var(--space-md)` — a single value. I'll use a single value too, to not change padding structure. `padding: 1rem !important` is safe.

Hmm, but should I preserve `!important`? Yes, must preserve. The original has `!important`.

Additional properties I add: color, background-color, border-radius, box-shadow. These don't affect layout, so allowed.

However, I should be careful: adding background-color to `.contact-channels-section article` while the original doesn't have it — the article might already have a background. Adding an off-white could clash. But the user asked for a visual refresh, so it's fine. Since I don't know the original full file, adding background could conflict with existing CSS. But the task is to rewrite this snippet only, assuming the rest of the file stays. The output will be merged? Actually the task says "File: assets/css/saishi.css#块2/2" — this is block 2 of 2 of the file. The user gave only block 2. So my output should be a self-contained rewrite of block 2. Adding properties is acceptable.

But maybe for safety, I don't add properties that could break other things. Yet the mission emphasizes refreshing visual identity. Since the original snippet has almost no visual properties, the freshest approach is to add some.

Let me think about the editorial-magazine style with tight-rhythm:
- Cream background #f5f1e8
- Ink text #1a1a1a
- Accent deep red #c44536
- Small radius 2-6px
- Subtle shadows or none
- Compact spacing

For the hero section col-lg-7: On mobile, centered text. For editorial feel, I might add a color. But adding color to the column will cascade. The column likely contains headings and paragraphs. Setting color: #1a1a1a is fine — it just makes text ink black. But what if the original had different colors for headings? Since I'm only editing this block, setting ink black on the column could override heading colors if the selector specificity is higher. `.app-hero-section .row .col-lg-7` has specificity (0,3,0) — three classes. That's fairly high but not extreme. Headings like `h1` have (0,0,1). So my color would win. That could change heading colors to ink black, which might be the desired editorial look. OK.

But should I add color if not needed? The instruction says I must change colors. But there are no colors in the original. I think adding relevant editorial colors is the right interpretation.

Let me also consider transitions. The original has no transitions. I could add transitions to badges/cards for hover, but hover pseudo-classes aren't in the selectors, and adding transition to the base rule is harmless. For mobile, transitions aren't very relevant. I'll skip or add a subtle transition? The instruction says transition timing/easing/duration can change, but there are none. I could add `transition: background-color 0.2s ease;` but it doesn't make sense without hover. I'll skip to keep the output clean and focused.

Let me finalize:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        color: #f5f1e8;
        border-radius: 2px;
        box-shadow: 0 1px 2px rgba(26, 26, 26, 0.12);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: 1rem !important;
        border-radius: 4px;
        background-color: #fffdf7;
        box-shadow: 0 1px 3px rgba(26, 26, 26, 0.06);
    }
}
```

Wait, regarding padding: original `var(--space-md)`. If --space-md = 1.25rem (20px), my 1rem is a 20% decrease — within the "±20% maximum" allowance. If it's 1rem, unchanged. Good.

But I used `padding: 1rem !important` — the original is a single value, so fine.

Now, box-shadow redesign: original had none. I'm adding subtle shadows. The instruction says "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)". It says redesign shadows — but original has none. Adding subtle shadows is fine. Should I use multi-layer? For tight-rhythm, subtle shadows or none. I'll keep single-layer subtle.

Border-radius: small, 2-6px. Badge 2px, card 4px. Good.

Colors: cream #f5