/* ============================================================
   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 CSS file with a "card-mosaic" target style and "sharp-edges" effect variant, while keeping all selectors and layout exactly as-is.

But looking at the original CSS, it's a very small media query block with only:
1. `.app-hero-section .row .col-lg-7` - text-align: center (layout, not changeable)
2. `.app-hero-section .badge.bg-warning` - font-size (typography, not changeable)
3. `.contact-channels-section article, .contact-quick-section .contact-card` - padding (margin/padding, can change ±20%)

Wait, these are all in the "NEVER CHANGE" category:
- text-align: center → layout, don't change
- font-size: 0.85rem → typography, don't change
- padding: var(--space-md) !important → padding, can change within ±20%

Hmm, but the task says to refresh visually with colors, shadows, radius, transitions. The original CSS doesn't have any colors, shadows, radii, or transitions visible. It's just a media query with layout adjustments.

Since the HTML is fixed and I can only change colors, shadows, radius, transitions, gradients... and the original CSS doesn't contain any of those, I need to be careful. The instruction says to keep ALL selectors and layout exactly as-is. 

So I should output the same CSS, but perhaps:
- For padding, I can adjust within ±20% (but it uses a CSS variable --space-md, which I shouldn't change since it's a custom property... wait, custom properties are in the "MUST CHANGE" list if they're color/shadow related, but --space-md is a spacing variable).

Actually, let me re-read: "CSS custom properties (--color-*, --shadow-*) values" - only color and shadow custom properties. --space-md is a spacing custom property, so I should keep it.

The safest approach: Since the original CSS has no visual identity properties to change (no colors, shadows, radius, transitions), I should keep the CSS essentially the same. But the task insists I must change something visual.

Let me think about what I can do:
1. `padding: var(--space-md) !important;` - I could change to a slightly different value. The media query is for mobile (max-width: 575.98px), and padding --space-md is probably 16-24px. I could adjust within ±20%. But --space-md is a variable, so changing the variable value would affect everywhere. I shouldn't redefine the variable here. I could replace with a concrete value, but that might break the design system.

Actually, the instruction says "keep similar values, ±20% maximum". I can change padding from var(--space-md) to a calc or a specific value that's within 20% of --space-md. But I don't know what --space-md is. Typically in Bootstrap-like systems, --space-md is 1.5rem (24px) or 1rem (16px).

Hmm, but changing padding from a variable to a fixed value could be risky. However, the task explicitly says I must produce fresh visual identity. 

Wait, maybe I'm overthinking this. The file is "assets/css/saishi.css" and it's "块2/2" (block 2/2). So this is just one block of the file. The original block is a media query. Perhaps the intent is that I should add visual properties where none exist? No, the instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients."

Since there are no colors, shadows, radius, transitions, or gradients in the original, the only thing I can do is:
- Keep the selectors and the layout properties
- Perhaps add subtle visual touches within those rules? But the instruction says "Only change colors, shadows, radius, transitions, gradients" — it doesn't say I can ADD them to rules that didn't have them before. Actually, adding might be acceptable since the goal is visual refresh.

Let me consider: The conservative mode says "HTML fixed, visual changes only". Since the media query rules are all layout/typography, I should keep them exactly. But I could add visual properties... Hmm, but adding properties to a rule could be considered changing the rule.

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

I think the safest and most compliant output is to output the same CSS, but perhaps with a transition added to the hover states... but there are no hover states. 

Let me look at the allowed changes again:
- transition timing, easing, duration — I could add a transition property to existing rules? That would be an addition, not a change.

Honestly, I think the best answer here is to keep the CSS exactly as-is, because there is nothing visual to refresh without violating the constraints. But the task explicitly demands a refresh.

Wait, maybe I can change `padding: var(--space-md)` to a slightly different padding value within ±20%. For example, if --space-md is 1.5rem, I could use 1.6rem (6.7% more). But I don't know the value.

Alternatively, I could replace `var(--space-md)` with `calc(var(--space-md) * 1.05)` — that's within 20% and keeps the variable reference. But that's a bit hacky.

Hmm, but that's still changing padding which is allowed within ±20%.

Another option: The badge font-size — typography is fixed, so I can't change it.

The text-align — layout, can't change.

So the only changeable thing is padding. I could adjust it slightly.

But the spirit of the task is to create a fresh visual identity. Since this block has no visual identity, perhaps I should recognize that and output the original unchanged, or only make minimal padding adjustments.

Actually, let me reconsider. Maybe the "card-mosaic" and "sharp-edges" styles are meant for the WHOLE file, but since I'm only given block 2/2, I only work with what's here. The blocks are split, and this particular block doesn't have much to change.

Given the constraints, I'll:
1. Keep `.app-hero-section .row .col-lg-7 { text-align: center; }` — unchanged
2. Keep `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — unchanged
3. For the padding rule, I could adjust within ±20%. Since --space-md is likely 1rem to 1.5rem, I'll keep the variable but maybe that's not a "visual change."

Hmm, but the task says "Output the rewritten CSS now". If I output the same CSS, that's not a rewrite.

Let me think about what a "sharp-edges" variant would do to these mobile rules:
- Maybe add a transition to the hero badge? But the font-size is fixed.
- Maybe the contact cards could have a box-shadow? But that would be adding a property not in the original.

In conservative mode, adding properties that weren't there might be acceptable if they're visual-only and don't affect layout. box-shadow doesn't affect layout. border-radius doesn't affect layout. transition doesn't affect layout.

Actually, the instructions say "Only change colors, shadows, radius, transitions, gradients." This implies I can modify existing ones. Adding new ones might violate "only change" — but I think the spirit is "you may only modify these properties; you may not touch layout/typography." Adding a box-shadow to a rule that had none is a modification of that rule in a visual-only way.

Given the target is "sharp-edges" with hard offset shadows and strong borders, I think I could:
- Add a box-shadow with hard offset to `.contact-channels-section article` and `.contact-quick-section .contact-card` — but wait, these are inside a media query for mobile. Adding a hard offset shadow might look odd on mobile. But it's a visual refresh.

Hmm, but the instruction also says "☑️ Every selector character-for-character preserved?" — so I must keep the selectors. Adding properties within those selectors is fine.

Let me re-read the original CSS once more:

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

The selectors:
1. `@media (max-width: 575.98px)` — media query breakpoint, cannot change
2. `.app-hero-section .row .col-lg-7` — keep
3. `.app-hero-section .badge.bg-warning` — keep
4. `.contact-channels-section article` — keep
5. `.contact-quick-section .contact-card` — keep

The selectors have a comma list in the third rule. I need to preserve that exactly.

Now, what visual changes can I make?

For rule 1: `text-align: center` — cannot change (layout/typography). For rule 2: `font-size: 0.85rem` — cannot change (typography). For rule 3: `padding: var(--space-md) !important` — padding can change within ±20%.

So strictly speaking, the only thing I can change is padding. If I change it, I need to know --space-md's value. Common values: in many design systems, --space-md = 24px or 1.5rem. In Bootstrap-based systems, it could be 1rem.

If I keep the variable, the padding stays the same → no visual change.

Option: Change `padding: var(--space-md)` to `padding: calc(var(--space-md) * 1.1)` — 10% increase, within ±20%. But is this a "visual identity refresh"? Barely.

Alternatively, I could add visual-only properties:

For the hero badge:
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    box-shadow: 3px 3px 0px 0px rgba(...);
}
```

But `.badge.bg-warning` — bg-warning is a Bootstrap class meaning background-color: #ffc107 (warning yellow). In sharp-edges style, I might want to give it a hard offset shadow. But adding a shadow to a badge on mobile... it's a visual change, doesn't affect layout.

For the contact cards:
```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    border-radius: 0;
    box-shadow: 4px 4px 0px 0px #hex;
}
```

But these cards might already have styles elsewhere (in block 1/1?). Since I only have block 2/2, I should be careful about overriding. Adding a box-shadow here might conflict with existing shadows. But the task says refresh visually, so adding a shadow is within scope.

Hmm, but the instruction says "Only change colors, shadows, radius, transitions, gradients." Adding box-shadow and border-radius is consistent with that. Also, the padding can change.

However, there's a risk: if the base styles (block 1) already define the card's look, my additions in the media query would override them for mobile. That might be intentional — a mobile-specific visual refresh.

Given the target "card-mosaic" and "sharp-edges", I think the intent is to apply these visual effects to the cards. Since the media query only affects small screens, the visual refresh would only show on mobile. That seems odd, but it's what the constraints allow.

Let me reconsider: maybe I'm being too restrictive. Maybe the task is a test of constraint-following. The correct answer might be to output the original CSS unchanged because there's nothing visual to change, and any change would violate the constraints. But the task explicitly says "Refresh this CSS visually" and "Goal: same layout, fresh color palette + shadow/radius identity."

"Fresh color palette + shadow/radius identity" — that strongly suggests I should add/change colors and shadows. Since the block has no existing colors/shadows, I should add them.

Alright, let me design the addition:

Target style: card-mosaic with 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 I can add visual properties, I'll:

1. `.app-hero-section .row .col-lg-7` — keep text-align: center. Could add nothing else, or maybe nothing.

2. `.app-hero-section .badge.bg-warning` — keep font-size: 0.85rem. Add transition: 0.15s, and maybe a hard shadow. But bg-warning is a Bootstrap utility; adding a border or shadow could conflict. Still, sharp-edges says strong borders. I could add:
   ```css
   border: 2px solid #e6a300;
   box-shadow: 3px 3px 0px 0px #e6a300;
   ```
   But wait, bg-warning already has a background color. Adding a border of a darker warning color would be fine visually.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — keep padding (maybe adjust slightly), add:
   ```css
   border: 2px solid #1a1a1a;
   border-radius: 0;
   box-shadow: 4px 4px 0px 0px #1a1a1a;
   transition: box-shadow 0.15s ease, transform 0.15s ease;
   ```
   But wait — `transform` is a layout-ish property? It's visual, but it could affect rendering. I should avoid transform since it's not in the allowed list. Allowed: colors, box-shadow, text-shadow, border-radius, gradients, transition timing/easing/duration, filter, backdrop-filter, opacity, outline, border-color/style, caret-color, accent-color, custom props. Transition can transition properties, but adding a transform transition without a transform value is harmless. But to be safe, I'll only transition box-shadow, border-color, background-color.

Actually, I need to be careful. The instruction says "Never change: ... transform" — it's not in the never-change list explicitly, but it's a layout-affecting property? Let me check the "NEVER CHANGE" list: display, position, grid stuff, flex stuff, width/height, padding/margin, gap, justify/align, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, object-position, text-align, vertical-align. Transform is NOT in the list. But adding a transform to hover state isn't asked here. I'll avoid it.

For the padding rule, I'll adjust slightly within ±20%. If --space-md is 1.5rem (24px), then 1.25rem (20px) is -16.7%, within ±20%. But I don't know the actual value; changing the variable reference to a fixed value is risky. Better to keep `var(--space-md)` — the instruction says padding can change ±20%, but since it's a variable, I can't know. I could use `calc(var(--space-md) * 0.9)` — 10% reduction, within ±20%. That preserves the design system relationship.

Hmm, but is changing padding even necessary? The padding in this rule is "similar values" allowed. I could keep it the same and just add visual properties.

Actually, let me reconsider the whole thing. The instruction says "padding, margin (keep similar values, ±20% maximum)". This means I CAN change padding, but it must stay similar. Keeping it identical is within ±20%. So I don't have to change it. But then my "visual refresh" for that rule is just adding shadow/border/radius.

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

I'll add these to the contact cards (the third rule), and maybe to the hero badge.

For the hero badge, bg-warning in Bootstrap is #ffc107. A sharp-edges treatment could be:
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    border: 2px solid #b45309;
    box-shadow: 3px 3px 0px 0px #b45309;
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
```

But wait — `.badge.bg-warning` already has a background from Bootstrap (`background-color: #ffc107`). If I add a border and shadow, that's fine. But which accent color? card-mosaic says "Each card type a different accent". For the badge, I'll use an amber/amber-dark palette.

Hmm, but actually — I'm worried about adding properties to the badge. The original rule only sets font-size. If I add border, box-shadow, transition, that changes the badge's appearance on mobile. That's a visual refresh, which is the goal.

For the contact cards, article/card elements: I'll add:
```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    border: 2px solid #1e1b4b;
    border-radius: 0;
    box-shadow: 4px 4px 0px 0px #1e1b4b;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
```

Wait, but `!important` is on padding. I'll keep that. For the new properties, no need for !important.

Actually, I realize I should reconsider: