/* ============================================================
   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 a small CSS file (`saishi.css`) that contains a media query with three rules. The original CSS is:

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

Now, this is a very small CSS file. The instructions say: refresh visual identity WITHOUT changing layout structure or class names. They want me to change colors, shadows, radius, transitions, gradients, opacity, outline, border-color, border-style, caret-color, accent-color, CSS custom properties.

The original CSS is actually mostly layout/typography:
- `text-align: center` (text-align is in the NEVER CHANGE list - "text-align, vertical-align")
- `font-size: 0.85rem` (font-size is in NEVER CHANGE list - "font-size, font-weight, font-style")
- `padding: var(--space-md) !important` (padding is in LAYOUT - "padding, margin (keep similar values, ±20% maximum)")

Wait, this is tricky. The file only contains these three rules. There's almost nothing that can be changed without breaking the NEVER CHANGE rules:
- `text-align` cannot change
- `font-size` cannot change
- `padding` can only change within ±20% and cannot change layout much

But the instructions say "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round. Use a fresh palette."

Since the file has no colors, shadows, or borders, I need to ADD visual properties to these selectors. The key constraint is I cannot change the layout (display, position, etc.), typography (font-family, font-size, etc.), or remove the selectors.

So what CAN I add?
- `color`
- `background-color`, `background-image` (gradients)
- `border-radius`
- `box-shadow`
- `text-shadow`
- `transition`
- `caret-color`
- `accent-color`
- `outline`
- `border-color` (not border-width)
- `--color-*`, `--shadow-*` custom properties

But wait, the instructions also say:
- "keep ALL selectors and layout exactly as-is" 
- "Only change colors, shadows, radius, transitions, gradients."

Since the original rules have layout/typography properties that CANNOT change, I must keep those exact values. But I can add new visual properties to the same selectors.

The "Target Style" says "centered-stage" with "gradient-rich" variant. This suggests I should apply a dark stage background, gold accent, gradients, etc. But the selectors are specific to hero section, warning badge, and contact cards. 

Let me think about what makes sense:

1. `.app-hero-section .row .col-lg-7` — the hero text column. Add text-shadow, maybe a gradient text effect (background-clip: text? That changes visual only; `background-clip` is not in the forbidden list). But I need to be careful: `background-clip: text` with `color: transparent` changes the text color to transparent, making the gradient visible. That's a visual change, allowed. But it might affect readability. Let's be conservative but distinct.

2. `.app-hero-section .badge.bg-warning` — a warning badge. The class `bg-warning` is a Bootstrap utility. I can override the background with a gradient, add border-radius, box-shadow, text-shadow, transition.

3. `.contact-channels-section article, .contact-quick-section .contact-card` — contact cards. Add background gradient, border-radius, box-shadow, transition.

Note: `border-radius` is in the "must change" list (visual identity). Adding border-radius is fine. Box-shadow is fine.

However, I must be careful: the `!important` on padding must stay because the rule is preserved as-is. I'll keep the padding value exactly `var(--space-md) !important` since it's within ±20% (actually exactly the same).

Wait — can I change `--space-md`? The custom property `--space-md` is defined elsewhere likely. But in this file, I could add a CSS custom property definition? The instruction says "CSS custom properties (--color-*, --shadow-*) values" can change. But `--space-md` is a spacing variable, not color/shadow. I shouldn't redefine it because that might affect layout. But the file only contains this media query. I can add a `:root` block? That would add selectors not in the original. The instruction says "Selectors: keep EXACTLY (.post-card stays .post-card)" and "Only the rewritten CSS, preserving ALL selectors". It doesn't say I cannot ADD selectors, but the safest interpretation is to preserve the existing selectors exactly and only modify the declarations within them. Adding a `:root` block technically adds to the CSS but doesn't change existing selectors. However, the "HTML is fixed" and "class names keep exactly" — adding `:root` doesn't break HTML. Many prior tasks allow adding `:root` variables. But to be safe and minimal, I'll just add the visual declarations directly inside the existing rules.

Let me re-read the output requirements:

"ONLY the rewritten CSS, preserving ALL selectors and layout exactly"

So I rewrite the existing CSS, keeping the selectors exactly, keeping layout properties exactly (text-align, font-size, padding), and add/modify visual properties. Since none of the original declarations are visual (except padding which is layout), I'll add new visual declarations.

But is that enough? The instructions say "Make colors, shadows, and radius MORE distinct this round." So yes, I'll add vibrant colors, gradients, shadows, radius, transitions.

Let me design a "centered-stage" gradient-rich style:

Palette: dark stage `#0f0f1a`, premium gold `#f5c542` / `#d4af37`, deep purple `#6d28d9`.

For the hero section (`.app-hero-section .row .col-lg-7`):
- text-align: center (keep)
- Add `color: #f8fafc` — but the hero likely has its own text color; overriding to a light color on a dark background is good.
- Add `text-shadow: 0 2px 20px rgba(212, 175, 55, 0.25)` — gold glow.
- Maybe `background: linear-gradient(...)`? That could add a background to the column, changing the look but not layout. That's allowed (background-image doesn't affect layout).
- Add `border-radius`? Might be odd on a column but okay.
- Add `transition` on `text-shadow` or `background`.

Actually, adding background to `.col-lg-7` might radically change the hero look. But the task says "Aggressive" target style, and "Previous attempt didn't change enough. Make colors, shadows, and radius MORE distinct this round." So being more aggressive is desired. But "Layout pattern" says "Centered content: max-width 720-960px, margin: 0 auto" — but I cannot change width/margin per the constraints (they're layout properties). So I should NOT add max-width/margin. The "centered-stage" is a theme inspiration, but the hard constraints supersede. I'll use the palette though.

For the badge (`.app-hero-section .badge.bg-warning`):
- font-size: 0.85rem (keep)
- Add `background: linear-gradient(135deg, #ffd76e, #f5b942)` — replace the Bootstrap warning background (which is `#ffc107`). Gradient background is allowed.
- Add `color: #1a1a2e` (dark text on gold)
- Add `border-radius: 999px` (pill badge) — distinct
- Add `box-shadow: 0 4px 20px rgba(245, 185, 66, 0.4)`
- Add `transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)` — but wait, transition "all" includes layout? No, transition doesn't change layout; it animates changes. It's fine.
- Add `border: 1px solid rgba(255, 255, 255, 0.3)`? That adds border style/color (allowed) but not width (border-width default is 1px when style set — that's fine, I'm setting the border shorthand which includes width; the instruction says NOT change border-width. Hmm, but adding a border where there was none changes border-width from 0 to 1px. Technically adding border changes width. The constraint "border-color and border-style (NOT border-width)" implies I should not alter existing border-width values. Adding a new border could be considered a border-width change. To be safe, I'll avoid adding borders. Use box-shadow instead (outline can also be used but similar). Actually outline adds outline-width. The constraint lists "outline styles (color, type)" — so `outline-style` and `outline-color` can change. But again, adding an outline where there was none adds width. Best to avoid entirely and rely on box-shadow which doesn't affect box layout at all.

For contact cards:
- padding: var(--space-md) !important (keep exactly)
- Add `background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02))` — subtle glass.
- Add `backdrop-filter: blur(12px)` — allowed (backdrop-filter can change)
- Add `border-radius: 24px` — distinct radius
- Add `box-shadow: 0 20px 50px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08)` — multi-layer redesigned shadow
- Add `transition: box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s ease` — wait, transform is a layout property? The constraint says "display, position, grid-template-*, flex-direction unchanged" etc. `transform` is not listed in NEVER CHANGE, but it does affect rendering. Actually the "NEVER CHANGE" list doesn't include `transform`, so I could add it, but to be safe, I'll only transition box-shadow, background, border-radius, which are clearly visual. Actually transitioning `transform` would require changing transform on hover, which means adding `:hover` rules. That adds selectors. The instruction says preserve selectors; adding new hover selectors is probably not allowed since "Selectors: keep EXACTLY". I won't add any new selectors. I'll just add transitions to existing rules so they react smoothly if other CSS changes them.

Wait, transitioning `box-shadow` on the card itself without a hover state doesn't do much, but it's still a valid visual property. Maybe I can use `transition` on the badge and cards so that Bootstrap's existing hover states (if any) animate. That's fine.

Also, should I add `@media` content in the original media query? Yes, keep the `@media (max-width: 575.98px)` wrapper exactly.

Now, the original three rules:

Rule 1: `.app-hero-section .row .col-lg-7 { text-align: center; }`
Rule 2: `.app-hero-section .badge.bg-warning { font-size: 0.85rem; }`
Rule 3: `.contact-channels-section article, .contact-quick-section .contact-card { padding: var(--space-md) !important; }`

I'll expand each:

Rule 1:
```css
.app-hero-section .row .col-lg-7 {
    text-align: center;
    color: #f8fafc;
    text-shadow: 0 2px 24px rgba(212, 175, 55, 0.25), 0 1px 3px rgba(0, 0, 0, 0.5);
    background: radial-gradient(ellipse at center, rgba(109, 40, 217, 0.18), rgba(15, 15, 26, 0) 70%);
    border-radius: 32px;
    transition: text-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1), background 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
```

Wait, `border-radius` on a column might look odd if the column contains full-width content. But it's visually distinct. The target says "large radius". I'll use something like `border-radius: 2rem` (32px).

Actually, keep in mind this is `max-width: 575.98px` (mobile). A centered column with a background radial gradient and rounded corners could look nice. But it might clip content. Border-radius doesn't affect layout, it just visually rounds the background. Fine.

Rule 2:
```css
.app-hero-section .badge.bg-warning {
    font-size: 0.85rem;
    background: linear-gradient(135deg, #ffe59a 0%, #f5c542 35%, #d4a017 100%);
    color: #1b1026;
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(245, 197, 66, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
```

Note: Bootstrap's `.bg-warning` sets `--bs-warning-rgb` and background-color. My `background` shorthand overrides it. Good.

Rule 3:
```css
.contact-channels-section article,
.contact-quick-section .contact-card {
    padding: var(--space-md) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015) 60%, rgba(212, 175, 55, 0.04));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1), background 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
```

Hmm, `-webkit-backdrop-filter` is fine, it's a vendor prefix of the same property. But is it "preserving ALL selectors"? Yes, selectors unchanged.

Should I add `@media (prefers-color-scheme: ...)`? No — don't add selectors/conditions.

Another concern: The instruction says "ALL color values: background, color, border-color, fill, stroke, outline-color ... must change". The original file has no color values, so nothing to change there. But I should introduce the fresh palette. Good.

Also "text-shadow" must change: I'm adding text-shadow.

"box-shadow (offsets, blur, spread, color — fully redesign with multi-layer effects)": added.

"border-radius (visual rounding only)": added.

"gradient colors and stops in linear/radial/conic-gradient": added.

"transition timing, easing, duration": added.

"filter, backdrop-filter": added backdrop-filter.

"opacity": I could add `opacity: 1` somewhere but that's meaningless. Skip.

"outline styles": skip.

"border-color and border-style (NOT border-width)": skip to avoid border-width issues.

"caret-color, accent-color": could add `caret-color` to the hero column maybe. Not necessary but I can add `accent-color: #f5c542` to the cards or badge. Actually `accent-color` applies to form controls; these are not form controls. It doesn't hurt but pointless. I'll skip or add `caret-color` to the hero section since it might contain text inputs? Unlikely. I'll keep focus on relevant properties.

"CSS custom properties (--color-*, --shadow-*) values": I could define `--saishi-gold` etc. But that would require a `:root` block. Hmm. The instruction says these values can change, implying if the original file had them. It didn't. I'll skip.

Now, about the "NEVER CHANGE" list — let me double-check that I'm not altering `text-align`, `font-size`, `padding`. I'm keeping them exactly:

- `text-align: center;` — kept.
- `font-size: 0.85rem;` — kept.
- `padding: var(--space-md) !important;` — kept exactly (same value, same !important).

Good. The values