/* ============================================================
   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` #块2/2 (block 2 of 2). The mode is CONSERVATIVE (HTML fixed, visual changes only). The target style is "sidebar-classic" with "sharp-edges" effect variant.

Let me analyze the original CSS:

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

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

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

This is a small CSS block. Let me check what I can change:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` - `text-align` is in the typography section, which is NOT allowed to change. So this rule stays as-is.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` - `font-size` is also typography, NOT allowed to change. So this rule stays as-is.

3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` - `padding` is in the layout section. The constraint says "padding, margin (keep similar values, ±20% maximum)". So I can keep the padding but maybe adjust within ±20%. But `var(--space-md)` is a CSS custom property. I could redefine `--space-md` in a `:root` block, but that would add a new selector. The instructions say "ONLY the rewritten CSS, preserving ALL selectors and layout exactly". Adding a `:root` block might be acceptable since it's a new selector... but the task says "preserving ALL selectors" — that means I should keep existing selectors. It doesn't explicitly forbid adding new ones, but it says "Selectors (CRITICAL - HTML is fixed): Class names: keep EXACTLY". Adding a `:root` block wouldn't break HTML.

Hmm, but the output should be conservative. Let me think about what changes I can actually make here.

The original CSS block only contains:
- text-align (can't change)
- font-size (can't change)
- padding with var(--space-md) (can change within ±20%)

Since the block is so small, I need to think about what I can do. The custom property `var(--space-md)` is referenced. I could change the custom property value. But the custom property `--space-md` is defined elsewhere (probably in a root selector). If I redefine it inside the media query, it would only apply within the media query for the elements that match, or I could add a `:root` inside the media query.

Wait, actually the instructions say "CSS custom properties (--color-*, --shadow-*) values" can change. So I can change the value of `--space-md` within the media query scope. But `--space-md` is not a color/shadow property, it's a spacing property. However, the padding constraint says "keep similar values, ±20% maximum". If `--space-md` is, say, 1rem, I could change it to 1.2rem which is within ±20%.

But actually, redefining `--space-md` for just this media query would affect other elements that use it within the same media query, which could be risky.

Let me reconsider. The file fingerprint says "块2/2" (block 2 of 2), meaning this is the second block of the file. The original CSS is quite small. The task says to refresh the visual identity. Given the constraints, the only things I can change:

1. `padding: var(--space-md)` — I could change the custom property value (if I redefine `--space-md` in the media query scope) or I could inline the padding with a slightly different value. But the selector is `.contact-channels-section article, .contact-quick-section .contact-card` with `padding: var(--space-md) !important`. I can replace `var(--space-md)` with a specific length value that's within ±20% of the original value. But I don't know what `--space-md` is defined as. Typically in Bootstrap-like systems, `--space-md` might be 1rem or 1.5rem. Since this is a custom property, I don't know its value.

Hmm, this is tricky. Maybe I should add a new rule at the top of the media query that redefines `--space-md` for the `:root` scope. But that would be adding a selector, which might be allowed since the instruction is to preserve existing selectors, not to avoid adding new ones. But the output spec says "preserving ALL selectors and layout exactly" — that means keep existing ones. Adding selectors could be risky.

Alternatively, I could output essentially the same CSS with minimal changes. But the task says "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette." This suggests the previous attempt was too conservative. However, this block is just a media query with typography and padding — there are no colors, shadows, or radius in it.

Wait, maybe the file has only this block as block 2/2, and block 1/2 is the rest of the file. So this particular block has very few visual properties. With the "side-classic" target style and "sharp-edges" variant, I need to apply the visual changes to what's present.

Let me think about what I can actually do with this specific block:

```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;
    }
}
```

Possible changes:
1. For `.app-hero-section .badge.bg-warning` — font-size is locked. But I could add additional visual properties like `background-color`, `color`, `border-radius`, `box-shadow`, etc. Wait, would that break layout? Adding new properties to an existing rule doesn't change class names or layout structure. The instruction says "Only colors, shadows, and decorative properties may change" and "Adding new properties" — hmm, the instructions say "Refresh the visual identity WITHOUT changing layout structure or class names." Adding decorative properties like `box-shadow` or `border-radius` to an element wouldn't change layout (unless it changes box sizing, but box-shadow doesn't affect layout). So I can add decorative properties to the rules.

Actually, wait. The instructions say the original CSS has only those three rules. The task is to "Refresh this CSS visually." This implies I can add visual properties to existing selectors. Let me re-read the constraints:

"✅ YOU MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)
  • text-shadow
  • border-radius (visual rounding only)
  • gradient colors and stops in linear/radial/conic-gradient
  • transition timing, easing, duration
  • filter, backdrop-filter
  • opacity
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
  • caret-color, accent-color
  • CSS custom properties (--color-*, --shadow-*) values"

So these are the properties I must change. If they don't exist in the original CSS, I can add them (as long as they don't affect layout). Adding `box-shadow`, `border-radius`, `background-color`, `color`, `transition` to existing selectors is allowed.

However, I need to be careful: adding properties to `.app-hero-section .row .col-lg-7` — changing `text-align` is not allowed, but adding a `color` or `background` would be visual only. But does that make sense for a "row col-lg-7"? It might. The hero section probably has text.

Let me think about the target style "sidebar-classic" and "sharp-edges":

Sidebar-classic palette:
- Sidebar darker (#252e3a), main lighter
- Functional accent for actions

sharp-edges variant:
- Hard offset shadows: 4px 4px 0px solid color
- Small or zero border-radius (0-4px)
- Strong borders (2-3px solid)
- Snappy transitions (0.15s)

Since this is a mobile media query (max-width: 575.98px), I should adapt the aesthetic accordingly.

Given that this block is minimal, I think the intent is to:
1. Keep the selectors exactly.
2. Add visual properties (colors, shadows, radius, transitions) to make the design distinctive.

But wait — the instruction "MUST CHANGE" applies to "All color values: background, color, border-color, fill, stroke, outline-color". If there are no color values in this block, are we required to add them? I think the intent is that if a color value appears, it must be changed. If none appear, we should introduce the new palette through decorative properties that don't break layout.

Let me construct a reasonable output:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #e9b84c;
        color: #252e3a;
        border: 2px solid #252e3a;
        border-radius: 4px;
        box-shadow: 4px 4px 0 #252e3a;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #f5f7fa;
        border: 2px solid #252e3a;
        border-radius: 4px;
        box-shadow: 4px 4px 0 rgba(37, 46, 58, 0.25);
    }
}
```

Hmm, but wait — the `.app-hero-section .badge.bg-warning` uses Bootstrap's `.bg-warning`. If I override `background-color` and `color`, that would change the badge's appearance. That's fine, it's visual.

But I should be careful: `.bg-warning` is a Bootstrap utility. Changing its background-color from the default warning yellow to a different yellow (#e9b84c) is fine. Adding border, radius, and shadow are decorative.

However, the padding for `.contact-channels-section article, .contact-quick-section .contact-card` uses `var(--space-md)`. I can't change the padding without knowing what `--space-md` is. But the constraint says padding can change within ±20%. Since I don't know the base value, I should keep `var(--space-md)` as-is to be safe. The instruction says "padding, margin (keep similar values, ±20% maximum)". Keeping `var(--space-md)` exactly is within 0% change, so it's safe.

But wait, the custom properties section says "CSS custom properties (--color-*, --shadow-*) values" must change. `--space-md` is not in that list, so I can't change it. Keep it as-is.

Also, should I add `!important` to the new properties? The original has `!important` only on padding. Adding `!important` to decorative properties might be overly aggressive and could override other styles unexpectedly. Better to avoid `!important` unless needed.

Actually, let me reconsider the whole approach. The instructions say:

"Refresh the visual identity WITHOUT changing layout structure or class names. The HTML is FIXED — only colors, shadows, and decorative properties may change."

So the goal is to refresh the visual identity. For this block, I need to make sure the visual changes are distinct. Since there are no color properties originally, I'll add them to match the "sidebar-classic" + "sharp-edges" aesthetic.

But I also need to be careful about the "MUST CHANGE" list. It says "All color values" — if there are no color values in this block, then technically nothing to change there. But "Must change" could also be interpreted as "you must change the visual identity by introducing these properties".

Let me look at the "Never change" list again:

- `text-align` — locked. So `.app-hero-section .row .col-lg-7 { text-align: center; }` stays exactly.
- `font-size` — locked. So `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` stays exactly.
- `padding` — can change ±20%, but I'll keep `var(--space-md)` since I don't know the base.

So the only way to make this block visually distinct is to add decorative properties to the existing selectors.

Let me think about whether adding properties to `.app-hero-section .row .col-lg-7` could break layout. Adding `color` doesn't affect layout. Adding `text-shadow` doesn't affect layout. Both are safe.

For `.app-hero-section .badge.bg-warning`, adding `background-color`, `border`, `border-radius`, `box-shadow`, `transition` doesn't affect layout (border adds to box size but the badge is an inline element, and border-width is set to 2px — wait, the instruction says "border-color and border-style (NOT border-width)" must change. It says never change border-width? Actually, it says "border-color and border-style (NOT border-width)" in the MUST CHANGE list, meaning I should change border-color and border-style but not border-width. In the NEVER CHANGE list, border-width is not explicitly listed, but it's implied that border-width should not be changed. So I should not add `border: 2px solid ...` because that sets border-width. Wait, "NOT border-width" means I should not change border-width. But if there's no border originally, adding `border` sets a new border-width. Is that allowed?

Let me re-read: "🔒 NEVER CHANGE (would break HTML layout): ... border-color and border-style (NOT border-width)" — Actually that's in the MUST CHANGE list: "• border-color and border-style (NOT border-width)". This means when changing borders, I can change color and style, but not width. If I add a border that didn't exist before, I'm introducing a border-width, which might be considered "never change" since it could affect layout. Adding a 2px border to an element increases its box size, which could affect layout. But since the rule is inside a media query and the element is likely an inline-block badge, adding a border could change its size slightly. To be safe, I should avoid adding borders with explicit width.

Hmm, but the "sharp-edges" variant calls for "Strong borders (2-3px solid)". The target style asks for it. But the conservative mode says not to change border-width. Since the original CSS has no border-width on these elements, adding one would be introducing a change that could affect layout. But the instruction "only colors, shadows, and decorative properties may change" — a border is decorative if it doesn't change layout. A border does affect layout (it adds to the box). So maybe I should avoid adding new borders.

Alternatively, `outline` can be used for decorative borders without affecting layout. The MUST CHANGE list includes "outline styles (color, type)" and outline doesn't affect layout. So I could use `outline: 2px solid #252e3a` instead of `border`. That gives the sharp-edge look without affecting layout.

Similarly, `box-shadow` doesn't affect layout, so I can use hard offset shadows like `box-shadow: 4px 4px 0 #252e3a`.

`border-radius` affects how the element looks but doesn't change the box size. It's allowed (visual rounding only).

So my plan:

For `.app-hero-section .row .col-lg-7`:
- Keep `text-align: center;`
- Add `color: #f5f7fa;` (main lighter color)
- Add `text-shadow: 2px 2px 0 rgba(37, 46, 58, 0.5);` (hard shadow)

For `.app-hero-section .badge.bg-warning`:
- Keep `font-size: 0.85rem;`
- Add `background-color: #e9b84c;` (functional accent)
- Add `color: #252e3a;` (sidebar darker text on accent)
- Add `outline: 2px solid #252e3a;` (strong border effect without layout change)
- Add `outline-offset: -2px;` (to keep the outline within the element? Actually outline is drawn outside. Better to use `box-shadow: 0 0 0 2px #252e3a;` which draws a ring inside/outside? `box-shadow` with spread 2px doesn't affect layout. Let me use `box-shadow: 4px 4px 0 #252e3a, 0 0 0 2px #252e3a;` — wait, that's two shadows. The hard offset shadow and a ring. That's a nice sharp-edge look.)
- Add `border-radius: 4px;` (sharp edges, small radius)
- Add `transition: transform 0.15s ease, box-shadow 0.15s ease;` (snappy)

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- Keep `padding: var(--space-md) !important;`
- Add `background-color: #f5f7fa;` (main lighter)
- Add `outline: 2px solid