/* ============================================================
   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 respond with rewritten CSS only. Need inspect original CSS. It's a media query block with three rules. Need apply target style sidebar-classic? But original is media query. Need keep selectors exactly. Visual changes possible: colors, shadows, radius, transitions, gradients, etc. But no layout changes. We can adjust properties within those rules that exist? Need preserve layout properties. There are no colors currently. Could add new visual properties? The instruction says "Only change colors, shadows, radius, transitions, gradients." But also "Refresh this CSS visually" maybe can add properties? Need be careful. Original CSS only has font-size and padding. These are layout/typography protected? font-size, letter-spacing etc protected "Typography (font system fixed): font-family, font-size..." Wait forbidden: "font-size" cannot change! Original font-size is 0.85rem, keep. Padding protected? "keep similar values, ±20% maximum". It has padding var(--space-md) !important; Keep likely. Text-align protected? Keep. So perhaps we need add color/background/shadow/radius? But selectors exist. Could add declarations to existing rules. Is that allowed? It would change visual identity without changing layout. We can add color, background, border-radius, box-shadow to each selector. But does that break HTML? likely okay. Need all selectors preserved exactly. There are 3 selectors:

1. `.app-hero-section .row .col-lg-7` inside media. Currently text-align center. Keep text-align. We can add color? Not necessarily. The "target style sidebar-classic" specifies palette: sidebar darker, main lighter, functional accent. But this is a small media query. Could set color maybe.

Need obey target style: sharp edges: hard offset shadows 4px 4px 0px solid color; small radius 0-4px; strong borders (2-3px solid); snappy transitions 0.15s. We can alter existing selectors? They don't have boxes. Maybe add box-shadow to contact cards? But "Only color, shadows, radius, transitions, gradients" means can add those properties to the existing selectors. The instruction says "Refresh this CSS visually" and "Only change colors, shadows, radius, transitions, gradients." It doesn't necessarily forbid adding new declarations. But "Keep ALL selectors and layout exactly as-is" means we cannot add display etc. Adding box-shadow to text-centered hero section could be weird. We can add border-radius, box-shadow to `.contact-channels-section article, .contact-quick-section .contact-card` (cards). That makes sense. For badge maybe add accent color? But original has `.badge.bg-warning`, background is probably via Bootstrap bg-warning. We can override background? If we override color? Need preserve layout? Could set `background-color` and `color`, `border-radius`, `box-shadow`, `transition` perhaps. But selector's bg-warning is a class, adding our color is okay. Need avoid altering font-size. Need keep padding.

Need be mindful original media max-width 575.98px. We can add comments? No comments? "No AI-REWRITTEN comments" but can have comments? Probably okay, but output CSS only. Use no comments.

Need perhaps include CSS custom properties? Original doesn't. We could add `--sidebar-bg` etc? But "only colors shadows..." Adding custom properties is visual, okay. But not necessary.

Need determine palette. Target "sidebar-classic" with "sidebar darker (#252e3a), main lighter, functional accent." Since this is media query for mobile, perhaps use accent for badge, card. Maybe use colors:

- sidebar dark #252e3a (for contact card backgrounds maybe)
- main lighter #f4f1ea or #faf8f5 main background? But applying background to many could be okay.
- functional accent maybe #c96f4a (burnt orange) or #e28413. Need choose.

Need not change layout too much. For `.app-hero-section .row .col-lg-7` text-align center. Add `color: #252e3a;`? But font sizes fixed. Could add `text-shadow`? Hmm.

For `.app-hero-section .badge.bg-warning`: Add background-color: accent; color: white; border: 2px solid dark; border-radius: 0; box-shadow: 4px 4px 0 #252e3a; transition: background-color 0.15s ease, transform? Wait transform is animation property? It's not in forbidden list? transform could affect layout but could move. Avoid. Add transition for background-color, color, box-shadow maybe. But `transition` allowed. If variant "snappy transitions (0.15s)" we can add `transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;`. Need maybe add `.app-hero-section .badge.bg-warning:hover`? Cannot add selectors? Wait "Selectors: keep exactly". It doesn't say cannot add selectors? It says "Every selector character-for-character pre served?" Existing selectors must remain. Adding selectors? The HTML is fixed; adding hover selector is likely okay? But "Only rewrite CSS preserving ALL selectors" and "Pseudo-classes (:hover...) keep exactly." Could add `:hover` variants? In original none. But target style includes transitions; adding hover state might require new selector, which maybe is not allowed because HTML fixed but CSS can have pseudo-classes. However "Selector lists (commas)" etc. Since original CSS snippets do not include hover, adding could be okay? But for safety, don't add new selectors. If we add transition but no hover effect, transition worthless. Could still set transition for focus? But no. We can apply transition on the base selector, and maybe on `:hover`? The instruction says "selectors: keep exactly (.post-card stays .post-card)" not "do not add new selectors." It says "Pseudo-classes (:hover, :focus, ::before, ::after)" under never change. This means preserve them if present, but adding maybe not. The output is supposed to be same selectors? "Keep ALL selectors exactly as-is." Safer to not add new selectors. But can we add `transition` on base for when class changes? Might not do anything. Maybe acceptable.

The task specifically: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It doesn't say "do not add selectors." But if we add `*`? no. But could use existing selectors to define transforms? Hmm.

Need maybe produce CSS with same three selectors, within media query, and additional declarations. Need preserve selectors exactly. Need preserve `@media (max-width: 575.98px)` condition exactly? It's a media query breakpoint, protected? "media query breakpoints (conditions only)" Keep same.

Let's analyze original CSS.

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

Protected properties: text-align center must remain. font-size .85rem must remain. padding var(--space-md) !important must remain (within 20%; cannot convert to different? It's a var, but can maybe comment? Keep exactly). Need maybe adjust padding? If we need sharp-edges, not padding. So preserve those declarations.

Now what can we change? Add color, background-color, border, border-radius, box-shadow, transition, maybe text-shadow. Need be tasteful.

Given target style sidebar-classic: "Sidebar darker (#252e3a), main lighter, functional accent." In media query mobile, maybe make contact cards dark sidebar? Or maybe background to main lighter? We don't know layout. Let's inspect names:

- `.app-hero-section` likely hero section of app landing, `.row .col-lg-7` text. 
- `.app-hero-section .badge.bg-warning` likely a Bootstrap warning badge.
- `.contact-channels-section article` and `.contact-quick-section .contact-card` are cards in contact section.

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

Colors:
- Dark: #252e3a.
- Main lighter: #f6f3ef or #faf8f5.
- Functional accent: #d97747 maybe (burnt orange) or #c45d2d. Need use.

For hero section col-lg-7: Could add `color: #252e3a;` maybe maybe not. It currently text-align center. Add `background: transparent`? no. Maybe add `text-shadow: 2px 2px 0 rgba(37,46,58,0.12);`? Text-shadow allowed. But variant sharp edges maybe text-shadow 2px 2px 0. Could be okay. But maybe not.

Badge: Override Bootstrap warning background to accent. Add `color: #fff; background-color: #d97747; border: 2px solid #252e3a; border-radius: 0; box-shadow: 4px 4px 0 #252e3a; transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;`. Keep font-size .85rem. Maybe `display` not change. If add padding? not needed.

Contact cards: `.contact-channels-section article, .contact-quick-section .contact-card` add `background-color: #faf8f5; border: 2px solid #252e3a; border-radius: 4px; box-shadow: 4px 4px 0 #252e3a; transition: box-shadow 0.15s ease, background-color 0.15s ease;` Keep padding var(--space-md) !important. This fits target. But "main lighter" would be #faf8f5; dark accent border/shadow.

Could also set `.app-hero-section .row .col-lg-7` maybe `color: #252e3a;` or `caret-color`? Not needed.

Need consider that `.contact-channels-section article` and `.contact-quick-section .contact-card` have combined selector. Need preserve the comma and whitespace exactly? "contact-channels-section article,\n    .contact-quick-section .contact-card". We can preserve.

Potential issue: Adding `border` and `box-shadow` to articles/cards might alter box sizing? The CSS "box-sizing" protected. We cannot change it. If card already has border or box-shadow? Original no. Adding border 2px could change total size within fixed width if box-sizing is content-box, might affect layout. But target says strong borders 2-3px solid. To avoid layout shift, could keep border-width same? But "NEVER CHANGE border-width" maybe means don't alter existing `border-width`; adding border to element that didn't have one might change layout. However since padding kept same and width not set in this block, likely it may affect layout if parent grid? But any visual refresh can. But constraint "width, height, padding, margin keep similar ±20%" no mention border. "border-color and border-style (NOT border-width)" under can change, but not border-width. If adding border with 2px, it is setting border-width. Could be considered changing? Existing no border. Is adding new border allowed? "border-color and border-style (NOT border-width)" suggests we can change color/style but not width. Adding border-width is maybe not allowed because it affects size. But target style variant says strong borders (2-3px solid), so maybe they expect. Yet "NOT border-width" in NEVER CHANGE list means border-width values should not change from original. Original doesn't set, so default border-width is medium (3px) if border-style set? Actually if no border, setting `border: 2px solid` sets width 2px. That's adding border-width. Maybe forbidden? But target style includes strong borders. Hmm.

Need interpret constraints carefully. The user says "NEVER CHANGE (would break HTML layout) ... border-color and border-style (NOT border-width)" under "YOU MUST CHANGE" actually? Let's reread:

You must change:
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow...
  • text-shadow
  • border-radius (visual rounding only)
  • gradient colors...
  • transition...
  • filter...
  • opacity
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
  • caret-color, accent-color
  • CSS custom properties values

NEVER CHANGE:
  • layout...
  includes "border-width"? It says "border-color and border-style (NOT border-width)" under Must Change. Never Change list includes "width, height..." not border-width explicitly? It says under "NEVER CHANGE (would break HTML layout)" includes `width, height, min/max-width, min/max-height, padding, margin...`. It does not list border-width in never? Wait final self-check says "width, height, padding, margin within ±20%". No border-width. But earlier bullet says "border-color and border-style (NOT border-width)" meaning don't change border-width? Actually they say You MUST CHANGE "border-color and border-style (NOT border-width)" which means border-width is not to be changed. So yes, don't change border width. But original has no border-width. Does adding border count? It sets border-width, so not allowed. But target "sharp-edges" says strong borders. Could use `outline` instead? "outline styles (color, type)" allowed; outline width? They mention "outline-color" and "outline styles (color, type)" perhaps not width. We can use `outline: 2px solid` but width changes outline not layout. Strong borders could be implemented with box-shadow? But hard offset 4px already. Maybe use `outline: 2px solid #252e3a; outline-offset: -2px`? That would not affect layout. But target says strong borders. We can use `outline: 3px solid` maybe okay because outline doesn't affect layout. Yet "border-width NOT changed" no issue. But visually border-like. Maybe use `box-shadow` too.

However original no box-shadow, so adding box-shadow allowed. For badge and cards, we can use box-shadow for offset hard shadow, and use `outline` for the border. But classes already have Bootstrap border? Maybe not.

Need maybe create "sharp edges" with multiple box-shadows: one for border "0 0 0 2px #252e3a" (outer/inner?) plus offset "4px 4px 0 #252e3a". But box-shadow is zero blur, offset. We can set `box-shadow: 0 0 0 2px #252e3a, 4px 4px 0 #252e3a;` That gives a 2px border and offset shadow. Color same, okay. But if using two shadows with same color not clear. Could use `0 0 0 2px #252e3a, 4px 4px 0 rgba(37,46,58,0.25)`? But hard offset solid color variant says 4px 4px 0px solid color, no alpha. We can choose `4px 4px 0 #252e3a`; plus `0 0 0 2px #252e3a` is border. That's okay. But then "strong borders" not actual border-width. Hmm.

Or use `border: 2px solid #252e3a` maybe simpler. But if we add border, the content box shrinks by 2px if box-sizing content-box. In mobile cards with padding, could be okay. But instruction is strict. Maybe avoid border width change by not adding border. Use `outline: 2px solid #252e3a;` and `outline-offset: -2px;` This won't affect layout. But "outline styles (color, type)" allowed; "outline-color" must change; "outline-style" must change. Width not mentioned. Could set outline: 2px solid, a width change from default? Since original has no outline. Adding outline width likely okay? But "NEVER CHANGE layout" no layout impact. Let's use `outline: 2px solid #252e3a; outline-offset: -2px;` maybe too much? For badge, outline offset maybe.

Need "border-radius" allowed. We can set `border-radius` to 0 or 4. Good.

Need maybe adjust `font-size`? No.

Need maybe set `background-color` on `.app-hero-section .badge.bg-warning`, overriding `.bg-warning`. But if using Bootstrap, it may have `background-color: #ffc107; color:#000;`. We should set `color` and `background-color` to accent. That's good.

Need maybe use CSS variables? Could define new custom props? But if root lacks, media query can't define? We can inside selectors set `--badge-accent` etc? Not needed.

Need maybe include `accent-color`? Not relevant.

Need maybe add `filter` or `backdrop-filter`? Could add `backdrop-filter` to cards? Not necessary.

Need maybe add `text-shadow` to hero. Could add `text-shadow: 2px 2px 0 rgba(37,46,58,0.15);` But this changes visual. Good.

Need maybe ensure same selectors and declarations remain in same order? Yes.

Potential issue: "All color values ... background, color, border-color, fill, stroke, outline-color" means need replace all existing colors? Original no colors. We should add colors. Good.

Need maybe include both `background-color` and `background`? Usually one. `border-color` can be set via `outline