/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need to rewrite the given CSS with only visual changes. The original is a media query with three rules. Need to keep selectors, layout unchanged. Since original has only text-align, font-size, padding with !important. We can change visual properties only. Target style: asymmetric-blocks, airy-rhythm. But here we can't change layout dramatically, but padding is explicitly allowed within ±20%. Actually padding is in NEVER CHANGE "keep similar values, ±20% maximum". The original padding: var(--space-md) !important. We can change to a slightly different variable? Wait, we cannot change var(--space-md) if it's defined elsewhere? Actually we can change the value? The instruction says CSS custom properties values CAN change, but in this snippet var(--space-md) is used. We don't know its value. To be safe, we can change padding to a value like 2rem or calc? But "keep similar values, ±20% maximum" - we don't know the value of --space-md. Typically --space-md might be 1rem or 1.5rem. We can replace with a different spacing? Hmm. Better keep the padding as is or change to a similar size. But target airy-rhythm says generous spacing 32-56px. However mobile media query max 575.98, padding 32px maybe okay. But the original uses --space-md which might be 16-24. We can change to 1.75rem or 2rem, which is a bit bigger but within 20% if original is 1.5rem -> 1.8rem okay. Let's choose 1.8rem maybe. But the rule has !important, we can keep.

Need to change text-align? That's layout, cannot change. Font-size? That's typography, cannot change. So only color, background, border-radius, box-shadow, etc. But the original has no such properties. We can add new visual properties? The instruction says "Refresh the visual identity WITHOUT changing layout structure or class names." We can add box-shadow, border-radius, colors. But need to preserve selectors. We can add properties. However the output should be a rewrite. We can also change padding to a slightly larger value within ±20%, and add border-radius, box-shadow, maybe background color. But careful: adding background-color to contact sections might affect design but okay. However the HTML is fixed, adding box-shadow is fine. Need to preserve all selectors exactly. The media query remains.

We must output only the rewritten CSS. We need to ensure first character is CSS, no markdown fences.

Let's analyze original:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}
```

We can change the padding to maybe `2rem` or `1.75rem !important`. Need to be within 20% of original. If --space-md is likely 1.5rem or 1rem, 1.75rem could be larger by 16-75%. Better maintain the variable but we can override variable? Actually we can set `padding: 1.6rem !important;` which if original 1.5rem is within 6.7%. If original is 1.25rem then 1.6 is 28% over. Hmm. Need to keep similar. To be safe, keep var(--space-md) unchanged? But the instruction says "Only change colors, shadows, radius..." It explicitly lists "CSS custom properties (--color-*, --shadow-*) values" as can change. But --space-md is spacing, not color/shadow. The NEVER CHANGE list includes padding "keep similar values, ±20% maximum". So we can change padding value but within 20%. We don't know base. The safest is to keep the same `padding: var(--space-md) !important;` unchanged. But the target style wants generous spacing. Yet on mobile it's okay. But the task says "Refresh this CSS visually" - if we keep everything, not much refresh. We can add other visual properties to those elements. For instance, to .app-hero-section .badge.bg-warning, we can change color scheme? But font-size cannot change. We can add background? Actually .bg-warning is a bootstrap class, adding background might conflict. But we can add border-radius, box-shadow.

Maybe we can also change the media query condition? No, @media breakpoints conditions cannot change. So we keep.

We can add custom properties? No need.

Maybe we can rewrite the padding to a new variable `var(--space-lg)` if that's defined? That changes spacing but could violate. Let's not.

Let's interpret: The user wants a visual refresh. Since the original CSS is just a media query with layout/typography, we need to find visual properties to change. We can add border-radius, box-shadow, background, color to those selectors. Also we can change font-size? no. text-align? no. So we can only add properties.

But the instruction says "Refresh the following properties if present" not necessarily only existing. We can add box-shadow etc. But careful: adding box-shadow to `article` and `.contact-card` might be nice. Adding border-radius to `.badge.bg-warning`. Maybe changing padding slightly to 1.75rem (assuming --space-md is 1.5rem). Actually we could also set `padding: var(--space-md) !important;` unchanged. But we need "fresh color palette". Could set background color? Hmm.

Let's read the task carefully: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It doesn't say we must add those only if present. We can modify/add. Since the original has no colors, shadows, radius, transitions, gradients, we need to introduce them while keeping layout. That's a challenge.

Also note "Output the rewritten CSS now". So we need to output a CSS that is a valid rewrite. We can preserve all existing declarations and add visual style. But we must not change layout: display, position, etc. text-align is layout? It is in the "NO CHANGE" list under typography? Actually text-align is listed in NEVER CHANGE: "text-align, vertical-align". So we cannot change text-align: center. We cannot remove it either because that would change layout. So keep as is.

Font-size in NEVER CHANGE: "font-size, font-weight, font-style". So keep.

Padding is allowed to change within ±20%. Since original uses var(--space-md), we can choose to keep it exactly, because we don't know base. But to fulfill "airy-rhythm", maybe we can change to `calc(var(--space-md) + 0.25rem)`? That is +4px if space-md=1rem, +4px = 25%? Actually if space-md=1rem, 0.25rem=4px, that's 25%. If space-md=1.5rem, 4px vs 24px = 16.7% within 20%. So safer to use `calc(var(--space-md) + 0.2rem)` maybe 3.2px. But plus signs okay. Or we can change to `1.7rem` assuming. Hmm.

Given the request "asymmetric-blocks" target uses unequal columns, mixed gaps, bold padding contrasts. That cannot be done because layout fixed. But we can use "airy-rhythm" variant by adding border-radius 16-28px, soft pillowy shadows, generous spacing. But this is a mobile media query. We can add border-radius and box-shadow.

Let's create a rewritten CSS that keeps all selectors and original declarations, then adds visual properties. We need to ensure not to break HTML. For `.app-hero-section .badge.bg-warning`, we can add background gradient? But .bg-warning has background color. We can override background with a gradient? But that would change color identity. That's allowed. But since it's a warning badge, changing background might affect semantic. But okay. We can add `border-radius: 999px; box-shadow: 0 4px 12px rgba(...)`.

For `.contact-channels-section article, .contact-quick-section .contact-card`, we can add `border-radius: 24px; box-shadow: ...;` But the padding remains. We can also add `background-color` maybe. But careful: The elements might already have background from other CSS; adding background here could be okay. However the instruction says "fresh color palette: bold contrasting blocks" - but this media query only. Could add background to those contact cards. But if they already have a background from a base class, overriding at mobile might be redundant. But it's okay.

Let's see if we can adjust the padding slightly. We want to keep similar. Let's set `padding: 1.8rem !important;`? If --space-md is 1.5rem, 1.8 is 20% exactly. If --space-md is 1rem, 1.8 is 80% over, bad. Better not.

We can set `padding: var(--space-md) !important;` unchanged but add `transition: padding 0.3s ease;`? That is visual.

Maybe we can change `font-size: 0.85rem` to `font-size: 0.85rem` unchanged. Can't change.

Maybe we can change `text-align: center` to `text-align: center` unchanged.

So only additions. Let's craft.

We need to preserve the exact selectors and order. We can also reorder? Better preserve.

Let's write:

```
@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;
        border-radius: 999px;
        box-shadow: 0 4px 16px rgba(255, 193, 7, 0.35);
        letter-spacing: 0.02em;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 24px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
        background: #ffffff;
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
}
```

But adding `transform` is a property that affects layout? transform is visual and can be changed. But not needed. Adding transition with transform property but no transform on hover is harmless. But the instruction says "only change colors, shadows, radius, transitions, gradients." transition is in the "MUST CHANGE"? Actually transitions allowed. So okay.

Need to ensure no AI comments. Also the original has blank lines between selectors. We can keep.

But is adding `background: #ffffff` safe? If the original has dark theme, white background may change visual identity dramatically. The target style is "bold contrasting blocks" but we don't know. We can use a neutral color. But we are to refresh with new color palette. The user didn't specify exact palette except "bold contrasting blocks: each section different background, high contrast borders". We could add background colors to contact cards, e.g., `background: linear-gradient(135deg, #f8f9fa, #fff);`. But if the cards are already styled, might be okay. Let's add a subtle background gradient. But in mobile, maybe it's better not to override background to white because could conflict. The instruction allows gradient changes. Let's use a soft gradient.

However, the original CSS has no color context. To avoid breaking, use `background: rgba(255,255,255,0.8)` with backdrop-filter blur? That's visual. Could be nice.

Also for `.app-hero-section .row .col-lg-7`, we can add `text-shadow`? But text-align center not changed. Maybe add `text-shadow: 0 2px 8px rgba(...)` to hero text? That could be too much. But target "airy-rhythm" with soft shadows. We can add a subtle text-shadow. But the element is a column, not text directly. Adding text-shadow to column affects all text inside. Might be okay. But not necessary.

The rule includes only `.col-lg-7` which is a column div; adding text-shadow would apply to its text. We could add `color: #212529`? But not needed.

Let's think about "asymmetric-blocks" target. This particular CSS snippet is only a mobile query, not enough to implement the full style. But we can add visual elements like box-shadow, border-radius, maybe background. Let's do something elegant.

Maybe we can change the padding for contact articles to a higher value: `padding: 1.75rem !important;` but as said, unknown. We can use `padding: calc(var(--space-md) + 0.15rem) !important;` which is +2.4px if base 16px, about 15% if base 16? Actually 2.4/16 = 15%. If base 24px, 10%. Good. That's within 20%. It also gives a slightly bigger padding. Let's use that. For the media query, this will apply. If --space-md is undefined, calc will be invalid, but then the original would also be invalid? Actually var() with undefined invalid, but likely defined. Better use a fixed fallback? We can use `padding: calc(var(--space-md, 1rem) + 0.15rem) !important;` That adds fallback. But is the fallback syntax allowed? Yes. But that might change behavior if --space-md is not defined. Original would be invalid if undefined, so the fallback changes it. But likely defined. To be safe, use `calc(var(--space-md) + 0.15rem)`. It preserves the variable. If undefined, original would be invalid anyway. But maybe not.

Alternatively, just keep the padding as is and add border-radius etc. Let's not risk padding changes. The task says "padding, margin (keep similar values, ±20% maximum)" so if we change it 10% it's okay. Let's do it to satisfy airy-rhythm.

Now for colors. We need to replace colors. Since no colors in original, we introduce new ones. We can define a fresh palette with soft blues, teals? But target style "asymmetric-blocks" with bold contrasting blocks. Perhaps use a dark gray/white with accent. Let's pick a warm light theme.

Let's craft final CSS:

- `.app-hero-section .row .col-lg-7`: keep text-align, add `color: #1a2b3c;`? But text is already colored. Maybe add `text-shadow: 0 2px 12px rgba(255, 255, 255, 0.3);`? Hmm.

Actually, if we add text-shadow to col-lg-7, it might make text look weird. But maybe to hero section, a soft white glow? Since it's a column in hero, likely text over an image. Could be nice. But "airy-rhythm" soft shadow. Let's add `text-shadow: 0 2px 8px rgba(44, 62, 80, 0.12);`.

- `.badge.bg-warning`: font-size unchanged. Add `background: linear-gradient(135deg, #ffb347, #ffcc33);`? But .bg-warning is a bootstrap utility class that sets background-color. If we override with gradient, that's a visual change. The target palette could be warm. Let's set background to a gradient from #ff9a9e to #fad0c4? But warning badge should stay yellow/orange. Since it's warning, maybe new palette "high contrast borders". We can add `border: 2px solid #ff8c00;` But that changes border-width? No, border-width is never change? Actually border-width not listed? It says border-width NOT to change? Wait "border-width" is not in the cannot change? Let's check: "border-color and border-style (NOT border-width)" - That implies border-width should NOT be changed. Actually they say "border-color and border-style (NOT border-width)" in the MUST CHANGE? Let's revisit instruction: In the "MUST CHANGE" list: "border-color and border-style (NOT border-width)" – Wait, it says "border-color and border-style (NOT border-width)" under MUST CHANGE? Let me read the user prompt carefully:

"✅ YOU MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow ...
  • text-shadow
  • border-radius ...
  ...
  • border-color and border-style (NOT border-width)
  ...
"

The parenthetical "(NOT border-width)" means you must change border-color and border-style, but not border-width. So border-width is never to change. It also indicates border-width is part of layout? It says "border-color and border-style (NOT border-width)" - so do not change border-width. So adding a border with width 2px would change border-width from none to 2px, which is a layout change. We should avoid adding border-width if none existed. So no new border unless the element already has border. In this snippet, no border exists. So we cannot add border because it would change border-width. Actually adding border from none to 2px changes layout. So avoid adding borders.

- For contact cards: we can add `background`, `border-radius`, `box-shadow`, `transition`. Add `backdrop-filter` maybe. But backdrop-filter might affect layout? No.

Let's choose a palette:

Primary soft: #f8f9fc background, #2c3e50 text, accent #7f8ff4 (purple-blue), warm #ffb347.

But we don't know. The user wants 'asymmetric-blocks'