* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background: linear-gradient(135deg, #e8eaf6 0%, #f5f5f5 40%, #e3f2fd 100%);
    color: #1a1a1a;
    min-height: 100vh;
    padding: 24px;
    -webkit-font-smoothing: antialiased;
}

/* ── Bento Grid ── */
.bento {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* ── Base Card ── */
.card {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 18px;
    padding: 20px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

/* ── Photo ── */
.card-photo {
    grid-column: 1;
    grid-row: 1 / 4;
    padding: 0;
    overflow: hidden;
    border: none;
}
.card-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 18px;
}

/* ── Intro ── */
.card-intro {
    grid-column: 2 / 4;
    grid-row: 1 / 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 32px;
}
.name-logo { height: 68px; width: auto; margin-bottom: 16px; }
.role {
    font-size: 1.05rem; font-weight: 700; color: #1a1a1a;
    margin-bottom: 2px;
}
.sub {
    font-size: 0.85rem; color: #777; font-weight: 500;
    margin-bottom: 16px;
}
.sub a {
    color: #3b82f6; text-decoration: none; font-weight: 600;
    transition: color 0.2s;
}
.sub a:hover { color: #2563eb; text-decoration: underline; }
.desc {
    font-size: 0.85rem; color: #555; line-height: 1.7;
    margin-bottom: 8px;
}
.desc:last-child { margin-bottom: 0; }
.desc a {
    color: #3b82f6; text-decoration: none; font-weight: 500;
    transition: color 0.2s;
}
.desc a:hover { color: #2563eb; text-decoration: underline; }
.desc strong { color: #333; }

/* ── Social Link Cards ── */
.card-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    color: #555;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: all 0.3s ease;
}
.card-link svg { width: 24px; height: 24px; transition: transform 0.2s; }
.card-link:hover svg { transform: scale(1.15); }
.card-link span { opacity: 0.7; transition: opacity 0.2s; }
.card-link:hover span { opacity: 1; }

.card-github { grid-column: 4; grid-row: 1; }
.card-github:hover { background: #24292f; color: #fff; border-color: #24292f; }

.card-scholar { grid-column: 4; grid-row: 2; }
.card-scholar:hover { background: #4285f4; color: #fff; border-color: #4285f4; }

.card-linkedin { grid-column: 4; grid-row: 3; }
.card-linkedin:hover { background: #0a66c2; color: #fff; border-color: #0a66c2; }

/* ── News ── */
.card-news {
    grid-column: 1 / 5;
    grid-row: 4;
    padding: 22px 24px;
    max-height: 180px;
    overflow-y: auto;
}
.card-news h4 {
    font-size: 0.9rem; font-weight: 800; margin-bottom: 12px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.news-list { list-style: none; }
.news-list li {
    font-size: 0.78rem; color: #555; line-height: 1.6;
    padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,0.04);
}
.news-list li:last-child { border-bottom: none; }
.news-date {
    font-weight: 700; color: #3b82f6; margin-right: 8px;
    font-size: 0.72rem;
}
.news-list a { color: #3b82f6; text-decoration: none; font-weight: 600; }
.news-list a:hover { text-decoration: underline; }

/* ── Publication ── */
.card-pub {
    grid-column: 1 / 5;
    grid-row: 5;
    padding: 22px 24px;
}
.card-pub h4 {
    font-size: 0.9rem; font-weight: 800; margin-bottom: 14px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pub-entry { display: flex; gap: 14px; margin-bottom: 14px; }
.pub-entry:last-child { margin-bottom: 0; }
.pub-year {
    font-size: 0.78rem; font-weight: 800; color: #8b5cf6;
    min-width: 36px; padding-top: 1px;
}
.pub-title { font-size: 0.82rem; font-weight: 600; margin-bottom: 2px; }
.pub-meta { font-size: 0.75rem; color: #888; margin-bottom: 8px; }
.pub-links { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pub-links a {
    font-size: 0.7rem; font-weight: 700; color: #3b82f6;
    text-decoration: none; padding: 3px 10px;
    border: 1px solid #dbeafe; border-radius: 6px;
    background: #f0f7ff;
    transition: all 0.2s;
}
.pub-links a:hover { border-color: #3b82f6; background: #dbeafe; }
.pub-soon { font-size: 0.7rem; color: #bbb; font-style: italic; }

/* ── Experience ── */
.card-exp {
    grid-column: 1 / 3;
    grid-row: 6;
    padding: 22px 24px;
}
.card-exp h4 {
    font-size: 0.9rem; font-weight: 800; margin-bottom: 14px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Education ── */
.card-edu {
    grid-column: 3 / 5;
    grid-row: 6;
    padding: 22px 24px;
}
.card-edu h4 {
    font-size: 0.9rem; font-weight: 800; margin-bottom: 14px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.edu-entry { display: flex; gap: 14px; margin-bottom: 10px; }
.edu-entry:last-child { margin-bottom: 0; }
.edu-date {
    font-size: 0.72rem; font-weight: 700; color: #8b5cf6;
    min-width: 70px; padding-top: 1px; white-space: nowrap;
}
.edu-title { font-size: 0.82rem; font-weight: 600; }
.edu-place { font-size: 0.75rem; color: #888; }

/* ── Skills ── */
.card-skills {
    grid-column: 1 / 5;
    grid-row: 7;
}
.card-skills h4 {
    font-size: 0.9rem; font-weight: 800; margin-bottom: 10px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.card-skills .tags span {
    background: linear-gradient(135deg, #f0f7ff, #f3f0ff);
    border: 1px solid #e0e7ff;
    padding: 5px 14px; border-radius: 20px;
    font-size: 0.75rem;
    color: #4338ca;
    font-weight: 600;
}

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tags span {
    font-size: 0.68rem; font-weight: 600; padding: 3px 9px;
    background: #f5f5f5; border-radius: 4px; color: #666;
}

/* ── Footer ── */
footer {
    text-align: center; padding: 28px 0 12px;
    font-size: 0.72rem; color: #bbb;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .bento { grid-template-columns: 1fr 1fr; }
    .card-photo { grid-column: 1; grid-row: 1; min-height: 200px; }
    .card-intro { grid-column: 1 / 3; grid-row: 2; }
    .card-github { grid-column: 2; grid-row: 1; }
    .card-scholar { grid-column: 1; grid-row: 3; }
    .card-linkedin { grid-column: 2; grid-row: 3; }
    .card-news { grid-column: 1 / 3; grid-row: 4; }
    .card-pub { grid-column: 1 / 3; grid-row: 5; }
    .card-exp { grid-column: 1 / 3; grid-row: 6; }
    .card-edu { grid-column: 1 / 3; grid-row: 7; }
    .card-skills { grid-column: 1 / 3; grid-row: 8; }
}

@media (max-width: 480px) {
    body { padding: 10px; }
    .bento { gap: 8px; }
    .name-logo { height: 36px; }
}