/* ============================================================
   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 for a file called `saishi.css` (块2/2 = block 2/2). They provided a specific snippet of CSS that is part of a larger file. The target style is "editorial-magazine" with "sharp-edges" effect 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 block. The layout-related properties I cannot change:
- `text-align: center` — this is typography/alignment (text-align is in the NEVER CHANGE list)
- `font-size: 0.85rem` — typography, cannot change
- `padding: var(--space-md) !important` — padding is layout, I can change ±20% max but the instruction says keep similar. Actually `--space-md` is a CSS custom property value... The instructions say CSS custom properties (--color-*, --shadow-*) values may change. `--space-md` is a spacing variable, not a color/shadow variable. So I should keep `var(--space-md)` as is.

Hmm, the issue here is that this particular block doesn't have any colors, shadows, borders, or radius. It only has layout/typography properties. 

Wait — the instructions say:
- "text-align" is in the NEVER CHANGE list
- "font-size" is in the NEVER CHANGE list
- "padding" is in the NEVER CHANGE list (keep similar, ±20% maximum)

So there's essentially nothing to change in this snippet... unless I add visual properties, but I can't add new rules that weren't there because the selectors must be preserved. Actually, I could add visual declarations within the existing rules, but that might be overstepping.

Hold on. Let me re-read the task. The file is "assets/css/saishi.css#块2/2" — so this is only block 2 of 2. The block that was provided is the only thing I see. The task says "Refresh this CSS visually."

Given the conservative mode constraints and the fact that this specific media query block contains only layout/typography properties, I need to be careful. I can't change:
- `text-align: center` (it's in the never-change list)
- `font-size: 0.85rem` (never-change)
- `padding` with `var(--space-md)` (padding values must stay within ±20%, and using the same variable keeps it identical)

So what can I change here? Let me look carefully...

Actually, maybe I should consider changing `padding: var(--space-md) !important` to a slightly different value? The instruction says padding can change by ±20%. `--space-md` is presumably defined elsewhere in the file (which I don't see). If I change it to a literal value, that could break the design system. Better keep the variable.

Since there are no colors, shadows, transitions, gradients, filter, opacity, etc., there is strictly nothing to change in this block.

But the task expects me to output rewritten CSS. Options:
1. Output the same CSS as-is (since nothing can change) — but that seems non-responsive to the task.
2. Add visual properties that fit the editorial-magazine + sharp-edges style, like border, box-shadow, etc., to the existing selectors. But adding new declarations to existing rules is technically "changing" the rule in a way that preserves layout. This might be acceptable since I'm not changing selectors or layout, just adding visual decorations.

Wait — actually, re-reading: "Only change colors, shadows, radius, transitions, gradients." Additions could be considered changes. But the instruction says "Refresh the visual identity WITHOUT changing layout structure or class names." Adding visual properties could be within scope if they don't affect layout.

Hmm, but adding `box-shadow` or `background` to `.app-hero-section .badge.bg-warning` — the badge is a `bg-warning` Bootstrap class. Adding a hard offset shadow to it would change its appearance. But would that mess with the layout? box-shadow doesn't affect layout (unless it's inset... no, box-shadow doesn't affect layout at all). border would affect layout if added (border-width changes box size). So I could add box-shadow safely.

But wait — is that appropriate? The user said "Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." Adding a shadow is a "change" to shadows. It might be overstepping to add new declarations, but the spirit of the task is to refresh visually.

However, I'm cautious. The safer approach: since this block has only typography/layout, and there's truly nothing to change, I could output the same CSS. But that fails the "fresh palette" expectation.

Let me reconsider. The file fingerprint is `1a72f298eb81` and this is "块2/2" (block 2/2). This suggests the file was split into two blocks, and I'm seeing the second block. The actual full file includes this media query. Other parts of the file (block 1) would have colors etc. I only need to rewrite what I see.

Given what I see, the best actions:
- Keep the media query and selectors identical.
- Keep `text-align: center` and `font-size: 0.85rem` unchanged (they're protected).
- For padding — I could adjust within ±20%: `var(--space-md)` — if space-md is say 1rem (16px), then ±20% would be 12.8px to 19.2px. But I don't know the value of `--space-md`. I could replace `var(--space-md)` with `calc(var(--space-md) * 0.9)` but that changes the value by 10%, within bounds. Hmm, but that seems unnecessary and might affect layout.

Actually, wait. The instruction says: "padding, margin (keep similar values, ±20% maximum)". `var(--space-md)` is already a value. If I keep it as-is, that's fine. I think the safest is to keep padding as-is.

- `!important` — keep.

What about adding visual properties? The rules:
1. `.app-hero-section .row .col-lg-7 { text-align: center; }` — only text-align. Could add `color`? No, changing text color inside hero section might be fine but it's not requested in that rule. Adding color here would change text color, which is a visual change. But is it within scope? The instruction says "All color values... may change". It doesn't explicitly forbid adding colors where none existed. But I worry about being too aggressive.

Actually, let me think about the "editorial-magazine" target. The color palette: cream background (#f5f1e8), ink text (#1a1a1a), accent deep red (#c44536) or olive (#6b705c). The sharp-edges variant: hard offset shadows 4px 4px 0px, small radius 0-4px, strong borders 2-3px, snappy transitions 0.15s.

Given the block is only a mobile media query, the visual changes that make sense in a mobile context:
- Badge: could get a hard offset shadow and deeper red/olive styling to fit editorial. But `.badge.bg-warning` is Bootstrap's warning badge (yellow). Changing the background would require `background-color` — but that class also exists elsewhere, and Bootstrap's `.bg-warning` sets `background-color`. If I set `background-color` on `.app-hero-section .badge.bg-warning`, it would override Bootstrap for that badge only. This is a visual change and doesn't affect layout (background doesn't affect layout).

Hmm, but the badge text color is set by Bootstrap's `.badge` (uses `color: #fff` by default? Actually in Bootstrap 5, `.badge` has `color: #fff` unless it's a soft badge. `.bg-warning` badge would have white text on yellow — poor contrast; Bootstrap 5 actually overrides text color for `.bg-warning` to `#000` via `.badge.bg-warning { color: #000 }`? No wait — Bootstrap 5's `.text-bg-warning` handles contrast. With `.bg-warning` alone, text is white by default and contrast is poor, which is why Bootstrap 5 recommends `.text-bg-warning`. But many templates use `.bg-warning` with custom text.)

I should be careful not to break Bootstrap utilities. But the user only gave me this snippet; maybe the badge is custom-styled elsewhere in the file.

Let me take a step back. The instruction says "Only change colors, shadows, radius, transitions, gradients." It doesn't say "add new properties." Changing = modifying existing values. If a property doesn't exist in the rule, there's nothing to change.

Given there are no visual properties in this block, the most faithful output is the same CSS. But that seems unhelpful for the "refresh" goal.

Actually, maybe I should consider that the user wants me to apply the target style to this block by adjusting what I can. Since `padding` and `font-size` and `text-align` are protected, and there are no other properties... 

Wait, let me look again:

```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 only think I could arguably change is:
- `padding: var(--space-md) !important;` — I could change to `padding: calc(var(--space-md) * 0.85) !important;` to make it 15% smaller (within ±20%). But this only applies to the mobile padding of those cards. This is a real layout-affecting change, but within tolerance. Does it serve the editorial style? Editorial style has "generous outer padding" — so maybe increase padding by 20%: `calc(var(--space-md) * 1.2)`. But that's aggressive-only? The "Generous outer padding" is listed under "Layout pattern (Aggressive only)" — meaning it's an aggressive variant choice. In conservative mode, I should keep padding within ±20%.

Hmm, the target style section says "Layout pattern (Aggressive only)" — that's the layout pattern description for the aggressive mode. Since I'm in conservative mode, I should not apply aggressive layout changes. The layout stays fixed. So padding should stay approximately the same.

I think the cleanest approach: output the exact same CSS if there's nothing to change. But the prompt says "Refresh this CSS visually" and demands output. If I output identical CSS, the user might think I failed.

Alternatively, I could add decorative properties that don't affect layout:

For `.app-hero-section .badge.bg-warning`:
- Add `box-shadow: 3px 3px 0 #1a1a1a;` (hard offset shadow, sharp edges)
- Add `border-radius: 0;` (sharp edges)
- Maybe `transition: box-shadow 0.15s ease;` — snappy transition
- But adding a shadow to a badge with `bg-warning` might look odd unless the badge already has a custom background.

Actually, adding box-shadow to the badge fits the "sharp-edges" style perfectly. A hard offset shadow in ink black over the cream background. The badge is warning-yellow; the shadow adds an editorial stamp look.

For `.app-hero-section .row .col-lg-7` — this is a text alignment rule for mobile. Nothing visual to add without affecting layout. Could add `color: #1a1a1a;` to ensure ink text — but that changes text color which is a color change. However, it's unnecessary since it inherits. Adding it is harmless.

For `.contact-channels-section article, .contact-quick-section .contact-card` — these are cards. I could add:
- `box-shadow: 4px 4px 0 #c44536;` (hard offset shadow, accent color)
- `border-radius: 0;` (sharp edges)
- `border: 2px solid #1a1a1a;` — but wait, adding border-width changes layout! The never-change list says "border-color and border-style (NOT border-width)". Adding a `border` shorthand would add a border where there was none, changing layout. That's prohibited! So I must NOT add `border: 2px solid`. Only if border-width already existed could I change color/style. Since there's no border here, I can't add one without affecting layout.

- `background-color: #fff` or a cream tone — background doesn't affect layout. Could add `background-color: #faf7f0;` or keep it subtle. But wait, these cards presumably already have backgrounds from their base classes (not shown). If I override with a cream tone, it changes the identity. In editorial style, cards might be white or cream with ink borders. Adding `background-color: #f5f1e8` might blend with the page too much. Maybe a slightly different tone like `#fffaf0` or `#fdfbf7`.

- `transition: box-shadow 0.15s ease-in-out;` and maybe `transform` — no, transform is layout-ish? Transform doesn't affect layout but it's not in the allowed-change list... The allowed list mentions "transition timing, easing, duration" — so I can change transitions. If a transition already exists. Adding a transition property where none exists is an addition. Hmm.

I'm overthinking. Let me be pragmatic. The user expects a rewritten CSS that fits editorial-magazine + sharp-edges. I'll modify what's there and add subtle decorative properties that don't affect layout:

1. Keep the media query and selectors identical.
2. Keep `text-align: center` and `font-size: 0.85rem`.
3. For padding, keep `var(--space-md)` — it's a fixed design token. Changing it would deviate.

But then what do I change? Nothing. That can't be right.

Let me re-read the prompt once more:

"✅ YOU MUST CHANGE (visual identity only): All color values: background, color, border-color, fill, stroke, outline-color; box-shadow; text-shadow; border-radius; gradient colors/stops; transition timing/easing/duration; filter; backdrop-filter; opacity; outline styles; border-color/style (NOT border-width); caret-color; accent-color; CSS custom properties (--color-*, --shadow-*) values."

"🔒 NEVER CHANGE: ... padding, margin (keep similar values, ±20% maximum) ..."

So padding isn't strictly never-change; it can change ±20%. Font-size and text-align are strictly never-change.

Given the padding rule, I could adjust padding slightly. But why would I? The editorial style says "generous outer padding" — so I could increase padding by up to 20%. That would be a visible change: `padding: calc(var(--space-md) * 1.2) !important;`. That changes padding from `var(--space-md)` to 1.2 × space-md — exactly at the +20% limit. That aligns with the editorial "generous padding" direction.

But changing padding on mobile cards could make them feel more spacious. It's a reasonable, conservative-allowable change.

Hmm, but `calc(var(--space-md) * 1.2)` — is `--space-md` a length? Yes, presumably. Multiplying works.

But actually, using `calc()` inside `padding` with `!important` — fine.

Alternatively, `padding: calc(var(--space-md) + 0.25rem) !important;` — if space-md is 1rem, that's 1.25rem = +25%, which exceeds 20%. So not that. `calc(var(--space-md) * 1.2)` is exactly 20%.

Hmm, but is that a good idea? The mobile media query at max-width 575.98px — making cards 20% more padded on small screens could be nice for editorial feel.

Now for the badge rule, I can change `font-size`? No — font-size is never-change. So keep `0.85rem`.

For the text-align rule, keep it.

What about adding `box-shadow` and `border-radius` to the badge and cards? The prompt says "Only change colors, shadows, radius, transitions, gradients." This implies the existing properties. But it also says the goal is "same layout, fresh color palette + shadow/radius identity." The "shadow/radius identity" suggests adding shadows and radius as part of the new identity. Since box-shadow and border-radius don't affect layout, adding them is safe and in the spirit of the task.

But adding properties could be seen as not "changing" but "adding." The conservative mode says "HTML is FIXED — only colors, shadows, and decorative properties may change." Decorative properties may change. I think adding decorative properties (box-shadow, border-radius) to existing rules is acceptable if they don't affect layout.

However, I must be careful: adding `border-radius` to `.app-hero-section .badge.bg-warning` changes the badge shape. Sharp-edges says 0-4px radius. Bootstrap badges default to `border-radius: 0.375rem` (6px). Changing to 0 or 2px for sharp edges is a visual identity change — fits the brief.

But wait, if this rule previously didn't set border-radius, the badge has Bootstrap's default 6px. To get sharp edges, I need to override it. Adding `border-radius: 2px;` here — is that okay? It changes the badge's appearance, not layout. Fine.

Similarly, adding `box-shadow: 3px 3px 0 #1a1a1a;` to the badge