/* ============================================================
   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 while preserving all selectors and layout. The original CSS is:

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

Constraints:
- Target style: horizontal-strips (alternating backgrounds)
- Effect: sharp-edges (hard offset shadows 4px 4px 0px, small border-radius 0-4px, strong borders 2-3px, snappy transitions 0.15s)
- Must keep text-align, font-size, padding values (within ±20%)
- Since this is a mobile media query, I can add visual properties like colors, borders, box-shadows, border-radius, transitions to the existing selectors.

But wait — the selectors are fixed. I can't add new selectors. So I need to apply visual changes to the existing selectors only.

Let me think about what I can add:

1. `.app-hero-section .row .col-lg-7` — text-align is center. I can add color, maybe a background? But careful not to change layout. Adding padding would be a layout change. I can add color, text-shadow.

2. `.app-hero-section .badge.bg-warning` — font-size 0.85rem. I can add background color (but bg-warning is a bootstrap class — but the CSS here redefines visual). I can add background, color, border, box-shadow, border-radius, transition.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — padding var(--space-md) !important. I can add background-color, border, box-shadow, border-radius, transition.

The instruction says "Colors throughout the file replaced with fresh palette" — but the original has no colors. So I'm adding new colors.

Target palette: alternating white / cream / dark / white, strong color zones. Sharp edges: 4px 4px 0px solid offset shadows, border-radius 0-4px, strong borders 2-3px solid, transitions 0.15s.

Since these are inside a media query max-width 575.98px (mobile), I should keep it reasonable.

Let me design:

For `.app-hero-section .row .col-lg-7`:
- Keep text-align: center;
- Maybe add color: a dark tone. Add text-shadow? Since it's a hero section at mobile, maybe a subtle text-shadow.

For `.app-hero-section .badge.bg-warning`:
- font-size: 0.85rem;
- Add: background-color: a strong warning-ish color, color: dark, border: 3px solid dark, box-shadow: 4px 4px 0px dark, border-radius: 0px, transition: all 0.15s ease.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
- padding: var(--space-md) !important;
- Add: background-color: white (with alternating?), border: 2px solid dark, box-shadow: 4px 4px 0px dark, border-radius: 0.

But since the target style is "horizontal-strips" with alternating backgrounds, maybe I can give the contact cards a white background with dark borders.

I should be careful about the `bg-warning` class — Bootstrap's `.bg-warning` sets background-color. Overriding it with a custom background-color is fine.

Let me create a cohesive palette:
- Cream: #FDF6E3 or #FFF8E7
- Dark: #1E1E1E or #2B2B2B
- Strong color: maybe an orange/amber for warning: #FFB800 or #FFA000
- White: #FFFFFF

Sharp edges palette (like a neo-brutalist / Swiss style):
- Dark ink: #16161E
- Cream: #F4F1EA
- Accent (warning): #FFB800
- Paper white: #FFFFFF

Let's write:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #16161e;
        text-shadow: 2px 2px 0 rgba(255, 184, 0, 0.35);
    }

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

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #ffffff;
        border: 2px solid #16161e;
        border-radius: 0;
        box-shadow: 4px 4px 0 #16161e;
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }
}
```

Wait — I need to check if adding `transition` and `transform` is okay. `transform` isn't in the forbidden list? Let me check the forbidden list:

- display, position, grid-*, flex-*, width, height, min/max, padding, margin, gap, justify-content, align-items, align-self, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, object-position, text-align, vertical-align.

`transform` is not in the forbidden list, so adding `transform` as a transition property is okay, but I shouldn't add `transform` as a value unless it's a hover effect... but I'm not adding hover selectors (can't add selectors). The transition on transform is harmless.

Actually, to be safe, I'll just transition box-shadow and background-color.

Also for the hero col-lg-7 — text-align: center is a layout property that must stay. Adding color and text-shadow is fine.

Now, since the palette mentions "Alternating: white / cream / dark / white", maybe I should differentiate the contact cards vs the badge. The badge is on hero section — could be cream or dark. The contact cards could alternate white and cream.

But since there are two selectors in one rule (article and contact-card), they'd get the same style. I can't split them without changing the selector list. I could give them the same style.

Let me think about whether to add `outline` — the instructions mention outline-color as changeable. I don't need to add it.

Should I adjust border-radius? Original has none, so adding 0 or 2px is fine. Sharp edges variant wants 0-4px, so 0 is perfect.

Let me refine to make it look intentional:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1c1c1c;
        text-shadow: 2px 2px 0 rgba(255, 184, 0, 0.3);
    }

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

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

Hmm, should I vary the shadow color between the two? Maybe give the contact cards a cream background and a different shadow accent? The strong color zones suggest amber as accent. The shadow could be amber for cards? Let's make the badge shadow dark and the card shadow amber for variety:

- Badge: dark border, dark shadow, amber background
- Cards: dark border, amber shadow, cream/white background

Or:
- Cards: amber border? Strong borders 2-3px solid. Might be too much.

Let's go with a coherent neo-brutalist look:

- Ink: #222222
- Paper: #FFFDF5 (cream white)
- Amber: #FFB800
- Dark strip: maybe for the hero text? No.

I'll keep it simple and cohesive.

Let me double-check the padding constraint: "padding: var(--space-md) !important" — I must keep this exactly (the original value). The instruction says padding can change ±20% but var(--space-md) is a variable, so I'll keep it exactly as-is.

Font-size: 0.85rem — keep exactly.

Text-align: center — keep exactly (it's in the protected list).

Now, the output must be only the rewritten CSS. I'm allowed to keep the same structure. Since there were no colors originally, everything I add is new.

One more consideration: the target style says "Full-width sections (width: 100%)" — but I can't add width to these selectors because that would change layout? Actually width: 100% on a col-lg-7 might break the grid. The instruction says grid column count must match HTML. I shouldn't add width. Also "Each strip with distinct padding (60-100px vertical)" — I can't change padding much, and var(--space-md) is probably ~24px. The target layout pattern is "Aggressive" but I'm in Conservative mode per the top instructions. The file-specific instructions say "Layout pattern (Aggressive only)" — but the main system prompt says conservative mode, never change layout. So I'll only change visual properties.

The target pattern is about the palette and effects. I'll use the palette ideas (alternating cream/dark/white) via colors in the existing elements, without changing layout.

Let me finalize:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #171717;
        text-shadow: 2px 2px 0 rgba(255, 184, 0, 0.25);
    }

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

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #fffdf5;
        border: 2px solid #171717;
        border-radius: 0;
        box-shadow: 4px 4px 0 #ffb800;
        transition: box-shadow 0.15s ease, background-color 0.15s ease;
    }
}
```

Wait, one thing: `.app-hero-section .badge.bg-warning` — Bootstrap's `.badge` has `border-radius: 0.375rem` typically. Adding border-radius: 0 aligns with sharp-edges. Good.

The `.contact-card` in Bootstrap might have cards with border-radius; setting it to 0 is fine.

Also note: `bg-warning` in Bootstrap sets `--bs-warning-rgb` background. Our override will apply since this stylesheet probably loads after Bootstrap, and specificity: `.app-hero-section .badge.bg-warning` (0,3,0) beats `.bg-warning` (0,1,0). Good.

I should make sure I'm not violating the "no markdown fences" rule and start with the CSS directly.

Also check: the instructions say "border-color and border-style (NOT border-width)" — I'm setting `border: 2px solid #171717` which includes width (2px). The instruction says heavy borders 2-3px are desired in the variant. But the protected list says border-width isn't in the forbidden list actually. Let me re-read.

🔒 NEVER CHANGE list includes: width, height, padding, margin, gap, etc. It doesn't include border-width. And ✅ includes "border-color and border-style (NOT border-width)". So border-width should not be changed. The original has no border, so adding one is new, not a change. But to be safe, could I use `border-color` and `border-style` only, without width? But `border: 2px solid #171717` is a shorthand that sets width too. The variant suggests "Strong borders (2-3px solid)". 

Hmm, the rule says "border-color and border-style (NOT border-width)" — meaning if the original had border-width, I shouldn't change it. Since original has none, adding a border is technically introducing a new border-width. But the variant explicitly asks for strong borders. The instruction also says "Only change colors, shadows, radius, transitions, gradients" in the task. Border is a visual change. To be safe and compliant, I'll use `border-style: solid; border-color: #171717;` without specifying width? But then a default border-width of `medium` (3px) applies, which actually fits the 2-3px strong border ask.

Actually, though, if I use `border: 2px solid` it's cleaner. Given the conflict between "never change border-width" and the variant's "strong borders 2-3px", I think introducing a new border is acceptable because the original had no border to preserve. But strictly reading: "border-color and border-style (NOT border-width)" — this means when changing existing borders, don't alter width. Adding a border where none existed is introducing a new property, which is arguably a change to border-width.

To be maximally safe, I could write:

```css
border-color: #171717;
border-style: solid;
```

This creates a 3px (medium) border by default. That satisfies "strong borders 2-3px solid" and doesn't explicitly change a border-width (since there wasn't one). But it does set border-width implicitly.

Alternatively, use `border: 2px solid #171717` — most CSS designers would interpret the "never change" as about preserving existing layout-structural widths, and 2px borders don't break layout. The instruction "border-width" protection is likely to prevent changing an existing border that could shift layout. Since these elements had no border, adding a 2px border could slightly affect layout (adds 2px around the element, but with box-sizing: border-box, the border is inside the width). Most modern frameworks use border-box, so layout won't shift.

I'll go with `border: 2px solid #171717` because it's clean and aligns with the variant's explicit "Strong borders (2-3px solid)". Actually, wait — if the original had no border, adding a border changes the box model. With border-box, the inner content area shrinks by 2px, which could affect text wrapping inside the badge. Hmm.

To be safe, maybe I should use `outline` instead of `border`? The task says "outline styles (color, type)" are changeable. An outline doesn't affect layout at all. The variant asks for "Strong borders (2-3px solid)" but I could emulate with outline. But border is more authentic to the style.

Actually, let's think about it. The badge is a small pill; adding a 2px border won't meaningfully break anything. The contact cards — adding a 2px border inside border-box shrinks content by 4px total, which is negligible and still within the "±20% padding/margin" tolerance? No, border isn't padding/margin.

Given the instructions emphasize "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" and the variant says "Strong borders", I think a 2px border is fine and expected. This is a common tension in these tasks: the style guide wants borders, the conservative mode says don't break layout. 2px border is a visual change that preserves layout structure. I'll include it.

But to be even safer regarding layout, I could use `box-shadow: 0 0 0 2px #171717, 4px 4px 0 #171717;` — the first shadow acts as a border without affecting layout. That's clever and fully within "box-shadow redesign" which is allowed. This gives a crisp 2px border-like edge plus the offset shadow, without changing the box model at all. That's the best of both worlds.

Let me do that:

```css
box-shadow: 0 0 0 2px #171717, 4px 4px 0 #171717;
```

Wait but a second shadow at 4px 4px 0 with same color would merge with the first? No — the 0 0 0 2px is a ring right at the element edge; the 4px 4px 0 is a solid offset block. The ring and the offset block would be adjacent, with the ring visible on top/left and the offset visible on bottom/right. Actually the second shadow is drawn beneath the first. The result: on the top-left, the ring shows; on the bottom-right, the offset shadow extends 4px beyond, but the ring also extends 2px beyond there, so the offset starts right after the