/* ============================================================
   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 process the user request. The user provides a CSS snippet and a target style. We need to output only the rewritten CSS, preserving selectors, layout, typography, etc. Only visual changes allowed.

However, the original CSS snippet is a media query with three rules. Let's inspect.

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

In this snippet, the declarations are layout/typography: text-align, font-size, padding. These are locked? Let's check the rules: text-align is listed under typography? Actually "text-align, vertical-align" under TYPOGRAPHY? It says TYPOGRAPHY fixed: font-family, font-size, font-weight, font-style, line-height, letter-spacing, word-spacing, text-transform, white-space, word-break. text-align is listed under LAYOUT? Let's see: LAYOUT section includes "text-align, vertical-align" in the never change list. Indeed it says:
📐 LAYOUT (HTML cannot adapt to changes):
...
• text-align, vertical-align

So text-align cannot change. font-size cannot change. padding can change within ±20%. The instructions: "ONLY change colors, shadows, radius, transitions, gradients." The target style "centered-stage" and "sharp-edges" are effects, but the CSS given has no colors, shadows, radius, transitions. We cannot add new rules? Hmm.

We need to "Refresh this CSS visually." But the snippet contains no visual properties. Possibly we are allowed to add visual properties to the existing selectors, as long as layout/typography stays. The user expects us to output CSS with visual changes. The original CSS has three selectors. We can modify/add visual declarations. Need to ensure layout/typography unchanged.

Let's examine each rule:

1. @media (max-width: 575.98px) { .app-hero-section .row .col-lg-7 { text-align: center; } }
Text-align center is already center. We could add color, background, etc. But adding background to a column might affect layout? background doesn't affect layout. We can add box-shadow? But that might not make sense. However, to satisfy "visual identity" refresh, we should add visual properties that don't change layout.

2. .app-hero-section .badge.bg-warning { font-size: 0.85rem; }
This is typography fixed. We can add background-color, border, border-radius, box-shadow, color, etc. This seems good.

3. .contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }
Padding can change ±20%, but the snippet uses var(--space-md). We can keep same padding but add visual properties: background, border, border-radius, box-shadow. Could also adjust padding within 20%. But changing padding might be risky because we don't know --space-md value. Safer to keep padding same or adjust slightly. But padding is layout-ish; allowed ±20%. Could change padding to something else? But then the hard offset shadow would look better with padding. We can keep.

However, the target style "centered-stage" and "sharp-edges" seems to want a dark stage with gold accents, hard shadows, sharp corners. But the original CSS is just a media query; no root variables. We are to rewrite this CSS only. Could add new declarations. But need to preserve selectors and layout.

We also need to consider the "media query breakpoints" are fixed. So we keep @media (max-width: 575.98px).

We should output only the rewritten CSS, no markdown.

But what about adding variables? The original snippet doesn't define :root. We shouldn't introduce new selectors. We can add custom properties? Not necessary.

Let's think: The instructions say "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." So we can add properties to existing rules. We should not change selector list, combinators, etc. We can change/added visual declarations.

We need to target "centered-stage" style perhaps via subtle changes: For the hero column, since text-align center, maybe add a subtle text-shadow? But text-align center is layout. We can add text-shadow (visual). But for a hero section, a text-shadow could be ok. For badge, add background, border, border-radius, box-shadow. For contact cards, add background, border, box-shadow.

But "sharp-edges" variant: hard offset shadows: 4px 4px 0px solid color, small or zero border-radius (0-4px), strong borders (2-3px solid), snappy transitions (0.15s). We can apply to badge and cards. But for the hero column, maybe not. We could add to the column a background? But that would make the column stand out.

Wait, there's a risk: adding background to a grid column could change appearance but not layout. It's fine.

Let's define a color palette. The target style "centered-stage": dark stage #0f0f1a, bright content area, premium gold or deep purple accent. Since we can't change global background necessarily, we can set on these elements.

But the original CSS has no colors. We can set:

- .app-hero-section .row .col-lg-7: maybe color: #f5f0e6; text-shadow: 2px 2px 0 rgba(15,15,26,0.8); Or background? But text-align center. Hmm.

Maybe better to not overcomplicate. The main visual changes should be on badge and cards. The first rule's only property is text-align: center; we can leave it as is and add maybe nothing. But then we would not be "refreshing" that rule visually. The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." If a rule has no such properties, we might add some. But adding visual properties to a column might be appropriate.

Let's see the original: .app-hero-section .row .col-lg-7 { text-align: center; } In the media query, this centers the hero content on mobile. If we add color or text-shadow, it might affect all text in that column. Could be fine.

The target "centered-stage": dark stage background, bright content area. For the hero content, we could add color: #f5f0e6; text-shadow: 2px 2px 0 rgba(15,15,26,0.6); This adds a hard shadow to text. But text-shadow is allowed. Yet the hero might already have its own color; overwriting could be bad. But our task is to refresh the visual identity of the entire file. We have only this snippet. We have to make something sensible.

We also might add a background with a radial gradient to the column? But background on a column could be okay but might produce unwanted rectangle. Maybe not.

Let's consider the badge: .app-hero-section .badge.bg-warning. This is a Bootstrap badge with bg-warning class. We can override background-color, color, border, box-shadow, border-radius, transition.

- Badge: background-color: #f0b90b; color: #0f0f1a; border: 2px solid #0f0f1a; border-radius: 0; box-shadow: 4px 4px 0 #7a5c00; maybe a hard shadow. Or maybe deeper purple accent? The style says premium gold or deep purple accent. Let's use gold.

- Contact cards: background-color: #1a1a2e; color: #f5f0e6; border: 2px solid #0f0f1a; border-radius: 0; box-shadow: 4px 4px 0 #3b2d5e; Maybe with transition.

But the contact cards may already have a background; overriding could be okay. However, padding is from var(--space-md). If we add a strong border and hard shadow, the box-sizing could change? Border-box is likely default? Bootstrap sets box-sizing: border-box. Adding border doesn't change layout if box-sizing border-box. Need to ensure we don't add padding? We can keep padding same. If we add border, because box-sizing is border-box, width won't change but content box will shrink. That might slightly affect internal layout. But border-width is allowed? The instructions say "border-color and border-style (NOT border-width)" cannot change? Wait, they say "NEVER CHANGE: border-color and border-style (NOT border-width)"? Let's read again: Under "NEVER CHANGE" list includes:

• border-color and border-style (NOT border-width)

Hmm, that's confusing. The section says "NEVER CHANGE" but lists border-color and border-style? Actually, the "✅ YOU MUST CHANGE" list includes "border-color and border-style (NOT border-width)"? Let's look carefully at the user message:

✅ YOU MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)
  • text-shadow
  • border-radius (visual rounding only)
  • gradient colors and stops in linear/radial/conic-gradient
  • 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 (--color-*, --shadow-*) values

So border-color and border-style are to be changed if present, but border-width is not to be changed. The never change list says:
🔒 NEVER CHANGE (would break HTML layout):
...
• border-color and border-style (NOT border-width)? Wait, no, the "NEVER CHANGE" list in the prompt includes:
"border-color and border-style (NOT border-width)"? Let's scroll up: The "NEVER CHANGE" section says:

📐 LAYOUT (HTML cannot adapt to changes):
  • display values...
  ...
  • border-color and border-style (NOT border-width)? Actually no, I don't see that in the NEVER CHANGE. The prompt as given in the conversation: "🔒 NEVER CHANGE (would break HTML layout): ..." It lists selectors, layout, typography, animation/media. In the layout list, it includes "border-color and border-style (NOT border-width)"? Wait, I need to re-read the user's message:

Let's examine the message text:

"🔒 NEVER CHANGE (would break HTML layout):

🏷️ SELECTORS (CRITICAL - HTML is fixed):
...
📐 LAYOUT (HTML cannot adapt to changes):
  • display values (block, flex, grid, none, inline-block, inline-flex)
  • position (relative, absolute, fixed, sticky, static)
  • grid-template-columns (column count must match HTML children)
  • grid-template-rows
  • grid-template-areas
  • grid-column, grid-row, grid-area
  • flex-direction
  • flex-wrap, flex-grow, flex-shrink, flex-basis
  • width, height, min/max-width, min/max-height
  • padding, margin (keep similar values, ±20% maximum)
  • gap, row-gap, column-gap (keep similar)
  • justify-content, align-items, align-self
  • float, clear
  • z-index, overflow, overflow-x, overflow-y
  • box-sizing
  • visibility
  • aspect-ratio
  • object-fit, object-position
  • text-align, vertical-align"

It does NOT include border-color or border-style. Those are actually in MUST CHANGE. So we can change/add border-color and border-style, but not border-width. Good.

So we can add border-width? Actually "NOT border-width" means we cannot change border-width. If existing has border-width, we leave it. If no border-width, we can add? Adding border-width would affect layout potentially if box-sizing is content-box. But better avoid adding border-width if there was none. But we can add border-style/color without width? No, a border needs width. The instruction "border-color and border-style (NOT border-width)" probably means when changing an existing border, don't change its width. But adding a new border introduces width. The user said "Strong borders (2-3px solid)" in the effect variant, so maybe they expect us to add border-width? But the NEVER CHANGE list doesn't explicitly forbid changing border-width; however, the MUST CHANGE list explicitly says "border-color and border-style (NOT border-width)" meaning border-width is NOT to be changed. This is a constraint: never change border-width. But if the original CSS has no border declarations, adding a border-width would be a layout change? Since it affects box dimensions, likely not allowed. In "sharp-edges" variant they suggest strong borders, but the original CSS might have borders elsewhere not in this snippet. We cannot add borders because that would change width.

But if we use box-shadow with hard offset, we can achieve sharp edge without border-width. Box-shadow doesn't affect layout. Good. So we can do 4px 4px 0px 0px color, which is a hard shadow. That's allowed and creates sharp edge without border. For border-radius, we can set 0 or 2px, but need to know original. We can add border-radius: 0; if none. Border-radius doesn't affect layout except clipping, but allowed. So we can use border-radius: 0; or 2px. But if the element already has border-radius, we change it. In this snippet, none, so we can add.

So plan: For each rule, we can add visual properties: background, color, box-shadow, text-shadow, border-radius, transition. Avoid changing existing layout properties.

Let's rewrite the media query:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        /* Add visual: maybe a subtle text-shadow and color. But original likely inherits. Could add text-shadow only. But must not change font-size. */
        color: #f5f0e6;
        text-shadow: 2px 2px 0 #0f0f1a;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #f0b90b;
        color: #0f0f1a;
        border-radius: 2px;
        box-shadow: 4px 4px 0 0 #53400e;
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background-color: #1a1a2e;
        color: #f5f0e6;
        border-radius: 2px;
        box-shadow: 4px 4px 0 0 #0f0f1a, 8px 8px 0 0 rgba(240, 185, 11, 0.15);
        transition: box-shadow 0.15s ease, background-color 0.15s ease;
    }
}

But wait: In the original, the first rule only text-align: center. Adding color and text-shadow could be okay. However, if the hero section already has a light background, adding dark text may be bad. But target style "centered-stage" wants dark stage #0f0f1a and bright content area. If we set color to light, we assume dark background. But we don't control the section background. Maybe better to not change color on the column unless necessary. We could add a text-shadow with a dark color that works on any background. But if background is light, dark text shadow might look odd. Hmm.

Alternatively, we can add a background to the column itself to create a stage panel. For example:

background: #0f0f1a;
color: #f5f0e6;
text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
border-radius: 2px;
box-shadow: 6px 6px 0 rgba(240,185,11,0.2);

But this would add a dark rectangle behind the text. On mobile, the col-lg-7 might be full width, so a dark background could be acceptable. But could conflict with existing design. Since we are asked to "refresh visual identity", we can be bold. But we must not change layout; background doesn't change layout.

However, text-align: center remains. Fine.

But there is a risk: the col-lg-7 in the hero section might contain other elements; applying text-shadow to all text might be too much. But it's okay.

What about the contact cards: They might already be cards with padding; adding background color could override existing. We need to preserve padding; it's okay.

We should also consider the transition property: adding transition to these elements is allowed; but we cannot change existing transition values? There were none. We can add. "transition timing, easing, duration" are in must change. So we can add.

Now, about "sharp-edges" variant: "Hard offset shadows: 4px 4px 0px solid color". In CSS, box-shadow syntax with spread and color: 4px 4px 0 0 #color. That's fine. "Small or zero border-radius (0-4px)" so 2px. "Strong borders (2-3px solid)" but we cannot change border-width. Since original has no border, we can't add border. But we can use outline? The must-change includes "outline styles (color, type)" but not width? Actually outline-color and outline-style can change, but adding outline-width would also affect layout? outline doesn't affect layout, but it can be styled. We could add outline: 2px solid #0f0f1a