/* ============================================================
   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 preserve selectors exactly, only allowed visual properties. Original is small media query. Need apply target style centered-stage? But original has layout text-align center already. Effects sharp edges: small border-radius, hard shadows, strong borders, snappy transitions. But these rules only include font-size and padding, color? Keep padding similar ±20% maybe okay? They use var(--space-md). Can change padding? Allowed padding within ±20%. But if using var, can change variable? Could define? Original uses var likely existing. But output only this block, not whole file. Need rewrite only visual. We can add color, box-shadow, border-radius, transitions? But selectors fixed, properties can change? Need preserve layout constraints: padding, margin similar. text-align? in media rule has text-align center, allowed to keep. Need maybe add color? .app-hero-section .badge.bg-warning has font-size, could add background/color, border, box-shadow, transition. But must maintain class selectors. Need only output CSS same media query. Need maybe include centered-stage? This media is for mobile, max-width 575.98. Target style: centered content, text-align center. Already. Can add margin-left/right auto? Allowed width/margin? margin within ±20? maybe. But don't need.

Need ensure selectors character-for-character preserved. 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;
    }
}

Need "refresh visual identity" within media query. We can alter text-align? It's layout? Actually text-align is typography? It's allowed? The rules list "text-align" under layout? Actually list says text-align, vertical-align in layout/typography? They say 🏷️ selectors, 📐 layout includes text-align, vertical-align. So text-align must not change? It says "NEVER CHANGE ... text-align, vertical-align". Well original text-align: center, target centered-stage center, so fine.

Need maybe add properties that changes colors/shadows/radius. We can add to these selectors:
- .app-hero-section .badge.bg-warning: background color, border, border-radius, box-shadow, transition, maybe color.
- span? no.

Need maybe .contact-channels-section article, .contact-quick-section .contact-card with border, background, box-shadow, border-radius, transition. But this is inside max-width 575.98, okay.

Need be careful padding var(--space-md) remains maybe. But can we add border? Border-width cannot change? They say border-color/style can change, NOT border-width. Adding border would add border-width (currently none). Is that allowed? "border-color and border-style (NOT border-width)" and "outline styles" maybe border-width unchanged. So we can't add border with width if original no border? Since border-width would change from 0 to e.g. 2px, disallowed. So don't add border-width. Could use outline? Outline styles allowed, outline-width? They say outline styles (color, type) not mention width. But outline width also layout? It affects? Better use box-shadow with 0 0 0 2px to simulate border? That is box-shadow, allowed. But strong borders target conflicts with "border-width no change". We can use box-shadow with hard offset, maybe spread.

Need set border-radius likely 0. Original no border-radius, can add? It's allowed, but adding 0 maybe okay. Need maybe change if existing? none. We can set border-radius: 4px; or 0. Target sharp edges, small zero.

Need use hard offset shadows: 4px 4px 0px solid color. In box-shadow, no "solid", can do 4px 4px 0 0 rgba(...). Good.

Need color palette: dark stage #0f0f1a, bright content area, premium gold or deep purple accent. Need maybe use CSS variables? Can't define outside? Could define inside media? No :root? Original only media query. We can use direct colors. To avoid changing variables? If use var(--space-md) existing, no issue. Could use direct colors.

Need include centered-stage style? We can add margin: 0 auto to .badge? But may not. Also .contact card? Since mobile, maybe width? But layout fixed.

Let's parse original CSS and decide additions.

Rule 1: .app-hero-section .row .col-lg-7 { text-align: center; } For spotlight feel maybe add color: #f5f5f7;? But that will affect all text in col-lg-7. Is that visual only? Yes. But could be too broad? It changes body text color; maybe desirable to create bright content area. But in media query maybe okay. Need maybe set `background: rgba(255,255,255,0.04)` for content. But original no background. Adding background can create visual identity. But is background-color allowed? Yes. Need maybe no layout. Could add `border-radius: 4px; padding: 0.5rem;` but padding would change? Not allowed? Padding change from perhaps default, but within ±20? We don't know. Better avoid layout. Could add color.

However, adding color to .col-lg-7 may affect hero text. If theme uses dark text? But target dark stage maybe want white text? Yet no way see original. Need be conservative and not change too much. But task explicitly says refresh visual identity. Add colors to visible components.

Rule 2: badge.bg-warning - This is Bootstrap badge warning (yellow background). Need premium gold accent. We can override background-color and color. Since original only font-size. Add:
background-color: #f0b429; (gold)
color: #0f0f1a;
border-radius: 4px;
box-shadow: 4px 4px 0 0 rgba(15, 15, 26, 0.8);
transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
? `transition` includes transform? Transform could be layout? Actually transform could affect visual/layout? Not listed allowed? It says no display/position etc. Transform not listed but could affect layout? It's visual but not explicitly allowed. Maybe don't add transform. Could use `transition: background-color 0.15s ease, box-shadow 0.15s ease;` No hover rule to trigger. Still fine.

Need maybe no `!important` for CSS variables? Badge has bg-warning class, Bootstrap may set background-color with !important? Actually Bootstrap's .bg-warning uses background-color: #ffc107 !important. To override in media query, need `!important`. But original style uses `font-size: 0.85rem;` without important; font-size likely can override because maybe same order? But Bootstrap `.badge` font-size maybe 0.75em, this font-size later maybe ok. For background-color with !important in Bootstrap, we need !important. But are we allowed to add !important? It's a declaration priority, not forbidden. But maybe avoid? Need to ensure override. Could use `background-color: #f0b429 !important; color: #0f0f1a !important;`. But adding important changes specificity? Not layout. Fine.

Rule 3: .contact-channels-section article, .contact-quick-section .contact-card has padding var(--space-md) !important. We can add background-color: rgba(255,255,255,0.03); border-radius: 0; box-shadow: 4px 4px 0 0 rgba(15,15,26,0.35), 0 0 0 2px rgba(240,180,41,0.15); transition: box-shadow 0.15s ease, background-color 0.15s ease; Maybe border-radius: 0 for sharp edges. But article/contact-card may already have borders? Unknown. Since we can change border-radius.

Need maybe "max-width: 720-960px, margin: 0 auto" for centered. Could add to .contact cards? But max-width change is layout? Width/height not allowed? They can change width? It says width,height,margin similar ±20 max. max-width also? "width, height, min/max-width" never change. So don't.

Need maybe add `text-align: center` to contact? Original already? Not in rule. But target centered-stage if desired. However adding text-align center to contact might affect layout? text-align is restricted? It says text-align under layout "NEVER CHANGE". Original if not specified, adding text-align changes layout? Actually text-align is default left. Adding center would change something, and list says text-align must not change. So avoid.

Need maybe set color to #e8e8f0 on .contact card; but original may be darker. We can use `color: #e8e8f0;` But if original had color, this changes visual. Is color allowed? Yes. But could be too much.

Need perhaps use CSS variable `--space-md` unchanged. Good.

Need ensure no markdown fences, no comments. Need output only CSS.

But maybe we can use new values in `padding`? Original padding var(--space-md). Allowed to keep because var uncertain. If we replace with something like `padding: 1.5rem !important;` that could be within ±20? But we don't know --space-md. Better keep exactly because never change padding? Actually padding allowed similar ±20, but keep is safe. We must preserve layout. So keep original lines exactly as much as possible, add visual properties.

Need preserve all selectors exactly including comma selector list, line breaks, indentation maybe not important. Should include original declarations and new ones.

Potential conflict: Rule 1 `.col-lg-7` text-align center. We could add `color: #f2f2f7`; But if hero section uses dark background? Dark stage #0f0f1a. It might make text bright. Good. Also maybe add `text-shadow: 0 2px 4px rgba(0,0,0,0.5)` for headings? But this applies to entire col, including paragraphs. Text-shadow affects readability. Could be desirable. But text-shadow is allowed. Use subtle. However target sharp edges? text-shadow maybe not "hard offset". Could use text-shadow: 2px 2px 0 rgba(15,15,26,0.4); but text-shadow can create hard shadow. But might be too much on all text. Better avoid applying text-shadow to all.

Maybe can add `background: rgba(15,15,26,0.15);` around hero content? hmm.

Need maybe target "centered-stage" with bright content area. Since only mobile hero col-lg-7 is centered text. We can set `background: rgba(15, 15, 26, 0.55); border-radius: 0; padding: 1.5rem;` But padding change maybe not allowed. Could add? If we add padding, original was maybe no padding, adding would affect layout. Not allowed. Could add `box-shadow: 8px 8px 0 0 rgba(240, 180, 41, 0.35);` to create spotlight block. But without background maybe weird. We can add `background-color: transparent`? no.

Maybe focus on elements we know: badge and cards. Good.

Need maybe use CSS custom properties? Could use new palette. But no need.

Let's think through exact output.

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

Need add maybe to first:

.app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #f2f0e8; 
    background: rgba(15, 15, 26, 0.35);
    border-radius: 4px;
    box-shadow: 0 0 0 2px rgba(240, 180, 41, 0.25), 4px 4px 0 0 rgba(15, 15, 26, 0.5);
}

But if col-lg-7 is a layout column, setting background on column will color whole column. That could be okay. But `padding` no. `box-shadow` maybe covers column. `border-radius` on a column with no padding might cut off child backgrounds? Could be okay. But adding background could conflict with original. Is that "safe"? Not sure.

Need maybe not add to first rule because text-align is layout and we can tweak only color? But visual identity could be minimal if we don't add. Could add `color: #fff3d6` to headline? But `col-lg-7` likely contains paragraphs etc. Actually `.app-hero-section .row .col-lg-7` might be hero content. In Bootstrap, col-lg-7 one column. Text color likely from body. Adding a light color might be needed if background becomes dark. But original background may not be dark. We don't know. Need perhaps avoid changing first rule except maybe `text-shadow`? But text-shadow on entire col could be ugly.

Maybe instead add `filter: drop-shadow(4px 4px 0 rgba(15,15,26,0.2));` to first? Hmm.

Need determine if we should keep original CSS exact and only alter properties allowed, not add new properties? The prompt: "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." That implies we can add these properties. It's okay.

Need maybe use `border-radius: 0` because sharp-edges. So set border-radius: 0 on all target elements? For col maybe not.

Need maybe modify `font-size: 0.85rem`? font-size is forbidden! They said typography fixed, font-size cannot change. So do NOT change that. But target style might want? No.

Need maybe output using `!important`? Original rule has !important. Good.

Need maybe include `background: #0f0f1a` on `.contact-channels-section article, .contact-quick-section .contact-card`? But cards might already have white background. Setting dark stage background could create large dark blocks. Better use `background-color: rgba(255,255,255,0.04)` subtle.

Need perhaps use color `#0f0f1a` and gold `#f5b83d`. Deep purple accent maybe `#6c3fc9`. Use palette:
- Stage dark: #0e0e1a
- Surface: #17172b
- Text light: #f5f1e6
- Gold accent: #f4b642
- Purple accent: #7a5af5 maybe.
Need apply to badge and cards.

Because target style "sharp-edges" with hard offset shadows: 4px 4px 0 0. Use on badge and cards. Let's formulate.

Badge:
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background-color: #f4b642 !important;
    color: #0e0e1a;
    border-radius: 0;
    box-shadow: 4px 4px 0 0 rgba(14, 14, 26, 0.85);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

Need maybe `!important` on color? Bootstrap .badge doesn't set color except maybe .text-*? Not usually. okay.

Cards:
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background-color: rgba(255, 255, 255, 0.035);
    border-radius: 0;
    box-shadow: 4px 4px 0 0 rgba(14, 14, 26, 0.55), 0 0 0 2px rgba(244, 182, 66, 0.25);
    color: #f5f1e6;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

But `color` on cards might overridden; okay.

Need maybe first rule:
.app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #f5f1e6;
    background: linear-gradient(180deg, rgba(20, 20, 36, 0.4), rgba(14, 14, 26, 0.6));
    border-radius: 0;
    box-shadow: 8px 8px 0 0 rgba(244, 182, 66, 0.25);
}

But adding `background` to col might be too extreme. However stage dark background with spotlight feel. Let's think: If we set col background to dark gradient, hero text will be on dark stage. The original background likely maybe blue/purple. Could be okay. But if the parent already has a visual, adding background on col might create weird rectangle, especially with no padding, bar across. Might not be good. Avoid background on col; just add `color`? If the original background is light, dark text would become invisible. We don't know. But target palette dark, so maybe change parent from elsewhere? Since only this block, not whole file. So application of color to col text could be risky. Yet output is only this CSS block; we need "refresh" within this block. Maybe to refresh, keep first rule as-is? But visual identity not much? The media block only has three rules. To refresh, we can