html { scroll-behavior: smooth; }
:target { scroll-margin-top: 90px; }
#about, #publication { scroll-margin-top: 90px; }

:root {
  --hz-bg: #ffffff;
  --hz-bg-elev: #ffffff;
  --hz-header-bg: rgba(255,255,255,0.72);
  --hz-fg: #111827;
  --hz-fg-muted: #6b7280;
  --hz-border: rgba(0,0,0,0.08);
  --hz-accent: #ee1c25;
  --hz-accent-soft: rgba(238,28,37,0.10);
  --hz-card-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --hz-card-shadow-hover: 0 4px 8px rgba(0,0,0,0.06), 0 12px 28px rgba(0,0,0,0.10);
  --hz-radius: 12px;
  --hz-radius-sm: 8px;
}
html[data-theme="dark"] {
  --hz-bg: #0b1020;
  --hz-bg-elev: #131a2e;
  --hz-header-bg: rgba(11,16,32,0.72);
  --hz-fg: #e6ebf5;
  --hz-fg-muted: #9aa3b2;
  --hz-border: rgba(255,255,255,0.08);
  --hz-accent: #ff6b6b;
  --hz-accent-soft: rgba(255,107,107,0.14);
  --hz-card-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 4px 12px rgba(0,0,0,0.30);
  --hz-card-shadow-hover: 0 4px 8px rgba(0,0,0,0.35), 0 12px 28px rgba(0,0,0,0.45);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --hz-bg: #0b1020;
    --hz-bg-elev: #131a2e;
    --hz-header-bg: rgba(11,16,32,0.72);
    --hz-fg: #e6ebf5;
    --hz-fg-muted: #9aa3b2;
    --hz-border: rgba(255,255,255,0.08);
    --hz-accent: #ff6b6b;
    --hz-accent-soft: rgba(255,107,107,0.14);
    --hz-card-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 4px 12px rgba(0,0,0,0.30);
    --hz-card-shadow-hover: 0 4px 8px rgba(0,0,0,0.35), 0 12px 28px rgba(0,0,0,0.45);
  }
}
body {
  background: var(--hz-bg) !important;
  color: var(--hz-fg) !important;
  transition: background 0.25s ease, color 0.25s ease;
}
h1, h2, h3, h4, h5, h6, heading { color: var(--hz-fg) !important; }
p, li, td, div { color: var(--hz-fg); }
a { color: var(--hz-accent); }
a:hover { color: var(--hz-accent); text-decoration: underline; }
h2 { border-bottom: 2px solid var(--hz-border); padding-bottom: 6px; margin-top: 32px; }

/* Sticky, glassy header */
.container-fluid.header-holder {
  position: sticky !important;
  top: 0;
  z-index: 900;
  background: var(--hz-header-bg) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hz-border);
  transition: background 0.25s ease, border-color 0.25s ease;
}
/* Accent stripe under the header */
.container-fluid.header-holder::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg, var(--hz-accent) 0%, var(--hz-accent) 40%, transparent 100%);
  opacity: 0.7;
  pointer-events: none;
}
.main-menu a { color: var(--hz-fg) !important; }
.main-menu a:hover { color: var(--hz-accent) !important; }

/* Avatar */
img[alt="Hang Zhang"] { border-radius: 14px !important; border: none !important; box-shadow: var(--hz-card-shadow); }

/* Pill badges */
.hz-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.hz-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; font-size: 12px; font-weight: 500;
  border-radius: 999px;
  background: var(--hz-accent-soft);
  color: var(--hz-accent);
  border: 1px solid transparent;
}
.hz-badge.muted { background: transparent; color: var(--hz-fg-muted); border-color: var(--hz-border); }

/* Social icons — match theme link blue (#4080bf) */
.fa-envelope-square, .fa-linkedin-square, .fa-github-square,
.ai-google-scholar-square, .ai-cv-square, .fab.fa-zhihu {
  transition: color 0.15s ease, transform 0.15s ease;
  color: #4080bf;
}
html[data-theme="dark"] .fa-envelope-square,
html[data-theme="dark"] .fa-linkedin-square,
html[data-theme="dark"] .fa-github-square,
html[data-theme="dark"] .ai-google-scholar-square,
html[data-theme="dark"] .ai-cv-square,
html[data-theme="dark"] .fab.fa-zhihu { color: #6ba6d6; }
.fa-envelope-square:hover, .fa-linkedin-square:hover, .fa-github-square:hover,
.ai-google-scholar-square:hover, .ai-cv-square:hover, .fab.fa-zhihu:hover {
  color: var(--hz-accent);
  transform: translateY(-2px);
}

/* News as clean list with expander */
.news { overflow: visible !important; height: auto !important; padding-top: 12px !important; }
.news ul { list-style: none; padding-left: 0; margin: 0; }
.news li {
  padding: 10px 2px;
  border-bottom: 1px dashed var(--hz-border);
  color: var(--hz-fg);
  line-height: 1.5;
}
.news li:last-child { border-bottom: none; }
.news span { color: var(--hz-accent) !important; font-weight: 600; }
.news li.hz-hidden { display: none; }
.hz-news-toggle {
  display: inline-block; margin-top: 10px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--hz-accent-soft); color: var(--hz-accent);
  border: 1px solid transparent; cursor: pointer;
  font-size: 13px; font-weight: 500;
  transition: border-color 0.15s ease;
}
.hz-news-toggle:hover { border-color: var(--hz-accent); }

/* Publication cards */
table.tp { border-collapse: separate; border-spacing: 0 18px; width: 100%; }
table.tp > tbody > tr {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
  background: var(--hz-bg-elev);
  border: 1px solid var(--hz-border);
  border-radius: var(--hz-radius);
  padding: 18px;
  box-shadow: var(--hz-card-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
table.tp > tbody > tr:hover {
  transform: translateY(-2px);
  box-shadow: var(--hz-card-shadow-hover);
}
table.tp > tbody > tr > td { display: block; padding: 0 !important; width: auto !important; }
table.tp img {
  width: 100% !important;
  height: auto !important;
  max-height: 190px;
  object-fit: cover;
  border-radius: var(--hz-radius-sm);
  border: 1px solid var(--hz-border) !important;
}
table.tp heading {
  display: block; font-weight: 600; font-size: 17px; line-height: 1.35;
  color: var(--hz-fg); margin-bottom: 4px;
}
table.tp em { color: var(--hz-fg-muted); }
.paper a.button {
  display: inline-block;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--hz-border);
  padding: 3px 10px;
  margin: 2px 4px 2px 0;
  font-size: 13px;
  color: var(--hz-fg-muted);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.paper a.button:hover {
  background: var(--hz-accent-soft);
  border-color: var(--hz-accent);
  color: var(--hz-accent);
  text-decoration: none;
}
.paper pre {
  background: var(--hz-bg);
  border: 1px solid var(--hz-border);
  border-radius: 6px;
  padding: 10px;
  font-size: 12px;
  overflow-x: auto;
  color: var(--hz-fg);
}
.paper i { color: var(--hz-fg-muted); }

@media (max-width: 720px) {
  table.tp > tbody > tr { grid-template-columns: 1fr; }
  table.tp img { max-height: 220px; }
}

/* Floating theme toggle */
.hz-theme-toggle {
  position: fixed; right: 20px; bottom: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--hz-border);
  background: var(--hz-bg-elev);
  color: var(--hz-fg);
  cursor: pointer;
  box-shadow: var(--hz-card-shadow);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; z-index: 1000;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hz-theme-toggle:hover { transform: scale(1.08); box-shadow: var(--hz-card-shadow-hover); }

/* Venue chips */
.hz-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.hz-chip {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.3px;
  border-radius: 999px;
  background: var(--hz-accent-soft);
  color: var(--hz-accent);
  border: 1px solid transparent;
  line-height: 1.5;
}
.hz-chip.v-arxiv   { background: rgba(107,114,128,0.15); color: #6b7280; }
.hz-chip.v-cvpr    { background: rgba(37,99,235,0.14);   color: #2563eb; }
.hz-chip.v-cvprw   { background: rgba(37,99,235,0.10);   color: #2563eb; }
.hz-chip.v-eccv    { background: rgba(16,185,129,0.14);  color: #059669; }
.hz-chip.v-eccvw   { background: rgba(16,185,129,0.10);  color: #059669; }
.hz-chip.v-iccv    { background: rgba(139,92,246,0.14);  color: #7c3aed; }
.hz-chip.v-iclr    { background: rgba(244,114,182,0.14); color: #db2777; }
.hz-chip.v-neurips { background: rgba(234,88,12,0.14);   color: #ea580c; }
.hz-chip.v-icml    { background: rgba(20,184,166,0.14);  color: #0d9488; }
.hz-chip.v-pami    { background: rgba(217,119,6,0.14);   color: #b45309; }
.hz-chip.v-oral    { background: rgba(238,28,37,0.14);   color: var(--hz-accent); }
html[data-theme="dark"] .hz-chip.v-arxiv { background: rgba(154,163,178,0.16); color: #cbd5e1; }
html[data-theme="dark"] .hz-chip.v-cvpr, html[data-theme="dark"] .hz-chip.v-cvprw { color: #60a5fa; }
html[data-theme="dark"] .hz-chip.v-eccv, html[data-theme="dark"] .hz-chip.v-eccvw { color: #34d399; }
html[data-theme="dark"] .hz-chip.v-iccv    { color: #a78bfa; }
html[data-theme="dark"] .hz-chip.v-iclr    { color: #f472b6; }
html[data-theme="dark"] .hz-chip.v-neurips { color: #fb923c; }
html[data-theme="dark"] .hz-chip.v-icml    { color: #2dd4bf; }
html[data-theme="dark"] .hz-chip.v-pami    { color: #fbbf24; }

/* Copy BibTeX button */
.paper pre.hz-bib { position: relative; padding-right: 62px; }
.hz-copy {
  position: absolute;
  top: 6px; right: 6px;
  padding: 3px 10px;
  font-size: 11px; font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--hz-border);
  background: var(--hz-bg-elev);
  color: var(--hz-fg-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.hz-copy:hover {
  background: var(--hz-accent-soft);
  color: var(--hz-accent);
  border-color: var(--hz-accent);
}

/* Section anchor icons on hover */
h2 { position: relative; }
.hz-anchor {
  margin-left: 10px;
  font-size: 0.85em;
  color: var(--hz-fg-muted);
  opacity: 0;
  text-decoration: none;
  transition: opacity 0.15s ease, color 0.15s ease;
}
h2:hover .hz-anchor { opacity: 0.75; }
.hz-anchor:hover { color: var(--hz-accent); opacity: 1 !important; text-decoration: none; }