/* ============================================================
   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 a small CSS block with a "sharp-edges" effect variant and "symmetric-grid" target style. But the CSS provided is quite minimal — it's a media query for mobile with just three rules:

1. `.app-hero-section .row .col-lg-7` — text-align: center (this is a layout/typography property, I shouldn't change it... actually text-align is listed under "never change" typography)
2. `.app-hero-section .badge.bg-warning` — font-size (never change)
3. `.contact-channels-section article, .contact-quick-section .contact-card` — padding (can change within ±20%)

The problem: there are no colors, shadows, borders, radius, transitions, etc. in this block to change. The instructions say to keep selectors exactly, but also to change colors/shadows/radius/etc. However, there's nothing visual to change here except padding — which I can only adjust within ±20%.

Wait — I need to re-read the constraints. The mode is "CONSERVATIVE (HTML fixed, visual changes only)". The original CSS has no colors to change. I must preserve selectors and layout. Since there are no color/shadow/border properties in the original, I should only output what's there, possibly with the padding adjusted slightly (within ±20%). But the padding values use CSS variables (`var(--space-md)`), so I can't compute 20% without knowing the variable value. I could keep it as-is.

Actually, let me reconsider. The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." But there are no such properties in the original. The safest approach: output the CSS with the same selectors and the same declarations, since there's nothing visual to change. But that would violate "Previous attempt didn't change enough."

Hmm, but I can't invent properties that weren't there? Actually, the prompt says "Only change colors, shadows, radius, transitions, gradients" — I could potentially add declarations to the rules. But adding new declarations to rules is risky because the HTML is fixed and I might inadvertently change layout. Adding `border-radius`, `box-shadow`, `transition` to these elements would be purely visual and wouldn't affect layout (box-shadow doesn't affect layout). Border-radius doesn't affect layout. Transition doesn't affect layout. So I could add visual properties to the existing selectors.

But wait — the constraint says "Layout pattern (Aggressive only): Strict equal grids..." — this is listed under "TARGET STYLE: symmetric-grid" but then says "(Aggressive only)" — meaning this target style's layout pattern is only for aggressive mode, not conservative. In conservative mode I must NOT change grid layouts. So I ignore that.

The "EFFECT VARIANT: sharp-edges" applies — hard offset shadows, small border radius, strong borders, snappy transitions. So I can add these to the existing selectors where appropriate. But should I? Adding borders to elements could change their size (border-width affects layout box but not layout of other elements... actually it could change the element's box size, affecting spacing). The constraint says border-width is on the never-change list ("border-color and border-style (NOT border-width)"). So I cannot change border-width, and adding a border where none existed would change border-width from 0 to something — that's a layout change. I should avoid adding borders.

Box-shadow is safe — it doesn't affect layout. Border-radius is safe visually. Transition is safe. Background-color, color are safe.

Let me think about what's appropriate:

The original rules:
1. `.app-hero-section .row .col-lg-7` — text-align: center (this is typography/layout, keep)
2. `.app-hero-section .badge.bg-warning` — font-size: 0.85rem (typography, keep)
3. `.contact-channels-section article, .contact-quick-section .contact-card` — padding: var(--space-md) !important (padding, keep or adjust within 20% — but it's a variable, keep as-is)

There are no color properties. To fulfill the task, I could add visual declarations that don't affect layout. For example:

- Add `transition` to these selectors for snappy transitions (0.15s). Transition is explicitly allowed to change/add.
- Badge: could add `box-shadow`, `border-radius` — but bg-warning is a Bootstrap warning badge. Adding a hard offset shadow could be a nice sharp-edge touch. But it might look odd with Bootstrap's existing styles. However, the task is to refresh the visual identity.
- The contact cards: could add `box-shadow` and `border-radius` (small, 0-4px per sharp-edges).
- Text-align center is a layout property; keep.

But wait — I need to be careful. The instructions say the original CSS must be visually refreshed. But if I add new declarations that aren't in the original, am I violating "preserving ALL selectors and layout exactly"? The constraint says layout properties must stay the same. Adding `box-shadow`, `border-radius`, `transition` won't change layout. But adding `background-color` might change appearance — that's fine.

Actually, the safest interpretation: since the original file fragment has no visual properties, I should write the minimal refresh by adding only purely-decorative properties that don't affect layout. The sharp-edges variant specifically asks for:
- Hard offset shadows: 4px 4px 0px solid color
- Small or zero border-radius (0-4px)
- Strong borders (2-3px solid) — but borders affect layout, and border-width is forbidden to change. I could add a border with a specific width, but that violates "NOT border-width". I'll skip borders or use `outline` instead? Outline doesn't affect layout! Outline-color and outline-style are allowed to change, but adding an outline with a width — outline-width isn't in the forbidden list (only border-width). But adding outline could be a visual change that doesn't affect layout. Hmm, but the sharp-edges variant says "Strong borders (2-3px solid)". I could use `outline` to simulate a border without layout impact. However, adding an outline might not be appropriate for the badge.

Let me reconsider. The file is `assets/css/saishi.css`, and the block is "#块2/2" meaning block 2 of 2. This is a fragment of a larger file. The user pasted a media query. My job is to rewrite this fragment with the visual refresh. To be safe and satisfy "make colors, shadows, and radius MORE distinct this round", I'll inject visual properties into the rules that can accept them without layout change:

For `.app-hero-section .row .col-lg-7`:
- Add `transition: color 0.15s ease` — but this element has no color property in this rule. I could add a color, but it may conflict with Bootstrap. Adding a transition is harmless.

For `.app-hero-section .badge.bg-warning`:
- Add `border-radius: 4px;` (sharp-edges small radius, Bootstrap default badge radius is larger ~0.375rem = 6px, so 4px is a small change)
- Add `box-shadow: 4px 4px 0px rgba(...)` — hard offset shadow
- Add `transition: box-shadow 0.15s ease, transform 0.15s ease;` — but transform? Changing transform on hover would require a :hover rule, which I'm not adding. Transition without hover is fine.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- Add `box-shadow: 4px 4px 0px rgba(...)`
- Add `border-radius: 4px;`
- Add `transition: box-shadow 0.15s ease;`
- Keep padding as-is.

But hold on — should I be adding declarations at all? The instructions say "Only change colors, shadows, radius, transitions, gradients." This implies these properties exist in the original and I should change them. Since none exist, I could interpret "change" as "set" — i.e., establish the new visual identity.

The self-check says: "✓ Colors throughout the file replaced with fresh palette?" — there are no colors. "✓ Shadows redesigned" — none existed. "✓ Border-radius adjusted for new visual style" — none existed.

I think the intended behavior in these tasks is: if the original has no visual properties, the rewrite may add visual properties to the given selectors as long as layout is unchanged. But there's risk: adding box-shadow to a badge might be undesirable if Bootstrap already has it. However, this is a fragment of a custom CSS file, and the task explicitly demands a visual refresh.

Let me also consider: maybe the original CSS block is just a fragment and I should only output the same selectors with the same declarations, because there's nothing to change. The "Previous attempt didn't change enough" feedback strongly suggests I need to make visible changes. But in this particular fragment, the only mutable property is padding (±20%). Padding is `var(--space-md)`, which I cannot compute. I could change it to `calc(var(--space-md) * 0.9)` to reduce by 10%, which is within ±20%. But that's still a layout-adjacent change, and it's risky.

Actually, padding is allowed to change within ±20%. So I could change `var(--space-md)` to `calc(var(--space-md) * 1.1)` (increase 10%) to make a subtle but compliant change. But `calc` might not be desirable. Alternatively, I could leave padding and just add decorative properties.

I'll go with a conservative approach: keep all three original rules and declarations exactly, and ADD purely decorative declarations that align with sharp-edges (hard offset shadows, small border radius, snappy transitions). I'll use a fresh palette consistent with the target: balanced harmonious palette. Since this is a "saishi" (赛事 = competition/tournament) stylesheet, a competitive sports vibe could use fresh colors. But I shouldn't override Bootstrap's badge colors? The `.badge.bg-warning` is a Bootstrap warning badge (yellow). If I add a box-shadow, I could use a darker yellow/amber shadow like `rgba(214, 158, 46, 0.5)` for a hard shadow... but hard offset shadows typically use a solid opaque color. For the sharp-edges effect: "Hard offset shadows: 4px 4px 0px solid color" — i.e., `box-shadow: 4px 4px 0px 0px #color`. 

Let me pick a palette:
- Primary deep teal: #0f4c5c or #1a5b6e
- Accent warm amber: #e8a33d
- Shadow dark: #0b2b33
- For contact cards, a light surface with a hard offset shadow in teal.

Actually, since I don't know the surrounding CSS, adding color values might clash. But the task explicitly wants a fresh palette. I'll add:

For badge:
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    border-radius: 0.25rem;
    box-shadow: 4px 4px 0px 0px rgba(15, 76, 92, 0.9);
    transition: box-shadow 0.15s ease, border-radius 0.15s ease;
}
```

Wait — I cannot change font-size? Actually the never-change list says font-size is never change. The original has `font-size: 0.85rem;` so I keep it exactly.

For contact cards:
```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    border-radius: 0.25rem;
    box-shadow: 4px 4px 0px 0px rgba(15, 76, 92, 0.85);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
```

Hmm, but adding `transform` in a transition doesn't change anything by itself. Okay.

For the hero col:
```css
.app-hero-section .row .col-lg-7 {
    text-align: center;
    transition: color 0.15s ease;
}
```

But adding a transition for color when no color is set is harmless. Alternatively, I could add `transition: box-shadow 0.15s ease;` but there's no shadow. I'll keep it simple.

Actually, let me reconsider whether I should add declarations to `.app-hero-section .row .col-lg-7`. It's a layout column; adding a transition is pointless but harmless. I might skip it to avoid noise. But the task says "Only change colors, shadows, radius, transitions, gradients" — so transitions are desired. I can add transitions to each rule.

Let me also think about the "symmetric-grid" target style — it's labeled "(Aggressive only)" so I won't implement grid changes. Good.

Let me also consider the disclaimer: "No  comments", "No markdown fences". So output should start with `@media`.

Now, should the `!important` on padding be preserved? Yes, keep it exactly.

Let me draft:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 0.25rem;
        box-shadow: 4px 4px 0px 0px rgba(15, 76, 92, 0.85);
        transition: box-shadow 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 0.25rem;
        box-shadow: 4px 4px 0px 0px rgba(15, 76, 92, 0.8);
        transition: box-shadow 0.15s ease, border-radius 0.15s ease;
    }
}
```

Wait, but there's a subtle issue: adding `border-radius` to Bootstrap's `.badge` — Bootstrap's badge has `border-radius: 0.375rem` (rounded-pill is optional). Overriding to 4px (0.25rem) matches sharp-edges. Good.

Also, the shadow color: `rgba(15, 76, 92, 0.85)` is a dark teal. For the hard offset shadow, a solid color might be better per the variant description "4px 4px 0px solid color". Using `rgba` with alpha is a bit softer. The variant says hard offset shadows with solid color, so I'll use an opaque color, e.g., `#0f4c5c`. But `box-shadow` with `0px` blur and solid color is hard. Let me use `box-shadow: 4px 4px 0px 0px #0f4c5c;`. That's a hard offset shadow.

But wait: a 4px hard offset shadow on a badge might make it look like a sticker. That matches the sharp-edges aesthetic. Good.

For the contact cards, hard shadow `4px 4px 0px 0px #144e5e` or similar. Let me use a slightly different shade for variance: for cards use `#0e3b47`? Actually consistent shadows are recommended per the target style. I'll use the same shadow color everywhere for consistency.

Let me pick:
- Shadow color: `#0F4C5C` (deep teal)
- Or use the accent: `#D96C2C` (burnt orange) — hard shadows often look good in a darker accent. Since the badge is `bg-warning` (yellow), a dark teal shadow would be complementary. For contact cards on a likely light background, a deep teal shadow is good.

Let me finalize:

Palette:
- Shadow/hard accent: `#0F4C5C` (teal dark)
- Border radius: `0.25rem` (4px)
- Transitions: `0.15s ease` (snappy, per sharp-edges)

Also, maybe I should use an accent shadow color like `#2E5E4E`? Let me keep it simple and consistent.

One more consideration: The original media query is `max-width: 575.98px` (Bootstrap sm breakpoint). I must preserve that exactly.

Now, the self-check:
- Selectors preserved: yes, `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article, .contact-quick-section .contact-card`.
- display/position/grid/flex unchanged: none present.
- width/height/padding/margin: padding kept same (var(--space-md)).
- font-family/size/weight/line-height unchanged: font-size kept 0.85rem.
- Colors replaced with fresh palette: added new colors (the fragment had none).
- Shadows redesigned: added hard offset shadows.
- Border-radius adjusted: added 4px.
- No AI comments: yes.

This seems good. But I'm a little concerned about adding properties not in the original. Is that within the task? The task says "Only change colors, shadows, radius, transitions, gradients." In a file with none of these, the only way to refresh is to add them. I'll proceed.

Actually, let me reconsider whether to add `transition` to `.app-hero-section .row .col-lg-7`. It has `text-align: center;`. Adding `transition` doesn't make sense for text-align (not animatable in the traditional sense). I could add nothing there, or add `transition: color 0.15s ease`. It's harmless. But to minimize noise, I might skip it. However, the "sharp-edges" variant calls for snappy transitions. I'll add transitions only where they relate to the newly-added visual properties (box-shadow, border-radius). For the hero column, there's nothing visual changed, so no transition needed.