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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

We need to rewrite the CSS provided. The original is a small block within a media query. We need to preserve selectors exactly, layout properties (like padding, text-align, font-size) within ±20% margin. However the instructions say only colors, shadows, radius, transitions, gradients, etc. We must not change padding? Actually padding is listed under NEVER CHANGE: "padding, margin (keep similar values, ±20% maximum)". So we can adjust slightly but should keep similar. Font-size is in typography and must not change. Text-align is layout? It's under layout? Actually text-align is listed under layout: "text-align, vertical-align" must not change. So we must keep those.

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

We need to change visual identity. But there are no colors/shadows/radius here. We may add new declarations? The instruction: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." So we can add properties to the existing rules that are visual, as long as we don't change layout. We can also modify existing declarations if they are visual. But we cannot change text-align, font-size, padding (except within ±20%). Actually we can adjust padding within 20% but better keep as is. The target style is "sharp-edges" with hard offset shadows, small radius, strong borders, snappy transitions. Since the original has no such properties, we can add them to the elements to achieve a new visual identity. But careful: adding box-shadow, border, background, color to these elements may not affect layout. It's okay. But we must preserve the media query breakpoint.

We need to create a fresh palette. Let's consider the context: These are app hero section, badge warning, contact channels/cards. We can add accent color, background tweaks, border, box-shadow, transition. We must preserve class names and selectors.

We can also change `padding` slightly? It says keep similar within ±20%. `var(--space-md)` is a CSS custom property. We could change the custom property value, but that custom property might be defined elsewhere. We don't have control. Better leave padding as is. If we change it to a different var, that might violate "padding keep similar". So keep exactly.

We can add `border: 2px solid #...`, `border-radius: 0`, `box-shadow: 4px 4px 0 0 #...`, `transition: box-shadow 0.15s ease, transform 0.15s ease` but transform is animation/layout? Transform is animation property, but it can affect visual; however if we set transform, it might cause layout shift? It's okay but target says only visual changes. But we should avoid changing layout. Transform doesn't affect layout. Yet the instruction says "Only change colors, shadows, radius, transitions, gradients." It doesn't explicitly mention transform. Better not add transform, or we can add transition for colors/box-shadow. We can add `transition` as visual. We can add `outline`, `caret-color`, `accent-color`? Probably not necessary.

The elements selected:
- `.app-hero-section .row .col-lg-7`: a column likely containing text, with text-align center. We could add `color: #...`, `text-shadow: ...`? text-shadow is allowed. But if the parent has text, changing color might be okay. However this rule currently only sets text-align. We can add `color` and `text-shadow` as visual. But careful: this might affect descendants that already have their own colors. But it's fine.

- `.app-hero-section .badge.bg-warning`: a warning badge. We can change its background/border/shadow. But it uses Bootstrap classes `.badge.bg-warning`. Changing background-color via this rule would override Bootstrap. That's okay. Add `background-color`, `border`, `border-radius`, `box-shadow`, `transition`.

- `.contact-channels-section article, .contact-quick-section .contact-card`: elements with padding. We can add `background-color`, `border`, `border-radius`, `box-shadow`, `transition`. But we must be careful that these selectors are combined; we'll add same declarations.

The media query is max-width 575.98px, so this is mobile. We can still use hard offset shadows, but on small screens maybe 4px 4px 0 is okay.

Need to self-check: Preserve selectors exactly. Use same selectors. Add properties with `!important`? We need to match the existing `!important` on padding. For the contact cards, padding already has !important. We can add other declarations without !important, or with !important if needed to override. Better to use normal specificity. But if Bootstrap has background etc, our rule may lose. We can add `!important` to visual properties to ensure override. However instruction says "NO  comments". It doesn't say no !important. But using !important excessively may be bad. Yet original uses !important for padding, so adding !important to override external styles is acceptable.

We should also consider `bg-warning` is a Bootstrap utility class with `background-color: #ffc107 !important` maybe. To change it, we need `background-color: <new color> !important;` in our rule. But is that considered layout? No. We can do that.

Let's craft a fresh palette. Target sidebar-classic colors: sidebar darker (#252e3a), main lighter, accent. But those are for layout. We can use a cohesive palette:
- Main text color: #1e2a3a (dark navy)
- Accent: #e67e22 (orange) or maybe #c0392b? But warning badge is orange/warning; let's go with a teal/blue accent? Actually "functional accent for actions" maybe amber. Let's pick a distinct modern palette: 
  - Deep navy background for contact cards: #1f2a3a
  - Text on dark: #f0f4f8
  - Accent: #f59e0b (amber) for badge
  - Border: #0f172a (dark slate)
  - Shadow color: #0f172a
- Hero column text color: #22303f
- Text shadow maybe subtle.

But we must be mindful: `.contact-channels-section article` and `.contact-quick-section .contact-card` are likely light cards on a light background. If we set background dark, text inside might become invisible because it was designed for light. We cannot change typography colors inside. We could set a light background with a strong border and shadow. Better to keep background light, use shadow/border to achieve sharp-edge style. For example:
- background: #fffdf7 (warm white)
- border: 2px solid #1e293b
- border-radius: 0
- box-shadow: 4px 4px 0 0 #1e293b
- transition: box-shadow 0.15s ease, background-color 0.15s ease

This gives a neo-brutalist sharp edge. For badge:
- background-color: #f59e0b (amber)
- border: 2px solid #1e293b
- border-radius: 0
- box-shadow: 3px 3px 0 0 #1e293b
- color: #1e293b? But font-size remains.

For hero column:
- color: #1e293b
- text-shadow: 2px 2px 0 rgba(245, 158, 11, 0.4)? That's a shadow. Allowed.

But maybe adding text-shadow to a column could affect all text in that column. That might be too much. But it's a visual change. Alternatively just `color`.

Need to check: Does adding `color` to `.app-hero-section .row .col-lg-7` override inherited colors? It will set text color for that column. It might be okay.

Let's think about CSS specificity and order. The original file likely contains many rules; our rewritten block will be placed in the same location. We can add declarations to the existing rules. That's fine.

We must output ONLY the rewritten CSS, preserving all selectors exactly and layout properties. We should not change `@media (max-width: 575.98px)`.

Original includes 3 rules. We'll keep them, with modified/additional declarations. For the first rule, originally `text-align: center;`. We can't change that. Add `color: #1b2a3a; text-shadow: 2px 2px 0 rgba(30, 41, 59, 0.12);`? text-shadow is visual.

But perhaps the target "sidebar-classic" and "sharp-edges" suggests the overall system should have dark sidebar, but this CSS block is only mobile. We just need to refresh visual identity.

Let's craft:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1e293b;
        text-shadow: 2px 2px 0 rgba(245, 158, 11, 0.25);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #f59e0b !important;
        border: 2px solid #1e293b;
        border-radius: 0;
        box-shadow: 3px 3px 0 0 #1e293b;
        color: #1e293b;
        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 #1e293b;
        border-radius: 0;
        box-shadow: 4px 4px 0 0 #1e293b;
        transition: box-shadow 0.15s ease, background-color 0.15s ease;
    }
}
```

We added `color` to badge. Font-size remains. Padding remains. Good.

But we must ensure we don't inadvertently change layout. Border, box-shadow, background don't affect layout. Adding border of 2px to elements might increase their size because box-sizing could be content-box; but if box-sizing is border-box globally, no layout change. Even if content-box, border width changes element size and could affect layout. The instructions say "border-color and border-style (NOT border-width)" under allowed changes. Wait! In the NEVER CHANGE list under layout? Let's re-read:

⚠️ NEVER CHANGE (would break HTML layout):
...
• padding, margin (keep similar values, ±20% maximum)
...
• border-color and border-style (NOT border-width) — Actually that's under "MUST CHANGE" section? Let's check original message:

✅ YOU MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow (...)
  • text-shadow
  • border-radius (visual rounding only)
  • gradient ...
  • transition ...
  • filter, backdrop-filter
  • opacity
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
  • caret-color, accent-color
  • CSS custom properties ...

So border-color and border-style can change, NOT border-width. So we should NOT add a new border-width if there wasn't one. If we add `border: 2px solid #...`, that sets border-width, which is forbidden. We must avoid setting border-width. We can use `border-color` and `border-style` if the element already has a border. But here it doesn't. We cannot add border-width. Hmm.

Then how to achieve strong borders? The effect variant says "Strong borders (2-3px solid)" but the instructions explicitly say border-width can't change. Wait, this is a conflict. Let's re-evaluate.

The instructions under "MUST CHANGE" list includes "border-color and border-style (NOT border-width)". That means we can change existing border-color and border-style, but not border-width. It doesn't say we can't add border-width if none existed. However "NEVER CHANGE" list includes "border-color and border-style (NOT border-width)"? Actually no, the NEVER CHANGE list as provided in the user prompt:
- ✅ YOU MUST CHANGE... includes border-color and border-style (NOT border-width)
- 🔒 NEVER CHANGE... doesn't mention border-width. Let's re-read the exact user prompt:

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

So border-width is not to be changed, but adding border-width where there was none would change it. It says "NOT border-width" meaning don't change border-width. Since the original has no border-width, adding one would change from 0 to 2px. That's a layout-affecting change potentially, and it's explicitly prohibited: "NOT border-width". So we should avoid adding border-width. We can change existing borders if present, but there are none.

Similarly, `outline styles (color, type)` allowed, but not outline-width? They say "outline styles (color, type)" so we can't change outline-width. So we can't add outline width.

Thus we cannot add strong borders. We can use box-shadow to simulate borders: `box-shadow: 4px 4px 0 0 #1e293b` and maybe `0 0 0 2px #1e293b`? `box-shadow` with 0 blur and 0 spread? Actually `box-shadow: 0 0 0 2px #1e293b` creates a shadow that looks like a border but doesn't affect layout. That is allowed because box-shadow is listed as must change. We can use multiple box-shadows: one for border-like effect and one for offset hard shadow. Example: `box-shadow: 0 0 0 2px #1e293b, 4px 4px 0 0 #1e293b;` This gives a 2px outline around the element and a hard offset shadow. Great, no border-width needed.

So adjust our design accordingly.

For badge, we can use `box-shadow: 0 0 0 2px #1e293b, 3px 3px 0 0 #1e293b;` but be careful: box-shadow is applied outside the border-box, doesn't affect layout.

For contact cards, use `box-shadow: 0 0 0 2px #1e293b, 4px 4px 0 0 #1e293b;`.

We can also add `outline: none`? Not needed.

Now, `border-radius: 0` is allowed. `background-color` allowed. `transition` allowed. `text-shadow` allowed.

But in the first rule, `text-shadow` is visual. We'll keep.

We must also consider that `.badge.bg-warning` may have `border-radius: 50rem` from badge class. We set `border-radius: 0` to override with same specificity? Our selector `.app-hero-section .badge.bg-warning` has higher specificity than `.badge` maybe, so it will win. But we can add `border-radius: 0 !important;` to be safe? The instruction says not to use AI comments, but !important is okay. Given existing `bg-warning` uses `!important` for background, we should use !important for background-color. For border-radius, Bootstrap badge uses `border-radius: 50rem;` with `.badge` class. Our selector with `.app-hero-section .badge.bg-warning` has specificity 0,3,0? Actually classes: .app-hero-section (0,1,0), .badge (0,1,0), .bg-warning (0,1,0) = 0,3,0. Bootstrap's `.badge` is 0,1,0. So ours wins. No need !important for border-radius. But to be safe, we can use !important.

However, if we add `background-color: #f59e0b !important;`, it overrides `.bg-warning`'s background. Good.

For contact cards, maybe they already have border or box-shadow. We'll set our own.

Now, check margins/padding: We keep padding exactly. Font-size exactly. text-align exactly. Good.

Let's also think about `accent-color`, `caret-color`. Not necessary.

We can also change `--space-md`? It says CSS custom properties values can change. But if we redefine `--space-md` inside the media query, it would change padding because it's var(--space-md). But that might affect layout beyond the allowed ±20%. Not safe. Avoid.

Maybe we can add `background` to hero section column? Like subtle background? But that would be a visual change, but maybe not appropriate. Avoid.

Now, since this is "sidebar-classic" target style, maybe we want darker sidebar, but not relevant here. We'll use colors from a dark slate + amber accent palette.

Let's produce final CSS.

Need to ensure output starts with first CSS character, no markdown.

Let's re-evaluate the allowed `border-style` changes. We can set `border-style: solid` if element has no border? That would add a border with default width (medium = 3px?) depending on if border-width was 0. Actually setting `border-style: solid` when border-width is 0 has no effect. But if border-width is not 0? In our case it's 0. We won't.