/* ============================================================
   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 respond with rewritten CSS, preserving selectors/layout exactly. Only visual changes. Need target style asymmetric-blocks, sharp-edges. But original CSS is just media query with text-align, font-size unchanged? We can only change visual properties among existing? Need refresh this CSS visually. Keep all selectors. Since layout properties text-align? That is typography? text-align is typography and must not change? Actually allowed? "text-align, vertical-align" in typography cannot change. So keep text-align center. font-size cannot change. Need perhaps add color, shadows, border-radius, transitions, etc? But the existing CSS only has font-size and padding. Padding can change within ±20? It's in media query. Target has sharp edges, no border radius. However must preserve layout. Could add box-shadow? But elements are contact cards; might add visual properties not present? Yes can add decorative. But careful: We shouldn't change layout properties, but can add colors/shadows/transitions. Need output only CSS. But original selectors include .contact-channels-section article, .contact-quick-section .contact-card with padding var(--space-md)!important. We can change padding? It says margin/padding similar ±20. But variable --space-md can't be changed unless include property? Could perhaps update CSS variable value? It says CSS custom properties --color-*, --shadow-* values can change; but --space-md is spacing variable, not allowed? Do not change. But output can add properties.

Need preserve media query, selectors exactly. Need style: asymmetric blocks, sharp shadows, strong borders, snappy transitions. Since comments? no.

Need think about applying to these elements. Maybe add box-shadow, border, border-radius, transition, background? But maybe .app-hero-section .badge.bg-warning: color palette. Need maybe add color properties to badge? But original has font-size only; adding color, background, border? Could be okay. But "visual identity only" so adding decorations is likely allowed. Need be careful with not changing HTML layout. Adding borders might change box sizing? It could impact layout if box-sizing not border-box, but width? In fixed CSS, .contact-card may have width? Padding unchanged. Adding border could change layout dimensions, so could break. Need maybe avoid adding border if layout fragile? But target "strong borders" maybe need add. But box-shadow doesn't affect layout. border-radius no layout. Transition no layout. Filter no layout. Background no layout. Better to add box-shadow and maybe background color, not border. But target says strong borders (2-3px solid); could use outline or box-shadow 0 0 0 2px? That doesn't affect layout if box-sizing border-box? Actually box-shadow doesn't affect layout at all. Use box-shadow for hard offset and border. But border still changes border-box vs content-box. Could set border: 2px solid transparent? That changes layout if box-sizing content-box; but we can't know. Safer to use outline? Outline doesn't affect layout. But "sharp edges" could use outline: 2px solid. However original target desired hard offset shadows. We can use box-shadow: 4px 4px 0px #some; no layout. Add background-color, color, maybe outline.

Need ensure output only CSS. The output must be valid. Since original CSS has an @media query, we rewrite inside. But should we preserve existing properties exactly? Yes. Could add new visual properties. Need self-check: selectors preserved. display etc unchanged, width/height etc not present. font-family etc not present. Colors replaced? There are no color values in original, so we add fresh palette. Shadows redesigned? add. Border-radius adjusted? add. No AI comment.

Need maybe adapt "asymmetric-blocks" target, but given small snippet, no grid to change. Could maybe set .app-hero-section .row .col-lg-7 text align center; no visual.

Need output in requested exactly? "ONLY rewritten CSS, preserving ALL selectors and layout exactly" The output should include entire CSS with media query. Need decide if to add declarations to existing rules. Is that "rewritten"? Visual changes only. Yes.

Need maybe for badge: "badge bg-warning" could get background color, color, border-radius, box-shadow, transition. But if we change .bg-warning background to custom color, that's visual. But it could have Bootstrap .bg-warning; our override can set background. Need perhaps use high contrast border? If border impacts layout? Could use box-shadow instead. However target "strong borders (2-3px solid)" maybe can do box-shadow to mimic border? Use outline? Outline can shift? no layout. Add outline: 3px solid. But outline follows border radius? with radius 0, okay. Could add outline: 3px solid #222; outline-offset: 2px; box-shadow: 4px 4px 0 #e4002b. But outline may overlap? no layout.

Need maybe add to contact cards: background: #f7f2e9; box-shadow: 6px 6px 0 #0d1b2a; border-radius: 2px; transition: box-shadow 0.15s ease, transform 0.15s ease; But transform on hover? We don't have hover selector, cannot add :hover because it would change selectors? The rule is selectors preserve exact, cannot add pseudo-classes? "Pseudo-classes (:hover, :focus...) keep exactly" Means if original no pseudo, don't add? It says class names keep exactly, pseudo-classes keep exactly. Probably don't add selectors. Could add transition to elements but no hover. Snappy transitions can be on hover not available. We can still add transition property but no state change. Maybe not necessary.

Need perhaps add color to text? For contact-card and article, could set color. But if we set background, we should set color. Yet original may have other text colors. Better not alter text colors? But task says refresh visual identity; change color values. Could add color. Need think.

Original snippet has no colors; simply set padding and text-align and font-size. The "target style" may not be applicable very much. We need perhaps "refresh CSS visually" within strict constraints could include adding visual styling to these components. Since original rules are minimal, we can augment with palette/shadow.

Need consider `!important` after padding. We might include padding unchanged. Use `padding: var(--space-md) !important;`. Do not change var value. Good.

Potential output:

@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: #e63946;
        color: #fff;
        border-radius: 2px;
        box-shadow: 3px 3px 0 #0d1b2a;
        transition: box-shadow 0.15s ease, border-radius 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #f7f3e8;
        color: #1b263b;
        border-radius: 2px;
        box-shadow: 5px 5px 0 #0d1b2a, 0 0 0 2px #0d1b2a;
        transition: box-shadow 0.15s ease, background-color 0.15s ease;
    }
}

But check target "sharp edges": small radius 0-4. We have 2. Strong borders: using box-shadow second layer 0 0 0 2px #0d1b2a simulates border. Hard offset shadows: 5px 5px 0. Good. Asymmetric blocks? We could make two blocks different backgrounds? But selector list applies same styles to article and .contact-card. We cannot split selector? Could keep selector list and add properties same. Could maybe set `.contact-quick-section .contact-card` specifically? But would require adding selector, not allowed? Existing selector list has both selectors; could separate? "Selector lists (commas)" preserve? It says selectors keep exactly; "selector lists (commas)" preserve. This might mean keep the combined selector list, not split. Could add new declaration blocks? But that would add selectors? It says selectors keep exactly; don't add maybe. So same styles for both.

Need maybe use `background: linear-gradient(...)`? But target "bold contrasting blocks" use gradient. Could set background to linear-gradient? It is a color value and decorative. But for .contact-card, if it has image? Maybe not. Better not.

Need maybe use `outline` instead of box-shadow for border to avoid layout. Actually box-shadow 0 0 0 2px can mimic border with no layout. Good.

Could set all colors to a fresh palette. Palette: deep navy #0f172a, electric blue #2563eb, orange #f97316? But "sharp edges" style with brutalist palette: #f4f1de, #e07a5f, #3d405b, #81b29a, #f2cc8f. Need maybe use bold contrasting blocks each different section. But same rule cannot different sections. Could use CSS variables? We can set custom properties within selector? But no need.

Need perhaps output with exactly same media query. But target style "asymmetric-blocks": Could perhaps include `@media (max-width: 575.98px) { .app-hero-section .row .col-lg-7 { text-align: center; } }` unchanged; no additional visual. But we need not force.

Need consider "font-size: 0.85rem;" unchanged. If we add color to badge, fine. But Bootstrap `.bg-warning` may have `--bs-badge-color`? Not needed.

Need maybe apply to `.contact-channels-section article` and `.contact-quick-section .contact-card`: They might have `padding` important from original. Adding background could make contact sections feel blocky. Great. Need maybe ensure text remains readable. Use #111827 and cream.

Need decide if adding `!important` on new declarations? Not necessary. But `background` may be overridden by other styles; if we want visual identity, maybe `background: #f4f1de !important;` Could be necessary? Original padding uses !important. Bootstrap card may have background white. A specific `.contact-card` class might already have background in other CSS not in snippet; our rule has same specificity? It's inside @media, with selector list. If original other CSS has `.contact-card { background: ... }`, ours with same specificity and later order? We cannot know. `!important` could ensure. But use of !important might be undesirable. For background could use `background-color: #... !important;`? But target "only colors". Adding !important is fine, no layout. However, adding too many !important may be considered not minimal. But because original important on padding, they may want these overrides. Maybe use `background: #f7f3e8 !important;` to guarantee. Similarly `box-shadow` might need important? Not if no other. But Bootstrap has `box-shadow` on cards, etc. Could use `box-shadow: ... !important;`. But "self-check" no layout; okay.

Need perhaps create "asymmetric-blocks" with "Mixed gaps" but cannot change gap due to no layout. Not possible. Maybe in comments? no.

Need maybe add `border-radius: 0` but contact cards may have existing border radius; setting 0 aligns sharp edges. Good. Need maybe add `outline: 2px solid #1d3557;`? But box shadow border enough. If using box-shadow 0 0 0 2.5px, okay. But with offset shadow outside? Let's carefully design multi-layer:

For cards:
- Background: #fdf6e3
- Border effect via `box-shadow: 0 0 0 2px #0f172a, 8px 8px 0 #e11d48;`
This gives a 2px border and 8px hard shadow behind. But order: first 0 0 0 2px draws as border over background? Actually box-shadow layers: first is on top? CSS paints shadows in order: first shadow is on top, others behind. A 0 0 0 2px shadow around element behaves like border, can be overlaid by second? The second 8px offset will be behind, so first border visible. Good. If offset shadow and border same color, nice brutalist. Use border-radius: 0 or 2px. If border radius 2, both shadows follow radius. Target sharp edges. Use 2px radius perhaps.

For badge:
- background: #e11d48 (crimson) or #f97316
- color: #fff
- box-shadow: 0 0 0 2px #0f172a, 4px 4px 0 #0f172a
- border-radius: 0
- font-size unchanged.

Need maybe `padding` in original only for contact cards, not badge. Could add padding to badge? That would alter layout; avoid.

Need maybe set transition on `background-color, box-shadow, transform` but no transform. Transitions apply to box-shadow and background-color. Snappy 0.15s. For focus/hover maybe native but not selector. Could add `transition: all 0.15s ease-in-out`? That might include layout properties if changed elsewhere. Better specific: `transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out, border-radius 0.15s ease-in-out;` no layout. But if no state, no effect.

Need maybe include `-webkit-tap-highlight-color`? no.

Need maybe include `accent-color`? no.

Need maybe include outline? Could add outline: 2px solid #0f172a; but outline could change? no. But if border-box? no. Yet box-shadow border suffices. Avoid.

Need maybe convert original `text-align: center;` to something? Can't change. `font-size` can't change. Paddings unchanged. Good.

Need maybe in new CSS include `appearance: none`? no.

Need maybe "asymmetric blocks" could refer to background sections different; but we can't split selector. Could maybe add `background` to `.contact-channels-section article` and `.contact-quick-section .contact-card` differently by adding currentColor? We can set variables on parent? No. Could use `:nth-child` selectors? Would add selectors; not allowed. Could set `--card-bg` custom property in one and use? Not without selectors. But existing selector list applies both: if we set background-color, both same. Could use `background-image` linear-gradient with different colors depending on... no. Could use `background: linear-gradient(135deg, #... 0%, #... 100%)` same. Asymmetry can be achieved via gradient angle. Good.

Need maybe in `.app-hero-section .badge.bg-warning` use gradient background? e.g., `background: linear-gradient(135deg, #f97316, #e11d48);` Good, bold. But target has "each section different background"; can't.

Need perhaps output with comments? No.

Need maybe use "request ID" or fingerprint? no.

Need perhaps "Original CSS: #block2/2" might mean only this snippet, but output should be complete? It is the entire original. Fine.

Need maybe ensure all layout preserved exactly. We are adding background/color/box-shadow to existing rules. Is adding box-shadow allowed? Yes visual. Does adding `color` violate typography? Color is allowed. Does adding `background` allowed? Yes. Does adding `border-radius` allowed? Yes. Does adding `transition` allowed? Yes. Does adding `box-shadow` allowed? Yes.

Need maybe choose `padding: var(--space-md) !important;` exactly. Good.

Need maybe choose `font-size: 0.85rem;` exactly. Keep.

Need maybe choose `text-align: center;` exactly. Good.

Potential output:

@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, #f97316, #e11d48);
        color: #ffffff;
        border-radius: 0;
        box-shadow: 0 0 0 2px #0f172a, 4px 4px 0 #0f172a;
        transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #fefae0;
        color: #1e293b;
        border-radius: 2px;
        box-shadow: 0 0 0 2px #1e293b, 6px 6px 0 #dc2626;
        transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
    }
}

Need self-check selector list: same. First selector same. Both rules same. Good. But target "strong borders (2-3px solid)" uses box-shadow 0 0 0 2px, okay. Hard offset shadows: 4px/6px. "sharp-edges" small radius: 0/2px. Snappy transitions: 0.15s. Asymmetric blocks: not really. Maybe use 6px offset vs 4px, varying offset across blocks; badge 4px, card 6px, asymmetric. Good. Color palette bold contrasting blocks: badge orange-red, card cream, deep navy shadow. Good.

Need consider if `box-shadow: 0 0 0 2px #1e293b, 6px 6px 0 #dc2626;` first is border, second red offset. But with offset red behind, border visible. However, the offset red shadow