/* General styles for JeunInfo Reading Progress */
#ji-rp-root { pointer-events: none; }
#ji-rp-root .ji-line { position: fixed; left:0; top:0; height:5px; background: linear-gradient(90deg,#ff1a1a,#660000); width:0; z-index:999999999; transition: width .12s ease-out, opacity .2s; }
#ji-rp-root .ji-percent { position: fixed; top:6px; right:12px; font-size:12px; font-weight:bold; color:#ff0000; background:rgba(0,0,0,0.5); padding:3px 7px; border-radius:6px; pointer-events:none; opacity:0; transition:opacity .2s; z-index:999999999;}

/* Circle base hidden; JS will position based on mode */
#ji-rp-root .ji-circle { position:fixed; width:55px; height:55px; z-index:999999999; opacity:0; transition:opacity .3s; pointer-events:none; }
#ji-rp-root .ji-circle svg { transform: rotate(-90deg); width:100%; height:100%; }
#ji-rp-root .ji-circle .ji-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:13px; font-weight:bold; color:#ff0000; text-shadow:0 0 3px #fff; }

/* Floating (mode1) default pos bottom-right */
#ji-rp-root.mode1 .ji-circle { bottom:20px; right:20px; }

/* Image-attached (mode2) default pos top-left */
#ji-rp-root.mode2 .ji-circle { top:20px; left:20px; }

/* Double (mode3): circle top-left + line top */
#ji-rp-root.mode3 .ji-circle { top:20px; left:20px; }
#ji-rp-root.mode3 .ji-line { top:0; }

/* Line only (mode4): line top + percent visible */
#ji-rp-root.mode4 .ji-line { top:0; }
#ji-rp-root.mode4 .ji-percent { opacity:1; }