/* Quiet visual refinement layer for the isolated demo.
   The original pages and styles remain unchanged outside this folder. */

:root {
    --ref-ink: #151515;
    --ref-muted: #6c6c68;
    --ref-line: #e6e6e2;
    --ref-soft: #f7f7f5;
    --ref-accent: #b8c9d5;
}

html {
    background: #fff;
}

body {
    color: var(--ref-ink);
    background: #fff;
    line-height: 1.6;
}

.navbar {
    padding: 0.7rem 2rem;
    border-bottom-color: var(--ref-line);
}

.nav-container {
    max-width: 1160px;
}

.nav-links {
    gap: 2.15rem;
}

.nav-link {
    color: var(--ref-muted);
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.nav-link.nav-active,
.nav-link:hover {
    color: var(--ref-ink);
}

.nav-active {
    border-bottom-color: var(--ref-ink);
}

.container {
    max-width: 1160px;
    padding: 2rem 2.25rem;
}

main,
.container,
.main-container {
    margin-top: 64px;
}

.page-header {
    padding: 1.5rem 0 1.25rem;
    margin-bottom: 1.4rem;
    border-bottom-color: var(--ref-line);
}

.page-header h1,
.container .page-title,
.container .tool-header h1 {
    color: var(--ref-ink);
    letter-spacing: -0.045em;
}

.page-header .page-subtitle,
.page-header .subtitle,
.page-subtitle {
    color: #444540;
    line-height: 1.65;
}

.chn-text {
    color: var(--ref-muted);
    border-left-color: var(--ref-accent);
    line-height: 1.7;
}

.section-header {
    color: var(--ref-ink);
    letter-spacing: -0.03em;
}

.section-header small {
    color: var(--ref-muted);
}

.hero {
    padding-top: 0.5rem;
}

.lab-name {
    font-size: clamp(2.55rem, 5vw, 3.8rem);
    letter-spacing: -0.06em;
}

.lab-name-chinese {
    color: #454641;
    border-bottom-color: var(--ref-line);
}

.hero-tagline {
    border-bottom-color: var(--ref-line);
}

.hero-tagline-en {
    letter-spacing: -0.025em;
}

.hero-tagline-zh,
.hero-translation-block p,
.hero-main .eng-block p {
    color: var(--ref-muted);
}

.hero-main {
    padding: 2rem 2.25rem;
    background: var(--ref-soft);
    border: 1px solid var(--ref-line);
    border-radius: 14px;
}

.hero-main .eng-block p {
    color: #30312e;
    line-height: 1.75;
}

.hero-main .eng-block strong {
    color: var(--ref-ink);
}

.hero-translation-block {
    border-top-color: var(--ref-line);
}

.hero-translation-block p {
    border-left-color: var(--ref-accent);
}

.hero-actions {
    gap: 0.7rem;
    margin-top: 1.4rem;
}

.hero-action,
.support-btn,
.btn,
.btn-outline {
    min-height: 44px;
    border-radius: 999px;
}

.hero-action {
    border-color: var(--ref-ink);
}

.hero-action.primary,
.hero-action:hover,
.support-btn,
.btn {
    background: var(--ref-ink);
}

.news-section,
.contact-wrapper,
.honors-section {
    border-color: var(--ref-line);
}

.news-section {
    margin-top: 1.25rem;
    padding-top: 0.8rem;
}

.carousel-card,
.team-card,
.category,
.product-facts div,
.link-card,
.video-card,
.manual-content {
    border-color: var(--ref-line);
    border-radius: 12px;
}

.carousel-card,
.team-card,
.category,
.product-facts div,
.link-card,
.video-card,
.manual-content {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.carousel-card:hover,
.team-card:hover,
.category:hover,
.link-card:hover,
.video-card:hover {
    border-color: #c7c9c4;
    box-shadow: 0 14px 28px -20px rgba(0, 0, 0, 0.22);
}

.carousel-content,
.team-card,
.category-header,
.link-card,
.video-card,
.manual-content {
    background: #fff;
}

.carousel-date,
.carousel-desc,
.chinese-desc,
.category-desc,
.collab-title,
.student-title,
.paper-authors,
.paper-venue,
.video-fallback {
    color: var(--ref-muted);
}

.carousel-title,
.category-title,
.paper-title,
.team-name {
    letter-spacing: -0.025em;
}

.carousel-btn,
.slider-nav,
.toggle-btn {
    border-color: var(--ref-line);
    background: #fff;
}

.carousel-btn:hover,
.slider-nav:hover,
.toggle-btn:hover {
    border-color: var(--ref-ink);
    background: var(--ref-soft);
}

.honor-card.main {
    border-color: var(--ref-ink);
}

.contact-content {
    gap: 2rem;
}

.contact-text.translation {
    border-left-color: var(--ref-accent);
}

.team-card,
.collab-card,
.student-card {
    transition-duration: 180ms;
}

.team-card {
    padding: 1.6rem;
}

.photo-placeholder,
.collab-avatar,
.student-avatar {
    border-color: var(--ref-line);
    background: var(--ref-soft);
}

.research-tools input {
    border-color: #d3d4d0;
    background: #fff;
}

.papers-category .paper-item {
    border-bottom-color: var(--ref-line);
}

.filter-btn {
    border-color: #d5d6d2;
    background: #fff;
}

.filter-btn:hover,
.filter-btn.active {
    border-color: var(--ref-ink);
    background: var(--ref-ink);
}

.category-header {
    background: var(--ref-soft);
}

.category-content {
    background: #fff;
}

.product-facts {
    gap: 0.9rem;
}

.product-facts div {
    padding: 1rem 1.1rem;
}

.product-facts strong,
.product-facts span {
    color: var(--ref-muted);
}

.product-facts span {
    color: var(--ref-ink);
}

.link-cards {
    gap: 1.25rem;
}

.link-card {
    background: var(--ref-soft);
    padding: 1.6rem 1.4rem;
}

.manual-content {
    border-color: var(--ref-line);
    background: #fff;
}

.manual-content .toc {
    background: var(--ref-soft);
    border-color: var(--ref-line);
}

.manual-content h1,
.manual-content h2,
.manual-content h3 {
    letter-spacing: -0.025em;
}

.footer {
    color: var(--ref-muted);
    border-top-color: var(--ref-line);
}

@media (max-width: 768px) {
    body {
        padding-top: 64px;
    }

    .container {
        padding: 1rem;
    }

    main,
    .container,
    .main-container {
        margin-top: 0 !important;
    }

    .page-header {
        padding: 1rem 0 1rem;
    }

    .page-header h1,
    .container .page-title,
    .container .tool-header h1 {
        letter-spacing: -0.045em;
    }

    .hero-main {
        padding: 1.5rem 1.25rem;
    }

    .hero-actions {
        align-items: stretch;
    }

    .hero-action {
        width: min(100%, 320px);
    }

    .news-section {
        margin-top: 1rem;
    }
}

@media (max-width: 680px) {
    .navbar {
        padding: 0.65rem 1rem;
    }

    .mobile-fixed-logo {
        top: 0.8rem;
        right: 1rem;
    }

    .section-header small {
        color: var(--ref-muted);
    }
}