/* ============================================================
   SAISHI.CSS v3.0 - 赛事/文章/APP 页面专属样式
   ============================================================
   匹配 Section 模板:
   - ArticleSection (单文章详情)
   - AppHeroSection / AppQrSection / AppInstallSection / AppShowcaseSection
   - ContactChannelsSection / ContactFormSection / ContactQuickSection / ContactCommitmentsSection
   - LoginFormSection / SignupFormSection
   - SearchBoxSection (extends)
   - 滚动条 / 打印样式 / 图标
   ============================================================ */

/* ============================================
   1. Single Post (ArticleSection)
   ============================================ */
.single-post {
    overflow: hidden;
}

.single-post .post-meta {
    font-size: 0.9rem;
}

.single-post .post-meta i {
    color: var(--color-primary);
}

/* Post content typography */
.post-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--color-text);
}

.post-content :is(h2, h3, h4) {
    margin-block: 2rem 1rem;
    font-weight: 700;
    color: var(--color-primary-darker);
    line-height: 1.4;
}

.post-content h2 {
    font-size: 1.75rem;
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.post-content h3 {
    font-size: 1.35rem;
}

.post-content :is(p, li) {
    margin-bottom: var(--space-sm);
}

.post-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-block: var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-sm);
    box-shadow: var(--shadow-sm);
}

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.post-content a:hover {
    color: var(--color-primary-dark);
}

.post-content ul,
.post-content ol {
    padding-inline-start: 1.5rem;
}

.post-content code {
    background: var(--color-bg-muted);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--color-danger);
}

.post-content pre {
    background: var(--color-primary-darker);
    color: #fff;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-md);
}

.post-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-md);
}

.post-content table th,
.post-content table td {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    text-align: start;
}

.post-content table th {
    background: var(--color-bg-muted);
    font-weight: 600;
}

/* TOC */
.toc-box {
    border-inline-start: 3px solid var(--color-primary);
}

.toc-box ol {
    padding-inline-start: 1.2rem;
}

.toc-box ol li {
    margin: 0.4rem 0;
}

.toc-box ol li a {
    transition: all var(--transition-fast);
}

.toc-box ol li a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline !important;
    padding-inline-start: 4px;
}

/* Tags */
.post-tags .badge {
    background: var(--color-bg-muted) !important;
    color: #475569 !important;
    padding: 6px 12px;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.post-tags .badge:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Post nav */
.post-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.post-nav .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   2. App Hero (AppHeroSection)
   ============================================ */
.app-hero-section {
    background: var(--gradient-hero);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.app-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.app-hero-section > .container {
    position: relative;
    z-index: 1;
}

.app-hero-section h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
}

.app-hero-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.app-hero-section img:hover {
    transform: translateY(-10px);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ============================================
   3. App QR (AppQrSection)
   ============================================ */
.app-qr-section {
    background: var(--color-bg-soft);
}

.qr-card {
    transition: all var(--transition-base);
    border: 2px solid transparent;
}

.qr-card:hover {
    transform: scale(1.03);
    border-color: var(--color-accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.qr-card img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ============================================
   4. App Install Steps (AppInstallSection)
   ============================================ */
.app-install-section {
    background: var(--color-bg-soft);
}

.app-install-section .badge.rounded-circle {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.app-install-section .bg-white {
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.app-install-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.app-install-section .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-icon);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-base);
}

.app-install-section .bg-white:hover::before {
    transform: scaleY(1);
}

/* ============================================
   5. App Showcase (AppShowcaseSection)
   ============================================ */
.app-showcase-section {
    background: var(--color-bg);
}

.app-showcase-section img {
    transition: transform var(--transition-slow);
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.15));
}

.app-showcase-section img:hover {
    transform: translateY(-5px) rotate(-1deg);
}

.app-showcase-section .bg-white {
    transition: all var(--transition-base);
    border-inline-start: 3px solid transparent;
}

.app-showcase-section .bg-white:hover {
    border-inline-start-color: var(--color-primary);
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   6. Contact Sections
   ============================================ */
.contact-channels-section {
    background: var(--color-bg);
}

.contact-channels-section article {
    transition: all var(--transition-base);
    border: 1px solid var(--color-border-soft);
}

.contact-channels-section article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.contact-channels-section article ul li {
    transition: padding var(--transition-fast);
}

.contact-channels-section article ul li:hover {
    padding-inline-start: 4px;
}

/* Contact Quick */
.contact-quick-section {
    background: var(--color-bg-soft);
}

.contact-quick-section .contact-card {
    transition: all var(--transition-base);
}

.contact-quick-section .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-quick-section .contact-card i {
    transition: transform var(--transition-base);
}

.contact-quick-section .contact-card:hover i {
    transform: scale(1.1) rotate(-5deg);
}

/* Contact Form */
.contact-form-section {
    background: var(--color-bg-soft);
}

.contact-form-section .form-control,
.contact-form-section .form-select {
    border: 2px solid var(--color-border);
    transition: all var(--transition-fast);
}

.contact-form-section .form-control:focus,
.contact-form-section .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.1);
}

.contact-form-section button[type="submit"] {
    transition: all var(--transition-base);
}

.contact-form-section button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* Contact Commitments */
.contact-commitments-section {
    background: var(--color-bg-soft);
}

.contact-commitments-section .bg-white {
    transition: all var(--transition-base);
    text-align: center;
}

.contact-commitments-section .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.contact-commitments-section .bg-white i {
    transition: transform var(--transition-base);
}

.contact-commitments-section .bg-white:hover i {
    transform: scale(1.15);
}

/* ============================================
   7. Login / Signup Forms
   ============================================ */
main:has(> .container > .bg-white > form) .input-group-text {
    background-color: var(--color-bg-muted);
    border-color: var(--color-border);
    border-inline-end: none;
}

main:has(> .container > .bg-white > form) .input-group .form-control {
    border-inline-start: none;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    background-color: #eff6ff;
}

main:has(> .container > .bg-white > form) .input-group:focus-within .form-control {
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

main:has(> .container > .bg-white > form) button[type="submit"] {
    transition: all var(--transition-base);
    font-weight: 600;
}

main:has(> .container > .bg-white > form) button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

/* ============================================
   8. Icons
   ============================================ */
.icon-img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

.icon-emoji {
    display: inline-block;
    line-height: 1;
}

/* ============================================
   9. Hero Buttons (đã có ở theme.css nhưng bổ sung thêm)
   ============================================ */
.hero-buttons .btn {
    transition: all var(--transition-base);
}

.hero-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.hero-buttons .btn-warning {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary-darker);
    font-weight: 600;
}

.hero-buttons .btn-warning:hover {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   10. 自定义滚动条
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text
-muted);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 var(--color-bg-muted);
}

/* ============================================
   11. Print Styles
   ============================================ */
@media print {
    :is(.header,
        .footer,
        .sidebar-widgets,
        .social-share,
        #back-to-top,
        .breadcrumb-nav,
        .notice-bar,
        .cta-banner-section,
        .post-nav,
        .related-posts,
        .author-box,
        .pagination,
        .navbar-toggler,
        .nav-item) {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .single-post {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .post-content {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        text-decoration: underline;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    a[href^="mailto:"]::after,
    a[href^="tel:"]::after {
        content: "";
    }

    .post-content img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    :is(h1, h2, h3, h4) {
        page-break-after: avoid;
        color: #000 !important;
    }

    p, li {
        orphans: 3;
        widows: 3;
    }
}

/* ============================================
   12. Animations bổ sung
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/* ============================================
   13. Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .post-content {
        font-size: 1rem;
    }

    .post-content h2 {
        font-size: 1.5rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .single-post {
        padding: var(--space-md) !important;
    }

    .post-content {
        font-size: 0.95rem;
    }

    .post-content h2 {
        font-size: 1.35rem;
    }

    .post-nav {
        flex-direction: column;
    }

    .post-nav .btn {
        width: 100%;
    }

    .post-tags .badge {
        font-size: 0.8rem;
        padding: 4px 8px;
    }

    .app-hero-section h1 {
        font-size: 1.75rem;
    }

    .app-install-section .badge.rounded-circle {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .toc-box {
        padding: var(--space-sm) !important;
    }

    .qr-card img {
        max-width: 140px !important;
    }
}

We need to rewrite the CSS provided. The user wants a conservative visual refresh, but the CSS provided is only a media query with text-align, font-size, and padding. There are no colors, shadows, radius, transitions, gradients in the original CSS. The instruction says to output the rewritten CSS preserving selectors and layout exactly. However, we are allowed to change colors, shadows, radius, transitions, gradients, etc. But the original CSS has no such properties. We can add visual properties? The task says "Refresh this CSS visually. Keep ALL selectors and layout exactly as-is. Only change colors, shadows, radius, transitions, gradients." The original CSS has no colors, shadows, etc. We may need to add them? But the instruction says "Only change colors, shadows, radius, transitions, gradients" — meaning we cannot change layout properties, but we can add visual properties. Since the original CSS is minimal, we should preserve the selectors and the existing declarations exactly? Or we can enhance with new visual properties? The "Output the rewritten CSS" likely means we should produce a CSS that maintains the same selectors and layout, but with fresh visual identity. Since there are no visual properties to change, we could add some visual properties that don't affect layout. However, the instruction says "Only change colors, shadows, radius, transitions, gradients." It doesn't say "add" — but "change" implies existing. We need to be careful: the self-check says "Colors throughout the file replaced with fresh palette?" But there are no colors in the original. Maybe we should add color, background, shadow, radius to the elements? But that would be adding, not changing. The constraint says "Keep ALL selectors and layout exactly as-is." Adding properties won't change layout if they are visual only. But we must not add properties that affect layout (e.g., display, width, etc.). Adding background-color, box-shadow, border-radius, transition is allowed. However, the original CSS has no such properties, so we can introduce them for a fresh visual identity.

But wait: the input CSS is only a media query with three rules. The target style is editorial-magazine with tight-rhythm variant. We could apply the target style to these selectors. For example, set a background color or accent border? But the selectors are generic: `.app-hero-section .row .col-lg-7`, `.app-hero-section .badge.bg-warning`, `.contact-channels-section article`, `.contact-quick-section .contact-card`. We can add visual properties like background, border-radius, box-shadow, transition, but we must not change layout. However, we need to be conservative: "only change colors, shadows, radius, transitions, gradients." So we can add them? The phrase "refresh this CSS visually" suggests we should update the visual design. Since there are no visual properties, we need to add them to bring the new identity. But the instruction "ONLY the rewritten CSS, preserving ALL selectors and layout exactly" means we output the same selectors with the same declarations (if any) plus new visual ones? But the "NEVER CHANGE" section includes "width, height, padding, margin (keep similar values, ±20% maximum)" — the original has `padding: var(--space-md) !important;` which is a padding value. We must keep that (or within 20%? Since it's a var, we cannot change it? The instruction says keep similar values, ±20% maximum. But we shouldn't alter padding unless necessary. The original has `font-size: 0.85rem;` — we must keep typography exactly. `text-align: center;` — that's layout. Keep it.

So we must keep those declarations exactly. We can add new declarations. But we need to be careful not to change the existing ones. Let's think.

The original CSS:

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

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

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

We need to rewrite this CSS visually. Since no visual properties, we can add some. But the request ID and fingerprint suggest this is part of a larger file? Actually the file is "assets/css/saishi.css#块2/2" meaning block 2/2? Maybe only this chunk. We must output the full chunk.

Given the target style is editorial-magazine, tight-rhythm. We can add a subtle background tint, border-radius, box-shadow, transition, maybe a border-left accent for the cards. But we must not change layout. Adding background-color, border-radius, box-shadow is fine. Adding border-left would change width? Actually border adds to width unless box-sizing is border-box, but box-sizing is not to be changed? We shouldn't add borders because they can affect layout. Border-radius doesn't affect layout. Box-shadow doesn't affect layout. Background doesn't. Transition doesn't. So we can add those.

But the instruction says "Only change colors, shadows, radius, transitions, gradients." So we can modify or add these. For the media query, we can add:

- For `.app-hero-section .row .col-lg-7` — perhaps add a text-shadow? But it's a container, not text. Could add color? But color would inherit. We could set a background-color? Not sure. Better to add a subtle radial gradient? But that might be unnecessary.

- For `.app-hero-section .badge.bg-warning` — we can add background-color (override the bg-warning? The class bg-warning is a Bootstrap class. We can override its background with a new accent color, but we must be careful: the original has only font-size. We can add background-color, color, box-shadow, border-radius, transition. But changing background-color might clash with the badge's meaning. However, the request says "fresh color palette" — so we can set the badge to a deep red accent with cream text. That's a visual change. But we should preserve the ability to see it's a warning? It's okay.

- For `.contact-channels-section article, .contact-quick-section .contact-card` — we can add background, border-radius, box-shadow, transition.

We need to ensure we don't violate any constraints. The "NEVER CHANGE" list includes selectors, display, position, grid, flex, width, height, padding, margin, gap, etc. Adding background, box-shadow, border-radius, transition is fine.

But also, the media query itself is a condition — we keep it exactly. Only the inside declarations.

We need to output the rewritten CSS with the same selectors and existing declarations, plus new visual declarations. However, the instruction "Only change colors, shadows, radius, transitions, gradients" could also be interpreted as: do not add any new properties other than those categories. So we should only add properties from those categories. That's fine.

Let's design with editorial-magazine + tight-rhythm. Palette: cream background #f5f1e8, ink text #1a1a1a, accent deep red #c44536 or olive #6b705c. Tight rhythm: small border-radius 2-6px, subtle shadows or none, compact spacing.

Since we are in a media query max-width 575.98px (mobile), we can apply subtle shadows with small offsets.

Let's craft:

For the badge: 
    background-color: #c44536;
    color: #f5f1e8;
    box-shadow: 0 1px 2px rgba(26, 26, 26, 0.2);
    border-radius: 4px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;

But the original has .badge.bg-warning — bg-warning sets background to yellow. We override with background-color. But since we are in a media query, specificity is same? The Bootstrap class is also a class, so our selector has two classes (.badge.bg-warning) so higher specificity than .bg-warning alone. Good.

For the contact cards:
    background-color: #ffffff; (or #fdfcf8?) — but the palette says cream/beige backgrounds. We can use #f5f1e8 for page background, but for cards we might want contrast. Actually editorial style often uses white cards on cream background. So background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(26,26,26,0.08), 0 1px 2px rgba(26,26,26,0.04); transition: box-shadow 0.2s ease, background-color 0.2s ease;

But we must keep padding var(--space-md) !important. The padding is already there. Adding background and shadow doesn't change padding.

For the hero section col-lg-7: maybe add a color? But text-align center. We can add a subtle text-shadow or a background? Not necessary. But to refresh visually, we could add a color for text? The text color inherits from body. We don't want to set a color that might affect readability. We can set a text-shadow? But that's a visual property. Maybe add a drop shadow for headings? But it's a container. Could set a background: radial-gradient? But that might be too much. We should be conservative. Perhaps we only add properties to the elements that need visual distinction: badge and cards. But the instruction says "Colors throughout the file replaced with fresh palette?" So for the hero section, we can also set a color property: `color: #1a1a1a;` but that's the default ink. Or maybe `color: #c44536;` for a touch? But that would change text color to red, might be undesirable. The target style is editorial, so text should be ink black. The container doesn't have text directly; it's a column. Setting color would inherit. We can set `color: #1a1a1a;` to ensure it, but that's a change. Alternatively, we can set `background-color: rgba(245, 241, 232, 0.4);` as a subtle tint? That might affect layout? No, but it might create a visual block. Not sure.

Maybe we should also add a `border-radius` to the badge and cards, and a `box-shadow`. That's enough.

Let's be more specific: The target style says "Editorial neutrals: cream/beige backgrounds (#f5f1e8), ink black text (#1a1a1a). Single accent color (deep red #c44536 or olive #6b705c)." So we can use the deep red as accent. For the badge, deep red background. For the cards, we can give them a cream background with an accent left border? But border would affect layout. We can use box-shadow inset to simulate a left border? Or use `border-left` with a color, but border-width is a layout property? The instruction says "border-color and border-style (NOT border-width)" can change. It says "NEVER CHANGE: ... border-color and border-style (NOT border-width)" under "NEVER CHANGE" — wait, let's read carefully:

In "🔒 NEVER CHANGE (would break HTML layout):"

- "border-color and border-style (NOT border-width)" — This is under NEVER CHANGE? Actually the list says "border-color and border-style (NOT border-width)" — but then in the "✅ YOU MUST CHANGE" list, it includes "border-color and border-style (NOT border-width)"! Let's re-read.

The user instructions:

✅ YOU MUST CHANGE (visual identity only):
  • All color values: background, color, border-color, fill, stroke, outline-color
  • box-shadow ...
  • text-shadow
  • border-radius (visual rounding only)
  • gradient colors and stops ...
  • transition timing, easing, duration
  • 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

🔒 NEVER CHANGE (would break HTML layout):
  • Selectors...
  • Layout...
  • Typography...
  • Animation & Media...
  • [There is a list, but border-color and border-style are NOT in NEVER CHANGE. Actually in the NEVER CHANGE list there is: "border-radius" not mentioned, "border" not mentioned except maybe "border-color and border-style" is in the MUST CHANGE list. Wait, the original prompt in the header: "🔒 NEVER CHANGE (would break HTML layout):" includes "border-color and border-style (NOT border-width)"? Let's look at the provided textual content:

```
🔒 NEVER CHANGE (would break HTML layout):

🏷️ SELECTORS (CRITICAL - HTML is fixed):
  • Class names: keep EXACTLY (.post-card stays .post-card)
  • IDs: keep exactly
  • Element types (div, h1, span, etc.)
  • Pseudo-classes (:hover, :focus, ::before, ::after)
  • Attribute selectors ([data-x], [type="text"])
  • Combinators (>, +, ~, descendant spaces)
  • Selector lists (commas)

📐 LAYOUT (HTML cannot adapt to changes):
  • display values (block, flex, grid, none, inline-block, inline-flex)
  • position (relative, absolute, fixed, sticky, static)
  • grid-template-columns (column count must match HTML children)
  • grid-template-rows
  • grid-template-areas
  • grid-column, grid-row, grid-area
  • flex-direction
  • flex-wrap, flex-grow, flex-shrink, flex-basis
  • width, height, min/max-width, min/max-height
  • padding, margin (keep similar values, ±20% maximum)
  • gap, row-gap, column-gap (keep similar)
  • justify-content, align-items, align-self
  • float, clear
  • z-index, overflow, overflow-x, overflow-y
  • box-sizing
  • visibility
  • aspect-ratio
  • object-fit, object-position
  • text-align, vertical-align

📝 TYPOGRAPHY (font system fixed):
  • font-family
  • font-size, font-weight, font-style
  • line-height, letter-spacing, word-spacing
  • text-transform
  • white-space, word-break

🎬 ANIMATION & MEDIA:
  • @keyframes names (values inside CAN change)
  • @media query breakpoints (conditions only)
  • @import, @font-face, @supports, @charset
  • animation-name (values like duration/timing CAN change)
```

There is no mention of border-color and border-style in NEVER CHANGE. So they can be changed. Good.

Thus we can add border-left or border-bottom to cards? But adding border-width will change layout. The instruction says "border-color and border-style (NOT border-width)" — meaning we can change the color and style of an existing border, but not the width. If there is no border, adding a border with width would change layout. So we should not add new borders. We can only change existing border colors/styles, but there are no existing borders. So avoid adding borders.

We can use box-shadow to simulate an accent edge: `box-shadow: inset 3px 0 0 #c44536;` — inset box-shadow doesn't affect layout. That's good.

Let's apply:

For `.app-hero-section .badge.bg-warning`:
    font-size: 0.85rem;
    background-color: #c44536;
    color: #f5f1e8;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(26, 26, 26, 0.25);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;

But we need to ensure that the original `font-size: 0.85rem;` remains. Yes.

For `.contact-channels-section article, .contact-quick-section .contact-card`:
    padding: var(--space-md) !important;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(26, 26, 26, 0.08), 0 1px 2px rgba(26, 26, 26, 0.04);
    transition: box-shadow 0.25s ease, background-color 0.25s ease;

But the tight-rhythm variant says subtle shadows or none. So maybe a single subtle shadow.

For the hero column, we could add:
    color: #1a1a1a;
But that's already likely. Or we can add a `text-shadow` for a subtle editorial feel: `text-shadow: 0 1px 0 rgba(245, 241, 232, 0.8);`? That would be odd. Better not to add unnecessary.

However, the instruction says "Colors throughout the file replaced with fresh palette." Since there are no colors, we need to introduce them. We can introduce a background color on the hero column? But that might create a block. Maybe not.

We could also add a `background` gradient to the hero column? But that might be visible. Since we are in a media query for small screens, it's okay.

Alternatively, we can set `background-color: rgba(245, 241, 232, 0.3);` as a subtle tint, and `border-radius: 6px;`? But the col-lg-7 is a grid column, adding background and radius could make a card-like block. That might change visual layout? Not layout, but visual grouping. But it's okay? However, the layout is a Bootstrap row, and the col-lg-7 might span full width on mobile. Adding a background could make a large block. Might be okay.

But the tight-rhythm variant expects information-dense feel, so maybe no big backgrounds.

Let's think about the overall file "saishi.css" — likely a sports event site. The sections are hero, contact channels, contact quick. The editorial-magazine style might want a clean look. We can