/* ============================================================
   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 respond only rewritten CSS. Need modify visual properties but keep layout. Original CSS block only media query with three rules. Need refresh visual identity without changing layout structure/class names. But original CSS has only font-size, padding maybe text-align. In conservative mode, cannot change typography, text-align? Wait "text-align" is in never change layout? Actually never change includes text-align, vertical-align. So can't change text-align. The original rules set text-align center and font-size .85rem, padding var(--space-md) !important. We need preserve selectors and property names? The task says keep ALL selectors and layout exactly. We can change colors, shadows, radius, transitions, gradients, opacity, etc. But original CSS has no colors/shadows. Need maybe add new visual properties? We can add declarations while preserving existing properties? We need output rewritten CSS. Since target style gradient-rich, dense-dashboard. Need perhaps add background/backdrop etc but not altering layout. Could refresh by adding decorative properties to existing selectors? But "preserving ALL selectors and layout exactly" likely means keep the same selectors and existing declarations. But visual identity refresh could add properties? Need be careful: if adding box-shadow, it doesn't change layout. Adding gradients/background doesn't change layout. But the original is within media query, only typography/padding. We can perhaps change `font-size`? Not allowed. So the only way to "refresh" is to add visual properties to those elements, but that may alter appearance. Need respect "only colors, shadows, and decorative properties may change" and "All color values" etc. We can add color/background/gradient/border-radius/box-shadow/transition etc. But not alter existing declarations? The instruction says "Only change colors, shadows, and decorative properties may change" — existing `text-align`, `font-size`, `padding` are not in allowed list. So keep exactly. Add new declarations? It's a rewrite; can add. But must not add layout properties. So add things like background, border-radius, box-shadow? Need consider element types in selectors: `.app-hero-section .row .col-lg-7` is a column; adding background may be okay but could visually show column content area. Could set gradient text? Hmm.

Need output "rewritten CSS" with same selectors and all existing declarations. But maybe target style "dense-dashboard" with gradient-rich variant. The original only 3 rules. Need inject visual identity. Add CSS variables? Could define custom properties in :root? But original CSS is just media query at end. Need preserve all selectors? We can add new block? "preserving ALL selectors and layout exactly" means not add selectors? Maybe we can add root? It says preserve all selectors, but can add variables? Usually the output should only modify existing CSS, not introduce new selectors that weren't there. But to use gradient-rich, we need create new colors. Could add values via existing properties. We can add `background`, `color`, `border-radius`, `box-shadow`, `transition` to the existing selectors. That won't alter layout unless shadows maybe. Need be judicious.

Original:

@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
    }
}

We need preserve all selectors and property declarations? "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Since existing declarations don't involve those, they must remain. We could add new declarations after existing. Need no markdown.

Maybe they expect full CSS with modifications only in allowed categories, perhaps replacing values if existing colors etc. But there are no colors. So likely simply output original unchanged? But task says refresh visual identity. Need add at least gradient-rich effects. But modifying these selectors may be intrusive.

Maybe the original block is "块2/2" from larger file? We only have this fragment. We need refresh this fragment. We can perhaps add custom properties within media query? But cannot add new selectors? Could use `:root` with variables and use them, but original doesn't. But "preserving selectors" maybe means don't remove existing selectors, adding `:root` would be a new selector. Is that allowed? Output only CSS; could add a @media block? Probably not.

Could use CSS variables already defined? Original uses `var(--space-md)`. We can assume there are variables elsewhere. We could change `var(--space-md)`? But padding must stay similar ±20%. We can't know. So leave.

Need maybe add `background` to `.contact-channels-section article` and `.contact-quick-section .contact-card` with gradient? But these elements already may have backgrounds from other CSS; adding may override. Fine. But not change layout.

Need remain within media query. The selectors only apply on mobile. Could set decorative properties.

Let's parse instructions carefully. User says:

"🎨 TARGET STYLE: dense-dashboard ... Layout pattern (Aggressive only): ... Color palette: Cool grays #1e293b, #334155, accent blue #3b82f6, White cards on slate background. ✨ EFFECT VARIANT: gradient-rich ... Linear-gradient or radial-gradient on most backgrounds, Gradient borders via border-image, Multiple stops for richness, Smooth long transitions (0.4-0.6s cubic-bezier)"

Then task: Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients.

Given the original CSS is a media query mobile adjustments. We should maybe change values like `font-size: 0.85rem` to 0.85rem? Not allowed. But perhaps can change to 0.875rem? That's a font-size. Not allowed. So no.

Maybe we can modify `!important`? No.

Need maybe add `color`, `background`, etc. Let's think of actual selectors:
- `.app-hero-section .row .col-lg-7` is inside hero section, in mobile text center. Could add `background`? This is a grid column; adding background could highlight column. Maybe gradient border/bottom.
- `.app-hero-section .badge.bg-warning` is warning badge. Could change `background` from `bg-warning` to a gradient? But that would override Bootstrap warning. Could add `background: linear-gradient(...)`, `border: 1px solid transparent`, `border-image`? But border-image on small badge maybe complicated.
- `.contact-channels-section article` and `.contact-quick-section .contact-card` are cards. On mobile they have padding. We can add `background: linear-gradient(145deg, #ffffff, #f1f5f9)`, `border-radius: 12px`, `box-shadow: 0 8px 20px rgba(30, 41, 59, 0.08)`, `transition: transform 0.5s cubic-bezier(...)`. But adding `transform` is a layout? Transform doesn't affect layout, but could be considered visual; okay. But not required. Need "Smooth long transitions"; maybe add transition to article/card.

Need ensure no AI marker comments. Also maybe add gradient border via background-clip border-box etc. But that requires border properties, not layout. Could set `border: 1px solid transparent; background: linear-gradient(white,white) padding-box, linear-gradient(...) border-box;` This is a decorative gradient border. But border width changes layout? The original card likely has border? We don't know. Adding border-width 1px could alter 1px. But allowed? "border-color and border-style (NOT border-width)" means we shouldn't change border-width. But if no border, adding a border-width is a layout change? Better avoid. Could use box-shadow to simulate border.

Need output no markdown fences, first char CSS. Probably final answer can be only CSS.

Let's decide rewrite. We'll keep original declarations exactly. Add new properties that are allowed:

For `.app-hero-section .row .col-lg-7`:
- Add `background` maybe? But this is a column; might change background. Could apply `background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0))`? But if text color dark, okay. However, hero section likely has background already. Better maybe add `backdrop-filter`? But on column with transparent? Hmm.
- Add `color: #1e293b`? Text color.
- Add `text-shadow: 0 2px 8px rgba(30,41,59,0.12)`? It is visual but text-shadow may affect readability.
- Add `border-radius: 16px`? On column? Not harmful.
- Add `background: radial-gradient(...)`? Could be weird.

For `.app-hero-section .badge.bg-warning`:
- Add `color: #1e293b`, `background: linear-gradient(135deg, #fbbf24, #f59e0b)`, `box-shadow: 0 4px 12px rgba(245,158,11,0.35)`, `border-radius: 999px`.
- But original class uses Bootstrap `.bg-warning`, so our background overrides. Good. Need not change font-size.
- Add `border: 1px solid rgba(255,255,255,0.25)`? border-width okay but maybe changes. Could add `outline` instead. But outline could be okay. Use `box-shadow`.
- `transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1)`, but transform on badge? fine. But if no hover in media query, no effect.

For cards:
```
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(30, 41, 59, 0.06), 0 1px 3px rgba(30, 41, 59, 0.1);
    transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
```
But if they already have `padding: var(--space-md) !important`, adding more properties okay. Need no comments.

But "dense-dashboard" target maybe "tight multi-column grids" etc. Since this mobile media query doesn't deal with grid. We can only add colors/shadows/gradients.

Need maybe add gradient border via `background` with two backgrounds and `background-clip`:
```
background:
  linear-gradient(#fff, #fff) padding-box,
  linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899) border-box;
border: 1px solid transparent;
```
But as noted, border-width. It's allowed? The user said "NOT border-width", but that's only for never-change list? Actually under "🔒 NEVER CHANGE" includes "border-color and border-style (NOT border-width)" — Wait "🔒 NEVER CHANGE" list says "border-color and border-style (NOT border-width)"? Let's re-read. It says:

🔒 NEVER CHANGE (would break HTML layout):
...
  • border-color and border-style (NOT border-width)

Actually weird: "border-color and border-style (NOT border-width)" means never change? In original list "layout" includes border-color? No, it says never change would break layout; border-color doesn't break layout. Wait let's read original user instruction: In "NEVER CHANGE" list, they include "border-color and border-style (NOT border-width)"? Let's scroll: The list says:
"🔒 NEVER CHANGE (would break HTML layout):
🏷️ SELECTORS...
...
📐 LAYOUT...
...
📝 TYPOGRAPHY...
🎬 ANIMATION & MEDIA..."
There is no border-color there. Actually under "✅ YOU MUST CHANGE" includes "border-color and border-style (NOT border-width)"? Let's re-read exact text from prompt:
"✅ YOU MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow ...
  • border-radius ...
  • gradient colors and stops...
  • transition timing...
  • filter...
  • opacity
  • outline styles (color, type)
  • border-color and border-style (NOT border-width)
  • caret-color, accent-color
  • CSS custom properties..."
So border-color and border-style are changeable; border-width not. So adding `border: 1px solid transparent` includes border-width, not allowed. Could set `border-style: solid` but if no width unchanged. Could specify `border-width: 0`? That's a layout after existing? Better not. Use `box-shadow` only.

Need choose final CSS. Need ensure no markdown. Could include multiple new declarations. But should we add `@media (max-width: 575.98px)` exactly. Yes.

Potential issue: adding `background` to `.app-hero-section .row .col-lg-7` might conflict with existing. But okay.

Let's think if there are existing colors on these elements elsewhere. Overriding could change. But task says refresh whole file? We only have fragment. We'll add.

Need maybe change `color` in `.app-hero-section .row .col-lg-7`. But not "layout". Fine.

Let's craft:

```
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1e293b;
        background: radial-gradient(120% 80% at 50% 0%, rgba(59, 130, 246, 0.12), rgba(255, 255, 255, 0) 60%);
        border-radius: 18px;
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #1e293b;
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
        box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35), 0 1px 2px rgba(30, 41, 59, 0.12);
        border-radius: 999px;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 1) 0%, rgba(248, 250, 252, 1) 45%, rgba(241, 245, 249, 1) 100%);
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(30, 41, 59, 0.06), 0 1px 3px rgba(30, 41, 59, 0.08);
        transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
}
```

But the target style "dense-dashboard" maybe wants slate background #1e293b, #334155, accent #3b82f6, white cards. I've used slate color for text/box-shadow. Good.

Need consider `background` on `.contact-channels-section article` maybe it is already white. Fine. Could use "Gradient borders via border-image"; but no border-width. Maybe simulate with `box-shadow: inset 0 0 0 1px rgba(59,130,246,0.2)`? That is a shadow, not border-width. Add inset shadow as "border" effect:
`box-shadow: inset 0 0 0 1px rgba(59,130,246,0.18), 0 6px 18px ...;`
Good. This creates no layout change. Let's include inset gradient? Can't gradient via box-shadow. Could use `outline`? Outline doesn't affect layout. But outline with `outline-style` and `outline-color` is allowed. Could set `outline: 1px solid rgba(...)` but outline-width is not listed; can change outline style/color but not width? It says "outline styles (color, type)" — not width. So no.

Need maybe add `@media (prefers-color-scheme: dark)`? No.

Potential issue: Adding `transition` to article/card may animate initial load, okay. But no hover.

We should maybe not add `transform` because it's a property not listed? It's visual, not layout? But if transform is not in never change, okay. But no need. Use transition only for box-shadow, background maybe. Need "Smooth long transitions (0.4-0.6s cubic-bezier)" on most. Add `transition: background 0.5s cubic-bezier(...), box-shadow 0.5s cubic-bezier(...)`.

Should we include `background-size`? No.

Need maybe use `accent-color` or `caret-color`? Not appropriate.

Need maybe adjust `padding`? No.

Need maybe alter `font-size`: no.

Now, the original CSS includes `text-align: center;`—we keep exactly. Good.

Need no comments. The output should be only CSS. We can output above. But wait: Is adding `background` to `.app-hero-section .row .col-lg-7` safe? The element likely contains hero text. If text has light color, background tint okay. But if hero