/* ============================================================
   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 has given me a CSS file snippet that is a media query with three rules. Let me analyze it:

1. `.app-hero-section .row .col-lg-7` - text-align: center (this is layout/text-align, which is locked - cannot change text-align)
2. `.app-hero-section .badge.bg-warning` - font-size (locked - cannot change font-size)
3. `.contact-channels-section article, .contact-quick-section .contact-card` - padding (can adjust within ±20%)

The target style is editorial-magazine with gradient-rich effects. The palette: cream/beige backgrounds (#f5f1e8), ink black (#1a1a1a), accent deep red #c44536 or olive #6b705c.

However, this is a small media query. I need to be careful - the rules only contain layout properties (text-align, font-size, padding) which are LOCKED. There are no colors, shadows, radius, transitions, gradients in the original snippet.

Since the instructions say to keep all selectors and layout exactly, and only change visual properties, but there are no visual properties in the snippet, I should add visual properties that don't break the layout? Wait, but the instruction is to refresh the CSS. But adding new declarations to existing rules might change the layout? Only if I add properties that affect layout.

Actually, let me re-read the original CSS. It only contains:
- text-align: center (layout locked)
- font-size: 0.85rem (typography locked)
- padding: var(--space-md) !important (can change within ±20%)

Hmm, there's very little to work with. The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

Since there are no colors/shadows/radius/transitions/gradients in the original, I cannot change what doesn't exist. But I could ADD new visual properties to the existing rules. However, adding properties like background, border-radius etc. to these elements might be a visual change that doesn't affect layout if done carefully.

Wait, but the constraint says "NEVER CHANGE" the layout properties. If I add, say, border-radius or background, would that break the HTML layout? Border-radius doesn't affect layout. Background doesn't affect layout. Box-shadow doesn't affect layout. So it's safe to add them.

But is that in the spirit of the task? The task says "Refresh the visual identity WITHOUT changing layout structure or class names." So adding decorative properties is allowed and encouraged.

Let me think about what makes sense:

For `.app-hero-section .badge.bg-warning` - it's a warning badge. I could add a gradient background, border-radius, box-shadow, text-shadow, transition. But wait - the badge already has classes `badge bg-warning`. Bootstrap's `bg-warning` sets background-color: #ffc107 (warning yellow). If I add a gradient background, it would override the bg-warning color. That's a visual identity change that's allowed.

Actually, hold on. Let me reconsider. The class is `.badge.bg-warning`. The `bg-warning` class is part of the HTML. I can override the background with a gradient using `background: linear-gradient(...)` since in CSS, `background` shorthand overrides `background-color`. But the specificity: `.app-hero-section .badge.bg-warning` has higher specificity than Bootstrap's `.bg-warning`, so it wins.

However, adding a new background to the badge might be a visual improvement. But the padding rule for `.contact-channels-section article, .contact-quick-section .contact-card` - I can adjust padding within ±20%. The original padding is `var(--space-md)`. I don't know what `--space-md` is, but I can keep it or adjust slightly. Actually since I don't know the base value, changing the var reference could be risky. I could use `padding: var(--space-md) !important;` still or use a calc? Better to keep the same padding but perhaps it's too risky to change an unknown variable. Actually, I could change it to a slightly different value, but the constraint says "keep similar values, ±20% maximum". Since `--space-md` is unknown, I shouldn't change it. Keep `var(--space-md)`.

Hmm, but then what visual change can I make to the contact cards? I could add border-radius, box-shadow, gradient background, transition. That's a visual identity refresh.

Wait, but there's a mismatch. The target style says "editorial-magazine" with "Aggressive only" layout patterns like asymmetric grids, generous padding, large gaps. But this is a conservative mode with HTML fixed. And the snippet is only a media query for small screens. So the layout patterns mentioned in "Aggressive" are not applicable — this is conservative mode, and I must not change layout.

So my task is to add/edit only visual properties within these existing rules.

Let me craft a result:

```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;
        background: linear-gradient(135deg, #c44536 0%, #e07b5f 50%, #c44536 100%);
        border-radius: 999px;
        box-shadow: 0 4px 14px rgba(196, 69, 54, 0.25);
        transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #faf7f0 0%, #f5f1e8 100%);
        border: 1px solid rgba(26, 26, 26, 0.08);
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(26, 26, 26, 0.06);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

Wait, but I added `border: 1px solid ...` — border-width is technically a layout-affecting property? The instructions say "border-color and border-style (NOT border-width)" can change. Adding a new border is adding border-width. But I could use `outline` instead? Or use `box-shadow` to simulate a border. Actually, adding a border would add 2px total to the element dimensions (with box-sizing possibly). That could shift layout. To be safe, I should NOT add borders to elements that don't have them.

Hmm, the contact cards already might have borders from existing CSS (not shown in this snippet). Since this is only a snippet, the full CSS may define the card styles elsewhere. The media query only adjusts padding. So if I add `border: 1px solid`, I might override a border that exists, or add a border that doesn't exist, potentially changing layout by 2px.

Actually, the constraint says "border-color and border-style (NOT border-width)" — implying I can change border-width only if it already exists? No, it says NEVER change border-width. Adding a border when none exists is creating a new border-width. To be safe, I should not add borders. Instead, use box-shadow with a spread or a pseudo-element? But I can't add pseudo-elements because that changes selectors? Actually, adding ::before/::after to the selector list would change the selector, which is forbidden. And those pseudo-elements might already exist in the full stylesheet.

To stay safe:
- No new borders.
- Border-radius is fine (doesn't affect layout).
- Box-shadow is fine (doesn't affect layout).
- Background/gradient is fine (doesn't affect layout).
- Transition is fine.
- text-align, font-size, padding stay unchanged.

Let me reconsider the badge. The `.badge.bg-warning` is a Bootstrap badge. Adding `background: linear-gradient(...)` overrides the `bg-warning` background-color. Border-radius: Bootstrap badges already have `border-radius: 0.375rem` (or similar). I can change it to a pill `border-radius: 999px` — visual change, no layout impact.

But wait — if I change the badge background to deep red, that might conflict with the "warning" semantic color. But the task is a visual identity refresh, and the accent color palette is deep red or olive. Using deep red for a badge is fine visually. Alternatively, use olive. Let's use deep red #c44536 as the accent.

Actually, for editorial-magazine with gradient-rich, let me design:

Palette:
- Cream/beige background: #f5f1e8
- Ink black: #1a1a1a
- Accent deep red: #c44536
- Maybe secondary olive: #6b705c

Gradient-rich variant:
- Linear gradients on most backgrounds
- Multiple stops
- Smooth long transitions (0.4-0.6s cubic-bezier)

Let me create:

For `.app-hero-section .badge.bg-warning`:
```css
background: linear-gradient(120deg, #c44536 0%, #d96f5a 45%, #b03325 100%);
border-radius: 999px;
box-shadow: 0 6px 18px rgba(196, 69, 54, 0.28), 0 2px 6px rgba(26, 26, 26, 0.1);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
```
Wait, transform is a layout property? transform doesn't affect layout, but it's not in the "can change" list either. The list says "transition timing, easing, duration" can change, but transition-property? It says transition timing, easing, duration — meaning I can change the timing/duration of transitions, and presumably the property too? Hmm, "transition timing, easing, duration" — I think adding a transition property value like `transition: box-shadow 0.5s` is within scope. Let me keep transitions limited to colors/shadows/opacity/filter to be safe.

For the hero badge, adding `transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1)` — fine.

For the contact cards:
```css
background: linear-gradient(145deg, #faf7f0 0%, #f5f1e8 60%, #efe9db 100%);
border-radius: 18px;
box-shadow: 0 12px 32px rgba(26, 26, 26, 0.07), 0 2px 8px rgba(26, 26, 26, 0.05);
transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
```

But wait — if the contact cards already have a background color from existing CSS, adding a gradient background will override it. Fine. If they already have a border-radius, I'm changing it. Fine.

But hold on — `.contact-channels-section article` — if this is an article element that contains a card layout, adding a background might be behind content. That's fine visually. But if the article is meant to be transparent within a colored section, adding a background could change the look but that's the point of a visual refresh.

Now, the first rule `.app-hero-section .row .col-lg-7` only has text-align: center. Text-align is locked, so I can't change it. Should I add visual properties to it? It's a column container. Adding a background to a column could be visually interesting but might create unwanted blocks. Since the target is gradient-rich, maybe a subtle gradient? But that could be risky if the column has text directly on it. Actually it just centers content. I'd rather not add background to the column because it's a layout container. I'll leave it as-is.

Hmm, but then the output would be "only" the badge and contact cards changed. That's acceptable — the media query doesn't have much to work with.

Actually, maybe I should add color to the hero badge text? The `.badge.bg-warning` in Bootstrap has dark text (color: #000). I could set `color: #f5f1e8` (cream) to make it editorial. That changes color, which is allowed.

Let me also add a subtle text-shadow? For the badge, a subtle text-shadow: `0 1px 2px rgba(26, 26, 26, 0.2)`.

Also, maybe add a `caret-color` or `accent-color`? Not relevant here.

Let me also reconsider the padding change. The rule: "padding, margin (keep similar values, ±20% maximum)". The original padding is `var(--space-md)`. If I change it, I need to ensure it stays within ±20%. Since `--space-md` is presumably a CSS custom property defined elsewhere, I could change it to a slightly different value but I don't know the base. Safer to keep `var(--space-md)`. But could I add a second padding value? No.

Hmm, the instruction says only change visual properties. Padding is not a visual property in the allowed list (colors, shadows, radius, transitions, gradients). But the "NEVER CHANGE" list says padding/margin keep similar values. This implies I could change them within ±20%. But since the value is a var reference, I can't compute 20%. I'll keep it unchanged to be safe.

Let me now think about whether adding `!important` stays. The original has `!important` on the padding. I must keep `!important`? It's part of the declaration, not a selector. The instruction says keep layout exactly. The `!important` affects the cascade, not layout directly. I should keep it.

Also, the second rule: `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — font-size is locked. I must not change it. Keep it.

Now, about the editorial-magazine style: "Asymmetric grids, generous outer padding, large gaps, wide max-width" — these are all layout properties I cannot change in conservative mode. So I ignore those. Use the color palette and gradient-rich effects.

Let me also consider adding hover states? No — I can't add new selectors (pseudo-classes like :hover would require changing the selector list which is forbidden). So no hover.

Wait, the instructions say "Pseudo-classes (:hover, :focus, ::before, ::after)" are in the "NEVER CHANGE" category, meaning I keep the selectors as-is. If the original doesn't have `:hover`, I can't add it because that would change the selector. So no hover styles.

What about the transition? Transitions without hover are pointless, but they can be used for focus states or for when the browser applies changes. Still, the task says "Smooth long transitions (0.4-0.6s cubic-bezier)" so I'll add them to make the visual identity consistent; even if not triggered by hover in the snippet, the full stylesheet might have hover rules elsewhere. Adding a transition to the base element is safe.

Let me finalize the 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;
        color: #f5f1e8;
        background: linear-gradient(120deg, #c44536 0%, #d96f5a 40%, #a83a2b 80%, #c44536 100%);
        border-radius: 999px;
        box-shadow: 0 6px 18px rgba(196, 69, 54, 0.3), 0 2px 6px rgba(26, 26, 26, 0.12);
        text-shadow: 0 1px 2px rgba(26, 26, 26, 0.25);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(145deg, #faf7f0 0%, #f5f1e8 45%, #ece5d8 100%);
        border-radius: 18px;
        box-shadow: 0 16px 40px rgba(26, 26, 26, 0.08), 0 4px 12px rgba(26, 26, 26, 0.05);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

Wait, I added `transform` to the transition property list. Transitioning transform doesn't change layout. But is "transform" allowed? The allowed list: "transition timing, easing, duration". Adding transform to transition-property is fine. But do I want to imply a transform change? There's no hover state to trigger it. It's harmless. But to be conservative, maybe I shouldn't include transform. Let me just use box-shadow.

Also, the `background` transition — transitioning background gradients doesn't animate smoothly (gradients can't transition), but background-color can. Since I'm using gradients, transitioning `background` may cause a jump. Better to transition only box-shadow. But the task says smooth long