/* Ao Liu — professional academic theme (editorial, retina-ready, responsive) */
:root{
  --ink:#16181d; --muted:#59616e; --accent:#1d4ed8; --rule:#e4e7ec; --bg:#fff; --subtle:#f6f7f9;
}

/* Explicit theme classes (highest priority) */
html.dark {
  --ink:#e8eaed; --muted:#9aa0a6; --accent:#6ea8fe; --rule:#3c4043; --bg:#1a1c1e; --subtle:#24272a;
  background:#1a1c1e !important;
}
html.dark body{background:#1a1c1e !important}
html.dark .chip.pdf{background:#1e2a3e !important;color:#93c5fd !important}
html.dark .chip.hl{background:#1e1f3a !important;color:#a5b4fc !important}
html.dark .btn:hover{background:#24272a}
html.dark .btn.primary:hover{background:#1e3a5f}
html.dark .portrait{box-shadow:0 10px 30px rgba(0,0,0,.3)}
html.dark .meta a{color:var(--muted)}
html.dark .meta a:hover{color:var(--accent)}

html.light {
  --ink:#16181d; --muted:#59616e; --accent:#1d4ed8; --rule:#e4e7ec; --bg:#fff; --subtle:#f6f7f9;
  background:#fff !important;
}
html.light body{background:#fff !important}
html.light .chip.pdf{background:#eaf2fb !important;color:#1d4ed8 !important}
html.light .chip.hl{background:#eef1ff !important;color:var(--accent) !important}

/* Default (auto) light theme - when no explicit class */
html:not(.dark):not(.light) {
  --ink:#16181d; --muted:#59616e; --accent:#1d4ed8; --rule:#e4e7ec; --bg:#fff; --subtle:#f6f7f9;
  background:#fff !important;
}
html:not(.dark):not(.light) body{background:#fff !important}

/* Auto-detect: only when no explicit class */
@media (prefers-color-scheme: dark) {
  html:not(.dark):not(.light) {
    --ink:#e8eaed; --muted:#9aa0a6; --accent:#6ea8fe; --rule:#3c4043; --bg:#1a1c1e; --subtle:#24272a;
    background:#1a1c1e !important;
  }
  html:not(.dark):not(.light) body{background:#1a1c1e !important}
  html:not(.dark):not(.light) .chip.pdf{background:#1e2a3e !important;color:#93c5fd !important}
  html:not(.dark):not(.light) .chip.hl{background:#1e1f3a !important;color:#a5b4fc !important}
  html:not(.dark):not(.light) .btn:hover{background:#24272a}
  html:not(.dark):not(.light) .btn.primary:hover{background:#1e3a5f}
  html:not(.dark):not(.light) .portrait{box-shadow:0 10px 30px rgba(0,0,0,.3)}
  html:not(.dark):not(.light) .meta a{color:var(--muted)}
  html:not(.dark):not(.light) .meta a:hover{color:var(--accent)}
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;font-size:16px}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);line-height:1.7;font-size:1rem;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Top bar */
.topbar{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--rule)}
.topbar-inner{max-width:1200px;margin:0 auto;padding:0 2rem;height:3.75rem;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;font-size:1.0625rem;color:var(--ink);display:flex;align-items:center;gap:0.5625rem}
.brand:hover{text-decoration:none}
.brand .mk{width:0.5rem;height:1.125rem;background:var(--accent);border-radius:1px}
nav{display:flex;align-items:center;gap:0.125rem}
nav a{color:var(--muted);font-size:.875rem;font-weight:500;padding:0.5rem .875rem;border-radius:6px}
nav a:hover{color:var(--ink);text-decoration:none;background:var(--subtle)}
nav a.active{color:var(--ink)}
nav a.active::after{content:"";display:block;height:2px;background:var(--accent);border-radius:2px;margin-top:3px}

/* Layout */
.layout{max-width:1200px;margin:0 auto;padding:1em 2rem 1.5rem;display:grid;grid-template-columns:14.6875rem 1fr}
.sidebar{border-right:1px solid var(--rule);padding-right:.375rem;align-self:start}
.main{padding-left:2.75rem;min-width:0}

/* Sidebar profile */
.profile{position:sticky;top:5.25rem}
.portrait{width:10.5rem;height:10.5rem;border-radius:50%;object-fit:cover;display:block;border:1px solid var(--rule);box-shadow:0 10px 30px rgba(20,33,61,.10);margin:0 auto}
.pname{font-family:Georgia,"Times New Roman","Songti SC",serif;font-size:1.625rem;font-weight:700;letter-spacing:.01em;margin-top:1.25rem;line-height:1.25}
.ptitle{font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-top:0.4375rem}
.pvariant{font-size:.875rem;color:var(--muted);margin-top:0.25rem}
.pdiv{height:1px;background:var(--rule);margin:1.25rem 0}
.pblurb{font-size:.875rem;color:var(--muted)}
.pblurb b{color:var(--ink);font-weight:600}
.meta{list-style:none;font-size:.875rem}
.meta li{display:flex;gap:.75rem;align-items:baseline;padding:0.3125rem 0;color:var(--muted)}
.meta i{width:1.125rem;text-align:center;color:var(--muted)}
.meta a{color:var(--muted)}
.meta a:hover{color:var(--accent)}
.btnrow{display:flex;flex-direction:column;gap:.5625rem;margin-top:0.375rem}
.btn{display:flex;align-items:center;gap:.625rem;border:1px solid var(--rule);background:var(--bg);color:var(--ink);padding:.625rem .875rem;border-radius:8px;font-size:.84375rem;font-weight:600;transition:border-color .15s,background .15s,color .15s}
.btn i{width:1rem;text-align:center;color:var(--muted)}
.btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none;background:#fbfcff}
.btn:hover i{color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{opacity:.92;color:#fff}
.btn.primary i{color:#fff}

/* Main content */
.sec{padding:0 0 1.875rem}
.sec+.sec{border-top:1px solid var(--rule);padding-top:0}
#work-experience + .sec{border-top:1px solid var(--rule);padding-top:0}
.sec>.item,.sec>.labels,.sec>.line,#publications .subtitle,#publications ol.pubs{padding-left:2rem}
.kicker{font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.625rem;margin-bottom:1.125rem}
.kicker::after{content:"";flex:1;height:1px;background:var(--rule)}
.item{display:grid;grid-template-columns:9.375rem 1fr;gap:1.125rem;padding:.625rem 0}
.when{font-size:1rem;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px;font-weight:700}
.role{font-weight:700}
.org{color:var(--muted)}
.normal{font-weight:400}
.labels{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:0.25rem;line-height:1.7}
.tag{background:var(--subtle);border:1px solid var(--rule);border-radius:20px;padding:0.25rem .75rem;font-size:.8125rem;color:var(--ink)}
.sec .tag{background:none;border:none;border-radius:0;padding:0;font-size:.771875rem;color:var(--muted);white-space:nowrap}
.sec .tag:not(:first-child)::before{content:"·";margin-right:.25rem;color:var(--muted)}
.sec .labels{gap:.25rem}
.sec .tag b{color:var(--muted);font-weight:500}
.tag b{color:var(--accent);font-weight:600}
.selpub{padding:0.75rem 0}
.selpub+.selpub{border-top:1px dashed #dfe3ea}
.pubtitle{font-weight:700;font-size:.96875rem}
.venue{color:var(--ink);font-size:.90625rem}
.vword{color:var(--muted)}
.chip{display:inline-block;border-radius:5px;padding:0 .5rem;font-size:.75rem;font-weight:700;margin:0 2px;vertical-align:1px}
.chip.pdf{background:#eaf2fb;color:var(--accent)}
.chip.hl{background:#eef1ff;color:var(--accent)}
.more{margin-top:.875rem;font-size:.90625rem;font-weight:600}
.line{display:flex;gap:.5rem;align-items:flex-start;padding:0.375rem 0;font-size:.9375rem}
.line>i{width:1.125rem;text-align:center;color:var(--accent);margin-top:4px;font-size:.8125rem}

/* Publications page */
.main .pagehead{max-width:none;margin:0;padding:1.25rem 0 .5rem}
.main>.sec:first-child .pagehead{padding-top:0}
.main .domain{max-width:none;margin:0;padding:1.25rem 0 .5rem}
#publications{border-top:1px solid var(--rule)}
.pagehead{max-width:1200px;margin:0 auto;padding:2.125rem 2rem 0.5rem}
.pagehead h1,.pagehead h2{font-size:1.625rem;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:.625rem}
.pagehead h1 i,.pagehead h2 i{color:var(--accent);font-size:1.25rem;width:1.375rem;text-align:center}
.pagehead h1 small{font-size:.90625rem;font-weight:400;color:var(--muted);letter-spacing:normal;align-self:center}
.pagehead h2{font-size:1.5rem;font-weight:600}
.pagehead h1{font-size:1.5rem;font-weight:600}
.pagehead p{color:var(--muted);font-size:.90625rem;margin-top:0.25rem}
.domain{max-width:1200px;margin:0 auto;padding:1.375rem 2rem 0.5rem}
.main .dtitle{padding-left:2rem}
.dtitle{font-size:1.1875rem;font-weight:700;display:flex;align-items:center;gap:.625rem;margin-bottom:0.25rem}
.dtitle::after{content:"";flex:1;height:1px;background:var(--rule)}
.dtitle i{color:var(--accent);width:1.375rem;text-align:center;font-size:1.25rem}
.subtitle{font-size:.9375rem;font-weight:700;color:var(--ink);margin:1.125rem 0 0.25rem;display:flex;align-items:center;gap:.5rem}
.subtitle i{color:var(--accent);font-size:.875rem;width:1.25rem;text-align:center}
ol.pubs{list-style:none;counter-reset:pub}
ol.pubs>li{position:relative;padding:.8125rem 0 .8125rem 2.625rem;counter-increment:pub;font-size:.90625rem}
ol.pubs>li+li{border-top:1px dashed #dfe3ea}
ol.pubs>li::before{content:counter(pub);position:absolute;left:0;top:0.9375rem;width:1.625rem;height:1.625rem;border-radius:50%;background:var(--subtle);color:var(--accent);font-size:.8125rem;font-weight:700;text-align:center;line-height:1.625rem}
.authors u{text-decoration:none;border-bottom:1px dotted var(--accent)}
.ptitle{font-weight:600}
.note{font-size:.90625rem}
.back{margin:1.625rem auto 0;max-width:1200px;padding:0 2rem}
.back a{font-weight:600;font-size:.9375rem}

/* Footer */
.footer{border-top:1px solid var(--rule);text-align:center;color:var(--muted);font-size:.8125rem;padding:1.625rem 1.25rem;margin-top:1.625rem}

/* High-DPI */
@media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi){.portrait{box-shadow:0 8px 24px rgba(20,33,61,.08)}}

/* 2K and larger (e.g., 2560px) */
@media (min-width:1730px) and (max-width:2880px){
  html{font-size:18px}
  .topbar-inner,.layout,.pagehead,.domain,.back{max-width:1500px}
  .layout{grid-template-columns:14.6875rem 1fr}
  .portrait{width:11rem;height:11rem}
}

/* 4K (e.g., 3840px) */
@media (min-width:2881px){
  html{font-size:22px}
  .topbar-inner,.layout,.pagehead,.domain,.back{max-width:2200px}
  .layout{grid-template-columns:14.6875rem 1fr}
  .portrait{width:12.5rem;height:12.5rem}
}

/* Tablet */
@media (max-width:880px){
  .layout{grid-template-columns:1fr;padding-top:1.75rem}
  .sidebar{border-right:none;border-bottom:1px solid var(--rule);padding:0 0 1.625rem}
  .profile{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem}
  .portrait{width:6rem;height:6rem}
  .pname{margin-top:0;font-size:1.375rem}
  .pdiv{display:none}
  .meta{flex:1 1 220px;border-top:1px dashed var(--rule);padding-top:.875rem}
  .btnrow{flex:1 1 100%;flex-direction:row;flex-wrap:wrap}
  .btn{flex:1 1 auto;justify-content:center}
  .btn.primary{flex:1 1 auto}
  .main{padding-left:0;padding-top:1.625rem}
}

/* Mobile */
@media (max-width:600px){
  .topbar-inner{padding:0 1.125rem;height:3.25rem}
  .brand{font-size:.96875rem}
  nav a{padding:0.5rem .625rem;font-size:.84375rem}
  .layout{padding:1.375rem 1.125rem .625rem}
  .profile{display:block;text-align:center}
  .portrait{width:7.25rem;height:7.25rem;margin:0 auto}
  .pname{font-size:1.5rem}
  .ptitle{font-size:.75rem}
  .btnrow{flex-direction:row}
  .btn{flex:1 1 45%}
  .btn.primary{flex:1 1 45%}
  #theme-toggle{flex:none;width:2.5rem;height:2.5rem;padding:0;border-radius:50%;justify-content:center}
  #theme-toggle i{font-size:1rem}
  .sec{padding-bottom:1.5rem}
  .sec+.sec{padding-top:0}
  .pagehead,.domain,.back{padding-left:1.125rem;padding-right:1.125rem}
  .item{grid-template-columns:1fr;gap:2px;padding:.5625rem 0}
  .line{font-size:.90625rem}
  .pagehead,.domain,.back{padding-left:1.125rem;padding-right:1.125rem}
  .pagehead h1{font-size:1.375rem}
  ol.pubs>li{padding:.8125rem 0 .8125rem 2.375rem}
  ol.pubs>li::before{width:1.5rem;height:1.5rem;line-height:1.5rem;font-size:.78125rem}
  .footer{padding:1.25rem .875rem}
}