/* ============================================================
   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 inspect original tiny media query. Need target style centered-stage but conservative: HTML fixed, visual changes only. Original CSS has media query with rules: text-align center, font-size .85rem, padding var(--space-md) !important. Need refresh visually without changing layout. But this is tiny and only layout/text/spacing. We can't change font-size, padding maybe max ±20? Original padding var, can't know variable. Could change text-align? It's layout but also typography? Text-align considered layout? In never change includes text-align, vertical-align. Also font-size, padding. But task says refresh visual identity only. This file only contains media query styles. Maybe we need output same CSS but with visual adjustments? Since no colors/shadows/radius in original. Need "change all color values" but none. Need preserve selectors exactly. Need maybe add new properties? But only colors shadows decorative. We can add color, background? But selectors fixed and content? Need conservative mode: only visual. It says "Refresh visual identity WITHOUT changing layout structure or class names." We can add colors perhaps. But original has no colors. Need not preserve "only properties in original"? It says rewrite CSS preserving all selectors and layout exactly. Need maybe output the same rules but with some visual additions? Could add color/background to hero section? But selectors include .app-hero-section .row .col-lg-7. Adding color might affect text color. Need be careful.

Let's parse 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;
    }
}

It's an existing mobile style. Need target style centered-stage with tight-rhythm. But only visual. Since font-size cannot change. Padding can change within ±20 but var unknown. Could replace with calc(var(--space-md) * 0.9) maybe ±20. But maybe not.

Need perhaps add color as in target style: dark background, gold text? But if we change text color on badge or hero? Hmm.

Maybe the challenge expects visual refresh on a larger hidden file? But only provided CSS snippet. We must output rewritten CSS for the snippet. Need satisfy all constraints.

Need maybe produce:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f5e9c3;
        text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #d4af37;
        border-radius: 2px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 4px;
        background: rgba(255,255,255,0.04);
        transition: background-color 0.25s ease;
    }
}

But adding background may be too much? Need not change layout. Could add. However "text-align" never change, so leave. But original has no color. We can add visual color. Need ensure .badge.bg-warning background-color changed from bootstrap warning (yellow) to gold? But original selector is .badge.bg-warning likely Bootstrap class; CSS specificity: .badge.bg-warning sets bg color. We can override. But target premium gold accent. That works. Need dark stage #0f0f1a? Maybe not in media query? If set background on col-lg-7, might break. Better not.

Need "centered-stage" suggests dark background and spotlight content area. But no background selector. Could use `background-color: rgba(15,15,26,0.85)` on contact cards? Hmm.

Need maybe add `border-radius: 2px` to badge. Good.

Need maybe use `accent-color`? Not relevant.

Need preserve "padding: var(--space-md) !important;" but maybe can change to "padding: calc(var(--space-md) * 0.9) !important;" within ±20. Not necessary; changing padding could affect layout. Better leave exactly. The task says margin and padding can change similar ±20 but not required.

Need output only CSS, no explanatory text. Need preserve all selectors exactly. The CSS snippet has bracket formatting. Need output same structure perhaps with added visual props.

Need think about "centered-stage" target style from prompt: "Layout pattern (Aggressive only): Centered content: max-width 720-960px, margin: 0 auto; text-align: center for headings; justify-content: center on flex; Symmetric large padding (60-100px top/bottom)". But then it says Aggressive only. In conservative mode, cannot apply aggressive layout changes. So only palette and effect. "tight-rhythm" effect: compact spacing, small border-radius, subtle shadows or none, information-dense. So add small radius and subtle shadows.

Need maybe change `padding: var(--space-md) !important` to `padding: calc(var(--space-md) - 4px) !important` to compact? But "tight-rhythm" says compact spacing. However never change layout. The rule says padding/margin can change similar ±20%. `--space-md` likely variable e.g., 1rem. Subtracting 4px maybe 25% if md=16px. That's within 20? 12px vs 16 = -25, outside. Better not. Maybe use `padding: calc(var(--space-md) * 0.85) !important` = -15, within. But could break if CSS var is not numeric? It is likely. But compact. Yet "padding, margin (keep similar values, ±20% maximum)". 0.85 within 20. Could do that. But is a var expression okay? Yes, "similar values". However if --space-md is 1.5rem, 0.85 yields 1.275rem. Fine.

Need maybe adjust font-size? Cannot. So leave.

Need transition timing maybe add. Need not add if no transitions.

Need maybe replace `background-color`? Original no. Need perhaps add `background-color: #d4af37` to .badge.bg-warning. But if `bg-warning` in Bootstrap includes `--bs-warning-bg`? This selector `.badge.bg-warning` maybe only background utility. Our rule can set.

Need perhaps use CSS custom props? Could add `--`? But no need.

Need preserve "no markdown". Need output CSS with exact selectors. Could include comments? No.

Need maybe consider if adding `color` to `.app-hero-section .row .col-lg-7` overrides every child? It inherits. Could be okay but maybe not. Target palette: dark stage #0f0f1a, bright content area. In mobile center stage, hero area should be centered. Maybe set `color: #f5f5fa`. But if children have their own colors, fine. But adding may alter link colors? They inherit? Links have browser default unless styled. Could be okay. But if there are buttons, their color independent. Hmm.

Need maybe not add `background-color` on col because would need layout? Background won't affect layout. Could add `background-color: transparent`? Not useful. Maybe set `color: #0f0f1a`? No.

Let's understand potential existing site CSS maybe based on file name "saishi.css" (matches tournament). The media query is a fragment. The target style "centered-stage" with "premium gold or deep purple accent". We can transform mobile hero into dark stage with gold text? Need maybe:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #fff6e6;
        text-shadow: 0 1px 3px rgba(15, 15, 26, 0.6);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c9a227;
        border-radius: 3px;
        box-shadow: 0 1px 2px rgba(15, 15, 26, 0.4);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: calc(var(--space-md) * 0.85) !important;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(15, 15, 26, 0.25);
        transition: box-shadow 0.2s ease;
    }
}

But "padding: calc(var(--space-md) * 0.85)" might be considered changing padding, but acceptable within 20. However if `--space-md` is e.g. rem? Multiplication allowed? In CSS calc multiplication? CSS calc cannot multiply length * number? Actually CSS Values Level 4 supports multiplication? Historically `calc()` supports + - * /? CSS calc only supports + - * /? It supports `calc(1 * 2px)`? No, `*` not supported widely (except new typed arithmetic not in CSS). Use `calc(var(--space-md) * 0.85)` is invalid! CSS calc does not allow multiplication in current browsers? Actually CSS calc() supports +, -, * and /? The `*` operator is not supported until CSS Values 4; browser support? As of 2024, `calc(1px * 2)` not supported? Wait, CSS Typed OM and CSS calc() supports multiplication of number and dimension? Let's recall: CSS calc() grammar uses `<calc-product>` which includes multiply/divide? In CSS Values Level 4, `calc()` supports multiplication and division? Hmm. I know CSS `calc()` supports + - * /? Actually `tan`, etc. Let's recall examples: `width: calc(100% / 3)` division works. `width: calc(10px * 2)`? I think multiplication is not supported because it can produce invalid dimensions; MDN: The calc() function: "The operands can be mixed using +, -, *, /"; no, MDN says "There is no support for multiplication and division in calc() in older CSS", but new spec includes multiplication/division? Let's verify from memory: CSS calc() originally only `+ - * /`? No, common CSS `calc(100% - 20px)`. Division by number: `calc(100% / 3)` valid. Multiplication? `calc(10px * 2)` maybe valid in modern Chrome? I have seen `calc(100% / 3)` uses division. Multiplication not? `calc(1rem * 1.5)` is not valid? I have used `calc(var(--space) * 2)`? Many use `calc(100% / 3)`, but multiplication less common. Let's check spec: CSS Values 3 syntax for calc: `<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*`, `<calc-product> = <calc-value> [ [ '*' | '/' ] <calc-value> ]*`? Wait yes I think `*` is supported? In CSS Colors 4, `calc(1 * 2px)`? Actually I recall MDN "It is not possible to use multiplication or division in CSS calc()" but that's outdated. Let's remember: You can multiply two lengths? CSS calc multiplication requires one side number? Example `width: calc(10 * 2px)`? I have seen `width: calc(1.5 * 16px)`? Let's search memory: CSS Values and Units Level 4 "There is no defined behavior for multiplying two dimensions" maybe. But syntax permits `*` with one number? Hmm.

Bottom line: Don't risk invalid CSS. Use `padding: calc(var(--space-md) - 4px)` valid, but 4px fixed. `--space-md` unknown. Better use `padding: calc(var(--space-md) - 2px)` within 20 if md >= 10px. Could be okay. But changing padding unnecessary. To be safe, keep exact `padding: var(--space-md) !important;` and add visual props. The prompt says "only colors, shadows, radius, transitions, gradients" can change. Padding should not change. Actually table says "padding, margin (keep similar values, ±20% maximum)" i.e. you can change but keep similar. But safer to not.

Need maybe add "border-radius: 3px" to contact card. But changing radius visual only okay. However if card has overflow hidden originally? Border-radius okay.

Need maybe "background-color" on cards. Since no need, maybe add a subtle background to make info-dense card feel. But if original had different background from higher specificity? We could override with `background-color: rgba(255,255,255,0.02)` and maybe not. But visual identity changes perhaps.

Need maybe "contact-quick-section .contact-card" originally may have background from CSS; adding `background-color: rgba(255,255,255,0.03)` might shift visibility. Better add only border? But border-color can change; no border width. Could add `border: 1px solid rgba(212,175,55,0.15)`? Wait border-width not supposed to change, but if adding border that would change layout (adds border box if box-sizing border-box? still width of border changes inside? Could break). Since "border-width" cannot be changed. We cannot add border-width. Could use outline maybe no layout impact. Add `outline: 1px solid rgba(...)`? Outline doesn't affect layout; but maybe outline changes drawing. Allowed "outline styles (color, type)" not width? But should not add width if no outline. Since original no outline, not sure. But outline width is layout independent but visually adds. Task says "outline styles (color, type)" can change, not width. So don't add.

Need perhaps add `box-shadow` no layout.

Need maybe add `transition: box-shadow 0.25s ease 0s` but no interactive state. Fine.

Need maybe add `border-radius: 4px` to article/card. Good. But if original has padding 1rem and border-radius 4px, okay.

Need perhaps specify `background-color` for `.badge.bg-warning`: keep Bootstrap class. But if bg-warning utility is used with `badge`, it also sets `color: #000`? Bootstrap's `.badge.bg-warning`? In BS 5, text color maybe `var(--bs-warning-rgb)`? Actually `.bg-warning` sets background-color; text default inherited dark. To improve contrast, set `color: #1a1205` maybe. Original didn't have color; if set, it changes text color. That's visual. Use gold background and dark text.

Need target "premium gold or deep purple accent". Use gold gradient? Could use `background-image: linear-gradient(135deg, #e6c15c, #b8902a)`. But `.badge.bg-warning` is background utility; adding background-image overrides background-color? It can be done. It changes visual. But if we use background-image, rule includes background. Good. But need be careful: `background-image` plus `background-color`. We can use `background: linear-gradient(...)` shorthand but includes background-position/size. Could be okay. Better use `background-color: #d4af37; background-image: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0));`. This gives gold gradient.

Need maybe use transition on badge? not necessary.

Need maybe create "spotlight feel: dark stage #0f0f1a, bright content area". Could set `background-color: #0f0f1a` on `.contact-channels-section article, .contact-quick-section .contact-card`? That would make cards dark, and if content text is light, good; if text dark, bad. Unknown. We can use subtle dark translucent `rgba(15,15,26,0.5)` and no text color. That may darken the card, but if text is white, okay. Need not.

Maybe use `box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06)`? Inset box-shadow draws border without border layout. Nice. For card, can use inner highlight. Good.

Need maybe edit only mobile snapshot. Let's construct a high-quality rewrite:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #f7f3e5;
        text-shadow: 0 1px 4px rgba(15, 15, 26, 0.55);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c9a227;
        background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
        border-radius: 3px;
        box-shadow: 0 2px 6px rgba(15, 15, 26, 0.3);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(15, 15, 26, 0.12), inset 0 0 0 1px rgba(212, 175, 55, 0.12);
        transition: box-shadow 0.2s ease-in-out;
    }
}

Need consider "bright content area" and "dark stage #