/*
 * Fei Gu Homepage - visual polish layer
 * This file overrides legacy page styles while preserving the original HTML structure and assets.
 */
:root {
    --page-bg: #f5f7fb;
    --surface: rgba(255, 255, 255, 0.96);
    --surface-strong: #ffffff;
    --text: #172033;
    --muted: #59657a;
    --primary: #0f3b6d;
    --primary-2: #145ea8;
    --accent: #2a8bd7;
    --line: rgba(15, 59, 109, 0.14);
    --shadow: 0 18px 48px rgba(15, 35, 60, 0.10);
    --soft-shadow: 0 10px 28px rgba(15, 35, 60, 0.08);
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 10px;
    --content: min(1120px, calc(100% - 48px));
}

html { scroll-behavior: smooth; }

body,
body *:not(code):not(pre) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif !important;
}

body {
    color: var(--text);
    line-height: 1.72;
    background:
        radial-gradient(circle at 10% 0%, rgba(42, 139, 215, 0.13), transparent 28rem),
        radial-gradient(circle at 90% 8%, rgba(15, 59, 109, 0.11), transparent 28rem),
        linear-gradient(180deg, #f8fbff 0%, var(--page-bg) 42%, #f7f8fb 100%);
}

a { color: var(--primary-2); text-decoration: none; transition: color .18s ease, opacity .18s ease, background .18s ease; }
a:hover { color: #08315f; }

.site_head {
    background: rgba(8, 19, 34, 0.92) !important;
    backdrop-filter: saturate(170%) blur(16px);
    -webkit-backdrop-filter: saturate(170%) blur(16px);
    position: sticky !important;
    top: 0;
    z-index: 1000;
    box-shadow: 0 10px 28px rgba(5, 12, 24, .18);
}

.center {
    max-width: 1280px !important;
    height: 60px !important;
    padding: 0 clamp(18px, 3vw, 42px);
}

.nav-r a {
    font-weight: 750;
    letter-spacing: .01em;
    font-size: 20px !important;
}

.shortcut-links ul { height: 60px !important; gap: 2px; }
.shortcut-links ul li { height: 60px !important; }
.shortcut-links ul li a {
    line-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 999px;
    font-size: 15px !important;
    letter-spacing: .01em;
}
.shortcut-links ul li.active a,
.shortcut-links ul li a:hover {
    background: rgba(255,255,255,.13) !important;
    color: #fff !important;
}

.dropdown-content {
    top: 54px !important;
    min-width: 180px !important;
    padding: 8px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 14px !important;
    background: rgba(8, 19, 34, .96) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.24) !important;
}
.dropdown-content a {
    width: auto !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    line-height: 1.35 !important;
}

.moHeader {
    background: rgba(8, 19, 34, 0.96) !important;
    box-shadow: 0 10px 28px rgba(5, 12, 24, .18);
}
.HeaderButton { background: rgba(255,255,255,.12) !important; }
.pages { box-shadow: 0 20px 38px rgba(0,0,0,.28); }

.content,
.info,
.container,
.gen,
.research-area,
.research-life-container,
.columns {
    max-width: var(--content) !important;
}

.content { margin-left: auto !important; margin-right: auto !important; }

.top {
    color: var(--primary) !important;
    font-weight: 820 !important;
    letter-spacing: -.02em;
    margin-top: clamp(34px, 5vw, 68px) !important;
    margin-bottom: clamp(18px, 3vw, 36px) !important;
    text-align: center;
}

.content > .top,
body > .top {
    font-size: clamp(30px, 4.2vw, 46px) !important;
}

.top a {
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: 650;
}

.top .title {
    border-radius: var(--radius-lg);
    box-shadow: var(--soft-shadow);
    overflow: hidden;
}

.swipers {
    border: 0 !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--soft-shadow);
    background: var(--surface-strong);
    overflow: hidden !important;
}
.swipers img,
.swipers .swiper-item img {
    object-fit: cover;
    filter: saturate(1.03) contrast(1.02);
}

.content .img-and-intr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(18px, 3vw, 28px);
    box-shadow: var(--shadow);
    display: grid !important;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
}
.content .img-and-intr .my-img {
    width: 190px !important;
    height: auto !important;
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(15, 35, 60, .15);
}
.content .img-and-intr .intr,
.content .img-and-intr .intr-mb {
    width: auto !important;
    height: auto !important;
}
.content .img-and-intr .intr div {
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    margin-bottom: 8px;
}
.intr-mb div { margin-bottom: 6px; }

.news,
.frend-link,
.info .e,
.info .c,
.papers .info,
.patents .info,
.software-copyrights .info,
.reviewer,
.committee,
.member,
.recruiting .info {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(20px, 3vw, 32px) !important;
    box-shadow: var(--soft-shadow);
}

.info .e,
.info .c {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
}

.news { margin-bottom: 28px !important; }
.news ul,
.info ul,
.papers ul,
.patents ul,
.software-copyrights ul { padding-left: 0 !important; }
.news li,
.info li,
.papers li,
.patents li,
.software-copyrights li,
.reviewer li,
.committee li,
.member li {
    list-style: none !important;
    position: relative;
    margin: 0 0 13px 0 !important;
    padding: 12px 14px 12px 18px !important;
    border-left: 4px solid rgba(42, 139, 215, .45);
    background: rgba(248, 251, 255, .86);
    border-radius: 0 12px 12px 0;
    line-height: 1.68;
    overflow-wrap: anywhere;
}
.news li em:first-child,
.news li em:first-of-type {
    display: inline-block;
    padding: 1px 8px;
    margin-right: 4px;
    border-radius: 999px;
    background: rgba(42, 139, 215, .13);
    color: var(--primary-2);
    font-style: normal;
    font-weight: 760;
}

em { color: #8a4a00; font-style: normal; font-weight: 720; }
.highlight,
.publication-tag {
    color: var(--primary-2);
    font-weight: 720;
}

.title,
.cla {
    color: var(--primary) !important;
    letter-spacing: -.01em;
}
.title {
    font-size: clamp(22px, 3vw, 32px) !important;
    font-style: normal !important;
    margin-top: clamp(36px, 5vw, 58px) !important;
}
.cla {
    font-size: clamp(18px, 2.4vw, 24px) !important;
}

.project,
.collaborator,
.members {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(18px, 3vw, 28px);
    box-shadow: var(--soft-shadow);
}
.project img,
.collaborator img,
.graduate img,
.det .img,
.research-life-container img {
    border-radius: var(--radius-md);
    box-shadow: 0 12px 28px rgba(15, 35, 60, .10);
}
.description { color: var(--text); }
.description p,
.info p,
.info span { line-height: 1.78; }

.research-area .project,
.project { margin-bottom: 34px !important; }

.det .img { object-fit: cover; }
.hover-text { background: linear-gradient(180deg, transparent, rgba(0,0,0,.75)) !important; }

.bottom {
    margin-top: clamp(60px, 8vw, 96px) !important;
    min-height: 110px !important;
    height: auto !important;
    padding: 28px 16px !important;
    background: #081322;
    color: rgba(255,255,255,.82);
}
.bottom div { line-height: 1.7; text-align: center; }
.bottom a { color: #cfe6ff; }

@media (min-width: 1024px) {
    .content .news,
    .frend-link,
    .info,
    .info .e,
    .info .c,
    .papers .info,
    .patents .info,
    .software-copyrights .info,
    .gen,
    .columns {
        width: var(--content) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .gen {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
        align-items: start;
    }
    .reviewer, .committee, .member { width: auto !important; margin: 0 !important; }
}

@media (max-width: 1023px) {
    :root { --content: min(760px, calc(100% - 28px)); }
    body { font-size: 15px; }
    .content .img-and-intr {
        grid-template-columns: 126px minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
    }
    .content .img-and-intr .my-img { width: 126px !important; }
    .top { margin-top: 28px !important; }
    .news li,
    .info li,
    .papers li,
    .patents li,
    .software-copyrights li,
    .reviewer li,
    .committee li,
    .member li {
        padding: 10px 12px 10px 14px !important;
    }
    .gen { display: block !important; }
}

@media (max-width: 560px) {
    :root { --content: calc(100% - 24px); }
    .content .img-and-intr {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .content .img-and-intr .my-img {
        width: min(180px, 52vw) !important;
        justify-self: center;
    }
}