/* ============================================================
   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 the CSS in the file `assets/css/saishi.css` section 2/2, in conservative mode. The target style is "sidebar-classic" with a "gradient-rich" effect variant.

Let me look at 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 small screens. Let me analyze what I can change:

1. `.app-hero-section .row .col-lg-7` — has `text-align: center;` — `text-align` is in the "never change" typography list (text-align, vertical-align). So I can't change it.

2. `.app-hero-section .badge.bg-warning` — has `font-size: 0.85rem;` — font-size is in the "never change" list. Can't change.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — has `padding: var(--space-md) !important;` — padding can change within ±20%. The `--space-md` variable is a custom property. I could change the value of `--space-md` but only if it's defined in this file. It's not defined here — it's defined elsewhere. Hmm.

Wait, the task says: "CSS custom properties (--color-*, --shadow-*) values" can change. So only color and shadow custom properties. `--space-md` is a spacing custom property, which relates to layout/margin/padding. Since I'm only shown this snippet, I should be careful.

The rules say:
- padding, margin (keep similar values, ±20% maximum)

So `var(--space-md)` — I could change this to a different value or keep it. But `--space-md` is likely defined elsewhere (a design token). Changing the value here might not be safe. But the instructions say padding can change by ±20%. `var(--space-md)` is a variable reference; I could swap it to a literal value that's within 20% of what `--space-md` typically is. But I don't know what `--space-md` resolves to.

This is a small media query with almost nothing to change visually. The instructions say I must change visual properties, but the rules forbid changing text-align, font-size, and the only other declaration is padding with a variable.

Hmm. Let me think about what I'm allowed to do:

1. `text-align: center` — forbidden to change (in typography list).
2. `font-size: 0.85rem` — forbidden to change.
3. `padding: var(--space-md) !important` — padding can change within ±20%.

Since this is a media query with no colors, shadows, radius, transitions, etc., there's almost nothing to refresh. However, I can:

- Change the padding value slightly (±20%). If `--space-md` is typically 1rem or 1.5rem, I could adjust. But it's a variable reference. Maybe I can keep the variable but that doesn't change anything visually.

Wait — could I add new declarations? The task says "Only change colors, shadows, radius, transitions, gradients." Adding new declarations might alter layout. But adding things like `border-radius`, `background`, `box-shadow` to elements could be considered visual-only changes. But adding background to these elements might change appearance but not layout. 

But the instruction is: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

The safest interpretation: I can add visual properties (colors, shadows, border-radius, gradients) to the existing rules, and adjust the padding value slightly. But I must be careful not to add layout properties.

Hmm, but adding `background` or `box-shadow` to `.app-hero-section .row .col-lg-7` would change visual appearance significantly. Is that appropriate? The target style says "sidebar-classic" which is a layout pattern, but this snippet doesn't have any layout. The effect variant "gradient-rich" says to add linear/radial gradients on most backgrounds.

Given the constraints, maybe the expected output is just a slightly modified version of this CSS with some visual polish added. But I need to be very careful:

- "display, position, grid-template-*, flex-direction unchanged" — no display/position here.
- "width, height, padding, margin within ±20% of input" — padding can vary slightly.
- "font-family, font-size, font-weight, line-height unchanged" — font-size unchanged.

Let me consider the values:

`padding: var(--space-md) !important` — If I keep it as `var(--space-md)`, that's unchanged. But the rule says I need to change visual properties. Padding is borderline — it's in the "keep similar" category, so changing it by a small amount is allowed.

Maybe I can change `var(--space-md)` to a specific value like `1.25rem` or keep the variable. Since I don't know the value, maybe it's safer to keep the variable reference but... the instruction asks to refresh. Hmm.

Actually, let me reconsider the task. The user says "File: assets/css/saishi.css#块2/2" and gives a snippet. Perhaps this is part of a larger file, and the "2/2" means it's just this media query block. The bot is supposed to rewrite this portion with a fresh visual identity.

Given the extremely limited scope, what visual changes can I make?

1. `.app-hero-section .badge.bg-warning` — this is a warning badge. The `.bg-warning` Bootstrap class gives it a yellow background. In this media query, it only sets font-size. I could add color/gradient/box-shadow/border-radius to it. But that would change appearance on mobile only. That seems fine for a visual refresh.

2. `.contact-channels-section article, .contact-quick-section .contact-card` — these are cards. I could add border-radius, box-shadow, gradient background, transitions. But adding background to cards would change their look — that's the point of the visual refresh.

However, adding background colors or gradients runs the risk of conflicting with existing styles elsewhere (since this is just a media query override). But that's the nature of CSS — later rules override earlier ones. The instruction says to refresh the visual identity, so adding decorative properties is expected.

But wait — should I add properties that don't exist in the original? The instruction: "Only change colors, shadows, radius, transitions, gradients." This implies I can modify those properties where they exist and perhaps add them for the gradient-rich effect. The self-check says "Colors throughout the file replaced with fresh palette?" — for this snippet, there are no colors. So maybe I need to add colors.

Hmm, this is tricky. Let me think about what a reasonable AI would do here.

Option A: Minimal change — keep the media query, adjust padding slightly, add some gradient/radius to cards.

Option B: Very conservative — just output the same CSS because there's nothing to change.

Given the user explicitly requests a refresh, Option A seems right. Let me craft it carefully.

Let me think about the target style: "sidebar-classic" with darker sidebar (#252e3a) and main lighter, plus a functional accent. The palette influences my choices:

- Dark sidebar color: #252e3a
- Main lighter: maybe #f8f9fc or similar
- Accent: a functional color like #4f8cff or #5b6ee1 or orange for warning.

The badge is `.bg-warning` — warning is typically yellow. If I add a gradient to it, maybe a warm amber gradient.

The cards: I can add a subtle gradient background, border-radius, box-shadow.

But careful: adding `background` to `.contact-channels-section article` might override a background set elsewhere with a class-based style. But since this is in a media query with !important on padding, the specificity is high. Adding background without !important would have the same specificity as the existing selector. Since this media query appears later in the file (presumably), it would win. That's fine.

However, I need to be careful about the `!important` — I can keep it on padding.

Let me draft:

```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, #ffd166, #f4a261);
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(244, 162, 97, 0.35);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 16px;
        background: linear-gradient(145deg, #ffffff, #f0f2f7);
        box-shadow: 0 8px 24px rgba(37, 46, 58, 0.08);
        transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

Wait — I changed `padding: var(--space-md)` — I kept it. That's fine, within ±20%.

Is adding `background` to `.app-hero-section .badge.bg-warning` safe? The `.bg-warning` Bootstrap class sets `background-color: #ffc107` (or via CSS var). By adding `background: linear-gradient(...)`, I override the background-color. That's a visual refresh.

Could this break anything? The badge text color is likely dark (Bootstrap `.badge` uses `color: #212529` when using `.bg-warning` via `--bs-badge-color`). A gradient of amber tones keeps contrast fine.

Now, the rule: "ALL color values: background, color, border-color, fill, stroke, outline-color" must change. There were none in the original, but I'm adding them. Good.

Also, the self-check says "box-shadow redesigned (different offsets, colors)?" — no existing box-shadow, but I added new ones. Good.

"Border-radius adjusted for new visual style?" — I added border-radius.

Should I be more aggressive with the gradient-rich variant? The effect variant says "Linear-gradient or radial-gradient on most backgrounds." I added gradients to both rules. Good.

Should I change the `text-align` or `font-size`? No, forbidden. Keep them exactly.

Should I change the padding value? It's `var(--space-md)`. If I change it to a literal, I risk not knowing the base value. Keeping the variable is safest. But the instructions said padding can change within ±20%. Keeping it at exactly the same is within ±20% (0% change). Fine.

Hmm, but there's a subtle issue: The instruction says "Only change colors, shadows, radius, transitions, gradients." Adding `transition` is allowed (transition timing, easing, duration can change, and adding transitions is a visual change). Adding `background`, `box-shadow`, `border-radius` is allowed.

But should I add `transition` to the card with a hover state? There's no hover selector in this media query. The transition on the base is fine — it will animate on hover if hover styles exist elsewhere.

Let me reconsider the palette for "sidebar-classic":
- Sidebar darker: #252e3a
- Main lighter: #f8f9fb
- Accent: maybe #4d7cfe (functional blue) or #e67e22.

For the badge (warning), amber gradient: `linear-gradient(135deg, #ffd166, #fca652)` with a shadow in warm tones.

For cards: light background with a subtle gradient, soft shadow with the dark sidebar color at low opacity.

Let me also think: should I add `border: 1px solid ...`? Border-style and border-color can change. But adding a border could change layout by a pixel (border is part of box model unless `box-sizing: border-box`). Bootstrap uses `box-sizing: border-box` globally, so adding a 1px border wouldn't change the outer size, but could affect inner size by 2px. Since this is a media query and cards likely have padding, adding a border might slightly alter content width. To be safe, I'll avoid adding border. Instead use box-shadow for edges.

Border-radius: adding it doesn't change layout, just visual clipping. Safe.

Box-shadow: doesn't affect layout. Safe.

Background: doesn't affect layout. Safe.

Transition: doesn't affect layout. Safe.

Now, should I keep `!important` on padding? Yes, keep exactly.

Let me also consider: the `.app-hero-section .row .col-lg-7` rule — `text-align: center;` — I cannot change it. Can I add properties? I could add something like `color` or `background`, but centered text on hero — adding background might be odd. I'll leave it without additions to be safe. Or maybe nothing needs to change there.

Actually, the instruction says "Colors throughout the file replaced with fresh palette?" — there are no colors in the original. The spirit is to introduce the new palette where appropriate. Adding background/color to the hero column might tint the whole section, which could be visually significant. I'd rather keep that rule untouched since text-align is the only property and it's forbidden to change.

So my final output:

```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, #ffd166 0%, #f5a623 100%);
        border-radius: 999px;
        box-shadow: 0 4px 16px rgba(245, 166, 35, 0.4);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 16px;
        background: linear-gradient(145deg, #ffffff 0%, #f2f4f9 100%);
        box-shadow: 0 8px 24px rgba(37, 46, 58, 0.08), 0 2px 6px rgba(37, 46, 58, 0.04);
        transition: box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

Wait — do I need to preserve the identical declaration order? The original has `padding: var(--space-md) !important;`. I should keep that declaration. Adding other declarations after is fine.

Also, the selector list `.contact-channels-section article, .contact-quick-section .contact-card` must be preserved exactly. Yes.

Let me reconsider the transition on border-radius — that's weird. Just box-shadow is fine. Or `transform` but transform isn't in the allowed list. Actually, transitions can be on any property; the allowed list says "transition timing, easing, duration" can change. Adding a transition property is fine.

Should the hmm... let me think about whether adding a background to `.contact-channels-section article` could conflict with a parent's background or the card design. The section is "contact channels" — cards with gradients look good.

Now, let me double-check the "self-check" list:

- ✓ Every selector preserved: `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article`, `.contact-quick-section .contact-card` — all preserved.
- ✓ display, position, etc. — none present. Good.
- ✓ width, height, padding, margin — padding unchanged (`var(--space-md)`), within ±20%.
- ✓ font-family, font-size, font-weight, line-height — font-size `0.85rem` unchanged.
- ✓ Colors replaced with fresh palette — introduced new palette colors (amber gradient, light card gradient, dark shadow tones).
- ✓ Shadows redesigned — new box-shadows with different offsets/colors.
- ✓ Border-radius adjusted — added 999px and 16px.
- ✓ No AI marker comments.

One concern: The instruction "No  comments" — I have no comments.

Another concern: "First character = first CSS character" — my output starts with `@media`. Good.

But wait, "line-height" — "0.85rem" is font-size, and line-height isn't set. Good.

Do I need to keep `!important`? Yes, I kept it.

Let me also consider whether I should adjust the padding slightly to satisfy "padding, margin (keep similar values, ±20% maximum)". Since it's a var reference, I could replace `var(--space-md)` with something like `calc(var(--space-md) * 0.9)` to make a visible change but stay within 20%. But that's risky if the variable isn't defined at that point. CSS custom properties are resolved at computed-value time, so `calc(var(--space-md) * 0.9)` would work if `--space-md` is defined at the element level. It'd be a 10% reduction, within ±20%. That's a nice subtle refresh.

Hmm, but if I do that, the padding would be slightly smaller. Is that a "visual identity" refresh? Borderline. The instructions say padding can change within ±20%. Let me do it to show some change:

`padding: calc(var(--space-md) * 0.9) !important;`

Actually, is `--space-md` defined in `:root`? Likely yes, as a design token. `calc()` with a