/* ============================================
   PhD Student Personal Website — Style System
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --color-bg: #ffffff;
  --color-bg-secondary: #f8f9fb;
  --color-text: #1a1a2e;
  --color-text-secondary: #555770;
  --color-text-muted: #8b8da3;
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-light: #eff6ff;
  --color-border: #e5e7eb;
  --color-border-light: #f0f1f3;
  --color-award: #d97706;
  --color-award-bg: #fffbeb;
  --color-success: #059669;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.25rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --max-width: 1100px;
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-pill: 100px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  --color-code-bg: #1a1a2e;
  --color-code-text: #e2e8f0;

  --color-thumb-grad-1: #e0e7ff;
  --color-thumb-grad-2: #c7d2fe;
  --color-thumb-grad-3: #a5b4fc;
  --color-thumb-placeholder: #6366f1;

  --color-paper: #dc2626;
  --color-paper-bg: #fef2f2;
  --color-paper-border: #fecaca;

  --color-project: #7c3aed;
  --color-project-bg: #faf5ff;
  --color-project-border: #e9d5ff;

  --color-bibtex: #0f766e;
  --color-bibtex-bg: #f0fdfa;
  --color-bibtex-border: #99f6e4;
}

:root[data-theme="dark"] {
  --color-bg: #12141c;
  --color-bg-secondary: #1b1e29;
  --color-text: #e7e8ee;
  --color-text-secondary: #a4a7b8;
  --color-text-muted: #767a8c;
  --color-accent: #60a5fa;
  --color-accent-hover: #93c5fd;
  --color-accent-light: rgba(96,165,250,0.14);
  --color-border: #2c303e;
  --color-border-light: #22252f;
  --color-award: #fbbf24;
  --color-award-bg: rgba(251,191,36,0.12);
  --color-success: #34d399;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 2px 10px rgba(0,0,0,0.35);
  --shadow-lg: 0 6px 20px rgba(0,0,0,0.45);

  --color-code-bg: #0a0b10;
  --color-code-text: #e2e8f0;

  --color-thumb-grad-1: #1e2340;
  --color-thumb-grad-2: #2a2f55;
  --color-thumb-grad-3: #383e70;
  --color-thumb-placeholder: #a5b4fc;

  --color-paper: #f87171;
  --color-paper-bg: rgba(248,113,113,0.12);
  --color-paper-border: rgba(248,113,113,0.35);

  --color-project: #c4b5fd;
  --color-project-bg: rgba(167,139,250,0.14);
  --color-project-border: rgba(167,139,250,0.35);

  --color-bibtex: #2dd4bf;
  --color-bibtex-bg: rgba(45,212,191,0.12);
  --color-bibtex-border: rgba(45,212,191,0.35);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-family); font-size:var(--font-size-base); line-height:1.7; color:var(--color-text); background:var(--color-bg); transition:background-color var(--transition-base), color var(--transition-base); }
a { color:var(--color-accent); text-decoration:none; transition:color var(--transition-fast); }
a:hover { color:var(--color-accent-hover); }
img { max-width:100%; height:auto; display:block; }

.container { max-width:var(--max-width); margin:0 auto; padding:0 var(--space-xl); }

/* Animated background sketches (toggled in js/background.js) */
.bg-decor { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.bg-decor__icon { position:absolute; fill:none; stroke:var(--color-text-muted); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; opacity:0.16; animation-name:bg-float; animation-timing-function:ease-in-out; animation-iteration-count:infinite; will-change:transform; }
:root[data-theme="dark"] .bg-decor__icon { opacity:0.14; }
@keyframes bg-float {
  0%   { transform:translate(0,0) rotate(0deg); }
  25%  { transform:translate(3vw,-4vh) rotate(6deg); }
  50%  { transform:translate(-2vw,-7vh) rotate(-5deg); }
  75%  { transform:translate(-3.5vw,-2vh) rotate(4deg); }
  100% { transform:translate(0,0) rotate(0deg); }
}
@media (prefers-reduced-motion:reduce) {
  .bg-decor { display:none; }
}

/* Theme Toggle */
.theme-toggle { position:fixed; top:var(--space-lg); right:var(--space-lg); z-index:100; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--color-border); background:var(--color-bg); color:var(--color-text-secondary); cursor:pointer; transition:all var(--transition-fast); box-shadow:var(--shadow-sm); }
.theme-toggle:hover { color:var(--color-accent); border-color:var(--color-accent); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.theme-toggle__icon { width:18px; height:18px; fill:currentColor; }
.theme-toggle__icon--moon { display:none; }
:root[data-theme="dark"] .theme-toggle__icon--sun { display:none; }
:root[data-theme="dark"] .theme-toggle__icon--moon { display:block; }

/* Header */
.site-header { padding:var(--space-3xl) 0 var(--space-2xl); }
.profile { display:flex; gap:var(--space-2xl); align-items:flex-start; }
.profile__photo-wrapper { flex-shrink:0; }
.profile__photo { width:180px; height:180px; border-radius:50%; object-fit:cover; border:3px solid var(--color-border-light); box-shadow:var(--shadow-md); transition:transform var(--transition-base), box-shadow var(--transition-base); }
.profile__photo:hover { transform:scale(1.03); box-shadow:var(--shadow-lg); }
.profile__info { flex:1; min-width:0; }
.profile__name { font-size:var(--font-size-3xl); font-weight:700; letter-spacing:-0.02em; line-height:1.2; margin-bottom:var(--space-xs); }
.profile__title { font-size:var(--font-size-lg); font-weight:400; color:var(--color-text-secondary); margin-bottom:var(--space-lg); }
.profile__bio { color:var(--color-text-secondary); line-height:1.8; margin-bottom:var(--space-lg); }
.profile__bio a { font-weight:500; }

/* Social Links */
.social-links { display:flex; gap:var(--space-sm); flex-wrap:wrap; }
.social-links__item { display:inline-flex; align-items:center; gap:var(--space-xs); padding:0.4rem 0.85rem; border-radius:var(--border-radius-pill); background:var(--color-bg-secondary); color:var(--color-text-secondary); font-size:var(--font-size-sm); font-weight:500; transition:all var(--transition-fast); border:1px solid var(--color-border-light); }
.social-links__item:hover { background:var(--color-accent-light); color:var(--color-accent); border-color:var(--color-accent); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.social-links__item svg { width:16px; height:16px; fill:currentColor; flex-shrink:0; }

/* Section */
.section { padding:var(--space-2xl) 0; border-top:1px solid var(--color-border); }
.section__title { font-size:var(--font-size-xl); font-weight:700; margin-bottom:var(--space-lg); letter-spacing:-0.01em; }

/* News */
.news-list { list-style:none; }
.news-item { display:flex; gap:var(--space-md); padding:var(--space-sm) 0; align-items:center; }
.news-item + .news-item { border-top:1px solid var(--color-border-light); }
.news-item__date { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:80px; height:26px; padding:0 var(--space-sm); border-radius:var(--border-radius-pill); background:var(--color-accent-light); color:var(--color-accent); font-size:var(--font-size-xs); font-weight:700; letter-spacing:0.02em; font-variant-numeric:tabular-nums; text-align:center; }
.news-item__text { color:var(--color-text-secondary); font-size:var(--font-size-base); }
.news-item__text a { font-weight:500; }
.news-toggle { display:inline-flex; align-items:center; gap:var(--space-xs); margin-top:var(--space-md); padding:0.35rem 0.9rem; border:1px solid var(--color-border); border-radius:var(--border-radius-pill); background:var(--color-bg); color:var(--color-text-secondary); font-size:var(--font-size-sm); font-weight:500; cursor:pointer; transition:all var(--transition-fast); font-family:var(--font-family); }
.news-toggle:hover { background:var(--color-bg-secondary); border-color:var(--color-accent); color:var(--color-accent); }

/* Publications */
.pub-year-heading { font-size:var(--font-size-lg); font-weight:700; margin-top:var(--space-xl); margin-bottom:var(--space-md); padding-bottom:var(--space-sm); border-bottom:2px solid var(--color-accent); display:inline-block; }
.pub-year-heading:first-child { margin-top:0; }
.pub-list { list-style:none; display:flex; flex-direction:column; gap:var(--space-lg); }
.pub-item { padding:var(--space-lg); border-radius:var(--border-radius-lg); border:1px solid var(--color-border-light); background:var(--color-bg); transition:all var(--transition-base); }
.pub-item:hover { border-color:var(--color-border); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.pub-item__row { display:flex; align-items:center; gap:var(--space-lg); }
.pub-item__thumbnail { flex-shrink:0; width:220px; height:140px; border-radius:var(--border-radius); background:linear-gradient(135deg,var(--color-thumb-grad-1) 0%,var(--color-thumb-grad-2) 50%,var(--color-thumb-grad-3) 100%); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.pub-item__thumbnail img { width:100%; height:100%; object-fit:cover; }
.pub-item__badge { display:inline-block; padding:2px 10px; border-radius:var(--border-radius-pill); background:var(--color-accent-light); color:var(--color-accent); font-size:var(--font-size-xs); font-weight:700; letter-spacing:0.02em; margin-bottom:var(--space-xs); }
.pub-item__thumbnail-placeholder { font-size:var(--font-size-xs); color:var(--color-thumb-placeholder); font-weight:600; text-align:center; padding:var(--space-sm); line-height:1.3; opacity:0.7; }
.pub-item__content { flex:1; min-width:0; }
.pub-item__title { font-size:var(--font-size-md); font-weight:600; line-height:1.4; margin-bottom:var(--space-xs); }
.pub-item__authors { font-size:var(--font-size-sm); color:var(--color-text-secondary); line-height:1.5; margin-bottom:var(--space-xs); }
.pub-item__authors a { color:var(--color-text-secondary); }
.pub-item__authors a:hover { color:var(--color-accent); }
.pub-item__authors strong { color:var(--color-text); font-weight:600; }
.pub-item__venue { font-size:var(--font-size-sm); color:var(--color-text-muted); font-style:italic; margin-bottom:var(--space-xs); }
.pub-item__award { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:var(--border-radius-pill); background:var(--color-award-bg); color:var(--color-award); font-size:var(--font-size-xs); font-weight:600; margin-bottom:var(--space-sm); }
.pub-item__award::before { content:'★'; font-size:10px; }
.pub-item__links { display:flex; gap:var(--space-sm); flex-wrap:wrap; margin-top:var(--space-sm); }
.pub-link { display:inline-flex; align-items:center; gap:6px; padding:4px 8px 4px 12px; border-radius:var(--border-radius-pill); font-size:var(--font-size-xs); font-weight:600; text-transform:uppercase; letter-spacing:0.03em; transition:all var(--transition-fast); border:1px solid var(--color-border); color:var(--color-text-secondary); background:var(--color-bg); }
.pub-link svg { width:14px; height:14px; flex-shrink:0; fill:currentColor; }
.pub-link:hover { color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.pub-link--bibtex { cursor:pointer; }

.pub-link--paper { color:var(--color-paper); border-color:var(--color-paper-border); background:var(--color-paper-bg); }
.pub-link--paper:hover { background:var(--color-paper); border-color:var(--color-paper); }

.pub-link--project { color:var(--color-project); border-color:var(--color-project-border); background:var(--color-project-bg); }
.pub-link--project:hover { background:var(--color-project); border-color:var(--color-project); }

.pub-link--code { color:var(--color-text-secondary); border-color:var(--color-border); background:var(--color-bg-secondary); }
.pub-link--code:hover { background:var(--color-text); border-color:var(--color-text); color:var(--color-bg); }

.pub-link--bibtex { color:var(--color-bibtex); border-color:var(--color-bibtex-border); background:var(--color-bibtex-bg); }
.pub-link--bibtex:hover { background:var(--color-bibtex); border-color:var(--color-bibtex); }

/* BibTeX Popover */
.bibtex-wrapper { position:relative; }
.bibtex-popover { display:none; margin-top:var(--space-sm); padding:var(--space-md); background:var(--color-code-bg); color:var(--color-code-text); border-radius:var(--border-radius); position:relative; animation:fadeSlideIn 0.2s ease; }
.bibtex-popover.active { display:block; }
.bibtex-popover code { display:block; font-family:'SF Mono','Fira Code','Consolas',monospace; font-size:var(--font-size-xs); line-height:1.6; white-space:pre-wrap; word-break:break-all; }
@keyframes fadeSlideIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.bibtex-copy { position:absolute; top:var(--space-sm); right:var(--space-sm); padding:4px 10px; border:1px solid rgba(255,255,255,0.2); border-radius:var(--border-radius); background:rgba(255,255,255,0.1); color:#e2e8f0; font-size:var(--font-size-xs); font-weight:500; cursor:pointer; transition:all var(--transition-fast); font-family:var(--font-family); }
.bibtex-copy:hover { background:rgba(255,255,255,0.2); }
.bibtex-copy.copied { background:var(--color-success); border-color:var(--color-success); color:#fff; }

/* Footer */
.site-footer { padding:var(--space-2xl) 0; border-top:1px solid var(--color-border); text-align:center; }
.site-footer__text { font-size:var(--font-size-sm); color:var(--color-text-muted); }
.back-to-top { display:inline-flex; align-items:center; gap:var(--space-xs); margin-top:var(--space-sm); font-size:var(--font-size-sm); font-weight:500; color:var(--color-text-muted); }
.back-to-top:hover { color:var(--color-accent); }

/* Loading */
.loading { display:flex; align-items:center; justify-content:center; padding:var(--space-2xl); color:var(--color-text-muted); font-size:var(--font-size-sm); }
.loading::after { content:''; width:18px; height:18px; margin-left:var(--space-sm); border:2px solid var(--color-border); border-top-color:var(--color-accent); border-radius:50%; animation:spin 0.6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Responsive */
@media (max-width:768px) {
  .container { padding:0 var(--space-md); }
  .site-header { padding:var(--space-xl) 0 var(--space-lg); }
  .profile { flex-direction:column; align-items:center; text-align:center; gap:var(--space-lg); }
  .profile__photo { width:140px; height:140px; }
  .profile__name { font-size:var(--font-size-2xl); }
  .social-links { justify-content:center; }
  .news-item { flex-direction:column; gap:var(--space-xs); }
  .pub-item { padding:var(--space-md); }
  .pub-item__row { flex-direction:column; }
  .pub-item__thumbnail { width:100%; height:140px; }
}
@media (max-width:480px) {
  .profile__name { font-size:var(--font-size-xl); }
  .profile__photo { width:110px; height:110px; }
  .section__title { font-size:var(--font-size-lg); }
}