#reading-percentage-widget {
  /* Local variables */
  --widget-bg: #1a1a1a;
  --widget-text-color: var(--text-color);
  --widget-padding: 8px 14px;
  --widget-radius: 20px;
  --widget-font-size: 14px;
  --widget-shadow: 0 0 10px rgba(0,0,0,0.6);

  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);

  background-color: var(--widget-bg);
  color: var(--widget-text-color);
  padding: var(--widget-padding);
  border-radius: var(--widget-radius);
  font-size: var(--widget-font-size);
  font-family: sans-serif;
  box-shadow: var(--widget-shadow);
  z-index: 10000;
  pointer-events: none;
}


/* --- LIGHT THEME OVERRIDES --- */
html.light #reading-percentage-widget {
  --widget-bg: #ffffff;
  --widget-text-color: var(--text-color);
  --widget-shadow: 0 2px 10px rgba(0,0,0,0.15);
}