/* ============================================================
   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 the CSS in a conservative mode, preserving all selectors and layout exactly, but changing visual properties like colors, shadows, radius, transitions, etc. The target style is editorial-magazine with glow-effects variant.

Let me analyze the original 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;
    }
}
```

This is a media query with three rules. Let me check what I can change:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — text-align is in the "never change" list (typography section: text-align, vertical-align). So I can't change text-align. There are no colors, shadows, etc. here.

2. `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — font-size is in the "never change" list. So I can't change font-size. There's no visual property to change here.

3. `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }` — padding is in the "never change" list but with ±20% tolerance. The padding uses a CSS custom property `var(--space-md)`. I could change the custom property value, but it's referenced, not defined here. Hmm. Changing `var(--space-md)` to a different var or a literal value might be risky. Padding is allowed to change within ±20% — since it's a variable, I don't know the actual value. However, I could keep the declaration as-is or I could adjust it slightly.

Actually, the instruction says "padding, margin (keep similar values, ±20% maximum)". So if the original relies on `var(--space-md)`, I might keep it as is, or maybe adjust it slightly. Since the value is a variable reference, I'd keep it.

The problem is: this CSS block has almost no visual properties to change. The only things that could be changed:
- text-align: center — but that's on the "never change" list (it's under typography: text-align). Actually wait, let me re-read the never change list:

"📐 LAYOUT (HTML cannot adapt to changes):"
- display, position, grid stuff, flex stuff, width, height, padding, margin, gap, justify-content, align-items, float, clear, z-index, overflow, box-sizing, visibility, aspect-ratio, object-fit, object-position, text-align, vertical-align

Yes, text-align is in the never-change layout list.

- font-size: 0.85rem — font-size is in the never-change typography list.

- padding: var(--space-md) — padding is in the never-change layout list (within ±20%). 

So essentially, there is nothing here that I'm allowed to change. The requested changes (colors, shadows, radius, transitions) don't exist in this CSS block.

What should I do? The task says "Only change colors, shadows, radius, transitions, gradients." But there are none in the original CSS. The most conservative and correct action is to output the CSS as-is, since there are no visual properties to modify without breaking the constraints.

However, the user asked to "Refresh this CSS visually." Maybe I could add visual properties? But that would be adding declarations not present in the original, which might be acceptable since the instruction says "Only change colors, shadows, radius, transitions, gradients" — it doesn't explicitly forbid adding them. But the instruction also says "Keep ALL selectors and layout exactly as-is."

Hmm. Adding a box-shadow or border-radius to `.app-hero-section .badge.bg-warning` would be a visual change without breaking layout. But is that within scope? The "MAY CHANGE" list is about changing existing values. Adding new declarations could change layout if not careful (e.g., adding padding would change layout, but adding box-shadow won't affect layout).

Let me think about what's appropriate. The target style is editorial-magazine with glow effects. The media query is for small screens (max-width: 575.98px). 

Rule 1: `.app-hero-section .row .col-lg-7 { text-align: center; }` — I can't change text-align. Maybe add a color? But that could change visual identity. Actually, adding a color to a text-align rule seems odd. But maybe I can add a text-shadow or something? That seems risky and unnecessary.

Rule 2: `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — font-size can't change. But I could add a background color, border-radius, box-shadow, etc. The badge has class `bg-warning` (Bootstrap warning color - yellow). For editorial-magazine with deep red accent, I could add a glow shadow and radius. That would be a visual refresh.

Rule 3: padding: var(--space-md) !important — padding is within ±20% tolerance. I could change it to `calc(var(--space-md) * 0.9)` or similar? But that's risky. Or keep it. Maybe I can add a border-radius or something? The selector `.contact-channels-section article, .contact-quick-section .contact-card` — these are cards/articles. Adding a border-radius and box-shadow would be visual.

But the core question: should I add new declarations? The instructions under "✅ YOU MUST CHANGE" say "All color values... box-shadow... text-shadow... border-radius... gradient... transition... filter... opacity... outline... border-color... caret-color... accent-color... CSS custom properties." It's a list of properties to change. The "NEVER CHANGE" list is about layout.

There are no existing color values in this snippet except the class name `bg-warning` which implies Bootstrap's yellow. There are no shadows, no radius, no transitions. So to fulfill the mission, I'd need to add some decorative properties.

I think the intended behavior is: rewrite the CSS, adding the visual properties to achieve the target style while preserving all selectors and layout. Since the original has almost nothing visual, I should add subtle glow/shadow/radius touches without breaking anything.

But wait — adding border-radius to an element that didn't have it could change the look but not layout. Fine. Adding box-shadow doesn't affect layout. Adding background color could affect look. But I should be careful: the badge already has `bg-warning` class (Bootstrap sets background-color: #ffc107). If I add a background-color to override it, that changes the color. Editorial-magazine uses deep red #c44536 or olive #6b705c accent. But for a "warning" badge, overriding to deep red might be intentional for the visual refresh.

However, I must be cautious. The `.app-hero-section .badge.bg-warning` rule only sets font-size. Bootstrap's `.bg-warning` sets background-color. If I add my own background-color, I'd override Bootstrap. The original rule didn't do that, but adding it wouldn't break layout — it's a color change, which is allowed.

Let me think about what makes sense:

1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — I'll keep text-align: center. I could add a color? But the hero section probably has its own text color. Adding a color here might be unwanted. But editorial-magazine's ink black color (#1a1a1a) on cream background. Hmm. Adding color to the col could be risky because the hero might already have a color set elsewhere. I'd lean toward keeping this rule as-is since there's literally nothing visual to change.

Actually, "text-shadow" is in the allowed list. I could add a subtle text-shadow to the hero text. But a text-shadow on a column could inherit... no, text-shadow is inherited. That might affect all text in the hero section, which could be a nice editorial touch? Or it could look bad. Conservative mode says be careful. I think the safest is to not add declarations where there's no natural place.

But the task says "Refresh this CSS visually." If I output the CSS unchanged, that fails the task. Let me reconsider.

The "output" instructions: "only the rewritten CSS, preserving ALL selectors and layout exactly" and the self-check says "Colors throughout the file replaced with fresh palette? Shadows redesigned (different offsets, colors)? Border-radius adjusted for new visual style?"

If there are no colors/shadows/radii in the file, there's nothing to replace. The self-check would pass vacuously. But would the user be happy? They wanted a refresh.

I think the best approach is to add minimal decorative properties that align with the target style, being careful not to alter layout:

For the badge rule, I can add:
- background-color: #c44536 (deep red accent) — but that overrides Bootstrap's bg-warning. Actually the class is `bg-warning`, so semantically it's a warning badge. Overriding to deep red might be okay if we want to change the palette. But warning yellow is meaningful. Hmm. In editorial-magazine, the accent is deep red #c44536. But a "warning" badge in deep red? Could work if the site's warning color is red. Alternatively, keep the yellow but add a glow shadow in the accent color. But the instruction says "All color values ... replace with fresh palette." The bg-warning color isn't in this file though.

Let me think about what a careful conservative rewrite would do.

Given the media query context (mobile), the glow effects variant says:
- Glow shadows in accent color: 0 0 24px rgba(accent, 0.4)
- Halo on hover: 0 0 32px rgba(accent, 0.6)
- Medium radius (8-16px)
- Subtle pulsing animations

But adding animations would require @keyframes which is allowed to be added? The original has no @keyframes. Adding new @keyframes is fine as long as I don't change existing ones. But adding animation-name to a rule is fine.

However, for a max-width: 575.98px media query, pulsing animations on badges might be odd. But it's for visual flair.

Let me draft a rewrite:

```css
@media (max-width: 575.98px) {
    .app-hero-section .row .col-lg-7 {
        text-align: center;
        color: #1a1a1a;
        text-shadow: 0 1px 2px rgba(196, 69, 54, 0.15);
    }

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        background-color: #c44536;
        border-radius: 12px;
        box-shadow: 0 0 24px rgba(196, 69, 54, 0.4);
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        border-radius: 14px;
        box-shadow: 0 8px 24px rgba(26, 26, 26, 0.08);
    }
}
```

Wait, but adding `background-color: #c44536` to the badge overrides Bootstrap's warning yellow. Is that acceptable? The instruction says colors should be refreshed. Yes, I think it's fine. But the badge has `bg-warning` class — semantically it's a warning badge. If I change it to deep red, it might confuse semantics. However, the user asked for editorial-magazine palette with deep red accent. So overriding to deep red aligns with the requested palette.

Alternatively, use the olive accent #6b705c for the badge? Deep red is more of a "warning" color than olive. Deep red #c44536 works.

But hold on: the `.app-hero-section .badge.bg-warning` selector is inside a media query for small screens. The font-size is 0.85rem. Adding border-radius and box-shadow is fine. But background-color override — Bootstrap's `.bg-warning` sets `background-color: #ffc107 !important`? Actually, Bootstrap 5's `.bg-warning` sets `background-color: #ffc107 !important;` Hmm, let me recall. In Bootstrap 5, utilities like `.bg-warning` are generated with `!important`? Let me check: Bootstrap 5's background utilities: `.bg-warning { background-color: #ffc107 !important; }` — yes, they include `!important`. If Bootstrap uses `!important`, my non-important background-color won't override it. To override, I'd need `!important`. But the original rule doesn't use `!important` for the badge. Adding `!important` is a change to the declaration but not to layout. Hmm, that could be okay.

Actually, wait. The original rule is `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }` — it doesn't override the background. If Bootstrap's `.bg-warning` uses `!important`, my adding `background-color: #c44536;` without `!important` would be overridden by Bootstrap (specificity: `.bg-warning` is one class, my selector `.app-hero-section .badge.bg-warning` has higher specificity (3 classes), but `!important` wins over normal declarations). So to be safe and to actually change the color, I'd need `!important`.

But adding `!important` to background-color might be too aggressive. Alternatively, I can leave the background as-is and only add a box-shadow with the accent color. But the instruction "All color values ... replace with fresh palette" — the bg-warning yellow isn't in this file; it's Bootstrap's. I'm not required to override Bootstrap's colors that aren't in this file. The instruction refers to color values in the provided CSS. So I don't need to override the badge background.

But the target style says "Single accent color (deep red #c44536 or olive #6b705c)" — the yellow badge would clash. To achieve a cohesive palette, overriding the badge to deep red is desirable. But it's risky with Bootstrap's `!important`.

Hmm. Let me reconsider. Since this is a conservative mode with careful constraints, maybe I should be minimal: only change what's changeable and add subtle decorative properties without overriding Bootstrap utilities.

Let me think about what gives the best "refresh" while respecting constraints:

Rule 1: `.app-hero-section .row .col-lg-7 { text-align: center; }` — Add `color: #1a1a1a;` and `text-shadow: 0 1px 3px rgba(196, 69, 54, 0.18);`? Adding color could clash with existing hero text color. But it's safe in terms of layout. Adding text-shadow is a visual change. However, a text-shadow on a large hero heading could look nice with glow effects. But this selector targets the column, not the heading directly. Text-shadow inherits, so it would apply to all text inside. With a subtle shadow, that's okay.

Actually, in editorial style, headings often have no text-shadow. Glow effects variant wants glow shadows, but on cards/badges, not necessarily on body text. A text-shadow on the hero column might look unprofessional. Let me be careful.

Maybe for rule 1, the only changeable thing is color. But the original doesn't have a color. Adding one is a new declaration. I could add `color: #1a1a1a;` to enforce ink black. That seems reasonable for editorial-magazine.

Rule 2: Add `border-radius: 999px;` (pill badge) or 12px? Medium radius (8-16px) per glow variant. The badge is a pill in Bootstrap normally (it has `border-radius: 0.375rem` or pill with `.rounded-pill`). Adding `border-radius: 12px` is fine. Add `box-shadow: 0 0 24px rgba(196, 69, 54, 0.4);` for glow. Also maybe `border: 1px solid rgba(196, 69, 54, 0.6);`? But border-color is changeable; adding a border changes layout slightly (border adds to box size unless box-sizing: border-box — Bootstrap uses border-box, so adding a 1px border will shrink content area slightly, which is a layout change). To be safe, avoid adding border-width. I can add `outline`? Outline doesn't affect layout. But the instruction allows outline-color and outline-style changes. Adding an outline is okay. But outline might look weird on a badge.

Rule 3: Keep `padding: var(--space-md) !important;` — I could change it to `padding: calc(var(--space-md) * 0.9) !important;` to stay within ±20%. Or keep as is. Since I don't know the value of --space-md, changing it might exceed ±20% if --space-md is small? Actually multiplying by 0.9 is within 10% reduction, which is within ±20%. That's safe. But is it necessary? The instruction says "keep similar values (±20% maximum)" — keeping it identical is within tolerance. I'd keep it exact to be safest, or reduce slightly to show a change. Hmm. The self-check says "width, height, padding, margin within ±20% of input?" If I keep it identical, it passes. If I change to 0.9, it passes too. I'll keep it as is since there's no visual benefit to changing it without knowing the base value.

Then add `border-radius: 14px;` and `box-shadow: 0 12px 32px rgba(26, 26, 26, 0.10), 0 0 24px rgba(196, 69, 54, 0.15);` for a subtle glow. That gives editorial cards a fresh look.

Should I add a transition? The glow variant says