/* ============================================================
   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 answer only rewritten CSS. Need follow instructions. Need preserve selectors and properties. Original is media query block with three rules. Need change visual only. But properties shown are text-align, font-size, padding. Are those layout/typography? font-size is typography fixed; text-align fixed; padding margin ±20%. We cannot change those. Need perhaps add visual properties? The task refresh visual identity without changing layout structure/class names. Need output CSS preserving all selectors and layout exactly. We can add color, border-radius, box-shadow? But effect variant flat-solid says box-shadow none everywhere; solid bg, no gradients, minimal radius. Need perhaps only add border/background/color to elements? But original has no color properties. We need produce CSS with same selectors and existing declarations? Need maybe modify the file only; if no visual properties, maybe can add new declarations with same selectors? The instructions: "Only colors, shadows, and decorative properties may change." We can add decorative properties. But "Preserving ALL selectors and layout exactly" and "display, position, grid-template-*, etc unchanged." Need not change font-size? It's typography fixed. So must keep font-size exactly. Padding unchanged exactly? "keep similar values, ±20% maximum" original var space-md. Can't adjust var? Keep. So output should include original declarations plus added visual declarations? Need be careful not to violate "only visual changes"; adding background etc okay. Need also "box-shadow: none everywhere" due flat-solid variant. Should add background colors? But that might affect layout? No.

Need target centered-stage: dark stage #0f0f1a, bright content area, gold/purple accent. But selectors are app-hero-section and contact sections. Need apply visual colors maybe: dark background for .app-hero-section? Since media query. Could set .app-hero-section background: #0f0f1a; color #f5f0e6. But selectors only within media. Need not change breakpoint. Need include all original rules. Need maybe add color declarations under each selector. Need not restructure.

Need parse 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;
    }
}

Need keep text-align center, font-size, padding. We can add to first rule: color? For centered-stage, perhaps .app-hero-section .row .col-lg-7 { text-align: center; color: #f5f0e6; } But parent .app-hero-section may not have background. We can set .app-hero-section separately? We can add a new selector? The instruction says "Preserving ALL selectors" but doesn't forbid adding selectors? "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." It likely expects same selectors. Adding new selectors would change HTML? Not necessarily, but to be safe preserve exactly existing selectors and don't introduce new. So need apply backgrounds through existing existing selectors only. First selector applies to col-lg-7, not hero section. Could set background on column, color etc. But setting background on .col-lg-7 in mobile might be okay. Need "centered content ... dark stage, bright content area". Could set .app-hero-section .col-lg-7 background #0f0f1a? But the col is content area; maybe bright content area? The palette says dark stage #0f0f1a, bright content area. Since content col likely inside hero? Could use #0f0f1a for stage and #f8f5ec for content? But the col is content area. Need maybe set .app-hero-section .col-lg-7 background: #0f0f1a; color: #f5e9c4? That doesn't match bright content. Hmm.

Maybe use "Spotlight feel: dark stage #0f0f1a, bright content area". Could make .app-hero-section .col-lg-7 { background: #0f0f1a; color: #f8f5ec; } That is dark content. "Premium gold accent" could be on badge? But badge is bg-warning existing class likely yellow. We can change border? Can't change class bg-warning? We can override background on .badge.bg-warning? But "solid background colors no gradients" and "background color" adjustable. Need maybe use gold accent for badge: background-color: #c9a227; border-color: #e6c34c? But bg-warning from Bootstrap. Need maybe add border-radius 6px. But effect minimal radius 0-6px. Could set border-radius: 6px.

Need "flat-solid": box-shadow: none everywhere. Since original no shadows. We can add `box-shadow: none` to all selectors? It satisfies variant. But "no gradients" means don't add gradients. Solid colors only.

Need transition? Not needed. Could add transition where? Selectors with hover? No. Maybe not.

Need output only media query with added declarations. The original rules: text-align center; font-size; padding. Add color/background/border/box-shadow/border-radius. Need not change padding/ font-size.

Need decide colors.

Let's define palette:
- Dark stage: #0f0f1a
- Bright content: #f8f5ef
- Gold accent: #d4af37 / deep purple accent: #3b2a6d. Choose gold.
- Badge bg-warning override to gold gradient? flat solid. Could set background-color: #c9a227; color: #0f0f1a; border: 1px solid #e6c34c; border-radius: 6px; box-shadow: none. But is "box-shadow: none" okay? yes.
- Cards: contact-channels-section article and contact-card: background-color: #f8f5ef; color: #0f0f1a; border: 1px solid #e5dcc8; border-radius: 6px; box-shadow: none. Need padding unchanged.
- .app-hero-section .row .col-lg-7: perhaps background-color: #0f0f1a; color: #f8f5ef. But if the content area is centered bright? Hmm. Maybe better: background-color: #f8f5ef; color: #0f0f1a; border: 1px solid #d9cfb8; border-radius: 6px; box-shadow: none. In mobile hero maybe col-lg-7 is text block; bright content area. This gives spotlight: hero background maybe dark from class app-hero-section? We cannot change parent. But adding background to col block as bright card on dark stage will create spotlight. If parent app-hero-section has dark? Maybe not; but we can set background on col to bright; parent unknown. Could set `background-color: #f8f5ef` to col only. Need maybe `color` so text dark. But text-align center is kept. `box-shadow: none` due flat. This matches centered content? "max-width 720-960px margin auto, text-align center" original text-align center already; cannot add layout maybe but could add margin? But margin is layout property, we can keep similar. Should not change. Maybe no margin.

Need maybe add `background-color` to .app-hero-section .badge.bg-warning. But existing `bg-warning` may have Bootstrap `background-color` with !important? We can override with `background-color: #d4af37 !important;`? Need "bg-warning" class has Bootstrap style. In CSS, same specificity? `.app-hero-section .badge.bg-warning` specificity 0,3,0 > `.bg-warning` 0,2,0, so no important needed. But original uses `!important` for padding only. We can set border and background. We can set `border-radius: 6px` maybe. But `.badge` in Bootstrap has `border-radius` maybe; fine.

Need "box-shadow: none everywhere" Could add to each selector. But if parent has shadow, can't override because not selected. But within file, okay.

Need maybe `accent-color` doesn't apply to div. Skip.

Need maybe `transition` not needed.

Need output exactly CSS with no markdown. Need include `@media (max-width: 575.98px) { ... }`. Need maybe keep whitespace okay.

Need ensure no class names changed. Keep `!important` on padding only. Could include `!important` for background? no.

Need maybe "background" vs "background-color". flat solid. Use `background-color`.

Need maybe border-style maybe `solid`; border-width not change? We can add border-width? "border-color and border-style (NOT border-width)" It says can change border-color and style, not border-width. So if adding border, use `border: 1px solid` would change width? It says border-width cannot change; but adding border from none to 1px changes layout? That's a visual change, could affect box-sizing if border-box? Hmm. Better avoid adding borders to avoid layout. But flat-solid "defined by color contrast and borders". We can use border-color/ style only if existing border? Original has no border declarations. Adding `border: 0` no. To be safe, we can set `outline`? But outline doesn't affect layout. `outline: 1px solid #e6c34c; outline-offset: -1px;` But outline may be weird. Better not.

Need "box-shadow none everywhere" adds no layout. Border-radius no layout. Background-color no layout. Color no layout.

Need perhaps add `background-color: #f8f5ef` to `contact-channels-section article` and `contact-quick-section .contact-card`, with `border-radius: 6px`. But element maybe `article` and `.contact-card` padding var space-md. Background fill, okay.

Need maybe set contact cards background to dark? Since "centered-stage" with dark stage and bright content. Could make cards dark with gold border? But we cannot border. Use background #0f0f1a, color #f8f5ef. Hmm. Since contact cards are content areas, likely bright. Let's think design.

Original file perhaps competition site? "saishi.css" means "competition". Classes app-hero-section, contact-channels-section, contact-quick-section. This media query only mobile. Target centered-stage maybe for hero and contact. Need refresh colors.

Could set:
- .app-hero-section .row .col-lg-7 { text-align: center; background-color: #0f0f1a; color: #f8f5ef; }
This makes column dark, but if parent is dark, less contrast. But "spotlight feel: dark stage, bright content area" maybe actually the content area is bright. Better:
- `.col-lg-7` background #f8f5ef; color #0f0f1a; border-radius: 6px; box-shadow: none.
Then the stage around it could be dark? Parent .app-hero-section could have background from original CSS elsewhere unknown. Since we cannot change, col bright acts as content panel.

Badge on hero maybe gold accent: `background-color: #d4af37; color: #0f0f1a; border-radius: 6px; box-shadow: none;`
Need if bg-warning is an utility, our `background-color` overrides.

Contact cards: perhaps `background-color: #f8f5ef; color: #0f0f1a; border-radius: 6px; box-shadow: none;`
Maybe there are contact sections on dark background? Then cards bright.

Need maybe `background-color: #0f0f1a` for article? Let's choose unified bright content. But premium gold accent on dark stage? We can make cards dark with gold outline? No border.

Need maybe use `outline` to create border without layout:
```
outline: 1px solid #d4af37;
outline-offset: -1px;
```
But is outline a decorative property. It doesn't affect layout. However, adding outline to cards maybe nice. But "flat-solid defined by color contrast and borders" can use outline. We can set `outline: 1px solid #d4af37;` But "outline styles (color, type)" allowed. It says "outline styles (color, type)" and also "outline-color" color. They didn't mention outline-width, but likely not change width? Adding 1px from none is width change. Better avoid.

Need maybe `box-shadow: none` property doesn't conflict with flat-solid. Good.

Need maybe use `background-color` on all non-typography elements. But could affect if elements have existing background from other CSS; fine.

Need maybe `transition` no original.

Need maybe change "font-size" property? Cannot; keep as 0.85rem. We can add `line-height`, but typography fixed. Don't.

Need maybe change colors for text? Use `color`. This is typography? Color is allowed. Good.

Potential issue: In original, first selector has only text-align; adding background-color and color may be okay. Third selector selector list includes comma. We should preserve exactly.

Need maybe maintain selector order? Yes.

Need maybe output "box-shadow: none" on all elements? It is a declaration; no layout. Need set:
- .app-hero-section .row .col-lg-7 { text-align: center; background-color: #f8f5ef; color: #0f0f1a; border-radius: 6px; box-shadow: none; }
- .app-hero-section .badge.bg-warning { font-size: 0.85rem; background-color: #d4af37; color: #0f0f1a; border-radius: 6px; box-shadow: none; }
- .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; background-color: #f8f5ef; color: #0f0f1a; border-radius: 6px; box-shadow: none; }

But "flat-solid" says box-shadow none everywhere. Good.

Need maybe adjust contact card "background-color" perhaps #f8f5ef and "color" #0f0f1a. But if article contains headings etc, color inherited. Good.

Need maybe "border-radius" only 0-6; use 6px. Great.

Need maybe add "background-color: #0f0f1a" to body? Can't add selector. Not allowed? Could maybe first rule applied to col. Fine.

Need maybe "Premium gold or deep purple accent" we choose gold; badge is gold. Could also use `caret-color` or `accent-color`, no.

Need maybe "centered content: max-width 720-960px, margin 0 auto, text-align center for headings, justify-content center on flex, symmetric large padding" But original media query has text-align center, which is already. We can't add max-width because would layout. Could maybe "contact cards" are centered? No. Not necessary.

Need perhaps avoid adding `border-radius` to `.badge.bg-warning` because Bootstrap badge rounded-pill? Using border-radius 6px perhaps changes look. Allowed.

Need maybe "Using `background-color` on `.badge.bg-warning` with `color: #0f0f1a`" But warning badge often semibold; okay.

Need maybe "text-align center" remains first property. Should we order properties with new ones after. Fine.

Need maybe "padding: var(--space-md) !important" remains. Good.

Need maybe if `background-color` on `.contact-channels-section article` conflicts with `article` border? no.

Need maybe add `border-radius: 0`? Minimal radius 0-6; we use 6.

Need maybe set "box-shadow: none" with `!important`? Not necessary. Since no existing shadow. If Bootstrap has shadows? Maybe not. Could use `box-shadow: none !important` to ensure. But original no important; adding important not prohibited? Could. But "box-shadow: none everywhere" maybe we need no shadows. For safety, `box-shadow: none` adequate because our CSS file maybe after Bootstrap? Usually assets/css/saishi.css might be custom after Bootstrap, but not sure. Adding `box-shadow: none !important` could be okay but "no important" maybe preserve only original padding important. I can use `box-shadow: 0 0 0 0 rgba(0,0,0,0);`? That's effectively shadow but not none; variant says box-shadow: none everywhere. So use none. No important.

Need maybe accent color with `caret-color` irrelevant.

Need maybe include original "font-size: 0.85rem" before background? Fine.

Need maybe "No gradients" so no `linear-gradient`.

Need maybe "Solid background colors only" so `background-color`.

Need maybe "Minimal radius (0-6px)" so exactly 6px. Good.

Need maybe "centered-stage" dark stage #0f0f1a, bright content area. Our first/contact cards bright #f8f5ef; badge gold #d4af37. But where is dark stage? Perhaps we can set `.app-hero-section .row .col-lg-7` `background-color: #0f0f1a; color: #f8f5ef;` But then no bright content area. Another possibility: use `background-color: #0f0f1a` for hero column and contact cards dark, with gold accents, and text bright. This gives premium dark theme. But "bright content area" suggests content should be bright. We need decide.

Let's inspect selectors: `.app-hero-section .row .col-lg-7` is a column inside a hero row. On mobile (max-width 575.98), col-lg-7 likely stacks full width. If we set background-color bright, it becomes a bright block. The hero section may have dark background? Maybe `.app-hero-section` existing might be dark. If we don't set hero background