/* ============================================================
   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 rewrite the given CSS visually while preserving selectors and layout. The target style is dense-dashboard with sharp edges. The original CSS is a media query block with only three rules. But we need to preserve all selectors exactly. We can only modify visual properties: colors, box-shadow, text-shadow, border-radius, gradients, transition, filter, backdrop-filter, opacity, outline, border-color/style, caret-color, accent-color, custom properties. Also we need to ensure padding/margin if we touch them must be within ±20%. But we should avoid changing layout structure.

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

We need to refresh visual identity. This involves colors, shadows, radius, transitions, gradients. The selectors and layout must stay. But the rules currently only contain text-align, font-size, padding. These are typography and layout properties that we are told not to change: font-size, text-align, padding. Actually padding may be changed within ±20% but the original uses var(--space-md) !important. We could change to something else? But that would be padding. The instructions say "padding, margin (keep similar values, ±20% maximum)". But also "Layout (HTML cannot adapt to changes)" we must not change width, height, padding, margin? Actually the box "NEVER CHANGE" includes "width, height, min/max-width, min/max-height, padding, margin (keep similar values, ±20% maximum)". So we can adjust padding within ±20%. However the original padding is var(--space-md). What is --space-md? We don't know. We could set padding to a different value if within ±20% of var(--space-md), but we don't know that value. So safest to keep padding as is. But we need to make visual changes. The original rules have no visual properties besides font-size, text-align, padding. To refresh, we might need to add visual properties like box-shadow, border, background, etc. But do we want to add? The instruction says "Only colors, shadows, and decorative properties may change." We can add new visual properties as long as they don't affect layout? Adding border or box-shadow could affect layout if box-sizing is not border-box, but border-width is allowed? Actually we cannot change border-width? The locked list mentions "border-color and border-style (NOT border-width)" so we can change border-color and border-style, not border-width. So adding a border would be changing border-width from 0 to something, which is not allowed. Similarly box-shadow doesn't affect layout. backdrop-filter may affect rendering but not layout. We can add box-shadow, background color, color, etc.

But we need to be careful: adding visual properties to selectors that originally didn't have them could be acceptable if it doesn't break layout. But the selectors are targeted for specific responsive tweaks. For example, `.app-hero-section .row .col-lg-7` has text-align: center. We can add color or text-shadow or background? That might change appearance but not layout. However the original CSS only set text-align, so if we add a background to a column, it might be weird. Better approach: Since we are told to refresh visual identity, perhaps in such cases we can adjust the padding and font-size? But font-size is locked. Hmm.

Maybe the intent is to transform the visual style by editing the CSS properties present, but since these specific selectors only have layout/typography properties, we might need to minimally adjust values? But we can't change font-size or text-align. We can change padding within ±20%. And maybe change the value of var(--space-md) if defined elsewhere? But not here. We don't have access to root. We could set padding to a new value, but if we don't know the original, it might break layout. Better to keep padding unchanged. But then no visual changes.

Perhaps we can add box-shadow to some selectors? For example, on .contact-channels-section article and .contact-quick-section .contact-card, adding a hard offset shadow resembling sharp-edges. But these elements already have padding, maybe they are cards. We can add background and box-shadow? That would be visual. But we need to preserve HTML? The HTML is fixed, adding background color is fine. Let's examine the selectors:

- `.app-hero-section .badge.bg-warning` - a warning badge. We can change background color? The class bg-warning is from Bootstrap, it sets background. Overriding it here with a different background color could be acceptable. Font-size is fixed, but we can add box-shadow, color, border-radius maybe.

- `.contact-channels-section article, .contact-quick-section .contact-card` - These are probably cards. We can add border, box-shadow, background, etc. But they already may have their own styles. We could override with hard offset shadows and border-radius.

But we must not change border-width. Adding a border with width would be changing border-width from 0 to 2px, which is not allowed according to "border-color and border-style (NOT border-width)". Actually, the rule says we may change "border-color and border-style (NOT border-width)". That implies border-width should stay the same value as original. If original had no border, border-width is likely 0 default? In CSS, if no border specified, border-width is medium? Actually initial border-width is medium, but typically no border means border-style: none, so border-width is irrelevant. We can change border-style to solid without specifying width? If we change border-style from none to solid, border-width may become medium (about 3px). That would be adding a border and changing border-width effectively. The instruction says "border-color and border-style (NOT border-width)" meaning we are allowed to modify color and style, but not the width. If original was none, we shouldn't add a border because that changes width. So we need to avoid adding border where none existed. That's a constraint.

But box-shadow can mimic a border effect without affecting layout. For sharp-edges, we can use 4px 4px 0px 0px with a dark color, and 0 0 0 3px maybe? Actually box-shadow can have spread radius; that creates a border-like effect but doesn't affect layout. That is allowed. So we can add hard offset shadows and maybe a ring via box-shadow. Border-radius can change to 0 or 4px.

We need to produce the same selectors and only modify visual properties. Since the original rules only have layout/typography properties, we may need to add new visual properties to those selectors. But we need to be cautious: adding a background to `.app-hero-section .row .col-lg-7` would make the entire column colored, maybe undesired. But it's a visual refresh. Perhaps the target style "dense-dashboard" wants white cards on slate background, so we could set the background of article/card to white, box-shadow slate, etc. Also the badge we can restyle.

Let's consider each selector:

1. `.app-hero-section .row .col-lg-7` - In original, text-align: center. In a dense dashboard, hero sections might still have centered text. We could add a color or text-shadow? But it's a column, not a card. Maybe we don't need to add anything. But to ensure some visual change, we could apply a background gradient? That changes background but not layout. But on a column, a background gradient could fill the column; it might be fine. However aggressive style might have a hero with centered text and no background. So leaving it untouched may be okay, but the task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." This implies we need to change at least some visual properties. We can change the text-align? No, text-align is layout/typography, not in the allowed list. Actually text-align is in the never change list: "text-align, vertical-align". So cannot change. So we cannot alter the text-align property itself. But we could add `color` to that rule? The allowed changes include "All color values: background, color, border-color, fill, stroke, outline-color". So we can add a color property. But if the original didn't have color, adding it is changing the visual identity. That's fine. Maybe we can set color to a slate gray? But we need to know context. Without knowing the full CSS, it's risky. But we can choose a fresh palette. E.g., `.app-hero-section .row .col-lg-7 { text-align: center; color: #1e293b; }` but that could override inherited color, possibly okay.

However, do we need to add visual properties to every selector? Not necessarily, just refresh as appropriate. We can also adjust the media query condition? No, @media conditions locked.

2. `.app-hero-section .badge.bg-warning` - The original sets font-size: 0.85rem. We can add background-color, color, box-shadow, border-radius. Since this is a badge, we can style it as a sharp-edge badge. For example:
```
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background-color: #f59e0b;
    color: #1e293b;
    box-shadow: 3px 3px 0 0 #334155;
    border-radius: 2px;
}
```
But note: Bootstrap `.bg-warning` sets background-color: #ffc107!important? Actually Bootstrap's `.bg-warning` has `background-color: #ffc107 !important;`. Overriding it without !important may not work if specific. But our selector is more specific? `.app-hero-section .badge.bg-warning` is more specific than `.bg-warning`, so it should override. We can add `!important` maybe? But we shouldn't add too many. In original, they didn't override background. But to change appearance, we can. However, if this is within a media query, on small screens only. That's okay.

3. `.contact-channels-section article, .contact-quick-section .contact-card` - original sets padding: var(--space-md) !important; We can keep padding as is or adjust within ±20%. If we don't know var, we can set padding to something like calc(var(--space-md) * 0.8) ? That might be within ±20%. But using calc may be more modern. We can also add background, box-shadow, border-radius. Since these are likely cards, we can make them sharp-edged with hard offset shadow:
```
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background-color: #ffffff;
    box-shadow: 4px 4px 0 0 #334155;
    border-radius: 0;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
```
But adding transition with transform might be okay, but transform is not in allowed list? Actually properties like "transition" are allowed. We can change transition timing. Adding transform on hover? We can't add :hover because selectors must be preserved exactly: "Pseudo-classes (:hover, :focus, ::before, ::after)" are locked? Actually they are listed in "Selectors (CRITICAL - HTML is fixed): ... Pseudo-classes (:hover, :focus, ::before, ::after)" So we cannot add new pseudo-classes. So no hover rules. But we can add transition property to the base rule, so when any existing hover elsewhere changes box-shadow, transition applies. That's fine.

But we must ensure no layout change. Adding box-shadow doesn't affect layout. Adding background doesn't. Adding border-radius doesn't. Good.

Now, we need to produce output CSS. Let's craft a coherent set of changes.

Target style: dense-dashboard with sharp edges.
Color palette: Cool grays #1e293b (slate-800), #334155 (slate-700), accent blue #3b82f6, white cards on slate background. But the original CSS is only a small media query, not the whole file. We might want to set backgrounds if needed.

Let's think of a meaningful refresh for each selector:

- For `.app-hero-section .row .col-lg-7`, center text. Maybe add `color: #334155;` to make text slate color. Also maybe `text-shadow: 1px 1px 0 rgba(255,255,255,0.5);`? That might be fine. But not necessary. Since we are limited, maybe we can change `text-align`? No. Could change `font-size`? No. We can add `color` and maybe a subtle `text-shadow`? But text-shadow is allowed. We can add a custom property? Not needed.

- For `.app-hero-section .badge.bg-warning`, change the badge to use accent blue or warning amber? The original is `bg-warning`, so warning color is amber. Target palette includes accent blue. But we should respect the "warning" semantic? In dense-dashboard, warning might still be amber. We could use a darker amber/amber with slate outline. But maybe change it to accent blue? That would be misleading. Better use a more vivid amber like `#f59e0b` with dark text `#1e293b`, hard shadow `#1e293b`. Border-radius 2px. This aligns with sharp edges.

- For `.contact-channels-section article, .contact-quick-section .contact-card`, these are card components. Make them white with a hard offset shadow in slate color. Set border-radius to 0 or 2px. Add border? Can't add border-width. We can use box-shadow to create a border-like effect: `box-shadow: 0 0 0 2px #1e293b, 4px 4px 0 0 #334155;` This creates a 2px solid "border" using spread radius, which is allowed. Actually box-shadow doesn't affect border-width. So we can do that. The shadow with no offset and 2px spread creates a ring around the card. This is a decorative border. Perfect. Then an offset hard shadow to create the sharp-edge look. Also set background white. Add transition for snappy transitions: `transition: box-shadow 0.15s ease, transform 0.15s ease;` But transform is an animation property not locked. We can add transition but not transform itself. If we add transform property, that may affect layout? No, transform doesn't affect layout, but it changes appearance. However, if no hover rule applies transform, it's just `transform: none`. That's unnecessary. We can just set `transition: box-shadow 0.15s ease;` to ensure hover states (if existing elsewhere) transition quickly. This satisfies "snappy transitions (0.15s)".

Also, we might want to set the `padding` within ±20%. The original is `var(--space-md)`. We don't know its value, but to keep layout, we can keep it exactly. However, the instructions say "padding, margin (keep similar values, ±20% maximum)". Keeping exact is within ±20%. So we can keep `padding: var(--space-md) !important;`. But maybe we can change to `padding: calc(var(--space-md) * 0.9) !important;`? That could be safer? Actually multiplying custom property by 0.9 is within 10% reduction. But if `--space-md` is defined only for root, calc is fine. But we need to be careful: `var(--space-md)` might be defined in a parent scope. The calc is valid. The original uses `var(--space-md)` which is likely a CSS custom property. Multiplying by 0.9 gives a slightly smaller padding, within 20%. This would be a visual change (slightly tighter, dense dashboard). But the original value is still used in a calc, and the custom property may be another value. To avoid any risk of breaking, we can keep the same value. However, "dense-dashboard" wants compact padding 8-16px. If --space-md is large, reducing it could help. But without knowing, I can still use `calc(var(--space-md) * 0.8)` to reduce by 20%. That's the max reduction. That might make cards tighter. But the original had `!important`. We can keep `!important`.

Let's craft the new CSS.

We must preserve the media query and selectors exactly. The original block:

```
@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 to output only the rewritten CSS. We'll maintain the exact structure, blank lines, but change/add visual declarations. We must not change text-align, font-size, or padding drastically. We'll keep those as is.

Let's add:

For `.app-hero-section .row .col-lg-7`:
- `color: #1e293b;` (cool dark slate text)
- `text-shadow: 0 1px 0 rgba(255,255,255,0.4);` maybe not necessary. Or maybe no text-shadow because sharp edges don't use text-shadow. Could add `letter-spacing`? No, typography locked. So add color only.

For `.app-hero-section .badge.bg-warning`:
- `background-color: #f59e0b;` (amber)
- `color: #1e293b;` (dark slate)
- `border-radius: 2px;`
- `box-shadow: 3px 3px 0 0 #334155;` (hard shadow)
- maybe `transition: box-shadow 0.15s ease;` but not necessary.
- `