/* ============================================================
   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;
    }
}

The user wants me to rewrite CSS with a visual refresh. Let me analyze the given CSS:

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

The constraints:
- MUST NOT change: selectors, layout (display, position, grid, width, height, padding/margin ±20%, gap, etc.), typography (font-family, font-size, font-weight, line-height, etc.), animation names, media query breakpoints.
- CAN change: colors, box-shadow, text-shadow, border-radius, gradients, transitions, filters, opacity, outline, caret-color, accent-color, CSS custom properties values.

Wait, the original CSS has `text-align: center;` — that's typography/layout alignment. `text-align` is in the "DO NOT CHANGE" list: "text-align, vertical-align". So I must keep `text-align: center;`.

`font-size: 0.85rem;` — font-size must not change. Keep it.

`padding: var(--space-md) !important;` — padding is a layout property, but I can change it within ±20%. However, it uses a CSS custom property `var(--space-md)`. The instructions say I can change CSS custom property values. But `--space-md` is likely defined elsewhere (not in this file). Since it's a var reference, changing it would affect other things potentially, but it's referenced within this file. Hmm.

The rule: "padding, margin (keep similar values, ±20% maximum)". Since the value is `var(--space-md)`, I cannot know the actual value. Changing the variable name would break things. I could keep `var(--space-md)` as-is. Actually, I'm allowed to change CSS custom properties values — but `--space-md` is defined elsewhere maybe. The instruction says "CSS custom properties (--color-*, --shadow-*) values" — only those related to color/shadow. `--space-md` is a spacing variable. I should keep it unchanged.

So for this particular CSS snippet, I have very little to change. All three rules are layout/typography constraints that I cannot change.

But the task wants me to refresh visually. Hmm. Maybe I can add visual properties to the existing rules? Wait — the instruction says "ONLY the rewritten CSS, preserving ALL selectors and layout exactly." I can add properties that are visual (colors, shadows, radius, transitions) within the existing rules, and also add new rules? No — selectors must be preserved exactly, and I shouldn't add new selectors that aren't in the original? Actually, "Keep ALL selectors and layout exactly as-is." It doesn't explicitly forbid adding new selectors, but typically conservative mode means don't change the structure — adding new rules could be considered changing structure. However, the safest interpretation: rewrite only the existing rules, changing only allowed visual properties.

But there are no visual properties in the original CSS! So I need to be creative while staying conservative. I could:

1. Keep the media query and selectors.
2. Keep `text-align: center;`, `font-size: 0.85rem;`, `padding: var(--space-md) !important;`.
3. Add visual properties to these rules — but wait, adding `color`, `background`, `box-shadow` to a rule that previously didn't have them could alter the design. But the task explicitly says refresh visual identity. The instruction says "Only change colors, shadows, radius, transitions, gradients" — adding them is a change.

Hmm, but the target style "asymmetric-blocks" and effect variant "glow-effects" suggests I should add glow shadows etc. But the selectors here are `.app-hero-section .badge.bg-warning`, `.contact-channels-section article`, `.contact-quick-section .contact-card`. 

Wait, let me reconsider. The file is "assets/css/saishi.css#块2/2" — block 2 of 2. So this is only a fragment. The original CSS is just this media query. My job is to refresh this fragment visually while keeping selectors and layout.

Given the constraints, I can:
- Add `color`, `background`, `border`, `border-radius`, `box-shadow`, `text-shadow`, `transition`, `backdrop-filter` to the existing rules.
- Keep the existing declarations unchanged.

But is adding new declarations "changing the CSS"? The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Adding new declarations that are colors/shadows/radius/transitions seems acceptable and is really the only way to fulfill the task.

Let me think about what makes sense visually:

For `.app-hero-section .row .col-lg-7` — it's a hero column centered on mobile. I could add a text-shadow or something? But text-align center is about text. Adding a glow text-shadow might be nice for the glow effect. But this is a container, maybe not text. Hmm, adding text-shadow to a column might affect all text inside — risky but allowed.

For `.app-hero-section .badge.bg-warning` — a badge with background warning (Bootstrap). I could add `box-shadow` glow in accent color, `border-radius`, maybe a subtle transition on hover. But no hover rule. I can add a transition property to the badge.

For `.contact-channels-section article, .contact-quick-section .contact-card` — cards. I could add `border-radius`, `box-shadow`, `background`, `border`, `transition`.

But wait — Bootstrap classes like `.badge.bg-warning` are styled by Bootstrap. If I add background to `.contact-channels-section article`, it might override something. That's fine — it's a visual refresh.

However, I need to be careful: the original rule for `.contact-channels-section article` only sets `padding`. If I add a `background`, then in the mobile view, these articles will get a background color. That might be intended for the "asymmetric-blocks" target style with bold contrasting blocks.

Let me design with the target palette. The target style says "Bold contrasting blocks: each section different background; High contrast borders" and variant "glow-effects" with accent color glow shadows.

Since I don't know the accent color, I'll define it via CSS custom properties on the rules? Or just use a color. I can use a color palette:

- Accent: something like #7c3aed (violet) or #f59e0b (amber) to complement `bg-warning` (which is yellow/amber). Actually, `bg-warning` in Bootstrap is #ffc107 (yellow). Using a violet accent would contrast nicely.
- Glow: `0 0 24px rgba(124, 58, 237, 0.4)` → violet glow.

Let me craft:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 0 24px rgba(124, 58, 237, 0.25);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(255, 193, 7, 0.5), 0 4px 14px rgba(0, 0, 0, 0.15);
        transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(255, 193, 7, 0.06));
        border: 1px solid rgba(124, 58, 237, 0.25);
        box-shadow: 0 0 24px rgba(124, 58, 237, 0.18), 0 8px 24px rgba(0, 0, 0, 0.06);
        transition: box-shadow 0.3s ease, border-color 0.3s ease;
    }
}
```

Wait — `transform` is not in the allowed list? Let me check: "display, position, grid-template-*, width, height, padding, margin, gap, justify-content, align-items, align-self, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, object-position, text-align, vertical-align". `transform` is not listed, but also not listed as allowed. The allowed list says "Only change colors, shadows, radius, transitions, gradients." So I should not add transform. Instead, transitions can include `box-shadow` and `border-color`, `background-color`. But adding a `transform` in a transition value is just naming the property; it won't affect layout unless a hover changes transform. It's safer to avoid transform entirely.

Also, `transition` is allowed ("transition timing, easing, duration").

Now, the "asymmetric-blocks" target style says "unequal columns, mixed gaps, bold padding contrasts" — but those are layout changes, which are not allowed in conservative mode. The style prompt says "(Aggressive only)" for the layout pattern. So I'm only taking the color palette from it: "Bold contrasting blocks: each section different background; High contrast borders".

I must be careful with the `.contact-channels-section article` — it already has `padding: var(--space-md) !important`. If I add background and border, it's a visual change. Good.

But there's a subtle issue: The original CSS only appears in a media query for max-width: 575.98px. Adding box-shadow/background there is fine.

Should I worry about the `!important` on padding? I keep it as-is.

Let me also consider: The instructions say "No AI-REWRITTEN comments". So no comments.

Also "First character = first CSS character" — so output should start directly with `@media`.

Let me verify that I'm not changing any disallowed properties:
- `text-align: center;` — kept.
- `font-size: 0.85rem;` — kept.
- `padding: var(--space-md) !important;` — kept.

Added properties:
- `text-shadow` — allowed.
- `border-radius` — allowed.
- `box-shadow` — allowed.
- `transition` — allowed.
- `background: linear-gradient(...)` — allowed (gradient).
- `border: 1px solid rgba(...)` — border-color allowed, border-style is `solid` (allowed, since only border-width is restricted; I can change border-color and border-style, not border-width). Wait — "border-color and border-style (NOT border-width)" — so I can add a border? Hmm, adding `border: 1px solid ...` includes `1px` which is border-width. The original CSS has no border. Adding a border with a width could affect layout (box-sizing?). Actually, if box-sizing is border-box (Bootstrap default), adding a 1px border won't change layout size significantly, but it could. The rule says border-width should not change — but adding a border where none existed is a layout change risk. To be safe, I could use `outline` instead? Outline doesn't affect layout. But outline is in the allowed list: "outline styles (color, type)". Hmm.

Wait, the allowed list says "outline styles (color, type)" — so I can change outline color/type, but should I add one? Adding an outline of 1px might be safer than border for layout. But the target style wants "High contrast borders". Adding a border of 1px to a card in mobile... Bootstrap cards typically have borders already (`.card` has border 1px solid). But the selector is `.contact-quick-section .contact-card` — not necessarily a Bootstrap card. It might be a custom card.

Actually, to strictly follow "border-color and border-style (NOT border-width)", I should only modify existing borders' color/style, not introduce new border widths. But adding `border: 1px solid color` introduces a width. Alternatively, I could use `border: 0;`? No.

Hmm, let me re-read: "border-color and border-style (NOT border-width)" under "✅ YOU MUST CHANGE" — wait, it says must change: "border-color and border-style (NOT border-width)". That's under the "you must change" list? Let me re-read.

"✅ YOU MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow ...
  • border-radius ...
  • gradient colors...
  • transition timing...
  • 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 "you must change" means these are the categories of things that must be refreshed. It's not saying I must add new ones, but that wherever these exist, I should change them. Since the original has none of these, I need to add some. "border-color and border-style (NOT border-width)" — if I add a border, I must not introduce border-width? Well, adding any border requires a width. But if there's an existing border, I change its color/style not width.

To be safe, I can avoid adding a border with a new width. Instead, I can use `outline: 1px solid ...` — outline doesn't affect layout and is in the allowed list. But outline might look different (not rounded unless `outline-offset` etc.). Actually outline follows border-radius in modern browsers? Yes, in most modern browsers, outline follows the border-radius. Also I can use `outline-offset: -1px` to make it look like an inner border. But outline-offset is not mentioned... Let me check allowed list: "outline styles (color, type)". That probably includes outline-style, outline-color; outline-width maybe? It says "outline styles (color, type)" so width might be off-limits too. Hmm.

Alternatively, use `box-shadow: 0 0 0 1px rgba(...)` as a border-like ring — box-shadow doesn't affect layout and is 100% allowed. That's a great trick: `box-shadow: 0 0 0 1px rgba(124,58,237,0.25), 0 0 24px rgba(124,58,237,0.18)`. This creates a high-contrast border effect without any layout impact.

For the badge, I can use box-shadow glow.

But wait — the instruction says "High contrast borders" in target style. `box-shadow 0 0 0 1px` creates the visual of a border. That satisfies the aesthetic.

Actually, let me reconsider: adding a real `border: 1px solid ...` when there was no border — the padding stays the same, and with box-sizing: border-box, the element's outer width stays the same (content shrinks by 2px). This is a minor layout change, but the risk is low. However, the instructions explicitly warn: "border-width" should not change. Introducing a border-width where there was none is technically introducing one. I'll avoid it and use inset box-shadow ring.

So my plan:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        text-shadow: 0 0 24px rgba(124, 58, 237, 0.25);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        border-radius: 999px;
        box-shadow: 0 0 24px rgba(255, 193, 7, 0.55), 0 0 0 1px rgba(255, 193, 7, 0.4), 0 4px 14px rgba(0, 0, 0, 0.12);
        transition: box-shadow 0.3s ease, filter 0.3s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(255, 193, 7, 0.06));
        box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.25), 0 0 24px rgba(124, 58, 237, 0.15), 0 8px 24px rgba(0, 0, 0, 0.06);
        transition: box-shadow 0.3s ease, background 0.3s ease;
    }
}
```

Hmm, but the variant "glow-effects" mentions "Halo on hover: 0 0 32px rgba(accent, 0.6)". Since there are no hover rules in the original, adding a `:hover` selector would change selectors? The instruction: "Pseudo-classes (:hover, :focus, ::before, ::after)" — under "NEVER CHANGE: Selectors". That means I should keep existing pseudo-classes, but I shouldn't add new ones? It says "Selectors (CRITICAL - HTML is fixed): Class names: keep EXACTLY... Pseudo-classes (:hover, :focus, ::before, ::after)". It's listing selectors as things not to change. Adding new selectors would be changing selectors. So I won't add hover rules.

But I can set `transition: box-shadow 0