/* ============================================================
   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 answer rewritten CSS preserving selectors/layout. Need inspect original. It's a media query block with three rules. No colors currently, minimal. Need visually refresh? We can only change visual properties. Can we add properties? The task says rewrite CSS preserving all selectors. It's target style masonry-flow aggressive? But conservative mode. Need output CSS with same selectors and layout. Since only colors/shadows/radius/transitions/gradients can change. Original has no colors except font-size, padding, text-align. We cannot change font-size/padding? Actually padding is layout? allowed ±20%. But output should preserve? It says never change padding/margin keep similar. We can add visual properties like border-radius, box-shadow, background, color etc. But careful: .badge.bg-warning has Bootstrap bg-warning class. We can add box-shadow? Could change color? It says all color values must change? But none present. We need fresh palette perhaps. But adding colors on mobile? We can add subtle visual identity. However, "MUST CHANGE: all color values" if no color values, not applicable. Need maybe transform into distinct style while preserving selectors. Since target style masonry-flow with soft shadows. But HTML fixed. Need keep @media same. Need perhaps add box-shadow, border-radius, transition to contact cards? Let's think.

We need output only CSS. We can include same selectors exactly and add visual declarations within those rules. Should not change text-align, padding? padding allowed but keep similar. We can leave as is or adjust slightly? It says output rewritten CSS preserving all selectors and layout exactly. Let's keep exact declarations plus add visuals? But if we output from scratch including original declarations, with colors. "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct" So likely we need add visual declarations to selectors, using fresh palette, multi-layer soft shadows. The original is just a media query with basic responsive adjustments. Need produce CSS that uses same selectors and combines original layout plus new visual identity. Need no comments. Need ensure "Only colors, shadows, and decorative properties may change" We can add border-radius, box-shadow, transition. We should not change padding because original uses var(--space-md) !important; keep exactly. Font-size keep. Text-align keep. Need maybe change .badge bg warning? We can add background? But .bg-warning Bootstrap is important? But we can add box-shadow maybe. Could set filter? Hmm.

Need follow target style: Pinterest-like, white cards, soft shadows on light gray bg, each card accent strip. But selectors are contact sections, hero. We could apply background, border-radius, box-shadow to article and .contact-card. But only in media query max-width 575px. Could add transition, border-radius, box-shadow, background perhaps. But .contact-card may already have background. Adding background could override? Need avoid breaking. Maybe use background-color to create white card. But if existing card has background, okay.

Need apply masonry-flow? Aggressive only says if we choose target? The mode is conservative, but target style may influence visuals. We can set grid-template? No, would break layout. So no.

Let's parse original:

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

Need preserve @media condition exactly. We can output with same selectors. Need maybe preserve all three rules. Add color changes. For hero col, could set color? But if not set, don't. Could add transition? maybe text-align is layout; no.

Need perhaps make .badge.bg-warning with background: linear-gradient or color? But .bg-warning existing Bootstrap; overriding background would change. We can set color: #3a2e1f and box-shadow. But "badge" itself maybe has padding, border-radius. We can set border-radius. Perhaps also add background: linear-gradient(135deg, #fbbf24, #f59e0b). But bg-warning already background-color: #ffc107. Overwriting within media query could be intentional identity. But "change all color values" yes. If we set background to custom, more distinct. Could also set filter: drop-shadow.

Need maybe set contact cards with background: #ffffff, border-radius: 1.25rem/20px, box-shadow multi-layer soft, transition. Since original padding var(--space-md). Add backdrop? Hmm.

Need produce "fresh palette" maybe "misty slate + warm apricot" or "Pinterest-like" white/soft gray. Use colors:
-- contact cards: background: #fffdf9; border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 4px 8px rgba(31, 35, 45, 0.04), 0 20px 40px -12px rgba(31, 35, 45, 0.14); border-radius: 20px; transition: box-shadow .35s ease, transform .35s ease, background .35s ease; color maybe #2a2e35. But transform is decoration? It's not in forbidden? animation? It changes layout? transform doesn't change layout but may be considered visual. But target says visual changes only, transform okay? However conservative says layout? It doesn't list transform in forbidden, but could affect visual. We can avoid transform to be safe. We can set transition.

Need "every color values replaced" but no existing color values. We can add color declarations. Need avoid changing font-size, padding. We can keep them exactly.

Need maybe set .app-hero-section .row .col-lg-7 to color: #1f2937? text-align center. But could affect. We can add color.

Need maybe set .badge.bg-warning to color: #4a2e00 (brown), background: linear-gradient(135deg, #fcd34d, #f59e0b), border-radius: 999px, box-shadow: 0 6px 16px rgba(245,158,11,0.35), transition: box-shadow .3s ease, filter .3s ease. But this changes badge visual. Could also set font-size 0.85rem exactly.

Need maybe set contact cards to border-radius 18px or 1.25rem. Use `border-radius: 1.5rem`? But "large border-radius (12-24px)" so 20px. Use `border-radius: 1.25rem;`? Since var --space-md? Could be rem. We'll use 1.25rem. For multi-layer soft shadows: `0 2px 6px rgba(15, 23, 42, 0.04), 0 12px 24px -6px rgba(15, 23, 42, 0.1)`? Need both. Use `box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);` from effect variant. But maybe too close. Use `0 2px 6px rgba(30, 41, 59, 0.05), 0 16px 32px -8px rgba(30, 41, 59, 0.12)`. Add border: 1px solid rgba(255,255,255,0.7). That's visual. Need background: linear-gradient(145deg, #ffffff, #f8fafc). This might override existing. Fine.

Need maybe add accent strip? Could use `::before`? But original doesn't have pseudo. No, output must preserve selectors? If adding new selectors? It says selectors keep exactly, no new selectors. So cannot add ::before.

Could use `border-top: 4px solid #f59e0b` to create accent strip. But adding border changes size? border width allowed? "border-color and border-style (NOT border-width)" so cannot set border-width. If `border-top: 4px` changes border-width, not allowed. Could use `outline` or `box-shadow` inset. `box-shadow: inset 0 4px 0 #f59e0b`? That creates accent strip without layout change and is a shadow. Good. Then multi-layer with inset? Use `box-shadow: inset 0 4px 0 #f59e0b, 0 4px 8px rgba(0,0,0,0.05), 0 20px 40px -10px rgba(0,0,0,0.12);` Nice. But inset 4px at top maybe visual. Could set on both article and contact-card. But "each card may have its own accent strip." We can vary? The combined selector cannot vary. Maybe set inset top accent on both, okay.

Need also `background-color` maybe `#ffffff` and `border-radius`. Add `transition: box-shadow .35s ease, border-radius .35s ease, background-color .35s ease;` But border-radius transition is visual but maybe okay. Could use `transition: box-shadow 0.35s ease, background-color 0.35s ease;` Avoid transform.

Need maybe `backdrop-filter`? On hero? Not necessary. But "change filter, backdrop-filter" maybe allowed; we can add `filter: drop-shadow(...)` to badge? But if overkill.

Need also set `accent-color`, `caret-color`? Not needed because no forms. But "all color values" maybe no.

Need "soft-shadows" variant. Use `box-shadow` multi-layer soft shadows.

Need perhaps set `.app-hero-section .badge.bg-warning` with `box-shadow: 0 6px 14px rgba(245,158,11,0.35), 0 12px 28px -6px rgba(245,158,11,0.25);` This is more colored. `border-radius: 999px;` In Bootstrap badge has rounded-pill maybe but explicit okay. `background: linear-gradient(135deg, #fbbf24, #f97316);` But .bg-warning in Bootstrap uses !important? Actually Bootstrap classes `.bg-warning` have background-color with !important? In Bootstrap 4, `.bg-warning { background-color: #ffc107 !important; }` If custom CSS later equal specificity? `.app-hero-section .badge.bg-warning` has higher specificity, and if not !important, later? Our custom stylesheet likely loaded after Bootstrap, so overrides due to specificity. If Bootstrap has !important, our normal won't override. Need `background: ...` without !important won't override !important. Could use `background: linear-gradient(...) !important;` But can we add !important? It's a declaration, not layout. But maybe not desired. If target changes must be visible, we can add. But original CSS uses `!important` for padding. For visual, no need. But if Bootstrap important, we need. However file "saishi.css" is custom, it can override Bootstrap. If bootstrap uses no important? Actually Bootstrap 5 `.bg-warning { --bs-bg-opacity: 1; background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important; }` So important. Our custom CSS without important won't override. Could use `background-color: #f1a33c !important;`? Is allowed? Yes. But we need avoid !important maybe okay. But "previous attempt didn't change enough" so we need bold. We can use `background: linear-gradient(135deg, #fcd34d, #f59e0b) !important;` and `box-shadow` etc. But adding !important is not layout. Fine.

Need maybe for hero text color, no important. Fine.

Need decide output content. We should output exactly CSS no markdown. Since original is inside media query, we can include.

Let's write:

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

    .app-hero-section .badge.bg-warning {
        font-size: 0.85rem;
        color: #5b3a00;
        background: linear-gradient(135deg, #fcd34d, #f59e0b) !important;
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35), 0 16px 32px -8px rgba(245, 158, 11, 0.25);
        transition: box-shadow 0.35s ease, background 0.35s ease, filter 0.35s ease;
    }

    .contact-channels-section article,
    .contact-quick-section .contact-card {
        padding: var(--space-md) !important;
        background: #ffffff;
        border-radius: 20px;
        box-shadow: inset 0 4px 0 #f59e0b, 0 4px 8px rgba(30, 41, 59, 0.05), 0 20px 40px -10px rgba(30, 41, 59, 0.12);
        transition: box-shadow 0.35s ease, background-color 0.35s ease, border-radius 0.35s ease;
        color: #1e293b;
    }
}

Need verify forbidden: display? not changed. position? no. grid? no. padding? left same. margin? no. width? no. font-size? same. text-align? same. line-height? no. Good. We added color/background/border-radius/box-shadow/transition. Border-radius allowed. Added `background: linear-gradient(...) !important` to badge. But `background` property uses linear-gradient, okay. However "gradient colors and stops" can change. We changed from none to custom. Good.

Need consider "MUST CHANGE all color values" we added. Could use `background-color` for cards. For cards, `background: #fff;` not gradient. We can use `background: #ffffff;` simple. If want more Pinterest, use white. But `border-radius: 20px` is large. Maybe `box-shadow` with inset accent strip plus soft shadows. Good.

Need perhaps add `border: 1px solid rgba(226, 232, 240, 0.8);` But border-color allowed, border-style allowed, border-width not. Setting `border: 1px solid` changes width from default? If no border default 0, setting 1px can affect layout. Is border-width not allowed. So cannot set `border: 1px`. We can set `box-shadow` with 0 0 0 1px to simulate border (spread doesn't affect layout? box-shadow doesn't affect layout). Use `box-shadow: inset 0 4px 0 #f59e0b, 0 0 0 1px rgba(226,232,240,0.6), 0 4px 8px rgba(30,41,59,0.05), 0 20px 40px -10px rgba(30,41,59,0.12);` That's good. It is box-shadow, allowed. It creates outline ring. Nice.

Need perhaps `background` for cards with `linear-gradient(180deg, #ffffff 0%, #f8fafc 100%)`? That is visual. But white cards maybe plain. "Pinterest-like: white cards, soft shadows on light gray bg". Since background page likely light gray, cards white. We can use plain `background: #fff;`. But maybe no background color set before, adding white could be okay. Let's set `background: #fff;` or `background-color: #ffffff;`. Since card may use Bootstrap's `.bg-white`? unknown. We can override with background-color: #ffffff. Use `background-color: #ffffff;` not `background`. That's okay.

Need maybe set `color: #1e293b` to ensure text color. Fine.

Need maybe `outline` not needed.

Should we adjust padding within ±20? We keep exactly. Good.

Need maybe add hover? No, selectors no hover. We could add `@media (hover: hover)`? That would be new selector, not preserve? Avoid.

Need maybe add `-webkit-backdrop-filter`? Not needed.

Need maybe include `filter`? Could include `filter: saturate(0.9)`? But changes photo? no.

Need maybe `transition` on the hero col? Could set `transition: color 0.35s ease, text-shadow .35s ease;` But text-shadow? Not needed. Maybe add `text-shadow: 0 4px 20px rgba(255,255,255,0.5);` But on hero col, text-shadow maybe weird. We could avoid. But "Make colors, shadows, and radius MORE distinct" If we only add to contact cards and badge, enough.

Need "masonry-flow" target style: maybe should use `display: flex`? But original selectors? No, would break layout. Not allowed. So no.

Need perhaps use CSS variables? No need.

Need output only CSS no comments. Should we write with two spaces? Fine.

Potential issue: `background: linear-gradient... !important` and `color` on badge. The .badge might be inline-block; border-radius etc. Good. But if using Bootstrap badge, `font-size: 0.85rem` already. We preserve.

Potential issue: `transition: box-shadow 0.35s ease, background 0.35s ease, filter 0.35s ease;` but `filter` transition on gradient background? It transitions when filter changes, no initial filter. Fine. Could simplify `transition: box-shadow 0.35s ease, background-color 0.35s ease;`. Need not overdo. But target says smooth transitions (0.