/* ============================================================
   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. Need follow mode, only visual changes, preserve selectors/layout? We have media query and properties. Target style: sidebar-classic? Not really relevant. Effect variant: sharp-edges with hard offset shadows, small radius, strong borders, snappy transitions. Need change colors etc. But original CSS only has media query with text-align, font-size, padding. There aren't colors, shadows, radius, transitions except font-size, padding (layout? padding visual can change within 20%). Need rewrite with same selectors, same layout. Need likely apply visual property changes as applicable: color maybe? But no. Need preserve selector. Could change font-size? Typography fixed, cannot change font-size. Padding is layout but permitted "keep similar values, ±20% max" and original padding: var(--space-md) !important. Can change padding visual? But likely need stay same? We can use calc? Hmm.

Need output only CSS. Need maybe refresh by adding backdrop-filter? But no need? Task says "Refresh this CSS visually. Keep all selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." If original has no such properties, maybe we can add properties to existing selectors (colors etc.) without changing layout. Need preserve selectors. Need likely adjust "padding: var(--space-md) !important" can vary ±20%. Need perhaps use "padding: calc(var(--space-md) * 0.9) !important" within 20%. But "var" maybe custom property. We can change to a slightly smaller value? But font-size etc cannot change. Need target effect: sharp edges, hard shadows, strong borders, snappy transitions. But adding shadows and borders changes layout if border-width changes; border width should remain 0? Could add box-shadow no layout. Use border? If adding border, it affects layout? But border-width is allowed? They say NEVER change border-width? Actually "border-color and border-style (NOT border-width)" means don't change widths. Adding border from none to 2px would increase taken space and layout? CSS box-sizing? But would affect layout. Avoid.

We need perhaps rewrite only existing declarations as per "replace colors etc." However no colors. Could add colors/background? But selectors: .app-hero-section .badge.bg-warning maybe could change color? But background-color is visual. Original has no color, we could add color/background-color to make visual. But if changing font-size? Avoid. For .app-hero-section .row .col-lg-7 text-align: center, can add color? But likely not. For contact sections, add background, border-radius etc. Need ensure no layout change.

Need perhaps output with same media query and selectors, and for each rule we can add new visual declarations while preserving original layout/typography. In conservative mode, colors etc can change. But no original values. Need create fresh palette: sidebar darker #252e3a, main lighter, functional accent. This is small fragment; likely need be self-contained. We can apply accent to contact cards, badge. Need maybe use color variables? But if we define custom properties globally, selectors? Need no new selectors? Could define :root? This media query only. Avoid added selector? They said preserve selectors. Better not add.

Need perhaps "transition" on selectors? We can add transition for contact cards and badge. Need perhaps "border-radius: 0" or "2px". Need perhaps "box-shadow: 4px 4px 0px #..." on .contact-card, shadow with hard offset. Need maybe "background: #eef2f7" etc. But dimensions and layout? Box-shadow doesn't affect layout, okay. Need "background-color" on contact cards. But maybe original had transparent, adding background doesn't affect layout. Need "border" maybe no, to avoid layout. Use "outline" maybe? Outline doesn't affect layout but changes style. Could use outline: 2px solid color; outline-offset? That is visual and doesn't layout. But target "strong borders" can use outline; property allowed? It doesn't affect layout. Need "outline-color" etc. Need perhaps "box-shadow" with 4px 4px 0px 0 color. Need "border-radius: 0" (visual only). Need "transition: box-shadow 0.15s ease, background-color 0.15s ease, transform? Wait transform is layout? Transform animation can be visual but affects rendering only, but property transform is not listed among changeable? It's not listed in no-change except animations. Better not use transform. Use transition property with color/background/border-color/box-shadow/outline, no transform.

Need maybe add :hover? Selector list? But original selectors no hover. Could add pseudo-class? That would be new selector not existing. In allowed? They said pseudo-classes: keep exactly; likely no new selectors. Avoid new selectors.

Need preserve media query. Could rewrite entire CSS maybe add declarations with same selector indentation.

Need perhaps target style says "sidebar-classic" for layout, but this CSS media query reflects 575px, no grid. Not possible to create two-column. We ignore because original not layout.

Need maybe "Aggressive only" not relevant. We must only output.

Need think of valid 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;
    }
}

Rewritten could be:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1f2937;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #f59e0b;
        color: #252e3a;
        box-shadow: 3px 3px 0 0 #92400e;
        border-radius: 0;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: calc(var(--space-md) * 0.9) !important;
        background-color: #ffffff;
        color: #252e3a;
        border-radius: 0;
        box-shadow: 4px 4px 0 0 #0f172a;
        transition: box-shadow 0.15s ease, background-color 0.15s ease;
    }
}

But need "original padding var(--space-md) !important". Changing to calc may be invalid with important? Use padding: calc(var(--space-md) - 2px) !important or calc(var(--space-md) * 0.95) !important. Within ±20. But if custom property has spatial md maybe fine. Need maintain "var" exactly? Layout "keep similar values ±20%" okay. Need maybe "color" on .app-hero-section .row .col-lg-7 changed? Might have inherited, no issue. But perhaps hero section with text-align center; adding color could override inherited but maybe okay. Need no more.

Need maybe "font-size" in badge remains exact; typography fixed. We can add background-color etc. Need if adding box-shadow on badge maybe original "bg-warning" bootstrap class with background. We override.

Need perhaps for contact-card, because original declared padding with important and likely had its own styles; we add styles in same rule. We can keep padding exactly var(--space-md) to avoid risk. But target says change visual identity, previous attempt not enough. We can change padding by 10% but not necessary. Better keep same padding, because layout unchanged and "NEVER CHANGE layout" and "padding keep similar". Keep var(--space-md) exactly is safest. But then no change. But visual changes can come from shadows/background. Need perhaps "padding: var(--space-md) !important" kept. Good.

Need maybe change "font-size: 0.85rem" fixed, cannot change. Could add letter-spacing? It's typography? "letter-spacing" is not to change? They list typography font system fixed: letter-spacing cannot change. Avoid.

Need perhaps add "outline" and "outline-offset" to contact-card. Outline doesn't affect layout, maybe okay. Need "border-radius: 0" to sharpen. But if original had radius from class? In media query only, but global styles maybe .contact-card has radius 0.75rem. We override `border-radius: 0`; okay.

Need "box-shadow: 4px 4px 0 0 #0b1220" for hard offset. Need maybe use "box-shadow: 4px 4px 0 #0b1220" = offsetX offsetY blur spread color; with blur 0 spread 0 if omitted. The target says "4px 4px 0px solid color" but CSS has "solid" not in box-shadow. Use "4px 4px 0 0 #..." or "4px 4px 0 #...". Need perhaps multi-layer? "box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)" Could design multi-layer: "box-shadow: 4px 4px 0 0 #1f2937, 8px 8px 0 0 rgba(37, 46, 58, 0.25);" But careful: hard offset plus smaller? Multi-layer shadows no layout. Could add.

Need perhaps need "transition timing, easing, duration" on contact cards, badge. Need maybe "transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;" okay. But because no hover, transition not observed; okay.

Need perhaps change custom properties? There are none. Could add `--sidebar-dark: #252e3a;` etc? Need no selectors perhaps `:root` not allowed. Not needed.

Need maybe "filter, backdrop-filter" add `backdrop-filter: saturate(1.05);` to card? But if background transparent? If background color added, no. `filter` on hero col maybe? `filter: drop-shadow(0 2px 0 #fff);` weird. Avoid.

Need maybe "caret-color" etc not relevant.

Need maybe "accent-color" not relevant.

Need maybe apply "background-color: #252e3a" to `.app-hero-section .badge.bg-warning`? But badge maybe warning should be amber. The target palette: sidebar darker, main lighter, functional accent. Use accent perhaps `#d97706` amber, or `#eab308`. Need "functional accent for actions". We can use `#eab308` as background, dark text. Since class is `bg-warning`, likely expected amber. Need target "darker sidebar #252e3a" perhaps use dark text/background: `background-color: #252e3a; color: #f8fafc; box-shadow: 3px 3px 0 0 #eab308;`. That is more distinctive and "sidebar classic": dark badge with amber hard shadow. Good. Need perhaps maintain warning semantic? Might be okay.

Need perhaps `.app-hero-section .row .col-lg-7` add `color: #1e293b;` and maybe `text-shadow: 0 1px 0 rgba(255,255,255,0.6);` maybe visual. But no need? Want refresh. Could add `color: #1e293b`; `text-shadow: 0 1px 0 rgba(255,255,255,0.6);` This is text-shadow allowed. But if hero section had color maybe okay. Need no layout.

Need perhaps `.app-hero-section .badge.bg-warning` add `background-color: #252e3a; color: #fbbf24; text-shadow: 0 1px 0 rgba(0,0,0,0.2); box-shadow: 3px 3px 0 0 #fbbf24; border-radius: 2px;` If it's a pill originally, setting border-radius: 2px creates sharp. But "previous attempt didn't change enough" maybe they want more distinct. We can do.

Need check whether `border-radius` might affect layout? No, visual only. Good.

Need perhaps "color: #f8fafc; background-color: #252e3a; box-shadow: 3px 3px 0 0 #0b1220; text-shadow: ...; border-radius: 2px;" That is same as sidebar dark.

Need perhaps `.contact-channels-section article` and `.contact-quick-section .contact-card` add `border-radius: 0px; background-color: #f8fafc; box-shadow: 4px 4px 0 0 #252e3a, 8px 8px 0 0 rgba(37,46,58,0.2); transition: box-shadow 0.15s ease;` Need maybe color and `<article>` too. Add `color: #1e293b; border-left: 4px solid #eab308`? Wait border-left width would change layout? It affects inside width, but content area shrinks. Would be a visual identity but changes layout. We shouldn't. Could use `outline: 2px solid #252e3a; outline-offset: -2px` maybe no layout. If border-radius 0, outline follows. But `outline-offset: -2px` draws inside, no layout. Nice. Need perhaps `outline: 2px solid #0b1220;` because sharp edges. But outline on card may be okay. However if existing border/padding etc, no layout. Need ensure outline-style changes? Allowed. But they listed "border-color and border-style (NOT border-width)" and outline styles allowed. We can add outline. Good.

Need maybe "border-radius: 0" with outline no radius for sharp edges. Great.

Need perhaps "box-shadow: 4px 4px 0 0 #252e3a, 8px 8px 0 0 rgba(37,46,58,0.15)" but if second offset 8px 8px extends beyond parent, could be clipped by overflow? If parent has overflow visible, okay. Might look too much on small screens; perhaps okay. Need maybe "box-shadow: 4px 4px 0 0 #1f2937" only. Target says hard offset: `4px 4px 0px solid color`. Use `box-shadow: 4px 4px 0 #1f2937`.

Need maybe "text-shadow" on hero col: `text-shadow: 0 2px 0 rgba(255,255,255,0.7);` Actually with text-align center. It is visual. But could be undesirable if text has shadow. We can make subtle.

Need perhaps "filter" on badge: `filter: saturate(1.1);` or `drop-shadow(3px 3px 0 rgba(0,0,0,0.25));` but we already have box-shadow. No need.

Need perhaps "transition" on `.app-hero-section .badge.bg-warning`; okay.

Need perhaps use CSS variables? Could rewire `var(--space-md)`? Keep.

Need perhaps "opacity" maybe no.

Need check rules: "Only change colors, shadows, radius, transitions, gradients." So our added `color`, `background-color`, `box-shadow`, `border-radius`, `transition`, `outline`, `text-shadow` okay. Padding remains same. No new layout.

Need maybe "border-radius: 0" might be too strong? Sharp edges variant says small or zero 0-4px. Use 2px maybe. Need maybe "outline" strong border. Great.

Need maybe "transition timing, easing, duration" with 0.15s. Use `transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, outline-color 0.15s ease;` nice.

Need perhaps apply `outline: 2px solid transparent`? If outline appears, visual. Using `outline: 2px solid #252e3a;` maybe strong border. But outline may be clipped if parent has overflow? Usually not. On article/card with negative outline offset inside maybe okay. Need maybe no outline if not needed. But target "sharp edges" and strong borders. Use outline to mimic border without layout. Need perhaps `outline-offset: -2px`, so inside edge. If border-radius 2px, outline offset -2px might be square maybe. It still no layout. But if outline negative with rounded corners may not follow exactly. Fine.

Need perhaps `.contact-channels-section article` were probably cards with padding and maybe have their own background; setting background-color to `#f8fafc` maybe more distinct. But if article background originally transparent, adding background may be okay. Would it be considered layout? No.

Need maybe `.contact-quick-section .contact-card` maybe a card inside a grid; adding background changes interior but not dimensions. Good.

Need perhaps target "sidebar darker (#252e3a), main lighter" Use colors:
- Main lighter: #f8fafc
- Sidebar darker: #252e3a
- Accent: #fbbf24 (amber)
- Ink: #1e293b
- Shadow: #0f172a

Need maybe "functional accent": use #f59e0b or #fbbf24.

Need perhaps "text-shadow" to hero text: maybe `text-shadow: 0 1px 0 rgba(248, 250, 252, 0.8);` not necessary.

Need maybe "background" on hero col? Could add `background: transparent;` no. Not.

Need consider media query contains only mobile. Maybe target style "sidebar-classic" is irrelevant; we can ignore. Need perhaps if `@media (max-width: 575.98px)` and `text-align: center` remains; okay. Need line endings? fine.

Need perhaps output only CSS, no code fences. Need