/* ============================================================
   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, but the given CSS is a media query with only layout (text-align, font-size, padding) and one .badge.bg-warning. The instruction says to change visual identity only: colors, shadows, etc. But this CSS block has no colors or shadows. It's just a media query for responsiveness. The target style is centered-stage, sharp-edges. The original CSS is minimal. We need to output a rewritten CSS that preserves selectors and layout, and adds visual changes where possible. But we cannot change font-size, padding? Actually padding can change ±20%: original padding var(--space-md) !important; we can adjust? We need to keep selectors exactly. The original is inside @media (max-width: 575.98px). We can add color, background, border, etc. to the existing rules. But note that .badge.bg-warning already has a background from Bootstrap, we can override? We should be careful.

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

We need to make visual changes. We can add color, background, border-radius, box-shadow, etc. But must not change layout properties (text-align, font-size, padding). However font-size is typography, cannot change. Padding can change within ±20% of var(--space-md). But we don't know value of --space-md. Safer to keep padding same. The instruction says only visual identity changes, and padding is layout. We can keep padding as is.

The target style "centered-stage" and "sharp-edges" suggests maybe we want to apply dark background, gold accents, sharp shadows. But we must not change layout structure. We can add box-shadow, border, border-radius, colors, backdrop-filter, etc. to these existing selectors. However .app-hero-section .row .col-lg-7 is a column; adding box-shadow to it might affect layout? box-shadow doesn't affect layout. We can add color, background, etc. But careful: .app-hero-section .badge.bg-warning is a badge; we can change its background to a gold accent, add sharp shadow, border-radius 0, border 2px solid, etc. Also the contact cards can get visual updates.

We need to output only the rewritten CSS. Possibly add more declarations within the existing rules. We can also add new rules? The instruction says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." It doesn't say we cannot add new selectors, but the HTML is fixed, so adding new selectors is unnecessary and might not match. Since the original is a media query, we should keep the same media query and same selectors. We can add properties.

Let's design:

- The target style: centered-stage, dark stage #0f0f1a, bright content area, premium gold or deep purple accent. Sharp edges: hard offset shadows 4px 4px 0px solid color, small/zero border-radius 0-4px, strong borders 2-3px solid, snappy transitions 0.15s.

But this is a mobile media query (max-width 575.98px). We can apply to hero section column and contact cards.

Let's rewrite:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        /* visual: bright content area, perhaps a dark overlay or subtle background */
        background: rgba(255, 255, 255, 0.06);
        border: 2px solid #f5c542;
        border-radius: 4px;
        box-shadow: 4px 4px 0px #f5c542;
        backdrop-filter: blur(2px);
        transition: all 0.15s ease-in-out;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        /* visual: gold accent, sharp edges */
        background: #0f0f1a !important;
        color: #f5c542;
        border: 2px solid #f5c542;
        border-radius: 0;
        box-shadow: 4px 4px 0px #f5c542;
        transition: all 0.15s ease-in-out;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        /* visual: dark stage cards with gold borders */
        background: #0f0f1a;
        color: #ffffff;
        border: 2px solid #f5c542;
        border-radius: 4px;
        box-shadow: 4px 4px 0px rgba(245, 197, 66, 0.5);
        transition: all 0.15s ease-in-out;
    }
}

But we must consider that .bg-warning is a Bootstrap class with important? We can use !important if needed. Also .contact-channels-section article may already have background etc. We can override. However adding background to article might change layout? No, background is fine. But color to article might affect text; that's visual.

We need to avoid changing font-size, padding. We didn't. We added properties. Good.

But do we need to keep the exact @media condition? yes. We can output exactly.

Also note the original has "!important" on padding. We keep it. We can also add "!important" to other properties if needed? Not necessary.

But there is a potential issue: the target style says "centered content max-width 720-960px, margin 0 auto" but we cannot add layout. So we skip.

We should also consider that the user requested "Only change colors, shadows, radius, transitions, gradients." We can add background, border, box-shadow, border-radius, transition. That's within scope.

Let's make it more cohesive. Dark stage #0f0f1a, gold #f5c542. For .col-lg-7 maybe we don't want to add a background to the column because it's a layout element; but adding a background is visual. It's okay. But it might be too heavy. The target style "centered-stage" is more about overall page, but this media query is just for mobile. We can still apply.

Alternatively, we could add a new rule for the hero section? But the file is only this media query. We shouldn't add outside the media query. We can add @media? No.

Let's ensure "keep ALL selectors exactly" - we keep them. "No AI comments". Output only CSS.

Maybe we can also adjust the font-size of badge? It's typography, cannot change. Keep.

Let's produce final. But wait, the rule says "padding, margin (keep similar values, ±20% maximum)" - we keep same. "font-size, font-weight, line-height unchanged" - we keep. "text-align" unchanged. Good.

We can add color to .col-lg-7? Maybe set color: #ffffff to ensure text bright on dark background. But then the hero text becomes white. That's visual. Fine.

Let's craft with strong hard shadows and snappy transition. Use transition on color, background, border, box-shadow? We can set transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s. Or all.

Also we might want to add a subtle gradient? But gradients are allowed. We can add background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%) instead of solid. But the target says dark stage #0f0f1a, bright content area. Let's use gradient for cards.

Let's finalize:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);
        color: #ffffff;
        border: 2px solid #f5c542;
        border-radius: 4px;
        box-shadow: 4px 4px 0px #f5c542;
        transition: background 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: #0f0f1a !important;
        color: #f5c542 !important;
        border: 2px solid #f5c542 !important;
        border-radius: 0 !important;
        box-shadow: 4px 4px 0px #f5c542 !important;
        transition: all 0.15s ease-in-out !important;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);
        color: #ffffff;
        border: 2px solid #f5c542;
        border-radius: 4px;
        box-shadow: 4px 4px 0px rgba(245, 197, 66, 0.6);
        transition: background 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
}

We used !important on badge to override Bootstrap. That's acceptable. But we must be careful: the original CSS didn't have !important on badge, but adding !important doesn't change selector. It's fine.

However, note that "border-style" can change, but border-width cannot? Actually the constraint says "border-color and border-style (NOT border-width)" can change. We set border: 2px solid color, which sets border-width too. We must not change border-width? It says "border-color and border-style (NOT border-width)" under allowed changes, but later "Strong borders (2-3px solid)" in variant suggests we can set border-width. Wait, the prohibited list in the system prompt says "display, position, grid-template-*, ... width, height, padding, margin..." It doesn't mention border-width. In the allowed list it says "border-color and border-style (NOT border-width)"? Let's re-read: The user prompt says:

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

So it says border-color and border-style can change, but NOT border-width. That means we cannot change border-width. If the original doesn't have border-width, can we add a border? Hmm. The instruction says "border-color and border-style (NOT border-width)" - so we shouldn't alter border-width. If original has no border, adding a border with width 2px introduces a new border-width, which might alter layout (box-sizing: border-box? If not, border adds to size). That's risky. The target style says "Strong borders (2-3px solid)" but the conservative mode says not to change border-width. We must follow the conservative mode. So we cannot add border-width. But can we use box-shadow to simulate borders? Yes. "Hard offset shadows: 4px 4px 0px solid color" - box-shadow with 0 blur and 0 spread, but it's not solid border. We can use box-shadow to create a hard shadow, but no border. We can still use outline? Outline doesn't affect layout. But outline style can change. However adding outline also might not affect layout. We can use outline: 2px solid color. That's allowed? "outline styles (color, type)" can change, but outline-width? It says outline styles (color, type) - not width. So we shouldn't add outline-width either. Hmm.

Given the constraints, we cannot add borders or outline widths. We can only change border-color and border-style if they already exist, not border-width. But original has no border. So we cannot introduce border. But the target style variant says "Strong borders (2-3px solid)" conflict. The system prompt says "❌ NEVER CHANGE (would break HTML layout): ... border-width? Actually it doesn't list border-width in never change, but user prompt explicitly says NOT border-width. Since user prompt is the instruction, we must obey.

Alternative: use box-shadow with 0 0 0 2px color to simulate a border. Box-shadow doesn't affect layout (except painting). That's allowed because box-shadow can be changed. We can do `box-shadow: 0 0 0 2px #f5c542, 4px 4px 0px #f5c542;` This simulates a border. That changes box-shadow, allowed. Great.

So we'll avoid border-width changes. If original had no border, we won't add `border: ...`. Instead use box-shadow for border-like effect.

Also border-radius: we can set 0 or 4px. That's allowed.

Let's revise:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);
        color: #ffffff;
        border-radius: 4px;
        box-shadow: 0 0 0 2px #f5c542, 4px 4px 0px #f5c542;
        transition: background 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background: #0f0f1a !important;
        color: #f5c542 !important;
        border-radius: 0 !important;
        box-shadow: 0 0 0 2px #f5c542 !important, 4px 4px 0px #f5c542 !important;
        transition: all 0.15s ease-in-out !important;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);
        color: #ffffff;
        border-radius: 4px;
        box-shadow: 0 0 0 2px #f5c542, 4px 4px 0px rgba(245, 197, 66, 0.6);
        transition: background 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
}

Wait, for .badge.bg-warning, the border-radius is originally maybe .375rem from Bootstrap. We can override with border-radius: 0. That's allowed. Good.

But do we need to use !important on box-shadow? Not necessary but background and color of bg-warning may need !important. We can also set `background: #0f0f1a !important;` because Bootstrap uses `.bg-warning { background-color: #ffc107 !important; }`? Actually Bootstrap `.bg-warning` uses `background-color: #ffc107 !important;`? Let's recall: In Bootstrap 4, `.bg-warning { background-color: #ffc107 !important; }`. So our background without `!important` would not override. So we need `!important`. The original CSS only changed font-size, which didn't need to override background. We can add `!important` to our background and color. For border and box-shadow, no need. For border-radius, Bootstrap's `.badge` has border-radius: .25rem, but not with `!important`, so our `border-radius: 0;` can override. But if there is a more specific? `.app-hero-section .badge.bg-warning` is already specific. We can keep `!important` on border-radius too to be safe. But in CSS, `!important` may not be needed; however if Bootstrap has `.badge { border-radius: .25rem; }` without important, our specificity beats it. Still, we can add `!important` for consistency. But adding `!important` doesn't affect layout.

However, the user prompt says "transition timing, easing, duration" can change. We added transition. Good.

Let's think about potential layout impact of box-shadow: box-shadow doesn't affect layout? Box-shadow does not affect layout, only paints outside but doesn't contribute to scrollable overflow? Actually box-shadow may cause overflow if it extends outside and parents have overflow hidden? It can be clipped but not affect layout. So okay.

Background gradient doesn't affect layout. Color doesn't. Border-radius doesn't. Transition doesn't.

We kept padding same. Text-align same. Font-size same. Good.

One issue: We added `color: #ffffff` to `.app-hero-section .row .col-lg-7`. If this column contains text, it will turn white. That is visual. Fine.

Maybe we should not set a background on .col-lg-7 because it might be a grid column that spans the full width